/* The docs layout (ops/docs/template/shell.mjs), on the shared tokens and chrome (horizon.css). No WebGL: the
   horizon is a static acid hairline under the header; the grain is static. Acid marks links, focus and the current
   page only. */
body.docs{background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.horizon{position:absolute;left:0;right:0;top:92px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 80%,transparent) 18%,var(--acc) 50%,color-mix(in srgb,var(--acc) 80%,transparent) 82%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 55%,transparent),0 0 2px var(--acc)}
.layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding:150px var(--gut) 80px;max-width:1240px;margin:0 auto}
.pages ul{list-style:none;padding:0;position:sticky;top:120px;display:grid;gap:2px;border-left:1px solid var(--line)}
.pages a{display:block;padding:7px 14px;color:var(--mute);text-decoration:none;border-left:1px solid transparent;margin-left:-1px}
.pages a:hover{color:var(--bone)}
.pages a[aria-current]{color:var(--acc);border-left-color:var(--acc)}
.pages .pick{display:none}
.pages select{width:100%;background:#0b0b10;color:var(--bone);border:1px solid var(--hair);border-radius:99px;padding:10px 14px;font:inherit;letter-spacing:inherit;text-transform:inherit}
.doc{max-width:70ch;min-width:0}
.doc .kicker{color:var(--mute)}
.doc h1{margin-top:12px;font-weight:850;font-style:italic;font-variation-settings:"wdth" 118;text-transform:uppercase;letter-spacing:-.03em;line-height:.92;font-size:clamp(34px,4.4vw,60px);text-wrap:balance}
.doc h2{margin:48px 0 14px;font-weight:850;font-style:italic;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(22px,2.2vw,28px)}
.doc h3{margin:28px 0 8px;font-weight:700;font-size:17px}
.doc p,.doc li{color:#cbc8c1;line-height:1.65}
.doc p+p{margin-top:14px}
.doc a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:3px}
.doc b,.doc strong{color:var(--bone);font-weight:600}
.doc .inshort{margin-top:24px;font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:var(--bone)}
.doc .md{margin-top:14px}
.doc ul,.doc ol{padding-left:1.3em;margin-top:12px}
.doc code{font:400 .88em 'Geist Mono',ui-monospace,monospace;color:var(--bone)}
.doc pre{position:relative;margin:18px 0;padding:18px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;font:400 13px/1.6 'Geist Mono',ui-monospace,monospace;color:var(--bone);background:#08080b}
.doc pre code{font-size:inherit}
.doc .copy-code{position:absolute;top:10px;right:10px;padding:6px 12px}
.doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.doc th,.doc td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font:400 11px/1.4 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-bottom-color:var(--hair)}
.doc .ask{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:820px){
  .horizon{top:74px}
  .layout{grid-template-columns:1fr;padding-top:110px;gap:24px}
  .js .pages ul{display:none}.js .pages .pick{display:block}
  .pages ul{position:static}
}
.layout.single{grid-template-columns:minmax(0,1fr)}.layout.single .doc{margin-left:calc(min(240px,100%) + clamp(24px,5vw,80px))}
@media (max-width:820px){.layout.single .doc{margin-left:0}}
