/* == Fonts == */
@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;
}

/* == Tokens == */
:root{
--bg:#101214;
--bg2:#191d20;
--fg:#f2f4ef;
--mut:#a2aaa8;
--dim:#8a9593;
--line:#e2ece51f;
--acc:#c5f36b;
--acc-t:#d5ff82;
--ink:#17200d;
--ok:#a9e8ad;
--bad:#ff9c91;
--warn:#ffb454;
--shadow:#0003;
--code:#0b0e0d;
--code-fg:var(--mut);
--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;
--s1:.25rem;
--s2:.5rem;
--s3:.75rem;
--s4:1rem;
--s5:1.5rem;
--s6:2rem;
--s7:3rem;
--pad:clamp(1rem,4.2vw,4.25rem);
--sec:clamp(3.5rem,8vw,7rem);
--r1:4px;
--r2:8px;
--r3:12px;
--bar:4rem;
--subnav:2.75rem;
--hit:2.5rem;
--t-xs:clamp(.66rem,.64rem + .08vw,.72rem);
--t-sm:clamp(.78rem,.75rem + .12vw,.86rem);
--t-md:clamp(.875rem,.84rem + .16vw,.98rem);
--t-lg:clamp(1rem,.94rem + .35vw,1.25rem);
--h2:clamp(1.75rem,1.25rem + 2.5vw,3rem);
--h3:clamp(1.35rem,1.05rem + 1.5vw,2.15rem);
--ease:cubic-bezier(.16,1,.3,1);
color-scheme:dark;
}

[data-theme=light]{
--bg:#f2f4ef;
--bg2:#e7ebe3;
--fg:#172019;
--mut:#536057;
--dim:#667168;
--line:#182a1d26;
--acc:#6f962b;
--acc-t:#4f7116;
--ink:#f7faef;
--ok:#28743b;
--bad:#b13e35;
--warn:#9a5b00;
--shadow:#0001;
--code:#172019;
--code-fg:#d5e0d4;
color-scheme:light;
}

@media(min-width:900px){
:root{
--bar:4.25rem;
--subnav:0rem;
}
}

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

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

body{
margin:0;
background:radial-gradient(ellipse at 80% 4%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 32rem),var(--bg);
color:var(--fg);
font:var(--t-md)/1.55 var(--sans);
letter-spacing:-.012em;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
font-variant-numeric:tabular-nums;
}

h1,h2,h3,p,ul{
margin:0;
}

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

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

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

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

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

:focus-visible{
outline:2px solid var(--acc);
outline-offset:3px;
animation:focus .25s var(--ease);
}

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

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

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

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

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

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

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

/* == Header == */
.bar{
position:fixed;
inset:0 0 auto;
z-index:50;
display:flex;
align-items:center;
gap:var(--s2);
height:var(--bar);
padding:0 var(--pad);
background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(20px) saturate(140%);
border-bottom:1px solid var(--line);
}

.brand{
display:flex;
align-items:center;
gap:var(--s2);
min-width:0;
font:600 clamp(1rem,.94rem + .25vw,1.15rem)/1 var(--display);
letter-spacing:-.04em;
}

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

.nav{
position:fixed;
top:var(--bar);
left:0;
right:0;
z-index:49;
display:flex;
align-items:center;
gap:var(--s5);
height:var(--subnav);
padding:0 var(--pad);
overflow-x:auto;
white-space:nowrap;
background:color-mix(in srgb,var(--bg) 94%,transparent);
border-bottom:1px solid var(--line);
font:500 var(--t-xs)/1 var(--mono);
color:var(--mut);
scrollbar-width:none;
}

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

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

.chip{
margin-left:auto;
display:inline-flex;
align-items:center;
gap:.35rem;
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);
}

.chip.ok,.chip.bad{
border-color:currentColor;
}

.round{
position:relative;
display:grid;
place-items:center;
flex:none;
width:var(--hit);
height:var(--hit);
border:1px solid var(--line);
border-radius:var(--r2);
transition:background .2s,color .2s,transform .2s;
}

.round:hover{
background:var(--bg2);
color:var(--acc-t);
}

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

#themeBtn .i{
grid-area:1/1;
transition:transform .4s var(--ease),opacity .25s 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{
gap:var(--s4);
}
.brand{
font-size:1.12rem;
}
.nav{
position:static;
z-index:auto;
height:auto;
margin-left:auto;
padding:0;
overflow:visible;
background:none;
border:0;
gap:var(--s5);
font:550 var(--t-sm)/1 var(--sans);
}
.nav a{
padding:var(--s2) 0;
}
.chip{
margin-left:0;
}
}

/* == Hero == */
.hero{
position:relative;
display:grid;
grid-template-columns:1fr;
align-items:center;
gap:var(--s6);
padding-top:calc(var(--bar) + var(--subnav) + var(--s7));
padding-bottom:var(--s7);
}

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

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

.live-dot{
width:.45rem;
height:.45rem;
flex:none;
border-radius:50%;
background:var(--acc);
box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent);
}

.display{
margin:var(--s5) 0;
font:500 clamp(3.75rem,15vw,7rem)/.9 var(--display);
letter-spacing:-.06em;
}

.display em{
font-style:normal;
color:var(--acc);
}

.lede{
max-width:39rem;
font-size:var(--t-lg);
line-height:1.7;
color:var(--mut);
}

.hero-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--s3);
margin-top:var(--s6);
}

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

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

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

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

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

.hero-art{
position:relative;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:clamp(15rem,34vw,29rem);
padding:var(--s4);
overflow:hidden;
border:1px solid var(--line);
border-radius:var(--r3);
background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 90%,var(--acc) 10%),var(--bg2));
box-shadow:0 2rem 5rem var(--shadow);
}

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

.art-top,.art-bottom{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
gap:var(--s4);
color:var(--dim);
font:500 var(--t-xs)/1.4 var(--mono);
letter-spacing:.08em;
}

.art-bottom{
align-items:flex-end;
}

.art-bottom b{
color:var(--fg);
font-weight:500;
}

.art-bottom b span{
color:var(--acc);
padding-inline:var(--s1);
}

.hero-wave{
position:absolute;
inset:16% 0 13%;
width:100%;
height:70%;
}

.wave-grid path{
fill:none;
stroke:var(--line);
stroke-width:1;
}

.wave-back{
fill:none;
stroke:var(--acc);
stroke-opacity:.13;
stroke-width:15;
filter:blur(9px);
}

.wave-main{
fill:none;
stroke:var(--acc);
stroke-width:2.2;
stroke-linecap:round;
filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 60%,transparent));
}

.wave-thin{
fill:none;
stroke:var(--fg);
stroke-opacity:.28;
stroke-width:1;
}

.wave-main,.wave-thin{
stroke-dasharray:1 1;
animation:draw .45s var(--ease) both;
}

.wave-thin{
animation:draw .45s var(--ease) both,drift 10s ease-in-out .45s infinite alternate;
}

.wave-back{
animation:fi .45s var(--ease) both;
}

html.hid .wave-thin{
animation-play-state:paused;
}

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

.art-index span{
color:var(--dim);
}

@media(min-width:900px){
.hero{
grid-template-columns:minmax(0,1.05fr) minmax(19rem,.95fr);
gap:clamp(2rem,5vw,5rem);
min-height:min(780px,100svh);
padding-top:calc(var(--bar) + var(--s7));
padding-bottom:var(--sec);
}
.display{
font-size:clamp(3.5rem,2.15rem + 6.75vw,8.5rem);
font-family:var(--display);
}
.hero-actions{
display:flex;
flex-wrap:wrap;
}

}

/* == Buttons == */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--s2);
min-height:3rem;
padding:.85rem 1.15rem;
border-radius:var(--r2);
background:var(--acc);
color:var(--ink);
font-size:var(--t-sm);
font-weight:700;
transition:transform .25s,background .2s,color .2s,border-color .2s;
}

.btn:hover:not(:disabled){
background:var(--acc-t);
color:var(--ink);
transform:translateY(-2px);
}

.btn.ghost{
background:transparent;
border:1px solid var(--line);
color:var(--fg);
}

.btn.ghost:hover:not(:disabled){
background:var(--bg2);
border-color:var(--acc);
color:var(--acc-t);
}

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

/* == Sections == */
.sec{
padding-top:var(--sec);
}

.sec-h{
display:flex;
align-items:center;
gap:var(--s4);
padding-top:var(--s4);
margin-bottom:var(--s5);
border-top:1px solid var(--line);
}

.sec-h h2{
font:600 var(--h2)/1.05 var(--sans);
letter-spacing:-.04em;
}

.sec-h .lbl:first-child{
color:var(--acc-t);
}

.sec-h .chip{
margin-left:auto;
}

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

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

.prow:hover{
background:color-mix(in srgb,var(--bg2) 88%,var(--acc) 12%);
border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
transform:translateY(-3px);
}

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

.prow>.i{
margin-top:.2rem;
color:var(--acc-t);
}

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

.ptitle{
font:600 var(--h3)/1.05 var(--sans);
letter-spacing:-.04em;
transition:color .3s;
}

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

.pdesc{
max-width:32rem;
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:.04em;
color:var(--mut);
}

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

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

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

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

.prow.sweep .spark{
animation:grow .4s var(--ease) both;
}

.pdot{
--c:var(--dim);
position:absolute;
top:var(--s5);
left:calc(var(--s5) + 1.7rem);
width:.6rem;
height:.6rem;
border-radius:50%;
background:var(--c);
box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);
}

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

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

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

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

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

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

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

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

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

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

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

.chart.draw #area{
animation:fi .45s var(--ease) .2s both;
}

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

.tip{
position:absolute;
top:var(--s3);
z-index:2;
min-width:8rem;
padding:var(--s2) var(--s3);
border-radius:6px;
background:var(--fg);
color:var(--bg);
font-size:var(--t-xs);
pointer-events:none;
box-shadow:0 .6rem 2rem var(--shadow);
}

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

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

/* == Stats == */
.stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:var(--s5);
overflow:hidden;
border:1px solid var(--line);
border-radius:10px;
background:var(--bg2);
}

.stat{
display:flex;
flex-direction:column;
gap:var(--s1);
min-width:0;
padding:var(--s4);
border-bottom:1px solid var(--line);
border-right:1px solid var(--line);
}

.stat:nth-child(2n){
border-right:0;
}

.stat b{
font:600 clamp(1.2rem,2.3vw,1.75rem)/1.1 var(--sans);
letter-spacing:-.03em;
font-variant-numeric:tabular-nums;
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));
}
.stat:nth-child(2n){
border-right:1px solid var(--line);
}
.stat:nth-child(3n){
border-right:0;
}
}

/* == Files == */
#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(--s3);
min-height:5rem;
width:100%;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--bg2);
transition:border-color .2s,transform .2s,background .2s,color .2s;
}

.frow:hover{
border-color:var(--acc);
background:color-mix(in srgb,var(--bg2) 90%,var(--acc) 10%);
color:var(--acc-t);
transform:translateY(-2px);
}

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

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

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

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

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

.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 .3s var(--ease);
}

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

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

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

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

.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.7 var(--mono);
overflow-wrap:anywhere;
}

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

/* == Docs == */
.fold{
border-bottom:1px solid var(--line);
}

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

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

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

.fold summary b{
display:block;
font:600 1rem 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:500;
}

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

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

.links a{
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:.55rem .7rem;
border:1px solid var(--line);
border-radius:var(--r1);
font-size:var(--t-xs);
transition:border-color .2s,color .2s,transform .2s;
}

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

/* == Footer == */
.foot{
margin-top:var(--sec);
border-top:1px solid var(--line);
background:var(--bg2);
}

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

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

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

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

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

/* == Floating == */
.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);
background:var(--acc);
color:var(--ink);
box-shadow:0 .7rem 2rem var(--shadow);
transition:transform .3s var(--ease),background .25s,color .25s;
}

.fab:hover:not(:disabled){
background:var(--acc-t);
color:var(--ink);
transform:translateY(-2px);
}

.toast{
position:fixed;
bottom:var(--s5);
left:50%;
z-index:90;
display:flex;
align-items:center;
gap:var(--s2);
max-width:calc(100% - 7rem);
padding:var(--s3) var(--s4);
border-radius:var(--r2);
background:var(--fg);
color:var(--bg);
font:500 var(--t-sm) var(--mono);
opacity:0;
transform:translate(-50%,var(--s4));
pointer-events:none;
transition:opacity .4s var(--ease),transform .4s var(--ease);
}

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

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

/* == Press == */
.btn:active:not(:disabled),.fab:active:not(:disabled){
transform:scale(.98);
}

.prow:active,.frow:active,.round:active,.links a:active,.top.show:active{
transform:scale(.98);
}

/* == Top == */
.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 .25s var(--ease),transform .25s var(--ease),visibility 0s .25s,background .2s,color .2s,border-color .2s;
}

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

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

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

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

/* == Reader == */
html:has(.reader[open]){
overflow:hidden;
}

.reader{
position:fixed;
inset:0 0 0 auto;
width:min(50rem,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),overlay .4s allow-discrete,display .4s allow-discrete;
}

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

.reader::backdrop{
background:#0009;
opacity:0;
transition:opacity .4s var(--ease),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{
display:flex;
align-items:center;
flex:none;
gap:var(--s3);
min-height:var(--bar);
padding:0 var(--pad);
border-bottom:1px solid var(--line);
}

.reader-bar .lbl{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

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

.prose{
flex:1;
min-height:0;
overflow:auto;
padding:var(--s5) var(--pad) calc(var(--s7) + env(safe-area-inset-bottom));
font-size:var(--t-md);
line-height:1.75;
color:var(--mut);
overscroll-behavior:contain;
}

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

.prose>*{
max-width:44rem;
}

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

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

.prose h1{
font-size:var(--h2);
}

.prose h2{
margin-top:var(--s6);
font-size:clamp(1.35rem,1.1rem + 1.25vw,1.75rem);
}

.prose h3{
margin-top:var(--s5);
font-size:clamp(1.15rem,1rem + .75vw,1.4rem);
}

.prose h4,.prose h5,.prose h6{
font-size:var(--t-md);
}

.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:.2em;
}

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

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

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

.prose ul{
list-style:disc;
}

.prose ol{
list-style:decimal;
}

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

.prose code{
padding:.1em .35em;
border-radius:var(--r1);
background:var(--bg2);
color:var(--fg);
font:500 .85em var(--mono);
}

.prose pre{
overflow:auto;
padding:var(--s4);
border:1px solid var(--line);
border-radius:var(--r2);
background:var(--code);
color:var(--code-fg);
line-height:1.7;
}

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

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

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

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

.prose .alert{
padding:var(--s3) var(--s4);
border-left-color:var(--acc);
border-radius:0 var(--r2) var(--r2) 0;
background:var(--bg2);
}

.prose .alert.tip{
border-left-color:var(--ok);
}

.prose .alert.warning{
border-left-color:var(--warn);
}

.prose .alert.caution{
border-left-color:var(--bad);
}

.prose .alert-t{
color:var(--fg);
font:600 var(--t-xs)/1.4 var(--mono);
letter-spacing:.1em;
text-transform:uppercase;
}

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

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

.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(--bg2);
color:var(--fg);
font-weight:600;
white-space:nowrap;
}

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

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

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

/* == State == */
.ok{
color:var(--ok);
}

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

/* == Reveal == */
.rv-on .rv{
opacity:0;
transform:translateY(14px);
transition:opacity .4s var(--ease),transform .4s var(--ease);
}

.rv-on .rv.in{
opacity:1;
transform:none;
}

/* == Keyframes == */
@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 drift{
from{
transform:translateX(-8px);
}
to{
transform:translateX(8px);
}
}

@keyframes pop{
0%{
transform:scale(.3);
opacity:.2;
}
60%{
transform:scale(1.4);
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 grow{
from{
transform:scaleY(.05);
opacity:0;
}
}

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

@keyframes focus{
from{
outline-color:transparent;
outline-offset:0;
}
}

/* == Motion == */
@media(prefers-reduced-motion:reduce){
html{
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;
}
}

/* == Lite == */
@media(max-width:899px){
.bar{
backdrop-filter:none;
background:var(--bg);
}
.nav{
background:var(--bg);
}
.hero-art::before,.wave-back{
display:none;
}
.wave-main{
filter:none;
}
}