:root{
  --ink:#050711;
  --ink-2:#080c1c;
  --panel:#0b1023;
  --text:#f3f5ff;
  --muted:#8d98bb;
  --faint:#5d698c;
  --line:rgba(151,171,235,.16);
  --cyan:#74e7f3;
  --violet:#9d8cff;
  --pink:#ff9acb;
  --lime:#c9f58b;
  --amber:#ffd17a;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Arial Black","Segoe UI Variable Display","Segoe UI","Helvetica Neue",sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  overflow:hidden;
  background:#02030a;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;}
h1,h2,p{margin:0;}

#stage-wrap{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#02030a;
}
#stage{
  position:relative;
  width:1600px;
  height:900px;
  flex:0 0 auto;
  overflow:hidden;
  transform-origin:center center;
  border-radius:22px;
  background:
    radial-gradient(1100px 760px at 16% -12%, rgba(106,82,255,.20), transparent 64%),
    radial-gradient(1000px 740px at 104% 112%, rgba(46,205,222,.13), transparent 62%),
    linear-gradient(140deg,#050814 0%,#070a18 48%,#040610 100%);
  box-shadow:0 35px 130px rgba(0,0,0,.75), inset 0 0 0 1px rgba(164,183,245,.06);
}
#stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 150px rgba(0,0,0,.6);
}
.mono{font-family:var(--mono);}

.bg,.bg *{pointer-events:none;}
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.aurora{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  mix-blend-mode:screen;
  opacity:.5;
  animation:drift 20s ease-in-out infinite alternate;
}
.aurora.a1{width:900px;height:760px;left:-330px;top:-380px;background:rgba(105,84,255,.22);}
.aurora.a2{width:760px;height:680px;right:-250px;top:80px;background:rgba(48,193,220,.14);animation-delay:-6s;}
.aurora.a3{width:840px;height:620px;right:-210px;bottom:-390px;background:rgba(190,103,242,.12);animation-delay:-12s;}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1);}
  to{transform:translate3d(3%,2%,0) scale(1.08);}
}
.grid{
  position:absolute;
  inset:-18%;
  background-image:
    linear-gradient(rgba(158,179,255,.052) 1px,transparent 1px),
    linear-gradient(90deg,rgba(158,179,255,.052) 1px,transparent 1px);
  background-size:84px 84px;
  transform:rotate(-2.2deg);
  -webkit-mask-image:radial-gradient(ellipse at 52% 46%,#000 0%,rgba(0,0,0,.6) 42%,transparent 74%);
  mask-image:radial-gradient(ellipse at 52% 46%,#000 0%,rgba(0,0,0,.6) 42%,transparent 74%);
}
.noise{
  position:absolute;
  inset:0;
  opacity:.045;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
#ambient-canvas{
  position:absolute;
  inset:0;
  width:1600px;
  height:900px;
  z-index:1;
  pointer-events:none;
}
.vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.38) 100%);
}

.scene{
  position:absolute;
  inset:0;
  z-index:4;
  opacity:0;
  visibility:hidden;
  will-change:opacity;
}

.kicker{
  display:flex;
  align-items:center;
  gap:13px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.kicker .num{color:var(--cyan);letter-spacing:.08em;}
.kicker .rule{display:inline-block;width:34px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.75;}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(116,231,243,.8);}

.copy{position:absolute;z-index:6;}
.scene-title{
  font-family:var(--display);
  font-weight:900;
  font-size:76px;
  line-height:.98;
  letter-spacing:-.06em;
}
.scene-title em{
  font-style:normal;
  background:linear-gradient(96deg,var(--cyan) 2%,#b7a4ff 55%,var(--pink) 114%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.scene-body{
  margin-top:22px;
  max-width:470px;
  font-size:19px;
  line-height:1.58;
  color:var(--muted);
  letter-spacing:-.01em;
}
.t-line{display:block;overflow:hidden;padding:.04em 0 .09em;margin-bottom:-.05em;}
.t-line > span{display:inline-block;will-change:transform,opacity;}
.fade-unit{will-change:transform,opacity;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;opacity:0;}
.chip{
  display:inline-flex;
  align-items:center;
  height:29px;
  padding:0 12px;
  border:1px solid rgba(151,171,235,.18);
  border-radius:999px;
  background:rgba(12,17,38,.6);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.15em;
  color:#aab5d8;
}

#wipe{
  position:absolute;
  top:-8%;
  left:0;
  width:2px;
  height:116%;
  z-index:14;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,transparent 2%,rgba(255,255,255,.9) 22%,rgba(116,231,243,.9) 55%,rgba(157,140,255,.8) 78%,transparent 98%);
  box-shadow:0 0 22px rgba(116,231,243,.55),0 0 70px rgba(116,231,243,.28);
}
#flash{
  position:absolute;
  inset:0;
  z-index:13;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(222,233,255,.55),transparent 42%),
    linear-gradient(90deg,rgba(116,231,243,.09),rgba(157,140,255,.12));
  mix-blend-mode:screen;
}

.hud{
  position:absolute;
  inset:0;
  z-index:24;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s ease;
  font-family:var(--mono);
}
.hud.show{opacity:1;}
.hud-brand{
  position:absolute;
  left:38px;top:27px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:.2em;
  color:rgba(171,186,222,.6);
}
.hud-brand .live{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px rgba(201,245,139,.75);}
.hud-brand i{font-style:normal;color:rgba(100,113,150,.7);}
.hud-time{position:absolute;right:38px;top:25px;font-size:9px;letter-spacing:.13em;color:#c9d2ec;}
.hud-time span{color:rgba(100,113,150,.7);}
.hud-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:28px;
  padding:0 10px;
  border:1px solid rgba(151,171,235,.15);
  border-radius:7px;
  background:rgba(8,12,26,.45);
  color:rgba(173,188,226,.72);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.13em;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.hud-btn:hover{background:rgba(116,231,243,.08);border-color:rgba(116,231,243,.32);color:#e0f8fb;}
.hud-controls{position:absolute;right:38px;bottom:44px;display:flex;gap:8px;}
.hud-controls .icon{width:28px;padding:0;justify-content:center;}
.hud-controls .icon span{font-size:9px;letter-spacing:0;}
.hud-progress{
  position:absolute;
  left:38px;right:38px;bottom:27px;
  height:2px;
  background:rgba(151,171,235,.13);
  overflow:visible;
}
.hud-progress .fill{
  position:absolute;left:0;top:0;width:0%;height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  box-shadow:0 0 12px rgba(116,231,243,.5);
}
.hud-progress .marker{position:absolute;top:-2px;width:1px;height:6px;background:rgba(170,186,225,.3);}
.hud-progress .head{
  position:absolute;left:0%;top:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:#eaffff;
  box-shadow:0 0 12px rgba(116,231,243,.9);
}

#start-screen{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  padding-left:112px;
  background:
    radial-gradient(900px 660px at 24% 44%,rgba(99,76,242,.2),transparent 64%),
    radial-gradient(700px 600px at 82% 42%,rgba(58,210,223,.08),transparent 66%),
    rgba(4,6,14,.54);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  transition:opacity .7s ease,visibility .7s ease;
  cursor:pointer;
}
#start-screen.gone{opacity:0;visibility:hidden;pointer-events:none;}
.start-content{position:relative;z-index:2;width:920px;will-change:transform;}
.start-kicker{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.27em;
  color:var(--muted);text-transform:uppercase;
}
.start-kicker .rule{width:46px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);}
.start-content h1{
  margin-top:31px;
  font-family:var(--display);
  font-size:88px;
  line-height:.98;
  font-weight:900;
  letter-spacing:-.068em;
  color:#f5f7ff;
}
.start-content h1 em{
  font-style:normal;
  background:linear-gradient(98deg,var(--cyan) 0%,#b8a4ff 54%,var(--pink) 112%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.start-content p{margin-top:26px;max-width:610px;font-size:18px;line-height:1.6;color:var(--muted);}
.start-btn{display:inline-flex;align-items:center;gap:17px;margin-top:42px;padding:0;border:0;background:none;cursor:pointer;text-align:left;}
.play-circle{
  width:68px;height:68px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(140deg,rgba(116,231,243,.2),rgba(157,140,255,.2));
  border:1px solid rgba(170,236,245,.4);
  box-shadow:0 0 0 7px rgba(116,231,243,.035),0 12px 40px rgba(85,213,230,.13);
  transition:transform .3s ease,box-shadow .3s ease;
}
.play-circle svg{width:20px;height:20px;margin-left:3px;fill:#eaffff;filter:drop-shadow(0 0 7px rgba(116,231,243,.8));}
.start-btn:hover .play-circle{transform:scale(1.06);box-shadow:0 0 0 9px rgba(116,231,243,.06),0 14px 48px rgba(85,213,230,.2);}
.start-btn .play-copy b{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:#e8f9fb;}
.start-btn .play-copy small{display:block;margin-top:7px;font-family:var(--mono);font-size:8px;letter-spacing:.13em;color:var(--faint);}
.start-note{display:flex;align-items:center;gap:10px;margin-top:35px;font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:var(--faint);}
.soundbars{display:flex;align-items:center;gap:2px;height:12px;}
.soundbars i{display:block;width:2px;border-radius:2px;background:var(--cyan);opacity:.7;animation:soundwave 1.1s ease-in-out infinite alternate;}
.soundbars i:nth-child(1){height:5px;animation-delay:-.2s;}
.soundbars i:nth-child(2){height:10px;animation-delay:-.55s;}
.soundbars i:nth-child(3){height:7px;animation-delay:-.8s;}
.soundbars i:nth-child(4){height:12px;animation-delay:-.35s;}
@keyframes soundwave{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
.start-ring{position:absolute;right:78px;top:170px;width:530px;height:530px;border-radius:50%;border:1px solid rgba(151,171,235,.10);opacity:.85;}
.start-ring::before,.start-ring::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(151,171,235,.08);}
.start-ring::before{inset:77px;}
.start-ring::after{inset:160px;border-color:rgba(116,231,243,.12);}
.start-ring .sat{position:absolute;left:50%;top:50%;width:580px;height:580px;margin:-290px 0 0 -290px;border-radius:50%;border:1px dashed rgba(157,140,255,.10);animation:rotateSlow 36s linear infinite;}
.start-ring .sat::before{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--violet);box-shadow:0 0 18px rgba(157,140,255,.9);}
@keyframes rotateSlow{to{transform:rotate(360deg);}}
.start-ring .core{
  position:absolute;left:50%;top:50%;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,rgba(205,252,255,.88),rgba(116,231,243,.28) 28%,rgba(157,140,255,.10) 65%,transparent 72%);
  filter:blur(.3px);box-shadow:0 0 70px rgba(116,231,243,.22);
}

.stage-paused .caret,
.stage-paused .weights-card::after,
.stage-paused .stream-chip i,
.stage-paused .editor-body::after{animation-play-state:paused;}
.stage-paused .aurora{animation-play-state:paused;}

@media (max-width:900px){
  #stage{border-radius:0;}
}