:root {
  --site-gutter: 16px;
  --site-content-standard: 1120px;
  --site-content-wide: 1400px;
  --site-content-narrow: 880px;
  --site-bg-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
@media (min-width: 760px) {
  :root { --site-gutter: 24px; }
}
@media (min-width: 1180px) {
  :root { --site-gutter: 36px; }
}
.site-shell,
.site-shell-wide {
  width: min(var(--site-content-wide), calc(100vw - var(--site-gutter) - var(--site-gutter)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.site-shell-standard {
  width: min(var(--site-content-standard), calc(100vw - var(--site-gutter) - var(--site-gutter)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.site-shell-narrow {
  width: min(var(--site-content-narrow), calc(100vw - var(--site-gutter) - var(--site-gutter)));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  .site-shell,
  .site-shell-wide { --site-gutter: var(--space-mobile-gutter); }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,svg{display:block}
.hidden{display:none!important}
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{inset:0}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.z-0{z-index:var(--layer-base)}
.z-1{z-index:var(--layer-content)}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-1{margin-left:var(--space-ui-1)}
.ml-2{margin-left:var(--space-ui-2)}
.mt-0\.5{margin-top:var(--space-ui-0-5)}
.mt-1{margin-top:var(--space-ui-1)}
.mt-1\.5{margin-top:var(--space-ui-1-5)}
.mt-2{margin-top:var(--space-ui-2)}
.mb-1{margin-bottom:var(--space-ui-1)}
.mb-1\.5{margin-bottom:var(--space-ui-1-5)}
.mb-2{margin-bottom:var(--space-ui-2)}
.mb-3{margin-bottom:var(--space-ui-3)}
.mb-4{margin-bottom:var(--space-ui-4)}
.mb-5{margin-bottom:var(--space-ui-5)}
.mb-6{margin-bottom:var(--space-ui-6)}
.p-1\.5{padding:var(--space-ui-1-5)}
.p-3{padding:var(--space-ui-3)}
.p-4{padding:var(--space-ui-4)}
.p-6{padding:var(--space-ui-6)}
.p-8{padding:var(--space-ui-8)}
.px-1\.5{padding-left:var(--space-ui-1-5);padding-right:var(--space-ui-1-5)}
.px-2{padding-left:var(--space-ui-2);padding-right:var(--space-ui-2)}
.px-2\.5{padding-left:var(--space-ui-2-5);padding-right:var(--space-ui-2-5)}
.px-3{padding-left:var(--space-ui-3);padding-right:var(--space-ui-3)}
.px-4{padding-left:var(--space-ui-4);padding-right:var(--space-ui-4)}
.py-0\.5{padding-top:var(--space-ui-0-5);padding-bottom:var(--space-ui-0-5)}
.py-1{padding-top:var(--space-ui-1);padding-bottom:var(--space-ui-1)}
.py-1\.5{padding-top:var(--space-ui-1-5);padding-bottom:var(--space-ui-1-5)}
.py-2{padding-top:var(--space-ui-2);padding-bottom:var(--space-ui-2)}
.py-2\.5{padding-top:var(--space-ui-2-5);padding-bottom:var(--space-ui-2-5)}
.py-3{padding-top:var(--space-ui-3);padding-bottom:var(--space-ui-3)}
.py-6{padding-top:var(--space-ui-6);padding-bottom:var(--space-ui-6)}
.py-8{padding-top:var(--space-ui-8);padding-bottom:var(--space-ui-8)}
.py-12{padding-top:var(--space-scale-rem-3);padding-bottom:var(--space-scale-rem-3)}
.py-16{padding-top:var(--space-scale-rem-4);padding-bottom:var(--space-scale-rem-4)}
.pt-1{padding-top:var(--space-ui-1)}
.pt-4{padding-top:var(--space-ui-4)}
.pb-2{padding-bottom:var(--space-ui-2)}
.pb-12{padding-bottom:var(--space-scale-rem-3)}
.pb-16{padding-bottom:var(--space-scale-rem-4)}
.pr-3{padding-right:var(--space-ui-3)}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:var(--space-ui-1-5)}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:var(--space-ui-3)}
.max-w-3xl{max-width:var(--size-content-3xl)}
.max-w-5xl{max-width:var(--size-content-5xl)}
.w-3{width:var(--size-scale-px-12)}
.w-3\.5{width:var(--size-scale-px-14)}
.w-4{width:var(--size-scale-px-16)}
.w-5{width:var(--size-scale-px-20)}
.w-7{width:var(--size-scale-px-28)}
.w-8{width:var(--size-scale-px-32)}
.w-14{width:var(--size-scale-px-56)}
.w-16{width:var(--size-scale-px-64)}
.w-32{width:var(--size-scale-px-128)}
.w-80{width:var(--size-scale-px-320)}
.w-full{width:100%}
.h-3{height:var(--size-scale-px-12)}
.h-3\.5{height:var(--size-scale-px-14)}
.h-4{height:var(--size-scale-px-16)}
.h-5{height:var(--size-scale-px-20)}
.h-7{height:var(--size-scale-px-28)}
.h-14{height:var(--size-scale-px-56)}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-0\.5{gap:var(--space-ui-0-5)}
.gap-1{gap:var(--space-ui-1)}
.gap-1\.5{gap:var(--space-ui-1-5)}
.gap-2{gap:var(--space-ui-2)}
.gap-3{gap:var(--space-ui-3)}
.gap-4{gap:var(--space-ui-4)}
.gap-x-6{column-gap:var(--space-ui-6)}
.gap-y-1{row-gap:var(--space-ui-1)}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.aspect-\[2\/3\]{aspect-ratio:2/3}
.aspect-video{aspect-ratio:16/9}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.border{border:var(--size-scale-px-1) solid var(--border)}
.border-b{border-bottom:var(--size-scale-px-1) solid var(--border)}
.border-t{border-top:var(--size-scale-px-1) solid var(--border)}
.border-collapse{border-collapse:collapse}
.border-red-900{border-color:var(--visual-error-border)}
.last\:border-0:last-child{border:0}
.rounded{border-radius:var(--radius-ui-xs)}
.rounded-md{border-radius:var(--radius-ui-sm)}
.rounded-lg{border-radius:var(--radius-ui-md)}
.rounded-xl{border-radius:var(--radius-ui-lg)}
.rounded-full{border-radius:var(--radius-pill)}
.object-cover{object-fit:cover}
.text-center{text-align:center}
.text-\[9px\]{font-size:var(--type-label)}
.text-\[10px\]{font-size:var(--type-kicker)}
.text-\[11px\]{font-size:var(--type-meta)}
.text-xs{font-size:var(--type-scale-rem--75);line-height:var(--leading-utility-xs)}
.text-sm{font-size:var(--type-scale-rem--875);line-height:var(--leading-utility-sm)}
.text-base{font-size:var(--type-scale-rem-1);line-height:var(--leading-utility-base)}
.text-lg{font-size:var(--type-scale-rem-1-125);line-height:var(--leading-utility-lg)}
.text-xl{font-size:var(--type-scale-rem-1-25);line-height:var(--leading-utility-xl)}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.italic{font-style:italic}
.leading-snug{line-height:var(--leading-utility-snug)}
.leading-tight{line-height:var(--leading-utility-tight)}
.leading-relaxed{line-height:var(--leading-utility-relaxed)}
.break-all{word-break:break-all}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.text-white{color:var(--text-primary)}
.text-red-400{color:var(--visual-error-text)}
.text-green-400{color:var(--status-green)}
.text-green-600{color:var(--visual-success-solid)}
.text-yellow-400{color:var(--resource-badge-remux-text)}
.bg-slate-800{background:var(--bg-surface)}
.bg-slate-700{background:var(--bg-surface-hover)}
.bg-blue-600{background:var(--status-blue)}
.border-slate-600{border-color:var(--visual-border-medium)}
.shadow-2xl{box-shadow:var(--shadow-dialog)}
.opacity-0{opacity:var(--opacity-hidden)}
.opacity-25{opacity:var(--opacity-subtle)}
.opacity-75{opacity:var(--opacity-quiet)}
.opacity-100{opacity:var(--opacity-visible)}
.transition{transition-property:color,background-color,border-color,opacity,transform;transition-duration:var(--motion-duration-base);transition-timing-function:var(--motion-ease-standard)}
.duration-100{transition-duration:var(--motion-duration-fast)}
.ease-out{transition-timing-function:var(--motion-ease-out)}
.animate-spin{animation:spin var(--motion-duration-spin) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hover\:text-white:hover{color:var(--text-primary)}
.hover\:text-\[\#d4a04a\]:hover{color:var(--accent)}
.hover\:opacity-80:hover{opacity:var(--opacity-hover)}
.hover\:bg-blue-700:hover{background:var(--status-blue-hover)}
.active\:bg-blue-800:active{background:var(--status-blue-active)}
.focus\:border-blue-500:focus{border-color:var(--status-blue)}
.focus\:outline-none:focus{outline:0}
@media (min-width:640px){
  .sm\:w-40{width:var(--size-scale-px-160)}
  .sm\:gap-6{gap:var(--space-ui-6)}
  .sm\:text-2xl{font-size:var(--type-scale-rem-1-5);line-height:var(--leading-utility-xs)}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .animate-spin{animation:none}
  .transition{transition-duration:var(--motion-duration-instant)}
}

  :root {
    --bg-body: #0a0a0c;
    --bg-header: #121214;
    --bg-surface: #1a1a1e;
    --bg-surface-hover: #24242a;
    --text-primary: #e6e4e0;
    --text-secondary: #a09890;
    --text-muted: #92877a;
    --text-dim: #524a40;
    --accent: #d4a04a;
    --accent-hover: #c08e3a;
    --border: rgba(255,255,255,0.06);
    --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%; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
  :focus:not(:focus-visible) { outline: none; }
  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; }
  .toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
    background: var(--visual-success-solid); color: white; padding: var(--space-scale-px-6) var(--space-scale-px-16); border-radius: var(--radius-md);
    font-size: var(--type-control); z-index: var(--layer-toast); opacity: var(--opacity-hidden); transition: opacity 0.3s;
    backdrop-filter: blur(8px); box-shadow: var(--shadow-floating); }
  .toast.show { opacity: var(--opacity-visible); }
  /* Season tabs */
  .season-tabs { display:flex; flex-wrap:nowrap; max-width:100%; gap:var(--space-scale-px-6); 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-md); 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); }
  .ep-row:last-child { border-bottom:none; }
  .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-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-size        6.5px @320 -> 10.5px @1024+ (was --type-compact-meta)
       --ep-badge-pad-inline  2.7px @320 -> 7px    @1024+ (was --space-scale-px-7)
       --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-size: clamp(.40625rem, .29261rem + .56818vw, .65625rem);
    --ep-badge-pad-inline: clamp(.16875rem, .04659rem + .61080vw, .4375rem);
    --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; font-size:var(--ep-badge-size); padding:var(--space-scale-px-1) var(--ep-badge-pad-inline); border-radius:var(--radius-sm);
    font-weight:600; 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-scale-px-6); 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-md); 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) { 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); }
  .copy-icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  /* 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); }
  .show-resource-list { padding:var(--space-resource-list-inset); }
  .resource-card--nested[data-resource-role] {
    grid-template-columns:minmax(0,1fr) max-content var(--resource-icon-action-rail);
    grid-template-rows:auto;
    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:2; grid-row:1; justify-self:end; }
  .resource-card--nested[data-resource-role] .show-resource-action-group {
    grid-column:3;
    grid-row:1;
    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)));
    }
  }
  .show-shell .resource-card--nested,
  .show-shell .resource-card--nested.resource-card--season-pack,
  .show-shell .resource-card--nested.resource-card--series-pack { box-shadow:var(--resource-card-edge-shadow); }
  .show-shell .resource-card--nested.resource-card--locked:hover,
  .show-shell .resource-card--nested.resource-card--locked:focus-visible,
  .show-shell .resource-card--nested.resource-card--locked:focus-within { border-color:var(--resource-card-hover-border); box-shadow:var(--resource-card-edge-shadow); background:var(--resource-card-hover-surface); }

  .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; }
  .show-hero { display:grid; grid-template-columns:128px minmax(0,1fr); gap:var(--space-scale-px-14) var(--space-scale-px-16); align-items:start; margin-bottom:var(--space-scale-px-20); }
  .show-hero-poster { grid-row:1 / span 2; width:var(--size-scale-px-128); min-width:0; }
  .show-hero-heading { min-width:0; align-self:start; padding-top:0; }
  .show-hero-title { margin:0 0 var(--space-scale-px-4); color:var(--text-primary); font-size:var(--type-content-title); line-height:var(--leading-title); font-weight:var(--weight-content-title); 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(--radius-sm); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-section); font-weight:650; }
  .show-hero-copy { grid-column:2; min-width:0; max-width:var(--size-scale-px-980); 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); }
  .show-overview { margin:0 0 var(--space-scale-px-14); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-copy); }
  .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; }
  .show-info-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-surface); padding:var(--space-scale-px-14) var(--space-scale-px-16); }
  .show-info-table { width:100%; border-collapse:collapse; }
  .show-info-row { border-bottom:1px solid var(--border); }
  .show-info-row:last-child { border-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-meta); font-weight:500; 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-copy); font-weight:500; 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-scale-px-8); }
  .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) {
    .show-hero { grid-template-columns:160px minmax(0,1fr); gap:var(--space-scale-px-14) var(--space-scale-px-24); }
    .show-hero-poster { width:var(--size-scale-px-160); }
    .show-hero-title { font-size:var(--type-content-title); }
    .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-title:var(--type-content-title);
      --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-poster { grid-row:1 / span 2; width:var(--size-mobile-poster); }
    .show-hero { grid-template-columns:var(--size-mobile-poster) minmax(0,1fr); gap:var(--space-scale-px-6) var(--space-scale-px-8); margin-bottom:var(--space-scale-px-9); }
    .show-hero-title { font-size:var(--mobile-density-title); line-height:var(--leading-title); }
    .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); font-size:var(--mobile-density-body); line-height:var(--leading-copy); }
    .show-section-title { font-size:var(--mobile-density-section); }
    .show-info-card { padding:var(--space-mobile-card-pad); border-radius:var(--radius-mobile-md); }
    .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-tabs { gap:var(--mobile-density-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-panel { margin-bottom:var(--space-scale-px-8); }
    .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 { gap:var(--space-scale-px-4); }
    .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); }
    .resource-card-list { gap:var(--mobile-density-gap); }
    .show-resource-list { padding:var(--space-resource-list-inset); }
    .resource-card--compact { --resource-compact-source-width:52px; 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__source { min-height:var(--size-scale-px-16); padding-inline:var(--space-scale-px-4); font-size:var(--mobile-density-label); }
    .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,
    .resource-card--compact .resource-fact { --resource-fact-font-size:var(--mobile-density-label); height:var(--size-scale-px-16); padding-inline:var(--space-scale-px-3); }
    .resource-card--nested[data-resource-role] { grid-template-columns:minmax(0,1fr) var(--resource-icon-action-rail); grid-template-rows:auto auto; 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:2; justify-self:start; }
    .resource-card--nested[data-resource-role] .show-resource-action-group { grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; }
    .show-back-link,
    .lang-toggle,
    .deep-nav-icon,
    .show-info-card,
    .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; }
  }