:root {
    --h-neutral:306; --h-green:139; --l-base:14%;
    --c-black:oklch(8% 0 0); --c-base:oklch(var(--l-base) .002 var(--h-neutral)); --c-surface:oklch(calc(var(--l-base) + 4%) .007 var(--h-neutral)); --c-raised:oklch(calc(var(--l-base) + 7%) .009 var(--h-neutral));
    --c-line:oklch(calc(var(--l-base) + 18%) .015 var(--h-neutral)); --c-line-soft:color-mix(in oklch,var(--c-line) 62%,var(--c-base));
    --c-green-deep:oklch(28% .06 var(--h-green)); --c-green:oklch(68% .13 var(--h-green)); --c-gold:oklch(26% .05 90);
    --c-link-public:oklch(68% .17 255); --c-link-gated:oklch(70% .15 305); --c-link-private:var(--c-green); --c-link-missing:oklch(72% .15 65);
    --c-text:oklch(76% .006 95); --c-text-soft:color-mix(in oklch,var(--c-text) 74%,var(--c-base)); --c-text-faint:color-mix(in oklch,var(--c-text) 53%,var(--c-base));
    --c-focus:color-mix(in oklch,var(--c-green) 54%,var(--c-line)); --c-hover:color-mix(in oklch,var(--c-surface) 86%,var(--c-green-deep));
    --c-scroll-track:color-mix(in oklch,var(--c-black) 78%,var(--c-surface)); --c-scroll-thumb:color-mix(in oklch,var(--c-line) 72%,var(--c-green-deep)); --c-scroll-hover:color-mix(in oklch,var(--c-line) 46%,var(--c-green));

    --u:.25rem; --s1:var(--u); --s2:calc(var(--u)*2); --s3:calc(var(--u)*3); --s4:calc(var(--u)*4); --s6:calc(var(--u)*6); --s8:calc(var(--u)*8); --s12:calc(var(--u)*12); --s16:calc(var(--u)*16);
    --flow:var(--s4); --section:var(--s8);
    --t0:.8125rem; --t1:1.0625rem; --t2:1.25rem; --t3:1.625rem; --t4:2rem; --t5:2.5rem; --headline-fluid:7vw; --tracking:.08em; --code-scale:.92em;
    --frame:51.25rem; --card-min:14.375rem; --nav-reserve:calc(var(--s8) + var(--s4));
    --r-control:var(--s2); --r-card:var(--s1); --hairline:1px solid var(--c-line); --hairline-soft:1px solid var(--c-line-soft);
}

* { box-sizing:border-box; }
html { background:var(--c-black); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
body { min-width:0; margin:0; background:var(--c-base); color:var(--c-text); }
a { color:inherit; }
a[data-access] { color:var(--link-color); text-decoration-color:currentColor; text-underline-offset:.18em;
    &::before { content:var(--link-symbol); display:inline-block; margin-right:.35em; font-size:.86em; text-decoration:none; }
    &[data-access='public'] { --link-color:var(--c-link-public); --link-symbol:'○'; }
    &[data-access='gated'] { --link-color:var(--c-link-gated); --link-symbol:'◐'; }
    &[data-access='private'] { --link-color:var(--c-link-private); --link-symbol:'●'; }
    &[data-access='missing'] { --link-color:var(--c-link-missing); --link-symbol:'×'; text-decoration-style:dotted; } }
:where(a,summary):focus-visible { outline:1px solid var(--c-focus); outline-offset:var(--s1); }
[aria-current='page'] { color:var(--c-text); font-weight:700; }
.frame { width:min(var(--frame),calc(100% - var(--s8))); margin-inline:auto; }
:where(pre,table,dialog,[data-flyout]) { scrollbar-width:thin; scrollbar-color:var(--c-scroll-thumb) var(--c-scroll-track);
    &::-webkit-scrollbar { width:var(--s2); height:var(--s2); }
    &::-webkit-scrollbar-track,&::-webkit-scrollbar-corner { background:var(--c-scroll-track); }
    &::-webkit-scrollbar-thumb { border:1px solid var(--c-scroll-track); border-radius:var(--r-control); background:var(--c-scroll-thumb); }
    &::-webkit-scrollbar-thumb:hover { background:var(--c-scroll-hover); } }

header { min-height:calc(var(--s12) + var(--s2)); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); border-bottom:var(--hairline);
    .brand { margin-right:auto; font-weight:800; text-decoration:none; } }
body > nav { position:relative; display:flex; gap:var(--s1); overflow-x:auto; overflow-y:hidden; padding-block:var(--s3); padding-inline-end:var(--nav-reserve); border-bottom:var(--hairline); scrollbar-width:none;
    &::-webkit-scrollbar { display:none; }
    a { flex:0 0 auto; padding:var(--s2) var(--s3); border-radius:var(--r-control); color:var(--c-text-soft); font-size:var(--t0); text-decoration:none;
        &[aria-current='page'] { background:var(--c-raised); }
        &:hover { background:var(--c-hover); color:var(--c-text); } } }
main { padding-block:var(--s8) var(--s16); }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:var(--s4); padding-block:var(--s6) var(--s8); border-top:var(--hairline); color:var(--c-text-faint); font-size:var(--t0);
    nav { display:flex; flex-wrap:wrap; gap:var(--s2);
        a { color:var(--c-text-soft); } } }

.hero { padding-block:var(--s6) var(--s8);
    h1 { margin:0; }
    p:not(.eyebrow) { color:var(--c-text-soft); } }
.eyebrow { margin:0 0 var(--s2); color:var(--c-green); font-size:var(--t0); font-weight:700; letter-spacing:var(--tracking); text-transform:uppercase; }
h1,h2,h3,h4,h5,h6 { line-height:1.15; text-wrap:balance; }
h1 { font-size:clamp(var(--t4),var(--headline-fluid),var(--t5)); }
h2 { margin-block:var(--section) var(--flow); font-size:var(--t3); }
h3 { margin-block:var(--flow) var(--s2); font-size:var(--t2); }
h4,h5,h6 { margin-block:var(--flow) var(--s2); }
p,ul,ol,dl,pre,blockquote,figure,aside,details,address,table { margin-block:0 var(--flow); }
hr { margin-block:var(--section); border:0; border-top:var(--hairline); }
header span,.list time,small,figcaption,blockquote cite { color:var(--c-text-faint); font-size:var(--t0); }
.text { > :first-child { margin-block-start:0; }
    li + li { margin-block-start:var(--s2); } }
.list { display:grid; gap:var(--s2); padding:0; list-style:none;
    li { display:grid; gap:var(--s1); } }
div.list { grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--card-min)),1fr)); }
.card { display:grid; gap:var(--s1); padding:var(--s3); border:var(--hairline); border-radius:var(--r-card); background:var(--c-surface); text-decoration:none;
    &:hover { background:var(--c-raised); border-color:var(--c-focus); } }
.variable { display:grid; gap:var(--s2); padding:var(--s4); border:var(--hairline); border-radius:var(--r-card); background:var(--c-surface);
    > code { justify-self:start; }
    strong { font-size:var(--t3); } }
blockquote { margin-left:var(--s4); padding-left:var(--s4); border-left:var(--hairline-soft); color:var(--c-text-soft); font-size:var(--t1);
    p { margin-bottom:var(--s2); } }
code,pre { font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
code { padding-inline:var(--s1); border-radius:var(--r-control); background:var(--c-raised); color:var(--c-text); font-size:var(--code-scale); }
pre { overflow:auto; padding:var(--s3); border:var(--hairline); border-radius:var(--r-card); background:var(--c-black);
    code { padding:0; background:none; } }
kbd { padding-inline:var(--s1); border:var(--hairline); border-radius:var(--r-control); background:var(--c-raised); font:inherit; font-size:var(--code-scale); }
mark { padding-inline:var(--s1); background:var(--c-gold); color:var(--c-text); }
dl { display:grid; grid-template-columns:minmax(7rem,14rem) minmax(0,1fr); border-top:var(--hairline);
    dt,dd { margin:0; padding-block:var(--s2); border-bottom:var(--hairline); }
    dt { padding-right:var(--s3); color:var(--c-green); font-weight:700; }
    dd { color:var(--c-text-soft); } }

caption { padding:var(--s2) 0; color:var(--c-text-soft); font-weight:700; text-align:left; }
table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; background:var(--c-surface);
    th,td { padding:var(--s2) var(--s3); border:var(--hairline); text-align:left; white-space:nowrap; }
    th { background:var(--c-raised); color:var(--c-text); }
    td { color:var(--c-text-soft); } }
figure { svg,img { display:block; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border:var(--hairline); border-radius:var(--r-card); background:var(--c-surface); color:var(--c-text-soft); }
    figcaption { margin-top:var(--s2); } }
aside { padding:var(--s3); border-left:var(--hairline); background:var(--c-surface); color:var(--c-text-soft); }
details { border-block:var(--hairline);
    summary { padding-block:var(--s3); cursor:pointer; font-weight:700; }
    &[open] { padding-bottom:var(--s3); } }
address { color:var(--c-text-soft); font-style:normal; }
main article > nav { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--section);
    a { color:var(--c-text-soft); } }