@font-face{font-family:"Sora";src:url("fonts/Sora.ttf") format("truetype");font-weight:100 800;font-display:swap}
:root{--bg:#03050a;--ink:#f2f6ff;--dim:rgba(190,210,255,.48);--line:rgba(120,170,255,.18);--blue:#5aa8ff;--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;--pad:clamp(16px,2.4vw,32px);--sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;--teal:#2ee6d0;--app-h:100vh}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);overflow-x:hidden;-webkit-font-smoothing:antialiased}
#track{height:calc(var(--app-h) * 4);width:1px}
#scene{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0;touch-action:pan-y}
.veil{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(2,3,8,.75) 100%),linear-gradient(180deg,rgba(3,5,10,.55),transparent 18%,transparent 80%,rgba(3,5,10,.7))}
.title{font-family:var(--sans);font-weight:600;letter-spacing:-.035em;line-height:.95}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.dim{color:var(--dim)}
.hud{position:fixed;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:var(--pad);pointer-events:none;font-size:11px;letter-spacing:.14em}
.hud>*{pointer-events:auto}
.hud-top{top:0}
.hud-bottom{bottom:0;padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}
.mark{height:22px;width:auto;display:block;margin-right:4px}
.hud-l{display:flex;align-items:center;gap:10px}
.sound{background:none;border:1px solid var(--line);color:var(--ink);font:inherit;letter-spacing:.14em;padding:8px 12px;border-radius:999px;display:flex;align-items:center;gap:10px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s}
.sound:hover{border-color:rgba(140,190,255,.5)}
.eq{display:flex;gap:2px;align-items:flex-end;height:10px}
.eq i{width:2px;height:3px;background:var(--blue);transition:height .3s}
.sound[aria-pressed=true] .eq i{animation:eq 1s ease-in-out infinite}
.sound[aria-pressed=true] .eq i:nth-child(2){animation-delay:.2s}
.sound[aria-pressed=true] .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.pulse{width:6px;height:6px;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 1.6s steps(2) infinite}
@keyframes pulse{50%{opacity:.25}}
.hud-c{color:var(--dim);position:absolute;left:50%;transform:translateX(-50%)}
.hud-r{display:flex;align-items:center;gap:6px}
.bar{display:inline-block;width:90px;height:1px;background:var(--line);margin-left:12px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.chapters{position:fixed;top:0;left:0;right:0;height:var(--app-h);z-index:3;pointer-events:none}
.chapter{position:absolute;opacity:0;will-change:opacity,transform}
.c0{left:0;right:0;top:clamp(64px,calc(var(--app-h) * .09),110px);text-align:center;padding:0 var(--pad)}
.c0:before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,120vw);height:180%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(3,5,10,.85),rgba(3,5,10,.45) 55%,transparent)}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:clamp(280px,46vw,760px);height:auto;filter:drop-shadow(0 0 18px rgba(46,230,208,.22)) drop-shadow(0 0 48px rgba(90,160,255,.28))}
.c0 .cap{margin-left:auto;margin-right:auto;margin-top:clamp(14px,2vw,26px);color:rgba(235,242,255,.92);font-size:12px}
.scroll-hint{position:absolute;z-index:3;pointer-events:none;opacity:0;left:50%;bottom:calc(var(--pad) + 46px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dim)}
.scroll-hint i{width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:drop 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.chapter h2{font-size:clamp(40px,6.6vw,112px);text-shadow:0 0 30px rgba(3,5,10,.6)}
.mono.cap{text-shadow:0 0 10px #03050a,0 0 22px #03050a}
.chapter .cap{margin-top:18px;max-width:420px;line-height:1.7;color:rgba(220,232,255,.72)}
.c1,.c2{left:var(--pad);bottom:clamp(80px,calc(var(--app-h) * .13),140px)}
.c2{left:auto;right:var(--pad);text-align:right}
.c2 .cap{margin-left:auto}
.agent-tags{position:fixed;top:0;left:0;right:0;height:var(--app-h);z-index:2;pointer-events:none}
.tag{position:absolute;left:0;top:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#dfeaff;white-space:nowrap;opacity:0;will-change:transform,opacity;display:flex;align-items:center;gap:8px}
.tag b{display:inline-block;width:7px;height:7px;border:1px solid currentColor}
.tag em{font-style:normal;color:var(--dim)}
.login{position:fixed;z-index:6;top:calc(var(--app-h) / 2);left:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));opacity:0;visibility:hidden}
.login:before{content:"";position:absolute;left:50%;top:50%;width:200%;height:190%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(3,5,10,.92),rgba(3,5,10,.7) 45%,rgba(3,5,10,.3) 72%,transparent)}
.card{position:relative;padding:28px 28px 24px;border-radius:18px;background:linear-gradient(160deg,rgba(28,44,80,.42),rgba(8,12,24,.55));border:1px solid rgba(140,185,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);overflow:hidden}
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(80% 60% at 0% 0%,rgba(110,170,255,.16),transparent 60%)}
.card-top{display:flex;justify-content:space-between;color:var(--dim);font-size:10px;padding-bottom:18px;border-bottom:1px dashed rgba(140,185,255,.18);margin-bottom:22px}
.ok{display:flex;align-items:center;gap:7px;color:#9ff2e6}
.ok b{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.card-brand{display:block;height:38px;width:auto;margin-bottom:20px}
.card h3{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
.card-text{font-family:var(--sans);font-size:13px;color:var(--dim);margin-bottom:24px;line-height:1.5}
.google{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.9);background:#f4f7ff;color:#0a0f1c;font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;box-shadow:0 0 0 rgba(90,168,255,0)}
.google svg{width:18px;height:18px;flex:none}
.google .arrow{margin-left:auto;font-style:normal;transition:transform .35s}
.google:hover,.google:focus-visible{transform:translateY(-1px);background:#fff;box-shadow:0 0 0 4px rgba(90,168,255,.18),0 12px 40px rgba(70,140,255,.45);outline:none}
.google:hover .arrow{transform:translateX(4px)}
.note{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--dim);font-size:10px}
.lock{width:8px;height:7px;border:1px solid currentColor;position:relative;margin-top:3px}
.lock:before{content:"";position:absolute;left:1px;top:-5px;width:4px;height:4px;border:1px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.toast{margin-top:10px;color:#9fd0ff;font-size:10px;min-height:1em;opacity:0;transition:opacity .4s}
.toast.on{opacity:1}
@media (max-width:760px){
  .hud-c{display:none}
  .bar{width:48px}
  .c0{top:auto;bottom:clamp(140px,calc(var(--app-h) * .22),200px)}
  .hero-logo img{width:min(78vw,340px)}
  .mark{height:18px}
  .c0 .cap{font-size:10px}
  .scroll-hint{bottom:calc(var(--pad) + 40px)}
  .chapter h2{font-size:clamp(34px,10.5vw,54px)}
  .c1,.c2{left:var(--pad);right:var(--pad);bottom:96px;text-align:left}
  .c2 .cap{margin-left:0}
  .chapter .cap{font-size:10px;max-width:none}
  .card{padding:22px 20px 18px}
  .card-brand{height:32px}
  .tag{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.scroll-hint i,.pulse{animation:none}}