/* L · CRT Living Room — the site plays on a walnut 1970s TV. Coordinates are % of the tv.webp photo. */
:root{
  --as-bg:#08110c;
  --as-surface:#0f1d15;
  --as-text:#e6f6ea;
  --as-muted:#a8c6b0;
  --as-accent:#7dffa8;
  --as-accent-ink:#04140a;
  --as-link:#8dffb4;
  --as-line:rgba(125,255,168,.2);
  --as-font-display:'VT323',ui-monospace,monospace;
  --as-font-body:'IBM Plex Sans',system-ui,sans-serif;
  --as-display-weight:400;
  --as-display-tracking:.02em;
  --as-display-case:uppercase;
  --as-display-lh:.9;
  --as-radius:6px;
  --as-radius-lg:10px;
  --hero-ink:var(--as-text);
}
.section-head__title,.page-hero__title,.hero--tv .hero__title{text-shadow:0 0 12px rgba(125,255,168,.45)}
.step__num{font-size:4rem}

/* Home hero inside the screen: teletext ident */
.hero--tv{display:grid;gap:1.1rem;justify-items:start;padding:clamp(1.25rem,3vw,2.5rem) var(--gutter) 1rem;max-width:var(--layout-max);margin-inline:auto}
.hero__mobile-tv{display:none}
.hero__set,.hero__glass{display:contents}
.hero__teletext{
  display:flex;justify-content:space-between;gap:1rem;width:100%;margin:0;padding:.2rem .6rem;
  font-family:var(--as-font-display);font-size:1.35rem;letter-spacing:.06em;background:#0000c8;color:#ffff54;
}
.hero--tv .hero__title{font-size:clamp(3.5rem,8vw,7rem);line-height:.85;color:#fff}
.hero--tv .hero__lead{color:var(--as-muted)}
.hero__lead-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;width:100%}
.hero__lead-row .hero__lead{flex:1 1 16rem}
.hero__menu{flex-shrink:0;gap:.5rem}

/* Menu overlay (<dialog>, top layer: covers the whole viewport even from inside the TV glass) */
.tv-menu{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  overflow-y:auto;overscroll-behavior:contain;color:var(--as-text);font-family:var(--as-font-display);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 120% 90% at 50% 40%,#0c1f13 0%,#050c08 70%,#020503 100%);
}
.tv-menu::backdrop{background:rgba(0,0,0,.6)}
.tv-menu[open]{animation:tv-menu-on .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes tv-menu-on{from{clip-path:inset(49% 0 49% 0);filter:brightness(2.5)}to{clip-path:inset(0);filter:none}}
@media (prefers-reduced-motion:reduce){.tv-menu[open]{animation:none}}
.tv-menu__bar{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;
  padding:calc(env(safe-area-inset-top) + .35rem) 1rem .35rem;background:#0000c8;color:#ffff54;font-size:1.6rem;letter-spacing:.06em;
}
.tv-menu__close{
  min-width:44px;min-height:44px;padding:0;border:2px solid currentColor;border-radius:6px;background:none;
  color:inherit;font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;
}
.tv-menu__close:focus-visible,.tv-menu a:focus-visible{outline:3px solid var(--as-accent);outline-offset:3px}
.tv-menu__list{list-style:none;margin:0 auto;padding:1.5rem 1.25rem calc(env(safe-area-inset-bottom) + 2rem);max-width:40rem}
.tv-menu__list > li{border-bottom:1px dashed rgba(125,255,168,.25);padding:.35rem 0}
.tv-menu__list a{
  display:flex;align-items:center;gap:.9rem;min-height:48px;color:var(--as-text);text-decoration:none;
  font-size:clamp(2rem,8vw,2.8rem);line-height:1;text-transform:uppercase;text-shadow:0 0 10px rgba(125,255,168,.45);
}
.tv-menu__list a:hover,.tv-menu__list a[aria-current]{color:var(--as-accent)}
.tv-menu__num{font-size:.6em;color:#ffff54;text-shadow:none}
.tv-menu__list ul{list-style:none;margin:0 0 .4rem;padding:0 0 0 3.2rem}
.tv-menu__list ul a{min-height:40px;font-size:clamp(1.4rem,5.5vw,1.9rem);color:var(--as-muted)}
.hero__bars{display:flex;width:100%;height:14px;list-style:none;margin:.25rem 0;padding:0}
.hero__bars li{flex:1}
.hero__bars li:nth-child(1){background:#c0c0c0}.hero__bars li:nth-child(2){background:#c0c000}.hero__bars li:nth-child(3){background:#00c0c0}
.hero__bars li:nth-child(4){background:#00c000}.hero__bars li:nth-child(5){background:#c000c0}.hero__bars li:nth-child(6){background:#c00000}.hero__bars li:nth-child(7){background:#0000c0}
.hero__hint{margin:0;font-size:.9rem;color:var(--as-muted)}
.hero__hint--below{display:none}
@media (max-width:799px) and (orientation:portrait) and (min-height:540px){
  .hero__hint--side{display:none}
  .hero__hint--below{display:block}
}
.tv__knob,.tv__channels,.tv__osd,.tv__glass,.tv__static{display:none}

/* ---------- Desktop: the TV fills the viewport, content scrolls inside the glass ---------- */
@media (min-width:800px) and (min-height:540px),(max-width:799px) and (orientation:portrait) and (min-height:540px){
  html,body.theme-crt-living-room{height:100%;overflow:hidden}
  /* clip, not hidden: in-page anchors must scroll the screen, never shift the TV itself */
  .tv-room{
    position:fixed;inset:0;display:grid;place-items:center;overflow:clip;
    background:
      radial-gradient(ellipse 55% 45% at 50% 42%,rgba(255,170,90,.16) 0%,rgba(255,170,90,0) 70%),
      radial-gradient(ellipse at 50% 120%,#2a1a0f 0%,#120b06 55%,#070403 100%);
  }
  /* The photo has ~10% empty backdrop around the cabinet (x 10–91%, y 10–90% incl. feet), so it may overflow the
     viewport; .tv-room clips it. The cabinet (centre 50.5%) is centred so the black is equal on both sides; the
     channel labels reach ~97%, i.e. .465 of the width right of centre, which must fit in half the window minus
     .5rem. Vertically the cabinet body (y 10.4–85.8%, centre 48%) nearly fills the window at 172svh; the feet
     below it may fall off-screen. */
  .tv{
    position:absolute;left:50%;top:50%;translate:-50.5% -48%;
    width:min(calc((100vw - 1rem) / .93),172svh);aspect-ratio:4/3;container-type:inline-size;
  }
  .tv__body{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8.5%,#000 91.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 93%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 8.5%,#000 91.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 93%,transparent 100%);
    mask-composite:intersect;
  }
  .tv__screen{
    position:absolute;left:17.1%;top:19.7%;width:55.5%;height:55.6%;overflow:clip;container:tv-screen/inline-size;
    border-radius:6% / 8%;background:#06100a;box-shadow:inset 0 0 50px rgba(0,0,0,.9);
  }
  .tv__scroll{
    position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(125,255,168,.35) transparent;
    --gutter:1.5rem;--layout-max:100%;--header-h:3.5rem;font-size:1rem;
  }
  .tv__glass{
    display:block;position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
      radial-gradient(ellipse 60% 38% at 32% 16%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),
      radial-gradient(ellipse 110% 105% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.6) 100%);
    box-shadow:inset 0 0 30px rgba(0,0,0,.75);
  }
  .tv__static{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px,#888;
    mix-blend-mode:normal;transition:opacity .12s}
  .tv.is-tuning .tv__static{opacity:.85;animation:tv-static .12s steps(3) infinite}
  @keyframes tv-static{0%{background-position:0 0}50%{background-position:-60px 40px}100%{background-position:80px -30px}}

  .tv__osd{
    display:block;position:absolute;top:6%;left:5%;z-index:7;margin:0;pointer-events:none;
    font-family:var(--as-font-display);font-size:clamp(1.6rem,3cqi,2.6rem);line-height:1;color:#7dff7d;
    text-shadow:0 0 8px rgba(125,255,125,.7),2px 2px 0 #000;opacity:0;transition:opacity .2s;
  }
  .tv__osd.is-on{opacity:1}

  /* In-screen layout: the glass is tablet-sized, so use single-column arrangements */
  .tv__scroll .site-header{position:sticky;top:0;background:rgba(6,16,10,.92);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--as-text)}
  .is-home .tv__scroll .site-header{position:sticky;background:rgba(6,16,10,.92);border-color:var(--as-line)}
  .tv__scroll .site-nav,.tv__scroll .nav-toggle{display:none!important}
  .tv__scroll .brand__word{font-family:var(--as-font-display);font-size:1.5rem;letter-spacing:.02em}
  .tv__scroll .page-hero{min-height:220px}
  .tv__scroll .page-hero__title{font-size:clamp(2.2rem,5cqi,3.6rem)}
  /* Text uses the full glass width; sidebar images float beside the opening text only */
  .tv__scroll .steps{grid-template-columns:1fr}
  .tv__scroll .prose{max-width:none}
  .tv__scroll .blocks-stack{max-width:none}
  .tv__scroll .blocks-stack > .block-editable--sidebar{width:clamp(7rem,24%,15rem)}
  .tv__scroll .block-figure--sidebar{background:none;box-shadow:none;border-radius:0}
  .tv__scroll .block-figure--sidebar img{object-fit:contain;max-height:none}
  @container tv-screen (max-width:560px){
    .tv__scroll .blocks-stack > .block-editable--sidebar{width:34%}
    .tv__scroll .photo-cards__grid,.tv__scroll .highlights__grid{grid-template-columns:minmax(0,1fr)}
  }
  .tv__scroll .photo-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv__scroll .photo-card{aspect-ratio:4/3}
  .tv__scroll .site-footer__inner{grid-template-columns:1fr}
  .tv__scroll .site-footer{padding-bottom:3rem}
  .tv__scroll img{filter:saturate(.9) contrast(1.05)}
  .tv__scroll .hero__img{animation:none}

  /* Knobs: vector 1–10 scale plates centred on the photo's black panels; only the chrome bar turns */
  .tv__knob{
    display:block;position:absolute;left:78.98%;width:8.6%;aspect-ratio:1;padding:0;border:0;border-radius:50%;
    background:none;cursor:pointer;filter:drop-shadow(0 .15cqi .25cqi rgba(0,0,0,.6));
  }
  .tv__knob--channel{top:16.47%}
  .tv__knob--volume{top:28.99%}
  .tv__dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .tv__dial-num{font:700 8.6px 'IBM Plex Sans',system-ui,sans-serif;fill:#ededed;text-anchor:middle;dominant-baseline:central;transition:fill .2s}
  .tv__dial-num.is-on{fill:#ff5a4a}
  .tv__knob-cap{
    position:absolute;inset:21%;display:block;
    rotate:var(--rot,0deg);transition:rotate .45s cubic-bezier(.3,1.5,.5,1);
  }
  .tv__knob-cap svg{display:block;width:100%;height:100%;overflow:visible}
  .tv__knob:hover .tv__knob-cap{filter:brightness(1.1)}
  .tv__knob:focus-visible{outline:3px solid var(--as-accent);outline-offset:4px}

  /* Push buttons = main navigation, with Dymo tape labels on the cabinet */
  .tv__channels{display:block;position:absolute;inset:0;pointer-events:none}
  .tv__channels ol{list-style:none;margin:0;padding:0}
  .tv__channels li{position:absolute;left:78.6%;top:calc(41.6% + var(--n) * 3.6%);height:3.4%;width:32%}
  .tv__channels a{
    pointer-events:auto;position:absolute;inset:0;display:flex;align-items:center;
    color:#fff;text-decoration:none;border-radius:6px;
  }
  .tv__channels{--led:16.9%;--tape:19.1%}
  .tv__button{
    position:absolute;left:3.9%;top:50%;width:6.6%;aspect-ratio:1;translate:0 -50%;border-radius:50%;
    transition:box-shadow .12s,background-color .12s;
  }
  .tv__channels a:hover .tv__button{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
  .tv__channels a:active .tv__button,.tv__channels a[aria-current] .tv__button{
    background:radial-gradient(circle at 50% 60%,rgba(0,0,0,.45),rgba(0,0,0,.15) 60%,transparent 72%);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
  }
  /* Black tape label beside the button. Only the tuned (or pressed) channel's tape reaches left to the LED,
     its rounded end ringing the lit LED in black. */
  .tv__label{
    --r:.95em;
    position:absolute;left:var(--tape);top:50%;translate:0 -50%;white-space:nowrap;
    padding:.46em .8em .42em;
    font:700 clamp(.7rem,1cqi,.92rem)/1 'IBM Plex Sans',system-ui,sans-serif;
    letter-spacing:.12em;text-transform:uppercase;color:#d6d6d6;
    background:linear-gradient(180deg,#232323,#0c0c0c);border-radius:999px;
    box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 5px rgba(0,0,0,.6);
    text-shadow:0 -1px 0 rgba(0,0,0,.9);
    transition:left .15s,padding .15s,color .15s;
  }
  /* The tape reaches back to ring the LED; its text starts right after the ring, no extra black in between */
  .tv__channels a:is([aria-current],:active) .tv__label{
    left:calc(var(--led) - var(--r));
    padding-left:calc(2 * var(--r) + .3em);
    color:#fff;
  }
  .tv__channels a:hover .tv__label,.tv__channels a:focus-visible .tv__label{color:#fff}
  .tv__channels a[aria-current]::before{
    content:"";position:absolute;z-index:1;left:var(--led);top:50%;width:.5cqi;height:.5cqi;min-width:6px;min-height:6px;translate:-50% -50%;border-radius:50%;
    background:#ff3b2f;box-shadow:0 0 8px 2px rgba(255,59,47,.8);
  }
  .tv__channels a:focus-visible{outline:none}
  .tv__channels a:focus-visible .tv__label{outline:3px solid var(--as-accent);outline-offset:3px}

  .theme-crt-living-room .audio-dock{bottom:1rem}
  .theme-crt-living-room .skip-link:focus{top:1rem}
}

/* ---------- Wide TV: only the tuned channel shows LED + tape. Hovering another button reveals its tape with the
   same left edge (ringing the dark LED); pressing lights that LED while the old channel's tape fades. */
@media (min-width:800px) and (min-height:540px){
  .tv__channels .tv__label{
    left:calc(var(--led) - var(--r));
    padding-left:calc(2 * var(--r) + .3em);
    opacity:0;visibility:hidden;
    transition:left .32s cubic-bezier(.2,.8,.2,1),padding .32s cubic-bezier(.2,.8,.2,1),opacity .15s,visibility 0s linear .15s,color .15s;
  }
  .tv__channels a:is([aria-current],:hover,:focus-visible,:active,.is-tuning-to) .tv__label{opacity:1;visibility:visible;transition-delay:0s}
  .tv__channels a:is([aria-current],:active,.is-tuning-to) .tv__label{
    left:calc(var(--led) - var(--r));
    padding-left:calc(2 * var(--r) + .3em);
    color:#fff;
  }
  .tv__channels.is-switching a[aria-current]:not(.is-tuning-to) .tv__label{opacity:0;visibility:hidden}
  .tv__channels.is-switching a[aria-current]:not(.is-tuning-to)::before{content:none}
  .tv__channels a.is-tuning-to::before{
    content:"";position:absolute;z-index:1;left:var(--led);top:50%;width:.5cqi;height:.5cqi;min-width:6px;min-height:6px;translate:-50% -50%;border-radius:50%;
    background:#ff3b2f;box-shadow:0 0 8px 2px rgba(255,59,47,.8);
    animation:tv-led-on .3s ease-out .12s both;
  }
  @keyframes tv-led-on{
    from{opacity:0;scale:.4;box-shadow:0 0 0 0 rgba(255,59,47,0)}
    60%{opacity:1;scale:1.25;box-shadow:0 0 14px 4px rgba(255,59,47,.9)}
    to{opacity:1;scale:1;box-shadow:0 0 8px 2px rgba(255,59,47,.8)}
  }
  @media (prefers-reduced-motion:reduce){
    .tv__channels .tv__label{transition:none}
    .tv__channels a.is-tuning-to::before{animation:none}
  }
}

/* ---------- Phone portrait: tv-portrait.webp as a 9-slice frame around the glass, controls pinned below it.
   Numbers are px of the 754×770 cabinet crop (glass = 78…680 × 72…512); --u maps one crop px to the viewport. */
@media (max-width:799px) and (orientation:portrait) and (min-height:540px){
  .tv{
    --u:calc(100vw / 754);
    position:absolute;inset:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);translate:none;
    width:auto;height:auto;aspect-ratio:auto;box-sizing:border-box;
    border-style:solid;border-color:transparent;
    border-width:calc(var(--u) * 72) calc(var(--u) * 74) calc(var(--u) * 258) calc(var(--u) * 78);
    border-image:var(--tv-portrait) 72 74 258 78 fill / calc(var(--u) * 72) calc(var(--u) * 74) calc(var(--u) * 258) calc(var(--u) * 78) stretch;
  }
  .tv__body{display:none}
  .tv__screen{inset:calc(var(--u) * -2);left:calc(var(--u) * -2);top:calc(var(--u) * -2);width:auto;height:auto;border-radius:calc(var(--u) * 30)}
  .tv__scroll{--gutter:1rem;--header-h:3.25rem}
  .tv__osd{font-size:1.5rem;top:4.2rem}

  /* Knob and button centres come from bin/edit-tv-portrait.php (knobs at 79/159 y 625, buttons 232 + n × 62 y 650) */
  .tv__knob{top:calc(100% + var(--u) * 84);width:calc(var(--u) * 58);filter:none}
  .tv__knob--channel{top:calc(100% + var(--u) * 84);left:calc(var(--u) * -28)}
  .tv__knob--volume{top:calc(100% + var(--u) * 84);left:calc(var(--u) * 52)}
  .tv__knob > *{display:none}

  /* li box: 62 wide, button centre 42 from its top (crop y 650) */
  .tv__channels li{
    left:calc(var(--u) * (122 + var(--n) * 62));top:calc(100% + var(--u) * 96);
    width:calc(var(--u) * 62);height:calc(var(--u) * 84);
  }
  .tv__button{left:50%;width:calc(var(--u) * 27);translate:-50% -50%}
  /* Every name rises at 45° from its button's right side, above the next button, and stays on the silver
     panel (y 580–672). The tuned channel has the black tape and the LED above its button; with a mouse,
     hovering another button shows that button's tape instead. */
  .tv__label{display:none}
  .tv__channels .tv__note{display:none}
  .tv__channels a:is([aria-current],:active,:hover,:focus-visible) .tv__label{
    display:block;left:calc(50% + var(--u) * 20);top:auto;bottom:calc(100% - var(--u) * 45);translate:none;
    transform-origin:0 100%;rotate:-45deg;width:max-content;
    padding:.25em .4em .2em;font-size:max(6.5px,calc(var(--u) * 12.5));line-height:1;letter-spacing:.04em;
  }
  /* The black tape is thicker than bare text: start it a little further right so it clears the button */
  .tv__channels a:is([aria-current],:hover,:focus-visible) .tv__label{left:calc(50% + var(--u) * 25)}
  .tv__channels:has(a:not([aria-current]):is(:hover,:focus-visible,:active)) a[aria-current]:not(:hover,:focus-visible,:active) .tv__label{display:none}
  .tv__channels a[aria-current]::before{left:50%;top:calc(var(--u) * 13);width:max(5px,calc(var(--u) * 8));height:max(5px,calc(var(--u) * 8));min-width:0;min-height:0}

  /* Touch screens can't hover: the other channels show their names in dark grey at the same 45° spot */
  @media (hover:none){
    .tv__channels a:not([aria-current]) .tv__label{
      display:block;left:calc(50% + var(--u) * 20);top:auto;bottom:calc(100% - var(--u) * 45);translate:none;
      transform-origin:0 100%;rotate:-45deg;width:max-content;max-width:none;
      padding:.25em .4em .2em;background:none;box-shadow:none;border-radius:0;outline:none;
      font-size:max(6.5px,calc(var(--u) * 12.5));line-height:1;letter-spacing:.04em;white-space:nowrap;
      color:#262626;text-shadow:0 1px 0 rgba(255,255,255,.35);
    }
    .tv__channels a:not([aria-current]):active .tv__label{color:#000}
  }

  .theme-crt-living-room .audio-dock{
    bottom:calc(env(safe-area-inset-bottom) + 100vw / 754 * 268);
    width:calc(100vw - 100vw / 754 * 180);
  }
}

@media (prefers-reduced-motion:no-preference) and (min-width:800px) and (min-height:540px),(prefers-reduced-motion:no-preference) and (max-width:799px) and (orientation:portrait) and (min-height:540px){
  .tv.is-powering .tv__screen{animation:tv-on .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes tv-on{0%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(4)}45%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(3)}100%{clip-path:inset(0);filter:none}}
}

/* ---------- Small windows: the teletext ident plays on the TV, content flows below, header stays pinned ---------- */
@media (max-width:799px) and (orientation:landscape),(max-height:539px){
  .tv__body{display:none}
  .site-header,.is-home .site-header{
    position:sticky;top:0;background:color-mix(in srgb,var(--as-bg) 94%,transparent);color:var(--as-text);border-color:var(--as-line);
  }
  .is-home .site-header:not(.is-scrolled) .section-nav{display:block}
  /* Main navigation stays visible instead of hiding behind a menu button; it wraps so no link is cut off */
  .site-header__bar{flex-wrap:wrap;row-gap:0}
  .js .nav-toggle{display:none}
  .js .site-nav{
    position:static;order:4;width:100%;margin-bottom:.15rem;padding:0;
    visibility:visible;opacity:1;transform:none;transition:none;background:none;color:inherit;z-index:auto;
  }
  .js .site-nav__list{flex-direction:row;flex-wrap:wrap;gap:0 .15rem}
  .js .site-nav__item{border:0;padding:0}
  .js .site-nav__link{font-size:clamp(1rem,3.6vw,1.3rem);min-height:40px;padding:0 clamp(.4rem,1.6vw,.7rem);white-space:nowrap}
  .js .site-nav__link::after{left:.7rem;right:.7rem;width:auto;bottom:.45rem}
  .js .site-nav__sub{display:none}
  .js .site-nav__admin{margin:0 0 0 .5rem}
  .hero--tv{padding-top:.75rem}
  .hero__set{
    display:block;position:relative;justify-self:center;container-type:inline-size;
    width:min(calc(100% + var(--gutter) * 2),125svh);margin-bottom:.25rem;
  }
  .hero__mobile-tv{display:block}
  .hero__mobile-tv-img{display:block;width:100%;height:auto}
  .hero__glass{
    position:absolute;left:17.1%;top:19.7%;width:55.5%;height:55.6%;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;gap:2.2cqi;padding:3cqi 3.6cqi;
    border-radius:6% / 8%;background:#06100a;box-shadow:inset 0 0 6cqi rgba(0,0,0,.9);
  }
  .hero__glass::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
      radial-gradient(ellipse 60% 38% at 32% 16%,rgba(255,255,255,.1),rgba(255,255,255,0) 70%),
      radial-gradient(ellipse 110% 105% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.6) 100%);
  }
  .hero--tv .hero__glass .hero__teletext{font-size:3.6cqi;padding:.15em .45em;gap:.6em}
  .hero--tv .hero__glass .hero__title{margin:0;font-size:11.5cqi;text-shadow:0 0 2cqi rgba(125,255,168,.5)}
  .hero--tv .hero__glass .hero__bars{height:2.4cqi;margin:0}
  .hero__hint{display:none}
}

/* "Musical playground" tape: a white note instead of the word keeps the labels about the same length */
.tv__note{display:inline-block;height:.74em;width:auto;aspect-ratio:11/16;vertical-align:baseline;margin-right:.05em;fill:#fff;overflow:visible}