@font-face{
font-family:"Space Grotesk";
src:url(fonts/space-grotesk-variable.ttf) format("truetype");
font-weight:300 700;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"DM Sans";
src:url(fonts/dm-sans-variable.ttf) format("truetype");
font-weight:100 1000;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Geist Mono";
src:url(fonts/geist-mono.woff2) format("woff2");
font-weight:400 700;
font-style:normal;
font-display:swap;
}

@layer tokens, base, layout, components, docs, motion, refine, premium;

@property --glow-x{
syntax:"<percentage>";
inherits:false;
initial-value:50%;
}

@layer tokens{
:root{
color-scheme:dark;
--u:.25rem;
--sp-1:calc(var(--u)*1);
--sp-2:calc(var(--u)*2);
--sp-3:calc(var(--u)*3);
--sp-4:calc(var(--u)*4);
--sp-5:calc(var(--u)*5);
--sp-6:calc(var(--u)*6);
--sp-8:calc(var(--u)*8);
--sp-10:calc(var(--u)*10);
--sp-12:calc(var(--u)*12);
--sp-16:calc(var(--u)*16);
--sp-18:calc(var(--u)*18);
--s1:var(--sp-1);
--s2:var(--sp-2);
--s3:var(--sp-3);
--s4:var(--sp-4);
--s5:var(--sp-6);
--s6:var(--sp-8);
--s7:var(--sp-12);
--s8:var(--sp-18);
--pad:clamp(1rem,4.2vw,4rem);
--sec:clamp(3rem,8vw,6rem);
--r-1:.5rem;
--r-2:1rem;
--r-3:1.5rem;
--r-pill:999px;
--r1:var(--r-1);
--r2:var(--r-2);
--r3:var(--r-3);
--surface-0:#07080f;
--surface-1:#0d0f1a;
--surface-2:#141726;
--surface-3:#1c2034;
--bg:var(--surface-0);
--bg2:var(--surface-1);
--bg3:var(--surface-2);
--fg:#f3f4fd;
--mut:#a9afcf;
--dim:#8189b0;
--line:rgb(176 186 255/.09);
--line2:rgb(176 186 255/.18);
--tick:rgb(170 180 255/.32);
--grid:rgb(170 180 255/.07);
--grid2:rgb(170 180 255/.035);
--acc:#8e9cff;
--acc-t:#b9c2ff;
--ink:#0a0b16;
--btn:#8e9cff;
--btn-h:#a9b4ff;
--btn-fg:#0a0b16;
--ref:#5ee7d3;
--grad:linear-gradient(135deg,#8e9cff,#5ee7d3);
--tint-1:color-mix(in srgb,var(--acc) 6%,transparent);
--tint-2:color-mix(in srgb,var(--acc) 12%,transparent);
--tint-3:color-mix(in srgb,var(--acc) 18%,transparent);
--tint-4:color-mix(in srgb,var(--acc) 26%,transparent);
--ring-1:color-mix(in srgb,var(--acc) 32%,transparent);
--ring-2:color-mix(in srgb,var(--acc) 55%,transparent);
--fill-1:color-mix(in srgb,var(--fg) 5%,transparent);
--fill-2:color-mix(in srgb,var(--fg) 9%,transparent);
--ok:#7ef0b5;
--warn:#ffc27a;
--bad:#ff8f9c;
--code:#070812;
--code-fg:#c3c9e8;
--shadow:rgb(2 3 12/.55);
--glow:rgb(142 156 255/.22);
--glass:light-dark(rgb(255 255 255/.72),rgb(16 18 31/.66));
--hi:light-dark(rgb(255 255 255/.9),rgb(255 255 255/.09));
--lift:var(--lift-2);
--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--display:"Space Grotesk","DM Sans",system-ui,sans-serif;
--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--step--2:.64rem;
--step--1:.8rem;
--step-0:1rem;
--step-1:1.25rem;
--step-2:1.5625rem;
--step-3:1.953rem;
--step-4:2.441rem;
--step-5:3.052rem;
--step-6:3.815rem;
--step-8:5.96rem;
--step-9:7.451rem;
--t-xs:max(.6875rem,var(--step--2));
--t-sm:var(--step--1);
--t-md:var(--step-0);
--t-lg:var(--step-1);
--h3:clamp(var(--step-1),1rem + 1vw,var(--step-2));
--h2:clamp(var(--step-2),1rem + 3.2vw,var(--step-4));
--t-display:clamp(var(--step-6),15vw,var(--step-8));
--dur-1:120ms;
--dur-2:240ms;
--dur-3:420ms;
--ease:cubic-bezier(.16,1,.3,1);
--ease-out:var(--ease);
--spring:linear(0,.55 12%,.93 24%,1.04 36%,1.02 48%,1 62%,1);
--dur:var(--dur-2);
--gap:var(--sp-2);
--shell-pad:var(--sp-2);
--h-bar:calc(var(--u)*14);
--h-dock:calc(var(--u)*16);
--ctl:calc(var(--u)*10);
--hit:calc(var(--u)*11);
--r-shell:calc(var(--h-bar)/2);
--r-in:calc(var(--r-shell) - var(--shell-pad));
--bar:calc(var(--h-bar) + var(--gap)*2);
--subnav:0rem;
--measure:62ch;
--edge:light-dark(rgb(28 36 110/.12),rgb(196 204 255/.12));
--lift-1:0 1px 0 var(--hi) inset,0 0 0 1px var(--edge),0 12px 24px -16px var(--shadow);
--lift-2:0 1px 0 var(--hi) inset,0 0 0 1px var(--edge),0 2px 4px rgb(2 3 12/.10),0 20px 40px -20px var(--shadow);
--lift-3:0 1px 0 var(--hi) inset,0 0 0 1px var(--edge),0 4px 8px rgb(2 3 12/.12),0 32px 64px -24px var(--shadow);
--card:linear-gradient(180deg,rgb(255 255 255/.045),rgb(255 255 255/0) 42%),var(--surface-1);
--card-h:linear-gradient(180deg,rgb(255 255 255/.07),rgb(255 255 255/.01) 46%),var(--surface-2);
--track-display:-.045em;
--track-h:-.03em;
}

[data-theme=light]{
color-scheme:light;
--surface-0:#f6f7fc;
--surface-1:#ffffff;
--surface-2:#eff1fb;
--surface-3:#e4e7f7;
--line:rgb(28 36 110/.1);
--line2:rgb(28 36 110/.2);
--card:linear-gradient(180deg,#fff,rgb(255 255 255/.86)),var(--surface-1);
--card-h:linear-gradient(180deg,#fff,#f8f9fe),var(--surface-1);
--shadow:rgb(30 36 100/.14);
--fg:#12142b;
--mut:#454a70;
--dim:#5b6188;
--tick:rgb(28 36 110/.34);
--grid:rgb(28 36 110/.07);
--grid2:rgb(28 36 110/.035);
--acc:#4a56e6;
--acc-t:#3640c4;
--ink:#f6f7ff;
--btn:#1b1f4d;
--btn-h:#2b3170;
--btn-fg:#eef0ff;
--ref:#0a8f84;
--grad:linear-gradient(135deg,#4a56e6,#0aa89b);
--ok:#1f7a45;
--warn:#8f5300;
--bad:#b03a48;
--code:#171a3a;
--code-fg:#d9ddf7;
--glow:rgb(74 86 230/.18);
}

@supports not (color:light-dark(red,red)){
:root{
--glass:rgb(16 18 31/.66);
--edge:rgb(190 198 255/.16);
--hi:rgb(255 255 255/.09);
}

[data-theme=light]{
--glass:rgb(255 255 255/.72);
--edge:rgb(28 36 110/.14);
--hi:rgb(255 255 255/.9);
}
}

@media(prefers-contrast:more){
:root{
--line:rgb(190 198 255/.4);
--line2:rgb(190 198 255/.6);
--dim:#aab1d6;
}

[data-theme=light]{
--line:rgb(28 36 110/.45);
--line2:rgb(28 36 110/.6);
--dim:#3d4368;
}
}
}

@layer base{
*, ::before, ::after{
box-sizing:border-box;
}

html{
scroll-padding-top:calc(var(--bar) + var(--subnav) + var(--s5));
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
scrollbar-width:thin;
scrollbar-color:var(--tick) transparent;
}

body{
margin:0;
font:var(--t-md)/1.6 var(--sans);
font-optical-sizing:auto;
letter-spacing:-.011em;
overflow-x:hidden;
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure{
margin:0;
}

h1, h2, .display{
font-family:var(--display);
}

ul, ol{
padding:0;
list-style:none;
}

a{
color:inherit;
text-decoration:none;
}

img, svg{
max-width:100%;
}

button{
font:inherit;
color:inherit;
background:none;
border:0;
padding:0;
cursor:pointer;
text-align:left;
}

button:disabled, [aria-disabled=true]{
opacity:.45;
cursor:not-allowed;
}

code, pre{
font-family:var(--mono);
}

::selection{
background:var(--acc);
color:var(--ink);
}

:focus-visible{
outline:2px solid var(--acc);
outline-offset:2px;
}

:focus:not(:focus-visible){
outline:0;
}

.wrap{
max-width:80rem;
margin:0 auto;
padding:0 var(--pad);
}

.sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}

.i{
width:1.25rem;
height:1.25rem;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
}

.lg{
width:1.75rem;
height:1.75rem;
}

.xs{
width:.9rem;
height:.9rem;
vertical-align:-.14em;
}

.lbl{
font:600 var(--t-xs)/1.4 var(--mono);
text-transform:uppercase;
color:var(--dim);
}

.ok{
color:var(--ok);
}

.bad{
color:var(--bad);
}

body::before{
height:min(52rem,100svh + 8rem);
-webkit-mask-image:linear-gradient(#000 35%,transparent);
mask-image:linear-gradient(#000 35%,transparent);
}
}

@layer layout{
.bar{
z-index:50;
display:flex;
align-items:center;
height:var(--bar);
}

.brand{
display:flex;
align-items:center;
min-width:0;
}

.brand img{
width:1.6rem;
height:1.6rem;
}

.nav{
z-index:49;
display:flex;
align-items:center;
height:var(--subnav);
white-space:nowrap;
color:var(--mut);
}

.nav::-webkit-scrollbar{
display:none;
}

.nav a{
padding:var(--s2) 0;
}

.nav a:hover{
color:var(--fg);
}

.nav a::after{
content:"";
position:absolute;
inset:auto 0 -.45rem;
height:2px;
background:var(--acc);
transform:scaleX(0);
transform-origin:left;
transition:transform var(--dur) var(--ease-out);
}

.nav a[aria-current=true]::after{
transform:scaleX(1);
}

.bar>.chip{
margin-left:auto;
}

@media(min-width:900px){
.bar{
gap:var(--s4);
}

.nav{
z-index:auto;
height:auto;
border:0;
}

.nav a::after{
inset:auto 0 -1.2rem;
}

.bar>.chip{
margin-left:0;
}
}

.hero{
position:relative;
display:grid;
grid-template-columns:1fr;
align-items:center;
}

.hero-copy{
position:relative;
z-index:2;
max-width:46rem;
}

.hero-kicker{
align-items:center;
gap:var(--s3);
}

.live-dot{
width:.5rem;
height:.5rem;
flex:none;
border-radius:50%;
background:var(--acc);
box-shadow:0 0 0 4px var(--glow);
}

.display em{
font-style:normal;
}

.lede{
letter-spacing:-.015em;
}

.hero-actions{
display:grid;
grid-template-columns:1fr 1fr;
}

.hero-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
margin-top:var(--s6);
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
}

.hero-meta b{
color:var(--fg);
font-weight:600;
}

.hero-meta i{
width:3px;
height:3px;
border-radius:50%;
background:var(--tick);
}

.credit{
margin-top:var(--s4);
color:var(--dim);
font-size:var(--t-sm);
}

.credit b{
color:var(--mut);
font-weight:600;
}

@media(min-width:900px){
.hero{
grid-template-columns:minmax(0,1.05fr) minmax(19rem,.95fr);
gap:clamp(2rem,5vw,5rem);
}

.hero-actions{
display:flex;
flex-wrap:wrap;
}
}

.sec{
padding-top:var(--sec);
}

.sec-h{
position:relative;
display:grid;
}

.sec-h::before{
content:"";
position:absolute;
inset:0 0 auto;
height:10px;
border-top:1px solid var(--tick);
background: repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 8px) top/100% 5px no-repeat, repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 64px) top/100% 10px no-repeat;
}

.sec-h::after{
content:"";
position:absolute;
top:-1px;
left:0;
width:3rem;
height:2px;
background:var(--acc);
}

.sec-h .lbl:first-child{
letter-spacing:.04em;
}

.sec-h .chip{
justify-self:end;
}

.foot{
margin-top:var(--sec);
}

.foot .wrap{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:var(--s2) var(--s7);
padding-block:var(--s5) calc(5.5rem + env(safe-area-inset-bottom));
color:var(--dim);
font-size:var(--t-xs);
line-height:1.7;
}

.foot .wrap>span:last-child{
max-width:var(--measure);
}

.foot b{
color:var(--fg);
font-weight:600;
}

.foot a{
text-decoration:underline;
text-decoration-color:var(--line2);
text-underline-offset:.25em;
}

.foot a:hover{
color:var(--acc-t);
text-decoration-color:currentColor;
}

.foot a .xs{
margin-left:.2em;
}

@media(min-width:900px){
.foot .wrap{
padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom));
}
}
}

@layer components{
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--s2);
min-height:3rem;
padding:.8rem 1.2rem;
border-radius:var(--r2);
font-size:var(--t-sm);
}

.btn:hover:not(:disabled){
transform:translateY(-2px);
}

.btn .i{
transition:transform var(--dur) var(--ease);
}

.btn:hover .i:first-child{
transform:translateY(-1px);
}

.btn.ghost{
background:transparent;
color:var(--fg);
box-shadow:inset 0 0 0 1px var(--line2);
}

.btn.ghost:hover:not(:disabled){
background:var(--bg2);
box-shadow:inset 0 0 0 1px var(--acc);
color:var(--acc-t);
}

.btn[aria-busy=true]{
opacity:.55;
pointer-events:none;
}

.round{
position:relative;
display:grid;
place-items:center;
flex:none;
width:var(--ctl);
height:var(--ctl);
}

.round:hover{
border-color:var(--line2);
}

.round:active{
transform:scale(.94);
}

.round .ext{
position:absolute;
width:.6rem;
height:.6rem;
opacity:.55;
}

#themeBtn .i{
grid-area:1/1;
transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2);
}

[data-theme=dark] .sun{
opacity:0;
transform:rotate(-90deg) scale(.5);
}

[data-theme=light] .moon{
opacity:0;
transform:rotate(90deg) scale(.5);
}

.chip{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.4rem .6rem;
border:1px solid var(--line);
border-radius:var(--r1);
font:600 var(--t-xs)/1.2 var(--mono);
letter-spacing:.04em;
white-space:nowrap;
color:var(--mut);
transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.chip .i{
width:.85rem;
height:.85rem;
}

.chip.ok, .chip.bad{
border-color:color-mix(in srgb,currentColor 55%,transparent);
}

a.chip:hover{
border-color:var(--line2);
color:var(--fg);
}

.fab{
position:fixed;
right:max(var(--s4),env(safe-area-inset-right));
bottom:max(var(--s4),env(safe-area-inset-bottom));
z-index:40;
display:grid;
place-items:center;
width:3.25rem;
height:3.25rem;
border-radius:var(--r3);
box-shadow:0 .7rem 2rem var(--shadow),inset 0 1px 0 rgb(255 255 255/.18);
transition:transform var(--dur) var(--ease),background var(--dur);
}

.fab:hover:not(:disabled){
background:var(--btn-h);
transform:translateY(-2px);
}

.fab:active:not(:disabled){
transform:scale(.96);
}

.fab::after{
content:"";
position:absolute;
inset:0;
border:2px solid var(--acc);
border-radius:inherit;
opacity:0;
pointer-events:none;
}

.top{
position:fixed;
right:max(var(--s4),env(safe-area-inset-right));
bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 3.25rem + var(--s3));
z-index:40;
display:grid;
place-items:center;
width:2.75rem;
height:2.75rem;
border:1px solid var(--line);
border-radius:var(--r3);
background:var(--bg2);
color:var(--fg);
opacity:0;
visibility:hidden;
transform:translateY(8px);
pointer-events:none;
transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-1) var(--dur-2),background var(--dur-2),color var(--dur-2),border-color var(--dur-2);
}

.top.show{
opacity:1;
visibility:visible;
transform:none;
pointer-events:auto;
transition-delay:0s;
}

.top:hover{
border-color:var(--acc);
color:var(--acc-t);
}

.top:active{
transform:scale(.96);
}

.toast{
position:fixed;
left:50%;
z-index:90;
display:flex;
align-items:center;
gap:var(--s2);
max-width:calc(100% - 7rem);
padding:var(--s3) var(--s4);
background:var(--fg);
color:var(--bg);
font:500 var(--t-sm) var(--mono);
box-shadow:0 .8rem 2.5rem var(--shadow);
opacity:0;
transform:translate(-50%,var(--s4));
pointer-events:none;
transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}

.toast.show{
opacity:1;
transform:translate(-50%,0);
}

.toast.err{
background:var(--bad);
color:var(--ink);
}

.qa-note{
max-width:58rem;
margin-bottom:var(--s5);
font-size:var(--t-md);
line-height:1.75;
color:var(--mut);
}

.qa-note code, .fold-body code, .x-warn code{
padding:.12em .38em;
border-radius:var(--r1);
background:var(--bg3);
color:var(--fg);
font:500 .86em var(--mono);
}

.stats{
position:relative;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:var(--s5);
overflow:hidden;
border-radius:var(--r3);
}

.stats::before{
content:"";
position:absolute;
inset:0 auto auto 0;
z-index:1;
width:2.5rem;
height:2px;
background:var(--acc);
}

.stat{
display:flex;
flex-direction:column;
gap:var(--s1);
min-width:0;
background:var(--bg2);
}

.stat b{
font-feature-settings:"tnum" 1,"zero" 1;
overflow-wrap:anywhere;
}

.stat small{
font:500 var(--t-xs)/1.5 var(--mono);
color:var(--dim);
overflow-wrap:anywhere;
}

@media(min-width:640px){
.stats{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.stats:has(>:nth-child(4):last-child){
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(min-width:900px){
.stats:has(>:nth-child(4):last-child){
grid-template-columns:repeat(4,minmax(0,1fr));
}
}

.x-flow{
display:grid;
gap:var(--s4);
margin:var(--s5) 0;
}

.x-node{
position:relative;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.x-node b{
display:block;
font:600 1.1rem/1.2 var(--display);
letter-spacing:-.02em;
}

.x-node small{
display:block;
margin-top:var(--s1);
color:var(--mut);
line-height:1.5;
font-size:var(--t-sm);
}

.x-node.key{
border-color:var(--acc);
box-shadow:0 0 0 1px var(--acc),0 0 2.5rem var(--glow);
z-index:1;
}

.x-node:not(:last-child)::after{
content:"";
position:absolute;
left:1.5rem;
bottom:calc(-1 * var(--s4) - 1px);
width:1px;
height:var(--s4);
background:var(--tick);
}

@media(min-width:56rem){
.x-flow{
grid-template-columns:repeat(5,1fr);
gap:0;
}

.x-node{
border-radius:0;
margin-left:-1px;
}

.x-node:first-child{
border-radius:var(--r2) 0 0 var(--r2);
margin:0;
}

.x-node:last-child{
border-radius:0 var(--r2) var(--r2) 0;
}

.x-node:not(:last-child)::after{
left:auto;
right:-7px;
bottom:auto;
top:50%;
width:12px;
height:12px;
background:var(--bg);
border:solid var(--tick);
border-width:1px 1px 0 0;
transform:translateY(-50%) rotate(45deg);
z-index:2;
clip-path:polygon(0 0,100% 0,100% 100%);
}

.x-node.key::after{
border-color:var(--acc);
}
}

.x-warn{
max-width:58rem;
margin-top:var(--s4);
padding-left:var(--s4);
border-left:2px solid var(--warn);
color:var(--mut);
line-height:1.7;
}

.x-warn b{
color:var(--fg);
font-weight:600;
}

.plist{
display:grid;
grid-template-columns:1fr;
gap:var(--s4);
}

.prow{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:2.75rem 1fr;
align-content:start;
gap:var(--s4);
width:100%;
padding:var(--s5);
border:1px solid var(--line);
border-radius:var(--r3);
background:var(--bg2);
transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.prow>.i{
display:grid;
place-items:center;
width:2.75rem;
height:2.75rem;
padding:.6rem;
margin:0;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg);
color:var(--mut);
transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.prow:hover{
border-color:color-mix(in srgb,var(--acc) 50%,var(--line));
transform:translateY(-2px);
}

.prow:active{
transform:scale(.99);
}

.prow[aria-pressed=true]{
border-color:var(--acc);
background:var(--bg3);
box-shadow:inset 3px 0 0 var(--acc),0 1rem 3rem -1rem var(--shadow);
}

.prow[aria-pressed=true]>.i{
color:var(--acc-t);
border-color:color-mix(in srgb,var(--acc) 55%,transparent);
}

.pmain{
display:flex;
flex-direction:column;
gap:var(--s2);
min-width:0;
}

.ptitle{
font:600 var(--h3)/1.05 var(--display);
letter-spacing:-.04em;
transition:color var(--dur) var(--ease);
}

.prow[aria-pressed=true] .ptitle{
color:var(--acc-t);
}

.pdesc{
max-width:34rem;
font-size:var(--t-md);
line-height:1.65;
color:var(--mut);
}

.pchain{
display:flex;
flex-wrap:wrap;
grid-column:2;
gap:var(--s2);
}

.pchain span{
padding:.28rem .5rem;
border:1px solid var(--line);
border-radius:var(--r1);
font:500 var(--t-xs)/1.2 var(--mono);
letter-spacing:.03em;
color:var(--mut);
}

.pchain span:nth-child(2){
border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
color:var(--fg);
}

.spark{
grid-column:1/-1;
width:100%;
height:3rem;
color:var(--tick);
}

.prow[aria-pressed=true] .spark{
color:var(--acc);
}

.spark path{
fill:none;
stroke:currentColor;
stroke-width:1.5;
vector-effect:non-scaling-stroke;
stroke-linecap:round;
stroke-linejoin:round;
transition:stroke var(--dur) var(--ease);
}

.prow::after{
content:"";
position:absolute;
inset:0 0 auto;
height:2px;
background:var(--acc);
transform:scaleX(0);
transform-origin:left;
opacity:0;
pointer-events:none;
}

.pdot{
--c:var(--dim);
position:absolute;
top:calc(var(--s5) - .15rem);
left:calc(var(--s5) + 2.3rem);
width:.7rem;
height:.7rem;
border-radius:50%;
background:var(--c);
border:2px solid var(--bg2);
box-shadow:0 0 0 1px var(--c);
}

.prow[data-qa=ok] .pdot{
--c:var(--acc);
}

.prow[data-qa=warn] .pdot{
--c:var(--warn);
}

.prow[data-qa=bad] .pdot{
--c:var(--bad);
}

@media(min-width:900px){
.plist{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

.x-grid{
display:grid;
gap:var(--s4);
margin-top:var(--s5);
}

@media(min-width:48rem){
.x-grid.two{
grid-template-columns:1fr 1fr;
}
}

.x-card{
display:flex;
flex-direction:column;
padding:var(--s5);
border:1px solid var(--line);
border-radius:var(--r3);
background:var(--bg2);
background-image:linear-gradient(var(--acc),var(--acc));
background-size:1.25rem 2px;
background-repeat:no-repeat;
}

.x-card h3{
margin:var(--s1) 0 var(--s4);
font:600 var(--h3)/1.1 var(--display);
letter-spacing:-.04em;
}

.x-card p{
margin-bottom:var(--s4);
color:var(--mut);
line-height:1.7;
font-size:var(--t-md);
}

.x-card .links{
margin-top:auto;
}

.x-spec{
display:grid;
grid-template-columns:auto 1fr;
margin-bottom:var(--s4);
font:500 var(--t-sm)/1.5 var(--mono);
}

.x-spec dt, .x-spec dd{
padding:.5rem 0;
border-top:1px solid var(--line);
}

.x-spec dt{
padding-right:var(--s5);
color:var(--dim);
}

.x-spec dd{
overflow-wrap:anywhere;
text-align:right;
}

.links{
display:flex;
flex-wrap:wrap;
gap:var(--s2);
}

.links a{
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:.55rem .75rem;
border:1px solid var(--line);
border-radius:var(--r2);
font-size:var(--t-xs);
font-weight:550;
transition:border-color var(--dur),color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}

.links a:hover{
border-color:var(--acc);
color:var(--acc-t);
background:var(--bg3);
}

.links a:active{
transform:scale(.98);
}

.x-steps{
position:relative;
max-width:58rem;
display:grid;
gap:var(--s4);
}

.x-steps li{
counter-increment:s;
position:relative;
display:grid;
grid-template-columns:2rem 1fr;
gap:var(--s4);
color:var(--mut);
line-height:1.7;
}

.x-steps{
counter-reset:s;
}

.x-steps li::before{
content:counter(s);
display:grid;
place-items:center;
width:2rem;
height:2rem;
border:1px solid var(--tick);
border-radius:50%;
background:var(--bg);
font:600 .9rem var(--mono);
color:var(--acc-t);
position:relative;
z-index:1;
}

.x-steps li:not(:last-child)::after{
content:"";
position:absolute;
left:1rem;
top:2rem;
bottom:calc(-1 * var(--s4));
width:1px;
background:var(--line2);
}

.x-steps b{
color:var(--fg);
font-weight:600;
}

.x-code{
overflow-x:auto;
margin:0;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--code);
color:var(--code-fg);
font:500 var(--t-sm)/1.7 var(--mono);
tab-size:4;
}

.chart{
position:relative;
padding:var(--s2);
overflow:hidden;
border:1px solid var(--line);
border-radius:var(--r3);
background:var(--bg2);
cursor:crosshair;
}

.chart:focus-visible{
outline-offset:2px;
}

.chart svg{
display:block;
width:100%;
height:auto;
overflow:visible;
}

.gl{
stroke:var(--line);
}

.gl.b{
stroke:var(--line2);
stroke-dasharray:1 4;
stroke-linecap:round;
}

.gl.z{
stroke:var(--warn);
stroke-opacity:.75;
stroke-dasharray:5 4;
}

.ax{
font:500 10px var(--mono);
fill:var(--dim);
}

.ax.band{
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
fill:var(--dim);
opacity:.7;
}

.ax.zl{
fill:var(--warn);
}

.ax.unit{
fill:var(--mut);
}

#line, .old-l{
fill:none;
stroke:var(--acc);
stroke-width:2.4;
stroke-linejoin:round;
stroke-linecap:round;
}

.mk{
fill:var(--bg2);
stroke:var(--acc);
stroke-width:2;
}

.mk.lo{
stroke:var(--ref);
}

.mk-t{
font:600 10px var(--mono);
fill:var(--fg);
paint-order:stroke;
stroke:var(--bg2);
stroke-width:3px;
stroke-linejoin:round;
}

#dot{
fill:var(--acc);
}

.chart.draw #line{
stroke-dasharray:1;
animation:draw .9s var(--ease-out) both;
}

.chart.draw #grid{
animation:fi .4s var(--ease-out) both;
}

.chart.draw #area{
animation:fi .8s var(--ease-out) .25s both;
}

.chart.draw .mk, .chart.draw .mk-t{
animation:fi .4s var(--ease-out) .8s both;
}

.gh{
pointer-events:none;
animation:fo .3s var(--ease-out) both;
}

.tip{
position:absolute;
top:var(--s3);
z-index:2;
min-width:9rem;
padding:var(--s2) var(--s3);
font:500 var(--t-xs)/1.5 var(--mono);
pointer-events:none;
}

.tip[hidden]{
display:none;
}

.tip div{
display:flex;
justify-content:space-between;
gap:var(--s4);
}

.cap{
margin-top:var(--s2);
}

#export>.btn{
margin-bottom:var(--s2);
}

.files{
display:grid;
grid-template-columns:1fr;
gap:var(--s3);
margin-top:var(--s4);
}

.frow{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:var(--s4);
min-height:5rem;
width:100%;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}

.frow:hover{
border-color:var(--acc);
background:var(--bg3);
transform:translateY(-2px);
}

.frow:active{
transform:scale(.99);
}

.frow>span{
display:flex;
flex-direction:column;
gap:var(--s1);
min-width:0;
}

.frow b{
font-size:var(--t-md);
font-weight:600;
}

.frow small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.frow>.i:first-child{
color:var(--acc-t);
}

.frow>.i:last-child{
color:var(--dim);
transition:color var(--dur),transform var(--dur) var(--ease);
}

.frow:hover>.i:last-child{
color:var(--acc-t);
transform:translateY(2px);
}

@media(min-width:640px){
.files{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

.seal{
padding-inline:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.seal summary, .fold summary{
display:flex;
align-items:center;
gap:var(--s4);
cursor:pointer;
list-style:none;
}

summary::-webkit-details-marker{
display:none;
}

.seal summary{
padding:var(--s4) 0;
}

.seal[open] summary{
border-bottom:1px solid var(--line);
}

.seal .st{
display:inline-flex;
align-items:center;
gap:var(--s2);
font:600 var(--t-md) var(--display);
}

.chev{
margin-left:auto;
color:var(--dim);
transition:transform var(--dur-2) var(--ease-out);
}

details[open]>summary .chev{
transform:rotate(180deg);
}

.crow{
display:grid;
grid-template-columns:.6rem 1fr auto;
align-items:center;
gap:var(--s4);
padding:var(--s3) 0;
border-bottom:1px solid var(--line);
font-size:var(--t-sm);
color:var(--dim);
}

.crow:last-child{
border-bottom:0;
}

.crow::before{
content:"";
width:.5rem;
height:.5rem;
border-radius:50%;
background:currentColor;
}

.crow>span{
color:var(--fg);
}

.crow small{
color:var(--dim);
font:500 var(--t-xs) var(--mono);
}

.crow b{
display:inline-flex;
align-items:center;
gap:.35rem;
font:600 var(--t-xs) var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
}

.harness{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--s4);
margin:var(--s6) 0 var(--s4);
padding:var(--s4) var(--s5);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.harness h3{
font:600 1rem var(--sans);
}

.harness p{
margin-top:var(--s1);
font-size:var(--t-sm);
line-height:1.6;
color:var(--mut);
}

.console{
height:12rem;
padding:var(--s4);
overflow:auto;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--code);
color:var(--code-fg);
font:var(--t-xs)/1.75 var(--mono);
overflow-wrap:anywhere;
}

@media(max-width:599px){
.harness{
align-items:stretch;
}

.harness .btn{
width:100%;
}
}

.x-tbl{
overflow-x:auto;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.x-tbl table{
width:100%;
min-width:40rem;
border-collapse:collapse;
font-size:var(--t-sm);
}

.x-tbl th, .x-tbl td{
padding:var(--s3) var(--s4);
text-align:left;
vertical-align:top;
border-bottom:1px solid var(--line);
color:var(--mut);
}

.x-tbl tr:last-child td{
border-bottom:0;
}

.x-tbl th{
font:600 var(--t-xs) var(--mono);
letter-spacing:.05em;
text-transform:uppercase;
color:var(--dim);
background:var(--bg);
}

.x-tbl td:first-child{
color:var(--fg);
font-weight:550;
}

.x-tbl tbody tr{
transition:background var(--dur) var(--ease);
}

.x-tbl tbody tr:hover{
background:color-mix(in srgb,var(--acc) 5%,transparent);
}

.x-tbl a{
text-decoration:underline;
text-decoration-color:var(--line2);
text-underline-offset:.25em;
}

.x-pill{
display:inline-block;
padding:.25rem .45rem;
border:1px solid currentColor;
border-radius:var(--r1);
font:600 var(--t-xs)/1 var(--mono);
letter-spacing:.04em;
white-space:nowrap;
}

.x-pill.pass{
color:var(--ok);
}

.x-pill.part{
color:var(--warn);
}

.x-pill.user{
color:var(--ref);
}

.x-pill.none{
color:var(--dim);
}

.x-list{
display:grid;
gap:var(--s3);
max-width:58rem;
padding-left:1.1rem;
color:var(--mut);
line-height:1.7;
list-style:none;
}

.x-list li{
position:relative;
}

.x-list li::before{
content:"";
position:absolute;
left:-1.1rem;
top:.78em;
width:.5rem;
height:1px;
background:var(--acc);
}

.x-list b{
color:var(--fg);
font-weight:600;
}

.x-sub{
margin:var(--s7) 0 var(--s3);
font:600 1.15rem var(--display);
letter-spacing:-.02em;
}

.x-fig{
margin:0;
padding:var(--s2);
border:1px solid var(--line);
border-radius:var(--r3);
background:var(--bg2);
}

.x-fig button{
display:block;
width:100%;
position:relative;
border-radius:var(--r2);
overflow:hidden;
cursor:zoom-in;
}

.x-fig img{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:contain;
border-radius:var(--r2);
background:#fff;
transition:filter var(--dur),transform var(--dur-3) var(--ease-out);
}

[data-theme=dark] .x-fig img{
filter:brightness(.9) contrast(1.04);
}

.x-fig button:hover img{
transform:scale(1.015);
}

.x-fig figcaption{
padding:var(--s3) var(--s2) var(--s1);
color:var(--dim);
font:500 var(--t-xs)/1.55 var(--mono);
}

.zoom{
width:min(96vw,80rem);
max-width:none;
max-height:92svh;
padding:0;
border:1px solid var(--line2);
border-radius:var(--r3);
background:var(--bg2);
color:var(--fg);
overflow:auto;
}

.zoom::backdrop{
background:rgb(0 0 0/.72);
backdrop-filter:blur(4px);
}

.zoom img{
display:block;
width:100%;
min-width:42rem;
height:auto;
background:#fff;
}

.zoom form{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--s3);
padding:var(--s3);
background:var(--bg2);
border-bottom:1px solid var(--line);
}

.zoom p{
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.x-hash{
display:grid;
gap:var(--s2);
margin-top:var(--s4);
}

.x-hash button{
display:grid;
grid-template-columns:1fr auto;
gap:.2rem var(--s3);
align-items:center;
width:100%;
padding:var(--s3) var(--s4);
color:inherit;
transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

.x-hash button:hover, .x-hash button:focus-visible{
border-color:var(--acc);
background:var(--bg3);
}

.x-hash button:hover span{
color:var(--acc-t);
}

.x-hash span{
font:600 var(--t-sm) var(--mono);
transition:color var(--dur) var(--ease);
}

.x-hash code{
grid-column:1/-1;
font:500 var(--t-xs)/1.5 var(--mono);
color:var(--dim);
overflow-wrap:anywhere;
}

.x-hash .i{
width:1rem;
height:1rem;
color:var(--dim);
}

.x-hash button.done .i{
color:var(--ok);
}

.fold summary{
padding:var(--s4);
border-radius:var(--r2);
transition:background var(--dur) var(--ease);
}

.fold summary:hover{
background:var(--bg2);
}

.fold summary b{
display:block;
font:600 1.05rem var(--sans);
}

.fold summary small{
display:block;
margin-top:var(--s1);
font-size:var(--t-xs);
color:var(--dim);
}

.fold-body{
display:grid;
gap:var(--s4);
max-width:55rem;
padding:0 var(--s4) var(--s5);
font-size:var(--t-md);
line-height:1.75;
color:var(--mut);
}

.fold-body b{
color:var(--fg);
font-weight:600;
}

.note{
padding-left:var(--s4);
border-left:2px solid var(--acc);
}
}

@layer docs{
html:has(.reader[open]){
overflow:hidden;
}

.reader{
position:fixed;
inset:0 0 0 auto;
width:min(52rem,100%);
height:100%;
max-width:none;
max-height:none;
margin:0;
padding:0;
border:0;
border-left:1px solid var(--line);
background:var(--bg);
color:var(--fg);
box-shadow:-2rem 0 5rem var(--shadow);
transform:translateX(100%);
transition:transform var(--dur-3) var(--ease-out),overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete;
}

.reader[open]{
display:flex;
flex-direction:column;
transform:none;
}

.reader::backdrop{
background:rgb(0 0 0/.55);
opacity:0;
transition:opacity var(--dur-3) var(--ease-out),overlay var(--dur-3) allow-discrete,display var(--dur-3) allow-discrete;
}

.reader[open]::backdrop{
opacity:1;
}

@starting-style{
.reader[open]{
transform:translateX(100%);
}

.reader[open]::backdrop{
opacity:0;
}
}

.reader-bar{
position:relative;
display:flex;
align-items:center;
flex:none;
gap:var(--s3);
min-height:var(--bar);
padding:env(safe-area-inset-top) var(--pad) 0;
border-bottom:1px solid var(--line);
background:var(--bg);
}

.reader-bar::after{
content:"";
position:absolute;
inset:auto 0 -1px;
height:2px;
background:var(--acc);
transform:scaleX(var(--rp,0));
transform-origin:left;
}

.reader-bar .lbl{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--mut);
text-transform:none;
letter-spacing:.02em;
}

.prose{
flex:1;
min-height:0;
overflow:auto;
padding:var(--s6) var(--pad) calc(var(--s8) + env(safe-area-inset-bottom));
font-size:var(--t-md);
line-height:1.75;
color:var(--mut);
overscroll-behavior:contain;
scroll-behavior:smooth;
hyphens:manual;
overflow-wrap:break-word;
}

.prose>*{
max-width:var(--measure);
}

.prose>*+*{
margin-top:var(--s4);
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6{
color:var(--fg);
font-family:var(--display);
font-weight:600;
line-height:1.15;
letter-spacing:-.03em;
text-wrap:balance;
}

.prose h1{
font-size:var(--h2);
letter-spacing:-.045em;
}

.prose h2{
margin-top:var(--s7);
padding-top:var(--s4);
border-top:1px solid var(--line);
font-size:var(--h3);
}

.prose hr+h2{
margin-top:var(--s6);
padding-top:0;
border-top:0;
}

.prose h3{
margin-top:var(--s6);
font-size:var(--t-lg);
}

.prose h4, .prose h5, .prose h6{
margin-top:var(--s5);
font:600 var(--t-md) var(--sans);
letter-spacing:-.01em;
}

.prose strong{
color:var(--fg);
font-weight:600;
}

.prose a{
color:var(--acc-t);
text-decoration:underline;
text-decoration-color:color-mix(in srgb,var(--acc-t) 40%,transparent);
text-underline-offset:.22em;
transition:text-decoration-color var(--dur) var(--ease);
}

.prose a:hover{
text-decoration-color:currentColor;
}

.prose a .xs{
margin-left:.25em;
}

.prose ul, .prose ol{
padding-left:1.3rem;
}

.prose ul{
list-style:none;
}

.prose ul>li{
position:relative;
}

.prose ul>li::before{
content:"";
position:absolute;
left:-1.1rem;
top:.82em;
width:.45rem;
height:1px;
background:var(--acc);
}

.prose ol{
list-style:decimal;
}

.prose ol>li::marker{
color:var(--acc-t);
font:600 .85em var(--mono);
}

.prose li+li{
margin-top:var(--s2);
}

.prose li>ul, .prose li>ol{
margin-top:var(--s2);
}

.prose code{
padding:.12em .38em;
border-radius:var(--r1);
background:var(--bg3);
color:var(--fg);
font:500 .86em var(--mono);
overflow-wrap:anywhere;
}

.prose hr{
border:0;
border-top:1px solid var(--line);
max-width:none;
}

.prose img{
height:auto;
border-radius:var(--r2);
border:1px solid var(--line);
}

.prose del{
opacity:.6;
}

.prose sub, .prose sup{
font-size:.8em;
line-height:0;
}

.prose blockquote{
padding-left:var(--s4);
border-left:2px solid var(--line2);
}

.prose blockquote>*+*{
margin-top:var(--s2);
}

.prose .alert{
--c:var(--acc);
padding:var(--s3) var(--s4) var(--s4);
border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));
border-left:3px solid var(--c);
border-radius:0 var(--r2) var(--r2) 0;
background:color-mix(in srgb,var(--c) 7%,var(--bg2));
}

.prose .alert.tip{
--c:var(--ok);
}

.prose .alert.note{
--c:var(--ref);
}

.prose .alert.warning{
--c:var(--warn);
}

.prose .alert.caution{
--c:var(--bad);
}

.prose .alert>*+*{
margin-top:var(--s2);
}

.prose .alert-t{
display:flex;
align-items:center;
gap:.45rem;
margin:0 0 var(--s1);
color:var(--c);
font:600 var(--t-xs)/1.4 var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
}

.prose .codeblk{
max-width:none;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--code);
overflow:hidden;
}

.prose .codeblk figcaption{
display:flex;
align-items:center;
justify-content:space-between;
padding:.35rem .35rem .35rem var(--s3);
border-bottom:1px solid var(--line);
font:600 var(--t-xs) var(--mono);
letter-spacing:.06em;
text-transform:uppercase;
color:var(--code-fg);
}

.prose .codeblk button{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.3rem .55rem;
border-radius:var(--r1);
color:var(--code-fg);
font:600 var(--t-xs) var(--mono);
text-transform:none;
letter-spacing:0;
transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}

.prose .codeblk button:hover{
background:rgb(255 255 255/.08);
color:#fff;
}

.prose .codeblk button.done{
color:var(--ok);
}

.prose pre{
margin:0;
overflow:auto;
padding:var(--s4);
color:var(--code-fg);
line-height:1.7;
tab-size:4;
}

.prose pre code{
padding:0;
background:none;
color:inherit;
font-size:var(--t-xs);
overflow-wrap:normal;
}

.prose .flow{
max-width:none;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.prose .flow ol{
list-style:none;
display:grid;
gap:var(--s4);
padding:0;
}

.prose .flow li{
position:relative;
margin:0;
padding:var(--s3) var(--s4);
border:1px solid var(--line2);
border-radius:var(--r2);
background:var(--bg);
}

.prose .flow li::before{
content:none;
}

.prose .flow li.end{
border-style:dashed;
}

.prose .flow li:not(:last-child)::after{
content:"";
position:absolute;
left:1.5rem;
top:100%;
width:1px;
height:var(--s4);
background:var(--tick);
}

.prose .flow b{
display:block;
color:var(--fg);
font:600 var(--t-md)/1.3 var(--display);
}

.prose .flow small{
display:block;
margin-top:2px;
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
}

@media(min-width:42rem){
.prose .flow ol{
grid-auto-flow:column;
grid-auto-columns:1fr;
gap:var(--s3);
}

.prose .flow li:not(:last-child)::after{
left:100%;
top:50%;
width:var(--s3);
height:1px;
}
}

.prose>.tbl{
max-width:none;
overflow-x:auto;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.prose table{
width:100%;
border-collapse:collapse;
font-size:var(--t-sm);
line-height:1.55;
}

.prose th, .prose td{
padding:var(--s2) var(--s3);
border-bottom:1px solid var(--line);
text-align:left;
vertical-align:top;
}

.prose th{
background:var(--bg);
color:var(--fg);
font:600 var(--t-xs) var(--mono);
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}

.prose tr:last-child td{
border-bottom:0;
}

.prose .r{
text-align:right;
}

.prose .c{
text-align:center;
}

.prose .toc{
max-width:var(--measure);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.prose .toc summary{
display:flex;
align-items:center;
gap:var(--s2);
padding:var(--s3) var(--s4);
cursor:pointer;
list-style:none;
color:var(--fg);
font:600 var(--t-sm) var(--sans);
}

.prose .toc summary b{
margin-left:auto;
font:600 var(--t-xs) var(--mono);
color:var(--dim);
}

.prose .toc summary .chev{
margin-left:var(--s2);
}

.prose .toc ol{
list-style:none;
padding:0 var(--s4) var(--s3);
margin:0;
counter-reset:t;
}

.prose .toc li{
counter-increment:t;
margin:0;
border-top:1px solid var(--line);
}

.prose .toc li::before{
content:none;
}

.prose .toc a{
display:flex;
gap:var(--s3);
padding:.55rem 0;
color:var(--mut);
text-decoration:none;
font-size:var(--t-sm);
}

.prose .toc a::before{
content:counter(t,decimal-leading-zero);
font:600 var(--t-xs)/1.9 var(--mono);
color:var(--acc-t);
}

.prose .toc a:hover{
color:var(--fg);
}

.prose .hblk.a-center{
text-align:center;
}

.prose .hblk.a-right{
text-align:right;
}

.prose .hblk:last-child{
margin-top:var(--s6);
}

.prose .hblk p{
margin:0;
}

.prose .hblk sub{
font:500 var(--t-xs)/1.7 var(--mono);
color:var(--dim);
vertical-align:baseline;
font-size:var(--t-xs);
}

.prose .hblk b{
color:var(--mut);
font-weight:600;
}

.prose .hblk img{
display:inline-block;
border:0;
}
}

@layer motion{
#sweep{
position:fixed;
inset:0 0 auto;
z-index:60;
height:2px;
pointer-events:none;
background:linear-gradient(90deg,transparent,var(--acc) 70%,var(--acc-t));
transform:scaleX(var(--p,0));
transform-origin:0 50%;
box-shadow:0 0 12px var(--glow);
}

#read{
position:fixed;
left:max(var(--s4),env(safe-area-inset-left));
bottom:max(var(--s4),env(safe-area-inset-bottom));
z-index:39;
gap:.6rem;
align-items:baseline;
padding:.4rem .6rem;
border:1px solid var(--line);
border-radius:var(--r1);
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(12px);
font:600 var(--t-xs)/1 var(--mono);
color:var(--mut);
pointer-events:none;
}

#read b{
color:var(--acc-t);
min-width:5.2ch;
text-align:right;
}

@media(min-width:48rem){
#read{
display:flex;
}
}

.hero-art{
position:relative;
flex-direction:column;
justify-content:space-between;
border-radius:var(--r3);
}

.hero-art::before{
content:"";
position:absolute;
inset:15% 8%;
background:radial-gradient(ellipse,var(--glow),transparent 68%);
filter:blur(24px);
}

.hero-art::after{
content:"";
position:absolute;
top:3.2rem;
bottom:3.2rem;
left:0;
width:1px;
background:linear-gradient(transparent,var(--acc),transparent);
opacity:.7;
animation:scan 9s linear 1.2s infinite;
}

.hero-copy>*{
animation:rise .7s var(--ease-out) both;
}

.hero-copy>:nth-child(2){
animation-delay:.06s;
}

.hero-copy>:nth-child(3){
animation-delay:.14s;
}

.hero-copy>:nth-child(4){
animation-delay:.2s;
}

.hero-copy>:nth-child(5){
animation-delay:.26s;
}

.hero-copy>:nth-child(6){
animation-delay:.3s;
}

.prow.sweep::after{
animation:sweep .5s var(--ease-out);
}

.prow.sweep .spark path{
animation:draw .6s var(--ease-out) both;
}

.prow[data-qa] .pdot{
animation:pop .4s var(--ease-out) both;
}

.fab.pulse::after{
animation:pulse .5s var(--ease-out);
}

.crow.ok::before, .crow.bad::before{
animation:pop .35s var(--ease-out) both;
animation-delay:var(--d,0ms);
}

.crow.ok b, .crow.bad b{
animation:fi .3s var(--ease-out) both;
animation-delay:var(--d,0ms);
}

.prose.fade{
animation:fi .3s var(--ease-out) both;
}

html.hid *, html.hid *::before, html.hid *::after{
animation-play-state:paused !important;
}

@keyframes draw{
from{
stroke-dashoffset:1;
opacity:0;
}

to{
stroke-dashoffset:0;
opacity:1;
}
}

@keyframes fi{
from{
opacity:0;
}
}

@keyframes fo{
to{
opacity:0;
}
}

@keyframes rise{
from{
opacity:0;
transform:translateY(10px);
}
}

@keyframes scan{
0%{
left:0;
opacity:0;
}

8%{
opacity:.7;
}

92%{
opacity:.7;
}

100%{
left:100%;
opacity:0;
}
}

@keyframes pop{
0%{
transform:scale(.3);
opacity:.2;
}

60%{
transform:scale(1.35);
opacity:1;
}

100%{
transform:scale(1);
opacity:1;
}
}

@keyframes sweep{
0%{
transform:scaleX(0);
opacity:1;
}

70%{
transform:scaleX(1);
opacity:1;
}

100%{
transform:scaleX(1);
opacity:0;
}
}

@keyframes pulse{
from{
transform:scale(1);
opacity:.7;
}

to{
transform:scale(1.5);
opacity:0;
}
}

::view-transition-old(root), ::view-transition-new(root){
animation-duration:var(--dur-3);
animation-timing-function:var(--ease);
}

@media(max-width:899px){
.hero-art::before, .hero-art::after{
display:none;
}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}

.prose{
scroll-behavior:auto;
}

*, ::before, ::after, ::backdrop{
animation-duration:.01ms !important;
animation-delay:0s !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
transition-delay:0s !important;
}

.hero-art::after{
display:none;
}
}

@media print{
body::before, #sweep, #read, .fab, .top, .bar, .nav{
display:none !important;
}

.hero{
padding-top:0;
}
}
}

@layer components{
/* == Chip states == */

.chip.warn{
color:var(--warn);
border-color:color-mix(in srgb,var(--warn) 45%,transparent);
}

.chip.ok{
color:var(--ok);
}

/* == Library == */

.lib{
display:flex;
flex-direction:column;
gap:var(--s6);
}

.ldev .x-sub{
display:flex;
align-items:baseline;
gap:var(--s3);
flex-wrap:wrap;
margin-bottom:var(--s3);
}

.ldev .x-sub small{
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.lset{
border:1px solid var(--line);
}

.lset>summary{
display:flex;
align-items:center;
justify-content:space-between;
min-height:var(--ctl);
cursor:pointer;
list-style:none;
}

.lset>summary::-webkit-details-marker{
display:none;
}

.lset>summary span{
display:flex;
flex-direction:column;
gap:var(--s1);
}

.lset>summary small{
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.lset .chev{
transition:transform var(--dur) var(--ease);
}

.lset[open] .chev{
transform:rotate(90deg);
}

.lbody{
display:flex;
flex-direction:column;
gap:var(--s3);
padding:0 var(--s4) var(--s4);
}

.lset-dl{
align-self:flex-start;
}

.lgrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s3);
}

.lcard{
display:flex;
flex-direction:column;
gap:var(--s2);
min-width:0;
padding:var(--s4);
border:1px solid var(--line);
background:var(--bg);
transition:border-color var(--dur),transform var(--dur) var(--ease);
}

.lcard:hover{
border-color:var(--acc);
transform:translateY(-2px);
}

.lcard header{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s2);
flex-wrap:wrap;
}

.tag{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.25rem .5rem;
border-radius:var(--r1);
background:var(--bg3);
font:600 var(--t-xs)/1.2 var(--mono);
letter-spacing:.06em;
color:var(--acc-t);
}

.tag.irs{
color:var(--ref);
}

.tag.eel{
color:var(--warn);
}

.lname{
font:600 var(--t-sm) var(--mono);
overflow-wrap:anywhere;
}

.linfo{
margin:0;
font-size:var(--t-sm);
color:var(--mut);
}

.lpair{
margin:0;
font-size:var(--t-xs);
line-height:1.5;
color:var(--dim);
}

.lwarn{
margin:0;
padding:var(--s2) var(--s3);
border-left:3px solid var(--warn);
border-radius:0 var(--r1) var(--r1) 0;
background:color-mix(in srgb,var(--warn) 10%,transparent);
font-size:var(--t-xs);
line-height:1.5;
color:var(--fg);
}

.lcard footer{
display:flex;
align-items:center;
gap:var(--s3);
margin-top:auto;
padding-top:var(--s2);
}

.lmeta{
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.lhash{
display:inline-flex;
align-items:center;
gap:.35rem;
min-height:var(--ctl);
padding:0 var(--s2);
border-radius:var(--r1);
font:500 var(--t-xs) var(--mono);
color:var(--mut);
}

.lhash:hover{
color:var(--acc-t);
}

.ldl{
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--ctl);
height:var(--ctl);
margin-left:auto;
border-radius:var(--r2);
transition:background var(--dur),transform var(--dur) var(--ease);
}

.ldl:hover{
background:var(--btn-h);
transform:translateY(-2px);
}

/* == Compare == */

.cmp{
display:flex;
flex-direction:column;
gap:var(--s4);
}

.cmp-bar, .cmp-ctl{
display:flex;
align-items:flex-end;
gap:var(--s4);
flex-wrap:wrap;
}

.seg{
border-radius:var(--r2);
}

.seg button{
min-width:3.5rem;
min-height:var(--ctl);
padding:0 var(--s4);
font:600 var(--t-sm) var(--mono);
color:var(--mut);
}

.seg button[aria-pressed=true]{
background:var(--btn);
color:var(--btn-fg);
}

.fld{
display:flex;
flex-direction:column;
gap:var(--s1);
min-width:0;
}

.fld select{
min-height:var(--ctl);
max-width:100%;
padding:0 var(--s3);
border:1px solid var(--line2);
background:var(--bg2);
color:var(--fg);
font:500 var(--t-sm) var(--mono);
}

.chk{
display:inline-flex;
align-items:center;
gap:var(--s2);
min-height:var(--ctl);
font-size:var(--t-sm);
color:var(--mut);
}

.cmp audio{
width:100%;
}

.cmp-chains{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s3);
}

.cmp-panel{
display:flex;
flex-direction:column;
gap:var(--s3);
min-width:0;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.cmp-panel h3{
display:flex;
align-items:center;
gap:var(--s2);
margin:0;
font:600 var(--t-md) var(--display);
}

.cmp-abx{
display:flex;
flex-direction:column;
gap:var(--s3);
padding:var(--s4);
border:1px solid var(--line2);
border-radius:var(--r2);
background:var(--bg2);
}

.cmp-abx[hidden], .cmp .seg[hidden]{
display:none;
}

.cmp-abxb{
display:flex;
gap:var(--s2);
flex-wrap:wrap;
}

.cmp-plot{
width:100%;
height:auto;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.cmp-plot .gl{
stroke:var(--grid);
stroke-width:1;
}

.cmp-plot text{
fill:var(--dim);
font:500 10px var(--mono);
}

.cmp-plot polyline{
fill:none;
stroke-width:2;
stroke-linejoin:round;
}

.cmp-plot .pa{
stroke:var(--ref);
}

.cmp-plot .pb{
stroke:var(--acc);
}

.cmp-key{
display:flex;
align-items:center;
gap:var(--s3);
margin:0;
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.cmp-key .ka, .cmp-key .kb{
padding:.1rem .45rem;
border-radius:var(--r1);
}

.cmp-key .ka{
color:var(--ref);
}

.cmp-key .kb{
color:var(--acc-t);
}

@media(max-width:560px){
.lgrid, .cmp-chains{
grid-template-columns:1fr;
}
}
}

@layer refine{
body{
background:var(--bg);
color:var(--fg);
font-family:"DM Sans",system-ui,sans-serif;
}

body::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:radial-gradient(60rem 36rem at 85% -8%,var(--glow),transparent 62%),radial-gradient(44rem 30rem at -10% 18%,color-mix(in srgb,var(--ref) 12%,transparent),transparent 60%);
}

.hero{
gap:var(--s6);
padding-top:calc(var(--bar) + var(--s6));
padding-bottom:var(--s6);
}

.hero-kicker{
display:inline-flex;
align-self:flex-start;
padding:.45rem .8rem;
border:1px solid var(--line2);
border-radius:var(--r-pill);
background:color-mix(in srgb,var(--bg2) 70%,transparent);
font-size:.64rem;
}

.display{
margin:var(--s4) 0;
font:600 var(--t-display)/.92 var(--display);
letter-spacing:-.055em;
}

.display em{
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.lede{
font-size:var(--t-md);
}

.hero-actions{
margin-top:var(--s5);
}

.hero-meta{
gap:var(--s2);
}

.hero-meta span{
padding:.4rem .7rem;
border:1px solid var(--line);
border-radius:var(--r-pill);
background:var(--bg2);
}

.hero-meta i{
display:none;
}

.hero-art{
display:block;
min-height:0;
padding:0;
border:0;
background:none;
box-shadow:none;
overflow:visible;
}

.hero-art::before, .hero-art::after{
display:none;
}

.eq-card{
padding:var(--s4);
border:1px solid var(--line2);
border-radius:var(--r3);
background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,var(--bg2)),var(--bg2) 65%);
}

.eq-top, .eq-bot{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.eq-bot b{
color:var(--acc-t);
}

.eq{
display:flex;
align-items:flex-end;
height:10rem;
margin:var(--s5) 0 var(--s4);
}

.eq i{
height:var(--h);
background:linear-gradient(180deg,var(--acc),var(--ref));
transform-origin:bottom;
animation:eqb 2.6s ease-in-out infinite;
animation-delay:var(--d);
}

@keyframes eqb{
50%{
transform:scaleY(.5);
}
}

.sec-h{
grid-template-columns:auto 1fr auto;
align-items:center;
gap:var(--s3);
padding-top:0;
}

.sec-h::before, .sec-h::after{
display:none;
}

.sec-h .lbl:first-child{
display:inline-grid;
place-items:center;
min-width:2.2rem;
height:2.2rem;
padding:0 .5rem;
border:1px solid var(--line2);
border-radius:var(--r-pill);
background:color-mix(in srgb,var(--acc) 12%,transparent);
font:600 var(--t-xs) var(--mono);
color:var(--acc-t);
}

.sec-h h2{
font:600 var(--h2)/1.1 var(--display);
}

.stats{
gap:var(--s2);
border:0;
background:none;
}

.stats::before{
display:none;
}

.stat{
padding:var(--s4);
}

.stat b{
font:600 var(--step-3)/1 var(--display);
letter-spacing:-.04em;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.prow::after, .prow[aria-pressed=true]{
inset:auto;
}

.x-warn, .lwarn{
border-radius:0 var(--r2) var(--r2) 0;
}

.x-code, pre{
border-radius:var(--r2);
}

.btn{
background:var(--grad);
color:var(--btn-fg);
}

.btn:hover:not(:disabled){
background:var(--grad);
filter:brightness(1.1);
}

[data-theme=light] .btn{
background:var(--btn);
color:var(--btn-fg);
}

.ldl{
background:var(--grad);
color:var(--btn-fg);
}

[data-theme=light] .ldl{
background:var(--btn);
}

.fab, .top{
bottom:calc(5.4rem + env(safe-area-inset-bottom));
border-radius:50%;
}

.fab{
background:var(--grad);
color:var(--btn-fg);
}

.toast{
bottom:calc(5.8rem + env(safe-area-inset-bottom));
border-radius:var(--r-pill);
}

.foot{
border-top:0;
background:none;
}

@media(min-width:900px){
.fab, .top{
bottom:calc(1.5rem + env(safe-area-inset-bottom));
}

.toast{
bottom:calc(2rem + env(safe-area-inset-bottom));
}

.hero{
align-items:center;
padding-top:calc(var(--bar) + var(--s6));
}

.display{
font-size:clamp(var(--step-6),2rem + 6vw,var(--step-9));
}

.stats{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}

@media(prefers-reduced-motion:reduce){
.eq i{
animation:none;
}
}

#read{
display:none;
}

@media(min-width:900px){
#read{
display:flex;
}
}

.bar{
position:fixed;
inset:max(var(--gap),env(safe-area-inset-top)) var(--gap) auto;
inline-size:min(100% - var(--gap)*2,78rem);
block-size:var(--h-bar);
margin-inline:auto;
padding:0 var(--shell-pad) 0 calc(var(--u)*4);
gap:calc(var(--u)*2);
border:0;
border-radius:var(--r-shell);
background:var(--glass);
box-shadow:var(--lift);
backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
isolation:isolate;
}

.bar::before{
display:none;
}

.bar::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
border-radius:inherit;
pointer-events:none;
background:radial-gradient(18rem 100% at var(--glow-x) 0,var(--tint-3),transparent 70%);
animation:sheen linear both;
animation-timeline:scroll(root);
}

@keyframes sheen{
from{
--glow-x:8%;
}

to{
--glow-x:92%;
}
}

.brand{
gap:calc(var(--u)*2.5);
font:650 1.0625rem/1 var(--display);
letter-spacing:-.045em;
color:var(--fg);
flex:none;
}

.brand img{
inline-size:calc(var(--u)*8);
block-size:calc(var(--u)*8);
border-radius:calc(var(--u)*2.5);
box-shadow:0 0 0 1px rgb(255 255 255/.12),0 4px 12px -2px var(--glow);
transition:rotate var(--dur-3) var(--spring),scale var(--dur-2) var(--ease);
}

.brand:hover img{
rotate:-8deg;
scale:1.06;
}

.round{
inline-size:var(--ctl);
block-size:var(--ctl);
border:0;
border-radius:50%;
background:var(--fill-1);
box-shadow:0 0 0 1px var(--line);
color:var(--mut);
transition:background var(--dur-2),color var(--dur-2),box-shadow var(--dur-2),scale var(--dur-2) var(--spring);
}

.round:hover{
background:color-mix(in srgb,var(--acc) 14%,transparent);
box-shadow:0 0 0 1px var(--ring-2);
color:var(--acc-t);
}

.round:active{
scale:.92;
}

.round .i, .nav .i{
inline-size:calc(var(--u)*5);
block-size:calc(var(--u)*5);
fill:none;
stroke:currentColor;
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
}

.round .ext{
inset:calc(var(--u)*1.5) calc(var(--u)*1.5) auto auto;
inline-size:calc(var(--u)*2.5);
block-size:calc(var(--u)*2.5);
}

.bar>.chip{
margin-inline-start:auto;
block-size:var(--ctl);
padding-inline:calc(var(--u)*3.5);
border:0;
border-radius:var(--r-in);
background:var(--fill-1);
box-shadow:0 0 0 1px var(--line);
font-size:.6875rem;
letter-spacing:.06em;
}

.nav{
position:fixed;
inset:auto var(--gap) max(var(--gap),env(safe-area-inset-bottom));
inline-size:min(100% - var(--gap)*2,34rem);
block-size:var(--h-dock);
margin-inline:auto;
padding:calc(var(--u)*1.5);
gap:var(--u);
border:0;
border-radius:calc(var(--u)*8);
background:var(--glass);
box-shadow:var(--lift);
backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
overflow-x:auto;
scrollbar-width:none;
scroll-snap-type:x proximity;
overscroll-behavior-x:contain;
mask:linear-gradient(90deg,transparent,#000 calc(var(--u)*4),#000 calc(100% - var(--u)*4),transparent);
-webkit-mask:linear-gradient(90deg,transparent,#000 calc(var(--u)*4),#000 calc(100% - var(--u)*4),transparent);
font:600 .6875rem/1 var(--sans);
letter-spacing:.04em;
text-transform:uppercase;
}

.nav a{
position:relative;
flex:none;
display:grid;
place-content:center;
justify-items:center;
gap:calc(var(--u)*1.5);
min-inline-size:calc(var(--u)*17);
block-size:100%;
padding-inline:calc(var(--u)*2);
border-radius:calc(var(--u)*6.5);
color:var(--dim);
scroll-snap-align:center;
-webkit-tap-highlight-color:transparent;
transition:color var(--dur-2) var(--ease),background var(--dur-3) var(--ease),scale var(--dur-2) var(--spring);
}

.nav a .i{
transition:translate var(--dur-3) var(--spring),scale var(--dur-3) var(--spring);
}

.nav a:active{
scale:.94;
}

.nav a[aria-current=true]{
color:var(--acc-t);
background:linear-gradient(180deg,var(--tint-4),var(--tint-2));
box-shadow:inset 0 0 0 1px var(--ring-1),inset 0 1px 0 var(--hi);
}

.nav a[aria-current=true] .i{
translate:0 -1px;
scale:1.08;
}

.nav a[aria-current=true]::before{
content:"";
position:absolute;
inset:auto 50% calc(var(--u)*1) auto;
translate:50% 0;
inline-size:calc(var(--u)*1);
block-size:calc(var(--u)*1);
border-radius:50%;
background:var(--ref);
box-shadow:0 0 calc(var(--u)*2) var(--ref);
}

.nav a::after{
display:none;
}

@media(min-width:900px){
.nav{
position:static;
inline-size:auto;
padding:0;
gap:calc(var(--u)*.5);
background:none;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-radius:0;
overflow:visible;
font:600 .8125rem/1 var(--sans);
letter-spacing:0;
text-transform:none;
}

.nav a{
display:flex;
min-inline-size:0;
border-radius:var(--r-in);
}

.nav a .i{
display:none;
}

.nav a:hover{
color:var(--fg);
background:var(--fill-1);
}

.nav a[aria-current=true]::before{
inset:auto 50% calc(var(--u)*1) auto;
inline-size:calc(var(--u)*4);
block-size:2px;
border-radius:2px;
background:var(--grad);
box-shadow:none;
}

.bar>.chip{
margin-inline-start:0;
}
}

@media(max-width:899px){
main{
padding-block-end:calc(var(--h-dock) + var(--gap)*3);
}

.fab, .top{
inset-block-end:calc(var(--h-dock) + var(--gap)*3 + env(safe-area-inset-bottom));
}

.toast{
inset-block-end:calc(var(--h-dock) + var(--gap)*5 + env(safe-area-inset-bottom));
}

.bar, .nav{
backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
background:var(--glass);
}
}

@media(prefers-reduced-motion:reduce){
.bar::after{
animation:none;
}

.brand img, .nav a, .nav a .i, .round{
transition:none;
}
}

@media(prefers-contrast:more){
.bar, .nav{
background:var(--bg2);
backdrop-filter:none;
}
}

@media print{
.bar, .nav{
display:none!important;
}
}

/* == Phase 2: components share the shell's elevation + ring language == */

.x-card, .stat, .prow, .frow, .x-node, .seal, .harness, .lcard, .lset, .cmp-panel, .cmp-abx, .cmp-plot, .x-tbl, .chart{
border:0;
border-radius:var(--r-3);
background:linear-gradient(160deg,var(--tint-1),transparent 70%),var(--surface-1);
box-shadow:var(--lift-1);
}

.lcard, .lset{
background:var(--surface-1);
}

.lcard{
border-radius:var(--r-2);
}

.x-hash button{
border-radius:var(--r-3);
border:1px solid var(--line);
background:var(--surface-1);
}

.prow, .lcard{
transition:transform var(--dur-2) var(--spring),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}

.prow:hover{
background:linear-gradient(160deg,var(--tint-2),transparent 70%),var(--surface-1);
box-shadow:var(--lift-2),0 0 0 1px var(--ring-1);
}

.prow[aria-pressed=true], .x-node.key{
box-shadow:0 1px 0 var(--hi) inset,0 0 0 1.5px var(--acc),0 18px 48px -18px var(--glow);
}

.stat{
container-type:inline-size;
}

@container (max-width:9.5rem){
.stat b{
font-size:var(--step-2);
}
}

.btn.ghost, .chip, .tag, .fld select, .seg{
background:var(--fill-1);
box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--line2);
}

.btn.ghost:hover:not(:disabled), a.chip:hover, button.chip:hover{
background:var(--tint-2);
box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring-2);
color:var(--acc-t);
}

.btn{
box-shadow:0 1px 0 rgb(255 255 255/.3) inset,0 0 0 1px rgb(255 255 255/.1),0 8px 20px -8px var(--glow);
}

.btn:active:not(:disabled){
transform:scale(.97);
}

.btn.ghost, [data-theme=light] .btn.ghost{
color:var(--fg);
}

.btn, .ldl, .seg, .seg button, .chip, .tag{
border-radius:var(--r-pill);
}

.fld select{
border-radius:var(--r-2);
}

.seg{
position:relative;
isolation:isolate;
overflow:hidden;
display:inline-grid;
grid-auto-flow:column;
grid-auto-columns:1fr;
padding:2px;
border:0;
--n:2;
--i:0;
}

.seg:has(>:nth-child(3)){
--n:3;
}

.seg:has(>:nth-child(4)){
--n:4;
}

.seg:has(>:nth-child(2)[aria-pressed=true]){
--i:1;
}

.seg:has(>:nth-child(3)[aria-pressed=true]){
--i:2;
}

.seg:has(>:nth-child(4)[aria-pressed=true]){
--i:3;
}

.seg::before{
content:"";
position:absolute;
z-index:-1;
inset:2px auto 2px 2px;
inline-size:calc((100% - 4px)/var(--n));
translate:calc(var(--i)*100%) 0;
border-radius:var(--r-pill);
background:var(--grad);
box-shadow:0 1px 0 rgb(255 255 255/.35) inset,0 6px 16px -6px var(--glow);
transition:translate var(--dur-3) var(--spring);
}

[data-theme=light] .seg::before{
background:var(--btn);
}

.seg button{
background:none;
transition:color var(--dur-2) var(--ease);
}

.seg button[aria-pressed=true], [data-theme=light] .seg button[aria-pressed=true]{
background:none;
color:var(--btn-fg);
}

.seg:has(>:nth-child(5))::before{
display:none;
}

.seg:has(>:nth-child(5)) button[aria-pressed=true]{
background:var(--grad);
}

.cmp-plot polyline{
transition:opacity var(--dur-3) var(--ease),stroke-width var(--dur-3) var(--ease);
}

.cmp:has([data-act=A][aria-pressed=true]) .cmp-plot .pb, .cmp:has([data-act=B][aria-pressed=true]) .cmp-plot .pa{
opacity:.3;
stroke-width:1.5;
}

.cmp:has([data-act=A][aria-pressed=true]) .cmp-plot .pa, .cmp:has([data-act=B][aria-pressed=true]) .cmp-plot .pb{
stroke-width:2.75;
}

.cmp-key .ka, .cmp-key .kb{
background:var(--fill-1);
box-shadow:0 0 0 1px var(--line);
transition:box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.cmp:has([data-act=A][aria-pressed=true]) .cmp-key .ka{
box-shadow:0 0 0 1.5px var(--ref);
color:var(--ref);
}

.cmp:has([data-act=B][aria-pressed=true]) .cmp-key .kb{
box-shadow:0 0 0 1.5px var(--acc);
color:var(--acc-t);
}

.tip{
background:var(--glass);
color:var(--fg);
border-radius:var(--r-2);
box-shadow:var(--lift-3);
backdrop-filter:blur(16px) saturate(1.6);
-webkit-backdrop-filter:blur(16px) saturate(1.6);
}

.tip span{
color:var(--dim);
opacity:1;
}

.tip b{
font-variant-numeric:tabular-nums;
}

.tip:not([hidden]){
animation:fi var(--dur-1) var(--ease);
}

#cur{
stroke:var(--acc-t);
stroke-opacity:.7;
stroke-dasharray:none;
stroke-width:1;
}

#dot{
stroke:var(--surface-1);
stroke-width:2.5;
filter:drop-shadow(0 0 6px var(--acc));
}

@media(prefers-reduced-motion:reduce){
.seg::before, .prow, .lcard, .btn, .cmp-plot polyline{
transition:none;
}

.tip:not([hidden]){
animation:none;
}
}

/* == Phase 3: brand + motion == */

.eq-card{
container-type:inline-size;
}

.eq{
--bw:calc(100cqw/66.25);
gap:calc(var(--bw)*1.25);
}

.eq i{
flex:none;
inline-size:var(--bw);
border-radius:calc(var(--bw)/2);
}

@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.sec>*{
animation:reveal linear both;
animation-timeline:view();
animation-range:entry 0% entry 30%;
}

@keyframes reveal{
from{
opacity:0;
translate:0 16px;
}
}
}
}

@supports (view-transition-name:a){
.reader{
view-transition-name:reader;
transition:none;
}

.reader::backdrop{
transition:none;
}

@starting-style{
.reader[open]{
transform:none;
}

.reader[open]::backdrop{
opacity:1;
}
}

::view-transition-old(reader){
animation:reader-out var(--dur-2) var(--ease) both;
}

::view-transition-new(reader){
animation:reader-in var(--dur-3) var(--ease) both;
}

@keyframes reader-in{
from{
translate:100% 0;
opacity:.6;
}
}

@keyframes reader-out{
to{
translate:100% 0;
opacity:0;
}
}
}

/* == Phase 4: accessibility == */

.chart{
touch-action:pan-y;
}

:focus-visible{
box-shadow:0 0 0 2px var(--surface-0);
}

@media(forced-colors:active){
:focus-visible{
outline-color:Highlight;
box-shadow:none;
}
}

:is(a[data-doc]:not(:is(p, .qa-note) a), .brand, .round, .bar>.chip, a.chip, button.chip, .btn, .lhash, .ldl, .chk, .lset>summary, .x-hash button){
position:relative;
}

:is(a[data-doc]:not(:is(p, .qa-note) a), .brand, .round, .bar>.chip, a.chip, button.chip, .btn, .lhash, .ldl, .chk, .lset>summary, .x-hash button)::after{
content:"";
position:absolute;
inset-block:min(0px,calc((100% - var(--hit))/2));
inset-inline:min(0px,calc((100% - var(--hit))/2));
}

.seg button, .fld select{
min-height:var(--hit);
}

@media(min-width:900px){
.nav a::after{
content:"";
position:absolute;
height:auto;
inset-block:calc((var(--ctl) - var(--hit))/2);
inset-inline:0;
width:auto;
background:none;
}
}

@media(max-width:899px){
.nav a{
color:var(--mut);
}

.nav a[aria-current=true]{
color:var(--acc-t);
}
}

@media(prefers-contrast:more){
.nav a{
color:var(--fg);
}

.nav a[aria-current=true]{
color:var(--acc-t);
}
}

@media(max-width:899px){
.bar{
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.bar::before{
content:"";
display:block;
position:absolute;
inset:0;
z-index:-1;
border-radius:inherit;
backdrop-filter:blur(24px) saturate(1.6);
-webkit-backdrop-filter:blur(24px) saturate(1.6);
}
}

/* == Header (desktop): nav yields space, controls never clip == */

@media(min-width:900px){
.nav{
flex:1 1 0;
min-inline-size:0;
margin:0;
block-size:var(--hit);
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
mask:linear-gradient(90deg,transparent,#000 calc(var(--u)*4),#000 calc(100% - var(--u)*4),transparent);
-webkit-mask:linear-gradient(90deg,transparent,#000 calc(var(--u)*4),#000 calc(100% - var(--u)*4),transparent);
}

.nav::-webkit-scrollbar{
display:none;
}

.nav a{
flex:none;
block-size:100%;
padding-inline:calc(var(--u)*2.5);
}

.nav a:first-child{
margin-inline-start:auto;
}

.nav a:last-child{
margin-inline-end:auto;
}

.nav a::after{
display:none;
}

.bar>.chip, .bar>.round{
flex:none;
}
}

@media(min-width:900px) and (max-width:1180px){
.nav a{
padding-inline:calc(var(--u)*2);
font-size:.75rem;
}
}

/* == Header (mobile): download-all lives here == */

@media(max-width:899px){
.bar>a.round[aria-label="GitHub repository"]{
display:none;
}

.bar>.fab{
position:relative;
inset:auto;
z-index:auto;
flex:none;
inline-size:var(--hit);
block-size:var(--hit);
margin:0;
border-radius:50%;
background:var(--grad);
color:var(--ink);
box-shadow:0 0 0 1px var(--ring-2),0 6px 18px -6px var(--glow);
}

.bar>.fab:hover:not(:disabled){
transform:none;
}

.bar>.fab:active:not(:disabled){
transform:scale(.94);
}

.bar>.fab .i{
inline-size:calc(var(--u)*5);
block-size:calc(var(--u)*5);
}
}

@media(max-width:420px){
.bar>.chip{
padding-inline:calc(var(--u)*2.5);
font-size:.625rem;
letter-spacing:.03em;
}

.brand{
gap:calc(var(--u)*2);
}
}

/* == Shared: kind chips, round chevrons, card folds == */

.k{
display:inline-flex;
align-items:center;
gap:4px;
padding:4px 7px;
border-radius:var(--r-pill);
font:600 .6875rem/1 var(--mono);
font-style:normal;
letter-spacing:.03em;
color:var(--mut);
background:var(--fill-1);
box-shadow:inset 0 0 0 1px var(--line);
}

.k::before{
content:"";
inline-size:6px;
block-size:6px;
border-radius:50%;
background:var(--acc);
}

.k.irs::before{
background:var(--ref);
}

.k.eel::before{
background:var(--warn);
}

:is(.lset, .fold)>summary .chev{
flex:none;
inline-size:calc(var(--u)*7);
block-size:calc(var(--u)*7);
padding:calc(var(--u)*1.75);
border-radius:50%;
background:var(--fill-1);
box-shadow:inset 0 0 0 1px var(--line);
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
color:var(--mut);
}

:is(.lset, .fold)>summary{
list-style:none;
}

:is(.lset, .fold)>summary::-webkit-details-marker{
display:none;
}

:is(.lset, .fold)[open]>summary .chev{
color:var(--acc-t);
background:var(--tint-3);
}

/* == Library sets: card grid, chips for file kinds == */

.ldev{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
gap:var(--s3);
align-items:start;
}

.ldev>.x-sub{
grid-column:1/-1;
margin:0;
}

.lset{
margin:0;
border-radius:var(--r-3);
background:var(--surface-1);
box-shadow:var(--lift-1);
transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2);
}

.lset:not([open]):hover{
border-color:var(--ring-1);
}

.lset[open]{
grid-column:1/-1;
border-color:var(--ring-1);
}

.lset>summary{
gap:var(--s3);
padding:var(--s3) var(--s4);
}

.lset>summary>span{
flex:1;
min-inline-size:0;
gap:calc(var(--u)*2);
}

.lset>summary b{
font:650 var(--t-lg,1.125rem)/1.1 var(--display);
}

.kinds{
display:flex;
flex-wrap:wrap;
gap:4px;
}

/* == Documentation + folds: icon-tile cards == */

.folds{
border:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
gap:var(--s3);
align-items:start;
}

.fold{
border:1px solid var(--line);
border-radius:var(--r-3);
background:var(--surface-1);
box-shadow:var(--lift-1);
transition:border-color var(--dur-2) var(--ease);
}

.fold:not([open]):hover{
border-color:var(--ring-1);
}

.fold[open]{
grid-column:1/-1;
border-color:var(--ring-1);
}

.fold>summary{
display:flex;
align-items:center;
gap:var(--s3);
padding:var(--s3) var(--s4);
border-radius:inherit;
cursor:pointer;
}

.fold>summary>span:not(.ico){
flex:1;
min-inline-size:0;
}

.fold>summary .ico{
flex:none;
display:grid;
place-items:center;
inline-size:calc(var(--u)*10);
block-size:calc(var(--u)*10);
border-radius:calc(var(--u)*3);
color:var(--acc-t);
background:linear-gradient(180deg,var(--tint-4),var(--tint-2));
box-shadow:inset 0 0 0 1px var(--ring-1),inset 0 1px 0 var(--hi);
}

.fold>summary .ico .i{
inline-size:calc(var(--u)*5);
block-size:calc(var(--u)*5);
fill:none;
stroke:currentColor;
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
}

.fold-body{
padding-top:var(--s2);
}

/* == Integrity and licence == */

.hgrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
gap:var(--s3);
margin-top:var(--s4);
}

.hcard{
border:1px solid var(--line);
border-radius:var(--r-3);
background:var(--surface-1);
box-shadow:var(--lift-1);
padding:var(--s2);
}

.hcard>header{
display:flex;
align-items:center;
gap:var(--s2);
padding:var(--s2) var(--s3) var(--s3);
}

.hcard>header .i{
inline-size:calc(var(--u)*5);
block-size:calc(var(--u)*5);
fill:none;
stroke:var(--acc-t);
stroke-width:1.75;
stroke-linecap:round;
stroke-linejoin:round;
}

.hcard>header b{
font:650 var(--t-md) var(--display);
}

.hcard>header small{
margin-inline-start:auto;
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.hcard .x-hash{
margin:0;
gap:var(--u);
}

.hcard .x-hash button{
grid-template-columns:1fr auto auto;
grid-template-areas:"n k c" "h h h";
gap:calc(var(--u)*1.5) var(--s3);
padding:var(--s2) var(--s3);
border:0;
border-radius:var(--r-2);
background:transparent;
text-align:left;
}

.hcard .x-hash button:hover, .hcard .x-hash button:focus-visible{
background:var(--fill-1);
}

.hcard .x-hash button>span{
grid-area:n;
font:600 var(--t-sm) var(--mono);
color:var(--fg);
overflow-wrap:anywhere;
}

.hcard .x-hash button>i{
grid-area:k;
}

.hcard .x-hash button>svg{
grid-area:c;
}

.hcard .x-hash button>code{
grid-area:h;
color:var(--dim);
}

.hcard .x-hash button.done>span{
color:var(--ok);
}

#copyAll{
margin-top:var(--s4);
}

.lic{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
gap:var(--s3);
margin-bottom:var(--s4);
}

.lic a{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:var(--u) var(--s3);
padding:var(--s3) var(--s4);
border:1px solid var(--line);
border-radius:var(--r-3);
background:var(--surface-1);
box-shadow:var(--lift-1);
color:var(--fg);
text-decoration:none;
transition:border-color var(--dur-2) var(--ease);
}

.lic a:hover{
border-color:var(--ring-1);
}

.lic small{
grid-column:1;
font:500 var(--t-xs) var(--mono);
color:var(--dim);
}

.lic b{
grid-column:1;
font:650 var(--t-lg,1.125rem) var(--display);
}

.lic .chev{
grid-column:2;
grid-row:1/3;
inline-size:20px;
block-size:20px;
fill:none;
stroke:var(--mut);
stroke-width:2;
stroke-linecap:round;
transform:rotate(-90deg);
}

@media(max-width:380px){
.brand{
font-size:0;
}
}

:is(.lset, .fold)[open]>summary .chev{
transform:rotate(180deg);
}

.foot a{
display:inline-block;
padding-block:var(--s2);
margin-block:calc(var(--s2)*-1);
}
}

@layer premium{
/* == Premium type == */

h1.display{
letter-spacing:var(--track-display);
line-height:.94;
text-wrap:balance;
}

.sec-h h2{
letter-spacing:var(--track-h);
line-height:1.08;
text-wrap:balance;
}

.lede{
color:var(--mut);
line-height:1.65;
text-wrap:pretty;
max-width:var(--measure);
}

p,li{
text-wrap:pretty;
}

.lbl{
letter-spacing:.08em;
}

/* == Premium rhythm == */

.sec{
padding-block:var(--sec) 0;
}

.sec-h{
padding-bottom:var(--s4);
margin-bottom:var(--s6);
border-bottom:1px solid var(--line);
}

.hero-actions{
gap:var(--s3);
}

/* == Premium surfaces == */

:is(.hcard,.x-card,.lcard,.stat,.lset,.fold,.lic a){
background:var(--card);
border-color:var(--line);
box-shadow:var(--lift-1);
}

:is(.hcard,.lset,.fold,.lic a):hover{
background:var(--card-h);
border-color:var(--line2);
}

/* == Premium controls == */

.btn{
letter-spacing:-.005em;
font-weight:600;
transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

.btn:not(.ghost){
box-shadow:0 1px 0 rgb(255 255 255/.35) inset,0 10px 24px -10px var(--glow);
}

.btn:hover{
transform:translateY(-1px);
}

.btn:active{
transform:translateY(0);
}

.ghost{
background:var(--fill-1);
border:1px solid var(--line2);
box-shadow:none;
}

.ghost:hover{
background:var(--fill-2);
}

:is(.chip,.tag,.x-pill){
letter-spacing:.04em;
}

@media(prefers-reduced-motion:reduce){
.btn:hover{
transform:none;
}
}

/* == Premium hero == */

.hero-copy>*{
animation-duration:.5s;
}

.eq-card{
border-color:var(--line2);
box-shadow:var(--lift-3);
}

@media(min-width:900px){
.hero{
min-height:min(56rem,100svh);
align-content:center;
padding-bottom:var(--s7);
}

.eq{
height:clamp(15rem,22vw,21rem);
}

.eq-card{
padding:var(--s5);
}
}

/* == Premium components == */
.x-pill{
border-radius:var(--r-pill);
}

.btn{
font-size:.875rem;
}

audio{
accent-color:var(--acc);
border-radius:var(--r-pill);
}

input[type=checkbox]{
accent-color:var(--acc);
inline-size:1.125rem;
block-size:1.125rem;
}

/* == Premium nav == */
@media(min-width:900px){
.nav a{
align-items:center;
}
}

@media(max-width:899px){
.foot .wrap{
padding-bottom:calc(var(--h-dock) + var(--s8) + env(safe-area-inset-bottom));
}

.foot .wrap>span:last-child{
padding-inline-end:calc(var(--hit) + var(--s3));
}
}
}