@font-face {
  font-family: 'Barlow Condensed';
  src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url(fonts/barlow-latin-400-normal.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url(fonts/barlow-latin-500-normal.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url(fonts/barlow-latin-600-normal.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* A night broadcast in both colour schemes: the booth is always dark. */
:root {
  --bg: #07090d;
  --panel: #0e131b;
  --panel-2: #141b26;
  --line: #222c3a;
  --ink: #eef2f7;
  --muted: #8f9bad;
  --saffron: #f2b233;
  --teal: #1fb3a6;
  --red: #ff3b30;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bar-h: 56px;
  --rundown-h: 178px;
  --exploration-footer-bg: var(--bg);
  --exploration-footer-ink: var(--ink);
  --exploration-footer-border: var(--line);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* Header */
.bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--bar-h);
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.bar-home { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; min-height: 44px; }
.bar-logo { width: 20px; height: 20px; }
.bar-slash { color: var(--muted); }
.bar-section { color: var(--muted); font-weight: 500; }
.bar-title {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 22px/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bar-title b { color: var(--saffron); font-weight: 700; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.22); animation: blink 1.6s steps(2, start) infinite; }
.bar-actions { display: flex; align-items: center; gap: 8px; }
.bar-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.bar-action:hover { border-color: var(--muted); }
.bar-make { background: var(--saffron); border-color: var(--saffron); color: #15110a; }
.bar-make:hover { border-color: #fff2cf; }

/* The booth */
.booth { flex: 1 0 auto; display: flex; flex-direction: column; }
.monitor {
  position: relative;
  height: max(340px, calc(100dvh - var(--bar-h) - var(--rundown-h)));
  overflow: hidden;
  background: #04060a;
  isolation: isolate;
}
.monitor::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
}
.feed { position: absolute; inset: -2%; animation: sway 11s ease-in-out infinite alternate; }
.crowd, .feed-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crowd { touch-action: none; cursor: grab; outline: none; }
.crowd:active { cursor: grabbing; }
.feed-still { object-fit: cover; transition: opacity 0.6s ease; z-index: 1; pointer-events: none; }
.feed-still.is-hidden { opacity: 0; }
.monitor:has(.crowd:focus-visible)::after { box-shadow: inset 0 0 0 2px var(--saffron); }
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  background: url(media/grain.webp) 0 0 / 160px 160px;
  animation: grain 0.5s steps(4) infinite;
  mix-blend-mode: screen;
}

/* Camera HUD */
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.hud p { margin: 0; }
.hud-cam { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 6px; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1.1s steps(2, start) infinite; }
.hud-sep { opacity: 0.6; }
.hud-tc { position: absolute; top: 14px; right: 16px; }
.hud-lens { position: absolute; top: 34px; right: 16px; color: var(--muted); }
.reticle {
  --hold: 0;
  --c: rgba(255, 255, 255, 0.78);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w, min(34%, 280px));
  aspect-ratio: 4 / 3;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  transition: transform 0.22s ease-out, width 0.22s ease-out;
}
.reticle[data-mode='near'] { --c: var(--saffron); }
.reticle[data-mode='hold'] { --c: var(--saffron); }
.reticle[data-mode='live'] { --c: var(--red); }
.rc { position: absolute; width: 22px; height: 22px; border: 0 solid var(--c); transition: border-color 0.2s, transform 0.25s; }
.rc-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.rc-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.rc-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.rc-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.reticle[data-mode='hold'] .rc-tl, .reticle[data-mode='live'] .rc-tl { transform: translate(10px, 10px); }
.reticle[data-mode='hold'] .rc-tr, .reticle[data-mode='live'] .rc-tr { transform: translate(-10px, 10px); }
.reticle[data-mode='hold'] .rc-bl, .reticle[data-mode='live'] .rc-bl { transform: translate(10px, -10px); }
.reticle[data-mode='hold'] .rc-br, .reticle[data-mode='live'] .rc-br { transform: translate(-10px, -10px); }
.reticle-cross { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); }
.reticle-cross::before, .reticle-cross::after { content: ''; position: absolute; background: var(--c); }
.reticle-cross::before { left: 6px; top: 0; width: 2px; height: 14px; }
.reticle-cross::after { left: 0; top: 6px; width: 14px; height: 2px; }
.reticle-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; }
.reticle-ring circle { fill: none; stroke: var(--c); stroke-width: 5; stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--hold))); }
.reticle[data-mode='hold'] .reticle-ring, .reticle[data-mode='live'] .reticle-ring { opacity: 1; }
.reticle-label { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); color: var(--c); text-transform: uppercase; white-space: nowrap; font-size: 12px; }

.ticker {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  transform: translateX(-50%);
  max-width: min(560px, calc(100% - 2 * 236px));
  margin: 0;
  padding: 8px 14px 8px 16px;
  border-left: 3px solid var(--saffron);
  background: rgba(6, 8, 12, 0.78);
  font: 500 15px/1.3 var(--sans);
  text-align: left;
  pointer-events: none;
}

.minimap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  width: 200px;
  aspect-ratio: 6336 / 2688;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: #000;
  overflow: hidden;
  opacity: 0.88;
}
.minimap:hover { opacity: 1; }
.minimap img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) brightness(0.8); }
.minimap-view { position: absolute; border: 1.5px solid var(--saffron); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }
.minimap-dots span { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 1.5px #000; }
.zoom { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.zoom-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(6, 8, 12, 0.72); }
.zoom-btn:hover { border-color: var(--saffron); }

/* The cut and the big screen */
.monitor.is-cut::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  pointer-events: none;
  animation: flash 0.32s ease-out forwards;
}
.onair { position: absolute; inset: 0; z-index: 5; background: #000; display: grid; place-items: center; }
.clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.onair[data-fit='contain'] .clip { object-fit: contain; }
.onair[data-reel='true'] .lower-third, .onair[data-reel='true'] .tally { display: none; }
.tally { position: absolute; top: 14px; left: 16px; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: var(--red); font: 700 14px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.tally span { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1s steps(2, start) infinite; }
.lower-third { position: absolute; left: 16px; bottom: 64px; max-width: min(520px, calc(100% - 32px)); }
.lower-third p { margin: 0; }
.lt-kicker { display: inline-block; padding: 4px 10px; background: var(--saffron); color: #15110a; font: 700 14px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.lt-name { padding: 6px 14px 2px; background: rgba(6, 8, 12, 0.86); font: 700 clamp(28px, 4vw, 44px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.lt-line { padding: 4px 14px 10px; background: rgba(6, 8, 12, 0.86); color: #d9e0ea; font-size: 15px; }
.onair-actions { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.clip-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.clip-progress span { display: block; height: 100%; background: var(--saffron); transform: scaleX(0); transform-origin: left; }

/* Cards over the monitor */
.intro, .final, .notice {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 9, 13, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
}
.kicker { margin: 0 0 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--saffron); font: 600 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.intro-title, .final-title { margin: 0 0 10px; font: 700 clamp(34px, 5.4vw, 54px)/0.98 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.intro-title em, .final-title em { font-style: normal; color: var(--saffron); }
.intro-text, .final-text { margin: 0 auto 18px; max-width: 42ch; color: #cfd6e0; font-size: 16px; }
.intro-actions, .final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  font: 700 17px/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { border-color: var(--saffron); }
.btn-live { background: var(--red); border-color: var(--red); }
.btn-live:hover { border-color: #ffd0cc; }
.btn-quiet { border-color: transparent; color: var(--muted); }
.notice-title { margin: 0 0 6px; font: 700 26px/1 var(--display); text-transform: uppercase; }
.notice-text { margin: 0; color: #cfd6e0; }
.noscript { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; margin: 0; padding: 10px 14px; background: rgba(6, 8, 12, 0.85); border-left: 3px solid var(--saffron); }
.monitor[data-state='intro'] .hud, .monitor[data-state='intro'] .zoom, .monitor[data-state='intro'] .minimap, .monitor[data-state='intro'] .ticker { visibility: hidden; }
.monitor[data-state='final'] .reticle { opacity: 0.35; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(6, 8, 12, 0.72);
  font-weight: 600;
  font-size: 14px;
}
.pill:hover:not(:disabled) { border-color: var(--saffron); }
.pill:disabled { opacity: 0.45; cursor: default; }
.pill-solid { background: var(--ink); border-color: var(--ink); color: #0b0f15; }
.pill-sound { background: var(--saffron); border-color: var(--saffron); color: #15110a; }
.pill-icon { width: 40px; padding: 0; justify-content: center; }
.pill-icon .i-wave { display: none; }
.pill-icon[aria-pressed='true'] .i-wave { display: inline; }
.pill-icon[aria-pressed='true'] .i-mute { display: none; }

/* Rundown */
.rundown { min-height: var(--rundown-h); padding: 10px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: var(--panel); border-top: 1px solid var(--line); }
.rundown-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.score { margin: 0; display: flex; align-items: baseline; gap: 4px; font: 700 30px/1 var(--display); }
.score span { font-size: 16px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.clock { margin: 0; padding: 4px 8px; border-radius: 4px; background: var(--panel-2); font: 500 14px/1 var(--mono); }
.rundown-tools { margin-left: auto; display: flex; gap: 8px; }
.fans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fan {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  text-align: left;
}
.fan:hover { border-color: var(--muted); }
.fan-art { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #1a2230; display: grid; place-items: center; }
.fan-n { font: 700 17px/1 var(--display); color: var(--muted); }
.fan-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fan-text { min-width: 0; display: flex; flex-direction: column; }
.fan-name { font: 700 15px/1.05 var(--display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fan-clue { font-size: 12px; line-height: 1.2; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fan.is-found { border-color: rgba(242, 178, 51, 0.65); }
.fan.is-found .fan-name { color: var(--saffron); }
.fan.is-found .fan-art::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--saffron) no-repeat center / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='%2315110a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* How it's made */
.how { width: min(880px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--ink); }
.how::backdrop { background: rgba(0, 0, 0, 0.7); }
.how-top { display: flex; align-items: center; justify-content: space-between; }
.how-close { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-weight: 600; }
.how-title { margin: 4px 0 8px; font: 700 clamp(30px, 4.6vw, 44px)/1 var(--display); text-transform: uppercase; }
.how-title em { font-style: normal; color: var(--saffron); }
.how-lede { margin: 0 0 18px; color: #cfd6e0; max-width: 62ch; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.how-steps li { display: flex; flex-direction: column; gap: 10px; }
.how-steps figure { margin: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.how-steps img { width: 100%; height: 100%; object-fit: cover; display: block; }
.how-steps h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--display); text-transform: uppercase; }
.how-steps p { margin: 0; color: #cfd6e0; font-size: 14.5px; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--saffron); color: #15110a; font-size: 14px; }
.how-downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); text-decoration: none; }
.card:hover { border-color: var(--saffron); }
.card p, .card h3 { margin: 0; }
.card-type { color: var(--muted); font: 500 11px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.card h3 { font: 700 19px/1.1 var(--display); text-transform: uppercase; }
.card b { margin-top: 6px; color: var(--saffron); font-weight: 600; font-size: 14px; }
.card-make { background: var(--saffron); border-color: var(--saffron); color: #15110a; }
.card-make .card-type, .card-make b { color: #15110a; }
.how-note { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; }
.how-note a { color: var(--ink); }

/* Footer (the shared runtime mounts its links beside these) */
.site-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--bg); font-size: 14px; }
.footer-resources { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-resources a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); }

/* Narrow screens */
@media (max-width: 1100px) {
  .fan-clue { display: none; }
}
@media (max-width: 760px) {
  :root { --bar-h: 52px; --rundown-h: 200px; }
  .bar { gap: 10px; }
  .bar-brand, .bar-slash, .bar-section { display: none; }
  .bar-home { width: 44px; justify-content: center; }
  .bar-title { margin: 0 auto 0 0; font-size: 20px; }
  .bar-action span:not([aria-hidden]) { display: none; }
  .bar-action { padding: 0 12px; }
  .bar-make { font-size: 13px; }
  .monitor { height: max(340px, calc(100dvh - var(--bar-h) - var(--rundown-h))); }
  .hud-lens { display: none; }
  .ticker { left: 16px; right: 16px; top: 40px; bottom: auto; max-width: none; transform: none; font-size: 14px; }
  .minimap { width: 128px; }
  .reticle { width: var(--w, 52%); }
  .fans { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .fan { min-height: 0; padding: 3px; justify-content: center; }
  .fan-text { display: none; }
  .fan-art { width: 100%; height: auto; aspect-ratio: 1; }
  .rundown-tools .pill span { display: none; }
  .rundown-tools .pill:not(.pill-icon) { width: 40px; padding: 0; justify-content: center; }
  .lower-third { bottom: 70px; }
  .onair-actions { left: 16px; right: 16px; justify-content: flex-end; }
  .how-steps, .how-downloads { grid-template-columns: 1fr; }
  .intro, .final { padding: 20px 18px; }
}
@media (max-width: 380px) {
  .bar { gap: 8px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .bar-title { font-size: 18px; gap: 6px; }
  .bar-make { padding: 0 10px; font-size: 12.5px; }
  .score { font-size: 26px; }
  .clock { font-size: 13px; }
  .intro, .final { padding: 16px 14px; }
  .intro-title, .final-title { font-size: 28px; }
  .intro-text, .final-text { font-size: 14px; margin-bottom: 12px; }
  .btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
  .lt-name { font-size: 24px; }
  .lt-line { font-size: 13px; }
  .lt-kicker { font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --rundown-h: 120px; }
  .monitor { height: max(300px, calc(100dvh - var(--bar-h))); }
  .ticker { top: auto; bottom: 16px; left: 50%; right: auto; max-width: calc(100% - 2 * 232px); transform: translateX(-50%); }
  .lower-third { bottom: 60px; }
  .lt-name { font-size: 28px; }
  .intro, .final { top: 50%; padding: 16px 18px; }
  .intro-title, .final-title { font-size: 30px; }
  .intro-text { margin-bottom: 12px; }
}

@keyframes blink { 50% { opacity: 0.25; } }
@keyframes flash { from { opacity: 0.95; } to { opacity: 0; } }
@keyframes sway {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(-0.35%, 0.25%) rotate(-0.08deg); }
  70% { transform: translate(0.25%, -0.2%) rotate(0.06deg); }
  100% { transform: translate(-0.15%, 0.3%) rotate(0.04deg); }
}
@keyframes grain {
  0% { background-position: 0 0; }
  25% { background-position: -37px 59px; }
  50% { background-position: 71px -23px; }
  75% { background-position: -13px -77px; }
}
@media (prefers-reduced-motion: reduce) {
  .feed, .grain, .rec, .live-dot, .tally span { animation: none; }
  .monitor.is-cut::before { display: none; }
  .rc, .reticle { transition: none; }
}