:root{
  --bg:#07090f; --ink:#eef1fa; --mut:#9aa6c8;
  --green:#5fd4a0; --green2:#2f8f63; --amber:#ffb05f; --red:#ff4d5e; --navy:#0e1430; --plate:#101a3a;
  --pixel:"Press Start 2P",ui-monospace,monospace; --crt:"VT323",ui-monospace,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{ --bg:#e9ece4; --ink:#14181f; --mut:#4c566a; color-scheme:light; }
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --bg:#e9ece4; --ink:#14181f; --mut:#4c566a; color-scheme:light; } }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden}
body{font:16px/1.4 system-ui,sans-serif;min-height:100vh;display:grid;place-items:center}
.below{display:none}
.wrap{width:min(1280px,100%);padding:16px}
.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:6px;container-type:inline-size;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}

/* broadcast chrome: always light-on-dark, it sits on the picture */
.bug{position:absolute;top:3cqw;right:3cqw;display:flex;gap:1.2cqw;align-items:center;font:1.15cqw/1 var(--pixel);color:#fff;text-shadow:0 .2cqw 0 #000}
.live{display:flex;align-items:center;gap:.6cqw;background:var(--red);padding:.6cqw .8cqw;border-radius:.3cqw}
.live i{width:.8cqw;height:.8cqw;border-radius:50%;background:#fff;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.showname{position:absolute;top:3cqw;left:3cqw;font:1.15cqw/1 var(--pixel);color:var(--green);background:rgba(7,10,20,.75);padding:.7cqw .9cqw;border:.2cqw solid var(--green2);letter-spacing:.1cqw}

.lower{position:absolute;left:3cqw;bottom:6.6cqw;max-width:60cqw;display:grid;gap:.3cqw;animation:slide .35s steps(6)}
@keyframes slide{from{transform:translateX(-4cqw);opacity:0}}
.plate{display:flex;align-items:baseline;gap:1.2cqw;background:var(--green);color:#06120c;padding:.8cqw 1.2cqw;font-family:var(--pixel)}
.plate b{font-size:1.35cqw;font-weight:400}
.plate span{font-size:.95cqw;opacity:.75}
.fresh{margin-left:auto;align-self:center;font:normal .85cqw/1 var(--pixel);padding:.35cqw .55cqw;background:#06120c;color:#c9d3e6}
.fresh.new{background:var(--amber);color:#1a0e00}
.fresh[hidden]{display:none}
.chyron{background:var(--plate);color:#fff;padding:.7cqw 1.2cqw;font:2.1cqw/1.1 var(--crt);border-left:.5cqw solid var(--amber)}

.caption{position:absolute;left:50%;transform:translateX(-50%);bottom:15.2cqw;width:min(74cqw,92%);max-height:6.2cqw;overflow:hidden;margin:0;padding:.5cqw 1.2cqw;text-align:center;font:2.4cqw/1.15 var(--crt);color:#fff;background:rgba(5,7,15,.72);text-shadow:0 .2cqw 0 #000}
.caption:empty{display:none}
.credit{position:absolute;right:3cqw;bottom:6.6cqw;max-width:33cqw;font:1.55cqw/1.1 var(--crt);color:var(--mut);background:rgba(7,10,20,.78);padding:.5cqw .8cqw;border-right:.4cqw solid var(--green2);text-align:right}
.credit a{color:#cfe8dc;text-decoration:none}
.credit a:hover{text-decoration:underline}

.ticker{position:absolute;left:0;right:0;bottom:0;height:5.4cqw;display:flex;align-items:stretch;background:#0a0f22;border-top:.25cqw solid var(--green2)}
.tlabel{display:grid;place-items:center;padding:0 1.6cqw;background:var(--amber);color:#1a0e00;font:1.05cqw/1 var(--pixel);white-space:nowrap}
.tclip{position:relative;flex:1;overflow:hidden}
.ttrack{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font:2.3cqw/1 var(--crt);color:#e6edff;animation:crawl 40s linear infinite;padding-left:100%}
.ttrack b{color:var(--green);font-weight:400}
.ttrack i{font-style:normal;color:var(--mut);margin:0 2cqw}
@keyframes crawl{to{transform:translate(-100%,-50%)}}

.standby{position:absolute;inset:0 0 5.4cqw;display:grid;place-content:center;gap:2cqw;text-align:center;background:radial-gradient(60% 60% at 50% 45%,#13204a,#05070f);color:#fff}
.standby b{font:6cqw/1 var(--pixel);color:var(--green);text-shadow:0 0 2cqw rgba(95,212,160,.6)}
.standby span{font:2.4cqw/1.2 var(--crt);color:var(--mut)}
.standby[hidden]{display:none}

.sound{position:absolute;top:8cqw;right:3cqw;font:1cqw/1 var(--pixel);color:#fff;background:rgba(7,10,20,.85);border:.2cqw solid var(--green);padding:1cqw 1.2cqw;cursor:pointer}
.sound:hover{background:var(--green2)}
.sound.on{border-color:var(--mut);color:var(--mut)}

.edition{margin:12px 2px 0;font:18px/1.2 var(--crt);color:var(--mut)}
.edition:empty{display:none}
.foot{margin:14px 2px 0;font-size:13px;color:var(--mut);max-width:80ch}

@media (max-width:640px){
  body{place-items:start center}
  .wrap{padding:16px}
  .stage .caption,.stage .credit{display:none!important}
  .below{display:block;margin-top:10px;min-height:7em}
  .below p{margin:0;font:24px/1.15 var(--crt);color:var(--ink)}
  .below small{display:block;margin-top:6px;font:18px/1.2 var(--crt);color:var(--mut)}
  .below small a{color:inherit}
  .plate b{font-size:1.8cqw}.plate span{font-size:1.3cqw}
  .chyron{font-size:2.8cqw}
  .bug,.showname,.sound{font-size:1.6cqw}
}
@media (prefers-reduced-motion:reduce){.ttrack{animation-duration:120s}.live i{animation:none}}
.showname.breaking{color:#fff;background:#c8102e;border-color:#ff6b6b}