/* AI Stream Online TV mode: a wall-screen view that rotates scenes and types out what the data says. */
:root{--ink:#E8DDBF;--soft:#C6BADD;--faint:rgba(243,232,200,.55);--gold:#E6CE8E;--blue:#7ea6d8;--coral:#e0858a;--mint:#7fbca2;--lilac:#a898d4;--amber:#e0a05e;--up:#E6CE8E;--down:#7FA6E6}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0d0719}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink)}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
 background:radial-gradient(1500px 700px at 50% -10%,#2a1f5a 0%,#140C26 60%,#0d0719 100%)}
.f{font-family:'Fredoka',sans-serif}
/* living background: two slow light fields and a thin grid that drifts */
.aur{position:absolute;inset:-200px;pointer-events:none;opacity:.55}
.aur i{position:absolute;border-radius:50%;animation:drift 26s ease-in-out infinite alternate}
.aur i:nth-child(1){left:8%;top:30%;width:900px;height:620px;background:radial-gradient(closest-side,rgba(126,166,216,.55),transparent)}
.aur i:nth-child(2){right:4%;top:45%;width:820px;height:600px;background:radial-gradient(closest-side,rgba(168,152,212,.5),transparent);animation-duration:32s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate(160px,-90px) scale(1.18)}}
.grid{position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(233,217,168,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(233,217,168,.12) 1px,transparent 1px);background-size:120px 120px;animation:gridmove 40s linear infinite;
 -webkit-mask-image:linear-gradient(#000 0,transparent 70%);mask-image:linear-gradient(#000 0,transparent 70%)}
@keyframes gridmove{to{background-position:120px 120px}}
.scan{position:absolute;left:0;right:0;height:240px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(233,217,168,.045),transparent);animation:scan 9s linear infinite}
@keyframes scan{from{top:-260px}to{top:1100px}}
/* top bar */
#top{position:absolute;left:60px;right:60px;top:34px;height:60px;display:flex;align-items:center;gap:26px;z-index:5}
.brand{font:700 34px 'Fredoka';letter-spacing:.06em}.brand b{color:var(--gold)}
.live{display:flex;align-items:center;gap:10px;font:800 15px 'Plus Jakarta Sans';letter-spacing:.2em;color:#f09a8c;padding:8px 16px;border:1px solid rgba(240,154,140,.5);border-radius:6px}
.live:before{content:"";width:10px;height:10px;background:#f09a8c;box-shadow:0 0 6px rgba(240,154,140,.5);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
#tabs{display:flex;gap:10px;margin-left:auto}
#tabs span{width:46px;height:6px;border-radius:3px;background:rgba(233,217,168,.2);overflow:hidden;position:relative}
#tabs span.on{background:rgba(233,217,168,.3)}
#tabs span.on:after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;animation:fill var(--dur) linear forwards;box-shadow:0 0 5px color-mix(in srgb,var(--gold) 45%,transparent)}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#clock{font:600 28px 'Fredoka';color:var(--soft);min-width:130px;text-align:right}
/* scenes */
#scenes{position:absolute;left:60px;right:60px;top:120px;bottom:290px}
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(60px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.scene.in{opacity:1;transform:none;pointer-events:auto}
.scene.out{opacity:0;transform:translateX(-60px)}
.ttl{font:800 17px 'Plus Jakarta Sans';letter-spacing:.3em;text-transform:uppercase;color:var(--a,var(--gold));display:flex;align-items:center;gap:16px;margin-bottom:22px}
.ttl:before{content:"";width:12px;height:12px;background:var(--a,var(--gold));transform:rotate(45deg);box-shadow:0 0 6px color-mix(in srgb,var(--a,var(--gold)) 45%,transparent)}
.ttl:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--a,var(--gold)) 60%,transparent),transparent)}
.panel{position:relative;min-width:0;border:1px solid color-mix(in srgb,var(--a,var(--gold)) 38%,transparent);border-radius:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--a,var(--gold)) 8%,rgba(21,13,43,.85)),rgba(18,10,38,.9));box-shadow:inset 0 0 70px color-mix(in srgb,var(--a,var(--gold)) 7%,transparent)}
.panel:before,.panel:after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--a,var(--gold))}
.panel:before{top:-2px;left:-2px;border-right:0;border-bottom:0}.panel:after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.big{font-family:'Fredoka';font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--down)}.fl{color:var(--soft)}
/* reveal helpers: every element with .r appears when its scene is active, in the order of --i */
.scene .r{opacity:0;transform:translateY(34px)}
.scene.in .r{animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.16s + .25s)}
@keyframes rise{to{opacity:1;transform:none}}
.scene .w{display:inline-block;opacity:0;transform:translateY(24px) scale(.96)}
.scene.in .w{animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.07s + .3s)}
.scene .grow{transform:scaleX(0);transform-origin:0 50%}
.scene.in .grow{animation:growx 1.3s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.14s + .5s)}
@keyframes growx{to{transform:scaleX(1)}}
.scene .growy{transform:scaleY(0)}
.scene.in .growy{animation:growy 1.2s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.16s + .5s)}
@keyframes growy{to{transform:scaleY(1)}}
.glow{filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 40%,transparent))}
/* lower third: what the data says, typed out */
#lower{position:absolute;left:60px;right:60px;bottom:120px;height:140px;display:flex;align-items:stretch;z-index:5}
#chip{flex:none;width:300px;display:flex;flex-direction:column;justify-content:center;padding:0 26px;background:linear-gradient(135deg,var(--a,var(--gold)),color-mix(in srgb,var(--a,var(--gold)) 60%,#140C26));color:#140C26;clip-path:polygon(0 0,100% 0,calc(100% - 28px) 100%,0 100%)}
#chip small{font:800 13px 'Plus Jakarta Sans';letter-spacing:.24em;text-transform:uppercase;opacity:.75}
#chip b{font:700 34px 'Fredoka';line-height:1.05;margin-top:6px}
#cap{flex:1;display:flex;align-items:center;padding:0 34px 0 40px;background:linear-gradient(90deg,rgba(21,13,43,.92),rgba(21,13,43,.7));border:1px solid rgba(233,217,168,.18);border-left:0;font:600 34px/1.28 'Plus Jakarta Sans';color:var(--ink)}
#cap em{font-style:normal;color:var(--gold);font-weight:800}
#cap .cur{display:inline-block;width:14px;height:34px;margin-left:6px;background:var(--gold);vertical-align:-5px;animation:blink .8s steps(1) infinite}
/* bottom ticker and progress */
#ticker{position:absolute;left:0;right:0;bottom:0;height:84px;background:linear-gradient(180deg,rgba(13,7,25,.0),rgba(13,7,25,.95) 30%);border-top:1px solid rgba(233,217,168,.16);display:flex;align-items:center;overflow:hidden;z-index:5}
#tlab{flex:none;height:100%;display:grid;place-items:center;padding:0 38px;font:800 18px 'Plus Jakarta Sans';letter-spacing:.24em;color:#140C26;background:var(--gold);clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%);z-index:2}
#tr{white-space:nowrap;font:600 27px 'Plus Jakarta Sans';color:var(--soft);animation:crawl var(--tr,200s) linear infinite;padding-left:60px}
#tr span{margin-right:70px}#tr span:before{content:"";display:inline-block;width:11px;height:11px;background:var(--gold);transform:rotate(45deg);margin-right:26px;vertical-align:1px;box-shadow:0 0 4px color-mix(in srgb,var(--gold) 45%,transparent)}
@keyframes crawl{to{transform:translateX(-50%)}}
#prog{position:absolute;left:0;bottom:0;height:5px;width:100%;background:rgba(233,217,168,.1);z-index:6}
#prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#F3E8C8);box-shadow:0 0 6px color-mix(in srgb,var(--gold) 45%,transparent);transform-origin:0 50%;animation:fill var(--dur) linear forwards}
.note{position:absolute;left:60px;bottom:96px;max-width:1300px;font:600 14px 'Plus Jakarta Sans';color:var(--faint);z-index:6}
.hint{position:absolute;right:60px;bottom:96px;font:600 14px 'Plus Jakarta Sans';color:var(--faint);z-index:6;opacity:0;transition:opacity .3s}
body:hover .hint{opacity:1}
@media (prefers-reduced-motion:reduce){.aur i,.grid,.scan,#tr{animation:none}}
/* small or touch screens: no drifting background, the data and caption stay animated */
@media (max-width:1100px),(pointer:coarse){.aur,.scan{display:none}.grid{animation:none}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs{display:flex;align-items:center;gap:0;border:1px solid rgba(233,217,168,.35);border-radius:8px;overflow:hidden}
.vs b{font:800 13px 'Plus Jakarta Sans';letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding:0 16px}
.vs a{font:700 18px 'Plus Jakarta Sans';color:var(--soft);padding:12px 22px;text-decoration:none;border-left:1px solid rgba(233,217,168,.2)}
.vs a:hover{color:var(--ink);background:rgba(233,217,168,.08)}
.vs a.on{background:var(--gold);color:#140C26}
#fs{font:700 16px 'Plus Jakarta Sans';color:var(--soft);background:none;border:1px solid rgba(233,217,168,.35);border-radius:8px;padding:11px 18px;cursor:pointer}
#fs.on{background:var(--gold);color:#140C26;border-color:var(--gold)}
#fs:hover{color:var(--ink);background:rgba(233,217,168,.08)}
.vs a:focus-visible,#fs:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
 .scene{transition:none;filter:none}
 .scene .r,.scene .w{opacity:1;transform:none;animation:none!important}
 .scene .grow,.scene .growy{transform:none;animation:none!important}
 #tabs span.on:after,#prog i{animation:none;transform:none}
 .live:before{animation:none}
}