:root{
  --void:#04040a; --ink:#f1f0ff; --muted:#a4a3c4; --dim:#6f6e92;
  --glass:rgba(12,12,26,.55); --glass-solid:rgba(10,10,22,.9);
  --line:rgba(255,255,255,.09); --line2:rgba(185,162,255,.22);
  --red:#ff2e55; --red2:#ff4d6d; --violet:#8a5cff; --violet2:#b9a2ff; --link:#c9b8ff;
  --ok:#3ddc84; --warn:#ffb020; --bad:#ff4d5e; --gold:#ffe14d;
  --display:"Unbounded",system-ui,sans-serif; --body:"Space Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--void)}
html,body{margin:0;color:var(--ink);font-family:var(--body)}
body{background:transparent;min-height:100vh;-webkit-font-smoothing:antialiased}
::selection{background:rgba(255,46,85,.35)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
code,pre,.mono{font-family:var(--mono)}
code{font-size:.9em;background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.pix{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;line-height:1.5}
.muted{color:var(--muted)}
.small{font-size:11px}

/* ---- backdrop: CSS black hole first, the WebGL scene fades in over it ---- */
#bg-fallback{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
    radial-gradient(circle at 72% 46%, #000 0 7vmin, rgba(255,241,244,.9) 7.4vmin, rgba(255,77,109,.55) 8.6vmin, rgba(138,92,255,.18) 18vmin, transparent 38vmin),
    radial-gradient(60vmin 14vmin at 72% 46%, rgba(255,46,85,.28), transparent 70%),
    radial-gradient(1100px 700px at 80% 20%, rgba(138,92,255,.16), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(255,46,85,.10), transparent 60%), var(--void)}
#bg-fallback.quiet{opacity:.55}
@media (max-width:899px){#bg-fallback{background:
    radial-gradient(circle at 50% 62%, #000 0 9vmin, rgba(255,241,244,.85) 9.5vmin, rgba(255,77,109,.5) 11vmin, rgba(138,92,255,.16) 22vmin, transparent 44vmin),
    radial-gradient(70vmin 16vmin at 50% 62%, rgba(255,46,85,.25), transparent 70%), var(--void)}}
canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gl-on canvas#gl{opacity:1}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,10,0) 0%,rgba(4,4,10,.15) 55%,rgba(4,4,10,.7) 100%)}

/* ---- glass: solid tint on phones (cheap), real blur only on big screens with a mouse ---- */
.glass,.card,.mini,.code,.panel,.tile,header.top{background:var(--glass-solid);border:1px solid var(--line)}
@media (hover:hover) and (min-width:900px){
  .glass,.card,.mini,.code,.panel,.tile,header.top{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
}

header.top{position:sticky;top:14px;z-index:5;margin:14px 0 0;padding:10px 14px 10px 18px;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.16em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{color:var(--red);text-shadow:0 0 14px rgba(255,46,85,.8)}
.brand .sub{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet2);margin-left:6px}
nav a{color:var(--muted);font-size:14px;margin-left:18px}
nav a:hover{color:var(--ink);text-decoration:none}
nav a.nav-cta{color:var(--ink);border:1px solid var(--line2);padding:7px 14px;border-radius:999px}
nav a.nav-cta:hover{border-color:var(--red2);box-shadow:0 0 18px rgba(255,46,85,.3)}
@media(max-width:560px){header.top{border-radius:18px}nav a{margin:0 14px 0 0}}

.hero{min-height:calc(100svh - 90px);display:flex;flex-direction:column;justify-content:center;padding:40px 0;max-width:600px}
.eyebrow{font-size:11px;color:var(--violet2);margin-bottom:20px}
.hero h1{font-family:var(--display);font-size:clamp(32px,5.4vw,60px);line-height:1.06;margin:0 0 20px;font-weight:700;letter-spacing:-.02em}
.hero h1 .g{color:var(--red2);position:relative;white-space:nowrap;text-shadow:0 0 28px rgba(255,46,85,.45)}
.hero h1 .g::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.07em;border-radius:9px;background:var(--red2);transform-origin:left;box-shadow:0 0 14px rgba(255,46,85,.7)}
.hero p{color:var(--muted);font-size:18px;margin:0 0 30px;line-height:1.55;max-width:520px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:899px){
  .hero{max-width:none;text-align:center;align-items:center;justify-content:flex-start;padding:56px 0 34vh}
  .hero p{margin-left:auto;margin-right:auto}
  .cta{justify-content:center}
}

.btn{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;padding:13px 20px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(10,10,22,.6);color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;text-decoration:none}
.btn:hover{transform:translateY(-2px);border-color:var(--violet2);text-decoration:none;box-shadow:0 8px 28px rgba(138,92,255,.25)}
.btn.primary{background:linear-gradient(135deg,#ff2e55,#c41f6a);border-color:transparent;color:#fff}
.btn.primary:hover{box-shadow:0 10px 34px rgba(255,46,85,.45)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

section{padding:44px 0}
h2.sec{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 20px;color:var(--violet2);
  display:flex;align-items:center;gap:14px}
h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.lead{color:var(--muted);max-width:720px;line-height:1.6;margin:0 0 20px}

.card{border-radius:18px;padding:22px;position:relative}
.card h3{margin:0 0 8px;font-size:18px;font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.card p{color:var(--muted);margin:0;line-height:1.55}
.steps,.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.steps,.grid3,.grid2{grid-template-columns:1fr}}
.step-num{font-size:12px;color:var(--red2);margin-bottom:12px}
.mini{border-radius:16px;padding:16px}
.mini b{display:block;margin-bottom:6px;font-weight:500}
.mini span{color:var(--muted);font-size:14px;line-height:1.5}
.mini.honest{border-style:dashed;border-color:rgba(255,225,77,.35)}
.mini.honest b{color:var(--gold)}

.code-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media(max-width:820px){.code-pair{grid-template-columns:1fr}}
.code{border-radius:16px;overflow:hidden;min-width:0}
.code-h{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:12px}
.code pre{margin:0;padding:14px;overflow-x:auto;font-size:13px;line-height:1.6;color:#e2dcff;white-space:pre;background:rgba(0,0,0,.35)}
#c3{white-space:pre-wrap}
.copy{font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer}
.copy:hover{border-color:var(--violet2)}

/* sandbox */
.demo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:980px){.demo{grid-template-columns:1fr}}
.sandbox{display:flex;flex-direction:column;gap:14px;min-width:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px}
.field input{max-width:220px}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.acts .btn{font-size:12px;padding:10px 14px;cursor:pointer;color:var(--ink)}
.small-t{font-size:13px;margin:0;line-height:1.5}
input,select,textarea{font:inherit;background:rgba(0,0,0,.45);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:1px}
.side{display:flex;flex-direction:column;gap:14px}
.panel{border-radius:16px;padding:14px}
.panel-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet2);margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid}
.chip.accept{color:var(--ok);border-color:rgba(61,220,132,.5);background:rgba(61,220,132,.1)}
.chip.review{color:var(--warn);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.1)}
.chip.reject{color:var(--bad);border-color:rgba(255,77,94,.5);background:rgba(255,77,94,.1)}
.chip.info{color:var(--muted);border-color:var(--line)}
.verdict-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.meter{height:6px;border-radius:9px;background:rgba(255,255,255,.07);margin:12px 0 10px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--warn),var(--bad));transition:width .4s}
.reasons,.live{list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted)}
.reasons li,.live li{padding:5px 0;border-top:1px solid var(--line);line-height:1.4}
.reasons li:first-child,.live li:first-child{border-top:0}
.live li{display:flex;justify-content:space-between;gap:10px}
.live .on{color:var(--warn)}
.live .off{color:var(--ok)}

footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;color:var(--muted);font-size:13px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){.btn,canvas#gl{transition:none}}

/* ---- landing motion (only with html.motion, which intro.js sets unless reduced motion is on) ---- */
#intro{display:none}
html.intro #intro{display:flex;position:fixed;inset:0;z-index:20;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--void);transition:background-color .6s ease .1s}
#intro .mark{font-family:var(--display);font-weight:700;font-size:clamp(44px,11vw,128px);letter-spacing:.3em;margin-right:-.3em;display:flex}
#intro .mark span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.25em) scale(1.5);animation:mark-in .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 80ms + 80ms)}
#intro .mark .r{color:var(--red);text-shadow:0 0 30px rgba(255,46,85,.9)}
#intro .mark-sub{font-size:12px;color:var(--violet2);letter-spacing:.6em;margin-right:-.6em;opacity:0;animation:fade-in .6s ease .55s forwards}
#intro .skip{position:absolute;right:20px;bottom:20px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:10px;cursor:pointer;opacity:0;animation:fade-in .4s ease .4s forwards}
#intro .skip:hover{color:var(--ink);border-color:var(--line2)}
@keyframes mark-in{to{opacity:1;filter:blur(0);transform:none}}
@keyframes fade-in{to{opacity:1}}
/* the wordmark falls into the singularity and the dark lifts off the scene */
html.intro-out #intro{background-color:transparent;pointer-events:none}
html.intro-out #intro .skip{pointer-events:auto}
html.intro-out #intro .mark,html.intro-out #intro .mark-sub{transition:transform .6s cubic-bezier(.6,0,.9,.4),opacity .5s ease .1s,filter .6s;transform:translate(22vw,-4vh) scale(.08);opacity:0;filter:blur(6px)}
@media(max-width:899px){html.intro-out #intro .mark,html.intro-out #intro .mark-sub{transform:translate(0,12vh) scale(.08)}}
html.intro-skip #intro{transition:opacity .3s;opacity:0}
html.intro #bg-fallback{animation:bg-in 1.8s cubic-bezier(.2,.8,.2,1) .7s both}
@keyframes bg-in{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}

/* hero: everything waits, then comes in one piece at a time; headline words rise out of a blur */
html.motion .hero>*{opacity:0;transform:translateY(16px)}
html.motion .hero h1{opacity:1;transform:none}
html.motion .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px)}
html.motion .hero h1 .g::after{transform:scaleX(0)}
html.hero-in .hero>*,html.shown .hero>*{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.hero-in .hero .eyebrow{transition-delay:0s}
html.hero-in .hero h1 .w,html.shown .hero h1 .w{opacity:1;transform:none;filter:none;
  transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease;transition-delay:calc(80ms + var(--i) * 55ms)}
html.hero-in .hero h1 .g::after,html.shown .hero h1 .g::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.7,0,.2,1) calc(200ms + var(--n,8) * 55ms)}
html.hero-in .hero>p{transition-delay:calc(200ms + var(--n,8) * 55ms)}
html.hero-in .hero>.cta{transition-delay:calc(320ms + var(--n,8) * 55ms)}
html.intro-skip .hero *{transition-duration:.3s !important;transition-delay:0s !important}

/* scroll reveals */
html.motion .rv{opacity:0;transform:translateY(26px) scale(.985)}
html.motion .rv.in{opacity:1;transform:none;transition:opacity .7s ease var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html.motion h2.sec.rv::after{transform:scaleX(0);transform-origin:left}
html.motion h2.sec.rv.in::after{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.7,0,.2,1) .15s}

/* a soft light under the pointer on cards */
@media (hover:hover){
  .card,.mini,.panel,.code{background-image:radial-gradient(260px circle at var(--mx,-300px) var(--my,-300px),rgba(185,162,255,.09),transparent 60%)}
  .card:hover,.mini:hover{border-color:var(--line2)}
}