/* == Tokens == */
:root{
color-scheme:dark;
--bg:#090a13;
--bg2:#10121f;
--bg3:#181b2e;
--bg4:#20243b;
--fg:#eef0fc;
--mut:#b0b6d6;
--dim:#8c93b8;
--line:rgb(170 180 255/.11);
--line2:rgb(170 180 255/.22);
--tick:rgb(170 180 255/.32);
--grid:rgb(170 180 255/.07);
--grid2:rgb(170 180 255/.035);
--acc:#8e9cff;
--acc-t:#b9c2ff;
--acc-s:rgb(142 156 255/.12);
--acc-b:rgb(142 156 255/.34);
--ink:#0a0b16;
--btn:#8e9cff;
--btn-h:#a9b4ff;
--btn-fg:#0a0b16;
--ref:#5ee7d3;
--ok:#7ef0b5;
--warn:#ffc27a;
--bad:#ff8f9c;
--code:#070812;
--code-fg:#c3c9e8;
--shadow:rgb(2 3 12/.55);
--glow:rgb(142 156 255/.22);
--grad:linear-gradient(135deg,#8e9cff,#5ee7d3);
--sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--display:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;
--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--s1:.25rem;
--s2:.5rem;
--s3:.75rem;
--s4:1rem;
--s5:1.5rem;
--s6:2rem;
--s7:3rem;
--s8:4rem;
--pad:var(--s4);
--r1:8px;
--r2:16px;
--r3:24px;
--hit:2.75rem;
--ctl:2.5rem;
--bar:4.6rem;
--sec:clamp(3rem,8vw,6rem);
--measure:64ch;
--t-xs:.75rem;
--t-sm:.8125rem;
--t-md:1rem;
--t-lg:1.25rem;
--t-xl:1.5625rem;
--t-2xl:1.9375rem;
--t-3xl:2.4375rem;
--t-4xl:3.0625rem;
--ease:cubic-bezier(.2,.8,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur:.24s;
}

[data-theme=light]{
color-scheme:light;
--bg:#f5f6fd;
--bg2:#ffffff;
--bg3:#eceefb;
--bg4:#e0e3f7;
--fg:#12142b;
--mut:#454a70;
--dim:#5b6188;
--line:rgb(28 36 110/.12);
--line2:rgb(28 36 110/.22);
--tick:rgb(28 36 110/.34);
--grid:rgb(28 36 110/.07);
--grid2:rgb(28 36 110/.035);
--acc:#4a56e6;
--acc-t:#3640c4;
--acc-s:rgb(74 86 230/.1);
--acc-b:rgb(74 86 230/.35);
--ink:#f6f7ff;
--btn:#1b1f4d;
--btn-h:#2b3170;
--btn-fg:#eef0ff;
--ref:#0a8f84;
--ok:#1f7a45;
--warn:#8f5300;
--bad:#b03a48;
--code:#171a3a;
--code-fg:#d9ddf7;
--shadow:rgb(30 36 100/.16);
--glow:rgb(74 86 230/.18);
--grad:linear-gradient(135deg,#4a56e6,#0aa89b);
}

@media(min-width:640px){
:root{
--pad:var(--s5);
}
}

@media(min-width:900px){
:root{
--pad:var(--s6);
}
}

/* == Base == */
*,*::before,*::after{
box-sizing:border-box;
}

*{
margin:0;
}

[hidden]{
display:none !important;
}

html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--bar) + 3.5rem);
background:var(--bg);
}

body{
min-height:100dvh;
padding-bottom:calc(6.5rem + env(safe-area-inset-bottom));
background:var(--bg);
color:var(--fg);
font:400 var(--t-md)/1.6 var(--sans);
overflow-x:clip;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

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

img{
height:auto;
}

button,input,select{
font:inherit;
color:inherit;
}

button{
background:none;
border:0;
padding:0;
cursor:pointer;
text-align:inherit;
-webkit-tap-highlight-color:transparent;
}

a{
color:var(--acc-t);
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}

th,td{
padding:0;
}

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

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

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

body,.stat b,.crow,.x-tbl,.asset-meta,.x-spec{
font-variant-numeric:tabular-nums slashed-zero;
}

code,pre,.lbl,.ax,.mk-t,.cmp-axis{
font-variant-numeric:slashed-zero;
font-feature-settings:"zero" 1;
}

p,li,figcaption{
text-wrap:pretty;
}

code{
padding:0 var(--s1);
border-radius:var(--r1);
background:var(--bg3);
color:var(--fg);
font-size:.86em;
overflow-wrap:anywhere;
}

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

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

summary{
list-style:none;
cursor:pointer;
}

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

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

.lbl{
display:block;
font:600 var(--t-xs)/1.4 var(--mono);
letter-spacing:.09em;
text-transform:uppercase;
color:var(--dim);
}

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

.i.xs{
width:1rem;
height:1rem;
}

.i.lg{
width:1.5rem;
height:1.5rem;
}

/* == Header == */
.bar{
position:sticky;
top:0;
z-index:50;
display:grid;
grid-template-columns:minmax(0,1fr) auto auto auto;
align-items:center;
gap:var(--s1);
padding:calc(.5rem + env(safe-area-inset-top)) var(--pad) 0;
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(18px) saturate(1.4);
-webkit-backdrop-filter:blur(18px) saturate(1.4);
border-bottom:1px solid var(--line);
}

.brand{
display:flex;
align-items:center;
gap:.5rem;
min-height:var(--hit);
color:var(--fg);
font:600 var(--t-md)/1 var(--display);
letter-spacing:-.02em;
}

.nav{
grid-column:1/-1;
order:5;
display:flex;
gap:var(--s1);
margin:0 calc(var(--pad)*-1);
padding:.25rem var(--pad) .5rem;
overflow-x:auto;
scroll-snap-type:x proximity;
scrollbar-width:none;
}

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

.nav a{
flex:none;
scroll-snap-align:center;
padding:.5rem .75rem;
border-radius:99px;
color:var(--mut);
font:500 var(--t-sm)/1 var(--sans);
transition:background var(--dur),color var(--dur);
}

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

.nav a[aria-current=true]{
background:var(--acc-s);
color:var(--acc-t);
box-shadow:inset 0 0 0 1px var(--acc-b);
}

.chip{
display:inline-flex;
align-items:center;
gap:.5rem;
min-height:2rem;
padding:0 .75rem;
border-radius:99px;
background:var(--bg2);
box-shadow:inset 0 0 0 1px var(--line);
color:var(--mut);
font:600 var(--t-xs)/1 var(--mono);
letter-spacing:.05em;
white-space:nowrap;
}

.chip.ok{
color:var(--ok);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent);
background:color-mix(in srgb,var(--ok) 10%,var(--bg2));
}

.chip.bad{
color:var(--bad);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent);
background:color-mix(in srgb,var(--bad) 10%,var(--bg2));
}

.chip.warn{
color:var(--warn);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent);
background:color-mix(in srgb,var(--warn) 10%,var(--bg2));
}

.round{
position:relative;
display:grid;
place-items:center;
width:2.5rem;
height:2.5rem;
border-radius:50%;
color:var(--mut);
transition:background var(--dur),color var(--dur);
}

.round:hover{
background:var(--bg3);
color:var(--fg);
}

.round .ext{
position:absolute;
right:.25rem;
top:.25rem;
width:.5rem;
height:.5rem;
opacity:.6;
}

#themeBtn .i{
position:absolute;
transition:opacity .3s,transform .3s var(--ease);
}

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

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

@media(min-width:900px){
.bar{
display:flex;
padding-top:env(safe-area-inset-top);
min-height:var(--bar);
gap:var(--s3);
}

.brand{
margin-right:auto;
}

.nav{
order:0;
margin:0;
padding:0;
overflow:visible;
}
}

/* == Layout == */
.wrap{
width:100%;
max-width:76rem;
margin-inline:auto;
padding-inline:var(--pad);
}

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

.sec+.sec{
border-top:1px solid var(--line);
}

@media(min-width:900px){
.sec{
padding-block:var(--s8);
}
}

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

.sec>.sec-h+*{
margin-top:0;
}

.sec-h{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:var(--s2) var(--s3);
margin-bottom:var(--s5);
}

.sec-h .lbl{
padding:.25rem .5rem;
border-radius:var(--r1);
background:var(--acc-s);
color:var(--acc-t);
}

.sec-h h2{
font-size:clamp(var(--t-xl),1rem + 2.2vw,var(--t-3xl));
letter-spacing:-.035em;
}

.sec-h .chip{
align-self:center;
}

.qa-note{
max-width:var(--measure);
color:var(--mut);
font-size:var(--t-md);
}

.qa-note a{
text-decoration:underline;
text-underline-offset:.2em;
}

.x-sub{
font-size:var(--t-lg);
}

/* == Buttons == */
.btn{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
min-height:var(--hit);
padding:.5rem 1rem;
border-radius:var(--r1);
background:var(--btn);
color:var(--btn-fg);
font:600 var(--t-sm)/1.2 var(--sans);
text-align:center;
transition:transform .16s var(--ease),background var(--dur),box-shadow var(--dur);
}

.btn:hover:not(:disabled){
background:var(--btn-h);
box-shadow:0 .5rem 1.6rem var(--glow);
}

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

.btn:disabled{
opacity:.4;
cursor:not-allowed;
}

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

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

.btn[aria-pressed=true]{
background:var(--acc-s);
color:var(--acc-t);
box-shadow:inset 0 0 0 1px var(--acc);
}

/* == Hero == */
.hero{
display:grid;
gap:var(--s6);
padding-block:var(--s6) var(--s7);
}

.hero-kicker{
display:flex;
align-items:center;
gap:.5rem;
}

.live-dot{
width:.5rem;
height:.5rem;
border-radius:50%;
background:var(--acc);
box-shadow:0 0 0 0 var(--acc-b);
animation:ping 2.4s infinite;
}

.display{
font-size:clamp(var(--t-3xl),1.2rem + 6.4vw,5.5rem);
font-weight:600;
letter-spacing:-.045em;
line-height:1;
}

.display em{
font-family:var(--serif);
font-style:italic;
font-weight:400;
font-size:1.1em;
letter-spacing:-.02em;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}

.lede{
max-width:46ch;
color:var(--mut);
font-size:var(--t-lg);
line-height:1.55;
}

.hero-actions{
display:grid;
gap:var(--s2);
}

.hero-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--s2) var(--s3);
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
letter-spacing:.06em;
text-transform:uppercase;
}

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

.hero-meta i{
width:1px;
height:.75rem;
background:var(--line2);
}

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

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

.hero-art{
position:relative;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r3);
background:radial-gradient(120% 90% at 80% 0%,var(--glow),transparent 60%),var(--bg2);
overflow:hidden;
}

.art-top,.art-bottom{
display:flex;
justify-content:space-between;
gap:var(--s3);
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
letter-spacing:.1em;
text-transform:uppercase;
}

.art-bottom{
padding-right:3rem;
}

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

.art-index{
position:absolute;
right:var(--s4);
bottom:var(--s3);
color:var(--dim);
font:600 var(--t-xs) var(--mono);
}

.hero-wave{
width:100%;
height:9rem;
margin-block:var(--s3);
overflow:visible;
}

.wave-grid path{
fill:none;
stroke:var(--grid);
stroke-width:1;
vector-effect:non-scaling-stroke;
}

.wave-back,.wave-main,.wave-thin{
fill:none;
stroke-linecap:round;
vector-effect:non-scaling-stroke;
}

.wave-back{
stroke:var(--acc);
stroke-opacity:.18;
stroke-width:6;
}

.wave-main{
stroke:url(#waveStroke);
stroke-width:2.4;
stroke-dasharray:1;
animation:draw 2.2s var(--ease-out) both;
}

.wave-thin{
stroke:var(--ref);
stroke-opacity:.7;
stroke-width:1.2;
stroke-dasharray:1;
animation:draw 2.8s var(--ease-out) .2s both;
}

@media(min-width:640px){
.hero-actions{
grid-auto-flow:column;
justify-content:start;
}

.hero-wave{
height:12rem;
}
}

@media(min-width:900px){
.hero{
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:var(--s7);
padding-block:var(--s8);
}

.hero-wave{
height:16rem;
}
}

/* == Stats == */
.stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--s2);
}

.stat{
min-width:0;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
}

.stat b{
display:block;
margin-top:var(--s1);
font:600 clamp(var(--t-lg),.9rem + 1.4vw,var(--t-2xl))/1.1 var(--display);
letter-spacing:-.035em;
font-feature-settings:"tnum" 1;
overflow-wrap:anywhere;
}

.stat small{
display:block;
margin-top:var(--s1);
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
overflow-wrap:anywhere;
}

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

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

/* == Signal Flow == */
.x-flow{
display:grid;
gap:0;
}

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

.x-node+.x-node{
margin-top:var(--s3);
}

.x-node+.x-node::before{
content:"";
position:absolute;
left:1.375rem;
margin-left:-.5px;
bottom:100%;
width:1px;
height:var(--s3);
background:var(--line2);
}

.x-node::after{
content:"";
position:absolute;
left:1rem;
top:50%;
width:.75rem;
height:.75rem;
margin-top:-.375rem;
border-radius:50%;
background:var(--bg4);
box-shadow:inset 0 0 0 2px var(--line2);
}

.x-node.key{
border-color:var(--acc-b);
background:var(--acc-s);
}

.x-node.key::after{
background:var(--acc);
box-shadow:0 0 0 4px var(--acc-s);
}

.x-node b{
display:block;
font:600 var(--t-md)/1.3 var(--display);
}

.x-node small{
display:block;
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
}

@media(min-width:900px){
.x-flow{
grid-auto-flow:column;
grid-auto-columns:1fr;
gap:var(--s3);
}

.x-node,.x-node+.x-node{
margin:0;
padding:var(--s4);
}

.x-node::after{
display:none;
}

.x-node+.x-node::before{
left:auto;
right:100%;
bottom:auto;
top:50%;
width:var(--s3);
height:1px;
}
}

.x-warn{
padding:var(--s3) var(--s4);
border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));
border-left:3px solid var(--warn);
border-radius:var(--r1);
background:color-mix(in srgb,var(--warn) 7%,var(--bg2));
color:var(--mut);
font-size:var(--t-sm);
line-height:1.6;
}

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

.x-warn code{
background:var(--bg3);
}

/* == Profiles == */
.plist{
display:grid;
gap:var(--s3);
}

.prow{
position:relative;
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:"ic main dot" "chain chain chain" "spark spark spark";
gap:var(--s3);
align-items:start;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
overflow:hidden;
transition:border-color var(--dur),background var(--dur),transform .16s var(--ease);
}

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

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

.prow[aria-pressed=true]{
border-color:var(--acc);
background:linear-gradient(180deg,var(--acc-s),transparent 70%),var(--bg2);
box-shadow:0 0 0 1px var(--acc),0 1rem 2.5rem -1rem var(--glow);
}

.prow>.i.lg{
grid-area:ic;
width:2.75rem;
height:2.75rem;
padding:.75rem;
border-radius:var(--r1);
background:var(--bg3);
color:var(--mut);
}

.prow[aria-pressed=true]>.i.lg{
background:var(--acc);
color:var(--btn-fg);
}

.pmain{
grid-area:main;
min-width:0;
}

.ptitle{
display:block;
font:600 var(--t-lg)/1.2 var(--display);
letter-spacing:-.03em;
}

.pdesc{
display:block;
color:var(--mut);
font-size:var(--t-sm);
line-height:1.55;
}

.pdot{
--c:var(--dim);
grid-area:dot;
width:.75rem;
height:.75rem;
margin-top:.5rem;
border-radius:50%;
background:var(--c);
box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);
}

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

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

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

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

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

.pchain span{
padding:.25rem .5rem;
border-radius:99px;
background:var(--bg3);
color:var(--mut);
font:500 var(--t-xs)/1.2 var(--mono);
}

.spark{
grid-area:spark;
width:100%;
height:2rem;
}

.spark path{
fill:none;
stroke:var(--acc);
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
opacity:.85;
}

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

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

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

@media(min-width:640px){
.plist{
grid-template-columns:1fr 1fr;
}
}

/* == Cards == */
.x-grid{
display:grid;
gap:var(--s3);
}

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

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

.x-card h3{
font-size:var(--t-lg);
}

.x-card p{
margin-top:var(--s3);
color:var(--mut);
font-size:var(--t-sm);
}

.x-spec{
display:grid;
grid-template-columns:5.5rem minmax(0,1fr);
gap:0rem var(--s3);
font-size:var(--t-sm);
}

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

.x-spec dt{
color:var(--dim);
font:600 var(--t-xs)/1.6 var(--mono);
letter-spacing:.06em;
text-transform:uppercase;
}

.x-spec dd{
margin:0;
font:500 var(--t-sm)/1.5 var(--mono);
overflow-wrap:anywhere;
}

html[data-dev=iem] .x-card[data-d=spk],html[data-dev=spk] .x-card[data-d=iem]{
display:none;
}

@media(min-width:760px){
html[data-dev] .x-card[data-d]{
display:block;
}
}

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

.links a{
display:inline-flex;
align-items:center;
gap:.5rem;
min-height:2.25rem;
padding:0 .75rem;
border-radius:99px;
box-shadow:inset 0 0 0 1px var(--line2);
color:var(--fg);
font:500 var(--t-sm)/1 var(--sans);
transition:box-shadow var(--dur),color var(--dur);
}

.links a:hover{
box-shadow:inset 0 0 0 1px var(--acc);
color:var(--acc-t);
}

/* == Steps and Code == */
.x-steps{
display:grid;
gap:var(--s2);
counter-reset:s;
}

.x-steps li{
position:relative;
padding:var(--s3) var(--s4) var(--s3) 3rem;
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg2);
counter-increment:s;
color:var(--mut);
font-size:var(--t-sm);
}

.x-steps li::before{
content:counter(s);
position:absolute;
left:var(--s3);
top:.75rem;
display:grid;
place-items:center;
width:1.75rem;
height:1.75rem;
border-radius:50%;
background:var(--acc-s);
color:var(--acc-t);
font:600 var(--t-xs) var(--mono);
}

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

.x-code{
margin:0;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--code);
color:var(--code-fg);
font-size:var(--t-xs);
line-height:1.8;
overflow-x:auto;
}

/* == Accordions == */
.acc,.fold,.seal,.asset-archive{
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
overflow:clip;
}

.acc>summary,.fold>summary,.seal>summary,.asset-archive-summary{
display:flex;
align-items:center;
gap:var(--s3);
min-height:3.5rem;
padding:var(--s3) var(--s4);
transition:background var(--dur);
}

.acc>summary:hover,.fold>summary:hover,.seal>summary:hover,.asset-archive-summary:hover{
background:var(--bg3);
}

.acc>summary>span,.fold>summary>span{
flex:1;
min-width:0;
}

.acc>summary b,.fold>summary b{
display:block;
font:600 var(--t-md)/1.3 var(--display);
}

.acc>summary small,.fold>summary small{
display:block;
color:var(--dim);
font-size:var(--t-xs);
}

.chev{
flex:none;
color:var(--dim);
transition:transform var(--dur) var(--ease);
}

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

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

.acc-body,.folds{
display:grid;
gap:var(--s3);
}

.fold-body{
display:grid;
gap:var(--s3);
padding:var(--s4);
color:var(--mut);
font-size:var(--t-sm);
}

.fold-body .note{
padding:var(--s3);
border-left:2px solid var(--acc);
background:var(--acc-s);
border-radius:0 var(--r1) var(--r1) 0;
}

.fold-body b,.acc-body b{
color:var(--fg);
}

/* == Chart == */
.chart{
position:relative;
padding:var(--s2);
overflow:hidden;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
touch-action:pan-y;
cursor:crosshair;
}

.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;
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;
}

#cur{
stroke:var(--fg);
stroke-opacity:.55;
stroke-dasharray:3 3;
}

.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);
stroke:var(--bg2);
stroke-width:2;
}

.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);
left:var(--s3);
z-index:2;
min-width:8.5rem;
padding:var(--s2) var(--s3);
border-radius:var(--r1);
background:var(--fg);
color:var(--bg);
font:500 var(--t-xs)/1.5 var(--mono);
pointer-events:none;
box-shadow:0 .6rem 2rem var(--shadow);
}

.tip[hidden]{
display:none;
}

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

.tip span{
opacity:.65;
}

.cap{
margin-top:var(--s2);
text-transform:none;
letter-spacing:.02em;
}

/* == Export == */
#export .btn[data-all]{
width:100%;
}

.files{
display:grid;
gap:var(--s2);
}

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

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

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

.frow>.i:first-child{
width:2.25rem;
height:2.25rem;
padding:.5rem;
border-radius:var(--r1);
background:var(--bg3);
color:var(--acc-t);
}

.frow>.i:last-child{
color:var(--dim);
}

.frow b{
display:block;
font:600 var(--t-md)/1.3 var(--display);
}

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

@media(min-width:760px){
.files{
grid-template-columns:1fr 1fr;
}

#export .btn[data-all]{
width:auto;
}
}

/* == Asset Library == */
.lib-bar{
position:relative;
z-index:20;
display:grid;
gap:var(--s2);
padding:var(--s3);
border:1px solid var(--line);
border-radius:var(--r2);
background:color-mix(in srgb,var(--bg2) 90%,transparent);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.lib-search{
width:100%;
min-height:var(--hit);
padding:0 var(--s4);
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg);
color:var(--fg);
font:500 var(--t-sm) var(--mono);
}

.lib-search::placeholder{
color:var(--dim);
}

.lib-search:focus{
outline:2px solid var(--acc);
outline-offset:1px;
border-color:transparent;
}

.lib-chips{
display:flex;
gap:var(--s2);
margin:0 calc(var(--s3)*-1);
padding:0 var(--s3);
overflow-x:auto;
scrollbar-width:none;
}

.lib-chips::-webkit-scrollbar{
display:none;
}

.lib-chips button{
flex:none;
min-height:2.25rem;
padding:0 .75rem;
border-radius:99px;
box-shadow:inset 0 0 0 1px var(--line2);
color:var(--mut);
font:600 var(--t-xs)/1 var(--mono);
letter-spacing:.05em;
text-transform:uppercase;
transition:background var(--dur),color var(--dur);
}

.lib-chips button[aria-pressed=true]{
background:var(--acc);
color:var(--btn-fg);
box-shadow:none;
}

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

.asset-device{
display:grid;
gap:var(--s4);
}

.asset-device:empty{
display:none;
}

.asset-device-title{
display:grid;
gap:var(--s1);
}

.asset-device-title h3{
font-size:var(--t-xl);
}

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

.asset-grid{
display:grid;
gap:var(--s3);
}

.asset-card{
display:flex;
flex-direction:column;
gap:var(--s2);
min-width:0;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
transition:border-color var(--dur);
}

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

.asset-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s2);
}

.asset-type{
padding:.25rem .5rem;
border-radius:var(--r1);
background:var(--bg4);
font:600 var(--t-xs)/1.3 var(--mono);
letter-spacing:.08em;
}

.asset-status{
padding:.25rem .5rem;
border-radius:99px;
font:600 var(--t-xs)/1.3 var(--mono);
letter-spacing:.05em;
text-transform:uppercase;
background:var(--bg3);
color:var(--mut);
}

.asset-status.good{
background:color-mix(in srgb,var(--ok) 14%,transparent);
color:var(--ok);
}

.asset-status.warn{
background:color-mix(in srgb,var(--warn) 14%,transparent);
color:var(--warn);
}

.asset-name{
font:600 var(--t-md)/1.35 var(--mono);
letter-spacing:0;
overflow-wrap:anywhere;
}

.asset-release{
color:var(--acc-t);
font:600 var(--t-xs) var(--mono);
letter-spacing:.05em;
text-transform:uppercase;
}

.asset-note,.asset-pair{
color:var(--mut);
font-size:var(--t-sm);
line-height:1.55;
}

.asset-pair{
color:var(--dim);
}

.asset-warning{
padding:var(--s2) var(--s3);
border-left:2px solid var(--warn);
border-radius:0 var(--r1) var(--r1) 0;
background:color-mix(in srgb,var(--warn) 8%,transparent);
color:var(--warn);
font-size:var(--t-xs);
line-height:1.5;
}

.asset-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--s2);
margin-top:auto;
padding-top:var(--s3);
border-top:1px dashed var(--line);
color:var(--dim);
font:500 var(--t-xs) var(--mono);
}

.asset-hash{
min-height:2.25rem;
padding:0 .75rem;
border-radius:var(--r1);
background:var(--bg3);
color:var(--mut);
font:500 var(--t-xs) var(--mono);
transition:background var(--dur),color var(--dur);
}

.asset-hash:hover{
background:var(--acc-s);
color:var(--acc-t);
}

.asset-download{
width:100%;
}

.asset-subhead{
color:var(--dim);
font:600 var(--t-xs) var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
}

.asset-archive{
}

.asset-archive>:not(summary){
margin:var(--s4) var(--s4) 0;
}

.asset-archive>:last-child{
margin-bottom:var(--s4);
}

.asset-archive-summary{
justify-content:space-between;
font:600 var(--t-sm) var(--sans);
}

.asset-archive-cue{
padding:.25rem .75rem;
border-radius:99px;
background:var(--acc-s);
color:var(--acc-t);
font:600 var(--t-xs) var(--mono);
white-space:nowrap;
}

.asset-bundle-row{
}

.asset-bundle-label{
display:block;
margin-bottom:var(--s2);
color:var(--dim);
font:600 var(--t-xs) var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
}

.asset-bundle-row .asset-card{
border-color:var(--acc-b);
background:linear-gradient(180deg,var(--acc-s),transparent 80%),var(--bg2);
}

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

.lib-bar{
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
}

.lib-chips{
grid-column:1/-1;
}
}

@media(min-width:900px){
.lib-bar{
position:sticky;
top:calc(var(--bar) + .5rem);
}
}

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

/* == Live Compare == */
.compare-panel{
display:grid;
gap:var(--s4);
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r3);
background:radial-gradient(100% 70% at 100% 0%,var(--glow),transparent 60%),var(--bg2);
}

.compare-top{
display:grid;
gap:var(--s4);
}

.compare-source,.compare-filters{
display:grid;
gap:var(--s2);
align-content:start;
}

.compare-source label,.compare-filters p{
color:var(--dim);
font:600 var(--t-xs)/1.5 var(--mono);
letter-spacing:.06em;
text-transform:uppercase;
}

.compare-filters p{
text-transform:none;
letter-spacing:0;
font-weight:500;
}

.compare-source select,.compare-source input[type=file]{
width:100%;
min-height:var(--hit);
padding:.5rem var(--s3);
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg);
font-size:var(--t-sm);
}

.compare-source input[type=file]::file-selector-button{
margin-right:var(--s3);
padding:.25rem .75rem;
border:0;
border-radius:var(--r1);
background:var(--bg4);
color:var(--fg);
font:600 var(--t-xs) var(--mono);
}

.compare-filters label{
display:flex;
align-items:center;
gap:var(--s3);
min-height:var(--hit);
padding:0 var(--s3);
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg);
font-size:var(--t-sm);
cursor:pointer;
}

input[type=checkbox]{
width:1.25rem;
height:1.25rem;
accent-color:var(--acc);
}

.compare-buttons{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--s2);
}

.compare-buttons .btn{
padding-inline:.5rem;
}

.compare-sep{
display:none;
}

#cmpA,#cmpB{
grid-column:span 3/span 3;
}

@media(min-width:420px){
#cmpA,#cmpB{
grid-column:span 3/span 3;
}
}

.compare-blind .compare-buttons{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.compare-status{
padding:var(--s3) var(--s4);
border-radius:var(--r1);
background:var(--code);
color:var(--code-fg);
font:500 var(--t-xs)/1.7 var(--mono);
border-left:2px solid var(--acc);
}

.compare-blind{
display:grid;
gap:var(--s3);
padding:var(--s4);
border:1px dashed var(--line2);
border-radius:var(--r2);
}

.compare-blind b{
font:600 var(--t-md) var(--display);
}

.compare-blind small{
display:block;
color:var(--dim);
font-size:var(--t-xs);
line-height:1.5;
}

.compare-score{
color:var(--acc-t);
font:600 var(--t-xs) var(--mono);
}

.compare-plot-wrap{
padding:var(--s3);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg);
}

.compare-plot-head{
display:flex;
flex-direction:column;
gap:.25rem;
margin-bottom:var(--s2);
}

.compare-plot-head>span:last-child{
color:var(--mut);
font:500 var(--t-xs) var(--mono);
overflow-wrap:anywhere;
}

#cmpPlot{
width:100%;
height:auto;
}

.cmp-grid-line{
stroke:var(--line);
stroke-width:1;
opacity:.8;
}

.cmp-grid-line.zero{
stroke:var(--acc);
stroke-dasharray:4 4;
opacity:.65;
}

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

#cmpPlotLine{
fill:none;
stroke:var(--acc);
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
}

.compare-limits{
display:grid;
gap:var(--s3);
padding:var(--s4);
color:var(--mut);
font-size:var(--t-sm);
}

.compare-limits b{
color:var(--fg);
}

@media(min-width:760px){
.compare-panel{
padding:var(--s5);
}

.compare-top{
grid-template-columns:1fr 1fr;
}

.compare-buttons{
grid-template-columns:repeat(3,auto) 1fr auto auto;
}

.compare-sep{
display:block;
}

#cmpA,#cmpB{
grid-column:auto;
}

.compare-blind .compare-buttons{
grid-template-columns:repeat(4,auto);
justify-content:start;
}

.compare-plot-head{
flex-direction:row;
justify-content:space-between;
}
}

/* == Quality Assurance == */
.seal>summary{
min-height:4rem;
}

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

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

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

.seal ul{
display:grid;
}

.crow{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:start;
gap:var(--s3);
padding:var(--s3) var(--s4);
border-top:1px solid var(--line);
font-size:var(--t-sm);
}

.crow:first-child{
border-top:0;
}

.crow span{
min-width:0;
color:var(--fg);
}

.crow small{
display:block;
margin-top:var(--s1);
color:var(--dim);
font:500 var(--t-xs)/1.5 var(--mono);
overflow-wrap:anywhere;
}

.crow b{
display:inline-flex;
align-items:center;
gap:.25rem;
padding:.25rem .5rem;
border-radius:99px;
background:var(--bg3);
color:var(--dim);
font:600 var(--t-xs)/1.4 var(--mono);
letter-spacing:.05em;
text-transform:uppercase;
}

.crow.ok b{
background:color-mix(in srgb,var(--ok) 14%,transparent);
color:var(--ok);
}

.crow.bad b{
background:color-mix(in srgb,var(--bad) 14%,transparent);
color:var(--bad);
}

.crow.ok,.crow.bad{
animation:rise .4s var(--ease-out) var(--d,0ms) both;
}

.harness{
display:grid;
gap:var(--s3);
padding:var(--s4);
}

.harness h3{
font-size:var(--t-lg);
}

.harness p{
color:var(--mut);
font-size:var(--t-sm);
}

.console{
margin:0 var(--s4) var(--s4);
padding:var(--s3) var(--s4);
max-height:22rem;
overflow:auto;
border-radius:var(--r1);
background:var(--code);
color:var(--code-fg);
font:500 var(--t-xs)/1.8 var(--mono);
white-space:pre-wrap;
overflow-wrap:anywhere;
}

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

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

/* == Evidence == */
.x-tbl{
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
overflow:clip;
}

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

.x-tbl thead{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
}

.x-tbl tr{
display:grid;
gap:var(--s2);
padding:var(--s3) var(--s4);
border-top:1px solid var(--line);
}

.x-tbl tbody tr:first-child{
border-top:0;
}

.x-tbl td{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:var(--s2);
color:var(--mut);
}

.x-tbl td:first-child{
color:var(--fg);
font:600 var(--t-md) var(--display);
}

.x-tbl td[data-l]::before{
content:attr(data-l);
min-width:9.5rem;
color:var(--dim);
font:600 var(--t-xs)/1.6 var(--mono);
letter-spacing:.07em;
text-transform:uppercase;
}

.x-tbl td a{
text-decoration:underline;
text-underline-offset:.2em;
}

@media(min-width:760px){
.x-tbl thead{
position:static;
width:auto;
height:auto;
clip-path:none;
}

.x-tbl tr{
display:table-row;
padding:0;
}

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

.x-tbl th{
border-top:0;
background:var(--bg3);
color:var(--dim);
font:600 var(--t-xs) var(--mono);
letter-spacing:.07em;
text-transform:uppercase;
}

.x-tbl td[data-l]::before{
display:none;
}
}

.x-pill{
display:inline-block;
padding:.25rem .5rem;
border-radius:99px;
font:600 var(--t-xs)/1.5 var(--mono);
letter-spacing:.06em;
white-space:nowrap;
}

.x-pill.pass{
background:color-mix(in srgb,var(--ok) 15%,transparent);
color:var(--ok);
}

.x-pill.part{
background:color-mix(in srgb,var(--warn) 15%,transparent);
color:var(--warn);
}

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

.x-list{
display:grid;
gap:var(--s2);
}

.x-list li{
position:relative;
padding:var(--s3) var(--s4) var(--s3) 2rem;
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg2);
color:var(--mut);
font-size:var(--t-sm);
}

.x-list li::before{
content:"";
position:absolute;
left:var(--s4);
top:1.25rem;
width:.5rem;
height:.5rem;
border-radius:50%;
background:var(--acc);
}

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

.x-fig{
position:relative;
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
overflow:clip;
}

.x-fig button{
display:block;
width:100%;
cursor:zoom-in;
}

.x-fig img{
width:100%;
}

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

.x-fig figcaption{
padding:var(--s3) var(--s4);
border-top:1px solid var(--line);
color:var(--dim);
font-size:var(--t-xs);
line-height:1.5;
}

.zoom{
width:min(96vw,72rem);
max-width:none;
max-height:94dvh;
padding:var(--s3);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg);
color:var(--fg);
margin:auto;
}

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

.zoom form{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s3);
margin-bottom:var(--s2);
}

.zoom p{
color:var(--mut);
font-size:var(--t-sm);
}

.zoom img{
width:100%;
max-height:78dvh;
object-fit:contain;
}

/* == Integrity == */
.x-hash{
display:grid;
gap:var(--s2);
}

.x-hash button{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:var(--s2) var(--s3);
padding:var(--s3) var(--s4);
border:1px solid var(--line);
border-radius:var(--r1);
background:var(--bg2);
transition:border-color var(--dur),background var(--dur);
}

.x-hash button:hover{
border-color:var(--line2);
background:var(--bg3);
}

.x-hash button.done{
border-color:var(--acc);
}

.x-hash span{
min-width:0;
color:var(--fg);
font:600 var(--t-xs)/1.5 var(--mono);
overflow-wrap:anywhere;
}

.x-hash .i{
color:var(--dim);
}

.x-hash code{
grid-column:1/-1;
padding:.5rem .5rem;
background:var(--code);
color:var(--code-fg);
font-size:var(--t-xs);
line-height:1.6;
word-break:break-all;
}

@media(min-width:900px){
.x-hash{
grid-template-columns:1fr 1fr;
}
}

/* == Footer == */
.foot{
padding:var(--s6) 0;
border-top:1px solid var(--line);
color:var(--dim);
font-size:var(--t-xs);
line-height:1.7;
}

.foot .wrap{
display:grid;
gap:var(--s3);
}

.foot b{
color:var(--mut);
}

.foot a{
display:inline-flex;
align-items:center;
gap:.25rem;
text-decoration:underline;
text-underline-offset:.2em;
}

/* == Dock == */
.dock{
position:fixed;
left:50%;
bottom:calc(.75rem + env(safe-area-inset-bottom));
z-index:70;
display:flex;
align-items:center;
gap:var(--s2);
width:min(calc(100% - 1.5rem),30rem);
padding:var(--s2);
border:1px solid var(--line2);
border-radius:var(--r3);
background:color-mix(in srgb,var(--bg2) 88%,transparent);
backdrop-filter:blur(20px) saturate(1.5);
-webkit-backdrop-filter:blur(20px) saturate(1.5);
box-shadow:0 1.2rem 3rem var(--shadow);
transform:translateX(-50%);
}

.seg{
display:grid;
grid-template-columns:1fr 1fr;
flex:1;
min-width:0;
padding:.25rem;
border-radius:var(--r2);
background:var(--bg);
}

.seg button{
display:flex;
align-items:center;
justify-content:center;
gap:.5rem;
min-height:2.5rem;
padding:0 .5rem;
border-radius:calc(var(--r2) - var(--s1));
color:var(--mut);
font:600 var(--t-xs)/1 var(--sans);
white-space:nowrap;
transition:background var(--dur),color var(--dur);
}

.seg button[aria-pressed=true]{
background:var(--bg4);
color:var(--acc-t);
box-shadow:inset 0 0 0 1px var(--acc-b);
}

.fab{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
flex:none;
min-height:3rem;
padding:0 1rem;
border-radius:var(--r2);
background:var(--btn);
color:var(--btn-fg);
font:600 var(--t-sm)/1 var(--sans);
transition:transform .16s var(--ease),opacity var(--dur);
}

.fab:active{
transform:scale(.95);
}

.fab[aria-disabled=true]{
opacity:.45;
}

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

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

.top{
position:fixed;
right:var(--s3);
bottom:calc(5.4rem + env(safe-area-inset-bottom));
z-index:65;
display:grid;
place-items:center;
width:var(--hit);
height:var(--hit);
border-radius:50%;
background:var(--bg3);
box-shadow:inset 0 0 0 1px var(--line2),0 .5rem 1.5rem var(--shadow);
opacity:0;
pointer-events:none;
transform:translateY(.5rem);
transition:opacity var(--dur),transform var(--dur) var(--ease);
}

.top.show{
opacity:1;
pointer-events:auto;
transform:none;
}

.toast{
position:fixed;
left:50%;
bottom:calc(5.6rem + env(safe-area-inset-bottom));
z-index:80;
display:flex;
align-items:center;
gap:var(--s2);
max-width:calc(100% - 2rem);
padding:.75rem 1rem;
border-radius:99px;
background:var(--fg);
color:var(--bg);
font:600 var(--t-sm)/1.3 var(--sans);
box-shadow:0 1rem 2.5rem var(--shadow);
opacity:0;
pointer-events:none;
transform:translate(-50%,1rem);
transition:opacity var(--dur),transform var(--dur) var(--ease);
}

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

.toast.err{
background:var(--bad);
color:#1a0805;
}

@media(min-width:900px){
body{
padding-bottom:calc(6rem + env(safe-area-inset-bottom));
}

.top{
right:var(--s5);
bottom:calc(1.2rem + env(safe-area-inset-bottom));
}
}

/* == Scroll Signature == */
#sweep{
position:fixed;
inset:0 0 auto;
z-index:90;
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{
display:none;
}

@media(min-width:1100px){
#read{
position:fixed;
left:var(--s5);
bottom:var(--s5);
z-index:40;
display:flex;
align-items:baseline;
gap:var(--s3);
padding:.5rem .75rem;
border-radius:99px;
background:var(--bg2);
box-shadow:inset 0 0 0 1px var(--line);
color:var(--dim);
font:600 var(--t-xs) var(--mono);
}

#read b{
color:var(--acc-t);
font-weight:600;
}
}

/* == Docs Reader == */
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 .4s var(--ease-out),overlay .4s allow-discrete,display .4s allow-discrete;
}

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

.reader::backdrop{
background:rgb(0 0 0/.6);
opacity:0;
transition:opacity .4s var(--ease-out),overlay .4s allow-discrete,display .4s 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(--s2);
min-height:var(--bar);
padding:env(safe-area-inset-top) var(--s3) 0 var(--pad);
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;
text-transform:none;
letter-spacing:.02em;
}

.prose{
flex:1;
min-height:0;
overflow:auto;
padding:var(--s5) var(--pad) calc(var(--s8) + env(safe-area-inset-bottom));
color:var(--mut);
font-size:var(--t-md);
line-height:1.75;
overscroll-behavior:contain;
scroll-behavior:smooth;
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);
line-height:1.2;
}

.prose h1{
font-size:clamp(var(--t-xl),1.2rem + 2vw,var(--t-3xl));
letter-spacing:-.04em;
}

.prose h2{
margin-top:var(--s7);
padding-top:var(--s4);
border-top:1px solid var(--line);
font-size:clamp(var(--t-lg),1rem + 1vw,var(--t-xl));
}

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

.prose h3{
margin-top:var(--s6);
font-size:clamp(var(--t-md),.9rem + .5vw,var(--t-lg));
}

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

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

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

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

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

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

.prose ul>li{
position:relative;
}

.prose ul>li::before{
content:"";
position:absolute;
left:-1rem;
top:.85em;
width:.5rem;
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 hr{
border:0;
border-top:1px solid var(--line);
max-width:none;
}

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

.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(--r1) var(--r1) 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:.5rem;
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(--r1);
background:var(--code);
overflow:hidden;
}

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

.prose .codeblk button{
display:inline-flex;
align-items:center;
gap:.5rem;
min-height:2.25rem;
padding:.25rem .75rem;
border-radius:var(--r1);
color:var(--code-fg);
font:600 var(--t-xs) var(--mono);
text-transform:none;
letter-spacing:0;
}

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

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

.prose pre{
margin:0;
padding:var(--s4);
overflow:auto;
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 :not(pre)>code{
background:var(--bg3);
}

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

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

.prose .flow li{
position:relative;
margin:0;
padding:var(--s3) var(--s4);
border:1px solid var(--line2);
border-radius:var(--r1);
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(--line2);
}

.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(--r1);
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(--r1);
background:var(--bg2);
}

.prose .toc summary{
display:flex;
align-items:center;
gap:var(--s2);
min-height:3rem;
padding:var(--s3) var(--s4);
color:var(--fg);
font:600 var(--t-sm) var(--sans);
}

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

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

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

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

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

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

.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{
color:var(--dim);
font:500 var(--t-xs)/1.7 var(--mono);
vertical-align:baseline;
}

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

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

/* == Motion == */
@keyframes draw{
from{
stroke-dashoffset:1;
}

to{
stroke-dashoffset:0;
}
}

@keyframes fi{
from{
opacity:0;
}

to{
opacity:1;
}
}

@keyframes fo{
from{
opacity:.6;
}

to{
opacity:0;
}
}

@keyframes pop{
from{
transform:scale(.4);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}
}

@keyframes rise{
from{
opacity:0;
transform:translateY(.4rem);
}

to{
opacity:1;
transform:none;
}
}

@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.25,1.5);
opacity:0;
}
}

@keyframes ping{
0%{
box-shadow:0 0 0 0 var(--acc-b);
}

70%,100%{
box-shadow:0 0 0 .6rem transparent;
}
}

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

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}

@media(prefers-contrast:more){
:root{
--line:#6b7480;
--dim:#b8c2cc;
}
}

@media print{
#sweep,#read,.dock,.top,.bar,.toast{
display:none !important;
}

body{
padding-bottom:0;
}
}

/* == Inner Stacks == */
.x-card>*+*{
margin-top:var(--s3);
}

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

.x-fig+.x-fig{
margin-top:0;
}

.pmain>*+*{
margin-top:var(--s1);
}