/* Tenner: one stylesheet for every page (Browse and About add their own on top).
   Apple's feel throughout: San Francisco (Inter where it's missing), bold large titles, Liquid Glass bars, one pill
   button family, posters shown whole, and neon rainbow ranks. Nothing animates at rest, so an idle page costs nothing. */

/* ============================================================ tokens */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-tight-latin.woff2) format("woff2"); }

:root {
  --bg: #ffffff; --bg2: #f2f2f7; --card: #ffffff;
  --fill: rgba(120, 120, 128, .12); --fill-strong: rgba(120, 120, 128, .2);
  --label: #000000; --label2: rgba(60, 60, 67, .62); --label3: rgba(60, 60, 67, .36); --sep: rgba(60, 60, 67, .2);
  --accent: #007aff; --green: #28a745; --gold: #c27c00;
  --shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
  --cover-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 6px 18px -8px rgba(0, 0, 0, .3);
  /* the neon ranks */
  --num-glass: rgba(255, 255, 255, .4); --num-glass-top: rgba(255, 255, 255, .62); --aura: .32; --core: .95;
  /* the glass shell and the wash of colour behind every page */
  --amb1: rgba(0, 122, 255, .11); --amb2: rgba(255, 55, 95, .07); --amb3: rgba(191, 90, 242, .07);
  --glass: rgba(255, 255, 255, .64);
  --pill: rgba(118, 118, 128, .14);
  --ease-spring: cubic-bezier(.3, 1.25, .4, 1); --ease-out: cubic-bezier(.2, .8, .2, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px)); --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1240px; --radius: 14px;
  /* the frosted control material every button and control shares: a blurred translucent fill, a hairline edge and a
     soft top highlight (no shadow), on softly rounded rectangles */
  --frost: rgba(255, 255, 255, .55); --frost-on: #ffffff; --frost-edge: rgba(60, 60, 67, .18); --frost-hi: rgba(255, 255, 255, .6);
  --frost-line: inset 0 0 0 .5px var(--frost-edge), inset 0 1px 0 var(--frost-hi);
  --frost-blur: blur(14px) saturate(180%);
  /* sheets (the title sheet, My services, the Theme card, Browse's filters on phones): one frosted glass */
  --sheet-bg: color-mix(in srgb, var(--bg) 62%, transparent); --sheet-blur: blur(28px) saturate(180%);
  --r-ctl: 10px; --r-in: 7px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg2: #1c1c1e; --card: #1c1c1e;
    --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36);
    --label: #ffffff; --label2: rgba(235, 235, 245, .62); --label3: rgba(235, 235, 245, .3); --sep: rgba(84, 84, 88, .6);
    --accent: #0a84ff; --green: #30d158; --gold: #ffb340;
    --shadow: 0 10px 30px rgba(0, 0, 0, .6);
    --cover-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 6px 18px -8px rgba(0, 0, 0, .55);
    --num-glass: rgba(0, 0, 0, .5); --num-glass-top: rgba(40, 40, 46, .38); --aura: .45;
    --amb1: rgba(10, 132, 255, .24); --amb2: rgba(255, 55, 95, .1); --amb3: rgba(191, 90, 242, .16);
    --glass: rgba(32, 32, 36, .58);
    --pill: rgba(118, 118, 128, .28);
    --frost: rgba(40, 40, 46, .42); --frost-on: rgba(255, 255, 255, .16); --frost-edge: rgba(255, 255, 255, .16); --frost-hi: rgba(255, 255, 255, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg2: #1c1c1e; --card: #1c1c1e;
  --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36);
  --label: #ffffff; --label2: rgba(235, 235, 245, .62); --label3: rgba(235, 235, 245, .3); --sep: rgba(84, 84, 88, .6);
  --accent: #0a84ff; --green: #30d158; --gold: #ffb340;
  --shadow: 0 10px 30px rgba(0, 0, 0, .6);
  --cover-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 6px 18px -8px rgba(0, 0, 0, .55);
  --num-glass: rgba(0, 0, 0, .5); --num-glass-top: rgba(40, 40, 46, .38); --aura: .45;
  --amb1: rgba(10, 132, 255, .24); --amb2: rgba(255, 55, 95, .1); --amb3: rgba(191, 90, 242, .16);
  --glass: rgba(32, 32, 36, .58);
  --pill: rgba(118, 118, 128, .28);
  --frost: rgba(40, 40, 46, .42); --frost-on: rgba(255, 255, 255, .16); --frost-edge: rgba(255, 255, 255, .16); --frost-hi: rgba(255, 255, 255, .08);
  color-scheme: dark;
}


/* ============================================================ base */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto;
}
body {
  margin: 0; overflow-x: clip; isolation: isolate; background: var(--bg); color: var(--label);
  font: 400 17px/1.47 var(--font); letter-spacing: -.022em; font-feature-settings: "kern";
}
/* a soft wash of colour behind everything, so the page feels lit from above */
body::before {
  content: ""; position: fixed; z-index: -1; left: -10vw; right: -10vw; top: -20vh; height: 95vh; pointer-events: none;
  background: radial-gradient(55% 55% at 18% 18%, var(--amb1), transparent 70%), radial-gradient(40% 45% at 92% 6%, var(--amb2), transparent 72%), radial-gradient(60% 50% at 62% 48%, var(--amb3), transparent 75%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
main:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.page-title { margin-top: 24px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* ============================================================ one button family */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-ctl);
  font: 600 15px/1 var(--font); letter-spacing: -.016em; white-space: nowrap;
  color: var(--label); background: transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s, color .18s, transform .45s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.95); }
.btn-tinted { background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.btn.chip { height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }

/* ============================================================ the shell: Liquid Glass
   A bar that floats at the top (logo, the tabs, the round Theme button), with the tabs floating at the bottom on phones
   as in iOS. From 1000px wide it becomes the Apple Music sidebar (further down). */
.top-row {
  position: sticky; top: 0; z-index: 49; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter-r) 10px var(--gutter); pointer-events: none;
  view-transition-name: topbar;   /* it stays put while the page crossfades */
}
.top-row > * { position: relative; z-index: 1; animation: riseIn .6s var(--ease-out) both; }
/* once the page scrolls, iOS's scroll edge: the page frosts and fades under the bar, with no line where it stops */
.top-row::before {
  content: ""; position: absolute; z-index: 0; left: -50vw; right: -50vw; top: 0; bottom: -26px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent) 30%, color-mix(in srgb, var(--bg) 40%, transparent) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.scrolled .top-row::before { opacity: 1; }
/* the page's own title slides into the bar in place of "Tenner" once its large title has scrolled away (iOS) */
.top-brand { position: relative; }
.bar-title { position: absolute; left: 46px; right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 1.06rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--label); opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity .25s ease, translate .35s var(--ease-out); }
.brand-name { transition: opacity .2s ease, translate .3s var(--ease-out); }
.title-in .bar-title { opacity: 1; translate: 0 0; }
.title-in .brand-name { opacity: 0; translate: 0 -8px; }
.top-brand { display: flex; align-items: center; gap: 10px; pointer-events: auto; min-width: 0; }
.lt-logo { display: block; width: 36px; height: 36px; border-radius: 9px; flex: none; box-shadow: 0 2px 8px rgba(120, 40, 200, .28); }
.lt-logo img { width: 36px; height: 36px; }
.brand-name { font: 600 1.2rem/1 var(--font-display); letter-spacing: -.01em; color: var(--label); }
.top-act {
  justify-self: end; display: flex; align-items: center; pointer-events: auto; min-width: 0; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--frost); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-line);
}
.tb-btn {
  position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px;
  appearance: none; background: none; cursor: pointer; touch-action: manipulation; color: var(--label);
}
.tb-btn::after { content: ""; position: absolute; inset: -3px; }
.tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
@media (hover: hover) { .tb-btn:not([aria-expanded="true"]):hover { background: var(--pill); } }
.tb-btn svg { width: 21px; height: 21px; }
.th-wrap { position: relative; display: grid; }
.th-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; appearance: none; cursor: pointer; }
.th-wrap:has(.th-sel:focus-visible) .tb-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
a.tb-btn:hover { text-decoration: none; }
.tb-about[aria-current] { color: var(--accent); }

/* the tabs: a capsule of glass with an even specular rim and a soft shadow below; the chosen tab sits under a pill of
   lighter glass that glides (and squashes a little) as it moves, inset evenly so the two shapes stay concentric */
.tabbar { display: flex; align-items: center; gap: 10px; pointer-events: auto; transition: opacity .25s ease, transform .35s var(--ease-out); }
.tabs {
  position: relative; isolation: isolate; display: flex; padding: 4px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
}
.tabs::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, .18) 45%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, .32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tabs button[data-tab="people"] { display: none; }   /* phones: the bar is full; Cast & Crew is reached from Browse and title sheets */
.tabs button {
  position: relative; z-index: 1; appearance: none; border: 0; background: none; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
  border-radius: 999px; font: 600 15px/1 var(--font); letter-spacing: -.016em; color: var(--label); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tabs button svg { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-selected="true"] { color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .tabs button[aria-selected="false"]:hover { color: var(--accent); } }
.tab-ind {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; transform-origin: center; pointer-events: none;
  background: color-mix(in srgb, var(--pill) 100%, rgba(255, 255, 255, .1)); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs { box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); }
  :root:not([data-theme="light"]) .tabs::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .14)); }
  :root:not([data-theme="light"]) .tab-ind { background: rgba(255, 255, 255, .12); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22); }
}
:root[data-theme="dark"] .tabs { box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .tabs::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .14)); }
:root[data-theme="dark"] .tab-ind { background: rgba(255, 255, 255, .12); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22); }
/* outline symbols at rest, filled for the chosen tab */
.tabs .i-f { display: none; }
.tabs [aria-selected="true"] .i-o { display: none; }
.tabs [aria-selected="true"] .i-f { display: block; }
.tabs .i-f .solid { fill: currentColor; stroke: none; }
.tabs .i-f .thick { stroke-width: 2.7; }
/* Liquid Glass answers a touch by swelling slightly and lighting up, rather than shrinking */
.tabs button:active, .tb-btn:active { transform: scale(1.08); filter: brightness(1.12); }
.tabs button, .tb-btn { transition: transform .35s var(--ease-spring), filter .2s ease, color .3s ease, background-color .2s ease; }

/* phones: the tab bar floats at the bottom of the screen, as in iOS */
@media (max-width: 719px) {
  .top-row { grid-template-columns: minmax(0, 1fr) auto; }
  .top-row > .tabbar {
    position: fixed; z-index: 2; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); justify-content: center; gap: 10px;
    padding: 0 max(14px, env(safe-area-inset-left, 0px)); pointer-events: none;
  }
  .tabbar > * { pointer-events: auto; }
  .tabs { flex: 1; max-width: 340px; padding: 5px; }
  .tab-ind { top: 5px; bottom: 5px; }
  .tabs button { flex: 1; flex-direction: column; justify-content: center; height: 54px; padding: 2px 6px 0; gap: 4px; font-size: 11px; font-weight: 600; }
  .tabs button svg { width: 25px; height: 25px; stroke-width: 1.8; }
  body { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }   /* the end of every page clears the floating tab bar */
  .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* the Theme card that drops from the round button: Auto, Day or Night */
.tb-pop {
  position: fixed; inset: auto; margin: 0; border: 0; z-index: 65; box-sizing: border-box; width: min(300px, calc(100vw - 24px)); overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 90px);
  border-radius: 24px; padding: 18px 18px 12px; color: var(--label);
  background: var(--sheet-bg); -webkit-backdrop-filter: var(--sheet-blur); backdrop-filter: var(--sheet-blur);
  box-shadow: inset 0 0 0 .5px var(--frost-edge), 0 24px 60px rgba(0, 0, 0, .22);
  transform-origin: var(--tb-o, top right); animation: tbDrop .5s cubic-bezier(.34, 1.45, .5, 1) both;
}
.tb-pop:focus { outline: 0; }
@keyframes tbDrop { 0% { opacity: 0; transform: translateY(-10px) scale(.6); filter: blur(4px); } 55% { opacity: 1; filter: blur(0); } 100% { transform: none; } }
.tb-pop > * { animation: tbRise .45s cubic-bezier(.2, .85, .25, 1) both; animation-delay: calc(70ms + var(--i, 0) * 40ms); }
@keyframes tbRise { from { opacity: 0; transform: translateY(10px); } }
.tb-btn[aria-expanded="true"] .ic-sun { animation: tbSpin .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tbSpin { from { transform: rotate(-90deg) scale(.7); } }
.tb-btn[aria-expanded="true"] .ic-moon { transform-origin: 60% 60%; animation: tbRock .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tbRock { 30% { transform: rotate(-24deg); } 65% { transform: rotate(10deg); } }
.tb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.tb-pop h2 { margin: 0; font: 700 1.5rem/1.15 var(--font-display); letter-spacing: .004em; }
.th-list { display: grid; gap: 2px; margin: 0 -8px; }
.th-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--label); text-align: left; font: inherit; cursor: pointer; }
@media (hover: hover) { .th-list button:hover { background: var(--fill); } }
.th-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.th-list i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill-strong); }
.th-list i svg { width: 18px; height: 18px; }
.th-list span { flex: 1; display: grid; gap: 2px; }
.th-list b { font-weight: 600; font-size: 16px; }
.th-list small { color: var(--label2); font-size: 13px; }
.th-list em { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--label3); }
.th-list [aria-checked="true"] em { box-shadow: inset 0 0 0 6px var(--accent); }

/* ============================================================ the chart page header, compact
   Title, one grey line (where the chart is from, and when it was updated), then one row: Shows | Films and the services. */
.intro { padding-top: 8px; }
.large-title { margin: 22px 0 6px; font: 700 clamp(32px, 5vw, 48px)/1.1 var(--font-display); letter-spacing: -.008em; text-wrap: balance; }
.intro .large-title { margin: 14px 0 6px; font-size: clamp(30px, 3.6vw, 40px); }
.lede { margin: 0; color: var(--label2); font-size: 17px; letter-spacing: -.022em; max-width: 60ch; }
.sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 16px; letter-spacing: -.022em; }
#lede { display: inline-flex; align-items: center; gap: 7px; }
.sub-logo { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 .5px var(--sep); }
/* "Updated … ago": a quiet text button; tap it to check for a newer chart */
.updated {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--label2); font: 500 15px/1.3 var(--font); letter-spacing: -.016em; position: relative;
}
@media (hover: hover) { .updated:hover { color: var(--label); } }
.updated::after { content: ""; position: absolute; inset: -12px -8px; }   /* a comfortable target (44pt tall) around small text */
.share-chart { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border: 0; border-radius: 8px; cursor: pointer;
  font: 600 14px/1 var(--font); letter-spacing: -.016em; color: var(--accent); background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.share-chart svg { width: 15px; height: 15px; }
.share-chart:disabled { opacity: .5; }
/* phones: Share becomes a round button beside the title, as in iOS, instead of a line of its own */
@media (max-width: 560px) {
  .intro { position: relative; }
  .intro .large-title { padding-right: 52px; }
  .share-chart { position: absolute; top: 18px; right: var(--gutter-r); width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; gap: 0;
    background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
  .share-chart svg { width: 19px; height: 19px; margin-top: -2px; }
  .intro > .lede.sub { animation-name: fadeOnly; }   /* no movement on this line, so Share stays pinned to the title area */
}
@keyframes fadeOnly { from { opacity: 0; } }
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: ping 2.4s ease-out 4; }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
.updated.busy .live-dot { background: var(--label2); animation: busy 1s ease-in-out infinite; }   /* only while checking */
@keyframes busy { 50% { transform: scale(.5); opacity: .5; } }
#ago.swap { display: inline-block; animation: agoSwap .5s var(--ease-out); }
@keyframes agoSwap { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.segmented { position: relative; isolation: isolate; touch-action: pan-y;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: none; height: 36px; padding: 3px; border-radius: var(--r-ctl);
  background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.segmented button {
  position: relative; z-index: 1;
  font: 600 14px/1 var(--font); letter-spacing: -.016em; color: var(--label2); background: none; border: 0; border-radius: var(--r-in); padding: 0 16px; min-width: 72px; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* the thumb: one frosted tile that slides between the options (and can be dragged, like an iOS switch's knob) */
.segmented button[aria-checked="true"] { color: var(--label); }
.seg-thumb {
  position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: var(--r-in); pointer-events: none;
  background: var(--frost-on); box-shadow: inset 0 0 0 .5px var(--frost-edge);
  transition: scale .3s var(--ease-spring), filter .2s ease;
}
.seg-thumb.held { scale: 1.06; filter: brightness(1.06); }   /* held: it swells a touch, as the iOS knob does */
.segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the service bar: a glass capsule like the tab bar, each service as its own app icon with its name, and a lighter pill
   that glides to the chosen one. Buy or rent sits after a hairline, since it isn't a service. On phones it scrolls. */
@property --fl { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --fr { syntax: "<length>"; inherits: true; initial-value: 0px; }
.svc {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-ctl); max-width: 100%;
  background: var(--frost); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-line);
  overflow: hidden; isolation: isolate;
}
.svc-track {
  --fl: 28px; --fr: 28px;
  position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--r-in);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  transition: --fl .35s ease, --fr .35s ease;
}
.svc-track::-webkit-scrollbar { display: none; }
.svc.at-start .svc-track { --fl: 0px; }
.svc.at-end .svc-track { --fr: 0px; }
.svc-ind {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-in); pointer-events: none;
  background: var(--frost-on); box-shadow: inset 0 0 0 .5px var(--frost-edge);
}
.svc-b {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 4px;
  border: 0; border-radius: var(--r-in); background: none; cursor: pointer; color: var(--label2);
  font: 600 14px/1 var(--font); letter-spacing: -.016em; white-space: nowrap;
  transition: color .25s ease, transform .4s var(--ease-spring); -webkit-tap-highlight-color: transparent;
}
.svc-b.txt { padding: 0 13px; }   /* All: just the word */
.svc-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.svc-b[aria-checked="true"] { color: var(--label); }
@media (hover: hover) { .svc-b[aria-checked="false"]:hover { color: var(--label); } .svc-b:hover .svc-ic { transform: scale(1.08); } }
.svc-b:active { transform: scale(.95); }
.svc-ic {
  width: 22px; height: 22px; flex: none; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 0 .5px var(--sep), 0 2px 6px rgba(0, 0, 0, .18); transition: transform .45s var(--ease-spring), filter .3s ease, opacity .3s ease;
}
.svc-ic img { width: 100%; height: 100%; object-fit: cover; }
.svc-b[aria-checked="false"] .svc-ic { filter: saturate(.75); opacity: .85; }
.svc-glyph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 700 14px var(--font); background: linear-gradient(135deg, #ff375f, #bf5af2 55%, #0a84ff); }
.svc-glyph svg { width: 14px; height: 14px; }
.svc-edit { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 2px; border: 0; border-radius: var(--r-in); background: none; color: var(--label2); cursor: pointer; }
.svc-edit svg { width: 18px; height: 18px; }
@media (hover: hover) { .svc-edit:hover { color: var(--label); background: var(--fill); } }
.svc-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.svc-sep { flex: none; width: 1px; height: 18px; margin: 0 3px; background: var(--sep); }

/* phones: the service bar folds into one button over the phone's own picker (a native <select>), under Shows | Films */
.dd { display: none; }
@media (max-width: 560px) {
  /* Shows | Films stays the switch, sitting neatly on top of the services picker, the two the same width */
  .controls .svc { display: none; }
  .controls { flex-wrap: wrap; gap: 8px; }
  .controls .segmented { display: grid; width: 100%; height: 40px; }
  .dd {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); cursor: pointer;
    color: var(--label); font: 600 15px/1 var(--font); letter-spacing: -.016em; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    background: var(--frost); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-line);
    transition: transform .35s var(--ease-spring), background-color .2s ease;
  }
  #svcDD { flex: 1 1 100%; padding-left: 6px; }
  #svcDD:has(.dd-ic[hidden]) { padding-left: 16px; }
  .dd:active { transform: scale(1.04); }
  .dd { position: relative; }
  /* the native picker sits invisibly over the button: a tap opens the phone's own list */
  .dd select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; appearance: none; border: 0; cursor: pointer; }
  .dd:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .dd-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .dd-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 .5px var(--sep); }
  .dd-ic img, .dd-ic .svc-glyph { width: 100%; height: 100%; object-fit: cover; }
  .dd-ic .svc-glyph svg { width: 16px; height: 16px; }
  .dd-chev { flex: none; width: 7px; height: 7px; margin: -4px 2px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .3s var(--ease-spring); }
}

.notice { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 15px; }
.chart { min-width: 0; padding-top: 6px; }

/* phones: page titles at the iOS Large Title size (34pt bold) */
@media (max-width: 560px) {
  .large-title { font-size: 34px; line-height: 1.12; margin-top: 18px; }
  .intro .large-title { font-size: 34px; }
  .lede, .sub { font-size: 15px; }
  .updated { flex: none; }
  .segmented button { min-width: 0; padding: 0 12px; }
  .notice { font-size: 14px; padding: 10px 14px; }
}

/* ============================================================ the poster row, with neon rainbow ranks */
.row-wrap {
  /* the row runs edge to edge of the screen; its first card lines up with the page column */
  --col: max(var(--gutter), calc((100vw - var(--side, 0px) - var(--max)) / 2 + var(--gutter)));
  --cw: min(64vw, 236px);
  --edge: max(76px, var(--col));
  position: relative; width: calc(100vw - var(--side, 0px)); margin-left: calc(50% - (100vw - var(--side, 0px)) / 2);
}
.row-wrap + .feats { margin-top: 30px; }
.posters {
  list-style: none; margin: 0; padding: 34px var(--col) 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw); gap: 26px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--col);
}
.posters::-webkit-scrollbar { display: none; }
.pcard { scroll-snap-align: start; position: relative; padding-top: 40px; animation: cardIn .7s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 55ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(6px); } }

/* each rank is a neon sign in four layers: a soft aura, a glassy body, the rainbow tube with bloom, a white-hot core */
.num { position: absolute; top: -14px; left: -12px; width: 156px; height: 112px; overflow: visible; pointer-events: none; z-index: 1; transition: transform .5s var(--ease-spring); }
.num text { font: 800 96px var(--font-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; paint-order: stroke; }
.num .aura { opacity: var(--aura); transition: opacity .4s ease; }
.num .glass { fill: url(#glassFill); }
.num .tube { fill: none; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.num .core { fill: none; stroke: url(#coreFade); stroke-width: .9; stroke-linejoin: round; opacity: var(--core); }
.pcard:hover .num { transform: translateY(-3px); }
.pcard:hover .num .aura { opacity: calc(var(--aura) * 1.5); }

/* posters, the Apple TV way: flat artwork, softly rounded, a hairline edge and a quiet shadow, always shown whole
   (height: auto beats the img's height attribute, and contain means nothing is ever cut off). On hover it lifts a touch. */
.pcard a.cover { display: block; position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--cover-shadow); transition: translate .35s var(--ease-out); }
@media (hover: hover) { .pcard:hover a.cover { translate: 0 -3px; } }
.cover img, .cover .ph { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: var(--fill); }
.ph { display: grid; align-content: end; padding: 18px; color: #fff; font: 700 25px/1.05 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.pcard h3 { margin: 10px 0 2px; font: 600 15px/1.25 var(--font); letter-spacing: -.022em; }
.pcard h3 a { color: var(--label); }
.pcard .sub { margin: 0; color: var(--label2); font-size: 13px; letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.star { color: var(--gold); font-weight: 600; }

/* arrows: glass circles that spring in and out, and swell under the pointer like Liquid Glass */
.scroller {
  position: absolute; top: calc(34px + 50px + var(--cw) * .75 - 22px); z-index: 3; color: var(--label);
  background: var(--frost); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); box-shadow: var(--frost-line);
  transition: opacity .3s ease, transform .45s var(--ease-spring), background-color .2s ease;
}
.scroller:hover { transform: scale(1.08); }
.scroller:active { transform: scale(.94); }
.scroller.prev { left: max(10px, calc(var(--col) - 22px)); }
.scroller.next { right: max(10px, calc(var(--col) - 22px)); }
.scroller:disabled { opacity: 0; transform: scale(.6); pointer-events: none; }
@media (hover: none) { .scroller { display: none; } }

/* the row melts into the screen edges, the way Apple's own apps do it:
   1. the posters fade out along a smootherstep curve (no visible start or end to the ramp), and
   2. above them, six stacked layers of glass whose blur doubles towards the edge, each masked to its own band,
      so the frosting deepens gradually instead of starting as a strip.
   Each edge glides away when you reach that end of the row. */
.posters {
  --fl: var(--edge); --fr: var(--edge);
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.0000) calc(var(--fl) * 0.0000), rgb(0 0 0 / 0.0051) calc(var(--fl) * 0.0833), rgb(0 0 0 / 0.0355) calc(var(--fl) * 0.1667), rgb(0 0 0 / 0.1035) calc(var(--fl) * 0.2500), rgb(0 0 0 / 0.2099) calc(var(--fl) * 0.3333), rgb(0 0 0 / 0.3466) calc(var(--fl) * 0.4167), rgb(0 0 0 / 0.5000) calc(var(--fl) * 0.5000), rgb(0 0 0 / 0.6534) calc(var(--fl) * 0.5833), rgb(0 0 0 / 0.7901) calc(var(--fl) * 0.6667), rgb(0 0 0 / 0.8965) calc(var(--fl) * 0.7500), rgb(0 0 0 / 0.9645) calc(var(--fl) * 0.8333), rgb(0 0 0 / 0.9949) calc(var(--fl) * 0.9167), rgb(0 0 0 / 1.0000) calc(var(--fl) * 1.0000), rgb(0 0 0 / 1.0000) calc(100% - var(--fr) * 1.0000), rgb(0 0 0 / 0.9949) calc(100% - var(--fr) * 0.9167), rgb(0 0 0 / 0.9645) calc(100% - var(--fr) * 0.8333), rgb(0 0 0 / 0.8965) calc(100% - var(--fr) * 0.7500), rgb(0 0 0 / 0.7901) calc(100% - var(--fr) * 0.6667), rgb(0 0 0 / 0.6534) calc(100% - var(--fr) * 0.5833), rgb(0 0 0 / 0.5000) calc(100% - var(--fr) * 0.5000), rgb(0 0 0 / 0.3466) calc(100% - var(--fr) * 0.4167), rgb(0 0 0 / 0.2099) calc(100% - var(--fr) * 0.3333), rgb(0 0 0 / 0.1035) calc(100% - var(--fr) * 0.2500), rgb(0 0 0 / 0.0355) calc(100% - var(--fr) * 0.1667), rgb(0 0 0 / 0.0051) calc(100% - var(--fr) * 0.0833), rgb(0 0 0 / 0.0000) calc(100% - var(--fr) * 0.0000));
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.0000) calc(var(--fl) * 0.0000), rgb(0 0 0 / 0.0051) calc(var(--fl) * 0.0833), rgb(0 0 0 / 0.0355) calc(var(--fl) * 0.1667), rgb(0 0 0 / 0.1035) calc(var(--fl) * 0.2500), rgb(0 0 0 / 0.2099) calc(var(--fl) * 0.3333), rgb(0 0 0 / 0.3466) calc(var(--fl) * 0.4167), rgb(0 0 0 / 0.5000) calc(var(--fl) * 0.5000), rgb(0 0 0 / 0.6534) calc(var(--fl) * 0.5833), rgb(0 0 0 / 0.7901) calc(var(--fl) * 0.6667), rgb(0 0 0 / 0.8965) calc(var(--fl) * 0.7500), rgb(0 0 0 / 0.9645) calc(var(--fl) * 0.8333), rgb(0 0 0 / 0.9949) calc(var(--fl) * 0.9167), rgb(0 0 0 / 1.0000) calc(var(--fl) * 1.0000), rgb(0 0 0 / 1.0000) calc(100% - var(--fr) * 1.0000), rgb(0 0 0 / 0.9949) calc(100% - var(--fr) * 0.9167), rgb(0 0 0 / 0.9645) calc(100% - var(--fr) * 0.8333), rgb(0 0 0 / 0.8965) calc(100% - var(--fr) * 0.7500), rgb(0 0 0 / 0.7901) calc(100% - var(--fr) * 0.6667), rgb(0 0 0 / 0.6534) calc(100% - var(--fr) * 0.5833), rgb(0 0 0 / 0.5000) calc(100% - var(--fr) * 0.5000), rgb(0 0 0 / 0.3466) calc(100% - var(--fr) * 0.4167), rgb(0 0 0 / 0.2099) calc(100% - var(--fr) * 0.3333), rgb(0 0 0 / 0.1035) calc(100% - var(--fr) * 0.2500), rgb(0 0 0 / 0.0355) calc(100% - var(--fr) * 0.1667), rgb(0 0 0 / 0.0051) calc(100% - var(--fr) * 0.0833), rgb(0 0 0 / 0.0000) calc(100% - var(--fr) * 0.0000));
  transition: --fl .6s var(--ease-out), --fr .6s var(--ease-out);
}
.row-wrap.at-start .posters { --fl: 0px; }
.row-wrap.at-end .posters { --fr: 0px; }
.edge { position: absolute; z-index: 2; top: -28px; bottom: -28px; width: var(--edge);   /* a little past the row, fading out top and bottom: no hard line */
  pointer-events: none; transition: opacity .6s var(--ease-out), translate .7s var(--ease-spring); }
.edge.l { left: 0; --to: left; }
.edge.r { right: 0; --to: right; }
.edge i { position: absolute; inset: 0; }
.edge i:nth-child(1) { -webkit-backdrop-filter: blur(0.6px); backdrop-filter: blur(0.6px); -webkit-mask-image: linear-gradient(to var(--to), transparent 0.00%, #000 14.29%, #000 28.57%, transparent 42.86%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 0.00%, #000 14.29%, #000 28.57%, transparent 42.86%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.edge i:nth-child(2) { -webkit-backdrop-filter: blur(1.4px); backdrop-filter: blur(1.4px); -webkit-mask-image: linear-gradient(to var(--to), transparent 14.29%, #000 28.57%, #000 42.86%, transparent 57.14%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 14.29%, #000 28.57%, #000 42.86%, transparent 57.14%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.edge i:nth-child(3) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to var(--to), transparent 28.57%, #000 42.86%, #000 57.14%, transparent 71.43%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 28.57%, #000 42.86%, #000 57.14%, transparent 71.43%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.edge i:nth-child(4) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to var(--to), transparent 42.86%, #000 57.14%, #000 71.43%, transparent 85.71%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 42.86%, #000 57.14%, #000 71.43%, transparent 85.71%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.edge i:nth-child(5) { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); -webkit-mask-image: linear-gradient(to var(--to), transparent 57.14%, #000 71.43%, #000 85.71%, transparent 100.00%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 57.14%, #000 71.43%, #000 85.71%, transparent 100.00%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.edge i:nth-child(6) { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(to var(--to), transparent 71.43%, #000 85.71%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to var(--to), transparent 71.43%, #000 85.71%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.row-wrap.at-start .edge.l { opacity: 0; translate: -30% 0; }
.row-wrap.at-end .edge.r { opacity: 0; translate: 30% 0; }

/* drag to scroll with a mouse: grab, fling, and it settles on a card */
@media (hover: hover) and (pointer: fine) { .posters { cursor: grab; } }
.posters.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.posters.dragging a { pointer-events: none; }

@media (max-width: 560px) {
  .row-wrap { --cw: min(44vw, 200px); --edge: 46px; }
  .edge i:nth-child(odd) { display: none; }   /* three layers are plenty on a phone, and cheaper to scroll */
  .posters { gap: 16px; padding-top: 26px; }
  .pcard { padding-top: 30px; }
  .num { width: 118px; height: 85px; top: -10px; left: -9px; }
  .ph { font-size: 18px; padding: 12px; }
}
@media (prefers-reduced-transparency: reduce) { .edge { display: none; } }

/* ============================================================ computers: the hero, the Sky / Apple TV way
   The chart's top title as a big backdrop on the right of the page, melting into it on the left and at the bottom;
   the page header and the hero's words run down the faded part, and the page carries on below as normal. */
.backdrop, .bd-ext, .hero { display: none; }
@media (min-width: 1000px) {
  main { position: relative; isolation: isolate; }
  .backdrop {
    /* pinned to the window: it stays put while the page scrolls up over it */
    display: block; position: fixed; z-index: -1; top: 0; right: 0; width: min(calc((100vw - var(--side, 0px)) * .84), 1560px); height: clamp(640px, 94vh, 1000px); pointer-events: none; overflow: hidden;
    /* two fades multiplied together: in from the left, out towards the bottom, both on soft curves so neither edge shows */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .42) 22%, rgba(0, 0, 0, .78) 36%, #000 50%),
                        linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, .3) 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .42) 22%, rgba(0, 0, 0, .78) 36%, #000 50%),
                linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .7) 60%, rgba(0, 0, 0, .3) 78%, transparent 100%);
    mask-composite: intersect;
  }
  /* as the page scrolls up over it, the picture dims, so the posters and lists stay easy to read (scroll-linked, no script) */
  @supports (animation-timeline: scroll()) {
    .backdrop { animation: bdDim linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    @keyframes bdDim { to { opacity: .32; } }
  }
  /* Apple's background extension: the artwork, mirrored and heavily blurred, runs on under the glass sidebar, so the
     sidebar takes on the colours of what's showing. It fades out down the sidebar and dims with the backdrop. */
  .bd-ext { display: block; position: fixed; z-index: 49; top: 0; left: 0; width: var(--side); height: clamp(640px, 94vh, 1000px); overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
  .bd-ext .bd-l { transform: scaleX(-1) scale(1.3); transform-origin: center; object-position: left 20%; filter: blur(34px) saturate(1.5); opacity: .9; }
  @supports (animation-timeline: scroll()) { .bd-ext { animation: bdDim linear both; animation-timeline: scroll(root); animation-range: 0 80vh; } }
  .bd-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0; transition: opacity .6s var(--ease-out); }
  .bd-l.in { opacity: 1; }

  /* the Apple TV hero: a tall stage with the words at the bottom left, over the faded part of the artwork; arrows at
     either side, dots under the buttons and a pause button at the bottom right. A steady height, so nothing jumps as
     titles change. */
  .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, calc(94vh - 290px), 700px);
    margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); padding: 24px 76px 30px; }
  /* a soft shade of the page's own colour behind the words, so they read on any artwork; no edge, it melts like the fade */
  /* closest-side: the glow reaches nothing exactly at its box's edges, so it can never be cut off into a line */
  .hero::before { content: ""; position: absolute; z-index: -1; left: -14%; right: 22%; top: -6%; bottom: -30%; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 58%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 38%, color-mix(in srgb, var(--bg) 14%, transparent) 70%, transparent 100%); }
  .h-copy { max-width: 620px; transition: opacity .22s ease, translate .22s ease; }
  .h-copy.out { opacity: 0; translate: 0 8px; }
  .h-badge { display: inline-flex; align-items: center; height: 34px; margin: 0 0 14px; padding: 0 16px; border-radius: 999px;
    font: 600 16px/1 var(--font); letter-spacing: -.016em; color: var(--label);
    background: color-mix(in srgb, var(--bg) 38%, transparent); box-shadow: inset 0 0 0 .5px var(--frost-edge);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
  .h-title { margin: 0; font: 800 clamp(48px, 5.6vw, 92px)/.98 var(--font-display); letter-spacing: -.035em; text-wrap: balance;
    text-shadow: 0 2px 40px color-mix(in srgb, var(--bg) 50%, transparent);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: .04em; }
  .h-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; color: var(--label); opacity: .86; font: 500 18px/1.3 var(--font); letter-spacing: -.016em; font-variant-numeric: tabular-nums; }
  .h-svc { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .5px var(--sep), 0 4px 10px rgba(0, 0, 0, .25); }
  .h-cert { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; font: 700 11px/1 var(--font);
    color: #fff; background: #8e8e93; }
  /* the BBFC's own colours */
  .h-cert[data-c="U"] { background: #10a24b; } .h-cert[data-c="PG"] { background: #f2b100; color: #1c1c1e; }
  .h-cert[data-c="12"], .h-cert[data-c="12A"] { background: #f37021; } .h-cert[data-c="15"] { background: #e2357b; } .h-cert[data-c="18"], .h-cert[data-c="R18"] { background: #dc1e2d; }
  .h-blurb { margin: 14px 0 0; max-width: 34em; color: var(--label); opacity: .74; font-size: 20px; line-height: 1.42; letter-spacing: -.018em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .h-btns { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
  .h-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: min(300px, 100%); height: 64px; border-radius: 14px;
    background: color-mix(in srgb, var(--label) 82%, transparent); color: var(--bg); font: 600 21px/1 var(--font); letter-spacing: -.02em;
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .4s var(--ease-spring), background-color .2s ease, filter .1s ease;
  }
  .h-cta svg { width: 20px; height: 20px; color: inherit; }
  .h-cta:hover { text-decoration: none; background: var(--label); }
  .h-cta:active { transform: scale(.96); }
  .h-cta:focus-visible, .h-add:focus-visible, .h-arrow:focus-visible, .h-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .h-add { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--label);
    background: color-mix(in srgb, var(--label) 16%, transparent); box-shadow: inset 0 0 0 .5px var(--frost-edge);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); transition: transform .4s var(--ease-spring), background-color .2s ease; }
  .h-add svg { width: 28px; height: 28px; }
  .h-add:hover { background: color-mix(in srgb, var(--label) 26%, transparent); }
  .h-add:active { transform: scale(.92); }
  .h-add[aria-pressed="true"] { color: var(--accent); }
  /* the dots, like the TV: small circles, the one showing is bright */
  .h-dots { display: flex; gap: 14px; margin-top: 30px; }
  .h-dots button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--label) 34%, transparent); cursor: pointer; transition: background-color .25s ease, transform .3s var(--ease-spring); }
  .h-dots button::after { content: ""; position: absolute; inset: -8px; }   /* a bigger target than it looks */
  .h-dots button[aria-current="true"] { background: var(--label); transform: scale(1.15); }
  @media (hover: hover) { .h-dots button:not([aria-current="true"]):hover { background: color-mix(in srgb, var(--label) 64%, transparent); } }
  /* arrows at the edges, thin chevrons as on the TV */
  .h-arrow { position: absolute; top: calc(50% - 40px); display: grid; place-items: center; width: 48px; height: 80px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer;
    color: var(--label); opacity: .62; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--bg) 60%, transparent)); transition: opacity .2s ease, transform .3s var(--ease-spring); }
  .h-arrow svg { width: 22px; height: 38px; }
  .h-arrow.prev { left: 14px; } .h-arrow.next { right: 14px; }
  .h-arrow:hover { opacity: 1; }
  .h-arrow.prev:active { transform: translateX(-3px); } .h-arrow.next:active { transform: translateX(3px); }
  /* pause, bottom right: only when it's moving by itself */
  .h-pause { position: absolute; right: 76px; bottom: 34px; display: none; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
    color: var(--label); background: none; border: 2px solid color-mix(in srgb, var(--label) 60%, transparent); opacity: .8; transition: opacity .2s ease; }
  .hero.auto .h-pause { display: grid; }
  .h-pause:hover { opacity: 1; }
  .h-pause svg { width: 18px; height: 18px; }
  .h-pause .i-play, .h-pause[aria-pressed="true"] .i-pause { display: none; }
  .h-pause[aria-pressed="true"] .i-play { display: block; }
  .hero + .row-wrap { margin-top: 4px; }
}

/* ============================================================ homepage, the Apple Music "New" way
   Feature cards up top, the neon row, the ten as a column list, then New This Week. Section headings link on, with a chevron. */
/* with Both, each chart gets a heading above its neon row */
.row-h.kind-h { margin: 40px 0 -10px; font-size: 26px; }
.row-h { margin: 44px 0 14px; font: 700 22px/1.2 var(--font-display); letter-spacing: -.008em; }
.row-h a { color: var(--label); display: inline-flex; align-items: center; gap: 6px; }
.row-h a:hover { text-decoration: none; color: var(--accent); }
.chev { width: 9px; height: 9px; border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(-45deg); opacity: .55; margin-left: 2px; }
.row-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 44px 0 14px; }
.row-hd .row-h { margin: 0; }
.see-all { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 15px; font-weight: 500; letter-spacing: -.016em; }
.see-all .chev { width: 7px; height: 7px; border-width: 0 2px 2px 0; }

/* feature cards */
.feats { margin-top: 26px; }
.feat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.feat:hover { text-decoration: none; }
.f-eye { font: 600 11px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label2); }
.f-title { margin-top: 3px; font: 500 17px/1.25 var(--font); letter-spacing: -.022em; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-sub { font-size: 15px; line-height: 1.3; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-img {
  position: relative; display: block; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--fill);
  box-shadow: 0 0 0 .5px var(--sep), 0 10px 28px -14px rgba(0, 0, 0, .6); transition: translate .35s var(--ease-out);
}
.f-img > img:first-child, .f-img > .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-img > .ph { font-size: 0; }   /* no artwork: just colour, no repeated title */
.f-img > img.blur { filter: blur(24px) saturate(1.3); transform: scale(1.3); }
.f-img::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.f-cap {
  position: absolute; z-index: 1; left: 14px; right: 70px; bottom: 12px; color: #fff; font-size: 13px; line-height: 1.35; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.f-thumb { position: absolute; z-index: 1; right: 12px; bottom: 12px; width: 44px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .3), 0 4px 12px rgba(0, 0, 0, .5); }
@media (hover: hover) { .feat:hover .f-img { translate: 0 -3px; } .feat:hover .f-title { color: var(--accent); } }

/* the ten in columns; the hover fills the row exactly, edge to edge between its dividing lines */
.cl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 36px; }
.cl li { border-top: .5px solid var(--sep); transition: background-color .15s ease; }
.cl li:nth-child(5n + 1) { border-top: 0; }
@media (hover: hover) { .cl li:hover { background: var(--fill); } }
.cl a { display: flex; align-items: center; gap: 14px; padding: 9px 10px; color: inherit; }
.cl a:hover { text-decoration: none; }
.cl-n { width: 22px; flex: none; display: grid; justify-items: center; gap: 3px; font: 700 17px/1 var(--font-display); color: var(--label2); font-variant-numeric: tabular-nums; }
.cl img, .cl-ph { width: 40px; height: 60px; flex: none; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 .5px var(--sep); }
.cl-t { flex: 1; min-width: 0; display: grid; }
.cl-t b { font-weight: 500; font-size: 15px; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-t small { font-size: 13px; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-r { flex: none; font-size: 13px; color: var(--label2); font-variant-numeric: tabular-nums; }
/* movement since about a day ago: green up, red down, blue for new entries */
.mv { font: 700 11px/1 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv.up { color: var(--green); }
.mv.down { color: #ff3b30; }
.mv.new { color: var(--accent); font-size: 9.5px; letter-spacing: .04em; }
.mv.same { color: var(--label3); font-weight: 600; }
.cl-n .mv { font-size: 10px; }
.cl-n .mv.new { font-size: 8.5px; }

/* New This Week, as a row of posters */
.nr {
  list-style: none; margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter-r) 6px var(--gutter);
  display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-left: var(--gutter);
}
.nr::-webkit-scrollbar { display: none; }
.nr li { scroll-snap-align: start; min-width: 0; }
.nr a, .nr li > span { display: grid; gap: 2px; color: inherit; }
.nr a:hover { text-decoration: none; }
.nr-art { position: relative; display: block; margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: var(--fill); box-shadow: 0 0 0 .5px var(--sep), 0 6px 16px -8px rgba(0, 0, 0, .5); transition: translate .35s var(--ease-out); }
.nr-art > img:first-child, .nr-art > .ph { display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; }
.nr-art > .ph { font-size: 16px; padding: 10px; }
.nr-svc { position: absolute; left: 7px; bottom: 7px; width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .4); }
.nr b { font-weight: 500; font-size: 14px; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr small { font-size: 12px; color: var(--label2); }
@media (hover: hover) { .nr a:hover .nr-art { translate: 0 -3px; } }

@media (max-width: 900px) {
  .feat-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 420px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter-r) 4px var(--gutter); scroll-padding-left: var(--gutter);
  }
  .feat-row::-webkit-scrollbar { display: none; }
  .feat { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .cl { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .cl li:nth-child(5n + 1) { border-top: .5px solid var(--sep); }
  .cl li:first-child { border-top: 0; }
  .row-h { margin-top: 34px; font-size: 20px; }
  .row-hd { margin-top: 34px; }
  .see-all { font-size: 14px; }
  .nr { grid-auto-columns: 124px; gap: 12px; }
}

/* ============================================================ New This Week page: an inset grouped list by day */
.group { margin: 26px 0 0; animation: riseIn .6s var(--ease-out) both; }
.group:nth-of-type(2) { animation-delay: .05s; } .group:nth-of-type(3) { animation-delay: .1s; }
.group:nth-of-type(4) { animation-delay: .15s; } .group:nth-of-type(n+5) { animation-delay: .2s; }
.group h2 { margin: 0 0 8px 16px; font: 600 13px/1.3 var(--font); color: var(--label2); letter-spacing: 0; }
.group h2.today { color: var(--accent); }
.list { list-style: none; margin: 0; padding: 0; background: var(--bg2); border-radius: var(--radius); overflow: hidden; }
.list li { display: flex; align-items: center; gap: 12px; padding: 9px 16px; position: relative; }
.list li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--sep); }
.list .nl-art { width: 40px; height: 60px; flex: none; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 .5px var(--sep); }
.list .grow { flex: 1; min-width: 0; }
.list .title { color: var(--label); font-weight: 500; }
.list .what { display: block; color: var(--label2); font-size: 14px; }
/* Watchlist rows: where it's included, then remove */
.list.wl { margin-top: 16px; }
/* This Week */
.wk { margin-top: 30px; }
.wk-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.wk-hd .row-h { margin: 0; }
.wk-hd p { margin: 0; color: var(--label2); font-size: 14px; }
.wk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; }
.wk-list li { border-bottom: .5px solid var(--sep); }
.wk-list a { display: flex; align-items: center; gap: 14px; padding: 10px 6px; color: inherit; border-radius: 10px; }
.wk-list a:hover { text-decoration: none; }
@media (hover: hover) { .wk-list a:hover { background: var(--fill); } }
.wk-list img, .wk-list .cl-ph { width: 44px; height: 66px; flex: none; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 .5px var(--sep); }
.wk-list .mv { font-size: 13px; }
.wl-spot { color: var(--accent); font-weight: 500; }
.wl-next { margin-top: 1px; font-size: 13px; }
.wl-go { color: var(--label); font-weight: 600; }
.wl-soon { margin: 6px 0 22px; }
.cu-when { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 8px; font: 600 12px/1 var(--font); color: #fff;
  background: rgba(20, 20, 24, .6); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.wl-on { display: flex; gap: 6px; flex: none; }
.wl-on img { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 0 0 .5px var(--sep); }
.wl-x { flex: none; width: 30px; height: 30px; color: var(--label2); }
.wl-x svg { width: 14px; height: 14px; }
@media (max-width: 420px) { .wl-on img:nth-child(n+2) { display: none; } }
/* the sheet's Watchlist button, once saved */
.sh-save.on { color: var(--accent); }
/* My services: a small sheet of switches */
.mine-dlg { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; color: var(--label);
  background: var(--sheet-bg); -webkit-backdrop-filter: var(--sheet-blur); backdrop-filter: var(--sheet-blur);
  box-shadow: inset 0 0 0 .5px var(--frost-edge), 0 30px 80px -20px rgba(0, 0, 0, .6); }
.mine-dlg::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mine-dlg form { padding: 22px 20px 18px; }
.mine-dlg h2 { margin: 0 0 6px; font: 700 22px/1.2 var(--font-display); }
.mine-dlg p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--label2); }
.mine-list { border-radius: 12px; background: var(--bg2); overflow: hidden; }
.mine-row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; cursor: pointer; position: relative; }
.mine-row + .mine-row { border-top: .5px solid var(--sep); }
.mine-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: none; background: var(--fill); font-weight: 700; }
.mine-ic img { width: 100%; height: 100%; object-fit: cover; }
.mine-l { flex: 1; font-size: 16px; }
.mine-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { position: relative; width: 51px; height: 31px; flex: none; border-radius: 16px; background: var(--fill-strong); transition: background-color .25s ease; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: translate .25s var(--ease-out); }
.mine-row input:checked + .sw { background: var(--green); }
.mine-row input:checked + .sw::after { translate: 20px 0; }
.mine-row input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Safari's own iOS switch (<input type="checkbox" switch>) where it exists; the drawn one elsewhere */
.mine-dlg.native-sw .mine-row input { position: static; opacity: 1; width: auto; height: auto; margin: 0; accent-color: var(--green); font-size: 17px; }
.mine-dlg.native-sw .sw { display: none; }
.mine-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.mine-acts .btn { height: 40px; padding: 0 16px; }
.mine-done { color: var(--accent); font-weight: 600; }
/* trackers in the sheet: the next episode, your progress, and the title's line on the chart */
.sh-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sh-next b { font-weight: 600; color: var(--accent); }
.sh-next span { color: var(--label2); font-size: 14px; }
.sh-next.done { background: var(--fill); } .sh-next.done b { color: var(--label2); }
.sh-prog, .sh-track, .sh-cast { margin-top: 22px; padding-top: 18px; border-top: .5px solid var(--sep); }
.sh-prog h3, .sh-track h3, .sh-cast h3 { margin: 0 0 10px; font: 700 20px/1.2 var(--font-display); letter-spacing: .004em; }
/* Cast & Crew in the sheet: a row of round faces, Apple TV style */
.sh-faces { display: grid; grid-auto-flow: column; grid-auto-columns: 88px; gap: 14px; margin: 0 -24px; padding: 4px 24px 6px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; }
.sh-faces::-webkit-scrollbar { display: none; }
.sh-faces li { scroll-snap-align: start; min-width: 0; }
.sh-faces a { display: grid; justify-items: center; gap: 1px; text-align: center; color: inherit; text-decoration: none; }
.sh-face { display: grid; place-items: center; width: 76px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; color: #fff; font: 600 22px/1 var(--font-display);
  background: linear-gradient(160deg, hsl(var(--h) 30% 60%), hsl(var(--h) 34% 36%)); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .3s var(--ease-out); }
.sh-face img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sh-faces b { margin-top: 7px; width: 100%; font: 600 13px/1.2 var(--font); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-faces small { width: 100%; color: var(--label2); font-size: 12px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (hover: hover) { .sh-faces a:hover .sh-face { transform: scale(1.06); } }
.sh-faces a:focus-visible { outline: none; }
.sh-faces a:focus-visible .sh-face { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.sh-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sh-prow label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--label2); }
.sh-prow select { height: 34px; padding: 0 28px 0 10px; border-radius: var(--r-ctl); border: 0; font: 500 15px/1 var(--font); color: var(--label); appearance: none; cursor: pointer;
  background: var(--frost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  box-shadow: var(--frost-line); }
.sh-prow select:disabled { opacity: .45; }
.sh-prow .btn { height: 34px; padding: 0 14px; font-size: 14px; }
.sh-reset { color: var(--label2); }
.sh-pstat { margin: 10px 0 0; font-size: 14px; color: var(--label2); }
.sh-tsum { margin: 0 0 8px; font-size: 14px; color: var(--label2); }
.sh-spark { display: block; width: 100%; height: auto; overflow: visible; }
.sh-spark .ln { fill: none; stroke: url(#shG); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-spark circle { fill: var(--label2); } .sh-spark circle.now { fill: var(--label); stroke: var(--bg); stroke-width: 2; }
.sh-spark .g { stroke: var(--sep); stroke-dasharray: 2 4; }
.sh-spark text { font: 500 10px var(--font); fill: var(--label3); } .sh-spark .y { text-anchor: end; }

/* empty states */
.empty { margin: 34px 0 0; padding: 40px 24px 36px; border-radius: 26px; background: var(--bg2); text-align: center; animation: riseIn .7s var(--ease-out) both; }
.empty-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ff375f, #bf5af2 55%, #0a84ff); box-shadow: 0 8px 24px rgba(191, 90, 242, .35); }
.empty-ic svg { width: 28px; height: 28px; }
.empty h2 { margin: 16px 0 6px; font: 700 26px/1.15 var(--font-display); letter-spacing: .004em; }
.empty p { margin: 0 auto 18px; max-width: 40ch; color: var(--label2); font-size: 16px; text-wrap: balance; }

/* the toast */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  transform: translateX(-50%); padding: 12px 18px; border-radius: 999px;
  background: var(--label); color: var(--bg); font: 600 15px/1.2 var(--font); box-shadow: var(--shadow);
}
main { padding-bottom: 56px; }   /* breathing room at the end of every page */

/* ============================================================ motion: fluid and springy, and only on arrival or touch */
@media (hover: none) { a, button, select { -webkit-tap-highlight-color: transparent; } }
/* the opening: the bar, the title and the controls settle in, then the cards ripple in */
.intro > * { animation: riseIn .7s var(--ease-out) both; }
.intro > :nth-child(2) { animation-delay: .06s; }
.intro > :nth-child(3) { animation-delay: .12s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } }
/* moving between pages crossfades too (cross-document View Transitions), the bar or sidebar staying put; Animations
   off skips it (the pagereveal handler in each page's head) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* switching tab or service crossfades (View Transitions) */
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }


/* ============================================================ computers: the Apple Music sidebar
   From 1000px wide, the glass bar becomes a fixed sidebar on the left, as in the Apple TV app: the logo, the pages (the
   chosen one on a grey pill, icons in the accent colour), then a "More" section (About, Theme and Settings, the same
   rows), and the small print and the version at the very foot. The page sits to the right of it. */
.side-links, .side-about, .side-h { display: none; }
@media (min-width: 1000px) {
  :root { --side: 236px; --side-bg: rgba(242, 242, 247, .82); }
  :root[data-theme="dark"] { --side-bg: rgba(28, 28, 30, .82); }
  html { scroll-padding-top: 24px; }
  body { padding-left: var(--side); }
  .top-row {
    position: fixed; z-index: 50; inset: 0 auto 0 0; width: var(--side); max-width: none; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 22px;
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 14px calc(env(safe-area-inset-bottom, 0px) + 20px) max(14px, env(safe-area-inset-left, 0px));
    background: var(--side-bg); border-right: .5px solid var(--sep); pointer-events: auto;
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  }
  .top-row::before { display: none; }
  .bar-title { display: none; }
  .top-row > * { animation: none; }
  .top-brand { padding: 0 8px; gap: 11px; }
  .lt-logo, .lt-logo img { width: 34px; height: 34px; border-radius: 8px; }
  .brand-name { font: 700 26px/1 var(--font-display); letter-spacing: -.02em; }
  .tabbar { display: block; }
  .tabs { flex-direction: column; gap: 2px; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto; }
  .tabs::before, .tab-ind { display: none; }
  .tabs button {
    width: 100%; height: 38px; justify-content: flex-start; gap: 12px; padding: 0 10px; border-radius: 9px;
    font: 500 15px/1 var(--font); letter-spacing: -.016em; color: var(--label);
  }
  .tabs button svg { width: 20px; height: 20px; color: var(--accent); }
  .tabs button[aria-selected="true"] { background: var(--fill); color: var(--label); font-weight: 600; }
  .tabs button:active { transform: none; filter: none; background: var(--fill-strong); }
  @media (hover: hover) { .tabs button[aria-selected="false"]:hover { color: var(--label); background: var(--fill); } }
  .top-act > .tb-about { display: none; }   /* About is at the foot of the sidebar */
  .tabs button[data-tab="people"] { display: flex; }
  .th-wrap { display: contents; }   /* computers: the round button opens its own card instead */
  .th-sel { display: none; }
  /* More: a small grey heading, then About, Theme and Settings as rows like the pages above (2px apart, as they are) */
  .side-h { display: block; margin: 8px 0 0; padding: 0 10px; color: var(--label3); font: 600 13px/1 var(--font); letter-spacing: -.005em; }
  .side-about, .tb-btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px; border-radius: 9px;
    color: var(--label); font: 500 15px/1 var(--font); letter-spacing: -.016em; text-decoration: none; transition: background-color .2s ease; }
  .side-h + .side-about { margin-top: -12px; }
  .side-about.side-settings { margin-top: -20px; }
  .side-about svg, .tb-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
  .side-about:hover, .tb-btn:hover { text-decoration: none; background: var(--fill); }
  .side-about:active, .tb-btn:active { background: var(--fill-strong); transform: none; filter: none; }
  .tb-btn[aria-expanded="true"] { background: var(--fill); color: var(--label); }
  .side-about[aria-current] { background: var(--fill); font-weight: 600; }
  .side-about:focus-visible, .tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .top-act { margin-top: -20px; justify-self: auto; align-self: stretch; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tb-btn { justify-content: flex-start; }
  .tb-btn::after { content: "Theme"; position: static; inset: auto; }
  /* the small print and the version, right at the foot */
  .side-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 0 10px; }
  .side-link { padding: 3px 0; border: 0; background: none; color: var(--label2); font: 400 12px/1.3 var(--font); letter-spacing: -.01em; cursor: default; }
  .side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  a.side-link { text-decoration: none; cursor: pointer; }
  @media (hover: hover) { a.side-link:hover { color: var(--label); text-decoration: none; } }
  .side-link[aria-current] { color: var(--label); font-weight: 600; }
  .side-ver { flex-basis: 100%; margin-top: 6px; color: var(--label3); font-size: 12px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .intro { padding-top: 22px; }
}
@media (min-width: 1000px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --side-bg: rgba(28, 28, 30, .82); }
}

/* with artwork under it, the sidebar's glass thins a little so the colours come through (computers only) */
@media (min-width: 1000px) {
  :root:has(.bd-ext > *) { --side-bg: rgba(242, 242, 247, .62); }
  :root:has(.bd-ext > *) .top-row { border-right-color: transparent; }   /* over artwork, no hairline: the glass alone separates them */
  :root[data-theme="dark"]:has(.bd-ext > *) { --side-bg: rgba(28, 28, 30, .58); }
}
@media (min-width: 1000px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]):has(.bd-ext > *) { --side-bg: rgba(28, 28, 30, .58); } }

/* ============================================================ the title sheet (sheet.js): where to watch, in Tenner
   A centred card on computers, a bottom sheet on phones; the Apple TV app's layout: artwork, title, details, actions,
   then Where to Watch grouped as Included with, Free, Rent and Buy. */
.sheet::backdrop { background: rgba(0, 0, 0, 0); transition: background-color .25s ease; }
.sheet.in::backdrop { background: rgba(0, 0, 0, .42); }
.sheet {
  position: fixed; inset: auto; margin: 0; padding: 0; border: 0; max-width: none; left: 50%; top: 50%; width: min(680px, calc(100vw - 48px)); max-height: min(88vh, 860px);
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; color: var(--label);
  background: var(--sheet-bg); -webkit-backdrop-filter: var(--sheet-blur); backdrop-filter: var(--sheet-blur);
  box-shadow: inset 0 0 0 .5px var(--frost-edge), 0 30px 80px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform .32s var(--ease-out), opacity .2s ease, translate .3s var(--ease-out);
}
.sheet.in { transform: translate(-50%, -50%); opacity: 1; }
.sheet.dragging { transition: none; }
.sheet-up, .sheet-up body { overflow: hidden; }
.sh-grab { display: none; }
.sh-x {
  position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25);
}
.sh-x svg { width: 16px; height: 16px; }
.sh-scroll { overflow-y: auto; overscroll-behavior: contain; }
/* the artwork melts into the card (a mask on the picture itself, so it works on the frosted card in either theme, with no
   line where it ends); the poster hangs over the edge, uncut */
.sh-art { position: relative; aspect-ratio: 16 / 9; touch-action: none; }
.sh-art > img:first-child, .sh-art .ph, .sh-art iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.sh-art > img:first-child, .sh-art .ph { -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 100%);
  transition: opacity .5s ease; }
.sh-art img.soft { filter: blur(30px) saturate(1.4); opacity: .85; }   /* only while the wide artwork is on its way */
.sh-art.playing { background: #000; }
.sh-art.playing .sh-poster { display: none; }
.sh-poster { position: absolute; z-index: 1; left: 24px; bottom: -1px; width: 92px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .25), 0 12px 30px rgba(0, 0, 0, .45); translate: 0 30%; }
.sh-body { padding: 18px 24px 22px; }
.sh-art:has(.sh-poster) + .sh-body { padding-top: 48px; }
.sh-art.playing + .sh-body { padding-top: 18px; }
.sh-eye { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 14px/1.3 var(--font); letter-spacing: -.012em; color: var(--label2); }
.sh-mv { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.sh-mv svg { width: 13px; height: 13px; }
.sh-mv.up { color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.sh-mv.down { color: #ff453a; background: color-mix(in srgb, #ff453a 16%, transparent); }
.sheet h2 { margin: 0; font: 700 28px/1.12 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 8px 0 0; color: var(--label2); font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-cert { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 4px; font: 700 11px/1 var(--font);
  color: var(--label2); box-shadow: inset 0 0 0 1px var(--label3); }
.sh-genres { margin: 2px 0 0; color: var(--label2); font-size: 15px; }
.sh-btns { display: grid; gap: 10px; margin: 18px 0 0; }
.sh-btns .btn svg { width: 14px; height: 14px; flex: none; }
.sh-main .btn { width: 100%; height: 50px; justify-content: center; gap: 9px; border-radius: 13px; font-size: 17px; font-weight: 600;
  background: var(--label); color: var(--bg); box-shadow: none; }
.sh-main .btn svg { width: 15px; height: 15px; }
@media (hover: hover) { .sh-main .btn:hover { background: color-mix(in srgb, var(--label) 86%, transparent); } }
.sh-more { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.sh-more .btn { width: 100%; min-width: 0; height: 44px; justify-content: center; border-radius: 12px; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.sh-tl { margin: 18px 0 0; font-weight: 600; font-size: 16px; }
.sh-ov { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--label); }
.sh-tl + .sh-ov { margin-top: 4px; }
.sh-where { margin-top: 22px; padding-top: 18px; border-top: .5px solid var(--sep); }
.sh-where h3 { margin: 0 0 12px; font: 700 20px/1.2 var(--font-display); letter-spacing: -.008em; }
.sh-grp + .sh-grp { margin-top: 14px; }
.sh-grp h4 { margin: 0 0 8px; font: 600 12px/1.3 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--label2); }
.sh-provs { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-prov {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 6px; border-radius: var(--r-ctl);
  color: var(--label); font: 600 14px/1 var(--font); letter-spacing: -.016em;
  background: var(--frost); box-shadow: var(--frost-line); transition: filter .1s ease;
}
a.sh-prov:hover { text-decoration: none; }
.sh-prov img, .sh-prov i { width: 32px; height: 32px; flex: none; border-radius: 8px; box-shadow: 0 0 0 .5px var(--sep); }
.sh-prov i { display: grid; place-items: center; font: 700 14px/1 var(--font); font-style: normal; color: #fff; background: linear-gradient(135deg, #ff375f, #bf5af2 55%, #0a84ff); }
.sh-none { margin: 0; color: var(--label2); font-size: 15px; }
.sh-foot { margin: 20px 0 0; font-size: 12px; color: var(--label3); }
.sh-foot a { color: var(--label2); }

/* phones: a bottom sheet that slides up, with a handle; swipe it down to close */
@media (max-width: 719px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0;
    transform: translateY(100%); opacity: 1; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sheet.in { transform: none; }
  .sh-grab { display: block; position: absolute; z-index: 3; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px;
    background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .15); touch-action: none; }
  .sh-body { padding: 16px 18px 24px; }
  .sh-faces { margin: 0 -18px; padding-inline: 18px; scroll-padding-left: 18px; }
  .sh-art:has(.sh-poster) + .sh-body { padding-top: 40px; }
  .sh-poster { left: 18px; width: 76px; }
  .sheet h2 { font-size: 24px; }
}
@media (prefers-reduced-transparency: reduce) { .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); } }
@media (hover: hover) and (pointer: fine) { a.sh-prov:active { filter: var(--press); } }

/* ============================================================ pointer interactions, the macOS way
   With a mouse or trackpad, controls behave as they do on a Mac: the pointer stays an arrow over controls (the pointing
   hand is for links), borderless controls show a soft highlight on hover, and a press shades a control in place (darker
   by day, lighter by night) rather than shrinking or swelling it. Big content (posters, cards) still lifts a touch.
   Touch screens keep the iOS feel. */
@media (hover: hover) and (pointer: fine) {
  :root { --press: brightness(.9); }
  :root[data-theme="dark"] { --press: brightness(1.28); }
  button, summary, [role="tab"], [role="radio"], [role="menuitemradio"] { cursor: default; }
  /* a press is a change of shade, never of size */
  .btn:active, .tabs button:active, .tb-btn:active, .svc-b:active, .scroller:active, .scroller:hover, .h-cta:active, .svc-b:hover .svc-ic { transform: none; }
  .tabs button:active { filter: none; }
  .btn:active, .tb-btn:active, .scroller:active, .segmented button:active, .dd:active { filter: var(--press); }
  .h-cta:active { filter: var(--press); }
  /* push buttons don't react to hover; borderless ones get a soft highlight that deepens while pressed */
  .svc-b[aria-checked="false"]:hover { background: var(--fill); }
  .svc-b[aria-checked="false"]:active { background: var(--fill-strong); }
  .segmented button[aria-checked="false"]:hover { color: var(--label); }
  .th-list button:active { background: var(--fill-strong); }
  .side-about:active { background: var(--fill-strong); }
  /* the Mac is quick: shades change at once */
  .btn, .svc-b, .tb-btn, .scroller, .segmented button, .th-list button, .h-cta, .side-about { transition-duration: .1s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --press: brightness(1.28); } }

/* ============================================================ accessibility settings, as Apple's platforms honour them
   Reduce Transparency: every glass surface turns solid. Increase Contrast: stronger text, separators and edges. */
@media (prefers-reduced-transparency: reduce) {
  :root:is([data-theme], :not([data-theme])) { --glass: var(--bg2); --side-bg: var(--bg2); --frost: var(--bg2); --sheet-bg: var(--card); }
  .tabs, .top-act, .svc, .dd, .tb-pop, .top-row, .scroller, .coll, .score, .step, .btn-tinted, .segmented, .h-cta, .h-add, .h-badge, .g-b, .tag, .panel, .filters, .sheet, .mine-dlg {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .bd-ext { display: none !important; }
  :root { --side-bg: var(--bg2) !important; }   /* no artwork tint: a solid sidebar */
}
@media (prefers-contrast: more) {
  :root:is([data-theme], :not([data-theme])) {
    --sep: color-mix(in srgb, var(--label) 45%, transparent); --label2: color-mix(in srgb, var(--label) 80%, transparent);
    --label3: color-mix(in srgb, var(--label) 62%, transparent); --fill: color-mix(in srgb, var(--label) 16%, transparent); --frost-edge: color-mix(in srgb, var(--label) 45%, transparent);
  }
  .pcard a.cover, .f-img, .nr-art, .svc, .dd, .segmented { outline: 1px solid var(--sep); outline-offset: -1px; }
  @media (max-width: 999px) { .tabs { outline: 1px solid var(--sep); outline-offset: -1px; } }   /* the floating tab bar, not the sidebar */
}

/* ============================================================ Settings, applied on every page */
/* Animations (off unless switched on in Settings, and always off when the device asks for reduced motion): nothing animates or transitions at all, not even for a moment,
   so the browser has no motion to set up and every change lands at once */
.still, .still *, .still *::before, .still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.no-moves .mv { display: none !important; }
.no-ratings .star, .no-ratings .cl-r, .no-ratings .score { display: none !important; }

/* ============================================================ the share card (shell.js), as on Channel Crossings
   Computers: a black card in the middle of the screen (a native modal <dialog>), white pill buttons for each place to
   share, a note, and a little drive-in scene melting in at the foot. Phones use the system's own share sheet instead. */
.share-card { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; width: min(360px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; border-radius: 30px; background: #000; color: #fff;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1), 0 40px 100px rgba(0, 0, 0, .5); animation: scIn .5s var(--ease-spring) both; }
.share-card:not([open]) { display: none; }
.share-card.out { animation: scOut .2s ease-in both; }
.share-card::backdrop { background: rgba(0, 0, 0, .42); animation: scFade .3s ease both; }
@keyframes scIn { from { opacity: 0; transform: scale(.9); } }
@keyframes scOut { to { opacity: 0; transform: scale(.95); } }
@keyframes scFade { from { opacity: 0; } }
.share-card h2 { margin: 0; padding: 34px 22px 22px; font: 700 1.35rem/1.18 var(--font-display); letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.sc-btns { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.sc-b { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 44px; border: 0; border-radius: 999px;
  background: #fff; color: #000; font: 500 15px/1 var(--font); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .15s, background-color .2s; }
.sc-b:hover { text-decoration: none; }
.sc-b svg { position: absolute; left: 18px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); }
.sc-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .sc-b:hover { background: #ececf0; } }
.sc-b:active { transform: scale(.98); }
.sc-b:disabled { opacity: .7; cursor: progress; }
.sc-b:focus-visible { outline: 2px solid #0a84ff; outline-offset: 3px; }
.share-card p { margin: 16px 22px 0; color: rgba(235, 235, 245, .6); font-size: 12.5px; line-height: 1.45; text-align: center; }
.sc-art { position: relative; flex: none; height: clamp(72px, calc(100dvh - 560px), 200px); margin-top: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 46%); mask-image: linear-gradient(transparent, #000 46%); }
.sc-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-x { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); cursor: pointer; }
.sc-x svg { width: 11px; height: 11px; }
.sc-x::after { content: ""; position: absolute; inset: -6px; }
.sc-x:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
/* the scene moves gently: stars twinkle, the screen glows, the projector's beam sways */
:root:not(.still) .sc-star { animation: scTw 3.2s ease-in-out infinite alternate; }
:root:not(.still) .sc-star:nth-child(2n) { animation-delay: -1.4s; }
:root:not(.still) .sc-star:nth-child(3n) { animation-delay: -2.3s; }
:root:not(.still) .sc-glow { animation: scGlow 4s ease-in-out infinite alternate; }
:root:not(.still) .sc-beam { transform-origin: 232px 150px; animation: scBeam 6s ease-in-out infinite alternate; }
@keyframes scTw { to { opacity: .25; } }
@keyframes scGlow { to { opacity: .55; } }
@keyframes scBeam { from { transform: rotate(-1.5deg); opacity: .8; } to { transform: rotate(1.5deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .share-card, .share-card::backdrop { animation: none; } }
/* phones without a share sheet of their own: the card, frosted */
@media (max-width: 719px) { .share-card { width: min(400px, calc(100vw - 32px)); border-radius: 28px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
  .sc-art { height: 150px; } }
@media (max-width: 719px) and (prefers-reduced-transparency: reduce) { .share-card { background: #000; } }

/* loading: poster-shaped placeholders with a soft shimmer, the Apple TV way, instead of a line of text */
.sk-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sk-row { display: flex; gap: 26px; padding-top: 44px; overflow: hidden; }
.sk-row i { flex: none; width: min(64vw, 236px); aspect-ratio: 2 / 3; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--fill) 40%, var(--fill-strong) 50%, var(--fill) 60%) 0 0 / 220% 100%; animation: skShine 1.6s ease-in-out infinite; }
@keyframes skShine { from { background-position: 100% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-row i { animation: none; } }
@media (max-width: 999px) { .sk-row { gap: 16px; } .sk-row i { width: min(44vw, 200px); } }

/* the privacy note (shell.js): frosted, at the foot of the screen, above the tab bar on phones; once, then gone */
.pv-note { position: fixed; z-index: 70; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 20px; color: var(--label);
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--frost-edge), 0 18px 50px rgba(0, 0, 0, .28);
  opacity: 0; transform: translate(-50%, 16px) scale(.98); transition: opacity .35s ease, transform .5s var(--ease-spring); }
.pv-note.in { opacity: 1; transform: translate(-50%, 0); }
/* the face on the left: an app-style icon, as on an iOS notification (Apple's own blue privacy handshake) */
.pv-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff;
  background: linear-gradient(180deg, #4aa3ff, #0a6cff); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 3px 10px rgba(10, 108, 255, .35); }
.pv-ic svg { width: 28px; height: 28px; }
.pv-note p { margin: 0; font-size: 14px; line-height: 1.4; letter-spacing: -.01em; color: color-mix(in srgb, var(--label) 82%, transparent); text-wrap: pretty; }
.pv-note a { color: var(--accent); white-space: nowrap; }
.pv-ok { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--font); letter-spacing: -.016em; color: var(--bg); background: var(--label); }
.pv-ok:active { transform: scale(.96); }
.pv-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1000px) { .pv-note { left: auto; right: 24px; bottom: 24px; width: 420px; transform: translateY(16px) scale(.98); } .pv-note.in { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pv-note { transition: opacity .2s ease; } }
:root.still .pv-note { transition: opacity .2s ease; }
@media (prefers-reduced-transparency: reduce) { .pv-note { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }