:root {
  --col:1120px; --gut:var(--s5);
  --s7:64px;                 
  
  --panel-solid:rgba(var(--bg1-rgb),.74); --panel-solid-hi:rgba(var(--bg2-rgb),.80); --panel-code:rgba(var(--bg1-rgb),.86);
}


body { position:relative; font:var(--fs-body)/var(--lh-body) var(--ui);
       --scrim:radial-gradient(ellipse 62% 78% at 38% 46%,
         rgba(var(--bg0-rgb),.66), rgba(var(--bg0-rgb),.34) 52%, transparent 80%); }

body::before { content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.04;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 220px; }

main { position:relative; z-index:1; width:min(var(--col),100%);
       margin:0 auto; padding:0 var(--gut); }

.eyebrow, h1, h2, .lede, .note, .step .k, .step3 .k, .cols h3 {
  text-shadow:0 1px 16px rgba(var(--bg0-rgb),.9), 0 0 6px rgba(var(--bg0-rgb),.75); }
section { padding:var(--s7) 0; position:relative; }

section[id] { scroll-margin-top:calc(var(--topbar-h) + var(--s4)); }

h2 { font:600 var(--fs-display)/var(--lh-display) var(--ui); letter-spacing:-.02em;
     margin:var(--s4) 0 0; color:var(--text); }
.note { font:var(--fs-ui)/1.6 var(--ui); color:var(--muted); margin:var(--s3) 0 0; }
.note code, .step code { font:var(--fs-micro) var(--mono);
        background:var(--bg2); padding:2px 5px; color:var(--text); }

.cta { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); }
section[data-no] .no { color:var(--acc); }

section[data-no]::before { content:attr(data-no); position:absolute; right:0; top:var(--s6);
                     font:600 clamp(72px,10vw,128px)/1 var(--mono); letter-spacing:-.04em;
                     color:var(--acc); opacity:.07; pointer-events:none; user-select:none;
                     text-shadow:0 0 24px rgba(var(--acc-rgb),.25); }

@supports (animation-timeline: view()) {
  section[data-no]::before { animation:drift linear both; animation-timeline:view(); }
  @keyframes drift { from { transform:translateY(70px); } to { transform:translateY(-70px); } }
}

html[data-gpu="no"] section[data-no]::before { animation:none; }
footer { padding:var(--s6) 0 var(--s6); }
.cols { display:grid; gap:var(--s5);
        grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.cols h3 { font:600 var(--fs-micro)/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
           color:var(--faint); margin:0 0 var(--s3); }
.cols a { display:block; font:var(--fs-ui)/2 var(--ui); color:var(--muted); text-decoration:none; }
.cols a:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.fine { margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line);
        font:var(--fs-micro)/1.6 var(--ui); color:var(--faint); max-width:80ch; }


.pointer { margin:var(--s6) 0 0; font:var(--fs-micro)/1.6 var(--ui); color:var(--faint); }
.pointer + .fine { margin-top:var(--s4); }

a { color:inherit; }
main a:not(.btn):not(.chip):not(.cols a):not(.plan-cta):not(.cli-src) { color:var(--text); }
@media (max-width:900px) {
  section[data-no]::before { display:none; }
}
@media (max-width:600px) {
  :root { --gut:var(--s4); }
  section { padding:var(--s6) 0; }
}

@keyframes fx-grow-x { from { scale:0 1; } }

.fx .btn-primary[data-fx]:is(.in, [data-fx-lit] *)::after {
  animation:fx-sheen .9s ease-in-out calc(var(--fx-d) + .55s); }
@keyframes fx-sheen { from { transform:translateX(-120%); } to { transform:translateX(120%); } }

.fx :is(.eyebrow, .group-label)[data-fx].in::before {
  animation:fx-stamp .5s cubic-bezier(.3,1.45,.5,1) calc(var(--fx-d) + .1s) backwards; }

.sec-rule.in .plus::before, .sec-rule.in .plus::after { animation:plusglow 1.5s ease-out; }
.sec-rule.in .plus.r::before, .sec-rule.in .plus.r::after { animation-delay:calc(var(--fx-d, 0s) + .6s); }
@keyframes plusglow {
  0%   { background:var(--acc); box-shadow:0 0 6px rgba(var(--acc-rgb),.6); }
  100% { background:var(--line2); box-shadow:0 0 0 rgba(var(--acc-rgb),0); } }