/* The public pages. They take their palette from ui/tokens.css (the same
   darkroom colours as the tool) but not ui/common.css, which assumes a
   full-viewport app and hides the page scroll. */
/* Dark scrollbars to match the page. */
:root{color-scheme:dark}
*{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}
/* The highlight is a dark green: the light green for links and lines on the
   dark ground, the deep green for filled buttons. Amber stays for warnings. */
:root{--accent:#4fae7c;--accent-ink:#eaf6ee;--accent-fill:#1f7a4d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans)}
a{color:var(--accent)}
a:hover{filter:brightness(1.15)}
.wrap{max-width:46rem;margin:0 auto;padding:0 18px}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
header.site .brand{font:600 15px var(--mono);letter-spacing:.14em;color:var(--accent);text-decoration:none}
header.site nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
header.site nav a{font:13px var(--mono);color:var(--dim);text-decoration:none}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--accent)}
main{padding:36px 0 56px}
h1{font:600 clamp(26px,5vw,36px)/1.2 var(--sans);margin:0 0 14px}
h2{font:600 22px/1.3 var(--sans);margin:38px 0 8px}
h3{font:600 17px/1.4 var(--sans);margin:24px 0 6px}
p,ul,ol{margin:0 0 16px}
li{margin-bottom:6px}
.lede{font-size:19px;color:var(--ink)}
.dim{color:var(--dim)}
.cta{display:inline-block;background:var(--accent-fill);color:var(--accent-ink);font:700 15px var(--mono);
     padding:11px 22px;border-radius:3px;text-decoration:none;margin:6px 0 4px}
.cta:hover{filter:brightness(1.08)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin:0 0 14px}
.card h3{margin-top:0}
.card p{margin-bottom:0}
.meta{font:12px var(--mono);color:var(--dim);margin-bottom:22px}
.note{border-left:3px solid var(--amber);background:var(--panel);padding:10px 14px;margin:0 0 18px;font-size:15px}
details{background:var(--panel);border:1px solid var(--line);border-radius:4px;margin:0 0 10px;padding:0 16px}
summary{cursor:pointer;padding:13px 0;font-weight:600}
details>div{padding:0 0 6px}
code{font:14px var(--mono);background:var(--panel2);padding:1px 5px;border-radius:2px}
table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:15px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
th{font:12px var(--mono);color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
footer.site{border-top:1px solid var(--line);color:var(--dim);font-size:14px}
footer.site .wrap{padding-top:22px;padding-bottom:30px}
footer.site a{color:var(--dim)}
footer.site .cols{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:10px}
@media (max-width:560px){body{font-size:16px}header.site nav{margin-left:0}}