html, body { width:100%; height:100%; overflow:hidden; background:#08090a; }
.stage { width:100vw; height:100vh; height:100svh; position:relative; overflow:hidden; isolation:isolate; }
.stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 18%, rgba(199,255,69,.12), transparent 31%), linear-gradient(135deg,#101214 0%,#08090a 63%); z-index:-2; }
.stage::after { content:""; position:absolute; width:47vw; aspect-ratio:1; right:-19vw; bottom:-23vw; border:1px solid rgba(246,242,233,.12); border-radius:50%; box-shadow:0 0 0 7vw rgba(246,242,233,.018),0 0 0 14vw rgba(246,242,233,.012); z-index:-1; }
.scene { height:100%; padding:clamp(70px,8vh,110px) clamp(72px,8vw,150px); display:grid; align-content:center; animation:scene-in .55s cubic-bezier(.2,.8,.2,1); }
.scene-eyebrow { position:absolute; top:clamp(36px,5vh,60px); left:clamp(72px,8vw,150px); color:var(--lime); font-weight:850; font-size:clamp(14px,1.25vw,21px); letter-spacing:.16em; text-transform:uppercase; }
.scene-count { position:absolute; top:clamp(36px,5vh,60px); right:clamp(72px,8vw,150px); color:rgba(246,242,233,.45); font-variant-numeric:tabular-nums; font-weight:700; font-size:clamp(14px,1.1vw,18px); }
.headline { white-space:pre-line; max-width:12ch; font-size:clamp(76px,10.5vw,182px); line-height:.82; letter-spacing:-.075em; margin:0; font-weight:900; text-transform:uppercase; text-wrap:balance; }
.accent-line { margin-top:clamp(24px,4vh,55px); color:var(--lime); font-size:clamp(28px,3.4vw,60px); line-height:1.02; max-width:23ch; font-weight:850; letter-spacing:-.035em; text-transform:uppercase; }
.subhead { margin-top:30px; font-size:clamp(22px,2.2vw,38px); color:var(--muted); }
.choices,.steps { display:grid; gap:clamp(10px,1.6vh,24px); margin-top:clamp(28px,5vh,62px); max-width:1200px; }
.choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.choice,.step { min-height:clamp(72px,10vh,126px); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,2.4vw,38px); display:flex; align-items:center; font-size:clamp(20px,2.1vw,38px); font-weight:850; letter-spacing:-.03em; background:rgba(255,255,255,.035); opacity:.12; transform:translateY(18px); transition:opacity .45s ease,transform .45s ease,background .45s ease,border-color .45s ease; }
.choice.is-revealed,.step.is-revealed { opacity:1; transform:none; }
.choice.is-current,.step.is-current { background:var(--lime); color:var(--coal); border-color:var(--lime); }
.steps.loop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.steps.brief-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.brief-grid .step { display:grid; gap:14px; align-content:center; }
.step-letter { font-size:clamp(44px,5vw,76px); line-height:1; color:var(--lime); }
.step.is-current .step-letter { color:var(--coal); }
.steps.label-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.label-grid .step:nth-child(1).is-revealed { border-color:var(--blue); }
.label-grid .step:nth-child(2).is-revealed { border-color:var(--lime); }
.label-grid .step:nth-child(3).is-revealed { border-color:var(--orange); }
.label-grid .step:nth-child(4).is-revealed { background:var(--ink); color:var(--coal); }
.scene-extract { grid-template-columns:minmax(0,1fr) minmax(520px,.92fr); gap:clamp(44px,6vw,110px); align-items:center; }
.scene-extract .headline { max-width:12ch; font-size:clamp(72px,5.8vw,106px); }
.scene-extract .steps { margin-top:0; width:100%; }
.scene-extract .step { min-height:clamp(76px,8.5vh,94px); padding:clamp(18px,1.7vw,28px); font-size:clamp(20px,1.8vw,30px); }
.matrix { margin-top:5vh; display:grid; grid-template-columns:130px repeat(2,minmax(240px,1fr)); grid-template-rows:80px repeat(2,minmax(130px,1fr)); max-width:1200px; }
.axis { display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:800; letter-spacing:.05em; text-align:center; opacity:.12; transition:opacity .4s ease; }
.axis.is-revealed { opacity:1; }
.matrix-cell { margin:5px; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:clamp(18px,1.8vw,30px); font-weight:850; text-align:center; background:rgba(255,255,255,.03); }
.matrix-cell.slow { background:rgba(255,113,70,.13); color:#ffb09a; }
.matrix-cell.move { background:rgba(199,255,69,.1); color:var(--lime); }
.question-stack { margin-top:5vh; display:grid; gap:12px; max-width:1100px; }
.question-card { padding:24px 30px; border-left:5px solid var(--lime); background:rgba(255,255,255,.045); font-size:clamp(25px,2.5vw,45px); font-weight:800; opacity:.12; transform:translateX(-20px); transition:.45s ease; }
.question-card.is-revealed { opacity:1; transform:none; }
.projection-chrome { position:fixed; bottom:30px; left:clamp(38px,4vw,72px); right:clamp(38px,4vw,72px); display:flex; justify-content:space-between; align-items:center; color:rgba(246,242,233,.45); z-index:5; }
.projection-chrome .brand-mark { font-size:10px; }
.progress { width:180px; height:2px; background:rgba(246,242,233,.16); position:relative; overflow:hidden; }
.progress::after { content:""; display:block; width:var(--progress,0%); height:100%; background:var(--lime); transition:width .4s ease; }
.connection { position:fixed; bottom:56px; left:50%; transform:translateX(-50%); background:#24272a; border:1px solid var(--line); padding:7px 12px; border-radius:999px; font-size:11px; color:var(--muted); z-index:9; opacity:0; transition:opacity .25s; pointer-events:none; }
.connection.show { opacity:1; }
.fullscreen { position:fixed; right:18px; bottom:18px; width:42px; height:42px; border:1px solid transparent; border-radius:50%; background:transparent; color:rgba(246,242,233,.22); cursor:pointer; z-index:8; font-size:21px; }
.fullscreen:hover,.fullscreen:focus-visible { color:var(--ink); border-color:var(--line); background:rgba(0,0,0,.35); }
body.preview .projection-chrome,body.preview .fullscreen,body.preview .connection { display:none; }
@keyframes scene-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media (max-aspect-ratio:4/3) { .headline{font-size:clamp(64px,9.2vw,128px)} .scene{padding-left:7vw;padding-right:7vw}.scene-eyebrow{left:7vw}.scene-count{right:7vw}.choices{grid-template-columns:1fr}.choice{min-height:70px}.steps.brief-grid{grid-template-columns:repeat(3,1fr)}.scene-extract{grid-template-columns:1fr;gap:20px}.scene-extract .headline{font-size:clamp(54px,7.5vw,92px)}.scene-extract .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-extract .step{min-height:64px} }