/* Saffron is the page, not an accent. Ink for type, teal only for links in long text. */
:root{--saffron:#F2A516;--deep:#9A5F00;--ink:#121317;--paper:#FFFCF5;--wash:#FBEFD5;--line:#E6D8BA;--teal:#0A6F7C;--mut:#5C5340;
--display:"Anybody","Arial Black",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root{--paper:#17150F;--wash:#221E14;--line:#3B3424;--mut:#B5A98F;--teal:#4FB8C6;--deep:#F2A516;--text:#F1E9D8}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text,var(--ink));font:18px/1.6 var(--body)}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
code{font:.88em var(--mono)}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance}
.topbar{display:flex;align-items:center;gap:24px;padding:18px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px));max-width:1180px;margin:0 auto}
.topbar img{width:36px;height:36px;display:block}
.topbar nav{margin-left:auto;display:flex;gap:22px}
.topbar a{color:inherit;font-weight:700;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.hero{background:var(--saffron);color:var(--ink)}
.hero .topbar img{outline:2px solid var(--ink);border-radius:14px;outline-offset:-2px}
.hero-in{max-width:1180px;margin:0 auto;padding:clamp(32px,7vw,88px) 20px clamp(40px,8vw,96px)}
.hero h1{font-size:clamp(3rem,11.5vw,8.6rem);font-weight:900;font-stretch:125%;letter-spacing:-.02em;max-width:11ch}
.hero p{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.4;max-width:34ch;margin:28px 0 36px}
.cmd{display:flex;align-items:center;gap:14px;background:var(--ink);color:#FFF6E2;border-radius:10px;padding:16px 14px 16px 22px;max-width:760px;font:clamp(.8rem,1.9vw,1.08rem) var(--mono)}
.cmd code{flex:1;min-width:0;overflow-wrap:anywhere;font:inherit}
.cmd button{flex:none;font:700 .95rem var(--body);background:var(--saffron);color:var(--ink);border:0;border-radius:6px;padding:9px 14px;cursor:pointer}
.alt{margin:14px 0 0;font-size:1rem;color:var(--ink)}
.alt code{background:rgba(18,19,23,.1);padding:2px 6px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.band{padding-block:clamp(48px,8vw,96px)}
.lead h2{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;max-width:17ch}
.big{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.45;max-width:38ch;margin:28px 0 0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 56px;margin-top:48px}
.facts h3{font-size:1.45rem;font-weight:700;margin-bottom:10px}
.facts p{margin:0;color:var(--mut);max-width:42ch}
.steps{background:var(--wash)}
.steps ol{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:30px;counter-reset:s;max-width:760px}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;align-items:start}
.steps li::before{content:counter(s);font:800 2.4rem/1 var(--display);color:var(--deep)}
.steps b{display:block;font-size:1.2rem}
footer{border-top:1px solid var(--line);padding-block:30px;color:var(--mut);font-size:1rem}
footer p{margin:0;max-width:64ch}
.demo{background:var(--ink);padding-block:clamp(24px,5vw,56px)}
.demo img{display:block;width:100%;max-width:826px;height:auto;margin:0 auto;border-radius:8px}
.sponsor{display:inline-block;margin-top:20px;background:var(--saffron);color:var(--ink);font-weight:700;text-decoration:none;padding:12px 22px;border-radius:8px}
/* Docs */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;max-width:1120px;margin:0 auto;padding:32px 20px 80px}
.toc{position:sticky;top:24px;align-self:start;display:grid;gap:8px;font-weight:700}
.toc a{color:inherit;text-decoration:none}
.toc a:hover{color:var(--teal)}
.doc{max-width:72ch;min-width:0}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;margin-bottom:12px}
.doc h2{font-size:1.75rem;font-weight:800;margin:56px 0 14px}
.doc h3{font-size:1.2rem;font-weight:700;margin:28px 0 8px}
.doc pre{background:var(--ink);color:#FFF6E2;padding:14px 18px;border-radius:8px;overflow-x:auto;font:.86rem/1.55 var(--mono)}
.doc pre{position:relative;padding-right:84px}
.doc pre code{font:inherit}
.copy-block{position:absolute;top:8px;right:8px;font:700 .82rem var(--body);background:var(--saffron);color:var(--ink);border:0;border-radius:6px;padding:6px 12px;cursor:pointer}
.doc :not(pre)>code{background:var(--wash);padding:1px 5px;border-radius:4px}
.tw{overflow-x:auto}
.doc table{border-collapse:collapse;width:100%;font-size:1rem}
.doc th,.doc td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:760px){.docs{grid-template-columns:minmax(0,1fr);gap:24px}.toc{position:static;display:flex;flex-wrap:wrap;gap:6px 16px}}