/* === SELF-HOSTED FONTS (offline, no CDN dependency) === */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/orbitron.woff2') format('woff2')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/vt323-400.woff2') format('woff2')}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-400.woff2') format('woff2')}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/share-tech-mono-400.woff2') format('woff2')}

:root {
    /* Experimental Y2K cable palette: ink navy, ice cyan, hot magenta, chrome white. */
    --teal:#63f3e6; --cream:#e9f7fa; --dark:#071329;
    --guide-bg:#070d21; --guide-grid:rgba(77,151,202,0.22);
    --yellow:#78eaff; --yellow-bright:#e8ffff; --yellow-hot:#ffffff;
    --cyan-glow:#22e6ff; --magenta-glow:#ff38c8;
    --y2k-blue:#183866; --y2k-pink:#ff38c8; --y2k-ice:#8ff7ff;
    /* Cable-guide functional type: condensed sans (system-stack, offline-safe).
       Branding keeps the script wordmark; mono stays on the ticker crawl. */
    --guide-sans:'Arial Narrow','Helvetica Neue Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;

    /* === Guide semantic palette — the single override layer for themes ===
       Every guide color below is expressed as a custom property. A theme is
       just one :root[data-guide-theme="..."] block that redefines these (plus
       the legacy --cyan-glow/--magenta-glow/--y2k-ice/--yellow vars). The
       default Y2K values live here, so the default look is byte-identical. */
    --guide-accent-rgb:255,142,220;        /* pink light — borders, wordmark, ticker */
    --guide-accent-strong-rgb:255,56,200;  /* magenta — glow core, rails */
    --guide-now-rgb:34,230,255;            /* cyan — current column/cell, scan */
    --guide-ice-rgb:143,247,255;           /* ice — highlights, glints */
    --guide-warm-rgb:255,40,90;            /* warm chromatic text shadow */
    --guide-cool-rgb:0,220,255;            /* cool chromatic text shadow */
    --guide-line-rgb:77,151,202;           /* row dividers */
    --guide-slotline-rgb:120,160,220;      /* time-slot borders */
    --guide-chroma-r-rgb:255,20,75;        /* frame red edge */
    --guide-chroma-c-rgb:0,230,255;        /* frame cyan edge */
    --guide-bg-1:rgba(14,9,45,.9); --guide-bg-2:rgba(6,25,62,.87);
    --guide-bg-3:rgba(20,7,42,.9); --guide-bg-4:rgba(4,8,26,.94);
    --guide-bg-radial:rgba(42,72,145,.5);
    --guide-top-1:rgba(70,46,160,.99); --guide-top-2:rgba(24,124,196,.98);
    --guide-top-3:rgba(156,34,168,.98);
    --guide-prev-1:#050923; --guide-prev-2:#101d58; --guide-prev-3:#300b49;
    --guide-panel-1:#34206f; --guide-panel-2:#071938; --guide-panel-3:#250b4c;
    --guide-retrobox-1:rgba(30,66,116,.98); --guide-retrobox-2:rgba(5,11,32,1);
    --guide-grid-1:rgba(13,20,62,.98); --guide-grid-2:rgba(7,25,58,.94);
    --guide-grid-3:rgba(35,8,55,.94);
    --guide-rail-1:rgba(255,56,200,.25); --guide-rail-2:rgba(126,54,211,.2);
    --guide-rail-3:rgba(34,230,255,.12);
    --guide-tick-1:rgba(55,9,79,.96); --guide-tick-2:rgba(25,14,72,.96);
    --guide-tick-3:rgba(9,35,73,.96);
    --guide-time-1:rgba(45,18,91,.98); --guide-time-2:rgba(10,39,88,.98);
    --guide-time-3:rgba(7,12,37,.99);
    --guide-text:#f4fbff; --guide-text-dim:#dbe7ff; --guide-text-soft:#cfe4ff;
    --guide-text-ice:#8ff7ff; --guide-text-now:#bff6ff; --guide-text-bright:#e8ffff;
    --guide-label:#ff9be5; --guide-title-depth:#1684a6;
    --guide-logo-grad:linear-gradient(110deg,#8b246d 0%,#ff8edc 22%,#fff7fd 35%,#ffb3e9 47%,#e43baa 68%,#fff7fd 78%,#9b2878 100%);
    --guide-logo-shadow:#7d1b65;
    /* Solid conveniences derived from the rgb triplets — themes only override
       the triplets and these follow automatically. */
    --guide-accent:rgb(var(--guide-accent-rgb));
    --guide-accent-strong:rgb(var(--guide-accent-strong-rgb));
    --guide-now:rgb(var(--guide-now-rgb));
    --guide-ice:rgb(var(--guide-ice-rgb));
    /* Channel-surfing HUD: bright readout text and its dark depth shadow.
       Each theme overrides these so the net logo, channel number, and info
       card follow the palette like everything else. */
    --guide-hud-text:#f2ffff; --guide-hud-depth:#087895;
    /* Secondary stops for the current-cell / now-column gradients — themes
       override these so the highlight washes match each palette. */
    --guide-now-mid-rgb:60,110,235; --guide-now-deep-rgb:90,80,230;
    --guide-now-base-rgb:20,40,120;
  }













  /* Alternate full-network packages: deliberately replace the default pink/cyan
     language so each selection reads as a genuinely different broadcast era. */












  *{margin:0;padding:0;box-sizing:border-box;outline:none!important;-webkit-tap-highlight-color:transparent!important}
  html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:'VT323',monospace;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
  .stage{position:relative;width:100%;height:100%;max-width:calc(100vh * 16 / 9);max-height:calc(100vw * 9 / 16);background:#000;overflow:hidden;flex-shrink:0}
  #tvVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;background:#000}
  #tvVideo.hidden{display:none}

  .snow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:none;background:#000;image-rendering:pixelated;image-rendering:crisp-edges}
  .snow-canvas.active{display:block}
  .off-air-card{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 55%,#1b2440 0%,#0a0f1e 72%);text-align:center;padding:20px}
  .off-air-card.active{display:flex}
  .off-air-flicker{animation:offAirFlicker 4.5s infinite}
  .off-air-title{font-family:'Orbitron',sans-serif;font-size:clamp(0.9rem,2.6vw,1.8rem);color:var(--guide-text);letter-spacing:2px;text-shadow:0 0 12px rgba(var(--guide-now-rgb),0.5)}
  .off-air-sub{font-family:'Share Tech Mono',monospace;font-size:clamp(0.7rem,1.8vw,1.1rem);color:var(--guide-text-soft);letter-spacing:4px;margin-top:6px}
  @keyframes offAirFlicker{0%,100%{opacity:1}90%{opacity:1}91%{opacity:0.55}92%{opacity:1}95%{opacity:0.8}96%{opacity:1}}
  .ticker-card{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#141c30 0%,#070b18 72%)}
  .ticker-card.active{display:flex}
  .ticker-strip{width:100%;overflow:hidden;background:rgba(0,0,0,0.6);padding:12px 0;border-top:2px solid rgba(var(--guide-accent-rgb),.45);border-bottom:2px solid rgba(var(--guide-accent-rgb),.45)}
  .ticker-track{display:inline-flex;white-space:nowrap;animation:tickerScroll 26s linear infinite}
  .ticker-text{font-family:'Share Tech Mono',monospace;color:var(--guide-text);letter-spacing:2px;font-size:clamp(0.85rem,2.4vw,1.5rem);padding:0 40px;text-shadow:0 0 10px rgba(var(--guide-now-rgb),0.4)}
  @keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .station-clock{position:absolute;top:14px;right:14px;width:58px;height:58px;opacity:0.92;pointer-events:none}
  .sc-face{position:relative;width:100%;height:100%;border:2px solid rgba(207,214,230,0.75);border-radius:50%;background:rgba(10,15,30,0.55);box-shadow:0 0 10px rgba(0,0,0,0.5),inset 0 0 8px rgba(0,0,0,0.5)}
  .sc-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px;background:#cfd6e6}
  .sc-hour{width:3px;height:24%;margin-left:-1.5px;background:#e8edf7}
  .sc-minute{width:2px;height:33%;margin-left:-1px}
  .sc-second{width:1px;height:41%;margin-left:-0.5px;background:var(--guide-accent)}
  .sc-dot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--guide-accent);border-radius:50%;box-shadow:0 0 6px rgba(var(--guide-accent-rgb),0.8)}

  .test-pattern{position:absolute;inset:0;z-index:1;display:none;align-items:center;justify-content:center;background:#000}
  .test-pattern.active{display:flex}.test-pattern.cover{z-index:3}
  .tp-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(5,1fr)}
  .tp-bar{width:100%;height:100%}
  .tp-bar.c1{background:#fff}.tp-bar.c2{background:#ff0}.tp-bar.c3{background:#0ff}
  .tp-bar.c4{background:#0f0}.tp-bar.c5{background:#f0f}.tp-bar.c6{background:#f00}.tp-bar.c7{background:#00f}

  .guide-screen{position:absolute;inset:0;background:#000;display:none;z-index:2;overflow:hidden}
  .guide-screen.active{display:block;pointer-events:none}
  /* CRT power-on tube transition: instead of a plain fade into the guide, the
     picture warms up like a real tube — a bright center line expands to full
     height (transform-only for the geometry, brightness/saturation ramp for
     the warm-up glow). The guide sits in .pre-on (invisible) until this
     starts, and the guide-static noise (the tube-off state) is cleared in the
     same tick, so the expansion is always visible and the guide never appears
     before the effect. Class is removed on animationend so base styles (retro
     filter, etc.) are untouched afterward. */
  .guide-screen.tube-on{transform-origin:50% 50%;animation:crtTubePowerOn .75s cubic-bezier(.3,.55,.35,1) forwards;will-change:transform,filter}
  /* Guide is built and active (layout + pip load normally) but held invisible
     until the CRT power-on tube transition starts (bootReveal in app.js).
     visibility rather than opacity so the HD-mode opacity transition can never
     animate a flash of the guide mid-fade. */
  .guide-screen.pre-on{visibility:hidden}
  @keyframes crtTubePowerOn{
    0%{transform:scaleY(0.012);filter:brightness(2.8) saturate(0.3) contrast(1.3)}
    30%{transform:scaleY(0.3);filter:brightness(2) saturate(0.5) contrast(1.2)}
    55%{transform:scaleY(0.8);filter:brightness(1.4) saturate(0.8) contrast(1.1)}
    75%{transform:scaleY(1.02);filter:brightness(1.12) saturate(1) contrast(1.04)}
    85%{transform:scaleY(0.99);filter:brightness(0.95)}
    100%{transform:scaleY(1);filter:brightness(1) saturate(1) contrast(1)}
  }
  /* The boot HUD (AIRWAVES wordmark, channel number, info bar) warms up with
     the tube too: app.js adds .tube-on in startTubePowerOn(), so these run the
     same expand + brightness ramp as the guide picture (plus an opacity reveal)
     instead of just fading in under the station-ID dissolve. Removed on
     animationend so later .show/.hide opacity transitions behave normally. */
  .net-logo.tube-on, .ch-number.tube-on, .info-bar.tube-on{transform-origin:50% 50%;animation:crtHudPowerOn .75s cubic-bezier(.3,.55,.35,1);will-change:transform,filter,opacity}
  @keyframes crtHudPowerOn{
    0%{opacity:0;transform:scaleY(0.012);filter:brightness(2.8) saturate(0.3) contrast(1.3)}
    30%{opacity:0.5;transform:scaleY(0.3);filter:brightness(2) saturate(0.5) contrast(1.2)}
    55%{opacity:0.9;transform:scaleY(0.8);filter:brightness(1.4) saturate(0.8) contrast(1.1)}
    75%{opacity:1;transform:scaleY(1.02);filter:brightness(1.12) saturate(1) contrast(1.04)}
    85%{opacity:1;transform:scaleY(0.99);filter:brightness(0.95)}
    100%{opacity:1;transform:scaleY(1);filter:brightness(1) saturate(1) contrast(1)}
  }
  /* The info bar centers itself with translateX(-50%), which the shared
     keyframes would clobber — bake the centering into its own warm-up. */
  .info-bar.tube-on{animation-name:crtHudPowerOnBar}
  @keyframes crtHudPowerOnBar{
    0%{opacity:0;transform:translateX(-50%) scaleY(0.012);filter:brightness(2.8) saturate(0.3) contrast(1.3)}
    30%{opacity:0.5;transform:translateX(-50%) scaleY(0.3);filter:brightness(2) saturate(0.5) contrast(1.2)}
    55%{opacity:0.9;transform:translateX(-50%) scaleY(0.8);filter:brightness(1.4) saturate(0.8) contrast(1.1)}
    75%{opacity:1;transform:translateX(-50%) scaleY(1.02);filter:brightness(1.12) saturate(1) contrast(1.04)}
    85%{opacity:1;transform:translateX(-50%) scaleY(0.99);filter:brightness(0.95)}
    100%{opacity:1;transform:translateX(-50%) scaleY(1);filter:brightness(1) saturate(1) contrast(1)}
  }
  .guide-43-frame{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:75%;height:100%;background:radial-gradient(ellipse at 50% 18%,var(--guide-bg-radial),transparent 46%),linear-gradient(135deg,var(--guide-bg-1) 0%,var(--guide-bg-2) 38%,var(--guide-bg-3) 72%,var(--guide-bg-4) 100%);display:flex;flex-direction:column;overflow:hidden}
  .guide-43-frame::before,.guide-43-frame::after{content:'';position:absolute;inset:0;z-index:12;pointer-events:none;mix-blend-mode:screen;opacity:.8}
  .guide-43-frame::before{background:linear-gradient(90deg,rgba(var(--guide-chroma-r-rgb),.16),transparent 14%,transparent 86%,rgba(var(--guide-chroma-r-rgb),.11));box-shadow:inset 2px 0 0 rgba(var(--guide-chroma-r-rgb),.5),inset -1px 0 0 rgba(var(--guide-chroma-r-rgb),.22);transform:translateX(-1px);animation:guideRgbRed 3.8s ease-in-out infinite}
  .guide-43-frame::after{background:linear-gradient(90deg,rgba(var(--guide-chroma-c-rgb),.11),transparent 14%,transparent 86%,rgba(var(--guide-chroma-c-rgb),.18));box-shadow:inset 1px 0 0 rgba(var(--guide-chroma-c-rgb),.22),inset -2px 0 0 rgba(var(--guide-chroma-c-rgb),.45);transform:translateX(1px);animation:guideRgbCyan 3.8s ease-in-out infinite}
  @keyframes guideRgbRed{0%,100%{opacity:.12;transform:translateX(0)}50%{opacity:.2;transform:translateX(-1px)}}
  @keyframes guideRgbCyan{0%,100%{opacity:.3;transform:translateX(1px)}50%{opacity:.48;transform:translateX(2px)}}
  @keyframes guideTextRgb{0%,100%{filter:none}48%{filter:none}50%{text-shadow:-1px 0 rgba(var(--guide-chroma-r-rgb),.42),1px 0 rgba(var(--guide-chroma-c-rgb),.48),0 0 7px rgba(255,255,255,.22)}52%{filter:none}54%{text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.24),1px 0 rgba(var(--guide-cool-rgb),.3),0 0 4px rgba(var(--guide-ice-rgb),.18)}}
  .guide-crt{position:absolute;inset:0;z-index:10;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.12) 1px,rgba(0,0,0,0.12) 2px),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,0.02) 1px,rgba(0,0,0,0.02) 2px);box-shadow:inset 0 0 60px rgba(0,0,0,0.3),inset 0 0 8px rgba(var(--guide-accent-strong-rgb),.12)}

  /* Experimental 1999 cable-network package: navy glass, chrome edge, cyan/magenta accents. */
  /* Surface hierarchy: the top strip is the brightest glass on the screen;
     everything below steps down in value (preview -> grid), like real cable
     gear. The ::before is a horizontal gloss reflection across the glass. */
  .guide-topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;gap:12px;background:linear-gradient(105deg,var(--guide-top-1),var(--guide-top-2) 46%,var(--guide-top-3) 100%);border-bottom:2px solid var(--guide-accent);box-shadow:0 1px 0 rgba(255,255,255,.65),0 0 8px rgba(var(--guide-accent-strong-rgb),.3),0 4px 16px rgba(0,0,0,.5),inset 0 -1px 0 rgba(var(--guide-accent-strong-rgb),.5);flex-shrink:0;position:relative;z-index:5}
  .guide-topbar::before{content:'';position:absolute;top:0;left:0;right:0;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 78%,transparent);pointer-events:none;z-index:1}
  /* Broadcast status strip: LIVE dot, signal language, tiny bars — the
     authentic clutter that makes it read as a live feed. */
  .guide-status{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px 16px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.28));border-bottom:1px solid rgba(var(--guide-accent-rgb),.5);font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:2px;color:var(--guide-text-soft);text-shadow:0 0 6px rgba(var(--guide-ice-rgb),.4);position:relative;z-index:5}

  .guide-topbar-title{font-family:var(--guide-sans);font-weight:700;font-size:1rem;color:var(--guide-text);letter-spacing:2px;text-shadow:-2px 0 rgba(var(--guide-warm-rgb),.75),2px 0 rgba(var(--guide-cool-rgb),.8),1px 1px 0 var(--guide-title-depth),0 0 8px rgba(var(--guide-now-rgb),.65);animation:guideTextRgb 4s ease-in-out infinite}
  .guide-topbar-title small{font-family:'Share Tech Mono',monospace;font-size:.48rem;color:var(--guide-text-ice);letter-spacing:1px;opacity:.7;margin-left:7px;vertical-align:middle}
  .guide-topbar-channel{font-family:'Share Tech Mono',monospace;font-size:0.75rem;color:#fff;letter-spacing:1px;text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.72),1px 0 rgba(var(--guide-cool-rgb),.82),0 0 7px rgba(var(--guide-accent-rgb),.7);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(var(--guide-accent-strong-rgb),.25));border:1px solid var(--guide-accent);border-radius:2px;padding:3px 9px;white-space:nowrap;box-shadow:-1px 0 0 rgba(var(--guide-warm-rgb),.42),1px 0 0 rgba(var(--guide-cool-rgb),.5),inset 0 1px 0 rgba(255,255,255,.65),0 0 10px rgba(var(--guide-accent-strong-rgb),.2)}
  /* Cable-box clock: small, quiet, in a dark chip — the functional readout,
     not a glowing display piece. Date is prepended in app.js (SUN 2:38 PM). */
  .guide-topbar-clock{font-family:var(--guide-sans);font-weight:600;font-size:.8rem;color:#fff;letter-spacing:1.5px;text-shadow:none;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);padding:2px 8px;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);white-space:nowrap}

  .guide-preview{position:relative;flex-shrink:0;width:100%;height:42%;background:radial-gradient(ellipse at 20% 10%,rgba(var(--guide-now-rgb),.18),transparent 35%),linear-gradient(125deg,var(--guide-prev-1),var(--guide-prev-2) 48%,var(--guide-prev-3) 100%);border-bottom:2px solid var(--magenta-glow);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);display:flex;align-items:stretch;padding:9px;gap:9px;overflow:hidden;z-index:5}
  .guide-preview-left{flex:0 0 55%;display:flex;align-items:center;justify-content:center;min-width:0}
  /* Early-2000s squeeze: the picture fills the corner region of a translucent
     guide (no bordered PIP box), and the overlay glass sits over the rest. */
  .guide-preview-inner{position:relative;width:100%;height:100%;background:#000;border:2px solid var(--guide-accent);border-radius:2px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.5),0 0 6px rgba(var(--guide-accent-rgb),.55),0 0 16px rgba(var(--guide-accent-strong-rgb),.22);display:flex;align-items:center;justify-content:center}
  .guide-preview-inner video{width:100%;height:100%;display:block;object-fit:cover}
  .guide-preview-right{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden}

  .aw-panel{flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 15%,rgba(var(--guide-accent-strong-rgb),.26),transparent 42%),linear-gradient(145deg,var(--guide-panel-1) 0%,var(--guide-panel-2) 48%,var(--guide-panel-3) 100%);border:2px solid var(--guide-accent);border-radius:2px;padding:10px;position:relative;overflow:hidden;box-shadow:0 0 6px rgba(var(--guide-accent-rgb),.72),0 0 18px rgba(var(--guide-accent-strong-rgb),.22),inset 0 0 16px rgba(var(--guide-accent-strong-rgb),.08)}
  .aw-panel::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);pointer-events:none;z-index:1}
  .aw-panel::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,0.6) 100%);pointer-events:none;z-index:2}
  .aw-retro{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:650px;z-index:3;overflow:hidden;animation:none}
  .aw-retro-box{position:relative;width:min(82%,12rem);aspect-ratio:1/1;border:1px solid rgba(var(--guide-accent-rgb),.78);border-radius:2px;background:linear-gradient(145deg,var(--guide-retrobox-1) 0%,var(--guide-retrobox-2) 100%);display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 28px rgba(var(--guide-accent-strong-rgb),.1),0 0 16px rgba(var(--guide-accent-strong-rgb),.18),4px 4px 0 rgba(var(--guide-now-rgb),.12);overflow:hidden}
  .aw-retro-box::before,.aw-retro-box::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--y2k-ice),var(--magenta-glow),var(--y2k-ice),transparent);opacity:0.8;animation:awTopFlicker 4s ease-in-out infinite}
  .aw-retro-box::before{top:0}.aw-retro-box::after{bottom:0;animation-delay:2s}

  @media (max-width:480px){
    .aw-retro-text{font-size:2.5rem!important;letter-spacing:2px!important}
    .aw-retro-corner{width:0.6rem!important;height:0.6rem!important;border-width:1.5px!important}
    .aw-corner-glow{width:0.2rem!important;height:0.2rem!important}
  }

  .aw-retro-text{display:none}
  .aw-logo-wordmark{position:absolute;z-index:6;left:50%;top:50%;width:100%;height:72%;padding:0 9%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;overflow:visible;animation:awWordFloat 6.5s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
  .aw-word-main,.aw-word-ghost{position:absolute;max-width:100%;font-family:'Brush Script MT','Segoe Script','Snell Roundhand',cursive;font-size:clamp(1.35rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;line-height:.8;white-space:nowrap;transform-origin:center}
  .aw-word-main{z-index:3;color:var(--guide-accent);text-shadow:1px 2px 0 var(--guide-logo-shadow),0 0 8px rgba(var(--guide-accent-rgb),.85),0 0 22px rgba(var(--guide-accent-strong-rgb),.4);background:var(--guide-logo-grad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:awWordPulse 4.8s ease-in-out infinite,awWordMetalSweep 7s cubic-bezier(.45,0,.55,1) infinite;will-change:filter,background-position}
  .aw-word-ghost{z-index:2;color:transparent;-webkit-text-stroke:1px rgba(var(--guide-now-rgb),.62);transform:translate(-2px,1px);opacity:.55;animation:awWordGhost 6s ease-in-out infinite}
  .aw-word-shine{position:absolute;z-index:4;inset:-60%;background:linear-gradient(110deg,transparent 39%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.82) 50%,rgba(255,220,248,.16) 55%,transparent 61%);transform:translateX(-80%) rotate(10deg);animation:none;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;clip-path:inset(0 0 0 0)}
  .aw-word-sub{position:absolute;z-index:5;bottom:2%;font-family:'Share Tech Mono',monospace;font-size:clamp(.3rem,1vw,.48rem);letter-spacing:.16em;color:var(--guide-text-ice);text-shadow:0 0 7px rgba(var(--guide-ice-rgb),.65);white-space:nowrap}
  .aw-logo-face,.aw-logo-side{display:none}
  .aw-logo-face{background:linear-gradient(180deg,#ffd9f5 0%,#ff8edc 28%,#d92a9f 72%,#7c1e67 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #76195c) drop-shadow(0 0 8px rgba(255,56,200,.7));image-rendering:pixelated}
  .aw-logo-side{color:#8e246d;transform:rotateY(180deg) translateZ(10px);-webkit-text-stroke:1px #ff62c6;text-shadow:0 2px 0 #4d1645}
  .aw-retro-scan{position:absolute;top:0;left:-100%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--guide-ice-rgb),.07),rgba(255,255,255,.08),rgba(var(--guide-ice-rgb),.07),transparent);animation:awRetroScan 6s linear infinite;z-index:4;pointer-events:none}
  .aw-retro-scan-slow{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--guide-accent-strong-rgb),.04),transparent);animation:awRetroScan 13s linear infinite 2.5s;z-index:3;pointer-events:none}
  .aw-retro-scan-fast{position:absolute;top:0;left:-100%;width:18%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);animation:awRetroScan 3.8s linear infinite 1.2s;z-index:4;pointer-events:none}
  /* Dramatic chrome: a wide diagonal band with a cyan leading edge, white
     core, and magenta trail sweeps across the whole panel, idles off-screen
     most of the cycle, then passes through — the occasional chrome flash of a
     real station ident. Sits under the wordmark (no flash on the letters). */
  .aw-retro-shine{position:absolute;inset:-70%;background:linear-gradient(45deg,transparent 40%,rgba(var(--guide-now-rgb),.32) 45%,rgba(255,255,255,.9) 50%,rgba(var(--guide-accent-rgb),.38) 55%,transparent 60%);animation:awShineSweep 9.5s ease-in-out infinite;z-index:3;pointer-events:none;mix-blend-mode:screen}
  /* Living ident: the halos breathe, the orbits sweep like a radar, the
     corner reticles pulse — all transform/opacity, compositor-cheap. */
  .aw-retro-halo{position:absolute;inset:-15%;border:1px solid rgba(var(--guide-ice-rgb),.14);border-radius:50%;animation:awHaloBreathe 8s ease-in-out infinite;z-index:1;pointer-events:none}
  .aw-retro-halo-inner{position:absolute;inset:-8%;border:1px solid rgba(var(--guide-accent-strong-rgb),.14);border-radius:50%;animation:awHaloBreathe 8s ease-in-out infinite 4s;z-index:1;pointer-events:none}
  .aw-logo-orbit{position:absolute;left:50%;top:50%;width:76%;height:22%;border:1px solid rgba(var(--guide-accent-rgb),.42);border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);animation:awOrbitSpin 16s linear infinite;z-index:2;pointer-events:none}
  .aw-logo-orbit::after{content:'';position:absolute;right:7%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--magenta-glow);box-shadow:0 0 8px var(--magenta-glow);transform:translateY(-50%)}
  .aw-logo-orbit.orbit-two{width:68%;height:18%;transform:translate(-50%,-50%) rotate(28deg);animation:awOrbitSpinRev 20s linear infinite;border-color:rgba(var(--guide-accent-strong-rgb),.28)}
  .aw-logo-orbit.orbit-two::after{left:7%;right:auto;background:var(--y2k-ice);box-shadow:0 0 8px var(--y2k-ice)}
  @keyframes awOrbitSpin{from{transform:translate(-50%,-50%) rotate(-24deg)}to{transform:translate(-50%,-50%) rotate(336deg)}}
  @keyframes awOrbitSpinRev{from{transform:translate(-50%,-50%) rotate(28deg)}to{transform:translate(-50%,-50%) rotate(-332deg)}}
  @keyframes awHaloBreathe{0%,100%{transform:scale(.965);opacity:.4}50%{transform:scale(1.06);opacity:.98}}
  .aw-sparkle{position:absolute;width:3px;height:3px;background:var(--yellow-bright);border-radius:50%;box-shadow:0 0 6px var(--yellow-bright),0 0 12px var(--yellow);animation:awSparkle 2.6s ease-in-out infinite;z-index:5;pointer-events:none}
  .aw-sparkle:nth-child(1){top:15%;left:20%;animation-delay:0s}
  .aw-sparkle:nth-child(2){top:25%;right:15%;animation-delay:0.4s}
  .aw-sparkle:nth-child(3){bottom:20%;left:30%;animation-delay:0.8s}
  .aw-sparkle:nth-child(4){bottom:15%;right:25%;animation-delay:1.2s}
  .aw-sparkle:nth-child(5){top:50%;left:10%;animation-delay:1.6s}
  .aw-sparkle:nth-child(6){top:50%;right:10%;animation-delay:0.2s}
  .aw-chroma-cyan,.aw-chroma-magenta{display:none}
  .aw-logo-3d + .aw-retro-line{z-index:1}
  .aw-chroma-cyan{animation:awChroma 3s ease-in-out infinite}
  .aw-chroma-magenta{animation:awChroma 3s ease-in-out infinite 1.5s}
  .aw-chroma-cyan .aw-retro-text{color:var(--cyan-glow);text-shadow:0 0 20px var(--cyan-glow);transform:translateX(-3px);opacity:0.4}
  .aw-chroma-magenta .aw-retro-text{color:var(--magenta-glow);text-shadow:0 0 20px var(--magenta-glow);transform:translateX(3px);opacity:0.4}
  .aw-retro-grid{position:absolute;inset:8px;border:1px solid rgba(var(--guide-ice-rgb),.14);border-radius:2px;z-index:1;pointer-events:none;transform:rotate(45deg) scale(.72)}
  .aw-retro-grid::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--guide-ice-rgb),.06) 1px,transparent 1px),linear-gradient(0deg,rgba(var(--guide-accent-strong-rgb),.05) 1px,transparent 1px);background-size:16px 16px}
  .aw-retro-line{position:absolute;top:50%;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-glow),var(--magenta-glow),transparent);opacity:0.45;z-index:1}
  .aw-retro-corner{position:absolute;width:16px;height:16px;border:1px solid var(--guide-accent);z-index:3;opacity:0.78;animation:awCornerPulse 3.6s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(var(--guide-accent-rgb),.7))}
  .aw-retro-corner.tl{top:6px;left:6px;border-right:none;border-bottom:none}
  .aw-retro-corner.tr{top:6px;right:6px;border-left:none;border-bottom:none;animation-delay:0.5s}
  .aw-retro-corner.bl{bottom:6px;left:6px;border-right:none;border-top:none;animation-delay:1s}
  .aw-retro-corner.br{bottom:6px;right:6px;border-left:none;border-top:none;animation-delay:1.5s}
  .aw-corner-glow{position:absolute;width:3px;height:3px;background:var(--y2k-ice);border-radius:50%;box-shadow:0 0 6px var(--y2k-ice),0 0 12px var(--cyan-glow);z-index:4;animation:awCornerPulse 3.6s ease-in-out infinite}
  .aw-corner-glow.tl{top:4px;left:4px}
  .aw-corner-glow.tr{top:4px;right:4px;animation-delay:0.5s}
  .aw-corner-glow.bl{bottom:4px;left:4px;animation-delay:1s}
  .aw-corner-glow.br{bottom:4px;right:4px;animation-delay:1.5s}

  @keyframes awWordFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-2px)}}
  @keyframes awWordPulse{0%,100%{filter:brightness(.98) drop-shadow(0 0 4px rgba(var(--guide-accent-strong-rgb),.35))}50%{filter:brightness(1.16) drop-shadow(0 0 8px rgba(var(--guide-accent-rgb),.62))}}
  @keyframes awWordMetalSweep{0%,18%{background-position:180% 0}72%,100%{background-position:-40% 0}}
  @keyframes awWordGhost{0%,100%{transform:translate(-2px,1px);opacity:.42}50%{transform:translate(2px,-1px);opacity:.68}}
  @keyframes awWordSweep{0%,58%{transform:translateX(-80%) rotate(10deg);opacity:0}70%{opacity:.9}86%,100%{transform:translateX(80%) rotate(10deg);opacity:0}}
  @keyframes infoTickerChroma{0%,100%{text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.22),1px 0 rgba(var(--guide-cool-rgb),.26),0 0 6px rgba(255,255,255,.35)}50%{text-shadow:-2px 0 rgba(var(--guide-warm-rgb),.42),2px 0 rgba(var(--guide-cool-rgb),.46),0 0 7px rgba(255,255,255,.42)}}
  @keyframes awRetroTilt{0%,100%{transform:rotateY(0)rotateX(0)}20%{transform:rotateY(5deg)rotateX(2deg)}40%{transform:rotateY(0)rotateX(0)}60%{transform:rotateY(-5deg)rotateX(-2deg)}80%{transform:rotateY(0)rotateX(0)}}
  @keyframes awRetroPulse{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:0.7;filter:brightness(1.3)}}
  @keyframes awRetroScan{0%{left:-100%}100%{left:200%}}
  @keyframes awTopFlicker{0%,100%{opacity:0.8}50%{opacity:0.3}}
  @keyframes awCornerPulse{0%,100%{opacity:.4}50%{opacity:.95}}
  @keyframes awShineSweep{0%,48%{transform:translateX(-160%)translateY(-160%)rotate(45deg);opacity:0}60%{opacity:.9}74%{transform:translateX(160%)translateY(160%)rotate(45deg);opacity:.95}80%,100%{transform:translateX(160%)translateY(160%)rotate(45deg);opacity:0}}
  @keyframes awChroma{0%,90%,100%{opacity:0}45%{opacity:1}}
  @keyframes awGlowPulse{0%,100%{opacity:0.8;transform:scale(1)}50%{opacity:0.3;transform:scale(1.5)}}

  /* === SIGNAL INTERFERENCE === */
  .if-base{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .05s}
  .if-base.active{opacity:1}
  .if-static{background:repeating-radial-gradient(circle at 20% 20%,transparent 0,rgba(255,255,255,0.15) 1px,transparent 2px),repeating-radial-gradient(circle at 80% 80%,transparent 0,rgba(255,255,255,0.12) 1px,transparent 3px),repeating-radial-gradient(circle at 50% 50%,transparent 0,rgba(255,255,255,0.08) 1px,transparent 2px);animation:staticFlickerDim 0.09s steps(2) infinite}
  .if-wobble{background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.03) 4px);animation:wobbleShift 0.08s steps(3) infinite}
  .if-flicker{background:rgba(255,255,255,0.06);animation:flickerPulse 0.06s steps(2) infinite}
  .if-chromatic{background:linear-gradient(90deg,rgba(255,0,0,0.08) 0%,transparent 33%,transparent 66%,rgba(0,255,255,0.08) 100%);animation:chromaDrift 0.15s ease-in-out infinite alternate}
  .if-tear{background:linear-gradient(180deg,transparent 48%,rgba(255,255,255,0.2) 49%,rgba(0,0,0,0.3) 50%,transparent 51%,transparent 78%,rgba(255,255,255,0.15) 79%,rgba(0,0,0,0.2) 80%,transparent 81%);animation:tearJitter 0.1s steps(2) infinite}
  .if-ghost{background:rgba(255,255,255,0.02);box-shadow:inset 4px 0 0 rgba(255,0,0,0.04),inset -4px 0 0 rgba(0,255,255,0.04);animation:ghostPulse 0.2s ease-in-out infinite alternate}
  .if-vignette{background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,0.4) 100%);animation:vignettePulse 2s ease-in-out infinite alternate}
  .if-bars::before{content:'';position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,0.15);top:35%;animation:barGlitch 0.12s steps(3) infinite;box-shadow:0 120px 0 rgba(255,255,255,0.1),0 240px 0 rgba(255,255,255,0.08)}

  @keyframes staticFlickerDim{0%,100%{opacity:1}50%{opacity:0.45}}
  @keyframes staticFlicker{0%{background-position:0 0,0 0,0 0}20%{background-position:6px 4px,-5px 3px,3px -4px}40%{background-position:-4px 5px,4px -3px,-6px 2px}60%{background-position:3px -5px,-3px 6px,5px 3px}80%{background-position:-5px -3px,6px -4px,-2px 5px}100%{background-position:0 0,0 0,0 0}}
  @keyframes wobbleShift{0%{transform:translateX(0)}33%{transform:translateX(3px)}66%{transform:translateX(-2px)}100%{transform:translateX(1px)}}
  @keyframes flickerPulse{0%,100%{opacity:0.3}50%{opacity:0.9}}
  @keyframes chromaDrift{0%{transform:translateX(-2px) scaleX(1.002)}100%{transform:translateX(2px) scaleX(1.002)}}
  @keyframes tearJitter{0%{transform:translateY(0)}50%{transform:translateY(1px)}100%{transform:translateY(-1px)}}
  @keyframes ghostPulse{0%{opacity:0.4}100%{opacity:0.8}}
  @keyframes vignettePulse{0%{opacity:0.3}100%{opacity:0.7}}
  @keyframes barGlitch{0%{transform:translateX(0);opacity:1}33%{transform:translateX(10px);opacity:0.5}66%{transform:translateX(-5px);opacity:0.8}100%{transform:translateX(2px);opacity:0.3}}

  /* === CRT GUIDE FX === */
  .crt-fx{position:absolute;inset:0;z-index:11;pointer-events:none}
  .guide-scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.13) 2px,rgba(0,0,0,.13) 3px);opacity:.72}
  /* Fire TV friendly: opacity/transform-only animations (no background-position,
     no filter:blur, no animating box-shadows — those re-rasterize every frame). */
  .guide-bloom{background:radial-gradient(ellipse at 50% 45%,rgba(196,244,255,.035) 0%,rgba(80,190,220,.012) 38%,transparent 68%);animation:bloomPulse 8s ease-in-out infinite;opacity:.7}
  .guide-chroma{background:linear-gradient(90deg,rgba(255,40,90,.055),transparent 22%,transparent 78%,rgba(0,220,255,.065));animation:chromaShift 6s ease-in-out infinite;opacity:.9}
  .guide-noise{opacity:.012;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;animation:noiseFlicker 1.2s steps(3) infinite}
  .guide-ghost{box-shadow:inset 1px 0 0 rgba(255,40,80,.025),inset -1px 0 0 rgba(0,220,255,.03);opacity:.7}
  .guide-flicker{background:rgba(255,255,255,.006);animation:flickerDim 1.2s steps(2) infinite}
  .guide-curve{background:radial-gradient(ellipse at 50% 50%,transparent 74%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.42) 100%);opacity:.85}

  @keyframes bloomPulse{0%,100%{opacity:0.3}50%{opacity:0.7}}
  @keyframes chromaShift{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}
  @keyframes noiseFlicker{0%{opacity:0.03}50%{opacity:0.065}100%{opacity:0.045}}
  @keyframes flickerDim{0%{opacity:0.8}100%{opacity:1}}

  .info-ticker-wrap{flex-shrink:0;background:linear-gradient(90deg,var(--guide-tick-1),var(--guide-tick-2) 52%,var(--guide-tick-3));border:1px solid var(--magenta-glow);border-bottom-color:var(--magenta-glow);border-radius:2px;padding:4px 8px;overflow:hidden;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 5px rgba(var(--guide-accent-rgb),.55),0 0 12px rgba(var(--guide-accent-strong-rgb),.2)}
  .info-ticker{display:flex;gap:120px;animation:infoScroll 52s linear infinite;white-space:nowrap;width:max-content}
  /* Broadcast crawl: the loop point holds briefly (a real tape-stutter) before
     the next pass, instead of an invisible hard cut at the seam. */
  @keyframes infoScroll{0%{transform:translateX(0)}98.5%{transform:translateX(-50%)}100%{transform:translateX(-50%)}}
  .info-tick{font-family:'Share Tech Mono',monospace;font-size:0.9rem;color:var(--guide-text);letter-spacing:0.5px;text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.28),1px 0 rgba(var(--guide-cool-rgb),.32),0 0 6px rgba(255,255,255,.35);animation:infoTickerChroma 5.5s ease-in-out infinite}
  .info-tick-sep{color:var(--guide-accent);align-self:center;font-size:.6rem;margin:0 2px;text-shadow:0 0 8px rgba(var(--guide-accent-strong-rgb),.7)}
  .info-tick-label{font-family:'Orbitron',sans-serif;font-size:0.8rem;color:var(--guide-accent);margin-right:4px;text-shadow:0 0 4px rgba(var(--guide-now-rgb),0.45)}

  .guide-grid{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:5;background:linear-gradient(105deg,var(--guide-grid-1),var(--guide-grid-2) 45%,var(--guide-grid-3) 100%)}
  .time-header{display:flex;flex-shrink:0;border-bottom:2px solid var(--guide-accent-strong);background:linear-gradient(180deg,var(--guide-time-1),var(--guide-time-2) 62%,var(--guide-time-3));z-index:6;position:relative;box-shadow:0 0 8px rgba(var(--guide-accent-strong-rgb),.3),0 2px 8px rgba(0,0,0,.35)}
  .time-header-spacer{width:6rem;min-width:6rem;height:100%;border-right:2px solid var(--magenta-glow);background:linear-gradient(90deg,rgba(var(--guide-accent-strong-rgb),.2),rgba(var(--guide-now-rgb),.04));display:flex;align-items:center;justify-content:center}
  .time-header-guide-label{font-family:var(--guide-sans);font-weight:700;font-size:.6rem;letter-spacing:2px;color:var(--guide-label);text-shadow:0 0 6px rgba(var(--guide-accent-strong-rgb),.7);padding:3px 5px;white-space:nowrap}
  .time-header-slots{flex:1;display:flex;height:100%;border-top:0;box-shadow:none}
  .time-slot{flex:1;min-width:0;padding:3px 6px;border-right:1px solid rgba(var(--guide-slotline-rgb),.28);border-top:2px solid rgba(var(--guide-slotline-rgb),.35);border-radius:0;background:linear-gradient(180deg,rgba(var(--guide-slotline-rgb),.14),rgba(20,18,63,.1) 55%,transparent);box-shadow:inset 0 -1px 0 rgba(var(--guide-now-rgb),.16);font-family:var(--guide-sans);font-weight:600;font-size:.82rem;color:var(--guide-text-dim);letter-spacing:1px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 0 8px rgba(var(--guide-ice-rgb),.28);line-height:1.05;animation:guideTextRgb 5s ease-in-out infinite;position:relative;overflow:hidden}
  /* The current half-hour column is the functional readout: cyan + a shimmer
     running down its left edge. Pink stays on branding (logo/ticker/borders),
     cyan owns selection. */
  .time-slot.time-now{border-top-color:var(--guide-now);background:linear-gradient(180deg,rgba(var(--guide-now-rgb),.3),rgba(var(--guide-now-base-rgb),.16) 55%,transparent);box-shadow:inset 0 -1px 0 rgba(var(--guide-now-rgb),.5),0 -4px 12px rgba(var(--guide-now-rgb),.25);color:var(--guide-text-now);text-shadow:0 0 10px rgba(var(--guide-now-rgb),.7)}
  .time-slot.time-now::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent,var(--guide-now),transparent);opacity:.9;animation:guideColShimmer 3.2s ease-in-out infinite;pointer-events:none}
  @keyframes guideColShimmer{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
  .guide-rows-container{flex:1;overflow:hidden;position:relative}
  /* Refresh scan: a faint cyan band slowly drifting down the schedule — the
     broadcast "sweep" that keeps the grid feeling live. */
  .guide-scan{position:absolute;left:6rem;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,rgba(var(--guide-now-rgb),.28),rgba(var(--guide-ice-rgb),.55),rgba(var(--guide-now-rgb),.28),transparent);opacity:.6;animation:guideScan 7s linear infinite;pointer-events:none;z-index:4}
  @keyframes guideScan{0%{top:0}100%{top:100%}}
  .guide-rows{position:absolute;top:0;left:0;right:0;height:250%;display:flex;flex-direction:column;animation:guideRowsScroll 24s linear infinite}
  @keyframes guideRowsScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

  /* 6 guide channels (incl. ch 2) = 12 rows at 8.333% of the 250% track = seamless loop */
  .guide-row{display:flex;align-items:stretch;height:8.333333%;min-height:0;border-bottom:1px solid rgba(var(--guide-line-rgb),.25);box-sizing:border-box}
  .guide-row:last-child{border-bottom:none}
  .row-label{width:6rem;min-width:6rem;display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,var(--guide-rail-1),var(--guide-rail-2) 52%,var(--guide-rail-3));border-right:2px solid var(--magenta-glow);font-family:var(--guide-sans);font-weight:700;font-size:.74rem;color:var(--guide-label);letter-spacing:2px;text-align:center;padding:1px 3px;z-index:6;text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.5),1px 0 rgba(var(--guide-cool-rgb),.62),0 0 6px rgba(var(--guide-accent-strong-rgb),.45);box-shadow:inset -1px 0 rgba(255,255,255,.14),2px 0 8px rgba(var(--guide-accent-strong-rgb),.18);position:relative;overflow:hidden}
  .row-label::after{content:'';position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);animation:railSheen 5s ease-in-out infinite;pointer-events:none}
  @keyframes railSheen{0%,100%{transform:translateY(-120%)}50%{transform:translateY(240%)}}
  .row-name{flex:1;min-width:0}
  .row-scroll{flex:1;overflow:hidden;position:relative}
  .row-track{display:flex;width:100%;height:100%}
  .guide-block{flex:1;min-width:0;padding:3px 6px;border-right:1px solid rgba(var(--guide-line-rgb),.28);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;position:relative;transition:background .2s,text-shadow .2s;text-align:center}
  .guide-block.current-block{background:linear-gradient(135deg,rgba(var(--guide-now-rgb),.5),rgba(var(--guide-now-mid-rgb),.3) 50%,rgba(var(--guide-now-deep-rgb),.26));box-shadow:inset 3px 0 0 var(--guide-now),inset 0 -2px 0 rgba(var(--guide-now-rgb),.75),inset 0 0 18px rgba(var(--guide-now-rgb),.16),0 0 10px rgba(var(--guide-now-rgb),.25)}
  /* The hero breathes: a soft cyan wash pulses behind the current program
     (opacity-only, compositor-cheap) so the NOW cell clearly owns the screen. */
  .guide-block.current-block::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--guide-now-rgb),.32),rgba(var(--guide-now-rgb),.05) 55%,transparent);opacity:.35;animation:guideBlockBreath 4.2s ease-in-out infinite;pointer-events:none}
  @keyframes guideBlockBreath{0%,100%{opacity:.3}50%{opacity:.8}}
  .guide-block.current-block .block-title{color:#fff;text-shadow:0 0 6px rgba(var(--guide-now-rgb),.65)}
  .block-title{position:relative;z-index:1}
  .block-title{font-family:var(--guide-sans);font-weight:600;font-size:0.7rem;color:rgba(255,255,255,0.92);white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:0.4px;line-height:1.15;text-align:center;width:100%;word-break:break-word;text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.5),1px 0 rgba(var(--guide-cool-rgb),.6),0 0 4px rgba(var(--guide-ice-rgb),.18);animation:guideTextRgb 5.5s ease-in-out infinite reverse}

  /* Phosphor bloom: a warm center glow in screen-blend, so bright picture areas
     bleed/glow like CRT phosphors while dark areas stay dark. One blend pass;
     the slow opacity pulse is compositor-cheap. */
  .crt-bloom{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 45%,rgba(180,240,255,.045) 0%,rgba(100,200,225,.016) 34%,transparent 66%);animation:crtBloomPulse 10s ease-in-out infinite}
  @keyframes crtBloomPulse{0%,100%{opacity:0.6}50%{opacity:1}}

  /* Stage CRT glass: fine scanlines + RGB aperture grille, a center-bulge
     vignette (brighter center, darker edges = physically bent tube), all static
     (rasterized once), with a subtle AC-power opacity flicker. */
  .crt-overlay{position:absolute;inset:0;z-index:5;pointer-events:none;background:
      radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.3) 100%),
      repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px),
      repeating-linear-gradient(90deg,rgba(255,30,70,.018) 0 1px,transparent 1px 3px,rgba(0,220,255,.018) 3px 4px,transparent 4px 6px);animation:crtFlicker .8s steps(2) infinite;opacity:.9}
  @keyframes crtFlicker{0%{opacity:0.95}100%{opacity:1}}

  /* CRT glass curvature: rounded tube corners + a dark glass edge, plus a mild
     saturation/contrast pop (phosphor colors were vivid). Only in retro mode
     (HD mode keeps a clean rectangle). Static, zero per-frame cost. */
  .stage:not(.hd-mode){border-radius:3%/5%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.62),inset 0 0 82px rgba(0,0,0,.42),0 0 0 1px rgba(150,230,255,.06);filter:saturate(1.06) contrast(1.025)}

  /* Rolling scanline bar — a bright band sweeping down the tube (transform-only). */
  .crt-rollbar{position:absolute;left:0;right:0;top:0;height:16vh;z-index:6;pointer-events:none;will-change:transform;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.055) 40%,rgba(255,255,255,0.11) 50%,rgba(255,255,255,0.055) 60%,transparent 100%);transform:translateY(-18vh);animation:crtRoll 8s linear infinite}
  @keyframes crtRoll{to{transform:translateY(120vh)}}
  .guide-static{position:absolute;inset:0;z-index:12;background:#000;display:none;pointer-events:none}
  .guide-static.active{display:block;animation:staticFlicker 0.03s steps(6) infinite}
  .guide-static::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 20% 20%,transparent 0,rgba(255,255,255,0.25) 1px,transparent 2px),repeating-radial-gradient(circle at 80% 80%,transparent 0,rgba(255,255,255,0.2) 1px,transparent 3px),repeating-radial-gradient(circle at 50% 50%,transparent 0,rgba(200,200,200,0.15) 1px,transparent 2px)}
  .guide-static::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.04);animation:flickerPulse 0.06s steps(2) infinite}
  

  .flash-overlay{position:absolute;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
  .flash-overlay.active{animation:flashPop 0.12s ease-out forwards}
  @keyframes flashPop{0%{opacity:0}15%{opacity:0.4}40%{opacity:0.15}100%{opacity:0}}

  .stage.shaking{animation:screenShake 0.1s steps(2) 2}
  @keyframes screenShake{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-1px,2px)}75%{transform:translate(-2px,-1px)}}

  .net-logo{position:absolute;top:18px;left:22px;left:max(22px,env(safe-area-inset-left,0px));z-index:20;pointer-events:none;opacity:0;transition:opacity .4s;filter:drop-shadow(-1px 0 0 rgba(var(--guide-warm-rgb),.55)) drop-shadow(1px 0 0 rgba(var(--guide-cool-rgb),.65)) drop-shadow(1px 1px 0 var(--guide-hud-depth)) drop-shadow(0 0 7px rgba(var(--guide-now-rgb),.45))}
  .net-logo.show{opacity:1}
  .net-logo svg{width:7rem;height:auto;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
  .net-logo svg text{fill:var(--guide-hud-text)}

  .ch-number{position:absolute;top:14px;right:22px;right:max(22px,env(safe-area-inset-right,0px));z-index:20;text-align:right;pointer-events:none;opacity:0;transition:opacity .3s}
  .ch-number.show{opacity:1}
  .ch-number::before{display:none}
  .ch-digit{display:inline-block;min-width:3.4rem;padding:0;font-family:'Press Start 2P',monospace;font-size:2.35rem;color:var(--guide-hud-text);line-height:1.1;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:-1px 0 0 rgba(var(--guide-warm-rgb),.7),1px 0 0 rgba(var(--guide-cool-rgb),.8),1px 1px 0 var(--guide-hud-depth),0 0 8px rgba(var(--guide-ice-rgb),.75);letter-spacing:2px}

  .info-bar{position:absolute;bottom:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(20px);z-index:25;width:88%;max-width:720px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
  .info-bar.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .info-card{display:flex;background:linear-gradient(145deg,var(--guide-panel-1) 0%,var(--guide-panel-2) 55%,var(--guide-panel-3) 100%);border:2px solid var(--guide-accent);box-shadow:-2px 0 0 rgba(var(--guide-warm-rgb),.5),2px 0 0 rgba(var(--guide-cool-rgb),.6),0 6px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),0 0 14px rgba(var(--guide-accent-rgb),.22);overflow:hidden}
  .info-dither{width:3rem;min-width:36px;background:#000;position:relative;flex-shrink:0}
  .info-dither::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(var(--guide-accent-rgb),.9) 1px,transparent 1px);background-size:3px 3px;opacity:.5}
  .info-dither::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.08) 2px,rgba(255,255,255,.08) 4px)}
  .info-body{flex:1;padding:8px 12px 6px;display:flex;flex-direction:column;justify-content:center;position:relative}
  .info-body::after{content:'NOW PLAYING';position:absolute;top:5px;right:10px;font-family:'Share Tech Mono',monospace;font-size:.55rem;color:var(--guide-label);letter-spacing:1.5px;opacity:.85}
  .info-title{font-family:'Orbitron',sans-serif;font-size:1.2rem;color:var(--guide-hud-text);letter-spacing:1px;line-height:1.3;margin-bottom:2px;text-transform:uppercase;text-shadow:-.5px 0 rgba(var(--guide-warm-rgb),.35),.5px 0 rgba(var(--guide-cool-rgb),.45),1px 1px 0 var(--guide-hud-depth)}
  .info-sub{font-family:'VT323',monospace;font-size:1.35rem;color:var(--guide-text-ice);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;line-height:1.2}
  .info-desc{font-family:'VT323',monospace;font-size:1.1rem;color:var(--guide-text-dim);line-height:1.3;letter-spacing:0.5px}
  .info-badge{width:4.5rem;min-width:56px;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;flex-shrink:0;border-left:2px solid rgba(var(--guide-accent-rgb),.55);box-shadow:inset 3px 0 0 rgba(var(--guide-accent-rgb),.5)}
  .badge-logo{font-family:'Orbitron',sans-serif;font-size:1.15rem;color:var(--guide-accent);letter-spacing:1px;line-height:1}
  .badge-sub{font-family:'VT323',monospace;font-size:0.9rem;color:var(--guide-ice);letter-spacing:2px;text-transform:uppercase;margin-top:2px;opacity:0.8}

  .touch-zone{position:absolute;top:0;bottom:0;width:20%;z-index:15;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .touch-zone.left{left:0}
  .touch-zone.right{right:0}

  
  /* === HD MODE: hide all retro overlays === */
  .stage.hd-mode .crt-overlay,
  .stage.hd-mode .interference-layer,
  .stage.hd-mode .guide-static,
  .stage.hd-mode .tuning-static,
  .stage.hd-mode .tuning-overlay,
  .stage.hd-mode .flash-overlay,
  .stage.hd-mode .guide-crt,
  .stage.hd-mode .crt-fx,
  .stage.hd-mode .guide-scanlines,
  .stage.hd-mode .guide-bloom,
  .stage.hd-mode .guide-chroma,
  .stage.hd-mode .guide-noise,
  .stage.hd-mode .guide-ghost,
  .stage.hd-mode .guide-flicker,
  .stage.hd-mode .guide-curve,
  .stage.hd-mode .crt-rollbar,
  .guide-settings{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(2,5,18,.78);backdrop-filter:blur(3px);pointer-events:auto}
  .guide-settings.show{display:flex}
  .guide-settings-panel{width:min(88%,30rem);display:flex;background:linear-gradient(145deg,var(--guide-panel-1) 0%,var(--guide-panel-2) 55%,var(--guide-panel-3) 100%);border:2px solid var(--guide-accent);box-shadow:-2px 0 0 rgba(var(--guide-warm-rgb),.5),2px 0 0 rgba(var(--guide-cool-rgb),.6),0 8px 28px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(var(--guide-accent-rgb),.22);overflow:hidden;text-align:left}
  .guide-settings-panel::before{content:'';width:3rem;min-width:36px;background:#000;background-image:radial-gradient(circle,rgba(var(--guide-accent-rgb),.8) 1px,transparent 1px);background-size:3px 3px;opacity:.5}
  .guide-settings-content{flex:1;padding:12px 15px 12px;position:relative}
  .guide-settings-title{font-family:'Orbitron',sans-serif;color:var(--guide-text);font-size:1.05rem;letter-spacing:2px;line-height:1.3;text-shadow:-1px 0 rgba(var(--guide-warm-rgb),.55),1px 0 rgba(var(--guide-cool-rgb),.65),0 0 10px rgba(var(--guide-now-rgb),.4)}
  .guide-settings-hint{margin:3px 0 9px;font-family:'Share Tech Mono',monospace;color:var(--guide-text-dim);font-size:.78rem;letter-spacing:3px;text-transform:uppercase}
  .guide-theme-swatches{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 4px 4px;margin-bottom:2px}
  .guide-theme-swatches .tswatch{width:20px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 6px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
  .guide-theme-swatches .tswatch.active{border-color:#fff;transform:scale(1.22);box-shadow:0 0 8px rgba(255,255,255,.55),inset 0 0 6px rgba(0,0,0,.3)}
  .guide-theme-swatches .tswatch.active::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #fff}
  .guide-theme-selector{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,0,0,.34);border-top:1px solid rgba(var(--guide-accent-rgb),.4);border-bottom:1px solid rgba(var(--guide-accent-rgb),.4);padding:6px 0}
  .guide-theme-current{flex:1;text-align:center;font-family:'Orbitron',sans-serif;font-size:.7rem;color:var(--guide-text);letter-spacing:2px;text-shadow:0 0 8px rgba(var(--guide-now-rgb),.7)}
  .guide-theme-arrow{font-family:'VT323',monospace;font-size:1.5rem;line-height:1;color:var(--guide-text-bright);background:rgba(0,0,0,.5);border:1px solid rgba(var(--guide-accent-rgb),.6);padding:4px 12px;cursor:pointer;box-shadow:inset 2px 0 0 rgba(var(--guide-accent-rgb),.5),0 0 8px rgba(var(--guide-accent-rgb),.25)}
  .guide-theme-arrow:active{background:rgba(var(--guide-accent-rgb),.22)}
  .guide-settings-close{margin:10px 0 0;font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:3px;color:var(--guide-label);background:rgba(0,0,0,.4);border:1px solid rgba(var(--guide-accent-rgb),.45);padding:4px 10px;cursor:pointer;width:100%;text-align:center}
  .guide-settings-panel::after{content:'TV SETTINGS';width:4.5rem;min-width:56px;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0;border-left:2px solid rgba(var(--guide-accent-rgb),.5);font-family:'VT323',monospace;font-size:1rem;letter-spacing:1px;color:var(--guide-ice);writing-mode:vertical-rl}

  .stage.hd-mode .crt-bloom {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  /* Center touch zone for mode toggle */
  .touch-center{position:absolute;top:0;bottom:0;left:20%;right:20%;z-index:14;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}

  /* Mode OSD */
  /* Broadcast status chip: mute/volume feedback reads as an on-air indicator,
     not a phone toast — bottom-right, small, dark, mono. */
  .mode-osd{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;font-family:'Share Tech Mono',monospace;font-size:.78rem;color:#fff;letter-spacing:2px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.35);padding:3px 10px;border-radius:2px;box-shadow:0 0 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .2s,transform .2s}
  .mode-osd.show{opacity:1;transform:translateY(0)}
  .update-osd{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);z-index:40;font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:2px;color:var(--guide-text-bright);text-shadow:0 0 12px rgba(var(--guide-accent-rgb),.6);background:rgba(0,0,0,.55);padding:7px 14px;border:1px solid rgba(var(--guide-accent-rgb),.3);border-radius:4px;opacity:0;pointer-events:none;transition:opacity .3s}
  .update-osd.show{opacity:1}
  .stage.hd-mode .mode-osd{color:#fff;text-shadow:none}

  /* HD mode: clean crossfade transitions */
  .stage.hd-mode #tvVideo{transition:opacity .15s ease}
  .stage.hd-mode #guideScreen{transition:opacity .15s ease}

  .rotate-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}
  .rotate-overlay svg{width:60px;height:60px;margin-bottom:16px;animation:rotatePhone 2s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(57,255,20,0.4))}
  .rotate-overlay p{font-family:'Orbitron',sans-serif;font-size:1rem;color:#39ff14;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 10px rgba(57,255,20,0.5);line-height:1.6}
  .rotate-overlay span{font-family:'VT323',monospace;font-size:0.9rem;color:rgba(57,255,20,0.6);letter-spacing:2px}
  @keyframes rotatePhone{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
  /* Show the rotate prompt only on touch devices held in portrait (coarse = phones/tablets) */
  @media (orientation: portrait) and (pointer: coarse) {
    .rotate-overlay{display:flex}
  }

  /* === EBS TEST INTERRUPTION === */
  .ebs-overlay{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;background:#000;padding:20px}
  .ebs-overlay.active{display:flex}
  .ebs-card{max-width:620px;width:92%;border:3px solid var(--guide-accent);background:#05050f;padding:28px 32px;text-align:center;box-shadow:0 0 40px rgba(var(--guide-accent-strong-rgb),0.18),inset 0 0 60px rgba(0,0,0,0.8);animation:ebsFlicker 4s steps(2) infinite}
  .ebs-seal{width:72px;height:72px;margin:0 auto 12px;border:3px solid var(--guide-text-bright);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(var(--guide-accent-rgb),0.45),inset 0 0 12px rgba(var(--guide-now-rgb),0.25)}
  .ebs-seal-text{font-family:'Orbitron',sans-serif;font-size:1.4rem;color:var(--guide-text-bright);letter-spacing:2px;text-shadow:0 0 12px rgba(var(--guide-accent-rgb),0.8)}
  .ebs-title{font-family:'Orbitron',sans-serif;font-size:0.95rem;color:var(--guide-label);letter-spacing:4px;margin-bottom:14px;text-shadow:0 0 8px rgba(var(--guide-accent-strong-rgb),0.5)}
  .ebs-test{font-family:'Press Start 2P',monospace;font-size:1.9rem;color:#ffffff;letter-spacing:3px;line-height:1.4;margin-bottom:18px;text-shadow:0 0 14px rgba(255,255,255,0.7),0 0 40px rgba(var(--guide-accent-strong-rgb),0.4)}
  .ebs-body{font-family:'VT323',monospace;font-size:1.25rem;color:var(--guide-text-dim);line-height:1.5;letter-spacing:0.5px;margin-bottom:18px}
  .ebs-footer{font-family:'Share Tech Mono',monospace;font-size:0.95rem;color:var(--guide-text-bright);letter-spacing:3px;text-shadow:0 0 8px rgba(var(--guide-accent-rgb),0.5)}
  @keyframes ebsFlicker{0%,100%{opacity:1}50%{opacity:0.92}}

/* === LOADING OVERLAY === */
  .loading-overlay{position:absolute;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .6s,visibility 0s}
  /* display:none would kill the opacity transition — use visibility + a delayed
     swap so the boot screen actually fades out instead of popping away. */
  .loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility 0s .6s}
  .loading-retro{position:relative;width:15rem;height:10rem;display:flex;align-items:center;justify-content:center;perspective:400px;margin-bottom:20px}
  .loading-retro-box{position:relative;width:100%;height:100%;border:1px solid var(--guide-ice);border-radius:3px;background:linear-gradient(145deg,var(--guide-retrobox-1),var(--guide-retrobox-2));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 30px rgba(var(--guide-now-rgb),.1),0 0 20px rgba(var(--guide-now-rgb),.18),5px 5px 0 rgba(var(--guide-accent-strong-rgb),.14);overflow:hidden}
  .loading-retro .aw-retro-text{display:none}
  .loading-retro .aw-logo-wordmark{width:92%;height:70%;padding-left:3%;padding-right:3%;overflow:visible}
  .loading-retro .aw-word-main,.loading-retro .aw-word-ghost{font-size:clamp(1.8rem,6vw,3.6rem)}
  /* Station-ID wordmark under the AW mark: an inline SVG lockup whose letters
     carry the app icon's SMPTE color-bar palette, so it scales crisply (Steam
     Deck) and echoes the icon. */
  .loading-brand{display:flex;justify-content:center;margin-top:8px}
  .loading-brand-box{position:relative;width:min(60vw,21rem);height:auto;display:block;filter:drop-shadow(0 0 10px rgba(255,255,255,0.18))}
  /* Glow lives on the wrapper: awRetroPulse animates `filter` on the svg, which
     would clobber a drop-shadow there. */
  .loading-brand svg{display:block;width:100%;height:auto;animation:awRetroPulse 2.5s ease-in-out infinite}
  /* CRT light sweep across the wordmark — same band + keyframes as the retro
     box, so the lockup reads as a living station ID. */
  .loading-brand-scan{position:absolute;top:0;left:-100%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--guide-accent-strong-rgb),0.2),rgba(255,255,255,0.08),rgba(var(--guide-now-rgb),0.2),transparent);animation:awRetroScan 2s linear infinite;z-index:2;pointer-events:none}
  .loading-brand-scan-slow{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--guide-now-rgb),0.07),transparent);animation:awRetroScan 5s linear infinite 1s;z-index:2;pointer-events:none}
  /* Boot preload progress: fills as each channel's media is warmed in the
     background, so the station-ID hold reads as real work, not a stuck screen. */
  .loading-status{font-family:'Share Tech Mono',monospace;font-size:0.95rem;color:var(--guide-label);letter-spacing:2px;margin-top:10px;text-shadow:0 0 8px rgba(var(--guide-accent-strong-rgb),0.55),0 0 16px rgba(var(--guide-now-rgb),0.25)}
  .loading-bar{width:min(60vw,21rem);height:6px;margin-top:14px;background:rgba(var(--guide-accent-strong-rgb),0.14);border:1px solid rgba(var(--guide-accent-rgb),0.5);border-radius:3px;overflow:hidden;box-shadow:0 0 10px rgba(var(--guide-accent-strong-rgb),0.2)}
  .loading-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--guide-accent-strong),var(--guide-ice));box-shadow:0 0 8px rgba(var(--guide-accent-strong-rgb),0.65),0 0 16px rgba(var(--guide-now-rgb),0.35);transition:width .3s}
  .loading-pct{font-family:'Share Tech Mono',monospace;font-size:0.8rem;color:var(--guide-text-bright);letter-spacing:2px;margin-top:8px;text-shadow:0 0 8px rgba(var(--guide-accent-rgb),0.55),0 0 14px rgba(var(--guide-now-rgb),0.3)}
  /* Full-overlay CRT raster: fine dark lines that cut the glow (authentic —
     they read on the lit AW box + wordmark, invisible on pure black) plus a
     whisper-light line so the raster is perceptible across the whole screen.
     The layer is inset past the edges and drifts down exactly one 4px pattern
     period per loop, so the roll is seamless; transform-only, compositor-cheap. */
  .loading-overlay::before{content:'';position:absolute;inset:-8px;z-index:10;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 1px,rgba(0,0,0,0.13) 1px 2px,transparent 2px 3px,rgba(255,255,255,0.035) 3px 4px);animation:rasterRoll 3s linear infinite;will-change:transform}
  @keyframes rasterRoll{from{transform:translateY(-4px)}to{transform:translateY(0)}}

  /* === BLUE SCREEN TRANSITION === */
  .blue-transition{position:absolute;inset:0;z-index:20;background:#0000aa;display:none;pointer-events:none;opacity:0}
  .blue-transition.active{display:block;opacity:1}
  .blue-transition.fading{opacity:0;transition:none}

  
  /* === STEAM DECK / BIG PICTURE (tenfoot) POLISH === */
  /* The Deck's screen is 16:10 (1280x800). .stage already letterboxes the TV
     frame to 16:9 via its max-width/max-height calc, so on 16:10 the picture
     sits in pure-black bars — the Deck's own bezel — instead of stretching or
     clipping any UI. Tenfoot mode additionally hides the mouse cursor so
     nothing overlays the TV. */
  html.tenfoot, html.tenfoot * { cursor: none !important; }
  html.tenfoot .viewport { background: #000; }

  /* === REDUCED MOTION (accessibility + battery on low-power devices) === */

  @media (prefers-reduced-motion: reduce) {
    .crt-overlay, .crt-bloom, .crt-rollbar, .crt-fx,
    .interference-layer, .guide-static, .loading-overlay,
    .flash-overlay.active, .stage.shaking { animation: none !important; }
    .guide-rows, .info-ticker { animation-duration: 400s; } /* crawl instead of scroll */
  }

  /* === GUIDE THEMES ===
     One override layer per theme: every block redefines the semantic guide
     palette (plus the legacy glow vars still used in a few spots), and the
     whole UI follows because the base rules all read var(--guide-*). No
     per-rule overrides, so nothing leaks between themes. The default Y2K
     values live in :root — no block needed for data-guide-theme="y2k". */

  :root[data-guide-theme="matrix"]{
    --guide-accent-rgb:57,255,20; --guide-accent-strong-rgb:0,255,65;
    --guide-now-rgb:0,255,65; --guide-ice-rgb:182,255,216;
    --guide-warm-rgb:57,255,20; --guide-cool-rgb:150,255,170;
    --guide-line-rgb:57,255,20; --guide-slotline-rgb:57,255,20;
    --guide-chroma-r-rgb:57,255,20; --guide-chroma-c-rgb:150,255,170;
    --guide-bg-1:rgba(2,10,4,.95); --guide-bg-2:rgba(0,8,2,.92);
    --guide-bg-3:rgba(4,16,6,.93); --guide-bg-4:rgba(0,4,1,.96);
    --guide-bg-radial:rgba(57,255,20,.14);
    --guide-top-1:rgba(8,24,12,.99); --guide-top-2:rgba(2,14,6,.98); --guide-top-3:rgba(16,36,14,.99);
    --guide-prev-1:#021006; --guide-prev-2:#04180a; --guide-prev-3:#06220e;
    --guide-panel-1:#031408; --guide-panel-2:#010c04; --guide-panel-3:#062010;
    --guide-retrobox-1:rgba(4,20,10,.98); --guide-retrobox-2:rgba(1,8,3,1);
    --guide-grid-1:rgba(2,12,6,.98); --guide-grid-2:rgba(1,8,3,.95); --guide-grid-3:rgba(5,20,10,.95);
    --guide-rail-1:rgba(57,255,20,.18); --guide-rail-2:rgba(0,80,30,.2); --guide-rail-3:rgba(150,255,170,.1);
    --guide-tick-1:rgba(3,14,7,.96); --guide-tick-2:rgba(1,8,3,.96); --guide-tick-3:rgba(5,22,12,.96);
    --guide-time-1:rgba(4,18,10,.98); --guide-time-2:rgba(2,10,5,.98); --guide-time-3:rgba(0,5,2,.99);
    --guide-text:#eaffea; --guide-text-dim:#b8e6b8; --guide-text-soft:#9fd49f;
    --guide-text-ice:#d4ffdd; --guide-text-now:#eaffea; --guide-text-bright:#ffffff;
    --guide-label:#7dff9a; --guide-title-depth:#0a5c1e;
    --guide-logo-grad:linear-gradient(110deg,#062e0c 0%,#39ff14 22%,#eaffea 35%,#a4ff8a 47%,#00c853 68%,#eaffea 78%,#063a10 100%);
    --guide-hud-text:#eaffea; --guide-hud-depth:#0a5c1e;
    --guide-now-mid-rgb:0,140,50; --guide-now-deep-rgb:0,100,40; --guide-now-base-rgb:0,60,25;
    --cyan-glow:#39ff14; --magenta-glow:#00ff41; --y2k-ice:#b6ffd8;
    --y2k-blue:#031408; --y2k-pink:#39ff14; --yellow:#b6ffd8; --yellow-bright:#eaffea;
  }

  :root[data-guide-theme="amber"]{
    --guide-accent-rgb:255,176,0; --guide-accent-strong-rgb:255,140,0;
    --guide-now-rgb:255,210,87; --guide-ice-rgb:255,233,173;
    --guide-warm-rgb:255,140,0; --guide-cool-rgb:255,210,120;
    --guide-line-rgb:255,176,0; --guide-slotline-rgb:210,170,90;
    --guide-chroma-r-rgb:255,140,0; --guide-chroma-c-rgb:255,210,120;
    --guide-bg-1:rgba(24,12,0,.94); --guide-bg-2:rgba(14,6,0,.92);
    --guide-bg-3:rgba(34,18,2,.93); --guide-bg-4:rgba(8,4,0,.96);
    --guide-bg-radial:rgba(255,176,0,.12);
    --guide-top-1:rgba(60,30,0,.99); --guide-top-2:rgba(30,16,0,.98); --guide-top-3:rgba(80,44,2,.99);
    --guide-prev-1:#201000; --guide-prev-2:#2c1600; --guide-prev-3:#3a1f00;
    --guide-panel-1:#221000; --guide-panel-2:#120a00; --guide-panel-3:#301800;
    --guide-retrobox-1:rgba(40,20,0,.98); --guide-retrobox-2:rgba(12,6,0,1);
    --guide-grid-1:rgba(24,12,0,.98); --guide-grid-2:rgba(12,6,0,.95); --guide-grid-3:rgba(40,22,2,.95);
    --guide-rail-1:rgba(255,176,0,.18); --guide-rail-2:rgba(120,60,0,.2); --guide-rail-3:rgba(255,210,120,.1);
    --guide-tick-1:rgba(28,14,0,.96); --guide-tick-2:rgba(14,7,0,.96); --guide-tick-3:rgba(44,24,2,.96);
    --guide-time-1:rgba(32,16,0,.98); --guide-time-2:rgba(18,9,0,.98); --guide-time-3:rgba(8,4,0,.99);
    --guide-text:#fff3d6; --guide-text-dim:#ecd8a8; --guide-text-soft:#d9c08c;
    --guide-text-ice:#ffe9ad; --guide-text-now:#fff8e0; --guide-text-bright:#fff8e0;
    --guide-label:#ffce5c; --guide-title-depth:#7a4a00;
    --guide-logo-grad:linear-gradient(110deg,#6b3800 0%,#ffb000 22%,#fff3d6 35%,#ffd257 47%,#d97b00 68%,#fff3d6 78%,#7a4200 100%);
    --guide-hud-text:#fff8e0; --guide-hud-depth:#7a4a00;
    --guide-now-mid-rgb:160,120,40; --guide-now-deep-rgb:110,80,25; --guide-now-base-rgb:80,55,15;
    --cyan-glow:#ffd257; --magenta-glow:#ffb000; --y2k-ice:#ffe9ad;
    --y2k-blue:#221000; --y2k-pink:#ffb000; --yellow:#ffd257; --yellow-bright:#fff3d6;
  }

  :root[data-guide-theme="guide90"]{
    --guide-accent-rgb:255,230,0; --guide-accent-strong-rgb:255,190,0;
    --guide-now-rgb:255,230,0; --guide-ice-rgb:255,247,176;
    --guide-warm-rgb:255,190,0; --guide-cool-rgb:120,170,255;
    --guide-line-rgb:255,230,0; --guide-slotline-rgb:180,200,255;
    --guide-chroma-r-rgb:255,230,0; --guide-chroma-c-rgb:120,170,255;
    --guide-bg-1:rgba(10,18,52,.94); --guide-bg-2:rgba(6,12,40,.92);
    --guide-bg-3:rgba(18,28,70,.93); --guide-bg-4:rgba(4,8,28,.96);
    --guide-bg-radial:rgba(255,230,0,.10);
    --guide-top-1:rgba(20,32,90,.99); --guide-top-2:rgba(10,20,60,.98); --guide-top-3:rgba(40,50,120,.99);
    --guide-prev-1:#0a1440; --guide-prev-2:#101c56; --guide-prev-3:#182868;
    --guide-panel-1:#0c1650; --guide-panel-2:#080e38; --guide-panel-3:#16206a;
    --guide-retrobox-1:rgba(16,24,70,.98); --guide-retrobox-2:rgba(4,6,24,1);
    --guide-grid-1:rgba(10,16,52,.98); --guide-grid-2:rgba(6,10,36,.95); --guide-grid-3:rgba(22,32,86,.95);
    --guide-rail-1:rgba(255,230,0,.16); --guide-rail-2:rgba(40,60,160,.2); --guide-rail-3:rgba(255,247,176,.1);
    --guide-tick-1:rgba(14,22,64,.96); --guide-tick-2:rgba(7,11,38,.96); --guide-tick-3:rgba(24,34,88,.96);
    --guide-time-1:rgba(16,26,70,.98); --guide-time-2:rgba(8,12,42,.98); --guide-time-3:rgba(4,6,24,.99);
    --guide-text:#ffffff; --guide-text-dim:#dfe8ff; --guide-text-soft:#c2d0f2;
    --guide-text-ice:#fff7b0; --guide-text-now:#fffde6; --guide-text-bright:#ffffff;
    --guide-label:#ffe600; --guide-title-depth:#2a4a9a;
    --guide-logo-grad:linear-gradient(110deg,#9a8000 0%,#ffe600 22%,#fffde6 35%,#fff48a 47%,#e0c400 68%,#fffde6 78%,#b39900 100%);
    --guide-hud-text:#ffffff; --guide-hud-depth:#2a4a9a;
    --guide-now-mid-rgb:140,120,0; --guide-now-deep-rgb:90,80,0; --guide-now-base-rgb:60,50,0;
    --cyan-glow:#ffe600; --magenta-glow:#ffe600; --y2k-ice:#fff7b0;
    --y2k-blue:#0c1650; --y2k-pink:#ffe600; --yellow:#fff7b0; --yellow-bright:#ffffff;
  }

  :root[data-guide-theme="vapor"]{
    --guide-accent-rgb:255,46,196; --guide-accent-strong-rgb:176,38,255;
    --guide-now-rgb:0,229,255; --guide-ice-rgb:168,240,255;
    --guide-warm-rgb:255,46,196; --guide-cool-rgb:0,229,255;
    --guide-line-rgb:255,46,196; --guide-slotline-rgb:140,150,255;
    --guide-chroma-r-rgb:255,46,196; --guide-chroma-c-rgb:0,229,255;
    --guide-bg-1:rgba(22,8,44,.94); --guide-bg-2:rgba(14,5,32,.92);
    --guide-bg-3:rgba(36,12,60,.93); --guide-bg-4:rgba(8,3,20,.96);
    --guide-bg-radial:rgba(255,46,196,.12);
    --guide-top-1:rgba(60,20,120,.99); --guide-top-2:rgba(30,10,80,.98); --guide-top-3:rgba(110,30,140,.99);
    --guide-prev-1:#160a30; --guide-prev-2:#1e0e40; --guide-prev-3:#281252;
    --guide-panel-1:#180a34; --guide-panel-2:#0e0524; --guide-panel-3:#261044;
    --guide-retrobox-1:rgba(26,10,52,.98); --guide-retrobox-2:rgba(8,3,18,1);
    --guide-grid-1:rgba(20,8,42,.98); --guide-grid-2:rgba(12,5,28,.95); --guide-grid-3:rgba(34,14,64,.95);
    --guide-rail-1:rgba(255,46,196,.18); --guide-rail-2:rgba(120,20,120,.2); --guide-rail-3:rgba(168,240,255,.1);
    --guide-tick-1:rgba(26,10,52,.96); --guide-tick-2:rgba(13,5,28,.96); --guide-tick-3:rgba(40,16,74,.96);
    --guide-time-1:rgba(28,12,56,.98); --guide-time-2:rgba(16,6,34,.98); --guide-time-3:rgba(6,3,16,.99);
    --guide-text:#f5e6ff; --guide-text-dim:#d6c8ee; --guide-text-soft:#bfaede;
    --guide-text-ice:#a8f0ff; --guide-text-now:#e6f6ff; --guide-text-bright:#ffffff;
    --guide-label:#ff9ef0; --guide-title-depth:#5a2a9a;
    --guide-logo-grad:linear-gradient(110deg,#4a0a8a 0%,#ff2ec4 22%,#f5e6ff 35%,#ff9ef0 47%,#b026ff 68%,#f5e6ff 78%,#5a0a9a 100%);
    --guide-hud-text:#ffffff; --guide-hud-depth:#5a2a9a;
    --guide-now-mid-rgb:0,140,180; --guide-now-deep-rgb:0,90,130; --guide-now-base-rgb:0,60,90;
    --cyan-glow:#00e5ff; --magenta-glow:#ff2ec4; --y2k-ice:#a8f0ff;
    --y2k-blue:#180a34; --y2k-pink:#ff2ec4; --yellow:#ff9ef0; --yellow-bright:#f5e6ff;
  }

  :root[data-guide-theme="mono"]{
    --guide-accent-rgb:235,235,240; --guide-accent-strong-rgb:160,160,168;
    --guide-now-rgb:255,255,255; --guide-ice-rgb:210,210,218;
    --guide-warm-rgb:170,170,178; --guide-cool-rgb:220,220,226;
    --guide-line-rgb:200,200,205; --guide-slotline-rgb:150,150,158;
    --guide-chroma-r-rgb:140,140,148; --guide-chroma-c-rgb:210,210,218;
    --guide-bg-1:rgba(16,16,18,.95); --guide-bg-2:rgba(8,8,9,.93);
    --guide-bg-3:rgba(26,26,28,.94); --guide-bg-4:rgba(4,4,5,.97);
    --guide-bg-radial:rgba(255,255,255,.08);
    --guide-top-1:rgba(52,52,56,.99); --guide-top-2:rgba(26,26,28,.98); --guide-top-3:rgba(66,66,70,.99);
    --guide-prev-1:#101012; --guide-prev-2:#1a1a1d; --guide-prev-3:#0b0b0d;
    --guide-panel-1:#1c1c20; --guide-panel-2:#101012; --guide-panel-3:#28282c;
    --guide-retrobox-1:rgba(40,40,44,.98); --guide-retrobox-2:rgba(8,8,9,1);
    --guide-grid-1:rgba(18,18,20,.98); --guide-grid-2:rgba(10,10,11,.96); --guide-grid-3:rgba(32,32,36,.96);
    --guide-rail-1:rgba(235,235,240,.16); --guide-rail-2:rgba(90,90,96,.2); --guide-rail-3:rgba(210,210,218,.1);
    --guide-tick-1:rgba(24,24,27,.96); --guide-tick-2:rgba(12,12,13,.96); --guide-tick-3:rgba(36,36,40,.96);
    --guide-time-1:rgba(30,30,34,.98); --guide-time-2:rgba(14,14,16,.98); --guide-time-3:rgba(6,6,7,.99);
    --guide-text:#ffffff; --guide-text-dim:#d4d4da; --guide-text-soft:#afafb6;
    --guide-text-ice:#e4e4ea; --guide-text-now:#ffffff; --guide-text-bright:#ffffff;
    --guide-label:#ececf2; --guide-title-depth:#3c3c42;
    --guide-logo-grad:linear-gradient(110deg,#5a5a60 0%,#ececf2 22%,#ffffff 35%,#cfcfd6 47%,#8a8a92 68%,#f4f4f8 78%,#5a5a60 100%);
    --guide-logo-shadow:#303036;
    --guide-hud-text:#ffffff; --guide-hud-depth:#3c3c42;
    --guide-now-mid-rgb:160,160,168; --guide-now-deep-rgb:110,110,118; --guide-now-base-rgb:70,70,76;
    --cyan-glow:#dcdce2; --magenta-glow:#cfcfd6; --y2k-ice:#e8e8ee;
    --y2k-blue:#141416; --y2k-pink:#e0e0e6; --yellow:#e4e4ea; --yellow-bright:#ffffff;
  }

  :root[data-guide-theme="arctic"]{
    --guide-accent-rgb:190,240,255; --guide-accent-strong-rgb:90,200,255;
    --guide-now-rgb:140,230,255; --guide-ice-rgb:230,250,255;
    --guide-warm-rgb:120,190,230; --guide-cool-rgb:200,245,255;
    --guide-line-rgb:160,210,240; --guide-slotline-rgb:140,190,225;
    --guide-chroma-r-rgb:120,190,230; --guide-chroma-c-rgb:200,245,255;
    --guide-bg-1:rgba(6,18,38,.95); --guide-bg-2:rgba(4,12,28,.93);
    --guide-bg-3:rgba(10,26,48,.94); --guide-bg-4:rgba(2,8,20,.97);
    --guide-bg-radial:rgba(140,230,255,.12);
    --guide-top-1:rgba(20,60,110,.99); --guide-top-2:rgba(10,40,80,.98); --guide-top-3:rgba(34,80,140,.99);
    --guide-prev-1:#041018; --guide-prev-2:#0a1c30; --guide-prev-3:#122840;
    --guide-panel-1:#0a1c30; --guide-panel-2:#061020; --guide-panel-3:#122a48;
    --guide-retrobox-1:rgba(12,32,56,.98); --guide-retrobox-2:rgba(3,8,18,1);
    --guide-grid-1:rgba(8,20,40,.98); --guide-grid-2:rgba(4,10,24,.96); --guide-grid-3:rgba(16,36,64,.96);
    --guide-rail-1:rgba(190,240,255,.18); --guide-rail-2:rgba(60,120,180,.2); --guide-rail-3:rgba(230,250,255,.1);
    --guide-tick-1:rgba(10,26,50,.96); --guide-tick-2:rgba(5,13,28,.96); --guide-tick-3:rgba(16,38,68,.96);
    --guide-time-1:rgba(12,30,58,.98); --guide-time-2:rgba(6,16,34,.98); --guide-time-3:rgba(3,8,18,.99);
    --guide-text:#ffffff; --guide-text-dim:#d6ecf8; --guide-text-soft:#b4d4e8;
    --guide-text-ice:#e6f8ff; --guide-text-now:#eafaff; --guide-text-bright:#ffffff;
    --guide-label:#bfe9ff; --guide-title-depth:#0e4a74;
    --guide-logo-grad:linear-gradient(110deg,#0e4a74 0%,#8fe0ff 22%,#ffffff 35%,#c9f2ff 47%,#3fa8e0 68%,#eafaff 78%,#0e4a74 100%);
    --guide-logo-shadow:#0a3a5c;
    --guide-hud-text:#ffffff; --guide-hud-depth:#0e4a74;
    --guide-now-mid-rgb:80,150,190; --guide-now-deep-rgb:50,100,140; --guide-now-base-rgb:30,70,100;
    --cyan-glow:#a8e8ff; --magenta-glow:#7ad4ff; --y2k-ice:#daf4ff;
    --y2k-blue:#0a1c30; --y2k-pink:#8fe0ff; --yellow:#d6f0ff; --yellow-bright:#ffffff;
  }

  :root[data-guide-theme="sunset"]{
    --guide-accent-rgb:255,120,90; --guide-accent-strong-rgb:255,70,120;
    --guide-now-rgb:255,160,80; --guide-ice-rgb:255,200,160;
    --guide-warm-rgb:255,60,80; --guide-cool-rgb:255,170,90;
    --guide-line-rgb:255,120,90; --guide-slotline-rgb:220,140,120;
    --guide-chroma-r-rgb:255,60,80; --guide-chroma-c-rgb:255,170,90;
    --guide-bg-1:rgba(40,10,18,.95); --guide-bg-2:rgba(24,6,14,.93);
    --guide-bg-3:rgba(52,16,26,.94); --guide-bg-4:rgba(14,3,8,.97);
    --guide-bg-radial:rgba(255,120,90,.12);
    --guide-top-1:rgba(120,28,44,.99); --guide-top-2:rgba(64,14,30,.98); --guide-top-3:rgba(160,44,60,.99);
    --guide-prev-1:#200a12; --guide-prev-2:#38101e; --guide-prev-3:#4a1826;
    --guide-panel-1:#2c0e1a; --guide-panel-2:#180610; --guide-panel-3:#401424;
    --guide-retrobox-1:rgba(56,18,32,.98); --guide-retrobox-2:rgba(16,4,9,1);
    --guide-grid-1:rgba(34,10,20,.98); --guide-grid-2:rgba(18,5,12,.96); --guide-grid-3:rgba(54,18,30,.96);
    --guide-rail-1:rgba(255,120,90,.18); --guide-rail-2:rgba(140,40,50,.2); --guide-rail-3:rgba(255,200,160,.1);
    --guide-tick-1:rgba(44,14,24,.96); --guide-tick-2:rgba(22,6,13,.96); --guide-tick-3:rgba(60,20,32,.96);
    --guide-time-1:rgba(52,16,28,.98); --guide-time-2:rgba(28,8,16,.98); --guide-time-3:rgba(12,3,7,.99);
    --guide-text:#fff0e8; --guide-text-dim:#f0c8b8; --guide-text-soft:#d8a898;
    --guide-text-ice:#ffd0a8; --guide-text-now:#ffe8d8; --guide-text-bright:#ffffff;
    --guide-label:#ffb090; --guide-title-depth:#7a2438;
    --guide-logo-grad:linear-gradient(110deg,#7a2438 0%,#ff8a70 22%,#fff0e8 35%,#ffb090 47%,#e04a5c 68%,#fff0e8 78%,#7a2438 100%);
    --guide-logo-shadow:#5c1c2c;
    --guide-hud-text:#ffffff; --guide-hud-depth:#7a2438;
    --guide-now-mid-rgb:180,110,60; --guide-now-deep-rgb:130,75,40; --guide-now-base-rgb:90,50,25;
    --cyan-glow:#ffb090; --magenta-glow:#ff5a6a; --y2k-ice:#ffd0a8;
    --y2k-blue:#2c0e1a; --y2k-pink:#ff8a70; --yellow:#ffd0a8; --yellow-bright:#fff0e8;
  }

  :root[data-guide-theme="teal"]{
    --guide-accent-rgb:0,220,190; --guide-accent-strong-rgb:0,160,200;
    --guide-now-rgb:0,230,220; --guide-ice-rgb:160,255,240;
    --guide-warm-rgb:0,170,160; --guide-cool-rgb:120,240,230;
    --guide-line-rgb:0,200,180; --guide-slotline-rgb:100,200,200;
    --guide-chroma-r-rgb:0,170,160; --guide-chroma-c-rgb:120,240,230;
    --guide-bg-1:rgba(4,22,28,.95); --guide-bg-2:rgba(2,14,20,.93);
    --guide-bg-3:rgba(6,30,36,.94); --guide-bg-4:rgba(1,8,12,.97);
    --guide-bg-radial:rgba(0,230,220,.1);
    --guide-top-1:rgba(8,60,72,.99); --guide-top-2:rgba(4,36,48,.98); --guide-top-3:rgba(12,76,86,.99);
    --guide-prev-1:#02181e; --guide-prev-2:#062c34; --guide-prev-3:#0a3a44;
    --guide-panel-1:#041e26; --guide-panel-2:#021218; --guide-panel-3:#0a2c36;
    --guide-retrobox-1:rgba(6,40,48,.98); --guide-retrobox-2:rgba(2,10,14,1);
    --guide-grid-1:rgba(4,22,30,.98); --guide-grid-2:rgba(2,12,18,.96); --guide-grid-3:rgba(8,36,44,.96);
    --guide-rail-1:rgba(0,220,190,.18); --guide-rail-2:rgba(0,90,100,.2); --guide-rail-3:rgba(160,255,240,.1);
    --guide-tick-1:rgba(4,30,38,.96); --guide-tick-2:rgba(2,15,21,.96); --guide-tick-3:rgba(8,42,50,.96);
    --guide-time-1:rgba(6,32,42,.98); --guide-time-2:rgba(3,17,24,.98); --guide-time-3:rgba(1,7,11,.99);
    --guide-text:#eafff8; --guide-text-dim:#c4e8e0; --guide-text-soft:#9cd0c8;
    --guide-text-ice:#d0fff4; --guide-text-now:#f0fffc; --guide-text-bright:#ffffff;
    --guide-label:#7dffe8; --guide-title-depth:#0a5460;
    --guide-logo-grad:linear-gradient(110deg,#0a5460 0%,#00dcbe 22%,#eafff8 35%,#7dffe8 47%,#00a0c8 68%,#eafff8 78%,#0a5460 100%);
    --guide-logo-shadow:#083e48;
    --guide-hud-text:#ffffff; --guide-hud-depth:#0a5460;
    --guide-now-mid-rgb:0,150,145; --guide-now-deep-rgb:0,105,100; --guide-now-base-rgb:0,65,62;
    --cyan-glow:#00e0d4; --magenta-glow:#00c4a8; --y2k-ice:#b8fff0;
    --y2k-blue:#041e26; --y2k-pink:#00dcbe; --yellow:#d0fff4; --yellow-bright:#ffffff;
  }

  :root[data-guide-theme="crimson"]{
    --guide-accent-rgb:255,80,80; --guide-accent-strong-rgb:220,30,30;
    --guide-now-rgb:255,120,90; --guide-ice-rgb:255,170,150;
    --guide-warm-rgb:255,40,40; --guide-cool-rgb:255,150,120;
    --guide-line-rgb:255,80,80; --guide-slotline-rgb:200,120,110;
    --guide-chroma-r-rgb:255,40,40; --guide-chroma-c-rgb:255,150,120;
    --guide-bg-1:rgba(24,4,4,.95); --guide-bg-2:rgba(12,2,2,.93);
    --guide-bg-3:rgba(34,8,8,.94); --guide-bg-4:rgba(6,1,1,.97);
    --guide-bg-radial:rgba(255,80,80,.12);
    --guide-top-1:rgba(110,14,14,.99); --guide-top-2:rgba(56,8,8,.98); --guide-top-3:rgba(150,24,24,.99);
    --guide-prev-1:#180808; --guide-prev-2:#2a0c0c; --guide-prev-3:#3a1010;
    --guide-panel-1:#200808; --guide-panel-2:#100404; --guide-panel-3:#300c0c;
    --guide-retrobox-1:rgba(56,10,10,.98); --guide-retrobox-2:rgba(12,3,3,1);
    --guide-grid-1:rgba(26,6,6,.98); --guide-grid-2:rgba(14,3,3,.96); --guide-grid-3:rgba(44,12,12,.96);
    --guide-rail-1:rgba(255,80,80,.18); --guide-rail-2:rgba(130,30,30,.2); --guide-rail-3:rgba(255,170,150,.1);
    --guide-tick-1:rgba(34,8,8,.96); --guide-tick-2:rgba(16,4,4,.96); --guide-tick-3:rgba(48,12,12,.96);
    --guide-time-1:rgba(40,10,10,.98); --guide-time-2:rgba(20,5,5,.98); --guide-time-3:rgba(8,2,2,.99);
    --guide-text:#ffe8e4; --guide-text-dim:#e8b8b0; --guide-text-soft:#cfa098;
    --guide-text-ice:#ffc8b8; --guide-text-now:#fff0ec; --guide-text-bright:#ffffff;
    --guide-label:#ff9a8a; --guide-title-depth:#701414;
    --guide-logo-grad:linear-gradient(110deg,#701414 0%,#ff5050 22%,#ffe8e4 35%,#ff9a8a 47%,#dc1e1e 68%,#ffe8e4 78%,#701414 100%);
    --guide-logo-shadow:#540e0e;
    --guide-hud-text:#ffffff; --guide-hud-depth:#701414;
    --guide-now-mid-rgb:180,80,60; --guide-now-deep-rgb:130,55,40; --guide-now-base-rgb:90,35,25;
    --cyan-glow:#ff8a7a; --magenta-glow:#ff4040; --y2k-ice:#ffc8b8;
    --y2k-blue:#200808; --y2k-pink:#ff5050; --yellow:#ffc8b8; --yellow-bright:#ffe8e4;
  }