/* Served with Cache-Control: max-age=604800. After editing this file, bump the
   ?v=N query on every <link rel="stylesheet"> (site/index.html, site/404.html,
   templates/status.html), or cached visitors keep the old sheet for a week. */
:root{
--bg:#0f0f0e;--fg:#d9d6cc;--dim:#8b877c;--line:#3a3833;--panel:#171715;
--a1:#8ee08e;--a2:#ffd76e;--a3:#8fb8ff;--a4:#e6a3ff;
--link:#8fb8ff;--anchor:#ffd76e;--hover:#e6a3ff;--ok:#8ee08e;--bad:#ff8f8f;
color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font:17px/1.65 ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;max-width:46rem;margin:0 auto;padding:1.75rem 1.1rem 2.5rem;text-align:center}
body{display:flex;flex-direction:column;min-height:calc(100vh - 5rem)}
body>*{flex:0 0 auto}
main{flex:1 0 auto;text-align:left}

h1{margin:0;font-size:clamp(2rem,10vw,3rem);line-height:1;letter-spacing:.45rem;font-weight:700;text-indent:.1rem}
h1 .a1{color:var(--a1)}
h1 .a2{color:var(--a2)}
h1 .a3{color:var(--a3)}
h1 .a4{color:var(--a4)}
.tag{margin:.55rem 0 0;color:var(--dim);font-size:.8rem}

header nav{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.15rem .85rem;justify-content:center;font-size:.84rem}
header nav a{text-decoration:none}
header nav a::before{content:"[";color:var(--dim)}
header nav a::after{content:"]";color:var(--dim)}

a{color:var(--link);text-decoration:none;text-underline-offset:2px}
a[href^="#"]{color:var(--anchor)}
a:hover{color:var(--hover);text-decoration:underline}
a:focus-visible{outline:1px dashed var(--hover);outline-offset:2px}

hr{border:0;border-top:1px solid var(--line);width:72%;margin:1.5rem auto}
h2{margin:2.3rem 0 .8rem;font-size:1.02rem;letter-spacing:.03em;font-weight:700}
h2::before{content:"## ";color:var(--dim);font-weight:400}
p{margin:0 0 .9rem}
ul,ol{margin:0 0 1rem;padding-left:1.4rem}
li{margin:0 0 .45rem}

.facts{border-collapse:collapse;margin:1.1rem auto;font-size:.9rem;text-align:left;width:100%}
.facts th,.facts td{border:1px solid var(--line);padding:.4rem .7rem;vertical-align:top;overflow-wrap:break-word}
.facts th{background:var(--panel);color:var(--dim);font-weight:400;width:38%}
@media(max-width:30rem){
.facts,.facts tbody,.facts tr,.facts th,.facts td{display:block;width:auto}
.facts tr{border-top:1px solid var(--line);padding:.35rem 0}
.facts tr:first-child{border-top:0}
.facts th{background:none;border:0;padding:0 0 .15rem;color:var(--a2)}
.facts td{border:0;padding:0}
}

.steps{list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.4rem;margin-bottom:.9rem}
.steps li::before{content:"[" counter(s) "]";position:absolute;left:0;color:var(--anchor)}

.note{margin:1.4rem 0 0;padding:.85rem 1rem;border:1px dashed var(--line);background:var(--panel);font-size:.88rem}
pre{margin:1rem 0;padding:.85rem 1rem;border:1px solid var(--line);background:var(--panel);overflow-x:auto;text-align:left;font:inherit;font-size:.86rem;line-height:1.6}
code{color:var(--a1);background:var(--panel);padding:.05em .28em;border-radius:2px;overflow-wrap:anywhere}
pre code{background:none;padding:0;color:inherit}
a{overflow-wrap:anywhere}
.muted{color:var(--dim);font-size:.84rem}

.state{font-weight:700}
.state.ok{color:var(--ok)}
.state.bad{color:var(--bad)}
.state.unknown{color:var(--dim)}

footer{text-align:center;color:var(--dim);font-size:.78rem;border-top:1px solid var(--line);padding-top:1rem}
footer p{margin:0}
.buttons{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:0 0 1rem}
.btn{display:inline-block;border:1px solid var(--line);padding:.08rem .4rem;font-size:.66rem;letter-spacing:.05em;color:var(--dim);background:var(--panel)}