:root{
  --bg:#0a0b0d; --panel:#111318; --line:#22262e;
  --ink:#f4f6f8; --dim:#9aa3af;
  --vice:#ff2b1c; --vice-deep:#c31408;
  --up:#00e08a; --down:#ff4d5e; --mint:#00e08a;
  --kalshi:#00d68f;
  --rail-w:33%;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cond:"Archivo Narrow","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#000;color:var(--ink);font-family:var(--disp);
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:20px;-webkit-font-smoothing:antialiased;
}
/* Fill the screen holding 16:9 (leaving room for the operator bar + disclaimer),
   so on a laptop/monitor/projector the broadcast frame dominates instead of
   floating as a small card in black margins. */
.app{width:min(94vw, calc((100vh - 158px) * 16 / 9), 1760px);}

/* ===== STAGE ===== */
.stage{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;
  border-radius:10px;background:var(--bg);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px #000;
  isolation:isolate;
}
.bg-videos{position:absolute;inset:0;z-index:0;background:#07080b}
.bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease;filter:saturate(1.05) contrast(1.02);
}
.bg-video.on{opacity:1}
/* scrim: keep footage visible but readable under captions / lower-third / rail edge */
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,7,10,.28) 0%,rgba(6,7,10,0) 26%,rgba(6,7,10,.14) 60%,rgba(6,7,10,.82) 100%),
    linear-gradient(90deg,rgba(6,7,10,.55) 0%,rgba(6,7,10,.1) 34%,rgba(6,7,10,0) 62%);
}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* bugs */
.live-bug{
  position:absolute;top:18px;left:20px;z-index:6;
  font:800 14px/1 var(--disp);letter-spacing:.14em;
  background:var(--vice);color:#fff;padding:7px 11px 6px;border-radius:3px;
  display:flex;align-items:center;gap:7px;box-shadow:0 4px 16px rgba(255,43,28,.4);
}
.live-bug .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{0%,60%{opacity:1}80%,100%{opacity:.25}}
.net-bug{
  position:absolute;top:14px;right:calc(var(--rail-w) + 2.4%);z-index:6;
  display:flex;align-items:center;gap:11px;
  background:rgba(7,8,11,.5);backdrop-filter:blur(4px);
  padding:7px 13px;border-radius:6px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.net-bug .lx{font:400 15px/1 var(--disp);color:rgba(255,255,255,.45)}
.net-bug .logo{display:inline-flex;align-items:center;height:22px}
/* VICE News — real vicenews.com wordmark */
.logo-vice-img{height:20px;width:auto;display:block}
/* Kalshi wordmark + ascending-bars mark */
.logo-kalshi{font:800 21px/1 var(--disp);letter-spacing:-.01em;color:#fff;gap:6px}
.logo-kalshi .kmark{width:17px;height:14px}
.logo-kalshi .kmark rect{fill:var(--kalshi)}

/* ===== ODDS RAIL ===== */
.rail{
  position:absolute;top:0;right:0;bottom:0;width:var(--rail-w);z-index:5;
  background:linear-gradient(180deg,rgba(9,11,14,.62),rgba(9,11,14,.9));
  backdrop-filter:blur(8px);border-left:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;padding:14px 14px 0;
}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:10px;border-bottom:2px solid var(--kalshi);margin-bottom:12px}
.rail-title{font:900 19px/1 var(--disp);letter-spacing:.06em}
.rail-sub{font:600 11px/1 var(--cond);letter-spacing:.06em;color:var(--dim)}
.rail-sub b{color:var(--kalshi);letter-spacing:.08em}
.rail-body{display:flex;flex-direction:column;gap:10px;flex:1;overflow:hidden}
.rail-foot{font:500 10.5px/1.4 var(--mono);color:#6b7280;padding:10px 2px 12px;
  letter-spacing:.02em;border-top:1px solid var(--line);margin-top:auto}

/* chip */
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;position:relative;overflow:hidden;
  animation:chipIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.chip.leaving{animation:chipOut .35s ease forwards}
@keyframes chipIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes chipOut{to{opacity:0;transform:translateX(-14px);height:0;padding-top:0;padding-bottom:0;margin-bottom:-10px}}
.chip .tag{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.chip .cat{font:800 9.5px/1 var(--disp);letter-spacing:.12em;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:3px 6px 2px}
.chip .kmark{font:700 9px/1 var(--mono);letter-spacing:.1em;color:var(--kalshi)}
.chip .q{font:600 13.5px/1.28 var(--disp);color:var(--ink);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* multi-outcome front-runner line */
.chip .answer{display:flex;align-items:center;gap:7px;margin:-1px 0 9px}
.chip .ans-name{font:800 14px/1.15 var(--disp);color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .ans-tag{flex:none;font:800 8px/1 var(--disp);letter-spacing:.1em;color:var(--kalshi);
  border:1px solid rgba(0,214,143,.5);border-radius:3px;padding:3px 5px 2px}
/* binary contract qualifier (e.g. "Above 2.25%") */
.chip .qual{font:600 11px/1.2 var(--mono);color:var(--dim);margin:-2px 0 9px}
.chip .row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.chip .odds{font:700 30px/0.9 var(--mono);letter-spacing:-.02em}
.chip .odds .u{font-size:14px;color:var(--dim);margin-left:1px}
.chip .move{font:700 12px/1 var(--mono);padding:3px 6px;border-radius:4px}
.chip .move.up{color:var(--up);background:rgba(0,224,138,.1)}
.chip .move.down{color:var(--down);background:rgba(255,77,94,.1)}
.chip .bar{height:4px;border-radius:3px;background:#1b1f27;margin-top:9px;overflow:hidden}
.chip .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--kalshi),#26f0aa);
  border-radius:3px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.chip .src{font:500 9px/1.3 var(--mono);color:#5f6875;margin-top:8px;letter-spacing:.01em}

/* empty state chip */
.chip.empty{border-style:dashed;border-color:#3a3f4a;background:transparent}
.chip.empty .q{color:var(--dim)}
.chip.empty .flag{font:800 9.5px/1 var(--disp);letter-spacing:.1em;color:var(--vice);
  border:1px solid var(--vice);border-radius:3px;padding:4px 6px;display:inline-block;margin-bottom:8px}
.chip.empty .note{font:500 11px/1.4 var(--disp);color:#7b8494}

/* ===== LOWER THIRD + CAPTIONS ===== */
.lower-third{position:absolute;left:0;bottom:64px;z-index:4;max-width:calc(100% - var(--rail-w) - 3%)}
.lt-kicker{display:inline-block;background:var(--vice);color:#fff;
  font:800 12px/1 var(--disp);letter-spacing:.1em;padding:6px 11px 5px;border-radius:2px 2px 0 0}
.lt-headline{background:rgba(7,8,11,.86);backdrop-filter:blur(4px);
  font:800 27px/1.12 var(--disp);letter-spacing:-.01em;color:#fff;
  padding:10px 16px 12px;border-left:4px solid var(--vice);max-width:640px}
.captions{position:absolute;left:0;right:calc(var(--rail-w) + 3%);bottom:34px;z-index:4;
  padding:0 22px;font:600 17px/1.35 var(--disp);color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.9);min-height:24px}
.captions .said{opacity:.55}.captions .now{color:#fff}

/* ===== TICKER ===== */
.ticker{position:absolute;left:0;right:0;bottom:0;height:30px;z-index:5;
  background:linear-gradient(90deg,var(--vice-deep),#7a0a03);
  border-top:1px solid rgba(255,255,255,.15);overflow:hidden;display:flex;align-items:center}
.ticker::before{content:"KALSHI";position:absolute;left:0;top:0;bottom:0;z-index:2;
  display:flex;align-items:center;padding:0 12px;background:#000;color:var(--kalshi);
  font:800 12px/1 var(--disp);letter-spacing:.1em}
.ticker-track{display:flex;gap:26px;white-space:nowrap;padding-left:90px;
  animation:scroll 60s linear infinite;will-change:transform}
.ticker-track .ti{font:600 12px/1 var(--mono);color:#fff;display:flex;gap:8px;align-items:center}
.ticker-track .ti b{color:#ffd7d2;font-weight:700}
.ticker-track .ti .u{color:var(--mint)}.ticker-track .ti .d{color:#ffc9cd}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== OPERATOR BAR ===== */
.operator{display:flex;align-items:center;gap:14px;margin-top:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.op-left{display:flex;gap:8px}.op-right{margin-left:auto}
.op-btn{font:700 13px var(--disp);color:var(--ink);background:#1a1e26;
  border:1px solid var(--line);border-radius:6px;padding:8px 13px;cursor:pointer;transition:.15s}
.op-btn:hover{background:#232833;border-color:#333a46}
.op-btn.primary{background:var(--vice);border-color:var(--vice);color:#fff}
.op-btn.primary:hover{background:#ff4436}
.op-btn.on{background:var(--kalshi);border-color:var(--kalshi);color:#04120c}
.op-seg{display:flex;gap:6px}
.op-seg .sd{width:26px;height:5px;border-radius:3px;background:#2a2f3a;transition:.2s}
.op-seg .sd.active{background:var(--kalshi)}.op-seg .sd.done{background:#4b5563}
.op-meta{font:500 11px var(--mono);color:var(--dim)}
.op-btn:focus-visible,.typed-row input:focus-visible{outline:2px solid var(--kalshi);outline-offset:2px}
.disclaimer{font:500 11px/1.5 var(--mono);color:#8b93a0;margin-top:10px;padding:0 4px}
/* respect users / reviewers who disable motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker-track{animation:none;transform:translateX(0)}
}

/* ===== LIVE SIGNAL PANEL ===== */
.signal{display:grid;grid-template-columns:184px 1fr 208px;gap:1px;margin-top:10px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  animation:sigIn .35s ease}
.signal[hidden]{display:none}
@keyframes sigIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sig-col{background:var(--panel);padding:12px 14px;min-height:118px}
.sig-head{font:800 9.5px/1 var(--disp);letter-spacing:.14em;color:var(--dim);
  margin-bottom:11px;display:flex;align-items:center;gap:7px}
.sig-dot{width:8px;height:8px;border-radius:50%;background:#3a3f4a;transition:.2s}
.sig-dot.live{background:var(--vice);box-shadow:0 0 0 0 rgba(255,43,28,.6);animation:pulse 1.3s infinite}
.sig-dot.proc{background:#f5a623}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,43,28,.5)}70%{box-shadow:0 0 0 7px rgba(255,43,28,0)}100%{box-shadow:0 0 0 0 rgba(255,43,28,0)}}

/* mic level meter */
.meter{display:flex;align-items:flex-end;gap:3px;height:38px;margin-bottom:10px}
.meter i{flex:1;background:linear-gradient(180deg,var(--kalshi),#0a7a53);border-radius:2px;
  height:8%;transition:height .08s linear;opacity:.9}
.engine{font:600 10px/1 var(--mono);color:var(--dim);letter-spacing:.02em;margin-bottom:7px}
.engine b{color:var(--kalshi);letter-spacing:.04em}
.sig-status{font:600 11px/1.3 var(--mono);color:#8b93a0}
.sig-status.err{color:var(--down)}

/* transcript with detected entities highlighted */
.sig-mid{display:flex;flex-direction:column}
.transcript{flex:1;font:600 15px/1.42 var(--disp);color:#cfd5dd;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:9px;min-height:44px}
.transcript .tdim{color:#5f6875;font-weight:500;font-size:13px}
.transcript mark{background:rgba(0,214,143,.16);color:#7ff2c8;border-radius:3px;
  padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  animation:markIn .3s ease}
@keyframes markIn{from{background:rgba(0,214,143,.5)}to{background:rgba(0,214,143,.16)}}
.typed-row{display:flex;gap:7px}
.typed-row input{flex:1;background:#0c0e13;border:1px solid var(--line);border-radius:6px;
  color:var(--ink);font:500 13px var(--disp);padding:8px 11px;outline:none}
.typed-row input:focus{border-color:var(--kalshi)}
.typed-row .op-btn{padding:8px 13px;font-size:15px}

/* detected topic + confidence */
.sig-topic{border-left:2px solid var(--kalshi)}
.topic-lock{font:900 20px/1.05 var(--disp);letter-spacing:-.01em;color:#fff;margin-bottom:12px;
  min-height:42px;transition:.2s}
.topic-lock.none{color:#5f6875;font-size:15px;font-weight:700}
.conf{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.conf-bar{flex:1;height:6px;background:#1b1f27;border-radius:4px;overflow:hidden}
.conf-bar>i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#f5a623,var(--kalshi));transition:width .4s ease}
.conf span{font:700 12px var(--mono);color:var(--dim);min-width:34px;text-align:right}
.mkt-count{font:600 11px/1 var(--mono);color:var(--kalshi);letter-spacing:.02em}