:root{
  --navy-deep:#181454;
  --navy:#231C7C;
  --navy-glow:#3A2FB0;
  --orange:#F5821F;
  --pink:#EC1E79;
  --yellow:#FFD23F;
  --cream:#FFF4E3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0B0930;font-family:'Segoe UI',Tahoma,sans-serif;}
.app{display:flex;flex-direction:column;align-items:center;padding:24px 12px 60px;min-height:100vh;}
.controls{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;justify-content:center;}
.controls button{
  background:var(--orange);color:#fff;border:none;border-radius:999px;
  padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;
}
.controls button.secondary{background:transparent;border:1px solid #6a63c9;color:#c9c4ff;}
.controls label{color:#c9c4ff;font-size:13px;display:flex;align-items:center;gap:6px;}
#timecode{color:#8f89d6;font-size:13px;min-width:120px;text-align:center;}

.stage-wrap{width:100%;max-width:960px;}
.stage{
  position:relative;width:100%;aspect-ratio:16/9;
  background:radial-gradient(ellipse at 50% 40%, var(--navy-glow) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none;}
.scene.active{opacity:1;}

.brandmark{position:absolute;top:5%;right:5%;font-size:2.2vw;color:var(--yellow);opacity:.85;letter-spacing:1px;}

.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.particles span{position:absolute;border-radius:2px;opacity:0;}
.p-live .particles span{animation:drift 6s ease-in-out infinite;}
@keyframes drift{
  0%{opacity:0;transform:translateY(0) scale(.6);}
  20%{opacity:.8;}
  80%{opacity:.5;}
  100%{opacity:0;transform:translateY(-40px) scale(1);}
}

.studio-mic{width:5%;aspect-ratio:1/2.4;background:linear-gradient(180deg,#2A2470,#150F4A);
  border:2px solid var(--yellow);border-radius:40% 40% 20% 20%;margin-bottom:2vw;
  box-shadow:0 0 30px rgba(255,210,63,.25);}
.kicker{color:#B9B4EC;font-size:1.6vw;letter-spacing:.5px;margin-bottom:.6vw;}
.program-name{color:var(--cream);font-size:2.6vw;font-weight:700;margin-bottom:1.2vw;}
.curiosity-line{color:var(--yellow);font-size:2.1vw;font-weight:700;opacity:0;transform:translateY(10px);
  transition:opacity 1.2s ease, transform 1.2s ease;}
.curiosity-line.show{opacity:1;transform:translateY(0);}

.spark-icon{width:9vw;height:9vw;margin-bottom:1vw;filter:drop-shadow(0 0 18px rgba(245,130,31,.55));
  animation:pulseGlow 3.2s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(245,130,31,.4));}50%{filter:drop-shadow(0 0 28px rgba(236,30,121,.6));}}
.sharara-word{font-size:6.5vw;font-weight:800;color:var(--yellow);
  -webkit-text-stroke:1px var(--orange);text-shadow:0 0 24px rgba(245,130,31,.5);}

.flame{width:6vw;height:8vw;opacity:0;transform:scale(.6);transition:opacity 1s ease, transform 1s ease;position:absolute;top:14%;}
.flame.show{opacity:1;transform:scale(1);}
.flame.hide{opacity:0;transform:scale(.4);}
.subtext{color:#D8D4FF;font-size:1.7vw;margin-top:1.2vw;}

.word-row{display:flex;gap:3vw;flex-wrap:wrap;justify-content:center;max-width:80%;}
.word-chip{font-size:2.3vw;font-weight:700;color:var(--cream);opacity:0;transform:translateY(14px);
  transition:opacity .9s ease, transform .9s ease;}
.word-chip.show{opacity:1;transform:translateY(0);}
.word-chip .dot{color:var(--orange);}

.energy-label{font-size:2vw;color:#C9C4FF;text-align:center;}

.squad-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
  gap:1.4vw;padding:0 6vw;}
.squad-grid .slot:nth-child(9){grid-column:3;}
.slot{width:6.4vw;height:6.4vw;border-radius:50%;border:2px dashed var(--yellow);opacity:.85;
  display:flex;align-items:center;justify-content:center;color:#9d97e6;font-size:1vw;}
.squad-caption{margin-top:1.4vw;color:var(--cream);font-size:1.6vw;}
.nine-badge{position:absolute;font-size:9vw;font-weight:800;color:var(--pink);opacity:0;
  text-shadow:0 0 30px rgba(236,30,121,.6);transition:opacity 1s ease, transform 1s ease;transform:scale(.7);}
.nine-badge.show{opacity:.18;transform:scale(1);}

.quiet-line{color:#B9B4EC;font-size:1.8vw;}

.outro-word{font-size:7.5vw;font-weight:800;color:var(--yellow);text-shadow:0 0 36px rgba(245,130,31,.7);}
.fire-emoji{font-size:4vw;}

.placeholder-frame{position:absolute;inset:4%;border:2px dashed #6a63c9;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6vw;}
.placeholder-frame span{color:#8f89d6;font-size:1.5vw;}
.placeholder-frame strong{color:#B9B4EC;font-size:1.8vw;}
.placeholder-frame em{color:#5a54a6;font-size:1.1vw;font-style:normal;}

.scene-tag{position:absolute;bottom:10px;left:10px;color:#5a54a6;font-size:.75vw;}

.timeline{width:100%;max-width:960px;height:6px;background:#231C7C;border-radius:4px;margin-top:16px;position:relative;overflow:hidden;}
.timeline-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--pink));width:0%;}
.marks{display:flex;justify-content:space-between;width:100%;max-width:960px;margin-top:6px;}
.marks span{color:#5a54a6;font-size:10px;}

.legend{color:#6a63c9;font-size:12px;margin-top:18px;text-align:center;max-width:620px;line-height:1.7;}