:root{--red:#E63946;--navy:#14213D;--yellow:#FFD166;--blue:#4CC9F0;--mint:#80ED99;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;color:var(--white);cursor:none}
body.show-cursor{cursor:default}
#stage{position:fixed;inset:0;display:grid;place-items:center;background:#000}
#frame{position:relative;width:min(100vw,calc(100vh*16/9));height:min(100vh,calc(100vw*9/16));overflow:hidden;background:#000;container-type:inline-size}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#fade{position:absolute;inset:0;background:#000;opacity:1;pointer-events:none;transition:opacity .9s ease}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(10,15,40,.38) 100%)}
#bars{position:absolute;inset:0;pointer-events:none}
#bars::before,#bars::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.2s ease}
#bars::before{top:0}#bars::after{bottom:0}
#bars.on::before,#bars.on::after{height:5.2%}

/* overlays */
.ov{position:absolute;pointer-events:none;opacity:0;transform:translateY(2cqw);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1.2)}
.ov.in{opacity:1;transform:none}
#lower{left:4cqw;bottom:7.5cqw;display:flex;flex-direction:column;gap:.9cqw;align-items:flex-start}
#lower .chip{background:rgba(20,33,61,.88);border:.3cqw solid var(--yellow);color:var(--white);border-radius:99px;padding:.7cqw 2.2cqw;font-weight:700;font-size:1.9cqw;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 .5cqw 0 rgba(0,0,0,.35)}
#lower .chip.r{background:var(--red);border-color:var(--white)}
#lower .chip.y{background:var(--yellow);color:var(--navy);border-color:var(--navy)}
#call999{right:4cqw;top:6.5cqw;display:flex;flex-direction:column;gap:.9cqw;align-items:flex-end}
#call999 .big{background:var(--red);border:.4cqw solid var(--white);border-radius:2cqw;padding:.6cqw 3cqw;font-weight:700;font-size:5.6cqw;line-height:1;box-shadow:0 .7cqw 0 var(--navy)}
#call999 .chip{background:rgba(20,33,61,.9);border:.3cqw solid var(--yellow);border-radius:99px;padding:.6cqw 2cqw;font-weight:700;font-size:1.7cqw;letter-spacing:.04em;text-transform:uppercase}
#call999.in .big{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
#aedbox{left:50%;top:6.5cqw;transform:translateX(-50%) translateY(2cqw);text-align:center}
#aedbox.in{transform:translateX(-50%)}
#aedbox .scr{background:#0b1730;color:var(--mint);border:.4cqw solid var(--yellow);border-radius:1.6cqw;padding:1cqw 3cqw;font:600 2.3cqw/1.3 ui-monospace,Menlo,Consolas,monospace;min-width:34cqw;box-shadow:0 .6cqw 0 rgba(0,0,0,.4)}
#aedbox .tag{display:inline-block;margin-bottom:.8cqw;background:var(--yellow);color:var(--navy);border-radius:99px;padding:.3cqw 1.6cqw;font-weight:700;font-size:1.4cqw;letter-spacing:.08em}
#cpm{right:4cqw;bottom:7.5cqw;text-align:center;background:rgba(20,33,61,.88);border:.3cqw solid var(--mint);border-radius:2cqw;padding:1cqw 2.2cqw}
#cpm b{display:block;font-size:4cqw;line-height:1;color:var(--mint)}
#cpm span{font-size:1.2cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#subs{left:50%;bottom:2.6cqw;transform:translateX(-50%) translateY(1cqw);width:76cqw;text-align:center;font-weight:600;font-size:2cqw;line-height:1.3;text-shadow:0 .2cqw .6cqw rgba(0,0,0,.8)}
#subs.in{transform:translateX(-50%)}
#speech{left:50%;top:50%;font-weight:700;font-size:2.4cqw;background:#fff;color:var(--navy);border:.35cqw solid var(--navy);border-radius:2.4cqw;padding:.8cqw 2.2cqw;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 .5cqw 0 var(--navy)}
#speech.in{transform:translate(-50%,-50%)}

/* title cards */
#cards{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;text-align:center;padding:0 6cqw}
.card{position:absolute;opacity:0;transform:scale(.94);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.9,.25,1.1);max-width:84cqw}
.card.in{opacity:1;transform:none}
.card h1{font-size:9.2cqw;line-height:1;font-weight:700;letter-spacing:-.01em;text-shadow:0 .5cqw 0 var(--navy),0 1.2cqw 2.4cqw rgba(0,0,0,.35)}
.card h1 .a{color:var(--red);display:block}
.card h1 .b{color:var(--navy);display:block;-webkit-text-stroke:0;text-shadow:0 .5cqw 0 rgba(255,255,255,.55)}
.card h2{font-size:3.4cqw;line-height:1.2;font-weight:700;color:var(--navy);text-shadow:0 .2cqw 0 rgba(255,255,255,.6)}
.card p{font-size:2.4cqw;font-weight:600;color:var(--navy);margin-top:1.6cqw}
.card .url{display:inline-block;margin-top:2cqw;background:var(--navy);color:var(--yellow);border-radius:99px;padding:.8cqw 3.2cqw;font-size:2.6cqw;font-weight:700;border:.35cqw solid var(--yellow)}
.card.dark h2,.card.dark p{color:var(--white);text-shadow:0 .2cqw .6cqw rgba(0,0,0,.6)}
.card.end{background:rgba(255,209,102,.94);border:.5cqw solid var(--navy);border-radius:4cqw;padding:3cqw 5cqw;box-shadow:0 1cqw 0 var(--navy)}
#intro{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c3361,#0a1226);text-align:center;transition:opacity .8s}
#intro.gone{opacity:0;pointer-events:none}
#intro h1{font-size:7cqw;line-height:1.05;color:var(--yellow)}
#intro p{font-size:2.2cqw;margin-top:1.4cqw;opacity:.85}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#0a1226;color:#fff;z-index:50;font-size:1.6rem;text-align:center;padding:2rem}
#loading.gone{display:none}
#err{position:fixed;inset:0;display:none;place-items:center;background:#0a1226;color:#fff;z-index:60;text-align:center;padding:2rem;font-size:1.2rem;line-height:1.5}
#err.on{display:grid}
#err code{background:#1d2d52;padding:.1em .4em;border-radius:6px}
#hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(20,33,61,.85);color:#fff;font-size:13px;padding:6px 14px;border-radius:99px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:40}
body.show-cursor #hint{opacity:.9}
body.rec #hint{display:none}
@media (prefers-reduced-motion:reduce){#call999.in .big{animation:none}}