/* ═══════════════════════════════════════════════════════════════════
   ImagineCode — landing page
   Same vocabulary as the IDE: ink-black surfaces, hairline geometry,
   one phosphor accent.
   Fraunces (display) · Schibsted Grotesk (ui) · Fragment Mono (code)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --font-ui:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --font-mono:"Fragment Mono","Cascadia Mono",Consolas,monospace;
  --font-display:"Fraunces",Georgia,serif;

  --ink-0:#08080a; --ink-1:#0b0b0e; --ink-2:#0e0e12; --ink-3:#121218; --ink-4:#17171e;
  --line-0:#1a1a21; --line-1:#23232c; --line-2:#32323e;

  --bone:#eceae3; --bone-dim:#8f8f9a; --bone-faint:#55555f; --bone-ghost:#33333c;

  --accent:#c6f24e; --accent-hi:#d9ff6b; --accent-ink:#0d1103;
  --accent-dim:rgba(198,242,78,.13);

  --rose:#ff6d5a; --peri:#8fa8ff; --amber:#e8c07c;

  --ease:cubic-bezier(.3,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --wrap:1220px;
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--ink-0);
  color:var(--bone-dim);
  font-family:var(--font-ui);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}

::selection{background:#3a4222;color:var(--bone)}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:var(--font-mono);font-size:.88em}
i,em{font-style:normal}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-0)}
::-webkit-scrollbar-thumb{background:#26262f;border-radius:8px;border:2px solid var(--ink-0);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a3a47;border:2px solid var(--ink-0);background-clip:content-box}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mono-sm{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.dim{color:var(--bone-faint)}
.accent{color:var(--accent)}
/* the glyph is always the first item of a flex note, and the prose beside it
   always lives in its own <p> — a bare text node would become an anonymous
   flex item and the `gap` would open holes mid-sentence. */
.glyph{color:var(--accent);flex:none}

kbd{
  display:inline-block;
  background:var(--ink-3);border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:4px;padding:2px 7px 3px;margin-right:3px;
  font-family:var(--font-mono);font-size:11px;color:var(--bone);line-height:1;
}

/* ══════════════ atmosphere ══════════════ */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}  83%{transform:translate(-1%,3%)}
}

/* pointer-following phosphor bloom */
.spotlight{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
    rgba(198,242,78,.055),transparent 68%);
  opacity:0;transition:opacity .6s ease;
}
body.pointer .spotlight{opacity:1}

/* scroll progress */
.scroll-rail{
  position:fixed;left:0;top:0;right:0;height:2px;z-index:1000;pointer-events:none;
}
.scroll-rail i{
  display:block;height:100%;width:0%;
  background:linear-gradient(to right,rgba(198,242,78,.35),var(--accent));
  box-shadow:0 0 12px rgba(198,242,78,.6);
  transition:width .1s linear;
}

/* ══════════════ preloader ══════════════ */
.boot{
  position:fixed;inset:0;z-index:2000;background:var(--ink-0);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.boot.gone{opacity:0;visibility:hidden}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.boot-spark{width:56px;height:56px;filter:drop-shadow(0 0 26px rgba(198,242,78,.55));animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.13) rotate(6deg);opacity:1}}
.boot-bar{width:172px;height:2px;background:var(--line-0);overflow:hidden;border-radius:2px}
.boot-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px rgba(198,242,78,.8);transition:width .3s ease}
.boot-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-ghost)}

/* ══════════════ nav ══════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;height:var(--nav-h);
  display:flex;align-items:center;gap:28px;
  padding:0 32px;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
}
.nav.stuck{
  background:rgba(8,8,10,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-0);
}
.nav-lockup{display:flex;align-items:center;gap:11px;flex:none}
.nav-lockup .mark{width:26px;height:26px;filter:drop-shadow(0 0 12px rgba(198,242,78,.35));transition:transform .5s var(--ease)}
.nav-lockup:hover .mark{transform:rotate(90deg) scale(1.08)}
.wordmark{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--bone);letter-spacing:-.015em}

.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13.5px}
.nav-links a{color:var(--bone-faint);position:relative;padding:4px 0;transition:color .3s}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .4s var(--ease);
}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after{right:0}

.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav-burger i{display:block;width:19px;height:1.5px;background:var(--bone);transition:transform .35s var(--ease),opacity .25s}
.nav-burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ══════════════ buttons ══════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:8px;
  font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;
  border:1px solid transparent;
  transition:transform .35s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .4s;
  will-change:transform;
}
.btn .ico{width:15px;height:15px;flex:none}
.btn-ghost{color:var(--bone-dim);border-color:var(--line-1);background:rgba(255,255,255,.012)}
.btn-ghost:hover{color:var(--bone);border-color:var(--line-2);background:var(--ink-3)}

.btn-solid{background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 0 0 rgba(198,242,78,0)}
.btn-solid:hover{background:var(--accent-hi);box-shadow:0 6px 34px rgba(198,242,78,.28)}

.btn-line{color:var(--bone);border-color:var(--line-2);background:var(--ink-2)}
.btn-line:hover{border-color:rgba(198,242,78,.42);background:var(--ink-3);box-shadow:0 6px 30px rgba(0,0,0,.5)}

.btn-lg{
  flex-direction:column;align-items:flex-start;gap:5px;
  padding:15px 22px 14px;border-radius:11px;font-size:15.5px;
}
.btn-lg .ico{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.55}
.btn-lg>span:not(.btn-sub){padding-right:26px}
.btn-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.62;font-weight:400}
.btn-solid .btn-sub{opacity:.55}

/* a third action would crowd the hero at two full-size buttons, so the
   repo link rides along as text. */
.btn-text{
  display:inline-flex;align-items:center;align-self:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--bone-faint);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.btn-text .ico{width:15px;height:15px;flex:none}
.btn-text:hover{color:var(--bone);border-bottom-color:var(--line-2)}

/* ══════════════ shared type ══════════════ */
.display{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-weight:400;line-height:1.05;letter-spacing:-.022em;color:var(--bone);
}
.display em{
  font-style:italic;color:var(--accent);
  text-shadow:0 0 38px rgba(198,242,78,.3),0 0 10px rgba(198,242,78,.14);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-faint);
  border:1px solid var(--line-1);background:rgba(255,255,255,.015);
  border-radius:100px;padding:6px 14px 6px 11px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px rgba(198,242,78,.9);animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.sec{position:relative;padding:132px 0}
.sec-alt{background:var(--ink-1);border-top:1px solid var(--line-0);border-bottom:1px solid var(--line-0)}
.sec-head{max-width:760px;margin-bottom:72px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2,.dl-head h2,.rules-copy h2{font-size:clamp(30px,4.1vw,52px)}
.sec-num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);
  margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
.sec-head.center .sec-num,.dl-head .sec-num{justify-content:center}
.sec-num::after{content:"";width:52px;height:1px;background:linear-gradient(to right,rgba(198,242,78,.5),transparent)}
.sec-head.center .sec-num::after,.dl-head .sec-num::after{display:none}
.sec-lede{margin-top:22px;font-size:17px;line-height:1.68;color:var(--bone-dim);max-width:640px}
.sec-head.center .sec-lede{margin-left:auto;margin-right:auto}
.sec-lede b{color:var(--bone);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 78px) 0 96px;
  overflow:hidden;
}
.hero-bloom{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 620px at 16% 30%,rgba(198,242,78,.115),rgba(198,242,78,.03) 44%,transparent 72%),
    radial-gradient(960px 740px at 96% 78%,rgba(143,168,255,.075),transparent 66%),
    radial-gradient(1200px 820px at 50% -14%,rgba(255,255,255,.032),transparent 62%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-1.5%,1.5%,0) scale(1.05)}}
.hero-weave{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(900px 640px at 22% 44%,#000,transparent 78%);
          mask-image:radial-gradient(900px 640px at 22% 44%,#000,transparent 78%);
}
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1250px 820px at 42% 44%,transparent 42%,rgba(0,0,0,.6) 100%);
}
.topline{
  position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(198,242,78,.55) 14%,rgba(198,242,78,.12) 46%,transparent 76%);
}

/* One centred container, symmetric padding, two tracks that share the width.
   (An earlier version bled the window off the right edge using a 100vw-based
   left padding — combined with `margin:0 auto` the two centring mechanisms
   stacked, so past ~1600px the copy started ~580px in and the window was
   crushed to ~530px, which is what broke the title bar and preview pane.) */
.hero-grid{
  position:relative;z-index:2;
  width:100%;max-width:1440px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:60px;align-items:center;
}
.hero-copy{max-width:620px}
.hero-copy h1{margin-top:30px;font-size:clamp(38px,5.1vw,63px)}
.hero-copy h1 em{display:block}

.lede{margin-top:26px;font-size:17.5px;line-height:1.66;color:var(--bone-dim);max-width:500px}
.lede b{color:var(--bone);font-weight:600}
.run-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:14px;color:var(--accent);
  background:rgba(198,242,78,.11);border:1px solid rgba(198,242,78,.26);
  border-radius:6px;padding:1px 8px 2px;white-space:nowrap;
}
.run-chip .tri{font-size:9px}

.exts{margin-top:28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ext{
  font-family:var(--font-mono);font-size:12.5px;color:var(--bone-dim);
  background:var(--ink-3);border:1px solid var(--line-1);border-radius:6px;padding:5px 10px 6px;
  transition:transform .35s var(--ease),color .3s,border-color .3s;
}
.ext:hover{transform:translateY(-3px);color:var(--bone);border-color:var(--line-2)}
.ext.any{
  color:var(--accent);border-color:rgba(198,242,78,.32);background:rgba(198,242,78,.08);
  box-shadow:0 0 22px rgba(198,242,78,.1);
}
.exts .arrow{font-family:var(--font-mono);font-size:12px;color:var(--bone-faint);padding:0 2px}

.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

.hero-foot{margin-top:44px;display:flex;flex-direction:column;gap:13px}
.providers{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone-faint);display:flex;gap:9px;flex-wrap:wrap;
}
.providers i{color:var(--bone-ghost)}
.quote{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--font-mono);font-style:italic;font-size:13px;color:var(--bone-faint);
}
.quote::before{content:"\2726";font-style:normal;font-size:11px;color:var(--accent);opacity:.85}

/* ── the IDE window ── */
/* min-width:0 — the status bar is a single nowrap row, so without this its
   min-content width (~560px) becomes the floor for the whole grid track and
   the hero refuses to narrow below it on phones. */
.hero-stage{position:relative;perspective:2000px;min-width:0}
.hero-copy{min-width:0}
.stage-glow{
  position:absolute;inset:8% -6% 8% 4%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(198,242,78,.09),transparent 72%);
  filter:blur(28px);
}
.window{
  position:relative;z-index:1;
  width:100%;max-width:812px;
  background:var(--ink-1);
  border:1px solid var(--line-1);border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    -30px 40px 90px rgba(0,0,0,.72),
    -8px 12px 30px rgba(0,0,0,.5),
    0 0 140px rgba(198,242,78,.05);
  transform:rotateY(-4deg) rotateX(1.2deg) translateZ(0);
  transition:transform .9s var(--ease-out),box-shadow .9s var(--ease-out);
  opacity:0;
}
.window.in{opacity:1;animation:winIn 1.15s var(--ease-out) forwards}
@keyframes winIn{
  from{opacity:0;transform:rotateY(-11deg) rotateX(4deg) translateY(38px) scale(.96)}
  to  {opacity:1;transform:rotateY(-4deg) rotateX(1.2deg) translateY(0) scale(1)}
}
.hero-stage:hover .window.in{transform:rotateY(-1.5deg) rotateX(.4deg) translateY(-4px)}
.window::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:5;
  background:linear-gradient(to right,rgba(255,255,255,.15),rgba(255,255,255,.04) 55%,transparent);
}

/* flex, not `1fr auto 1fr` — an `auto` centre track keeps its full nowrap
   width and shoves the menus and the run hint into each other once the
   window narrows. Here the centre is the only thing that can shrink, and
   it ellipsises instead of colliding. */
.w-title{
  height:36px;flex:none;background:var(--ink-0);border-bottom:1px solid var(--line-0);
  display:flex;align-items:center;gap:14px;padding:0 14px;overflow:hidden;
}
.wt-left{display:flex;align-items:center;gap:10px;flex:none}
.dot-spark{width:10px;height:10px;flex:none}
.wt-left .menus{display:flex;gap:13px;font-size:11.5px;color:var(--bone-faint)}
.wt-center{
  flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint);
}
.wt-right{display:flex;justify-content:flex-end;gap:7px;flex:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--bone-ghost)}

.w-body{display:flex;height:436px}
.w-left{width:54%;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line-0);min-width:0}

.tabs{height:32px;flex:none;background:var(--ink-2);border-bottom:1px solid var(--line-0);display:flex;overflow:hidden}
.tab{
  display:flex;align-items:center;gap:7px;padding:0 13px;
  font-family:var(--font-mono);font-size:11px;color:var(--bone-faint);
  border-right:1px solid var(--line-0);white-space:nowrap;
}
.tab.on{background:var(--ink-1);color:var(--bone);box-shadow:inset 0 2px 0 var(--accent)}
.tab .glyph{font-size:9px;opacity:.9}

.code{
  flex:1;padding:12px 0 0;overflow:hidden;
  font-family:var(--font-mono);font-size:12.5px;line-height:19.5px;
  background:radial-gradient(420px 220px at 12% 0%,rgba(198,242,78,.035),transparent 70%),var(--ink-1);
}
.code .ln{display:flex}
.code .ln .n{width:32px;flex:none;text-align:right;padding-right:11px;color:var(--bone-ghost);font-size:10.5px;line-height:19.5px}
.code .ln .t{white-space:pre;color:var(--bone);overflow:hidden}
.code .ln.cur{background:rgba(255,255,255,.022)}
.code .ln.cur .n{color:var(--bone-faint)}

.c-com{color:#4c4c56}
.c-key{color:var(--accent)}
.c-name{color:var(--bone)}
.c-op{color:var(--peri)}
.c-str{color:var(--amber)}
.c-pun{color:#575763}
.c-word{color:#b9b7ae}
.sw-chip{display:inline-block;width:7px;height:7px;border-radius:2px;margin:0 3px -1px 0;box-shadow:0 0 6px currentColor,inset 0 0 0 1px rgba(255,255,255,.26)}
.caret{display:inline-block;width:1.5px;height:13px;margin-bottom:-2px;background:var(--accent);box-shadow:0 0 8px rgba(198,242,78,.8);animation:caret 1.05s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

.term{height:98px;flex:none;background:var(--ink-2);border-top:1px solid var(--line-0);padding:8px 0 0;overflow:hidden}
.term-head{display:flex;align-items:center;gap:15px;padding:0 13px 7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em}
.term-head .on{color:var(--bone);border-bottom:1px solid var(--accent);padding-bottom:5px;margin-bottom:-6px}
.term-head .off{color:var(--bone-ghost)}
.term-body{padding:0 13px}
.tline{display:flex;gap:8px;font-family:var(--font-mono);font-size:11px;line-height:17px;white-space:pre;opacity:0;transform:translateY(4px);animation:tIn .35s var(--ease-out) forwards}
@keyframes tIn{to{opacity:1;transform:none}}
.t-mark{color:var(--accent);width:9px;flex:none}
.t-stage{color:var(--peri)}
.t-dim{color:var(--bone-faint)}
.t-ok{color:var(--accent)}
.t-txt{color:var(--bone-dim)}

.w-right{flex:1;display:flex;flex-direction:column;background:var(--ink-2);min-width:0}
.pv-head{
  height:32px;flex:none;border-bottom:1px solid var(--line-0);
  display:flex;align-items:center;gap:8px;padding:0 13px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;color:var(--bone-faint);
}
.pv-head .live{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(198,242,78,.9);flex:none;animation:blink 1.9s ease-in-out infinite}
.pv-head .url{color:var(--bone-ghost);margin-left:auto;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w-status{
  height:27px;flex:none;background:var(--ink-0);border-top:1px solid var(--line-0);
  display:flex;align-items:center;padding:0 6px 0 10px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--bone-faint);
  overflow:hidden;white-space:nowrap;
}
.w-status .chip{display:flex;align-items:center;gap:5px;padding:0 9px}
.w-status .chip.hot{color:var(--accent)}
.w-status .chip b{color:var(--bone-dim);font-weight:400}
.w-status .sep{width:1px;height:11px;background:var(--line-0);flex:none}
.w-status .right{margin-left:auto;display:flex;align-items:center}

/* the compiled synthwave artefact — shared by hero + demo */
.pv,.synth{position:relative;flex:1;overflow:hidden;background:linear-gradient(#05010f 0%,#170733 58%,#2b0a3d 100%)}
.sw-stars{
  position:absolute;inset:0 0 46% 0;opacity:.85;
  background-image:
    radial-gradient(1.1px 1.1px at 18% 22%,#fff,transparent),
    radial-gradient(1px 1px at 62% 14%,#cfe6ff,transparent),
    radial-gradient(1.2px 1.2px at 82% 32%,#fff,transparent),
    radial-gradient(1px 1px at 34% 40%,#ffd9f2,transparent),
    radial-gradient(.9px .9px at 71% 47%,#fff,transparent),
    radial-gradient(1px 1px at 45% 9%,#fff,transparent),
    radial-gradient(.9px .9px at 8% 44%,#bfe9ff,transparent);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{0%{opacity:.55}100%{opacity:.95}}
.sw-sun{
  position:absolute;left:50%;top:26%;transform:translateX(-50%);
  width:min(104px,26%);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(#ffe66d 0%,#ff9a4d 46%,#ff2e97 100%);
  box-shadow:0 0 46px rgba(255,46,151,.6),0 0 108px rgba(255,46,151,.34);
  /* solid upper half + horizontal slices below — the two masks UNION,
     which is the default. Do not add mask-composite here: intersecting
     them strips the solid half and leaves bare stripes. */
  -webkit-mask-image:
    linear-gradient(to bottom,#000 0 50%,transparent 50%),
    repeating-linear-gradient(to bottom,#000 0 7px,transparent 7px 11px);
          mask-image:
    linear-gradient(to bottom,#000 0 50%,transparent 50%),
    repeating-linear-gradient(to bottom,#000 0 7px,transparent 7px 11px);
  animation:sunFloat 4s ease-in-out infinite alternate;
}
@keyframes sunFloat{0%{transform:translateX(-50%) translateY(0)}100%{transform:translateX(-50%) translateY(-9px)}}
.sw-horizon{
  position:absolute;left:0;right:0;top:52%;height:1px;background:#ff2e97;
  box-shadow:0 0 12px 1px rgba(255,46,151,.85),0 0 34px rgba(255,46,151,.45);
}
.sw-grid{
  position:absolute;left:-60%;right:-60%;top:52%;bottom:-14%;
  background-image:
    repeating-linear-gradient(to right,rgba(255,46,151,.5) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,rgba(0,229,255,.42) 0 1px,transparent 1px 22px);
  transform:perspective(150px) rotateX(66deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.35) 62%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.35) 62%,transparent 94%);
  animation:gridRun 6s linear infinite;
}
@keyframes gridRun{from{background-position:0 0,0 0}to{background-position:0 0,0 22px}}
.sw-copy,.synth-copy{position:absolute;left:0;right:0;top:7%;text-align:center;padding:0 14px;z-index:2}
.sw-copy .big,.synth-copy .big{
  font-family:var(--font-ui);font-weight:700;font-size:clamp(17px,2.4vw,26px);letter-spacing:.19em;color:#fff;
  text-shadow:0 0 22px rgba(0,229,255,.95),0 0 46px rgba(0,229,255,.5);
}
.sw-copy .small,.synth-copy .small{
  margin-top:8px;font-family:var(--font-mono);font-size:9.5px;color:#00e5ff;letter-spacing:.055em;
  text-shadow:0 0 14px rgba(0,229,255,.6);
}
.sw-deck,.synth-deck{position:absolute;left:18px;right:18px;bottom:20px;display:flex;flex-direction:column;gap:5px;z-index:2}
.sw-row{
  display:flex;align-items:center;gap:9px;padding:5px 9px;border-left:2px solid #00e5ff;
  background:linear-gradient(to right,rgba(0,229,255,.1),rgba(0,229,255,.012));
  font-family:var(--font-mono);font-size:9.5px;color:#dcefff;
  transition:transform .18s var(--ease),border-color .18s,background .18s;
}
.sw-row:hover,.sw-row.hot{
  border-left-color:#ff2e97;transform:translateX(6px);
  background:linear-gradient(to right,rgba(255,46,151,.16),rgba(255,46,151,.02));
}
.sw-row .no{color:#7f8fb5}
.sw-row .tm{margin-left:auto;color:#8fa8c9}
.sw-row:hover .tm,.sw-row.hot .tm{color:#ffb3d9}
.pv-fade{position:absolute;inset:auto 0 0 0;height:36px;background:linear-gradient(transparent,rgba(5,1,15,.55));z-index:3;pointer-events:none}
.pv-scan{
  position:absolute;left:0;right:0;top:-40%;height:36%;z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(198,242,78,.09),transparent);
  animation:scan 5.5s var(--ease) infinite;
}
@keyframes scan{0%{top:-40%}55%,100%{top:120%}}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-ghost);
  transition:color .3s;
}
.scroll-cue:hover{color:var(--bone-faint)}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--accent),transparent);animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══════════════ marquee ══════════════ */
.marquee{
  border-top:1px solid var(--line-0);border-bottom:1px solid var(--line-0);
  background:var(--ink-1);overflow:hidden;padding:17px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:26px;width:max-content;
  animation:marq 42s linear infinite;
}
.marquee-track span{font-family:var(--font-mono);font-size:14px;color:var(--bone-faint);white-space:nowrap}
.marquee-track b{color:var(--accent);opacity:.5;font-size:9px;font-weight:400}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════ steps ══════════════ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-0);border:1px solid var(--line-0);border-radius:14px;overflow:hidden}
.step{background:var(--ink-1);padding:34px 30px 0;display:flex;flex-direction:column;transition:background .5s var(--ease)}
.step:hover{background:var(--ink-2)}
.step-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);opacity:.65;margin-bottom:16px}
.step h3{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--bone);letter-spacing:-.015em;line-height:1.18}
.step p{margin-top:13px;font-size:14.5px;line-height:1.62;color:var(--bone-dim)}
.step p code{color:var(--accent);background:rgba(198,242,78,.09);border-radius:4px;padding:1px 5px}
/* margin-top:auto (not flex:1) so the art blocks sit flush at the bottom of
   every card — the copy above them is different lengths, and a stretched art
   panel would start at three different heights. */
.step-art{
  margin:26px -30px 0;padding:18px 20px;height:132px;flex:none;margin-top:auto;
  border-top:1px solid var(--line-0);background:var(--ink-0);
  display:flex;align-items:center;overflow:hidden;
}
.mini-code,.mini-term{display:flex;flex-direction:column;gap:5px;font-family:var(--font-mono);font-size:11px;width:100%}
.mini-code span,.mini-term span{white-space:pre;overflow:hidden;text-overflow:ellipsis;color:var(--bone-dim)}
.caret-mini{display:inline-block;width:1.5px;height:11px;margin-bottom:-1.5px;background:var(--accent);animation:caret 1.05s steps(1) infinite}
.art-run .mini-term span:nth-child(1){animation:tIn .4s .1s var(--ease-out) both}
.art-run .mini-term span:nth-child(2){animation:tIn .4s .3s var(--ease-out) both}
.art-run .mini-term span:nth-child(3){animation:tIn .4s .5s var(--ease-out) both}
.mini-site{width:100%;display:flex;flex-direction:column;gap:7px}
.mini-site i{display:block;border-radius:3px;background:var(--line-0)}
.ms-bar{height:9px;background:linear-gradient(to right,var(--line-1) 26%,var(--line-0) 26%)!important}
.ms-hero{height:30px;background:linear-gradient(115deg,rgba(198,242,78,.16),rgba(198,242,78,.03))!important}
.ms-row{height:6px;width:82%}
.ms-row.short{width:54%}
.mini-site .ms-cards{display:flex;gap:7px;margin-top:3px}
.mini-site .ms-cards i{flex:1;height:26px;border:1px solid var(--line-1);background:var(--ink-2)}

/* ── pipeline ── */
.pipeline{
  margin-top:60px;position:relative;
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;
  border:1px solid var(--line-0);border-radius:14px;background:var(--ink-1);
  padding:34px 30px 46px;
}
.pipe-col{text-align:center;padding:0 16px}
.pipe-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:14px}
.pipe-col.accent .pipe-label{color:var(--accent)}
.pipe-body{font-size:14px;line-height:1.6;color:var(--bone-dim)}
.pipe-col.accent .pipe-body{color:var(--bone)}
.pipe-col.accent{
  border-left:1px solid var(--line-0);border-right:1px solid var(--line-0);
  background:radial-gradient(closest-side at 50% 40%,rgba(198,242,78,.06),transparent);
}
.pipe-arrow{display:flex;align-items:center;justify-content:center;gap:0;padding:0 6px;position:relative}
.pipe-arrow i{display:block;width:34px;height:1px;background:linear-gradient(to right,transparent,var(--line-2))}
.pipe-arrow span{font-family:var(--font-mono);color:var(--accent);font-size:13px;opacity:.75;margin-left:-4px}
.pipe-return{
  position:absolute;left:30px;right:30px;bottom:16px;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--bone-ghost);
  border-top:1px dashed var(--line-0);padding-top:12px;
}

/* ══════════════ demo ══════════════ */
.demo{border:1px solid var(--line-1);border-radius:16px;background:var(--ink-0);overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.55)}
.demo-tabs{display:flex;background:var(--ink-2);border-bottom:1px solid var(--line-0);overflow-x:auto}
.dtab{
  display:flex;align-items:center;gap:9px;padding:14px 22px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--bone-faint);
  border-right:1px solid var(--line-0);white-space:nowrap;
  transition:color .3s,background .3s;position:relative;
}
.dtab em{font-family:var(--font-ui);font-size:11px;color:var(--bone-ghost);letter-spacing:0}
.dtab .glyph{font-size:10px;opacity:.7}
.dtab:hover{color:var(--bone-dim);background:var(--ink-3)}
.dtab.on{color:var(--bone);background:var(--ink-0)}
.dtab.on .glyph{opacity:1}
.dtab.on em{color:var(--accent);opacity:.75}
.dtab::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .4s var(--ease)}
.dtab.on::after{transform:scaleX(1)}

.demo-body{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.demo-src{border-right:1px solid var(--line-0);display:flex;flex-direction:column;background:var(--ink-1);min-width:0}
.src-head,.out-head{
  height:38px;flex:none;display:flex;align-items:center;gap:9px;padding:0 16px;
  border-bottom:1px solid var(--line-0);background:var(--ink-2);color:var(--bone-faint);
}
.out-head .live{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(198,242,78,.9);animation:blink 1.9s ease-in-out infinite}
.out-head .right{margin-left:auto}

.src{
  flex:1;overflow:auto;padding:16px 0 20px;display:none;
  font-family:var(--font-mono);font-size:12.5px;line-height:20px;
  background:radial-gradient(500px 260px at 10% 0%,rgba(198,242,78,.03),transparent 70%);
  counter-reset:l;
}
.src.on{display:block}
/* the source is authored one .ln per line, so the newlines BETWEEN them are
   just formatting — collapse them here or <pre> renders each one as a blank
   line and the listing comes out double-spaced. */
.src code{white-space:normal}
.src .ln{display:block;padding:0 18px 0 52px;position:relative;white-space:pre-wrap;color:var(--bone);min-height:20px}
.src .ln::before{
  counter-increment:l;content:counter(l);
  position:absolute;left:0;width:38px;text-align:right;
  color:var(--bone-ghost);font-size:10.5px;
}
.src .ln:hover{background:rgba(255,255,255,.018)}

.demo-out{display:flex;flex-direction:column;background:var(--ink-2);min-width:0}
.out-pane{display:none;flex:1;overflow:hidden;position:relative}
.out-pane.on{display:flex;flex-direction:column;animation:fadeUp .6s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.synth{min-height:0}
.synth-credit{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;z-index:3;
  font-family:var(--font-mono);font-size:9px;color:rgba(255,46,151,.6);
}

/* bean there — the compiled coffee shop */
.bean{flex:1;overflow:auto;background:#f4ece0;color:#3b2417;font-family:"Schibsted Grotesk",system-ui,sans-serif}
.bean-bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 24px;background:rgba(244,236,224,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(59,36,23,.1);
}
.bean-logo{font-weight:700;font-size:16px;letter-spacing:-.01em;color:#3b2417}
.bean-links{display:flex;gap:15px;font-size:12.5px;color:#7a5c48}
.bean-hero{padding:52px 24px 46px;text-align:center}
.bean-h1{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);font-weight:400;letter-spacing:-.02em;color:#3b2417;line-height:1.1}
.bean-sub{margin-top:12px;font-size:14.5px;color:#7a5c48}
.bean-btn{
  display:inline-block;margin-top:24px;padding:11px 22px;border-radius:100px;
  background:#3b2417;color:#f4ece0;font-size:13.5px;font-weight:500;
  box-shadow:0 6px 18px rgba(59,36,23,.22);transition:transform .3s var(--ease),box-shadow .3s;
}
.bean-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(59,36,23,.3)}
.bean-menu{padding:8px 24px 34px}
.bean-h2{font-family:var(--font-display);font-size:23px;font-weight:400;color:#3b2417;margin-bottom:16px}
.bean-h2.sm{margin-top:32px;font-size:20px}
.bean-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bean-card{
  border:1px solid rgba(59,36,23,.16);border-radius:9px;padding:16px 14px;background:#faf5ee;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.bean-card:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(59,36,23,.14)}
.bean-card b{display:block;font-size:14.5px;font-weight:600}
.bean-card .p{display:block;margin-top:4px;font-size:13px;color:#7a5c48}
.bean-card i{display:block;margin-top:9px;font-size:12px;line-height:1.5;color:#8c6f5b}
.bean-hours{font-size:13.5px;line-height:1.85;color:#7a5c48}
.bean-foot{padding:18px 24px 24px;text-align:center;font-size:11.5px;color:#a08a76;border-top:1px solid rgba(59,36,23,.09)}

.demo-note{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line-0);background:var(--ink-1);
  font-size:13px;color:var(--bone-faint);
}
.demo-note code{color:var(--bone-dim)}

/* ══════════════ cards ══════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  position:relative;overflow:hidden;
  border:1px solid var(--line-0);border-radius:14px;background:var(--ink-1);
  padding:28px 26px 30px;
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px 200px at var(--cx,50%) var(--cy,0%),rgba(198,242,78,.07),transparent 70%);
  transition:opacity .45s;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--ink-2)}
.card:hover::before{opacity:1}
.card.wide{grid-column:span 2;background:linear-gradient(140deg,var(--ink-2),var(--ink-1) 60%)}
.card-ico{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(198,242,78,.09);border:1px solid rgba(198,242,78,.2);
  color:var(--accent);font-size:16px;
}
.card h3{font-family:var(--font-display);font-size:21px;font-weight:400;color:var(--bone);letter-spacing:-.012em}
.card p{margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--bone-dim)}
.card p code{color:var(--accent);background:rgba(198,242,78,.09);border-radius:4px;padding:1px 5px}
.card p b{color:var(--bone);font-weight:600}
.card p i{color:var(--bone);font-style:italic}
.kbd-hint{margin-top:18px}

/* ══════════════ rules ══════════════ */
.rules-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:64px;align-items:center}
.rules-list{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:13px}
.rules-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.62;color:var(--bone-dim)}
.rules-list li::before{content:"\2726";position:absolute;left:0;top:1px;color:var(--accent);font-size:10px;opacity:.8}
.rules-list b{color:var(--bone);font-weight:600}
.rules-list i{font-style:italic;color:var(--bone)}

.rules-panel{
  border:1px solid var(--line-1);border-radius:14px;background:var(--ink-0);overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 90px rgba(198,242,78,.04);
}
.rp-head{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:var(--ink-2);border-bottom:1px solid var(--line-0);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--bone-dim);
}
.rp-switch{margin-left:auto;width:32px;height:17px;border-radius:100px;background:var(--line-1);position:relative;transition:background .3s}
.rp-switch i{position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:var(--bone-faint);transition:transform .35s var(--ease),background .3s}
.rp-switch.on{background:rgba(198,242,78,.28)}
.rp-switch.on i{transform:translateX(15px);background:var(--accent);box-shadow:0 0 10px rgba(198,242,78,.7)}

.rp-name{padding:18px 18px 4px}
.rules-panel label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--bone-ghost);margin-bottom:8px}
.rp-input{
  font-family:var(--font-mono);font-size:13px;color:var(--bone);
  background:var(--ink-3);border:1px solid var(--line-1);border-radius:7px;padding:9px 12px;
}
.rp-glossary{padding:14px 18px 18px}
.gl-row{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--line-0);
  transition:opacity .3s;
}
.gl-row:last-child{border-bottom:0}
.gl-row code{
  font-size:12px;color:var(--accent);background:rgba(198,242,78,.09);
  border:1px solid rgba(198,242,78,.16);border-radius:5px;padding:3px 8px;white-space:nowrap;
}
.gl-row .ar{color:var(--bone-ghost);font-family:var(--font-mono);font-size:11px}
.gl-row i{font-style:italic;font-size:13.5px;color:var(--bone-dim);line-height:1.4}
.gl-row .tg{width:26px;height:14px;border-radius:100px;background:var(--line-1);position:relative;flex:none}
.gl-row .tg::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--bone-faint);transition:transform .35s var(--ease),background .3s}
.gl-row .tg.on{background:rgba(198,242,78,.26)}
.gl-row .tg.on::after{transform:translateX(12px);background:var(--accent)}
.gl-row.off{opacity:.38}
.gl-row.off i{text-decoration:line-through;text-decoration-color:var(--bone-ghost)}
.rp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--line-0);background:var(--ink-2);
}

/* ══════════════ providers ══════════════ */
.prov{border:1px solid var(--line-0);border-radius:14px;overflow:hidden;background:var(--ink-1)}
.prov-row{
  display:grid;grid-template-columns:1fr 1.15fr 1.5fr;gap:20px;align-items:center;
  padding:20px 26px;border-bottom:1px solid var(--line-0);
  font-size:14.5px;color:var(--bone-dim);
  transition:background .4s var(--ease);
}
.prov-row:last-child{border-bottom:0}
.prov-row:not(.head):hover{background:var(--ink-2)}
.prov-row.head{
  background:var(--ink-0);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-ghost);
  padding:12px 26px;
}
.p-name{display:flex;align-items:center;gap:11px;color:var(--bone);font-weight:600;font-size:15.5px}
.p-dot{width:9px;height:9px;border-radius:50%;flex:none}
.p-dot.claude{background:var(--accent);box-shadow:0 0 12px rgba(198,242,78,.8)}
.p-dot.anth{background:var(--amber);box-shadow:0 0 12px rgba(232,192,124,.6)}
.p-dot.oai{background:var(--peri);box-shadow:0 0 12px rgba(143,168,255,.6)}
.p-dot.ds{background:var(--rose);box-shadow:0 0 12px rgba(255,109,90,.6)}
.tagpill{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(198,242,78,.1);border:1px solid rgba(198,242,78,.22);
  border-radius:100px;padding:2px 8px 3px;font-weight:400;
}
.p-need b{color:var(--bone)}
.p-need code,.p-how code{color:var(--accent)}
.p-how{font-size:14px;color:var(--bone-faint)}

.prov-note{
  margin-top:20px;display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;color:var(--bone-faint);
}
.prov-note b{color:var(--bone-dim)}
.prov-note code{color:var(--bone-dim)}

.keys{margin-top:76px;border-top:1px solid var(--line-0);padding-top:44px}
.keys-title{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--bone);margin-bottom:24px}
.keys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-0);border:1px solid var(--line-0);border-radius:12px;overflow:hidden}
.key-row{
  display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--ink-1);
  transition:background .35s;
}
.key-row:hover{background:var(--ink-2)}
.key-row span{flex:none;display:flex;align-items:center;gap:2px}
.key-row i{color:var(--bone-ghost);font-family:var(--font-mono);font-size:11px;margin:0 4px}
.key-row em{margin-left:auto;font-size:13.5px;color:var(--bone-dim);text-align:right}

/* ══════════════ showcase ══════════════ */
.showcase{background:var(--ink-1);border-top:1px solid var(--line-0)}
.shot{margin:0}
.shot-frame{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-1);background:var(--ink-0);
  box-shadow:0 40px 110px rgba(0,0,0,.66),0 0 130px rgba(198,242,78,.05);
  will-change:transform;
}
.shot-frame img{width:100%;height:auto}
.shot-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.055) 48%,transparent 60%);
  transform:translateX(-32%);
  animation:sheen 6.5s var(--ease) infinite;
}
@keyframes sheen{0%,62%{transform:translateX(-42%)}100%{transform:translateX(42%)}}
.shot figcaption{margin-top:20px;text-align:center;font-size:13.5px;color:var(--bone-faint)}
.shot figcaption code{color:var(--bone-dim)}

.stats{margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-0);border:1px solid var(--line-0);border-radius:14px;overflow:hidden}
.stat{background:var(--ink-0);padding:32px 22px;text-align:center;transition:background .4s}
.stat:hover{background:var(--ink-2)}
.stat b{
  display:block;font-family:var(--font-display);font-size:44px;font-weight:400;
  color:var(--accent);line-height:1;letter-spacing:-.02em;
  text-shadow:0 0 34px rgba(198,242,78,.28);
}
.stat span{display:block;margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}

/* ══════════════ download ══════════════ */
.download{position:relative;overflow:hidden;border-top:1px solid var(--line-0)}
.dl-bloom{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% 6%,rgba(198,242,78,.1),transparent 66%),
    radial-gradient(900px 600px at 84% 92%,rgba(143,168,255,.055),transparent 68%);
}
.download .wrap{position:relative;z-index:2}
.dl-head{max-width:720px;margin:0 auto 58px;text-align:center}
.dl-head h2{font-size:clamp(32px,4.6vw,58px)}
.dl-head .sec-lede{margin-left:auto;margin-right:auto}

/* two builds and the source recipe. `order` applies to grid items, so the
   visitor's own platform lands first without moving anything in the markup. */
.dl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
html[data-os="mac"] .dl-card[data-dl="mac"]{order:-1}
.os-badge{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--accent);background:rgba(198,242,78,.08);border:1px solid rgba(198,242,78,.22);
  border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:3px;
}
.dl-card{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line-1);border-radius:16px;background:var(--ink-1);
  padding:30px 30px 26px;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s,background .4s;
}
.dl-card.primary{
  background:linear-gradient(150deg,rgba(198,242,78,.07),var(--ink-2) 46%,var(--ink-1));
  border-color:rgba(198,242,78,.24);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 80px rgba(198,242,78,.05);
}
.dl-card.primary:hover{
  transform:translateY(-6px);border-color:rgba(198,242,78,.5);
  box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 110px rgba(198,242,78,.11);
}
.dl-card:not(.primary):hover{border-color:var(--line-2);background:var(--ink-2)}
.dl-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.dl-icon{width:64px;height:64px;border-radius:14px;flex:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.dl-glyph{
  width:64px;height:64px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--ink-3);border:1px solid var(--line-1);color:var(--accent);font-size:26px;
}
.dl-card h3{font-family:var(--font-display);font-size:23px;font-weight:400;color:var(--bone);letter-spacing:-.014em}
.dl-top p{margin-top:5px}
.dl-body{font-size:14.5px;line-height:1.65;color:var(--bone-dim)}
.dl-body b{color:var(--bone);font-weight:600}
.dl-meta{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.dl-meta li{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bone-faint);background:var(--ink-3);border:1px solid var(--line-0);
  border-radius:100px;padding:4px 11px 5px;
}
.dl-go{
  margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--accent);
}
.dl-go i{transition:transform .35s var(--ease)}
.dl-card:hover .dl-go i{transform:translateY(3px)}
.dl-go.ghost{color:var(--bone-dim);font-weight:500}
.dl-card:hover .dl-go.ghost i{transform:translateX(4px) translateY(0)}
.dl-go.ghost:hover{color:var(--bone)}

.shellbox{
  position:relative;margin-top:4px;min-width:0;
  border:1px solid var(--line-0);border-radius:10px;background:var(--ink-0);
  padding:16px 18px;overflow:hidden;
}
/* the clone URL is longer than a phone is wide — let this one strip scroll
   rather than let its min-content width stretch the whole card. */
.shellbox pre{overflow-x:auto;min-width:0}
.shellbox code{display:block;font-family:var(--font-mono);font-size:12.5px;line-height:1.85;color:var(--bone-dim)}
.shellbox code span{display:block;white-space:pre}
.shellbox .p{color:var(--accent);opacity:.7;margin-right:8px}
.shellbox .cm{color:var(--bone-ghost);margin-top:6px}
.copy{
  position:absolute;top:9px;right:9px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-faint);background:var(--ink-3);border:1px solid var(--line-1);
  border-radius:6px;padding:4px 9px;transition:color .3s,border-color .3s,background .3s;
}
.copy:hover{color:var(--accent);border-color:rgba(198,242,78,.35);background:rgba(198,242,78,.07)}
.copy.done{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

.dl-req{
  margin-top:26px;display:flex;align-items:flex-start;gap:11px;
  border:1px solid var(--line-0);border-radius:12px;background:var(--ink-1);
  padding:18px 22px;font-size:14px;line-height:1.66;color:var(--bone-faint);
}
.dl-req b{color:var(--bone-dim)}

/* ══════════════ footer ══════════════ */
.foot{border-top:1px solid var(--line-0);background:var(--ink-0);padding:64px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand .nav-lockup{margin-bottom:16px}
.foot-brand .mark{width:24px;height:24px}
.foot-quote{font-family:var(--font-mono);font-style:italic;font-size:13px;color:var(--bone-faint);max-width:280px}
.foot-col h4{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-ghost);font-weight:400;margin-bottom:15px;
}
.foot-col a{display:block;font-size:14px;color:var(--bone-dim);padding:5px 0;transition:color .3s,transform .3s var(--ease)}
.foot-col a:hover{color:var(--accent);transform:translateX(3px)}
.foot-rule{height:1px;background:var(--line-0);margin:44px 0 20px}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--bone-ghost);flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════
   scroll reveal
   ══════════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
.reveal[data-d="6"]{transition-delay:.54s}

/* split-word headline reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:top}
.split .w>i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .95s var(--ease-out),opacity .8s var(--ease-out);
}
.split.in .w>i{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .split .w>i{transform:none;opacity:1}
  .window{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   responsive
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:36px;padding:0 32px}
  .rules-grid{gap:40px}
  .prov-row{grid-template-columns:1fr 1fr;row-gap:8px}
  .prov-row.head{display:none}
  .p-how{grid-column:1/-1}
}

@media (max-width:1020px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta{margin-left:auto}
  .nav-cta .btn-ghost span:not(.ico){display:none}
  .nav-cta .btn-ghost{padding:9px 11px}

  /* mobile menu */
  .nav.open .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:fixed;left:0;right:0;top:var(--nav-h);
    background:rgba(8,8,10,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line-0);padding:10px 32px 22px;
  }
  .nav.open .nav-links a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--line-0);color:var(--bone-dim)}

  .hero{padding-top:calc(var(--nav-h) + 54px)}
  .hero-grid{grid-template-columns:1fr;padding:0 32px;gap:56px;max-width:var(--wrap)}
  .hero-copy{max-width:none}
  .window{transform:none!important;max-width:none}
  .window.in{animation:none;opacity:1}
  .stage-glow{inset:6% -4%}
  .scroll-cue{display:none}

  .steps{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr;gap:0;padding-bottom:56px}
  .pipe-col{padding:22px 12px}
  .pipe-col.accent{border-left:0;border-right:0;border-top:1px solid var(--line-0);border-bottom:1px solid var(--line-0)}
  .pipe-arrow{padding:6px 0}
  .pipe-arrow i{display:none}
  .pipe-arrow span{transform:rotate(90deg);margin:0}

  .demo-body{grid-template-columns:1fr;min-height:0}
  .demo-src{border-right:0;border-bottom:1px solid var(--line-0)}
  .src{max-height:420px}
  .out-pane.on{min-height:460px}

  .cards{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:span 2}

  .rules-grid{grid-template-columns:1fr;gap:44px}
  .keys-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* three abreast stop fitting here — the two builds pair up and the
     source recipe takes the full row underneath. */
  .dl-cards{grid-template-columns:1fr 1fr}
  .dl-card.source{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}

@media (max-width:680px){
  .wrap,.hero-grid{padding-left:20px;padding-right:20px}
  .nav{padding:0 20px;gap:14px}
  .nav.open .nav-links{padding:10px 20px 22px}
  .wordmark{font-size:17px}
  .nav-cta .btn-solid span:not(.ico):not(.btn-sub){font-size:0}
  .nav-cta .btn-solid span:not(.ico):not(.btn-sub)::after{content:"Download";font-size:13.5px}

  .sec{padding:88px 0}
  .sec-head{margin-bottom:48px}
  .hero-copy h1{font-size:clamp(31px,8.6vw,44px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-lg{width:100%}
  .btn-text{align-self:flex-start;margin-top:4px}

  .dl-cards{grid-template-columns:1fr}

  .w-body{height:auto;flex-direction:column}
  .w-left{width:100%;border-right:0;border-bottom:1px solid var(--line-0)}
  /* the panes are flex:1 side by side; stacked they need flex:none or the
     0% basis collapses them and `height` is ignored on the main axis. */
  .code{flex:none;height:250px}
  .w-right{flex:none;height:270px}
  .wt-center{display:none}
  /* the shortcut hint collides with the Help menu at this width */
  .wt-right span:nth-child(2),.wt-right span:nth-child(3){display:none}

  /* the hero preview loses ~110px of height when the panes stack, which
     walks the track deck up over the sun. Shrink one, drop a row off the
     other, and the horizon stays clear between them. */
  #heroPv .sw-sun{top:23%;width:min(76px,22%)}
  #heroPv .sw-deck{left:12px;right:12px;bottom:12px;gap:4px}
  #heroPv .sw-row:nth-child(n+4){display:none}
  /* the status bar can't wrap; drop the middle chips rather than clip them */
  .w-status .chip:nth-of-type(2),
  .w-status .chip:nth-of-type(3),
  .w-status .chip:nth-of-type(4),
  .w-status .sep{display:none}
  .w-status .right .chip{display:flex}

  .cards{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  .stat b{font-size:36px}
  .foot-grid{grid-template-columns:1fr}
  .bean-cards{grid-template-columns:1fr}
  .demo-tabs .dtab em{display:none}
  .demo-tabs .dtab{padding:13px 12px;font-size:11.5px;gap:7px}
  .keys .key-row{flex-direction:column;align-items:flex-start;gap:8px}
  .key-row em{margin-left:0}
}

@media (max-width:560px){
  /* the bar runs out of room here; the repo link survives in the hero,
     the footer and the second download card, the installer does not. */
  .nav-cta .btn-ghost{display:none}
  .nav{gap:10px}

  /* two columns squeeze the provider name onto two lines; stack instead */
  .prov-row{grid-template-columns:1fr;row-gap:6px}
}