/* Layout: a living-room TV — the big screen, with the programme guide (which is also the channel list) underneath.
   Single committed dark look (a lit screen in a dim room), large type for viewers 14–80. */
:root{
  color-scheme: dark;
  --room:#14111c;        /* dim room */
  --panel:#1e1a29;       /* cabinet */
  --panel-2:#272236;
  --line:#3a3350;
  --ink:#f6efe3;         /* warm paper white */
  --muted:#b9ae9f;
  --marigold:#f2a03d;    /* accent */
  --marigold-ink:#1d1206;
  --sindoor:#e5483a;     /* LIVE */
  --peacock:#3fb8a8;     /* rule chips */
  --display:"Mukta", system-ui, sans-serif; /* channel names: the same bold Mukta as the full-screen panel */
  --body:"Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html,body{background:var(--room);color:var(--ink)}
body{font-family:var(--body);font-size:17px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:16px 40px}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* OGTV logo: the O is a TV screen with an on-air light; mark from the #ogmark symbol, word in Unbounded */
.logo{display:inline-flex;align-items:center;gap:.1em;line-height:1;font-family:"Unbounded",var(--body);font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.logo-mark{width:1.05em;height:.84em;flex:none;color:var(--marigold)}
.brand h1{font-size:2rem;margin:0;font-weight:700}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.clock{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700}
.clock small{font-weight:500;color:var(--muted);font-size:.8rem;letter-spacing:.08em;margin-left:6px}

/* main grid */
.main{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}


.tv{display:flex;flex-direction:column;gap:12px;min-width:0}
.screen{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line),0 20px 60px -20px rgba(242,160,61,.25)}
/* The TV set: in retro mode the screen sits in a walnut cabinet with a curved glass tube, a brass control
   panel with working knobs, a speaker grille and little legs. Elsewhere the wrappers vanish from layout. */
.set,.set-face,.set-bezel{display:contents}
.set-panel,.crt-glass{display:none}
.set.on{display:block;position:relative;margin-bottom:16px;padding:clamp(12px,2.2vw,26px);border-radius:clamp(18px,2.6vw,34px);
  background:radial-gradient(120% 80% at 30% 0%,rgba(255,214,170,.16),transparent 55%),
    repeating-linear-gradient(91deg,rgba(0,0,0,.10) 0 2px,transparent 2px 7px,rgba(0,0,0,.05) 7px 8px,transparent 8px 19px),
    repeating-linear-gradient(89deg,rgba(255,206,150,.06) 0 1px,transparent 1px 31px),
    linear-gradient(180deg,#7b4d2b 0%,#5e3920 48%,#432719 100%);
  box-shadow:inset 0 2px 0 rgba(255,222,186,.28),inset 0 -4px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.35),0 34px 60px -28px rgba(0,0,0,.85)}
.set.on::before,.set.on::after{content:"";position:absolute;bottom:-15px;width:7%;min-width:26px;height:16px;z-index:-1;
  background:linear-gradient(90deg,#2c1a10,#4a2d1b 50%,#2c1a10);clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)} /* legs */
.set.on::before{left:11%}.set.on::after{right:11%}
.set.on .set-face{display:flex;gap:clamp(10px,1.8vw,22px);align-items:stretch}
.set.on .set-bezel{display:block;flex:1;min-width:0;padding:clamp(8px,1.4vw,16px);border-radius:clamp(16px,2.4vw,30px);
  background:linear-gradient(160deg,#25201c,#0e0c0b 60%,#1a1613);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8),inset 0 8px 18px rgba(0,0,0,.85),0 1px 0 rgba(255,222,186,.22),0 -1px 0 rgba(0,0,0,.5)}
.set.on .screen:not(.pseudo-fs){border-radius:6% / 9%;box-shadow:0 0 0 2px #050404} /* the tube's shape, no glow */
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .crt-glass{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:none;box-shadow:none} /* clear glass: no glare, shading or edge glow; kept for catching clicks in full screen */
/* In the set, full screen, subtitles and sound live on the panel as push keys, so the tube shows only the picture */
.set.on .screen:not(.pseudo-fs):not(:fullscreen) :is(.fs,.cc,.sound){display:none!important}

/* Retro full screen: the whole set, centred in a dim room, sized to fit; everything works as in the page */
/* Retro full screen: see the end of this file */
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .fs{left:6%}
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .cc{left:calc(6% + 58px)}
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .sound{right:6%}
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .osd-time{left:6%;bottom:calc(7% + 60px)} /* above the buttons */
.set.on .screen:not(.pseudo-fs):not(:fullscreen) .osd-play{right:7%;top:9%}
.set.on .set-panel{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vw,18px);width:clamp(78px,12%,138px);
  padding:clamp(10px,1.4vw,16px) clamp(8px,1vw,12px);border-radius:clamp(10px,1.4vw,16px);color:#3a2a18;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(180deg,#d8c39b,#b39a6e 55%,#9a8259);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.7),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4)}
.set-brand{font-size:clamp(.9rem,1.8vw,1.4rem);color:#2b1d10;
  text-shadow:0 1px 0 rgba(255,248,230,.6),0 -1px 0 rgba(0,0,0,.25)} /* engraved nameplate */
.set-brand .logo,.set-brand .logo-mark{color:#2b1d10} /* the official logo, dark-on-light version, engraved on the brass */
/* VFD channel display on the panel (vacuum-fluorescent style, as on old tuners and VCRs) */
.vfd{display:flex;align-items:center;gap:.4em;width:100%;box-sizing:border-box;padding:.3em .5em;border-radius:5px;
  font-family:"VT323",ui-monospace,monospace;line-height:1;color:#6ff2c8;
  background:radial-gradient(120% 140% at 30% 0%,#1b2420,#070a08 70%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,250,235,.55);
  text-shadow:0 0 4px rgba(111,242,200,.85),0 0 12px rgba(111,242,200,.35)}
.vfd-n{position:relative;font-weight:400;font-size:clamp(1.3rem,2.6cqw,2.1rem);letter-spacing:.04em}
.vfd-n::before{content:"88";position:absolute;inset:0;color:rgba(111,242,200,.08);text-shadow:none} /* unlit segments */
.vfd-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:clamp(.8rem,1.35cqw,1.15rem);letter-spacing:.06em}
.vfd-name i{font-style:normal;display:inline-block}
.vfd-name.scroll i{animation:vfd-scroll var(--dur,6s) ease-in-out infinite alternate}
@keyframes vfd-scroll{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--dist,0))}}
.room:is(:fullscreen,.pseudo-fs) .vfd-n{font-size:clamp(1.3rem,2.4vmax,2.4rem)}
.room:is(:fullscreen,.pseudo-fs) .vfd-name{font-size:clamp(.8rem,1.2vmax,1.3rem)}
@media (max-width:640px){.vfd{order:-1}.vfd-n{font-size:1.5rem}.vfd-name{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.vfd-name.scroll i{animation:none}}
.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.knob-wrap small{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#4a3520;text-shadow:0 1px 0 rgba(255,248,230,.5)}
.knob{position:relative;width:clamp(40px,4.6vw,66px);aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 50%,#3b322b 0 46%,transparent 47%),repeating-conic-gradient(#1f1915 0 5deg,#3d342d 5deg 10deg);
  box-shadow:0 4px 8px rgba(0,0,0,.5),0 0 0 2px #1a1410,inset 0 1px 1px rgba(255,255,255,.25);
  transform:rotate(var(--rot,0deg));transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.knob::after{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3e3c3,#b89a68 55%,#7d6440);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)} /* brass cap */
.knob i{position:absolute;left:50%;top:6%;width:3px;height:22%;margin-left:-1.5px;border-radius:2px;background:var(--marigold);z-index:1;box-shadow:0 0 4px rgba(242,160,61,.6)}
.knob{touch-action:none;cursor:grab}.knob.turning{cursor:grabbing;transition:none}
/* Old-TV readout while a knob turns: green block letters with a phosphor glow */
.tv-osd{position:absolute;left:50%;top:12%;z-index:4;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .25s;
  font-family:"VT323",ui-monospace,monospace;font-size:clamp(1.1rem,3vw,2.2rem);letter-spacing:.08em;color:#8dff9a;white-space:nowrap;
  text-shadow:0 0 6px rgba(120,255,140,.8),0 0 16px rgba(80,255,120,.35),2px 2px 0 rgba(0,0,0,.6);display:flex;align-items:center;gap:.5em}
.tv-osd.on{opacity:1}
.tv-osd b{font-weight:400;color:#c8ffd0}
.vbars{display:inline-flex;gap:.12em;align-items:flex-end;height:.8em}
.vbars i{width:.22em;height:100%;background:#8dff9a;box-shadow:0 0 6px rgba(120,255,140,.8)}
.knob:focus-visible{outline:2px solid var(--marigold);outline-offset:4px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.key{min-height:34px;padding:0 4px;border:0;border-radius:5px;cursor:pointer;font:700 .68rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#3a2a18;
  background:linear-gradient(180deg,#fbf3e2,#e2d3b4 70%,#cdbb96);box-shadow:0 3px 0 #6e5a3c,0 4px 6px rgba(0,0,0,.35),inset 0 1px 0 #fff;
  transition:transform .08s,box-shadow .08s,background .2s}
.key-wide{grid-column:1/-1}
.key-help{display:none} /* the set's Help key, only in full screen (elsewhere the header's Help is there) */
.key:active,.key[aria-pressed="true"]{transform:translateY(2px);box-shadow:0 1px 0 #6e5a3c,0 1px 2px rgba(0,0,0,.35),inset 0 1px 3px rgba(0,0,0,.25)}
.key#keyCc[aria-pressed="true"]{background:linear-gradient(180deg,#ffd9a0,#f2a03d)} /* lit while subtitles are on */
.key#keyMute[aria-pressed="true"]{background:linear-gradient(180deg,#ffb3a8,#e5483a);color:#fff}  /* lit red while muted */
.key:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}
.grille{display:none;flex:1;width:100%;min-height:36px;border-radius:8px;background:repeating-linear-gradient(180deg,#2b2016 0 3px,transparent 3px 7px),linear-gradient(#a58c62,#8c7450);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
.led{width:8px;height:8px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 6px #ff4a3a,0 0 14px rgba(255,74,58,.6);transition:background .3s,box-shadow .3s}
.set.idle .led{background:#5a2b25;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)} /* paused or between programmes: the light goes out */
@media (max-width:640px){
  .set.on .set-face{flex-direction:column}
  .set.on .screen:not(.pseudo-fs):not(:fullscreen) .osd-time{display:none} /* too small a tube for the date */
  .set.on .set-panel{flex-direction:row;flex-wrap:wrap;width:auto;justify-content:space-between;padding:8px 12px;gap:10px}
  .keys{display:flex;width:100%;order:5}.key{flex:1;min-height:34px}
  .set.on .grille{display:none;display:none}
  .knob-wrap{flex-direction:column;gap:4px}.knob{width:40px} /* labels under the knobs, so all three sit in one row */
  .knob-wrap small{font-size:.52rem;letter-spacing:.14em}
  .room:not(:fullscreen):not(.pseudo-fs) .set.on .knob-wrap{margin-top:10px} /* the knobs sit a little lower on the phone panel */
  .room:not(:fullscreen):not(.pseudo-fs) .set.on .set-brand{margin-left:12px;margin-top:10px} /* the logo a little in from the edge, level with the knobs */
  .grille{display:none;min-height:28px;min-width:40px;background:repeating-linear-gradient(90deg,#2b2016 0 3px,transparent 3px 7px),linear-gradient(#a58c62,#8c7450)}
}
#yt,#yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Opening ident, futuristic: out of black a hairline horizon and a faint grid rise, holographic HUD rings boot
   around the logo, O G T V resolve one by one with a brief chromatic shimmer, then an iris of light opens from
   the centre onto the live channel */
@property --iris{syntax:"<length>";inherits:false;initial-value:0px}
.start{position:fixed;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 50% at 50% 46%,#16131f 0%,#08070c 62%,#030305 100%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent var(--iris),#000 calc(var(--iris) + 90px));
  mask-image:radial-gradient(circle at 50% 46%,transparent var(--iris),#000 calc(var(--iris) + 90px));
  --iris:-90px}
.fx-grid{position:absolute;left:-60%;right:-60%;top:54%;height:70%;opacity:0;transform:perspective(380px) rotateX(74deg);transform-origin:50% 0;
  background-image:linear-gradient(rgba(150,220,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,255,.2) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:linear-gradient(#000,transparent 75%);mask-image:linear-gradient(#000,transparent 75%);
  animation:intro-fade 1.82s ease 0.13s forwards,grid-run 2.08s linear infinite}
.fx-horizon{position:absolute;left:0;right:0;top:54%;height:1px;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(170,230,255,.7) 30%,#fff 50%,rgba(170,230,255,.7) 70%,transparent);
  box-shadow:0 0 18px 2px rgba(120,200,255,.35);animation:horizon 1.43s cubic-bezier(.7,0,.2,1) 0.07s forwards}
.fx-core{position:absolute;width:70vmin;height:70vmin;left:50%;top:46%;translate:-50% -50%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(242,160,61,.22),rgba(63,184,168,.08) 55%,transparent);filter:blur(10px);
  animation:intro-fade 1.56s ease 0.65s forwards,core-breathe 3.9s ease-in-out 2.21s infinite alternate}
.hud{position:relative;display:grid;place-items:center;translate:0 -4vh}
.hud-rings{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(84vmin,620px);height:auto;overflow:visible;pointer-events:none}
.hud-rings g,.hud-rings circle{transform-box:view-box;transform-origin:200px 200px}
.hud-rings circle{fill:none}
.rg-ticks{stroke:rgba(200,230,255,.3);stroke-width:1.2;stroke-dasharray:.35 2.65;opacity:0;animation:ring-in 1.17s cubic-bezier(.2,.8,.2,1) 0.26s forwards,spin 52s linear infinite}
.rg-outer{rotate:-90deg;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;animation:intro-draw 1.69s cubic-bezier(.65,0,.35,1) 0.2s forwards}
.rg-arcs{stroke:url(#hudgold);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:22 9 5 9 38 17;opacity:0;
  animation:ring-in 1.3s cubic-bezier(.2,.8,.2,1) 0.59s forwards,spin-rev 28.6s linear infinite}
.rg-inner{rotate:90deg;stroke:rgba(110,220,205,.45);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;animation:intro-draw 1.43s cubic-bezier(.65,0,.35,1) 0.72s forwards}
.rg-blip{opacity:0;animation:intro-fade 0.39s ease 1.56s forwards,spin 3.12s cubic-bezier(.5,0,.5,1) 1.56s infinite}
.rg-blip circle{fill:#fff;filter:drop-shadow(0 0 4px #9fe6ff)}
.start-logo{position:relative;font-size:clamp(3rem,12vw,7rem)}
.start-logo .logo{position:relative;filter:drop-shadow(0 0 22px rgba(242,160,61,.32))}
.intro-dot{animation:intro-glow 1.56s ease-in-out 2.3s}
.start .intro-mark{opacity:0;animation:intro-mark 0.91s cubic-bezier(.2,.8,.2,1) 1s forwards} /* the O glitches in like the letters */
.start .logo-word i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.08em);animation:intro-letter 0.91s cubic-bezier(.2,.8,.2,1) forwards}
.start .logo-word i:nth-child(1){animation-delay:1.15s}.start .logo-word i:nth-child(2){animation-delay:1.3s}.start .logo-word i:nth-child(3){animation-delay:1.45s}
.hud-frame{position:absolute;inset:clamp(16px,4vmin,40px);pointer-events:none;opacity:0;animation:intro-fade 0.59s steps(3,end) 0.39s forwards}
.hud-frame b{position:absolute;width:clamp(16px,3vmin,26px);aspect-ratio:1;border:0 solid rgba(200,230,255,.4)}
.hud-frame b:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.hud-frame b:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}
.hud-frame b:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.hud-frame b:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.iris-edge{position:absolute;left:50%;top:46%;width:0;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(255,236,210,.9),0 0 30px 6px rgba(242,160,61,.45),inset 0 0 30px 6px rgba(120,210,255,.35);
}
/* The iris opens (class .open, set by app.js) once OGTV has formed and the channel is playing behind it */
/* The minimal opening: only OGTV forming out of the dark, with a soft glow behind it, then the play mark and the line of
   direction. The HUD (rings, grid, horizon, corner marks) stays out; the exposition after the press is unchanged. */
.start .hud-rings,.start .fx-grid,.start .fx-horizon,.start .hud-frame{display:none}
.start .fx-core{display:none}.start .start-logo .logo{filter:none} /* no halo behind the logo either */
.start.open{animation:iris-open 1.5s cubic-bezier(.6,0,.2,1) .1s forwards}
.start.open .hud{animation:hud-out 1.3s cubic-bezier(.5,0,.3,1) forwards}
.start.open .iris-edge{animation:iris-edge 1.5s cubic-bezier(.6,0,.2,1) .1s forwards}
.start.out{animation:intro-out .4s ease forwards} /* skipped */
/* Once OGTV has formed the intro asks for a press (class ask). The O is a TV screen, so the play mark appears on it:
   it resolves out of blur and colour fringe like the letters did, the screen glows softly behind it, and the red
   on-air light blinks slowly like a set on standby; under the logo a line of direction in the interlude's capitals
   settles in. A press (class go) flashes the screen on like a CRT and sends a pulse out of the O; then the intro plays
   out with its music and the channel takes over. */
.play-btn{position:absolute;left:0;top:50%;translate:0 -50%;width:1.05em;height:.84em;padding:0;border:0;border-radius:30%/38%;background:none;
  color:var(--marigold);cursor:pointer;visibility:hidden}
.start.ask .play-btn{visibility:visible}
.start.ask{cursor:pointer}
.play-btn:focus{outline:none}.play-btn:focus-visible{outline:2px solid var(--marigold);outline-offset:6px}
.play-btn svg{display:block;width:100%;height:100%;overflow:visible}
.pb-screen{fill:url(#pbGlow);opacity:0}
.pb-flash{fill:#fff8ec;opacity:0}
.pb-tri{fill:#f6efe3;opacity:0;transform-box:fill-box;transform-origin:center;transition:scale .2s ease}
.start.ask .pb-tri{animation:pb-tri .9s cubic-bezier(.2,.8,.2,1) .1s forwards}
.start.ask .pb-screen{animation:pb-screen 3.2s ease-in-out .4s infinite alternate}
.start.ask .intro-dot{animation:standby 2.2s ease-in-out .6s infinite}
.start.ask .play-btn:hover .pb-tri,.play-btn:focus-visible .pb-tri{scale:1.12}
.ask-line{position:absolute;left:50%;top:calc(100% + clamp(18px,4vh,36px));translate:-50% 0;visibility:hidden}
.start.ask .ask-line{visibility:visible}
.ask-text{display:block;font:400 clamp(.56rem,1.1vw,.72rem)/1 "Unbounded",var(--body);text-transform:uppercase;letter-spacing:.42em;margin-right:-.42em;white-space:nowrap;color:rgba(244,241,236,.72);opacity:0}
.start.ask .ask-text{animation:ask-text 1.2s ease .6s forwards} /* a plain fade, in place */
.play-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--marigold);opacity:0;pointer-events:none}
.start.go .play-btn::after{animation:pb-pulse .8s cubic-bezier(.2,.7,.3,1) forwards}
.start.go .pb-flash{animation:pb-flash .5s ease-out forwards}
.start.go .pb-tri{animation:pb-out .35s ease-in forwards}
.start.go .intro-dot{animation:none;opacity:1}
.start.go .ask-text{transition:opacity .4s ease;opacity:0}
@keyframes pb-tri{0%{opacity:0;scale:.8;filter:blur(8px) drop-shadow(-3px 0 rgba(80,220,255,.9)) drop-shadow(3px 0 rgba(255,70,120,.9))}
  45%{opacity:1;filter:blur(0) drop-shadow(-1.5px 0 rgba(80,220,255,.7)) drop-shadow(1.5px 0 rgba(255,70,120,.7))}
  100%{opacity:1;scale:1;filter:blur(0) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)}}
@keyframes pb-screen{from{opacity:.3}to{opacity:1}}
@keyframes standby{50%{opacity:.3}}
@keyframes ask-text{from{opacity:0}to{opacity:1}}
@keyframes pb-flash{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
@keyframes pb-out{to{opacity:0;scale:1.5}}
@keyframes pb-pulse{from{opacity:.9;scale:1}to{opacity:0;scale:2.6}}
/* Phones and tablets: the same intro, moved only by fades, slides and scales, which the GPU animates on its own while
   the page loads underneath (blur, glow, drawn strokes and a moving grid need the main thread, and stutter while it's busy) */
@media (pointer:coarse){
  .start .intro-mark,.start .logo-word i{animation-name:intro-lite}
  .rg-outer,.rg-inner{stroke-dashoffset:0;animation:none}
  .rg-ticks,.rg-arcs{animation:none;opacity:1}
  .rg-blip{animation:intro-fade .39s ease 1.56s forwards}
  .hud-rings{animation:rings-lite 1.5s cubic-bezier(.2,.8,.2,1) .15s both;will-change:transform,opacity}
  .fx-grid{animation:intro-fade 1.82s ease .13s forwards;will-change:opacity}
  .fx-core{filter:none;animation:intro-fade 1.56s ease .65s forwards;will-change:opacity}
  .intro-dot{animation:none}
  .start.ask .pb-tri{animation-name:pb-lite}
}
@keyframes intro-lite{from{opacity:0;transform:translateY(.08em) scale(.94)}to{opacity:1;transform:none}}
@keyframes rings-lite{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@keyframes pb-lite{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
/* Everything below the TV is laid out only when scrolled near, so the first screen is quick to draw */
.guide,.main ~ section,.faq,footer.about{content-visibility:auto;contain-intrinsic-size:auto 900px}
@keyframes intro-fade{to{opacity:1}}
@keyframes grid-run{to{background-position:0 64px}}
@keyframes horizon{to{transform:scaleX(1)}}
@keyframes core-breathe{to{scale:1.12}}
@keyframes ring-in{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes spin{to{rotate:360deg}}
@keyframes spin-rev{to{rotate:-360deg}}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-glow{50%{filter:drop-shadow(0 0 10px #e5483a)}}
@keyframes intro-mark{0%{opacity:0;transform:translateY(.08em);filter:blur(10px) drop-shadow(-.09em 0 rgba(80,220,255,.9)) drop-shadow(.09em 0 rgba(255,70,120,.9))}
  45%{opacity:1;filter:blur(0) drop-shadow(-.035em 0 rgba(80,220,255,.7)) drop-shadow(.035em 0 rgba(255,70,120,.7))}
  100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)}}
@keyframes intro-letter{0%{opacity:0;transform:translateY(.08em);filter:blur(10px);text-shadow:-.09em 0 rgba(80,220,255,.9),.09em 0 rgba(255,70,120,.9)}
  45%{opacity:1;filter:blur(0);text-shadow:-.035em 0 rgba(80,220,255,.7),.035em 0 rgba(255,70,120,.7)}
  100%{opacity:1;transform:none;filter:none;text-shadow:0 0 0 transparent,0 0 0 transparent}}
@keyframes hud-out{to{scale:1.35;opacity:0;filter:blur(10px)}}
@keyframes iris-open{to{--iris:66vmax}}
@keyframes iris-edge{0%{opacity:0;width:0}12%{opacity:1}70%{opacity:.8}100%{opacity:0;width:132vmax}}
@keyframes intro-out{to{opacity:0}}
@keyframes rm-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.start.open{animation:intro-out .5s ease forwards}
  .start .intro-mark,.start .logo-word i{animation:rm-fade .9s ease forwards!important} /* fades only: no movement */
  .start.ask .pb-tri,.start.ask .ask-text{animation:rm-fade .9s ease .2s forwards!important}.start.ask .pb-screen{opacity:.7}
  .start.open{animation:intro-out .5s ease forwards!important}
  .start *,.start *::before{animation:none!important}
  .fx-grid,.fx-core,.hud-frame,.rg-ticks,.rg-arcs{opacity:1}.fx-horizon{transform:none}
  .rg-outer,.rg-inner{stroke-dashoffset:0}.start .intro-mark,.start .logo-word i{transform:none}.rg-blip,.iris-edge{display:none}}
@keyframes blink{50%{opacity:.35}}
/* Retro camcorder mode: warm VHS colour, scanlines, grain, tracking band and a VCR readout */
.retro-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;min-height:44px;color:var(--muted);font-weight:700;letter-spacing:.06em;cursor:pointer}
.home-btn{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}.home-btn svg{color:var(--marigold)}.home-btn:hover{border-color:var(--marigold)}
.retro-btn[aria-pressed="true"]{background:var(--marigold);color:var(--marigold-ink);border-color:var(--marigold)}
.help-btn{color:var(--ink)}.help-btn svg{color:var(--marigold)}.help-btn:hover{border-color:var(--marigold)}
@media (max-width:420px){.tools{gap:8px}.retro-btn{padding:8px 11px;letter-spacing:.03em}.home-btn,.help-btn{gap:6px}} /* Home, Retro mode and Help in one row on a phone */
.vhs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none}
.screen.retro .vhs{display:block;z-index:3} /* over the picture and the Coming up next card alike; controls, banner and strip stay above */
/* the black card on tape: a faint colour fringe on the title (no filter on the card, which made its animation stutter) */
.screen.retro .card.interlude h2,.screen.retro .card.interlude .count{text-shadow:-1px 0 rgba(255,70,70,.35),1px 0 rgba(70,200,255,.35)}
.screen #yt{filter:saturate(1.45) contrast(1.12) brightness(1.04) sepia(.2) hue-rotate(-8deg) blur(.45px)}
/* The retro mode knob's settings, each peeling off one more effect: Steady drops the tracking band that sweeps down the
   picture, Tinted drops the lines and grain but keeps the tape colour and contrast, Clean drops the colour too, Quiet
   also silences the static (in app.js) */
/* Tinted is the default, and the knob holds through Coming up next too */
.screen.retro.fx-steady .vhs::after{display:none}
.screen.retro.fx-nolines .vhs{display:none}
.screen.retro.fx-clean #yt{filter:none}
.vhs::before{content:"";position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
  radial-gradient(110% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
.vhs::after{content:"";position:absolute;left:0;right:0;height:7%;top:-10%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10) 40%,rgba(255,255,255,.18) 50%,transparent);animation:track 6s linear infinite}
.vhs .grain{position:absolute;inset:-50%;opacity:.16;mix-blend-mode:overlay;animation:grain .5s steps(5) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.osd{position:absolute;z-index:2;font-family:"VT323",ui-monospace,monospace;color:#f4f4f4;font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1;letter-spacing:.06em;
  text-shadow:2px 0 rgba(255,0,80,.55),-2px 0 rgba(0,220,255,.55),0 0 6px rgba(0,0,0,.6);white-space:pre}
.osd-play{top:14px;right:18px;animation:blink 1.6s steps(1) infinite}
.osd-time{left:136px;bottom:18px}
.screen:fullscreen .osd-time,.screen:-webkit-full-screen .osd-time,.screen.pseudo-fs .osd-time{left:236px} /* clear of the on-screen buttons */
@keyframes track{to{top:105%}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-4%,7%)}80%{transform:translate(6%,3%)}}
/* Full screen: real fullscreen where supported, otherwise the screen fills the window (iPhone) */
.fs{position:absolute;left:14px;bottom:14px;z-index:4;width:48px;height:48px;border-radius:999px;border:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
.fs:hover{background:rgba(0,0,0,.8)}
/* Subtitles on/off, beside full screen; struck through when off */
.cc{position:absolute;left:72px;bottom:14px;z-index:4;height:48px;min-width:48px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font:700 .9rem/1 var(--body);letter-spacing:.06em;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cc:hover{background:rgba(0,0,0,.8)}
/* Retro on the screen itself, only in full screen (the header has its own button) */
.retro-fs{display:none;position:absolute;left:130px;bottom:14px;z-index:4;height:48px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font:700 .9rem/1 var(--body);letter-spacing:.04em;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.retro-fs:hover{background:rgba(0,0,0,.8)}
.retro-fs[aria-pressed="true"]{background:var(--marigold);color:var(--marigold-ink)}
.screen:fullscreen .retro-fs,.screen:-webkit-full-screen .retro-fs,.screen.pseudo-fs .retro-fs{display:block;z-index:6;transition:bottom .3s ease,opacity .4s}
.screen.fs-idle .retro-fs{opacity:0!important;pointer-events:none}
.screen.strip-on .retro-fs{bottom:calc(5vh + 126px);opacity:1!important}
/* Help beside it, also only in full screen, where the header's Help is out of sight */
.help-fs{display:none;position:absolute;left:256px;bottom:14px;z-index:6;height:48px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font:700 .9rem/1 var(--body);letter-spacing:.04em;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:bottom .3s ease,opacity .4s}
.help-fs:hover{background:rgba(0,0,0,.8)}
.screen:fullscreen .help-fs,.screen:-webkit-full-screen .help-fs,.screen.pseudo-fs .help-fs{display:block}
.screen.fs-idle .help-fs{opacity:0!important;pointer-events:none}
.screen.strip-on .help-fs{bottom:calc(5vh + 126px);opacity:1!important}
/* Pause/Play in maximized view, bottom right, coming and going with the other full-screen buttons */
.pause-fs{display:none;position:absolute;right:14px;bottom:14px;z-index:6;width:48px;height:48px;border-radius:999px;border:0;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer;transition:bottom .3s ease,opacity .4s}
.pause-fs:hover{background:rgba(0,0,0,.8)}
.screen:fullscreen .pause-fs,.screen:-webkit-full-screen .pause-fs,.screen.pseudo-fs .pause-fs{display:grid}
.screen.fs-idle .pause-fs{opacity:0!important;pointer-events:none}
.screen.strip-on .pause-fs{bottom:calc(5vh + 126px);opacity:1!important}
/* "Maximize for the best experience" under the TV */
.maximize{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;border:0;background:none;
  color:var(--muted);font:500 .92rem/1 var(--body);cursor:pointer}
.maximize:hover{color:var(--marigold)}
.cc[aria-pressed="false"]{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-thickness:2px}
.screen:fullscreen .cc,.screen.pseudo-fs .cc{opacity:.35}.screen:fullscreen .cc:hover,.screen.pseudo-fs .cc:hover{opacity:1}
.screen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;max-width:none;border-radius:0}
.screen:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;max-width:none;border-radius:0}
.screen.pseudo-fs{position:fixed;inset:0;z-index:40;aspect-ratio:auto;max-width:none;border-radius:0}
.screen:fullscreen .fs,.screen.pseudo-fs .fs{opacity:.35}.screen:fullscreen .fs:hover,.screen.pseudo-fs .fs:hover{opacity:1}
/* Full-screen TV mode: channel banner, channel strip, big number entry; controls and cursor hide when idle */
.screen .bug{display:none} /* the corner watermark is a full-screen thing; normal view stays clean */
.screen:fullscreen .bug,.screen:-webkit-full-screen .bug,.screen.pseudo-fs .bug{display:flex}
.fs-catch,.fs-ui{display:none}
.tap-catch{display:none} /* the page's TV (not full screen): taps on the picture come to the page, not YouTube */
.room:not(:fullscreen):not(.pseudo-fs) .screen:not(.pseudo-fs):not(:fullscreen) .tap-catch{display:block;position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:pointer}
.screen:fullscreen .fs-catch,.screen:-webkit-full-screen .fs-catch,.screen.pseudo-fs .fs-catch{display:block;position:absolute;inset:0;z-index:2}
.screen:fullscreen .fs-ui,.screen:-webkit-full-screen .fs-ui,.screen.pseudo-fs .fs-ui{display:block}
.screen.fs-idle .fs-catch{cursor:none}
.screen:fullscreen.fs-idle .fs,.screen:fullscreen.fs-idle .cc,.screen:fullscreen.fs-idle .sound,
.screen:-webkit-full-screen.fs-idle .fs,.screen:-webkit-full-screen.fs-idle .cc,.screen:-webkit-full-screen.fs-idle .sound,
.screen.pseudo-fs.fs-idle .fs,.screen.pseudo-fs.fs-idle .cc,.screen.pseudo-fs.fs-idle .sound{opacity:0!important;pointer-events:none;transition:opacity .4s} /* full screen only */
/* Full screen, subtitles and sound stay usable above the channel strip */
.screen:fullscreen .fs,.screen:fullscreen .cc,.screen:fullscreen .sound,.screen:-webkit-full-screen .fs,.screen:-webkit-full-screen .cc,.screen:-webkit-full-screen .sound,
.screen.pseudo-fs .fs,.screen.pseudo-fs .cc,.screen.pseudo-fs .sound{z-index:6;transition:bottom .3s ease,opacity .4s}
.screen.strip-on .fs,.screen.strip-on .cc,.screen.strip-on .sound{bottom:calc(5vh + 126px);opacity:1!important}
.fs-ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.banner{position:absolute;left:4vw;bottom:max(6vh,82px);display:flex;gap:24px;align-items:center;max-width:min(72vw,940px);padding:18px 28px 18px 20px;border-radius:22px;
  background:rgba(14,12,20,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease,bottom .35s ease}
.screen.banner-on .banner{opacity:1;transform:none}
.screen:has(> .card.interlude:not([hidden])) .banner{opacity:0!important} /* Coming up next stays in full view on small screens */
.screen.strip-on .banner{bottom:calc(5vh + 190px)} /* above the buttons, which sit above the strip */
.bn-n{font:700 clamp(2.6rem,5vw,4.4rem)/1 "Unbounded",var(--body);letter-spacing:-.04em;color:var(--marigold);min-width:1.5em;text-align:center}
.bn-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.bn-name{font-weight:700;font-size:clamp(1.1rem,2vw,1.45rem);color:#fff}
.bn-name em{font-style:normal;font-weight:500;color:var(--muted);margin-left:8px;font-size:.8em}
.bn-title{font-size:clamp(1rem,1.7vw,1.25rem);color:#f4f2ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-meta{font-size:clamp(.85rem,1.3vw,1rem);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;overflow-x:auto;padding:70px 4vw 5vh;scroll-snap-type:x proximity;scrollbar-width:none;
  background:linear-gradient(transparent,rgba(8,7,12,.94) 50%);opacity:0;transform:translateY(34px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.strip::-webkit-scrollbar{display:none}
.screen.strip-on .strip{opacity:1;transform:none}
.screen.strip-on .sc{pointer-events:auto} /* only the cards catch clicks; the rest of the video closes the strip */
.sc{flex:none;width:236px;scroll-snap-align:center;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;text-align:left;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);background:rgba(30,26,41,.88);color:#fff;font:inherit;cursor:pointer;transition:transform .2s ease,border-color .2s,background .2s}
.sc-n{grid-row:1/3;align-self:center;font:700 1.9rem/1 "Unbounded",var(--body);letter-spacing:-.04em;color:var(--marigold)}
.sc-name{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-now{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-bar{grid-column:1/3;height:4px;margin-top:8px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--marigold)}
.sc.on{border-color:var(--marigold);background:rgba(58,40,20,.9)}
.sc.focus,.sc:hover{transform:translateY(-8px) scale(1.04);border-color:#fff;background:rgba(48,42,64,.96)}
.sc:focus-visible{outline:3px solid #fff;outline-offset:3px}
.digits{position:absolute;top:5vh;right:4vw;font:700 clamp(3rem,7vw,6rem)/1 "Unbounded",var(--body);letter-spacing:-.04em;color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
.screen.digits-on .digits{opacity:1}
@media (prefers-reduced-motion:reduce){.banner,.strip,.sc{transition:none}}
/* LIVE badge on live channels */
.livedot{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;background:var(--sindoor);color:#fff;border-radius:3px;padding:1px 4px;margin-right:5px;vertical-align:1px}
/* NEW badge: uploaded in the last 30 days */
.new{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;background:var(--marigold);color:var(--marigold-ink);
  border-radius:3px;padding:1px 4px;margin-right:5px;vertical-align:1px}
/* HBO-style intro static while a channel tunes in: bright fine snow, logo resolving out of it */
.static{position:absolute;inset:0;z-index:1;background:#777;overflow:hidden;display:grid;place-items:center}
.static canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* no CSS filter: iOS Safari can stop repainting a filtered canvas */
.static::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.35))}
/* The OGTV on the static is a plain, still watermark: translucent charcoal grey, blended into the picture (multiply),
   there from the first frame of the static, with no animation */
.static .ident{position:relative;z-index:1;font-size:clamp(2.2rem,8vw,4.6rem);color:#3b3942;opacity:.45} /* no blend mode: it could freeze the snow under it on iPhone */
.static .ident .logo,.static .ident .logo-mark{color:#3b3942} /* the logo in a soft charcoal grey on the static */
.bug{position:absolute;top:12px;left:14px;display:flex;gap:8px;align-items:center;pointer-events:none;z-index:3}
.bug-mark{width:40px;height:32px;color:var(--marigold);filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))} /* channel watermark */
.chanbug{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.sound{position:absolute;right:14px;bottom:14px;z-index:4;background:var(--marigold);color:var(--marigold-ink);border:0;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:1.05rem;min-height:48px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
/* Sound that needs a tap on the picture itself (app.js, soundRefused): the layers over the picture let taps through to it */
.screen.tap-sound :is(.tap-catch,.fs-catch,.crt-glass,.static){pointer-events:none!important} /* not Coming up next: under it YouTube can show suggested videos */
.tap-hint{position:absolute;top:12px;right:14px;z-index:4;pointer-events:none;display:flex;align-items:center;gap:8px;padding:8px 14px;
  border-radius:999px;background:rgba(14,12,20,.84);color:#fff;font-weight:700;font-size:.95rem;line-height:1.2;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.tap-hint svg{color:var(--marigold);flex:none}
.tap-hint.pulse{animation:tap-pulse .6s ease 3}
@keyframes tap-pulse{50%{transform:scale(1.07);box-shadow:0 0 0 3px var(--marigold)}}
@media (max-width:600px){.tap-hint{top:8px;right:10px;padding:6px 11px;gap:6px;font-size:.8rem}.tap-hint svg{width:15px;height:15px}}
[hidden]{display:none!important}
.card{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:6% 8%;background:radial-gradient(120% 90% at 20% 10%,#3a2a4f 0%,#1a1424 55%,#0e0b14 100%)}
.card .kicker{color:var(--marigold);font-weight:700;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.card h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.15;margin:0;text-wrap:balance}
.card p{margin:0;color:var(--muted);max-width:52ch}
.card a.watch{align-self:flex-start;background:var(--marigold);color:var(--marigold-ink);text-decoration:none;font-weight:700;
  padding:12px 20px;border-radius:999px;min-height:48px;display:inline-flex;align-items:center}
.card .count{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700}
/* "Coming up next" opens with the interlude's bloom: the card fades in, then each line rises out of a soft blur as the chord swells */
.card.interlude{animation:card-fade .8s ease both}
.card.interlude>*{animation:card-in 1.4s cubic-bezier(.25,.7,.25,1) both}
.card.interlude .kicker{animation-delay:1.25s}.card.interlude h2{animation-delay:1.55s}.card.interlude p{animation-delay:1.9s}.card.interlude .count{animation-delay:2.2s} /* the text begins 0.45 s after the black has fully come up (0.8 s) */
/* ...set in the brand's wide sans, all capitals, light and widely spaced, centred on black */
.card.interlude{background:#000;align-items:center;text-align:center;gap:clamp(14px,2.4vh,22px)}
.card.interlude .kicker{font:400 clamp(.6rem,1.05vw,.74rem)/1 "Unbounded",var(--body);letter-spacing:.42em;margin-right:-.42em;color:var(--marigold)}
.card.interlude .kicker::after{content:"";display:block;width:2.4em;height:1px;margin:1.3em auto 0;background:currentColor;opacity:.55}
.card.interlude h2{font:300 clamp(1.15rem,2.9vw,2.1rem)/1.3 "Unbounded",var(--body);text-transform:uppercase;letter-spacing:.06em;color:#f4f1ec;max-width:26ch}
.card.interlude p{font:300 clamp(.58rem,.95vw,.7rem)/1.6 "Unbounded",var(--body);text-transform:uppercase;letter-spacing:.26em;color:rgba(244,241,236,.5);max-width:none}
.card.interlude .count{font:300 clamp(1.5rem,3.2vw,2.4rem)/1 "Unbounded",var(--body);letter-spacing:.08em;color:rgba(244,241,236,.85);margin-top:.5em}
@keyframes card-fade{from{opacity:0}to{opacity:1}}
/* In the TV on the page (not maximised) Coming up next shrinks with the screen, like the picture does: the same card,
   every size measured against the screen's width (cqw), up to the sizes it has on a large screen */
.screen:not(.pseudo-fs):not(:fullscreen){container-type:inline-size}
.screen:not(.pseudo-fs):not(:fullscreen) .card.interlude{gap:min(2.4cqw,22px);padding:4% 6%}
.screen:not(.pseudo-fs):not(:fullscreen) .card.interlude .kicker{font-size:min(2.4cqw,.74rem)}
.screen:not(.pseudo-fs):not(:fullscreen) .card.interlude h2{font-size:min(3.8cqw,2.1rem)}
.screen:not(.pseudo-fs):not(:fullscreen) .card.interlude p{font-size:min(2cqw,.7rem)}
.screen:not(.pseudo-fs):not(:fullscreen) .card.interlude .count{font-size:min(4.6cqw,2.4rem)}
.card.interlude.fading{animation:card-out .8s ease forwards} /* the next programme appears from behind it */
@keyframes card-out{from{opacity:1}to{opacity:0}}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* opacity and movement only: smooth on any device */
@media (prefers-reduced-motion:reduce){.card.interlude>*{animation-name:card-fade}}

/* Under the TV, one card: what's on, with its YouTube channel, description and why it's on (left), and the channel it's
   on, as in the programme guide, with what's next and the rest of its day (right; under it on a phone) */
.now{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px 22px;align-items:start}
.now-main,.now-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.now-main>:empty,.now-side>:empty{display:none}
.now-side{align-self:stretch;padding-left:22px;border-left:1px solid var(--line)}
.now-yt .lby{margin-top:0}
.nowch{display:flex;align-items:center;gap:10px}
.nowch .lname{font:400 1rem/1.3 "Unbounded",var(--body);text-transform:uppercase;letter-spacing:.05em} /* the channel in the same spaced capitals as the programme's title */
.now-side .lmore{margin-top:0}
@media (max-width:760px){.now{grid-template-columns:minmax(0,1fr)}.now-side{padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}}
.now-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.now h3{margin:0;font:400 1.05rem/1.35 "Unbounded",var(--body);text-transform:uppercase;letter-spacing:.05em;text-wrap:balance;min-width:0} /* the programme's title in the brand's spaced capitals, like All channels */
.meta{color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--marigold);width:0}
.why{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.92rem;color:var(--muted)}
.chip{border:1px solid var(--peacock);color:var(--peacock);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:500}
.next{font-size:.98rem}
.next b{color:var(--marigold);font-weight:700}

/* Group headings in the full-screen strip */
.sc-group{flex:none;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);font-weight:700;margin:0 -2px}
.hint{color:var(--muted);font-size:.85rem;margin:6px 8px 4px}
kbd{font-family:var(--body);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:.8rem}

/* guide, which is also the channel list: a card per channel with the programme at the chosen hour (its YouTube channel
   and description), the next one, and the day on request */
.guide{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 0 12px}
.guide-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:0 18px 12px}
.guide-head h4{margin:0;font-family:var(--display);font-weight:700;font-size:1.35rem}
.gday{color:var(--muted);font-size:.9rem}
/* Hour buttons: one swipeable row on a touch screen, wrapped onto two lines on a wide screen with a mouse */
.gtimes{position:relative;display:flex;align-items:center;gap:8px;overflow-x:auto;padding:0 18px 12px;scrollbar-width:none}
.gtimes::-webkit-scrollbar{display:none}
.gt{flex:none;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);
  font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.gt:hover{border-color:var(--muted)}
.gt-now::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sindoor);margin-right:7px;vertical-align:1px}
.gt[aria-pressed="true"]{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink)}
.gt-now[aria-pressed="true"]::before{background:var(--marigold-ink)}
.gdp{flex:none;margin-left:6px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
@media (min-width:720px) and (pointer:fine){.gtimes{flex-wrap:wrap;overflow:visible;row-gap:8px}.gt{min-height:36px;padding:0 11px;font-size:.9rem}}
@media (max-width:719px){.gtimes{position:sticky;top:0;z-index:5;background:var(--panel);padding-top:10px;margin-top:-10px;padding-inline:12px;
  box-shadow:0 10px 12px -10px rgba(0,0,0,.6)}.guide-head{padding-inline:14px}.guide-head h4{font-size:1.2rem}} /* the hours stay at hand down a phone's long list */
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px;align-items:start;padding:2px 18px 6px}
.lwhen{grid-column:1/-1;margin:0;color:var(--muted);font-size:.95rem}
.lwhen b{color:var(--ink)}
.lgroup{grid-column:1/-1;margin:12px 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold);font-weight:700}
.lrow{min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lrow.gcur{border-color:var(--marigold);box-shadow:inset 3px 0 0 var(--marigold)}
.lhead{display:flex;align-items:center;gap:10px;cursor:pointer}
.lnum{min-width:1.5em;color:var(--marigold);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums}
.lnm{flex:1;min-width:0}
.lname{margin:0;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.2}
.lhead:hover .lname{color:var(--marigold)}
.len{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.lwatch{flex:none;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-weight:700;font-size:.85rem}
.lwatch::before{content:"▶";font-size:.7em;margin-right:6px;color:var(--marigold)}
.lwatch:hover{border-color:var(--marigold)}
.lrow.gcur .lwatch{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink)}
.lrow.gcur .lwatch::before{color:var(--marigold-ink)}
.lprogs,.lday{list-style:none;margin:10px 0 0;padding:0}
.lprogs li,.lday li{display:grid;grid-template-columns:3.3em minmax(0,1fr);gap:10px;align-items:baseline}
.lprogs time,.lday time{font-weight:700;font-variant-numeric:tabular-nums}
.lat b{display:block;font-weight:500;font-size:1.02rem;line-height:1.3;overflow-wrap:anywhere}
.lby{display:block;margin-top:2px;color:var(--peacock);font-size:.86rem;font-weight:500;overflow-wrap:anywhere}
.lat small{display:block;margin-top:2px;color:var(--muted);font-size:.84rem;font-variant-numeric:tabular-nums}
.lat.lon time{color:var(--marigold)}
.lbar{display:block;height:4px;margin-top:6px;border-radius:99px;background:var(--line);overflow:hidden;font-style:normal}
.lbar i{display:block;height:100%;background:var(--marigold)}
/* YouTube's description: two lines, More for the rest */
.ldtext{margin:8px 0 0;color:#d9cfc0;font-size:.88rem;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ldtext.open{display:block;-webkit-line-clamp:none}
.ldmore{margin-top:2px;padding:4px 0;min-height:32px;border:0;background:transparent;color:var(--marigold);font-weight:700;font-size:.84rem}
.lnx{margin-top:10px;color:var(--muted);font-size:.92rem}
.lnx div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnx time{color:var(--ink);font-weight:500}
.lmore{display:block;width:100%;margin-top:10px;min-height:38px;padding:0 12px;border:1px dashed var(--line);border-radius:8px;background:transparent;
  color:var(--muted);font-weight:700;font-size:.85rem;text-align:left}
.lmore::after{content:"";float:right;width:7px;height:7px;margin-top:.45em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lmore[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:.7em}
.lmore:hover{color:var(--ink);border-color:var(--muted)}
.lday{max-height:min(55vh,460px);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line);padding-top:4px;font-size:.92rem}
.lday li{grid-template-columns:3.3em minmax(0,1fr) auto;padding:5px 2px;border-bottom:1px solid rgba(58,51,80,.6)}
.lday li span{overflow-wrap:anywhere}
.lday li em{display:block;font-style:normal;color:var(--muted);font-size:.8rem}
.lday li small{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lday .lpart{display:block;position:sticky;top:0;padding:8px 2px 4px;background:var(--panel-2);border-bottom:0;color:var(--peacock);font-size:.75rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lday li.lon{color:var(--marigold)}
.lday li.lon time::after{content:" ●";font-size:.6em;vertical-align:2px}
.ghint{margin:14px 18px 2px}
@media (pointer:coarse){.ghint{display:none}} /* keyboard keys mean nothing on a phone */
@media (max-width:719px){.glist{padding:2px 12px 6px}.lrow{padding:12px}}

/* Help: everything about using OGTV, in a dialog over the page (the whole screen on a phone) */
.help-btn{display:inline-flex;align-items:center;gap:7px}
.help{box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-width:none;max-height:min(88vh,900px);padding:0 24px 24px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6);overscroll-behavior:contain}
.help::backdrop{background:rgba(8,6,14,.75)}
.help-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 12px;background:var(--panel)}
.help h2{margin:0;font-family:var(--display);font-weight:700;font-size:1.45rem}
.help-x{flex:none;min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-weight:700}
.help-x:hover{border-color:var(--marigold)}
.help-toc{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:4px}
.help-toc a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:700}
.help-toc a:hover{border-color:var(--marigold);color:var(--marigold)}
.help section{padding-top:18px}
.help h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold)}
.help p,.help li,.help dd{font-size:1rem;line-height:1.55}
.help p{margin:0 0 8px}
.help ul{margin:0;padding-left:1.2em;display:grid;gap:7px}
.help-keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;align-items:baseline}
.help-keys dt{white-space:nowrap}
.help-keys dd{margin:0}
.help .new,.help .livedot{font-size:.7rem}
@media (max-width:640px){.help{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;padding:0 16px 28px}}

.note{color:var(--muted);font-size:.92rem;max-width:80ch}
.note strong{color:var(--ink)}
/* All-channels directory and channel-page intro: plain links and text search engines read */
.directory{border-top:1px solid var(--line);margin-top:12px;padding:28px 2px 8px}
.directory h2,.seo-intro h2{margin:0 0 16px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 32px}
.directory h3{margin:0 0 6px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marigold)}
.directory ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.directory a{color:var(--ink);text-decoration:none;font-weight:700}.directory a:hover{color:var(--marigold)}
.directory li span{color:var(--muted);font-size:.88rem}
/* The All channels section alone is set in the brand's wide sans: light, slightly spaced, all capitals */
.directory{font-family:"Unbounded",var(--body);font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.directory li{font-size:.82rem}.directory a{font-weight:400}.directory li span{font-size:.68rem}
.directory h2,.directory h3{font-family:"Unbounded",var(--body);font-weight:400}
.seo-intro{padding:20px 2px 0}.seo-intro p{margin:0;color:var(--muted);max-width:75ch;line-height:1.55}
/* About, at the very bottom */
.about{border-top:1px solid var(--line);margin-top:12px;padding:28px 2px 40px;display:flex;flex-direction:column;gap:20px}
.about-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.about-head h2{margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.about-logo{font-size:1.3rem;opacity:.9}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px 32px}
.about h3{margin:0 0 6px;font-size:1.02rem;color:var(--ink);font-weight:700}
.about p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:60ch}
.about a{color:var(--marigold)}.about a:hover{color:#ffc27a}
.about .credit{border-top:1px solid var(--line);padding-top:16px;font-size:.82rem;letter-spacing:.04em;color:var(--muted);opacity:.85}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Retro full screen: the whole set as big as the display allows, always in its landscape shape (side panel,
   knobs, keys, grille), centred in a dim room. Held upright, the set turns on its side to fill the screen;
   where the browser can, the screen also locks to landscape. Sizes follow the long side (vmax) so the set
   keeps its proportions either way. */
.room:is(:fullscreen,.pseudo-fs){display:block;position:fixed;inset:0;z-index:40;padding:0;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 42%,#2a2133 0%,#120e17 62%,#07060a 100%)}
.room:is(:fullscreen,.pseudo-fs) .set.on{position:absolute;left:0;top:0;margin:0;width:100vw;height:100vh;display:flex;box-sizing:border-box;
  padding:clamp(10px,1.7vmax,26px);border-radius:0} /* the cabinet is the whole display, edge to edge */
.room:is(:fullscreen,.pseudo-fs) .set.on::before,.room:is(:fullscreen,.pseudo-fs) .set.on::after{display:none} /* no room for legs */
@media (orientation:portrait){ /* held upright: the set lies on its side, still filling the display */
  .room:is(:fullscreen,.pseudo-fs) .set.on{left:50%;top:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg)}
}
.room:is(:fullscreen,.pseudo-fs) .set.on .set-face{flex:1;min-height:0}
.room:is(:fullscreen,.pseudo-fs) .set.on .set-bezel{display:flex}
.room:is(:fullscreen,.pseudo-fs) .set.on .screen{aspect-ratio:auto;width:100%;height:100%} /* the tube takes all the height; the video letterboxes inside */
.room:is(:fullscreen,.pseudo-fs) .set.on .set-face{flex-direction:row;gap:clamp(8px,1.4vmax,22px)}
.room:is(:fullscreen,.pseudo-fs) .set.on .set-bezel{padding:clamp(6px,1.1vmax,16px);border-radius:clamp(14px,2vmax,30px)}
.room:is(:fullscreen,.pseudo-fs) .set.on .set-panel{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;width:clamp(74px,12%,150px);
  gap:clamp(8px,1.3vmax,18px);padding:clamp(8px,1.2vmax,16px) clamp(6px,.9vmax,12px)}
.room:is(:fullscreen,.pseudo-fs) .knob-wrap{flex-direction:column;gap:4px}
.room:is(:fullscreen,.pseudo-fs) .knob{width:clamp(36px,4.4vmax,72px)}
.room:is(:fullscreen,.pseudo-fs) .keys{display:grid;grid-template-columns:repeat(3,1fr);width:100%;order:0}
.room:is(:fullscreen,.pseudo-fs) .key-help{display:block}
.room:is(:fullscreen,.pseudo-fs) .key{flex:none;min-height:clamp(26px,2.4vmax,38px);font-size:clamp(.55rem,.8vmax,.75rem)}
.room:is(:fullscreen,.pseudo-fs) .set.on .grille{display:none;display:block;min-height:20px}
.room:is(:fullscreen,.pseudo-fs) .set.on .screen .crt-glass{pointer-events:auto} /* clicks on the picture stay with the page (first click: true full screen), not YouTube */
.room:is(:fullscreen,.pseudo-fs) .set-brand{font-size:clamp(.95rem,1.8vmax,1.7rem)}
.vhs .osd{display:none!important} /* retro view: no PLAY sign, date or time on the picture, in any view */
/* In the page the panel scales with the set's width (cq units), so it never makes the cabinet taller than the
   tube; any height left over goes to the tube, so there is never an empty band under the picture */
.set.on{container-type:inline-size}
.set.on .set-bezel{display:flex;flex-direction:column}
.set.on .screen:not(.pseudo-fs){flex:1 0 auto}
.set.on .set-panel{gap:clamp(6px,1.3cqw,18px);padding:clamp(8px,1.2cqw,16px) clamp(6px,.9cqw,12px)}
.set-brand{font-size:clamp(.75rem,2cqw,1.4rem)}
.knob{width:clamp(32px,5.4cqw,66px)}
.knob-wrap small{font-size:clamp(.5rem,.85cqw,.6rem)}
.key{min-height:clamp(24px,2.9cqw,34px);font-size:clamp(.52rem,.95cqw,.68rem)}
.grille{display:none;min-height:clamp(12px,2.5cqw,36px)}
@media (max-width:640px){.knob{width:40px}.key{min-height:34px;font-size:.68rem}}
/* TV app (Android TV, Fire TV): no pointer, so no cursor and none of the click-only buttons; the remote does it all */
.tv-app,.tv-app *{cursor:none!important}
.tv-app,.tv-app body{overflow:hidden;scrollbar-width:none}.tv-app ::-webkit-scrollbar{display:none} /* the room covers the page; no page scrollbar at the edge */
.tv-app .screen .fs,.tv-app .screen .cc,.tv-app .screen .sound,.tv-app .screen .retro-fs,.tv-app .screen .help-fs,.tv-app #keyFs,.tv-app #keyHelp,.tv-app #modeWrap{display:none!important}
/* Questions on the home page */
.faq{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:20px}
.faq h2{margin:0 0 10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.faq details{border-top:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style-position:outside}
.faq summary:focus-visible{outline:2px solid var(--marigold);outline-offset:3px}
.faq details p{margin:8px 0 0;color:var(--muted);max-width:75ch;line-height:1.55}
/* Phones: size full screen to the visible area (Safari's bars don't count), and the one-time iPhone tip */
@supports (height:100dvh){
  .room:is(:fullscreen,.pseudo-fs) .set.on{height:100dvh}
  @media (orientation:portrait){.room:is(:fullscreen,.pseudo-fs) .set.on{width:100dvh;height:100vw}}
  .screen.pseudo-fs{height:100dvh}
}
.room:is(:fullscreen,.pseudo-fs) .set.on .screen .crt-glass,.screen.pseudo-fs .fs-catch{touch-action:none}
.ios-tip{position:fixed;left:50%;top:max(18px,env(safe-area-inset-top));transform:translateX(-50%);z-index:70;max-width:min(92vw,420px);
  padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(20,17,28,.94);color:var(--ink);font:500 .95rem/1.4 var(--body);
  box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center;cursor:pointer}
.ios-tip b{color:var(--marigold)}
.room:is(:fullscreen,.pseudo-fs) .set.on .set-panel{justify-content:space-evenly} /* no speaker grille: the controls spread down the panel */