:root{color-scheme:dark;--ink:#fbf9ff;--muted:#bdb7cd;--violet:#9b87f5;--cyan:#52d7e8;--red:#ff244f;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;background:#030205;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif;overflow:hidden}
.stage{width:min(100vw,177.7778svh);height:min(100svh,56.25vw);min-height:0;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 20%,rgba(82,215,232,.12),transparent 28rem),radial-gradient(circle at 16% 80%,rgba(118,87,238,.25),transparent 34rem),#090711;box-shadow:0 0 90px #000;user-select:none}
.stage.cinematic{background-image:linear-gradient(90deg,rgba(6,4,12,.7),rgba(6,4,12,.15)),url('/webinar-stage-v1.png');background-size:cover;background-position:center}
.stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.013) 4px)}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;filter:drop-shadow(0 0 4px #ff244f) drop-shadow(0 0 9px rgba(255,20,70,.8))}
.hud,.controls{z-index:5;display:flex;align-items:center;gap:20px;padding:clamp(10px,2vh,21px) clamp(16px,4vw,66px)}
.mark{color:inherit;text-decoration:none;font-weight:900;letter-spacing:-.04em;white-space:nowrap}.mark span{color:var(--violet)}
.progress{height:2px;background:var(--line);flex:1}.progress i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .55s ease}.hud>span{font-size:.7rem;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
.fullscreen{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(0,0,0,.32);color:#fff;cursor:pointer;font-size:1rem}
.presenter-phone{color:var(--cyan);font-size:clamp(.62rem,.8vw,.78rem);font-weight:800;text-decoration:none;white-space:nowrap}
.scene{z-index:2;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,23%);align-items:center;gap:5%;padding:1vh clamp(24px,7vw,112px);isolation:isolate;min-height:0}
.scene-copy{max-width:920px}.kicker{text-transform:uppercase;letter-spacing:.23em;color:var(--cyan);font-weight:850;font-size:clamp(.56rem,.8vw,.72rem);margin:0 0 1.7vh}.scene h1{font-size:clamp(2.2rem,5.9vw,6.6rem);line-height:.88;letter-spacing:-.072em;margin:0;max-width:1000px;text-wrap:balance}.body{max-width:720px;color:var(--muted);font-size:clamp(.82rem,1.45vw,1.28rem);margin:2.5vh 0 0}.signal{width:min(22vw,290px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-align:center;padding:28px;font-weight:900;font-size:clamp(.8rem,1.7vw,1.45rem);background:radial-gradient(circle,rgba(155,135,245,.25),rgba(255,255,255,.025) 58%,transparent 59%);box-shadow:0 0 90px rgba(118,87,238,.22);animation:pulse 4s ease-in-out infinite}
.choices{display:flex;gap:10px;flex-wrap:wrap;margin-top:2.8vh}.choices button,.controls button{color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;padding:clamp(9px,1.2vh,14px) clamp(14px,1.8vw,20px);font:inherit;font-size:clamp(.72rem,1vw,1rem);font-weight:800;cursor:pointer}.choices button:hover,.choices button:focus,.controls button:hover{border-color:var(--cyan);background:rgba(82,215,232,.12)}.choices button:first-child{background:linear-gradient(135deg,#8268f0,#5c3fd3);border-color:transparent}
.controls{justify-content:space-between;background:linear-gradient(0deg,rgba(3,2,7,.74),transparent);padding-bottom:max(12px,env(safe-area-inset-bottom))}.controls p{margin:0;color:var(--muted);font-size:clamp(.58rem,.85vw,.76rem)}.controls button:disabled{opacity:.3;cursor:not-allowed}.ink-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);margin-right:7px}
.ambient b{position:absolute;border-radius:50%;filter:blur(1px);background:var(--violet);opacity:.3;animation:float 7s ease-in-out infinite}.ambient b:nth-child(1){width:8px;height:8px;left:8%;top:20%}.ambient b:nth-child(2){width:5px;height:5px;right:12%;bottom:15%;animation-delay:-2s}.ambient b:nth-child(3){width:12px;height:12px;left:50%;bottom:8%;animation-delay:-4s}
@keyframes pulse{50%{transform:scale(1.035);box-shadow:0 0 120px rgba(82,215,232,.22)}}@keyframes float{50%{transform:translate(30px,-28px);opacity:.65}}
@media(max-width:760px),(max-aspect-ratio:4/3){.scene{grid-template-columns:1fr;padding-inline:8vw}.signal{position:absolute;right:-35px;top:8%;width:150px;opacity:.32}.scene h1{font-size:clamp(2rem,8.5vw,4.2rem)}.body{font-size:clamp(.72rem,2vw,1rem)}.controls p{display:none}.controls span{display:none}.mark span{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}