:root{color-scheme:dark;background:#100c19;color:#ede5f4;--accent:#b3f4e7;--signal:#ffc080;--muted:#cbbdd8;--edge:#514462;font:1rem/1.65 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.wrap{width:min(72rem,calc(100% - 2rem));margin-inline:auto}
.hero{background:radial-gradient(ellipse at 78% 0,#352058,transparent 66%),#171021;border-bottom:1px solid var(--edge);padding-bottom:2.5rem}
.hero nav,footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1rem}
.tag{color:var(--signal);font:700 .76rem/1.4 ui-monospace,monospace;letter-spacing:.14em;margin:0 0 .6rem}
.hero .tag{margin-top:2.5rem}
h1,h2{line-height:1.05;margin:0 0 .9rem}
h1{font-size:clamp(2.6rem,8vw,5.9rem);letter-spacing:-.07em}
h2{font-size:clamp(1.7rem,4vw,2.65rem);letter-spacing:-.04em}
.intro{font-size:clamp(1rem,2.4vw,1.26rem);max-width:54ch;color:var(--muted);margin:0}
.layout{display:grid;grid-template-columns:13rem minmax(0,68ch);gap:clamp(1.5rem,6vw,5rem);padding-block:2.5rem}
.contents{position:sticky;top:1rem;align-self:start;display:grid;gap:.5rem;font:.86rem/1.5 ui-monospace,monospace;padding-bottom:1rem}
section{scroll-margin-top:1rem}
section+section{border-top:1px solid var(--edge);margin-top:2rem;padding-top:2rem}
p,dl,ul,ol{margin:0 0 .9rem}
ol,ul{padding-left:1.45rem}
li+li,dt:not(:first-child){margin-top:.55rem}
dt{font-weight:750;color:var(--accent)}
dd{margin:0}
.tip{border-left:3px solid var(--signal);padding:.65rem .9rem;background:#22172f}
code,kbd{background:#2d203b;padding:.05em .3em;border-radius:.2rem;color:#fff}
footer{border-top:1px solid var(--edge)}
@media(max-width:700px){.layout{grid-template-columns:minmax(0,1fr);padding-block:1.5rem}.contents{position:static;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));border-bottom:1px solid var(--edge)}}