:root {
    --radius-xs: var(--radius-ui-xs);
    --radius-sm: var(--radius-ui-sm);
    --radius-md: var(--radius-ui-md);
    --radius-lg: var(--radius-ui-lg);
  }
  html { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top, 0); background: var(--bg-body); background-image: var(--site-bg-texture); }
  body { background: var(--bg-body); background-image: var(--site-bg-texture); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; color: var(--text-primary); font-size: var(--type-section); line-height: 1.45; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .show-back-link { min-height:var(--size-scale-px-44); min-width:var(--size-scale-px-44); padding:0 var(--space-scale-px-4); }
  .lang-toggle { min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-10); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-size:var(--type-meta); line-height:1; font-weight:700; letter-spacing:0; transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .lang-toggle:hover { background:var(--bg-surface-hover); color:var(--text-primary); border-color:var(--visual-border-medium); }
  .deep-page-header-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-icon { width:var(--size-scale-px-44); min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
  .deep-nav-icon:hover { background:var(--bg-surface-hover); border-color:var(--visual-border-medium); color:var(--text-primary); }
  .deep-nav-icon:active { transform:translateY(1px); }
  .deep-nav-icon svg { width:var(--size-scale-px-19); height:var(--size-scale-px-19); }
  .deep-nav-vip { color:var(--accent); }
  .poster-shadow { box-shadow: var(--shadow-page-art); }
  .backdrop { position: fixed; top: 0; left: 0; right: 0; height: 45vh; z-index: var(--layer-base);
    background-size: cover; background-position: center top; }
  .backdrop::after { content: ''; position: absolute; inset: 0;
    background: var(--visual-show-backdrop); }
	  .content { position: relative; z-index: var(--layer-content); }
	  .show-shell { padding-top:var(--space-scale-px-16); padding-bottom:0; }
  /* Season tabs */
  .season-tabs { display:flex; flex-wrap:nowrap; max-width:100%; gap:var(--space-gap-controls); overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; touch-action:pan-x; padding-bottom:var(--space-scale-px-4); scrollbar-width:none; }
  .season-tabs::-webkit-scrollbar { display:none; }
  .season-tab { flex-shrink:0; position:relative; padding:var(--space-scale-px-6) var(--space-scale-px-14); border-radius:var(--radius-sm); font-size:var(--type-control); font-weight:600;
    border:1px solid var(--border); cursor:pointer; transition:background 0.15s, color 0.15s;
    background:var(--bg-surface); color:var(--text-secondary); white-space:nowrap; min-height:var(--size-scale-px-44);
    display:flex; align-items:center; }
  .season-tab.active { background:var(--accent); color:var(--visual-body-solid); border-color:var(--accent); }
  .season-tab:not(.active):hover { background:var(--bg-surface-hover); color:var(--text-primary); }
  /* UI-011: invisible hit-area expansion toward 44x44; no-op here since
     desktop min-height is already 44px, overridden with real expansion at
     the mobile breakpoint below where min-height shrinks. */
  .season-tab::after { content:""; position:absolute; inset:0; }
  /* Episode rows */
  .ep-row { border-bottom:1px solid var(--border-row); }
  .ep-row:last-child { border-bottom:none; }
  .season-pack-panel { margin-bottom:var(--space-gap-cards); }
  .season-pack-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-ui-2); }
  .season-pack-title { margin:0; font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); }
  .season-pack-toggle { width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:start; }
  .season-pack-toggle .episode-name { color:var(--text-secondary); }
  .season-pack-count { flex:0 0 auto; color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-meta); }
  /* UI-005 3b: episode-row-local tokens (not in ui-tokens.css -- that file is out of scope for
     this sub-stage; see docs/ui-audit/component-ownership-map.md 3b) collapsing the old flat
     desktop default + a separate mobile override at the 640px breakpoint into a single continuous
     clamp() spanning 320->1024px. Endpoints unchanged versus the pre-existing computed values
     (measured via getComputedStyle):
       --ep-header-gap        3.2px @320 -> 10px  @1024+ (was --space-card-gap)
       --ep-header-pad-block  3.2px @320 -> 9px   @1024+ (was --space-row-pad-block)
       --ep-header-pad-inline 4.8px @320 -> 14px  @1024+ (was --space-row-pad-inline)
       --ep-header-min-height 18px  @320 -> 40px  @1024+ (was --size-content-row)
       --episode-number-size  7.5px @320 -> 11px  @1024+ (was --type-meta)
       --episode-name-size    shares --type-card-copy with other compact body copy
       --episode-name-lh      10.2px@320 -> 16.675px@1024+ (was --leading-copy/--leading-compact,
                                                              re-expressed as an absolute length;
                                                              1.2 and 1.45 x the old font-sizes
                                                              reproduce these exact px values, so
                                                              this is a pure re-expression, not a
                                                              value change)
       --ep-badge-ml          1.8px @320 -> 8px    @1024+ (was the "ml-2" Tailwind utility class
                                                            in showPage.ts, overridden only below
                                                            640px until now)
     --ep-header-gap and --episode-number's old --type-meta / --ep-badge-size's old
     --type-compact-meta each additionally had a SEPARATE, wider layer at the 767px breakpoint
     (via --space-dialog-gap / --type-compact-meta's own second override) that
     component-ownership-map.md did not record -- found here by measuring computed values at 767
     vs 768, not by grepping source: both stayed flat at their mobile value from 0 up through
     767px, then jumped to their flat desktop value at 768px, independent of this file's own
     640px block. A local token sidesteps both layers without touching either shared token, so
     neither hidden breakpoint survives here. --episode-number's width is deliberately left
     alone: above 640px it has no CSS width at all (auto, sized to the rendered digit text), and
     only the mobile block forces a fixed 24px column width for list alignment -- that
     auto->fixed switch is a layout strategy choice, not a numeric hard-jump defect. padding-block
     on .ep-badge-count (--space-scale-px-1) is also left alone: measured 0.9px@320 vs 1px@1024+,
     a ~0.1px difference that is sub-pixel rounding noise, not a real jump worth a token. */
  :root {
    --ep-header-gap: clamp(.2rem, .00682rem + .96591vw, .625rem);
    --ep-header-pad-block: clamp(.2rem, .03523rem + .82386vw, .5625rem);
    --ep-header-pad-inline: clamp(.3rem, .03864rem + 1.30682vw, .875rem);
    --ep-header-min-height: clamp(1.125rem, .5rem + 3.125vw, 2.5rem);
    --episode-number-size: clamp(.46875rem, .36932rem + .49716vw, .6875rem);
    --episode-name-size: var(--type-card-copy);
    --episode-name-lh: clamp(.6375rem, .45355rem + .91974vw, 1.04219rem);
    --ep-badge-ml: clamp(.1125rem, -.06364rem + .88068vw, .5rem);
  }
  .ep-header { display:flex; align-items:center; gap:var(--ep-header-gap); padding:var(--ep-header-pad-block) var(--ep-header-pad-inline);
    cursor:pointer; min-height:var(--ep-header-min-height); transition:background 0.1s; }
  .episode-number { font-size:var(--episode-number-size); line-height:var(--leading-meta); }
  .episode-name { min-width:0; font-size:var(--episode-name-size); line-height:var(--episode-name-lh); white-space:normal; overflow-wrap:anywhere; }
  .ep-header:hover { background:var(--bg-surface-hover); }
  .ep-header.no-res { cursor:default; }
  .ep-header.no-res:hover { background:transparent; }
  .ep-badge-count { flex-shrink:0; background:var(--bg-header); color:var(--text-muted); margin-left:var(--ep-badge-ml); }
  .ep-badge-count.has-res { background:var(--visual-accent-fill-soft); color:var(--accent); }
  .ssr-resource-structure { display:grid; gap:var(--space-scale-px-14); }
  .ssr-resource-structure > p { margin:0; color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-copy); }
  .ssr-panel { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-surface); }
  .ssr-panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-scale-px-12); padding:var(--space-scale-px-12) var(--space-scale-px-16); border-bottom:1px solid var(--border); }
  .ssr-panel-head h2, .ssr-panel-head h3 { margin:0; color:var(--text-primary); font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); }
  .ssr-panel-head span { flex-shrink:0; color:var(--accent); font-size:var(--type-control); font-weight:700; }
  .ssr-season-tabs { display:flex; flex-wrap:nowrap; max-width:100%; gap:var(--space-gap-controls); overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; touch-action:pan-x; padding-bottom:var(--space-scale-px-2); scrollbar-width:none; }
  .ssr-season-tabs::-webkit-scrollbar { display:none; }
  .ssr-season-tabs :is(span,a) { flex-shrink:0; display:inline-flex; align-items:center; min-height:var(--size-scale-px-36); padding:var(--space-scale-px-5) var(--space-scale-px-12); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--type-control); font-weight:700; }
  .ssr-season-tabs :is(span,a).active { background:var(--accent); border-color:var(--accent); color:var(--bg-body); }
  .ssr-resource-list { list-style:none; margin:0; padding:0; }
  .ssr-resource-list li { padding:var(--space-scale-px-8); border-bottom:1px solid var(--border); }
  .ssr-resource-list li:last-child { border-bottom:0; }
  .ssr-resource-list a:not(.resource-card) { display:block; color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-copy); word-break:break-word; text-decoration:none; }
  .ssr-resource-list a:not(.resource-card):hover { color:var(--text-primary); }
  .ssr-resource-list div { display:flex; flex-wrap:wrap; gap:var(--space-scale-px-5); margin-top:var(--space-scale-px-7); }
  .ssr-resource-list span:not(.resource-badge, .resource-tag, .resource-meta-line, .resource-meta-line *) { font-size:var(--type-compact-label); line-height:var(--leading-meta); color:var(--text-muted); background:var(--bg-header); border:1px solid var(--border); border-radius:var(--radius-xs); padding:var(--space-scale-px-1) var(--space-scale-px-5); }
  .ssr-episode-list { list-style:none; margin:0; padding:0; }
  .ssr-episode-list li { display:flex; align-items:center; gap:var(--space-scale-px-10); min-height:var(--size-scale-px-40); padding:var(--space-scale-px-9) var(--space-scale-px-16); border-bottom:1px solid var(--border); }
  .ssr-episode-list li:last-child { border-bottom:0; }
  .ssr-episode-list a, .ssr-episode-list span { color:var(--text-primary); font-size:var(--type-card-copy); font-weight:700; text-decoration:none; }
  .ssr-episode-list small { color:var(--accent); font-size:var(--type-compact-meta); font-weight:700; background:var(--visual-accent-fill-soft); border-radius:var(--radius-sm); padding:var(--space-scale-px-1) var(--space-scale-px-7); }
  /* Highlight flash */
  @keyframes highlightFlash {
    0%   { background: var(--visual-transparent); }
    20%  { background: var(--visual-accent-fill-strong); }
    60%  { background: var(--visual-accent-fill-soft); }
    100% { background: var(--visual-transparent); }
  }
  .highlight-flash { animation: highlightFlash 2s ease-out forwards; border-radius:var(--radius-sm); }
  /* Icon btn */
  .icon-btn { cursor:pointer; user-select:none; position:relative; }
  .copy-icon-btn { min-width:var(--size-scale-px-44); min-height:var(--size-scale-px-44); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .copy-icon-btn:hover { color:var(--accent); background:var(--bg-surface-hover); }
  /* Keep conditionally rendered controls in one group so every resource row has
     one stable right-side action rail across locked and unlocked states. */
  .show-resource-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-scale-px-8); }
  .show-resource-stat-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--resource-badge-gap); min-height:var(--resource-badge-height); }
  .show-resource-list { padding:var(--space-resource-list-inset); }
  /* Below 1280px the size, seeders and date line sits under the title and tags, so the main column
     keeps the full card width minus the action rail (release names and tags do not wrap or
     truncate earlier); the action group spans both rows. From 1280px the card has room to keep the
     line in its own column on the right, so a show card stays three rows (see the media query below). */
  .resource-card--nested[data-resource-role] {
    grid-template-columns:minmax(0,1fr) var(--resource-icon-action-rail);
    grid-template-rows:auto auto auto;
    row-gap:0;
    align-items:center;
  }
  .resource-card--nested[data-resource-role] .resource-card__main { grid-column:1; grid-row:1; }
  .resource-card--nested[data-resource-role] .show-resource-actions { display:contents; }
  .resource-card--nested[data-resource-role] .show-resource-stat-row { grid-column:1; grid-row:3; justify-self:start; }
  /* While the line sits under the tags, the divider between the two parts runs across the whole card
     (edge to edge inside the border) and the lock or action icon belongs to the upper part. */
  .resource-card--nested[data-resource-role]::before {
    content:"";
    grid-column:1 / -1;
    grid-row:2;
    height:0;
    margin:var(--resource-card-rule-gap) calc(-1 * var(--resource-card-nested-pad-inline));
    border-top:1px solid var(--border-row);
  }
  .resource-card--nested[data-resource-role] .show-resource-action-group {
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
    transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2));
  }
  @media (min-width:768px) {
    .resource-card--nested[data-resource-role] .show-resource-action-group {
      transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2 + var(--space-ui-1)));
    }
  }
  @media (min-width:1280px) {
    .resource-card--nested[data-resource-role] { grid-template-columns:minmax(0,1fr) max-content var(--resource-icon-action-rail); grid-template-rows:auto; row-gap:var(--resource-card-compact-gap-row); }
    .resource-card--nested[data-resource-role]::before { display:none; }
    .resource-card--nested[data-resource-role] .show-resource-stat-row { grid-column:2; grid-row:1; justify-self:end; }
    .resource-card--nested[data-resource-role] .show-resource-action-group { grid-column:3; grid-row:1; }
  }
  /* No pack rail at rest; hover, press and focus keep the shared card response. */
  .show-shell .resource-card--nested:not(:hover, :active, :focus-within) { box-shadow:var(--resource-card-edge-shadow); }

  .icon-btn .check-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:var(--opacity-hidden); pointer-events:none; transition:opacity 0.15s; }
  .icon-btn.copied .original-icon { opacity:var(--opacity-hidden); }
  .icon-btn.copied .check-icon { opacity:var(--opacity-visible); }
  .magnet-link { color:inherit; text-decoration:none; }
  /* grid-template-rows is explicit because .show-hero-poster spans both rows: when the
     copy column is shorter than the poster, the grid hands the poster's leftover height
     to the rows it spans, and with implicit auto/auto rows row 1 takes a share of it.
     That made the heading block -- and everything measured from it -- sit lower on shows
     with a short synopsis than on shows with a long one. auto/1fr keeps row 1 at its
     content height and parks all slack in row 2, so the copy column's top edge is at the
     same offset on every show. */
  .show-hero { display:grid; grid-template-rows:auto 1fr; align-items:start; margin-bottom:var(--space-gap-cards); }
  /* Every other top-level block of the show page (info card, cast, stills,
     series packs, season tabs, banners) sits one card gap from the next. */
  .show-section { margin-bottom:var(--space-gap-cards); }
  /* A heading that opens a block would otherwise keep the default h2 margin
     (0.83em). In a borderless block it collapses with the card gap and outgrows
     it on phones (8.7px vs 8px at 402px); in the bordered info card it stacked on
     the card padding, so the title sat lower than the padding (2026-10-02). */
  .show-section:not(.show-info-card) > .show-section-title,
  .show-info-head > .show-section-title { margin-top:0; }
  .show-hero-poster { grid-row:1 / span 2; }
  .show-hero-heading { align-self:start; padding-top:0; }
  .show-hero-title { margin:0 0 var(--space-scale-px-4); color:var(--text-primary); letter-spacing:0; }
  .show-hero-original { margin:0 0 var(--space-scale-px-4); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-meta); }
  .show-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-scale-px-8); margin-bottom:var(--space-scale-px-8); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-meta); }
  .show-hero-genres { display:flex; flex-wrap:wrap; gap:var(--space-scale-px-4); }
  .show-hero-genre { display:inline-flex; align-items:center; min-height:var(--size-scale-px-22); padding:var(--space-scale-px-1) var(--space-scale-px-8); border-radius:var(--resource-spec-radius); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-section); font-weight:650; }
  .show-hero-genre.follow-chip { border:0; }
  /* "新" after the episode number: an unseen episode that arrived after the follow. */
  .show-follow-new { flex-shrink:0; padding:0 var(--space-scale-px-5); border-radius:var(--radius-ui-xs); background:var(--visual-accent-fill-soft); color:var(--accent); font-size:var(--type-meta); line-height:var(--leading-section); font-weight:var(--weight-label); }
  .show-hero-copy { grid-column:2; padding-top:var(--space-scale-px-2); }
  .show-hero-stat { margin:0 0 var(--space-scale-px-12); color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-meta); }
  /* Type and spacing come from the shared synopsis role in page-hero.css. */
  .show-overview { margin:0 0 var(--space-scale-px-14); }
  /* Episode-ratings links: accent text with the band legend, no frame. One closes the
     show-details card header (the whole show), one closes the season tab row (the
     selected season). Hover is the header 日历 / 支持 entries' (.calendar-btn, .support-btn):
     a soft gold surface with a gold edge; pressed sinks 1px like the site's buttons; keyboard
     focus is the global ring. Padding plus the transparent border hold that surface. The
     equal negative top and bottom margin keeps the row height; there is none at the sides, so
     the surface stays inside the content box and never reaches the card edge or the screen
     edge (2026-10-02). Radius is the small-element tier (DECISIONS 2026-07-09/10). The ::after
     grows the hit area to 44px tall, same as .season-tab. */
  .show-ratings-link { position:relative; display:inline-flex; align-items:center; gap:var(--space-scale-px-6); flex:none;
    padding:calc(var(--space-scale-px-4) - var(--size-scale-px-1)) calc(var(--space-scale-px-8) - var(--size-scale-px-1));
    margin:calc(-1 * var(--space-scale-px-4)) 0;
    border:var(--size-scale-px-1) solid transparent; border-radius:var(--radius-xs);
    color:var(--accent); font-size:var(--type-control); font-weight:var(--weight-control); line-height:var(--leading-meta);
    white-space:nowrap; text-decoration:none; -webkit-tap-highlight-color:transparent;
    transition:background-color var(--motion-duration-base), border-color var(--motion-duration-base); }
  .show-ratings-link:hover { background-color:var(--accent-soft); border-color:var(--accent-dim); }
  .show-ratings-link:active { transform:translateY(1px); }
  .show-ratings-link::after { content:""; position:absolute; inset:calc((100% - 44px) / 2) 0; }
  .show-info-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-gap-controls); }
  .show-season-bar { display:flex; align-items:center; gap:var(--space-gap-controls); }
  .show-season-bar > .season-tabs { flex:1 1 auto; min-width:0; }
  /* .season-tabs keeps a bottom padding (--space-scale-px-4) for its scroll area. Dropping the
     link's negative bottom margin, the same size, centres its text on the tabs rather than
     on the tabs plus that padding. */
  .show-season-bar > .show-ratings-link { margin-bottom:0; }
  /* Decorative band legend -- the five rating colors the ratings page uses. All
     semantics stay on the link text, so this strip is hidden from assistive tech. */
  .show-ratings-entry-bands { display:inline-flex; flex-shrink:0; gap:var(--space-scale-px-2); }
  .show-ratings-entry-bands i { width:var(--size-scale-px-8); height:var(--size-scale-px-8); border-radius:var(--rating-cell-radius); }
  .show-ratings-entry-bands i:nth-child(1) { background:var(--rating-band-0); }
  .show-ratings-entry-bands i:nth-child(2) { background:var(--rating-band-1); }
  .show-ratings-entry-bands i:nth-child(3) { background:var(--rating-band-2); }
  .show-ratings-entry-bands i:nth-child(4) { background:var(--rating-band-3); }
  .show-ratings-entry-bands i:nth-child(5) { background:var(--rating-band-4); }
  .show-section-title { color:var(--text-primary); font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); letter-spacing:0; }
  /* Card surfaces across the site are --radius-ui-md; this one carried
     --radius-lg plus two narrower overrides of its own, which made it the only
     12px card on any public page. It follows the shared card radius now, at
     every width, like .detail-facts-card and the resource cards do. Padding is
     .detail-facts-card's too (same kind of card): its top and bottom whitespace
     equal the padding, with no title top margin and no padding under the last row. */
  .show-info-card { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); padding:var(--space-detail-card-inset); }
  .show-info-table { width:100%; border-collapse:collapse; }
  .show-info-row { border-bottom:1px solid var(--border-row); }
  .show-info-row:last-child { border-bottom:0; }
  .show-info-row:last-child > td { padding-bottom:0; }
  .show-info-label { width:var(--size-scale-px-76); padding:var(--space-scale-px-7) var(--space-scale-px-12) var(--space-scale-px-7) 0; color:var(--text-muted); font-size:var(--type-field-label); line-height:var(--leading-field-label); font-weight:var(--weight-field-label); vertical-align:top; white-space:nowrap; }
  .show-info-value { padding:var(--space-scale-px-7) 0; color:var(--text-secondary); font-size:var(--type-field-value); line-height:var(--leading-field-value); font-weight:var(--weight-field-value); vertical-align:top; overflow-wrap:anywhere; }
  .show-people-rail { display:flex; gap:var(--space-scale-px-8); overflow-x:auto; padding-bottom:var(--space-scale-px-8); scrollbar-width:none; }
  .show-people-rail::-webkit-scrollbar { display:none; }
  .show-person { flex:0 0 64px; width:var(--size-scale-px-64); text-align:center; }
  .show-person-avatar { width:var(--size-scale-px-56); height:var(--size-scale-px-56); margin:0 auto; border-radius:var(--radius-pill); object-fit:cover; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:var(--type-dialog-title); font-weight:760; }
  .show-person-name { margin-top:var(--space-person-name-gap); color:var(--text-secondary); font-size:var(--type-person-name); line-height:var(--leading-person-name); overflow-wrap:anywhere; }
  .show-person-role { color:var(--text-muted); font-size:var(--type-person-role); line-height:var(--leading-person-role); overflow-wrap:anywhere; }
  .show-person-role.is-role { color:var(--accent); }
  .show-stills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-gap-tight); }
  .show-still { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border); }


  @media (min-width: 640px) {
    /* Hero sizing left this block entirely: the poster column, the hero gaps
       and the H1 type role are single continuous clamps in
       shared/page-hero.css now, so the 640/641 hard step is gone rather than
       relocated. Only a real structural change -- the stills grid going from
       two columns to three -- is left. */
    .show-stills-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width: 640px) {
    :root {
      --mobile-density-control:var(--size-mobile-control);
      --mobile-density-section:var(--type-section);
      --mobile-density-body:var(--type-card-copy);
      --mobile-density-meta:var(--type-meta);
      --mobile-density-label:var(--type-label);
      --mobile-density-gap:var(--space-mobile-gap);
      --mobile-density-card-pad:var(--space-mobile-card-pad);
    }
    body { font-size:var(--mobile-density-body); }
    .show-shell { padding-top:var(--space-scale-px-7); }
    .show-back-link,
    .lang-toggle,
    .deep-nav-icon { min-height:var(--mobile-density-control); }
    .lang-toggle,
    .deep-nav-icon { min-width:var(--mobile-density-control); width:var(--mobile-density-control); height:var(--mobile-density-control); }
    .lang-toggle { font-size:var(--type-control); padding-inline:var(--space-scale-px-6); }
    .show-back-link { min-width:0; padding-inline:var(--space-scale-px-3); font-size:var(--type-control); line-height:1.2; }
    .show-back-link svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .deep-nav-icon { font-size:var(--type-control); }
    .deep-page-header-actions,
    .deep-nav-actions { gap:var(--space-scale-px-4); }
    .deep-nav-icon svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .show-hero-original { font-size:var(--mobile-density-body); }
    .show-hero-meta { gap:var(--mobile-density-gap); margin-bottom:var(--space-scale-px-4); font-size:var(--mobile-density-body); }
    .show-hero-genre { min-height:var(--size-scale-px-16); padding:0 var(--space-scale-px-5); font-size:var(--mobile-density-meta); }
    .show-hero-copy { grid-column:2; padding-top:0; }
    .show-hero-stat { margin-bottom:var(--space-scale-px-6); font-size:var(--mobile-density-meta); }
    .show-overview { margin-bottom:var(--space-scale-px-7); }
    .show-section-title { font-size:var(--mobile-density-section); }
    .show-info-label { width:var(--size-scale-px-56); padding:var(--space-scale-px-4) var(--space-scale-px-7) var(--space-scale-px-4) 0; }
    .show-info-value { padding:var(--space-scale-px-4) 0; }
    .show-people-rail { gap:var(--mobile-density-gap); padding-bottom:var(--space-scale-px-6); }
    .show-person { flex-basis:46px; width:var(--size-scale-px-46); }
    .show-person-avatar { width:var(--size-mobile-avatar); height:var(--size-mobile-avatar); font-size:var(--type-card-title); }
    .show-person-name { margin-top:var(--space-person-name-gap); }
    .season-tab { min-height:var(--mobile-density-control); padding:var(--space-scale-px-4) var(--space-scale-px-10); font-size:var(--mobile-density-body); }
    .season-tab::after { inset:min(-2px, calc((var(--mobile-density-control) - 44px) / 2)); }
    .season-pack-head { padding:var(--space-card-pad); }
    .season-pack-title { font-size:var(--mobile-density-section); }
    /* UI-005 3b: .ep-header gap/padding/min-height, .episode-name font-size/line-height, and
       .ep-badge-count font-size/padding-inline/margin-left are now single continuous clamp()s
       defined once, unconditionally, above -- this mobile-only layer that used to create the
       hard step at 640px (and, for gap/font-size via the shared tokens' own extra 767px layer,
       at 768px too) is removed, not moved. .episode-number keeps its fixed 24px mobile column
       width below (a deliberate list-alignment choice, not a smoothable numeric jump -- see
       comment on the default rule above), only its font-size line is removed. */
    .episode-number { width:var(--size-scale-px-24); }
    .ssr-resource-structure { gap:var(--space-scale-px-7); }
    .ssr-panel-head { gap:var(--space-scale-px-6); padding:var(--space-scale-px-6) var(--space-scale-px-8); }
    .ssr-panel-head h2,
    .ssr-panel-head h3 { font-size:var(--mobile-density-section); }
    .ssr-panel-head span { font-size:var(--type-control); }
    .ssr-season-tabs :is(span,a) { min-height:var(--mobile-density-control); padding:var(--space-scale-px-3) var(--space-scale-px-7); font-size:var(--type-control); }
    .ssr-episode-list li { min-height:var(--size-scale-px-28); gap:var(--space-scale-px-5); padding:var(--space-scale-px-5) var(--space-scale-px-7); }
    .ssr-episode-list a,
    .ssr-episode-list span { font-size:var(--mobile-density-body); }
    .ssr-episode-list small { padding-inline:var(--space-scale-px-4); font-size:var(--type-compact-meta); }
    .show-resource-list { padding:var(--space-resource-list-inset); }
    .resource-card--compact { gap:var(--space-scale-px-4) var(--space-scale-px-6); padding:var(--mobile-density-card-pad); }
    .resource-card--compact .resource-card__main { gap:var(--space-scale-px-3); }
    .resource-card--compact .resource-card__title { font-size:var(--mobile-density-body); line-height:var(--leading-compact); }
    /* UI-011: src/showPage.ts renders every resource title on show pages as
       a standalone magnet-link anchor inside .resource-card--nested (series
       packs, season packs, and expanded episode resources) -- show.css never
       had a .resource-card--compact variant of this title in practice, so
       the invisible hit-area growth targets the selector that's actually in
       the DOM. Stacked rows can have a gap as low as ~2px, so this only
       grows to the row-gap midpoint on each side -- no overlap between
       neighboring magnet links, ever. */
    .resource-card--nested .resource-card__title { position:relative; }
    .resource-card--nested .resource-card__title::after {
      content:"";
      position:absolute;
      top:calc(var(--mobile-density-gap) / -2);
      bottom:calc(var(--mobile-density-gap) / -2);
      left:0;
      right:0;
    }
    .resource-card--compact .resource-badge { height:var(--size-scale-px-16); padding-inline:var(--space-scale-px-3); }
    .show-back-link,
    .lang-toggle,
    .deep-nav-icon,
    .season-tab,
    .resource-card--compact { border-radius:var(--resource-action-radius); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }