/* Whisper TV — three takes on Channel 2001 (tv-2001.js): .w1 the Whisper
   Channel, .g1 the Whisper Guide, .p1 Pop-Up Whisper. Scaffolding only. */
@font-face { font-family: "TeX Gyre Heros"; src: url("../fonts/texgyreheros-italic.woff2") format("woff2"); font-style: italic; }
.wmark { display: block; fill: currentColor; }

/* shared: grain that never sits still (one tile, jumped about) */
.grainy, .w1__crt > .grainy, .g1__crt > .grainy, .p1__vhs > .grainy { position: absolute; inset: -50%; background: var(--grain); pointer-events: none; animation: grain .8s steps(1) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0); } 70% { transform: translate(0, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } }
@media (prefers-reduced-motion: reduce) { .grainy { animation: none; } }


/* ═════════ 4a · Whisper Channel ═════════
   The site's own pieces — TeX Gyre Heros, the oval wordmark, the stepper
   with its raised key, pills, the burger disc and glass menu, the
   progressive blur — laid over a full-bleed picture on a curved tube. The
   page around the tube takes the channel's ground, as the site's sections
   do. */
.w1 { --g: #000; --ink: #fff; --ease: cubic-bezier(.16, 1, .3, 1); background: var(--g); color: var(--ink); font-family: "TeX Gyre Heros", Helvetica, "Helvetica Neue", Arial, sans-serif; transition: background-color .9s var(--ease), color .9s var(--ease); }
.w1 button { font-family: inherit; }
.w1__screen { position: absolute; inset: 10px 10px 46px; border-radius: 40px; corner-shape: superellipse(1.6); background: #000; color: #fff; container: w1 / size; box-shadow: 0 0 0 1px rgba(255,255,255,.04); }

/* the picture, cropped to fill */
.w1__vid { filter: saturate(1.15) contrast(1.06) brightness(1.02); }
.w1__vid > * { inset: auto; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); }
.w1__screen.is-glitch .w1__vid { animation: w1glitch .5s steps(5); }
@keyframes w1glitch { 0% { transform: translateX(-10px) skewX(5deg); filter: hue-rotate(70deg) saturate(2.4); } 35% { transform: translateX(7px) skewX(-3deg); } 70% { transform: translateX(-2px); filter: hue-rotate(-30deg); } 100% { transform: none; } }
.w1__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.3) 34%, transparent 58%), linear-gradient(to bottom, rgba(0,0,0,.42), transparent 24%); }

/* the bar, as on the site */
.w1__nav { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; }
.w1__blur { position: absolute; inset: 0 0 auto; height: 140%; z-index: -1; pointer-events: none; }
.w1__blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.18) 50%, transparent); }
.w1__blur span { position: absolute; inset: 0; }
.w1__blur span:nth-child(1) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(to top, transparent 0%, #000 18% 40%, transparent 62%); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18% 40%, transparent 62%); }
.w1__blur span:nth-child(2) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(to top, transparent 22%, #000 42% 64%, transparent 86%); -webkit-mask-image: linear-gradient(to top, transparent 22%, #000 42% 64%, transparent 86%); }
.w1__blur span:nth-child(3) { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); mask-image: linear-gradient(to top, transparent 48%, #000 70% 100%); -webkit-mask-image: linear-gradient(to top, transparent 48%, #000 70% 100%); }
.w1__brand { display: flex; align-items: center; gap: 9px; flex: none; }
.w1__brand .wmark { height: 34px; width: auto; aspect-ratio: 351.4 / 92.3; }
.w1__brand small { font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.62); }

.w1__stepper { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; min-width: 0; }
.w1__stepper::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 6px rgba(0,0,0,.05), 0 6px 30px rgba(0,0,0,.10); backdrop-filter: blur(12px) saturate(1.35); -webkit-backdrop-filter: blur(12px) saturate(1.35); }
.w1__mark { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.18); opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .25s var(--ease); }
.w1__mark.is-on { opacity: 1; }
.w1__link { position: relative; z-index: 1; padding: 7px 15px 9px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.5); font-size: 15px; line-height: 24px; white-space: nowrap; transition: color .25s var(--ease); }
.w1__link:hover, .w1__link[aria-pressed="true"] { color: #fff; }

.w1__end { display: flex; align-items: center; gap: 8px; flex: none; }
.w1__pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 22px 9px; border-radius: 999px; font-size: 16px; line-height: 22px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.w1__pill--solid { background: #fff; color: #000; border: 1px solid #fff; }
.w1__pill--solid:hover { opacity: .8; }
.w1__pill--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); }
.w1__pill--ghost:hover { border-color: #fff; }
.w1__pill:active { opacity: .6; transform: translateY(1px); }
.w1__pill--lg { min-height: 44px; padding-inline: 32px; }
.w1__heart { display: inline-block; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
.w1__fave[aria-pressed="true"] .w1__heart { color: #FF4D00; transform: scale(1.25); }

.w1__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background-color .25s var(--ease), transform .18s var(--ease); }
.w1__burger:hover { background: rgba(255,255,255,.1); }
.w1__burger:active { transform: scale(.92); }
.w1__burger > span { display: grid; gap: 4px; width: 18px; }
.w1__burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transform-origin: center; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.w1__burger i:nth-child(1) { width: 100%; } .w1__burger i:nth-child(2) { width: 72%; } .w1__burger i:nth-child(3) { width: 44%; }
.w1__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.w1__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.w1__burger[aria-expanded="true"] i:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

/* the glass menu, growing out of the disc the way the site's does */
.w1__menu { position: absolute; z-index: 8; top: 76px; right: 26px; width: min(300px, calc(100cqw - 32px)); max-height: calc(100cqh - 96px); overflow: auto; padding: 12px; border-radius: 28px; color: #fff;
  background: rgba(0,0,0,.9); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -20px rgba(0,0,0,.5); transform-origin: calc(100% - 20px) -20px; }
.w1__menu.is-open { animation: w1menu .5s cubic-bezier(.32, 1.28, .42, 1); }
@keyframes w1menu { from { transform: scale(.12, .06); border-radius: 60px; filter: blur(10px); opacity: 0; } 30% { opacity: 1; } }
.w1__menu.is-open > * { animation: w1sharp .4s cubic-bezier(.2, .8, .2, 1) .08s backwards; }
@keyframes w1sharp { from { opacity: 0; filter: blur(6px); transform: translateY(-4px); } }
.w1__words { display: grid; padding: 4px 8px 0 12px; }
.w1__word { display: flex; align-items: center; gap: 10px; padding: 2px 0; border: 0; background: none; text-align: left; font-size: 30px; line-height: 1.12; letter-spacing: -0.04em; color: rgba(255,255,255,.4); transition: color .2s var(--ease); }
.w1__word:hover, .w1__word[aria-pressed="true"] { color: #fff; }
.w1__word[aria-pressed="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translateY(.1em); }
.w1__acts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 8px 12px 12px; font-size: 15px; }
.w1__acts > * { padding: 0; border: 0; background: none; color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s var(--ease); }
.w1__acts > *:hover, .w1__acts [aria-pressed="true"] { color: #fff; }
.w1__social { display: flex; align-items: center; gap: 4px; padding: 12px 8px 8px 12px; border-top: 1px solid rgba(255,255,255,.14); }
.w1__social span { margin-right: auto; font-size: 15px; color: rgba(255,255,255,.62); }
.w1__social a { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; transition: background-color .2s var(--ease); }
.w1__social a:hover { background: rgba(255,255,255,.1); }
.w1__social svg { width: 20px; height: 20px; }
.w1__social svg :not(.fill) { fill: none; stroke: currentColor; stroke-width: 1.6; }
.w1__social svg .fill { fill: currentColor; }

/* on-air: the channel, the bug, the quote */
.w1__live { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; line-height: 1; color: rgba(255,255,255,.7); opacity: 0; }
.w1__lower.is-in .w1__live { animation: w1fade .6s var(--ease) forwards; }
.w1__live > span:last-child { color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
.w1__live i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D00; box-shadow: 0 0 8px #FF4D00; }
.w1.is-playing .w1__live i { animation: w1rec 1.6s ease-in-out infinite; }
@keyframes w1rec { 50% { opacity: .25; } }
.w1__live > span:first-of-type { padding: 3px 7px 4px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; letter-spacing: .02em; }
.w1__bug { position: absolute; z-index: 4; top: 128px; right: 34px; color: #fff; opacity: .42; mix-blend-mode: screen; }
.w1__bug .wmark { height: 22px; width: auto; aspect-ratio: 351.4 / 92.3; }
.w1__lower { position: absolute; z-index: 4; left: 30px; right: 30px; bottom: 112px; max-width: min(920px, 64cqw); pointer-events: none; }
.w1__q { margin: 0; font-weight: 400; font-size: clamp(24px, 3.5cqw, 52px); line-height: 1.04; letter-spacing: -0.035em; text-indent: -.4em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.5); }
/* text-indent is inherited, and each inline-block would hang its own word */
.w1__q span { display: inline-block; text-indent: 0; opacity: 0; transform: translateY(.35em); filter: blur(10px); }
.w1__lower.is-in .w1__q span { animation: w1word .9s var(--ease) forwards; animation-delay: calc(var(--i) * 42ms + .18s); }
@keyframes w1word { to { opacity: 1; transform: none; filter: blur(0); } }
/* once set, the words drop their animation (and the layers it holds) */
.w1__lower.is-set .w1__q span { animation: none; opacity: 1; transform: none; filter: none; }
.w1__src { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 16px 0 0; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,.62); opacity: 0; }
.w1__lower.is-in .w1__src { animation: w1fade .8s var(--ease) .5s forwards; }
@keyframes w1fade { to { opacity: 1; } }
.w1__src b { font-weight: 400; color: #fff; }
.w1__src b::after { content: "—"; margin-left: 10px; color: rgba(255,255,255,.4); }

/* the dock: transport in a stepper-style track, Up Next as a card */
.w1__dock { position: absolute; z-index: 7; left: 26px; right: 26px; bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.w1__track { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 30px rgba(0,0,0,.10);
  backdrop-filter: blur(12px) saturate(1.35); -webkit-backdrop-filter: blur(12px) saturate(1.35); }
.w1__key { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: #fff; transition: background-color .2s var(--ease), transform .18s var(--ease); }
.w1__key:hover { background: rgba(255,255,255,.12); }
.w1__key:active { transform: scale(.92); }
.w1__key svg { width: 18px; height: 18px; fill: currentColor; }
.w1__key--play { background: #fff; color: #000; }
.w1__key--play:hover { background: #fff; opacity: .85; }
.w1__i-pause, .w1.is-playing .w1__i-play { display: none; }
.w1.is-playing .w1__i-pause { display: block; }
.w1__prog { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px; }
.w1__bar { position: relative; width: clamp(80px, 14cqw, 200px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.w1__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.w1__time { font-size: 13px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w1__time > span:last-child::before { content: " / "; }
.w1__next { display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 6px 18px 6px 6px; border: 0; border-radius: 22px; corner-shape: superellipse(1.6); text-align: left; color: #fff; background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 30px rgba(0,0,0,.10); backdrop-filter: blur(12px) saturate(1.35); -webkit-backdrop-filter: blur(12px) saturate(1.35); transition: background-color .2s var(--ease); }
.w1__next:hover { background: rgba(255,255,255,.16); }
.w1__next img { flex: none; width: 96px; height: 54px; border-radius: 16px; corner-shape: superellipse(1.6); object-fit: cover; background: #222; }
.w1__next > span { display: grid; gap: 2px; min-width: 0; }
.w1__next small { font-size: 12px; color: rgba(255,255,255,.62); }
.w1__next b { font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w1__next em { font-style: normal; font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.62); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* off: the site's hero, on the glass */
.w1__off { z-index: 6; justify-items: start; justify-content: start; align-content: end; padding: 0 30px 13cqh; text-align: left; gap: 0; background: radial-gradient(120% 90% at 50% 120%, #0d1b4d, #000 60%); }
.w1__offkick { display: flex; gap: 12px; margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,.62); }
.w1__offkick span { color: #fff; }
.w1__offh { margin: 0; font-weight: 400; font-size: clamp(44px, 9cqw, 132px); line-height: .96; letter-spacing: -0.045em; }
.w1__offsub { max-width: 40ch; margin: 22px 0 28px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.62); }
.w1__offbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.w1:not(.is-on) .w1__dock, .w1:not(.is-on) .w1__bug, .w1:not(.is-on) .w1__lower { visibility: hidden; }

/* the tube — over everything, the chrome included, since it's all on air */
.w1__crt { position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; overflow: hidden; }
.w1__crt > i { position: absolute; inset: 0; }
.w1__lines { inset: -6% !important; filter: url(#tvBarrel); opacity: .4; background: repeating-linear-gradient(rgba(0,0,0,.5) 0 1px, transparent 1px 3px); }
.w1__grille { opacity: .5; mix-blend-mode: multiply; background: repeating-linear-gradient(90deg, rgba(255,90,90,.18) 0 1px, rgba(90,255,120,.14) 1px 2px, rgba(90,120,255,.18) 2px 3px); }
.w1__roll { top: auto !important; bottom: auto !important; height: 14%; opacity: .1; mix-blend-mode: screen; animation: w1roll 9s linear infinite;
  background: linear-gradient(transparent, rgba(255,255,255,.7) 46%, rgba(255,255,255,.2) 54%, transparent), var(--grain); }
@keyframes w1roll { from { top: -16%; } to { top: 108%; } }
.w1__grain { opacity: .06; mix-blend-mode: screen; }
.w1:not(.is-on) .w1__grain { opacity: .14; }
.w1__glass { border-radius: inherit; box-shadow: inset 0 0 90px 10px rgba(0,0,0,.55), inset 0 0 3px 1px rgba(0,0,0,.6);
  background: radial-gradient(60% 34% at 30% 4%, rgba(255,255,255,.07), transparent 70%), radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.45) 100%); }

/* below the tube, on the ground: the Research numbers, running */
.w1__ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; overflow: hidden; font-size: 13px; white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.w1__tick { display: flex; flex: none; animation: w1tick 70s linear infinite; }
.w1__tick > span { display: inline-flex; align-items: baseline; gap: 6px; padding-right: 48px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.w1__tick b { font-weight: 400; color: var(--ink); }
.w1__tick i { font-style: normal; color: color-mix(in srgb, var(--ink) 42%, transparent); }
.w1__tick i::before { content: "·"; margin-right: 6px; }
@keyframes w1tick { to { transform: translateX(-50%); } }

@container w1 (max-width: 1180px) { .w1__link { padding-inline: 11px; font-size: 14px; } }
@container w1 (max-width: 980px) { .w1__stepper { display: none; } }
@container w1 (max-width: 640px) {
  .w1__nav { padding: 16px; }
  .w1__brand .wmark { height: 28px; }
  .w1__fave { padding-inline: 16px; }
  .w1__menu { top: 66px; right: 16px; }
  .w1__bug { display: none; }
  .w1__lower { left: 18px; right: 18px; bottom: 150px; max-width: none; }
  .w1__dock { left: 16px; right: 16px; bottom: 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .w1__prog { flex: 1; } .w1__bar { flex: 1; width: auto; }
  .w1__next { max-width: none; }
  .w1__off { padding: 0 18px 14cqh; }
}
@media (max-width: 640px) { .w1__screen { inset: 6px 6px 40px; border-radius: 28px; } .w1__ticker { height: 40px; } }


/* ═════════ 4b · Whisper Guide ═════════
   A 1999 cable listings channel: navy, bevels, character-generator type
   with hard drop shadows and a faint RF ghost, a scrolling grid. The whole
   frame is the tube. */
.g1 { --navy: #0a1450; --cell: #1c2f93; --yel: #ffe14d; --cg: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  display: grid; grid-template-rows: minmax(0, 52fr) auto minmax(0, 48fr); overflow: hidden; container: g1 / size;
  border-radius: 26px / 34px; background: radial-gradient(120% 80% at 50% 0%, #1a2a8a, var(--navy) 60%, #050a2e); color: #fff;
  font-family: var(--cg); font-stretch: condensed; font-weight: 700; text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,.85), 7px 0 0 rgba(255,255,255,.06); }
.g1 button { font: inherit; text-transform: inherit; text-shadow: inherit; }
.g1__top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 2.2cqw; padding: 3.4cqh 4cqw 1.8cqh; min-height: 0; }

/* the picture, in a bevelled window */
.g1__win { position: relative; align-self: center; padding: 6px; background: linear-gradient(145deg, #b9c6f2, #5d70c2 40%, #23308a); border-radius: 4px; box-shadow: 0 0 0 2px #050a2e, 6px 8px 0 rgba(0,0,0,.45); max-height: 100%; aspect-ratio: 16 / 9; justify-self: center; width: 100%; height: auto; }
@container g1 (min-aspect-ratio: 16/8.4) { .g1__win { height: 100%; width: auto; } }
.g1__pic { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: #000; box-shadow: inset 0 0 0 2px #050a2e; }
.g1__pic .scr__vid { filter: saturate(1.25) contrast(1.05) blur(.3px); }
.g1__now { position: absolute; z-index: 4; top: 8px; left: 8px; padding: 2px 8px 1px; border-radius: 3px; background: linear-gradient(#ff3b3b, #c00); font-size: clamp(10px, 1.2cqw, 15px); letter-spacing: .06em; box-shadow: 1px 1px 0 #000; }
.g1__ch { position: absolute; z-index: 4; top: 8px; right: 10px; font-size: clamp(11px, 1.3cqw, 16px); }
.g1__ch b { color: var(--yel); } .g1__ch i { font-style: normal; opacity: .8; }
.g1__picoff { z-index: 6; background: repeating-linear-gradient(90deg, #1b1b1b 0 12.5%, #262626 12.5% 25%), #111; gap: 1.6cqh; }
.g1__stand { padding: .3em .8em; background: #000; color: var(--yel); font-size: clamp(12px, 1.6cqw, 20px); letter-spacing: .12em; }
.g1__picoff button { padding: .5em 1.2em .45em; border: 0; border-radius: 4px; background: linear-gradient(#ffe97a, #f7c600 50%, #d9a400); color: #111; text-shadow: none; font-size: clamp(14px, 2cqw, 26px); letter-spacing: .06em; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 4px 4px 0 #000; }
.g1__picoff button b { color: #c00; }

/* the promo panel */
.g1__info { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.4cqh; min-height: 0; }
.g1__logo { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 0 2px; }
.g1__logo .wmark { height: clamp(22px, 4.2cqh, 40px); width: auto; aspect-ratio: 351.4 / 92.3; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.85)); }
.g1__logo b { padding: .12em .45em .06em; background: linear-gradient(#ff7a3d, #FF4D00 50%, #d43a00); font-style: italic; font-size: clamp(16px, 3cqh, 30px); letter-spacing: .04em; transform: skewX(-8deg); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 3px 3px 0 #000; }
.g1__swoosh { position: absolute; left: -2%; right: 18%; bottom: -6px; height: 5px; border-radius: 50%; background: linear-gradient(90deg, transparent, var(--yel) 30%, #fff 60%, transparent); transform: rotate(-1.5deg); filter: blur(.4px); opacity: .9; }
.g1__card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 1.4cqh 1.4cqw; border-radius: 4px;
  background: linear-gradient(#26389f, #121f6e), repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px); background-blend-mode: normal;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.4), 0 0 0 2px #050a2e, 5px 6px 0 rgba(0,0,0,.4); }
/* only the quote gives way when the panel is short */
.g1__card > :not(.g1__q) { flex-shrink: 0; }
.g1__label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; color: var(--yel); font-size: clamp(10px, 1.15cqw, 15px); letter-spacing: .1em; text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,225,77,.5); }
.g1__badges { display: flex; gap: 4px; }
.g1__badges i { padding: 1px 4px 0; border: 1.5px solid #fff; border-radius: 2px; font-style: normal; font-size: .8em; color: #fff; letter-spacing: .02em; text-shadow: none; box-shadow: 1px 1px 0 #000; }
.g1__title { margin: .5cqh 0 0; font-size: clamp(16px, 2.5cqw, 34px); line-height: 1; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g1__from { margin: .4cqh 0 0; font-size: clamp(11px, 1.3cqw, 16px); color: #b9c6ff; letter-spacing: .04em; }
.g1__from i { font-style: normal; color: var(--yel); }
.g1__q { margin: 1cqh 0 0; flex: 1; min-height: 0; overflow: hidden; text-transform: none; font-weight: 700; font-size: clamp(12px, 1.45cqw, 19px); line-height: 1.2; letter-spacing: .01em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.g1__keys { display: flex; gap: 4px; margin-top: 1cqh; }
.g1__keys button { min-width: 2.6em; padding: .35em .6em .25em; border: 0; border-radius: 3px; color: #fff; font-size: clamp(10px, 1.1cqw, 14px); background: linear-gradient(#5d70d8, #2b3a9e 55%, #1a2678); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px #050a2e, 2px 2px 0 #000; }
.g1__keys button:hover { background: linear-gradient(#7d8ff0, #3a4cbd 55%, #22308f); }
.g1__keys button:active { transform: translate(1px, 1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px #050a2e, 1px 1px 0 #000; }
.g1__keys [aria-pressed="true"][data-act="fave"] { background: linear-gradient(#ff7aa8, #d6315a 55%, #9e1a3e); }
.g1__ps, .g1.is-playing .g1__p { display: none; } .g1.is-playing .g1__ps { display: inline; }

/* ads, wiping one into the next */
.g1__ad { position: relative; min-height: 0; height: clamp(50px, 11cqh, 100px); overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 2px #050a2e, 5px 6px 0 rgba(0,0,0,.4); }
.g1__ad.is-wipe .g1__adin { animation: g1wipe .6s cubic-bezier(.7, 0, .3, 1); }
@keyframes g1wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.g1__adin { position: absolute; inset: 0; display: grid; align-content: center; gap: .15em; padding: 0 1.4cqw; overflow: hidden; }
.g1__adin small { font-size: clamp(9px, 1cqw, 13px); letter-spacing: .12em; opacity: .85; }
.g1__adin b { font-size: clamp(14px, 2.1cqw, 28px); line-height: 1; font-style: italic; }
.g1__adin span { font-size: clamp(10px, 1.15cqw, 15px); text-transform: none; line-height: 1.15; }
.g1__adin i { font-style: normal; font-size: clamp(9px, 1cqw, 13px); opacity: .8; }
.g1__adin--box { background: linear-gradient(100deg, #ffe14d, #ffb000 60%, #ff7a00); color: #1a1000; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
.g1__adin--box b { color: #b31200; }
.g1__adin--group { background: radial-gradient(120% 140% at 0% 0%, #2bd3ff, #0064F3 55%, #0a2a9c); }
.g1__adin--fave { background: linear-gradient(100deg, #ff5fa2, #b0157a 60%, #5c0a6e); }
.g1__adin--fact { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 1.2cqw; background: linear-gradient(#0f5132, #0a2e1d); }
.g1__adin--fact small { grid-column: 1 / -1; color: var(--yel); }
.g1__adin--fact b { grid-row: 2 / 4; align-self: center; font-style: normal; font-size: clamp(20px, 3.4cqw, 46px); color: var(--yel); text-shadow: 3px 3px 0 #000, 0 0 12px rgba(255,225,77,.5); }
.g1__adin--fact span { align-self: end; }
.g1__burst { position: absolute; top: 50%; right: 4%; display: grid; place-items: center; width: clamp(44px, 7cqw, 86px); aspect-ratio: 1; transform: translateY(-50%) rotate(12deg); color: #fff; background: #e00; font-style: italic; font-size: clamp(11px, 1.6cqw, 20px) !important; text-shadow: 1px 1px 0 #000;
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 100% 68%, 79% 72%, 82% 94%, 61% 84%, 50% 100%, 39% 84%, 18% 94%, 21% 72%, 0 68%, 14% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%); animation: g1burst 1.2s ease-in-out infinite; }
@keyframes g1burst { 50% { transform: translateY(-50%) rotate(12deg) scale(1.1); } }

/* the grid header: the clock, the half hours */
.g1__head { display: grid; grid-template-columns: 16% 1fr; height: clamp(26px, 6cqh, 48px); margin: 0 4cqw; border-radius: 4px 4px 0 0; overflow: hidden; background: linear-gradient(#4a4f63, #1d2033 55%, #0d0f1d); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 2px #050a2e; }
.g1__clock { display: flex; align-items: center; justify-content: center; gap: .5em; background: linear-gradient(#ff4a4a, #c8102e 55%, #8a0a1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset -2px 0 0 #050a2e; }
.g1__clock b { font-size: clamp(14px, 2cqw, 26px); letter-spacing: .02em; }
.g1__clock b i { font-style: normal; animation: blink 1s steps(2) infinite; }
.g1__clock small { font-size: clamp(9px, 1cqw, 13px); opacity: .85; }
.g1__slots { display: grid; grid-template-columns: repeat(3, 1fr); }
.g1__slots span { display: flex; align-items: center; padding-left: .8em; color: var(--yel); font-size: clamp(12px, 1.6cqw, 21px); border-left: 2px solid #050a2e; box-shadow: inset 1px 0 0 rgba(255,255,255,.18); text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,225,77,.45); }
.g1__slots small { font-size: .65em; margin-left: .1em; }

/* the grid, scrolling up for ever */
.g1__grid { position: relative; margin: 0 4cqw 3.4cqh; overflow: hidden; min-height: 0; box-shadow: 0 0 0 2px #050a2e; background: #050a2e; }
.g1__rows { animation: g1scroll 44s linear infinite; }
.g1__grid:hover .g1__rows { animation-play-state: paused; }
@keyframes g1scroll { to { transform: translateY(-50%); } }
.g1__row { display: grid; grid-template-columns: 16% 1fr; height: clamp(34px, 9.6cqh, 74px); border-bottom: 2px solid #050a2e; }
.g1__chan { display: flex; align-items: center; justify-content: center; gap: .45em; background: linear-gradient(#4b5bd0, #2a3796 55%, #1d2878); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset -2px 0 0 #050a2e; }
.g1__chan b { font-size: clamp(16px, 2.6cqw, 34px); line-height: 1; }
.g1__chan i { font-style: normal; color: var(--yel); font-size: clamp(10px, 1.3cqw, 17px); letter-spacing: .04em; }
.g1__row.is-on .g1__chan { background: linear-gradient(#ff4a4a, #c8102e 55%, #8a0a1f); }
.g1__cells { position: relative; }
.g1__cell { position: absolute; top: 0; bottom: 0; display: grid; align-content: center; gap: .1em; padding: 0 .8em; overflow: hidden; border: 0; border-left: 2px solid #050a2e; text-align: left; color: #fff; cursor: pointer;
  background: linear-gradient(#2c42b8, var(--cell) 50%, #14226e); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.35); }
.g1__cell b { font-size: clamp(11px, 1.55cqw, 20px); line-height: 1.05; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g1__cell span { font-size: clamp(9px, 1.05cqw, 14px); line-height: 1.15; text-transform: none; color: #c9d3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g1__cell:hover { background: linear-gradient(#4a60d8, #2b42b0 50%, #1a2a88); }
.g1__cell.is-cont b::before { content: "◀ "; color: var(--yel); }
.g1__cell.is-more::after { content: "▶"; position: absolute; right: .5em; top: 50%; transform: translateY(-50%); color: var(--yel); font-size: clamp(9px, 1cqw, 13px); }
.g1__cell.is-now { background: linear-gradient(#fff38a, #ffd51a 50%, #e0a800); color: #111; text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
.g1__cell.is-now span { color: #3a2a00; }
.g1__cell.is-now b::before { content: "▶ "; color: #c00; animation: blink 1s steps(2) infinite; }
.g1__cell--empty { display: grid; align-content: center; padding: 0 1em; background: repeating-linear-gradient(135deg, #1a2470 0 10px, #16205f 10px 20px); color: #c9d3ff; cursor: default; }
.g1__cell--empty b { font-size: clamp(11px, 1.55cqw, 20px); } .g1__cell--empty span { font-size: clamp(9px, 1.05cqw, 14px); text-transform: none; }
/* each channel its own shade, as listings channels coded movies and sports */
.g1__row[data-ch="phones"] { --cell: #1c4a9c; } .g1__row[data-ch="alone"] { --cell: #3a2a8f; } .g1__row[data-ch="known"] { --cell: #1d5fa8; }
.g1__row[data-ch="friends"] { --cell: #116a78; } .g1__row[data-ch="cares"] { --cell: #1d6e3c; } .g1__row[data-ch="why"] { --cell: #7a1f4a; } .g1__row[data-ch="faves"] { --cell: #8a1a6a; }

/* the bumper: "Coming up on…" swept in and out */
.g1__promo { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.g1__promo.is-on { animation: g1promo 1.9s linear forwards; }
@keyframes g1promo { 0% { visibility: visible; } 100% { visibility: hidden; } }
.g1__promoin { display: grid; justify-items: center; gap: .3em; width: 100%; padding: 4cqh 0; background: linear-gradient(90deg, transparent, rgba(10,20,80,.94) 12%, rgba(26,42,138,.96) 50%, rgba(10,20,80,.94) 88%, transparent);
  border-block: 3px solid var(--yel); box-shadow: 0 0 30px rgba(255,225,77,.35); transform: translateX(110%); }
.g1__promo.is-on .g1__promoin { animation: g1sweep 1.9s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes g1sweep { 0% { transform: translateX(110%) skewX(-12deg); } 22%, 78% { transform: none; } 100% { transform: translateX(-110%) skewX(12deg); } }
.g1__promoin small { color: var(--yel); font-size: clamp(12px, 1.8cqw, 22px); letter-spacing: .2em; }
.g1__promoin b { font-size: clamp(30px, 6.4cqw, 86px); line-height: 1; font-style: italic; letter-spacing: .02em; text-shadow: 4px 4px 0 #000, 0 0 24px rgba(255,255,255,.45); }
.g1__promoin span { font-size: clamp(14px, 2.4cqw, 30px); color: #b9c6ff; }

/* the tube */
.g1__crt { position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; overflow: hidden; }
.g1__crt > i { position: absolute; inset: 0; }
.g1__lines { inset: -6% !important; filter: url(#tvBarrel); opacity: .6; background: repeating-linear-gradient(rgba(0,0,0,.42) 0 1px, transparent 1px 3px); }
.g1__hum { top: auto !important; bottom: auto !important; height: 30%; opacity: .16; mix-blend-mode: multiply; background: linear-gradient(transparent, #000 50%, transparent); animation: g1hum 12s linear infinite; }
@keyframes g1hum { from { top: 105%; } to { top: -35%; } }
.g1__grain { opacity: .05; mix-blend-mode: screen; }
.g1__glass { border-radius: inherit; box-shadow: inset 0 0 80px 8px rgba(0,0,0,.6), inset 0 0 4px 2px rgba(0,0,0,.7); background: radial-gradient(70% 40% at 28% 6%, rgba(255,255,255,.08), transparent 70%), radial-gradient(150% 130% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%); }

/* a container can't query itself, so the frame's own rows go by the viewport */
@media (max-width: 760px) { .g1 { grid-template-rows: max-content max-content minmax(0, 1fr); border-radius: 18px / 22px; } }
@container g1 (max-width: 760px) {
  .g1__top { grid-template-columns: 1fr; padding: 2.4cqh 4cqw 1.4cqh; gap: 1.4cqh; min-height: auto; }
  .g1__info { min-height: auto; }
  .g1__win { width: 100%; height: auto; }
  .g1__info { grid-template-rows: auto auto; }
  .g1__logo { display: none; }
  .g1__ad { display: none; }
  .g1__q { -webkit-line-clamp: 2; font-size: 14px; }
  .g1__title { font-size: 22px; }
  .g1__head, .g1__row { grid-template-columns: 22% 1fr; }
  .g1__row { height: 54px; }
  .g1__grid { margin-bottom: 2cqh; }
}


/* ═════════ 4c · Pop-Up Whisper ═════════
   Late-90s music TV off a VHS dub: the video credit in the corner, bubbles
   with a bloop, a translucent bug, the VCR's own blue screen and on-screen
   display. Futura for the show, VT323 for the deck. */
.p1 { position: absolute; inset: 0; container: p1 / size; background: #000; color: #fff; border-radius: 22px / 30px; font-family: Futura, "Futura PT", "Century Gothic", "Trebuchet MS", sans-serif; }
.p1 button { font-family: inherit; }
.p1__vid { filter: saturate(1.35) contrast(1.08) brightness(1.03) blur(.45px); animation: p1wob 7s steps(1) infinite; }
.p1__vid > * { inset: auto; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); }
@keyframes p1wob { 0%, 49% { transform: none; } 50% { transform: translateY(1px); } 51% { transform: translate(-1px, -1px); } 52%, 100% { transform: none; } }

/* the bubbles */
.p1__pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.p1.no-pops .p1__pops { display: none; }
.p1__pop { position: absolute; max-width: min(33cqw, 400px); padding: .72em 1.05em .8em 1.25em; border: 2px solid #111; border-radius: 1.5em; background: radial-gradient(120% 100% at 30% 15%, #fff 55%, #eef2fb); color: #111;
  font-weight: 500; font-size: clamp(12px, 1.5cqw, 20px); line-height: 1.22; letter-spacing: -.005em; box-shadow: 3px 4px 0 rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.25);
  transform-origin: var(--ox, 80%) 120%; animation: p1pop .46s cubic-bezier(.3, 1.7, .5, 1) both; }
.p1__pop--l { --ox: 82%; } .p1__pop--r { --ox: 18%; }
.p1__pop.is-out { animation: p1out .24s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes p1pop { from { transform: scale(0); opacity: 0; } 30% { opacity: 1; } }
@keyframes p1out { 30% { transform: scale(1.08); } to { transform: scale(0); opacity: 0; } }
.p1__pop p { margin: 0; }
.p1__pop small { display: block; margin-top: .4em; font-size: .68em; font-style: italic; color: #5a5a66; letter-spacing: .01em; }
/* the tail, toward the middle of the frame */
.p1__pop::before, .p1__pop::after { content: ""; position: absolute; top: 100%; width: 1.5em; height: 1.2em; background: #111; }
.p1__pop::after { background: #f2f5fc; width: calc(1.5em - 6px); height: calc(1.2em - 5px); }
.p1__pop--l::before { right: 16%; clip-path: polygon(0 0, 100% 0, 92% 100%); }
.p1__pop--l::after { right: calc(16% + 3px); clip-path: polygon(0 0, 100% 0, 92% 100%); }
.p1__pop--r::before { left: 16%; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.p1__pop--r::after { left: calc(16% + 3px); clip-path: polygon(0 0, 100% 0, 8% 100%); }
.p1__ic { position: absolute; top: -.75em; left: -.7em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 2px solid #111; border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; font-size: .9em; line-height: 1; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.p1__ic--who { background: #0064F3; font-family: Georgia, serif; font-style: italic; }
.p1__ic--fact { background: #e3172d; }
.p1__ic--about { background: #FF4D00; font-size: .8em; }

/* the video credit, four lines in the corner */
.p1__cred { position: absolute; z-index: 4; left: 7cqw; bottom: 11cqh; display: grid; gap: .08em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(13px, 1.65cqw, 22px); line-height: 1.22; letter-spacing: .005em;
  text-shadow: 1px 1px 1px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.45); opacity: 0; pointer-events: none; filter: blur(.25px); }
.p1__cred b { font-weight: 700; }
.p1__cred span { font-weight: 400; }
.p1__cred.is-in { animation: p1cred 7.8s linear forwards; }
@keyframes p1cred { 0% { opacity: 0; } 5%, 90% { opacity: 1; } 100% { opacity: 0; } }

.p1__next { position: absolute; z-index: 4; right: 6cqw; bottom: 19cqh; display: flex; align-items: center; gap: .6em; padding: .45em 1.1em .45em .5em; border: 2px solid #111; border-radius: 999px; background: #fff; color: #111; font-size: clamp(11px, 1.3cqw, 17px); font-weight: 500;
  box-shadow: 3px 4px 0 rgba(0,0,0,.28); transform: translateX(calc(100% + 8cqw)); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.p1__next small { padding: .25em .6em .2em; border-radius: 999px; background: #FF4D00; color: #fff; font-weight: 700; font-size: .78em; letter-spacing: .08em; }
.p1.is-next .p1__next { transform: none; }
.p1__bug { position: absolute; z-index: 4; right: 6cqw; bottom: 9cqh; display: flex; align-items: center; gap: .3em; opacity: .55; font-size: clamp(11px, 1.3cqw, 17px); pointer-events: none; mix-blend-mode: screen; }
.p1__bug i { display: grid; place-items: center; width: 2em; height: 1.6em; border: 2px solid #fff; border-radius: 50% 50% 50% 8%; font-style: normal; font-weight: 700; font-size: .9em; }
.p1__bug span { font-weight: 700; letter-spacing: .02em; }

/* chrome: shows when you move, hides when you rest */
.p1__chans, .p1__keys { position: absolute; z-index: 7; display: flex; flex-wrap: wrap; gap: 6px; transition: opacity .35s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.p1__chans { top: 4.2cqh; left: 4cqw; right: 4cqw; }
.p1__keys { bottom: 4.2cqh; left: 50%; transform: translateX(-50%); justify-content: center; }
.p1.is-idle .p1__chans { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.p1.is-idle .p1__keys { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; }
.p1.is-idle { cursor: none; }
.p1:not(.is-on) .p1__chans, .p1:not(.is-on) .p1__keys { display: none; }
.p1__chip { padding: .42em .95em .38em; border: 2px solid #111; border-radius: 999px; background: rgba(255,255,255,.88); color: #111; font-size: clamp(11px, 1.15cqw, 15px); font-weight: 500; box-shadow: 2px 3px 0 rgba(0,0,0,.3); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background-color .2s; }
.p1__chip:hover { transform: translateY(-2px) rotate(-1.5deg); background: #fff; }
.p1__chip:active { transform: scale(.94); }
.p1__chip[aria-pressed="true"] { background: #FFE600; }
.p1__chip[data-popsbtn][aria-pressed="false"], .p1__chip[data-bloopbtn][aria-pressed="false"] { background: rgba(255,255,255,.45); text-decoration: line-through; }
.p1__chip--fave[aria-pressed="true"] { background: #ff5fa2; color: #fff; }
.p1__chip--play { min-width: 3.4em; background: #FF4D00; color: #fff; }
.p1__ps, .p1.is-playing .p1__p { display: none; } .p1.is-playing .p1__ps { display: inline; }

/* the VCR: on-screen display, blue screen */
.p1__osd { position: absolute; z-index: 8; top: 6cqh; left: 6cqw; font-family: VT323, "Courier New", monospace; font-size: clamp(22px, 4.2cqw, 54px); line-height: 1; letter-spacing: .04em; color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.7), -1px 0 rgba(255,0,80,.5), 1px 0 rgba(0,220,255,.5); opacity: 0; pointer-events: none; }
.p1__osd.is-on { opacity: 1; }
.p1.is-on:not(.is-idle) .p1__osd { top: calc(6cqh + 44px); }
.p1__off { z-index: 6; background: #1630d8; background-image: var(--grain); background-blend-mode: soft-light; font-family: VT323, "Courier New", monospace; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,40,.55); }
.p1__offch { position: absolute; top: 7cqh; right: 7cqw; font-size: clamp(26px, 4.6cqw, 60px); }
.p1__offplay { padding: .1em .5em; border: 0; background: none; color: #fff; font: inherit; font-size: clamp(40px, 9cqw, 120px); letter-spacing: .06em; text-shadow: inherit; animation: blink 1.2s steps(2) infinite; }
.p1__offplay:hover { animation: none; background: rgba(255,255,255,.12); }
.p1__offtape { position: absolute; left: 7cqw; bottom: 7cqh; font-size: clamp(18px, 2.6cqw, 34px); letter-spacing: .04em; }

/* the title card */
.p1__intro { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; overflow: hidden; visibility: hidden; pointer-events: none;
  background: radial-gradient(90% 90% at 50% 40%, #39d3ff, #0a7bd8 55%, #1a1a8a); }
.p1__intro.is-on { animation: p1intro 2.2s linear forwards; }
@keyframes p1intro { 0%, 86% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } }
.p1__intro i { position: absolute; left: var(--x); top: var(--y); width: calc(22cqh * var(--s)); aspect-ratio: 1; margin: calc(-11cqh * var(--s)); border: 3px solid #111; border-radius: 50% 50% 50% 12%; background: var(--c); box-shadow: 4px 5px 0 rgba(0,0,0,.25); transform: scale(0); }
.p1__intro.is-on i { animation: p1pop .46s cubic-bezier(.3, 1.7, .5, 1) var(--d) forwards; }
.p1__intro.is-on i { animation-name: p1popin; }
@keyframes p1popin { from { transform: scale(0); } to { transform: scale(1); } }
.p1__title { position: relative; display: grid; justify-items: center; gap: 1cqh; padding: 4cqh 6cqw 5cqh; border: 4px solid #111; border-radius: 50% / 46%; background: #fff; color: #111; box-shadow: 8px 10px 0 rgba(0,0,0,.3); transform: scale(0) rotate(-6deg); }
.p1__title::after { content: ""; position: absolute; left: 22%; top: 96%; width: 9cqh; height: 7cqh; background: #111; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.p1__intro.is-on .p1__title { animation: p1title .6s cubic-bezier(.3, 1.6, .5, 1) .5s forwards; }
@keyframes p1title { to { transform: rotate(-4deg); } }
.p1__title span { font-weight: 700; font-style: italic; font-size: clamp(30px, 7cqw, 96px); line-height: .9; letter-spacing: -.02em; color: #FF4D00; text-shadow: 3px 3px 0 #111; }
.p1__title .wmark { height: clamp(28px, 6.4cqh, 64px); width: auto; aspect-ratio: 351.4 / 92.3; }

/* the dub */
.p1__vhs { position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: inherit; overflow: hidden; }
.p1__vhs > i { position: absolute; inset: 0; }
.p1__lines { inset: -6% !important; filter: url(#tvBarrel); opacity: .55; background: repeating-linear-gradient(rgba(0,0,0,.45) 0 1px, transparent 1px 3px); }
.p1__grain { opacity: .08; mix-blend-mode: screen; }
/* head-switching noise: the torn strip at the bottom of every VHS frame */
.p1__head { top: auto !important; height: 3.6%; backdrop-filter: blur(1.5px) saturate(.5) brightness(1.25); -webkit-backdrop-filter: blur(1.5px) saturate(.5) brightness(1.25);
  background: linear-gradient(rgba(255,255,255,.07), rgba(0,0,0,.35)), repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px, rgba(0,0,0,.25) 9px 12px, transparent 12px 21px);
  animation: p1head .24s steps(1) infinite; }
@keyframes p1head {
  0% { clip-path: polygon(0 34%, 14% 14%, 27% 40%, 41% 6%, 58% 30%, 72% 10%, 86% 36%, 100% 16%, 100% 100%, 0 100%); background-position: 0 0, 0 0; transform: translateX(0); }
  33% { clip-path: polygon(0 20%, 11% 42%, 30% 12%, 46% 34%, 61% 4%, 77% 28%, 90% 8%, 100% 30%, 100% 100%, 0 100%); background-position: 0 0, 7px 0; transform: translateX(-4px); }
  66% { clip-path: polygon(0 8%, 18% 30%, 33% 2%, 50% 26%, 64% 12%, 80% 40%, 93% 18%, 100% 4%, 100% 100%, 0 100%); background-position: 0 0, -5px 0; transform: translateX(3px); } }
/* now and then the tracking rolls */
.p1__trk { top: auto !important; bottom: auto !important; height: 7%; opacity: 0; mix-blend-mode: screen; background: linear-gradient(transparent, rgba(255,255,255,.55) 40%, rgba(255,255,255,.15) 60%, transparent), var(--grain); animation: p1trk 17s linear infinite; }
@keyframes p1trk { 0%, 82% { top: 108%; opacity: 0; } 83% { top: 100%; opacity: .5; } 90% { top: 30%; opacity: .4; } 92% { top: 8%; opacity: 0; } 100% { top: 8%; opacity: 0; } }
.p1__glass { border-radius: inherit; box-shadow: inset 0 0 90px 12px rgba(0,0,0,.55), inset 0 0 4px 2px rgba(0,0,0,.7); background: radial-gradient(60% 36% at 30% 5%, rgba(255,255,255,.07), transparent 70%), radial-gradient(150% 130% at 50% 50%, transparent 60%, rgba(0,0,0,.45) 100%); }

@container p1 (max-width: 640px) {
  .p1__pop { max-width: 58cqw; font-size: 12px; }
  .p1__cred { bottom: 22cqh; font-size: 13px; }
  .p1__keys { left: 3cqw; right: 3cqw; transform: none; }
  .p1.is-idle .p1__keys { transform: translateY(8px); }
  .p1__chans { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p1__chip { flex: none; }
  .p1__next { bottom: 30cqh; }
}