/* Generated by _build/build.py from tokens.json and _build/styles.css. */
@font-face{font-family:'Gloock';src:url('../fonts/gloock-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{
  --bg: #111F24;
  --surface: #1A3037;
  --surface-raised: #28424A;
  --surface-hover: #28424A;
  --caption: #1A3037;
  --text: #F4EBDD;
  --muted: #B4C2BF;
  --accent: #E8B96C;
  --accent-hover: #F2CB8C;
  --accent-active: #D4A453;
  --line: #738E94;
  --focus: #F9E4AF;
  --error: #F4A499;
  --success: #C1D2A5;
  --disabled-bg: #304149;
  --disabled-text: #B6BDBC;
  --black: #000000;
  --ui: 'Instrument Sans', sans-serif;
  --display: 'Gloock', Georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 4.5rem;
  --leading-body: 1.65;
  --leading-title: 1.12;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 32px rgb(0 0 0 / 0.18);
  --shadow-panel: 0 24px 72px rgb(0 0 0 / 0.4);
  --shadow-inset: inset 0 0 0 1px rgb(243 240 249 / 0.08);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-skeleton: 1800ms;
  --easing-standard: cubic-bezier(.2,.7,.2,1);
  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --z-base: 0;
  --z-content: 1;
  --z-rail: 5;
  --z-header: 20;
  --z-tabs: 30;
  --z-menu: 40;
  --z-dialog: 60;
  --z-toast: 70;
  --z-skip: 100;
  --gutter: clamp(20px, 4vw, 64px);
  --touch-target: 44px;
  --icon-size: 20px;
  --header-height: 88px;
  --phone-header-height: 72px;
  --phone-tabs-height: 72px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --art-bg-0: #51465F;
  --art-a-0: #C7D79D;
  --art-b-0: #AA96BC;
  --art-bg-1: #46575B;
  --art-a-1: #A2BFC1;
  --art-b-1: #D7C894;
  --art-bg-2: #654F50;
  --art-a-2: #D7B194;
  --art-b-2: #B8A2CF;
  --art-bg-3: #555547;
  --art-a-3: #C2C69B;
  --art-b-3: #AA96BC;
  --art-bg-4: #51465F;
  --art-a-4: #B8A2CF;
  --art-b-4: #D7C894;
  --art-bg-5: #4A5E4F;
  --art-a-5: #A9B88B;
  --art-b-5: #E7C4A5;
  --art-bg-6: #68545F;
  --art-a-6: #D4B8CB;
  --art-b-6: #B7BB91;
  --art-bg-7: #3B5059;
  --art-a-7: #92BBB3;
  --art-b-7: #D9B19A;
  --accent-text: #17242A;
  --raised: var(--surface-raised);
  --border: var(--line);
  --accent-pressed: var(--accent-active);
  --button-radius: 8px;
  --card-radius: 12px;
  --button-height: 48px;
  --button-padding: 20px;
  --button-font-size: 15px;
  --button-icon: 20px;
  --button-gap: 10px;
  --button-small-height: 44px;
  --button-small-padding: 16px;
  --button-small-font-size: 14px;
  --button-small-icon: 18px;
  --button-small-gap: 8px;
  --duration: var(--duration-fast);
  --easing: var(--easing-standard);
  --display-weight: 400;
  --focus-halo: 8px;
  --player-control-bg: #111F24;
  --scrim: rgb(0 0 0 / .72);
  --z-modal: 60;
  --z-lock: 80;
  --bedtime-filter: #F0D8B8;
  --bedtime-line: #8CA6AB;
  --z-bedtime: 2147483647;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body { margin: 0; font: 400 16px/1.55 var(--ui); }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg.icon, .btn svg, .icon-btn svg, .desktop-nav svg, .phone-tabs svg, .player-control svg, .toast svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .is-focus {
  outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 8px var(--bg);
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--accent); color: var(--accent-text); padding: 12px 20px; transform: translateY(-200%); clip-path:inset(100%); }
.skip-link:focus { transform: none; clip-path:none; }
p { margin: 0 0 20px; }
h1,h2,h3 { margin: 0; line-height: 1.2; }
.muted { color: var(--muted); }
.topbar { height: 88px; display: flex; align-items: center; gap: 44px; padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 10; }
.brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { width: 208px; max-height: 48px; }
.topnav { display: flex; align-items: center; gap: 12px; height: 100%; }
.topnav a { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 0 16px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; }
.topnav a:hover { color: var(--text); background: var(--surface); }
.topnav a[aria-current="page"] { color: var(--text); border-color: var(--accent); }
.account-trigger { margin-left: auto; border-radius: 50% !important; color: var(--accent) !important; }
.account-panel { position: absolute; top: 76px; right: var(--gutter); width: 302px; border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px; background: var(--surface); box-shadow: 0 18px 50px #0008; }
.account-panel h2 { font-size: 18px; }
.account-panel p { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.account-panel button { width: 100%; justify-content: flex-start; margin-top: 8px; }
.timer-line { color: var(--success) !important; }
.phone-tabs { display: none; }
.btn, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--button-height); min-height: 44px; min-width: 44px;
  padding: 0 var(--button-padding); gap: var(--button-gap);
  border: 1px solid transparent; border-radius: var(--button-radius);
  font: 600 var(--button-font-size)/1 var(--ui); letter-spacing: 0;
  white-space: nowrap; vertical-align: middle; flex-shrink: 0;
  transition: background-color var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
  position: relative;
}
.btn > span:not(.spinner), .btn > .button-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn .icon { width: var(--button-icon); height: var(--button-icon); }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active, .btn-primary.is-active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn-secondary, .icon-btn { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover, .btn-secondary.is-hover, .icon-btn:hover, .icon-btn.is-hover { background: var(--raised); }
.btn-secondary:active, .btn-secondary.is-active, .icon-btn:active, .icon-btn.is-active { background: var(--bg); border-color: var(--accent); }
.btn-quiet { background: transparent; color: var(--text); }
.btn-quiet:hover, .btn-quiet.is-hover { background: var(--raised); }
.btn-quiet:active, .btn-quiet.is-active { background: var(--surface); box-shadow: inset 0 -2px var(--accent); }
.btn-destructive { color: var(--error); border-color: var(--error); background: var(--surface); }
.btn-destructive:hover, .btn-destructive.is-hover { background: var(--raised); }
.btn-destructive:active, .btn-destructive.is-active { color: var(--bg); background: var(--error); }
.btn-secondary[aria-pressed="true"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.btn-secondary[aria-pressed="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary[aria-pressed="true"]:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn:disabled, .icon-btn:disabled { color: var(--disabled-text); background: var(--disabled-bg); border-color: var(--border); box-shadow: none; opacity: 1; }
.icon-btn { width: var(--button-height); padding: 0; }
.btn-small { --button-height: 44px; --button-padding: 16px; --button-font-size: 14px; --button-icon: 18px; --button-gap: 8px; }
.full-width { width: 100%; }
.button-label { display: inline-flex; align-items: center; gap: inherit; }
.btn[aria-busy="true"] .button-label, .icon-btn[aria-busy="true"] .button-label { opacity: 0; }
.spinner { position: absolute; width: 20px; height: 20px; left: calc(50% - 10px); top: calc(50% - 10px); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero, .title-hero { position: relative; isolation: isolate; }
.hero-card { position: relative; min-height: 560px; display: flex; align-items: center; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; z-index: -2; }
.hero-card::after, .title-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 30%,color-mix(in srgb,var(--bg) 40%,transparent) 62%,transparent 85%),linear-gradient(0deg,var(--bg),transparent 35%);
}
.hero-copy, .title-copy { position: relative; max-width: 680px; padding: 68px var(--gutter) 78px; }
.eyebrow { font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .065em; color: var(--accent); margin-bottom: 18px; }
.hero-title { font: var(--display-weight,400) clamp(38px,4.2vw,62px)/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; margin-bottom: 24px; overflow-wrap: break-word; }
.hero-copy p,.title-copy p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 43ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.hero-copy .hero-actions { margin-bottom: 0; }
.hero .dots { position: absolute; bottom: 17px; left: var(--gutter); display: flex; align-items: center; gap: 4px; }
.hero-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 8px; color: var(--muted); }
.hero-dot span { width: 20px; height: 4px; border-radius: 4px; background: currentColor; }
.hero-dot[aria-pressed="true"] { color: var(--accent); }
.hero-dot:hover { color: var(--text); background: var(--surface); }
.title-hero { min-height: 530px; display: flex; align-items: center; }
.title-copy { max-width: 810px; padding-block: 60px 48px; }
.title-copy .hero-title { max-width: 15ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
button.chip { min-width: 44px; min-height: 44px; padding-inline: 14px; }
button.chip[aria-pressed="true"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
button.chip:hover { color: var(--text); background: var(--raised); }
.rows { padding: 2px var(--gutter) 64px; }
.row { margin-bottom: 36px; position: relative; }
.row-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.row-heading h2, .section-label { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 16px) / 6.5); gap: 16px; overflow-x: auto; padding: 6px; margin: -6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.track > * { scroll-snap-align: start; }
.collections .track { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
.continue .track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.rail-next { position: absolute; right: 0; top: 68px; border-radius: 50%; background: var(--surface); box-shadow: 0 3px 12px #0006; z-index: 3; }
.poster-card, .landscape-card, .collection-tile { min-width: 0; display: block; overflow: hidden; border-radius: var(--card-radius); background: var(--surface); transition: box-shadow var(--duration), background-color var(--duration); }
.poster-card:hover,.landscape-card:hover,.collection-tile:hover { box-shadow: 0 0 0 2px var(--accent); }
.poster-card:active,.landscape-card:active,.collection-tile:active { box-shadow: 0 0 0 3px var(--focus); }
.poster-art { position: relative; display: block; aspect-ratio: 2/3; background: var(--bg); overflow: hidden; border: 1px solid var(--border); border-radius: var(--card-radius) var(--card-radius) 0 0; }
.poster-art .cover-img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 35%; }
.poster-art .cover-img.cover-contain { object-fit: contain; object-position: center; }
.art-fallback { display: grid; place-items: center; background: linear-gradient(145deg,var(--raised),var(--bg)); }
.art-fallback img { width: 56%; opacity: .72; }
.caption { display: grid; gap: 6px; padding: 12px; min-height: 94px; }
.caption strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.4; font-weight: 600; min-height: 2.8em; }
.caption small { font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.landscape-art { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--card-radius) var(--card-radius) 0 0; }
.landscape-art img { width: 100%; height: 100%; object-fit: cover; }
.progress { height: 3px; display: block; background: var(--border); }
.progress i { display: block; height: 100%; width: var(--progress,40%); background: var(--accent); }
.collection-tile { aspect-ratio: 16/10; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.collection-image { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
.collection-tile strong { padding: 12px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.collection-shape { display: grid; place-items: center; min-height: 0; background: var(--raised); overflow: hidden; }
.collection-shape svg { width: 64px; height: 64px; color: var(--accent); stroke-width: 1.2; }
.tabs { display: flex; gap: 16px; padding-inline: var(--gutter); border-bottom: 1px solid var(--border); }
.tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 0 14px; min-height: 52px; color: var(--muted); font-size: 15px; font-weight: 600; white-space: nowrap; }
.tab[aria-selected="true"] { border-color: var(--accent); color: var(--text); }
.tab:hover { color: var(--text); background: var(--surface); }
.tab-panel { padding: 32px var(--gutter) 64px; }
.poster-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 20px; }
.details-list { display: grid; grid-template-columns: 130px 1fr; gap: 12px 24px; margin-top: 24px; }
.details-list dt { color: var(--muted); }.details-list dd { margin: 0; }
.season-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.season-heading select, select.field-control { height: 48px; padding: 0 38px 0 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--button-radius); }
.episode-list { display: grid; gap: 16px; }
.episode-card { display: grid; grid-template-columns: 220px 1fr 48px; align-items: center; gap: 24px; padding: 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--card-radius); }
.episode-card:hover { background: var(--raised); border-color: var(--accent); }
.episode-card .landscape-art { border-radius: calc(var(--card-radius) / 2); }
.episode-card strong { font-size: 17px; font-weight: 600; }
.episode-card p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.episode-card .watched { color: var(--success); }
.form-example { display: grid; gap: 20px; max-width: 440px; padding: 24px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--surface); }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.field input { height: 48px; width: 100%; padding: 0 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--button-radius); }
.field input::placeholder { color: var(--muted); }
.field input:disabled { color: var(--disabled-text); background: var(--disabled-bg); opacity: 1; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input:is(:autofill, :-webkit-autofill) { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 1000px var(--raised) inset; }
.field small { font-size: 13px; color: var(--muted); }
.field .error { color: var(--error); }
.inline-alert { border-left: 3px solid var(--error); background: var(--surface); color: var(--error); padding: 14px 16px; font-size: 14px; }
.reference-page { padding: 40px var(--gutter) 80px; max-width: 1600px; margin-inline: auto; }
.reference-nav { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px var(--gutter); border-bottom: 1px solid var(--border); }
.reference-page > header { max-width: 760px; margin-bottom: 40px; }
.reference-page h1 { font: var(--display-weight,400) 46px/1.12 var(--display); margin-bottom: 20px; letter-spacing: -.025em; }
.reference-page h2 { font-size: 23px; margin-bottom: 18px; }
.reference-page h3 { font-size: 17px; margin-bottom: 14px; }
.reference-page .hero-title { font: var(--display-weight,400) clamp(32px,3vw,46px)/1.1 var(--display); letter-spacing: -.025em; }
.reference-page section { margin-bottom: 44px; }
.reference-page p { color: var(--muted); }
.logo-sizes { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); }
.logo-sizes figure { margin: 0; max-width: 100%; }
.logo-sizes figcaption { font-size: 12px; color: var(--muted); margin-top: 20px; }
.mark-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; margin-top: 24px; }
.mark-icon { display: grid; place-items: center; width: 128px; height: 128px; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; }
.mark-icon img { width: 78px; height: 78px; }
.swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.swatch { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 13px; }
.swatch i { display: block; width: 100%; height: 50px; border-radius: 5px; border: 1px solid var(--border); margin-bottom: 8px; }
.swatch strong, .swatch code { display: block; }
.state-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 20px 12px; align-items: start; }
.state-sample { min-width: 0; padding: 10px 8px; }
.state-sample .btn { max-width: 100%; }
.state-sample > small { display: block; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.button-demos { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.input-with-button { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.input-with-button .field { flex: 1; min-width: 180px; }
.surface-example { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); }
.on-art { padding: 48px 24px; background: url("../brand/logo/hero.svg") center/cover; }
.on-art .hero-actions { margin: 0; padding: 20px; width: fit-content; background: var(--bg); border-radius: var(--card-radius); }
.metrics { width: 100%; border-collapse: collapse; font-size: 14px; }
.metrics th,.metrics td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.metrics th { color: var(--muted); font-weight: 500; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.reference-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.reference-footer a { text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1100px) {
  .topbar { gap: 22px; }.topnav { gap: 0; }.topnav a { padding-inline: 10px; }
  .state-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .track { grid-auto-columns: calc((100% - 3 * 16px) / 4.5); }
  .poster-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .swatches { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; }
  body { padding-bottom: 76px; }
  .topbar { height: 72px; padding-inline: 20px; }.brand img { width: 173px; }.topnav { display: none; }
  .phone-tabs { position: fixed; display: grid; grid-template-columns: repeat(4,1fr); bottom: 0; inset-inline: 0; min-height: 70px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); z-index: 30; }
  .phone-tabs a,.phone-tabs button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 6px 0; min-height: 48px; margin-inline: 4px; font: 500 11px/1.2 var(--ui); color: var(--muted); border: 0; background: transparent; }
  .phone-tabs [aria-current="page"] { color: var(--accent); }
  .phone-tabs a:hover,.phone-tabs button:hover { background: var(--surface); color: var(--text); }
  .account-panel { position: fixed; inset: auto 12px 84px; width: auto; }
  .hero-card { min-height: 440px; align-items: flex-end; }.hero-art { object-position: 73% center; }
  .hero-copy { padding: 154px 20px 68px; width: 100%; }
  .hero-card::after,.title-hero::after { background: linear-gradient(0deg,var(--bg) 5%,color-mix(in srgb,var(--bg) 95%,transparent) 60%,color-mix(in srgb,var(--bg) 15%,transparent) 100%); }
  .hero-title { font-size: 36px; line-height: 1.08; margin-bottom: 18px; letter-spacing: -.025em; }
  .hero-copy p { font-size: 14px; margin-bottom: 0; max-width: 39ch; }
  .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .hero-actions { gap: 10px; margin-top: 20px; }
  .hero-actions .btn { --button-padding: 16px; --button-font-size: 14px; --button-gap: 8px; }
  .title-hero { min-height: 480px; align-items: flex-end; }
  .title-copy { padding: 150px 20px 28px; }
  .title-copy p { font-size: 14px; margin: 0; }
  .title-copy .hero-title { max-width: 100%; }
  .row { margin-bottom: 28px; }.row-heading { margin-bottom: 14px; }.row-heading h2 { font-size: 18px; }
  .rows { padding-top: 12px; }
  .track { gap: 12px; grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .collections .track { grid-auto-columns: calc((100% - 1.5 * 12px) / 2.5); }
  .continue .track { grid-auto-columns: calc((100% - 12px) / 1.5); }
  .caption { padding: 10px 8px; min-height: 88px; gap: 5px; }.caption strong { font-size: 12px; }.caption small { font-size: 10px; }
  .collection-tile { aspect-ratio: 16/11; }.collection-tile strong { padding: 10px 8px; font-size: 11px; }
  .collection-shape svg { width: 44px; height: 44px; }
  .rail-next { display: none; }
  .tabs { gap: 0; padding-inline: 10px; }.tab { padding-inline: 12px; font-size: 14px; min-height: 52px; }
  .tab-panel { padding: 24px 20px 40px; }
  .poster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .episode-card { grid-template-columns: 112px minmax(0,1fr); gap: 12px; padding: 10px; }
  .episode-card > .icon { display: none; }.episode-card strong { font-size: 14px; }.episode-card p { font-size: 12px; }
  .reference-page { padding: 28px 20px 40px; }.reference-page h1 { font-size: 34px; }
  .reference-nav { gap: 8px; padding: 16px 20px; }
  .reference-nav .btn { --button-padding: 12px; --button-font-size: 13px; }
  .state-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .logo-sizes { padding: 20px; gap: 28px; }
  .swatches { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .surface-example { padding: 20px; }
  .metrics th,.metrics td { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; transition: color 0s, background-color 0s, border-color 0s !important; }
}

/* Selected package: app-compatible shared surfaces and complete screen states. */
body { font-synthesis: none; }
.hero-title,.page h1,.login-card h1,.empty-state h1,.empty-state h2,.timer-stepper output,.brand-name,.package-header h1,.catalog-header h1 { font-family: var(--display); font-weight: 400; font-style: normal; font-synthesis: none; }
.topbar { z-index: var(--z-header); }
.brand { gap: 12px; }
.brand > img { width: 32px; height: auto; }
.brand > .brand-wordmark { width: 208px; max-height: 50px; }
.brand-name { font-size: 28px; letter-spacing: .005em; white-space: nowrap; }
.desktop-nav { display:flex; align-items:center; gap:12px; height:100%; }
.desktop-nav a { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 16px; color:var(--muted); border-bottom:2px solid transparent; font-size:14px; font-weight:600; }
.desktop-nav a[aria-current="page"] { color:var(--text); border-color:var(--accent); }
.desktop-nav a:hover { color:var(--text); background:var(--surface); }
.avatar { margin-left:auto; border-radius:50%; color:var(--accent); }
.btn { max-width:100%; }
.btn > svg { width:var(--button-icon); height:var(--button-icon); }
.btn-full,.btn.full-width { width:100%; }
.btn-small { --button-height:var(--button-small-height); --button-padding:var(--button-small-padding); --button-font-size:var(--button-small-font-size); --button-icon:var(--button-small-icon); --button-gap:var(--button-small-gap); }
.btn.is-disabled,.icon-btn.is-disabled,[aria-disabled="true"] { color:var(--disabled-text); background:var(--disabled-bg); border-color:var(--line); box-shadow:none; opacity:1; cursor:default; }
.btn.is-loading .button-label { opacity:0; }
.btn[aria-busy="true"] .spinner,.btn.is-loading .spinner { display:block; }
.is-loading { cursor:progress; }
.hero-card,.title-hero { background:var(--bg) url('../brand/logo/hero.svg') center/cover no-repeat; }
.hero-art[src*="02-dream/art/hero.svg"] { visibility:hidden; }
.hero-rotation { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; margin-left:12px; padding:0 10px; border:0; border-radius:8px; background:var(--bg); color:var(--muted); font-size:12px; font-weight:500; }
.hero-rotation svg { width:16px; height:16px; }
.hero-rotation:hover { background:var(--surface); color:var(--text); }
.hero .carousel-toggle { width:auto; min-width:44px; min-height:44px; height:44px; border:0; margin-left:10px; padding-inline:10px; gap:8px; color:var(--muted); background:var(--bg); font-size:12px; font-weight:500; }
.hero .carousel-toggle::after { content:"Slides"; }
.hero .carousel-toggle svg { width:16px; height:16px; }
.hero .dots { z-index:2; }
.title-copy .hero-title { max-width:17ch; font-size:clamp(36px,4.2vw,60px); }
.chip.is-hover { color:var(--text); background:var(--raised); }
.chip.is-active { color:var(--accent-text); background:var(--accent-active); }
.chip:disabled,.chip.is-disabled { color:var(--disabled-text); background:var(--disabled-bg); border-color:var(--line); }
.chip[aria-pressed="true"]:hover { color:var(--accent-text); background:var(--accent-hover); }
.tab.is-hover { background:var(--surface); color:var(--text); }
.tab.is-active { color:var(--accent); border-color:var(--accent); }
.tab:disabled,.tab.is-disabled { color:var(--disabled-text); background:var(--disabled-bg); }
.poster-card.is-hover,.landscape-card.is-hover,.collection-tile.is-hover { box-shadow:0 0 0 2px var(--accent); }
.poster-card.is-active,.landscape-card.is-active,.collection-tile.is-active { box-shadow:0 0 0 3px var(--focus); }
.poster-card.is-disabled,.landscape-card.is-disabled,.collection-tile.is-disabled { filter:grayscale(1); }
.poster-art > .cover-img { position:absolute; inset:0; width:100%; height:100%; }
.poster-art > .cover-contain { object-fit:contain; object-position:center; }
.poster-art:has(img[src*="a-charlie-brown-christmas"]) > .cover-img { object-fit:contain; object-position:center; }
.art-0,.art-1,.art-2,.art-3,.art-4,.art-5,.art-6,.art-7 { background-color:var(--bg); background-image:radial-gradient(ellipse at 75% 25%,#e8b96c33,transparent 50%),linear-gradient(140deg,var(--surface-raised),var(--bg)); }
.poster-art:empty::before,.landscape-art:empty::before { content:""; position:absolute; inset:25%; background:url('../brand/logo/mark.svg') center/contain no-repeat; opacity:.65; }
.collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:20px; }
.page { padding:40px var(--gutter) 64px; }
.page h1 { font-size:clamp(32px,3.2vw,46px); line-height:1.14; margin:0 0 16px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.page-heading p { color:var(--muted); margin:0; }
.narrow-page { max-width:900px; margin:auto; }
.search-box { display:flex; align-items:center; gap:16px; min-height:64px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-md); padding:8px 16px; margin-bottom:36px; }
.search-box > svg { width:24px; height:24px; color:var(--muted); flex:none; }
.search-box input { flex:1; width:0; min-width:0; border:0; min-height:48px; background:transparent; color:var(--text); font-size:18px; outline-offset:0; }
.search-box input::placeholder { color:var(--muted); }
.search-box:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.search-box input:focus-visible { outline:none; box-shadow:none; }
.search-box input::-webkit-search-cancel-button { display:none; }
.episode-card .episode-image { min-width:0; }
.episode-card .episode-copy { min-width:0; }
.episode-copy h3 { font:600 17px/1.4 var(--ui); margin:0 0 10px; }
.episode-duration { font-size:14px; color:var(--muted); }
.episode-card .progress { height:3px; margin-top:5px; }
.episode-card.is-hover { border-color:var(--accent); background:var(--raised); }
.episode-card.is-active { border-color:var(--focus); background:var(--bg); }
.episode-card.is-disabled { filter:grayscale(1); background:var(--disabled-bg); }
.season-heading select:disabled,select.is-disabled { color:var(--disabled-text); background:var(--disabled-bg); }
.season-select { height:48px; min-height:48px; max-width:100%; padding:0 38px 0 14px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.login-page { min-height:100svh; display:grid; place-items:center; padding:56px 24px; position:relative; isolation:isolate; }
.login-art { position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,#111f24f2 0%,#111f24b3 55%,#111f2450),url('../brand/logo/hero.svg') center/cover; }
.login-card { width:min(448px,100%); border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-panel); }
.login-card .brand { margin-bottom:32px; }
.login-card .eyebrow { margin-bottom:12px; }
.login-card h1 { font-size:38px; line-height:1.1; margin:0 0 18px; }
.login-card > p { color:var(--muted); font-size:15px; }
.login-card form { display:grid; gap:20px; }
.login-card form > .btn { width:100%; }
.login-note { margin:24px 0 0; font-size:13px!important; line-height:1.6; }
.login-note strong { color:var(--text); font-weight:600; }
.password-wrap { display:flex; position:relative; }
.password-wrap input { padding-right:58px; }
.password-wrap .icon-btn { position:absolute; right:1px; top:1px; width:46px; height:46px; border:0; background:transparent; }
.field input.is-focus { outline:3px solid var(--focus); outline-offset:3px; }
.field input.is-hover { border-color:var(--text); }
.field input.is-active { border-color:var(--accent); }
.field input.is-autofill { background:var(--raised); color:var(--text); -webkit-text-fill-color:var(--text); box-shadow:0 0 0 1000px var(--raised) inset; }
.field-hint,.help,.state-note { color:var(--muted); font-size:13px; line-height:1.6; }
.empty-state { max-width:540px; margin:32px auto; padding:36px 24px; text-align:center; }
.empty-state h1,.empty-state h2 { font-size:32px; margin:20px 0 16px; line-height:1.15; }
.empty-state p { color:var(--muted); margin:0 auto 24px; max-width:39ch; }
.empty-illustration { width:72px; height:72px; margin:0 auto; border:1px solid var(--line); border-radius:22px; background:var(--surface); display:grid; place-items:center; color:var(--accent); }
.empty-illustration svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.4; }
.empty-state > .btn { margin:0 4px 8px; }
.skeleton { display:block; border-radius:8px; background:linear-gradient(90deg,var(--surface) 10%,var(--raised) 50%,var(--surface) 90%); background-size:200% 100%; animation:shimmer var(--duration-skeleton) ease-in-out infinite; }
.skeleton-art { aspect-ratio:2/3; margin-bottom:14px; }
.skeleton-line { height:14px; margin:10px 0; width:100%; }
.skeleton-line.short { width:64%; }
.skeleton-landscape .skeleton-art { aspect-ratio:16/9; }
@keyframes shimmer { from{background-position:100% 0} to{background-position:-100% 0} }
.account-panel { z-index:var(--z-menu); width:330px; padding:24px; }
.account-panel .picker-heading { margin-bottom:0; }
.account-panel .picker-heading button { width:44px; flex:none; margin:0; }
.account-panel > .btn { width:100%; justify-content:flex-start; margin-top:10px; }
.account-panel .timer-line { display:flex; align-items:center; gap:8px; margin:18px 0; padding:12px 0; border-block:1px solid var(--line); color:var(--accent)!important; }
.picker-panel { padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); color:var(--text); box-shadow:var(--shadow-panel); }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.picker-heading h2,.picker-heading h3 { font:600 20px/1.3 var(--ui); margin:0; }
.picker-heading > .icon-btn { flex:none; }
.picker-section-label { font-size:13px; color:var(--muted); font-weight:600; margin:20px 0 8px; }
.picker-option { width:100%; min-height:48px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); margin:8px 0; }
.picker-option[aria-pressed="true"] { border-color:var(--accent); }
.picker-option small { display:block; color:var(--muted); }
.picker-option:is(:hover,.is-hover) { background:var(--raised); }
.picker-option:is(:active,.is-active) { border-color:var(--accent); background:var(--bg); }
.picker-option:disabled { color:var(--disabled-text); background:var(--disabled-bg); }
.picker-option svg { width:20px; height:20px; color:var(--accent); }
.parent-form { display:grid; gap:20px; }
.parent-form > .btn { width:100%; }
.pin-input { text-align:center; letter-spacing:.6em; font-size:24px; font-variant-numeric:tabular-nums; }
.parent-note { color:var(--muted); font-size:14px; line-height:1.65; margin:0; }
.parent-backdrop { position:fixed; inset:0; z-index:var(--z-dialog); display:grid; place-items:center; padding:24px; background:rgb(0 0 0 / .72); overflow:auto; }
dialog.parent-dialog { position:fixed; margin:auto; inset:0; width:min(464px,calc(100vw - 48px)); max-height:calc(100svh - 48px); overflow:auto; }
dialog.parent-dialog::backdrop { background:transparent; }
.parent-preview-background { min-height:70svh; padding:48px var(--gutter); }
.parent-preview-background h1 { font:400 44px/1.1 var(--display); }
.parent-preview-background p { color:var(--muted); }
.timer-current { display:grid; gap:16px; border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--bg); }
.timer-current p { margin:0; color:var(--accent); }
.timer-modes { display:grid; gap:8px; margin-bottom:0; }
.timer-modes .chip { justify-content:center; white-space:normal; line-height:1.4; padding-block:12px; }
.timer-stepper { display:flex; align-items:center; justify-content:center; gap:20px; padding-block:12px; }
.timer-stepper output { min-width:7ch; font-size:30px; text-align:center; }
.timer-range-note { text-align:center; color:var(--muted); font-size:13px; margin:0; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.times-up { position:fixed; inset:0; z-index:var(--z-lock); padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:auto; background:var(--bg); }
.times-up .times-up-panel { width:min(464px,100%); max-width:none; margin:auto; padding:36px 28px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.times-up .parent-form { text-align:left; }
.times-up .times-up-panel h1,.times-up .times-up-panel h2 { margin-top:0; }
.times-up .times-up-panel p { margin-bottom:24px; }
.times-up.exited { background:#000; }
.times-up:focus,[tabindex="-1"]:focus:not(button,a,input,select,textarea) { outline:none; }
.times-up .times-up-wake { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:auto!important; opacity:1; color:#929A99; background:#000; border:0; }
.times-up-wake:hover,.times-up-wake:focus-visible { color:var(--text); background:var(--surface); }
.parents-head { border-bottom:1px solid var(--line); background:linear-gradient(110deg,var(--surface),var(--bg)); padding-bottom:32px; }
.parents-head .page-heading { margin-bottom:0; align-items:flex-end; }
.parents-rows { padding-top:32px; }
.parents-unlock { width:min(448px,100%); margin:32px auto; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.parents-unlock h1 { font-size:34px; margin-bottom:18px; }
.parents-unlock > .btn { width:100%; margin-top:20px; }
.rail-empty { min-width:240px; padding:24px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); }
.rail-empty p { margin:0; }
.toast { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 20px; background:var(--surface-raised); border:1px solid var(--line); border-left:3px solid var(--success); border-radius:12px; box-shadow:var(--shadow-panel); color:var(--text); }
.toast > svg { color:var(--success); }
.toast-copy { flex:1; min-width:0; font-size:14px; line-height:1.5; }
.toast-error { border-left-color:var(--error); }
.toast-error > svg { color:var(--error); }
.toast-live { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:var(--z-toast); width:max-content; max-width:calc(100% - 40px); }
.toast-stack { display:grid; gap:24px; margin-top:36px; }
.player-page { position:fixed; inset:0; overflow:hidden; background:#000; color:var(--text); }
.player-scene { position:absolute; inset:0; display:grid; place-items:center; }
.player-scene img,.player-scene video { width:100%; height:100%; object-fit:contain; }
.player-top { position:absolute; inset:0 0 auto; display:flex; align-items:center; gap:20px; padding:24px; background:linear-gradient(#000d,#0000); min-width:0; }
.player-title { min-width:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:18px; font-weight:600; text-shadow:0 1px 5px #000; }
.player-top .player-title { padding:8px 12px; border-radius:8px; background:var(--player-control-bg); }
.player-centre,.player-mid { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:28px; }
.player-control { width:60px; height:60px; display:grid; place-items:center; border:1px solid var(--line); background:var(--player-control-bg); border-radius:50%; color:var(--text); }
.player-control.main { width:80px; height:80px; color:var(--accent-text); background:var(--accent); border-color:var(--accent); }
.player-control svg { width:28px; height:28px; }
.player-control.main svg { width:32px; height:32px; }
.player-control:hover,.player-control.is-hover { background:var(--surface-raised); }
.player-control.main:hover,.player-control.main.is-hover { background:var(--accent-hover); }
.player-control:active,.player-control.is-active { border-color:var(--accent); }
.player-control:disabled { color:var(--disabled-text); background:var(--disabled-bg); }
.player-bottom { position:absolute; inset:auto 0 0; display:grid; grid-template-columns:1fr auto; gap:12px 24px; padding:36px 32px 24px; background:linear-gradient(#0000,#000d 22%,#000e); }
.scrub-wrap { grid-column:1/-1; }
.scrub-input { width:100%; min-width:0; height:44px; display:block; margin:0; padding:0; appearance:none; background:transparent; cursor:pointer; border-radius:5px; color:var(--accent); }
.scrub-input::-webkit-slider-runnable-track { height:5px; border-radius:5px; background:linear-gradient(to right,var(--accent) var(--progress,0%),var(--line) var(--progress,0%)); }
.scrub-input::-moz-range-track { height:5px; border-radius:5px; background:var(--line); }
.scrub-input::-moz-range-progress { height:5px; background:var(--accent); }
.scrub-input::-webkit-slider-thumb { appearance:none; width:18px; height:18px; background:var(--accent); border:2px solid var(--bg); border-radius:50%; margin-top:-6.5px; }
.scrub-input::-moz-range-thumb { width:18px; height:18px; background:var(--accent); border:2px solid var(--bg); border-radius:50%; }
.player-time { align-self:center; background:var(--player-control-bg); border-radius:6px; width:fit-content; padding:8px 12px; font-size:14px; font-variant-numeric:tabular-nums; }
.player-tools { display:flex; align-items:center; gap:12px; }
.player-volume { display:flex; align-items:center; gap:12px; width:180px; margin-right:12px; }
.player-tools .btn,.player-tools .icon-btn { background:var(--player-control-bg); }
.player-tools .btn:hover,.player-tools .icon-btn:hover { background:var(--raised); }
.player-picker { position:absolute; right:32px; bottom:160px; z-index:var(--z-dialog); width:360px; max-height:calc(100svh - 210px); overflow:auto; }
.next-episode { position:absolute; right:32px; bottom:180px; }
.player-page.controls-hidden .player-top,.player-page.controls-hidden .player-centre,.player-page.controls-hidden .player-mid,.player-page.controls-hidden .player-bottom { opacity:0; pointer-events:none; }
.player-page.controls-hidden:focus-within .player-top,.player-page.controls-hidden:focus-within .player-centre,.player-page.controls-hidden:focus-within .player-mid,.player-page.controls-hidden:focus-within .player-bottom { opacity:1; pointer-events:auto; }
.player-status { position:absolute; inset:0; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; background:#000d; }
.player-status > .spinner { position:static; width:36px; height:36px; }
.player-status .empty-state { width:min(480px,100%); background:var(--bg); border-radius:20px; }
.catalog-shell,.package-shell { padding:48px var(--gutter) 80px; max-width:1600px; margin:auto; }
.catalog-header,.package-header { max-width:800px; padding-bottom:32px; }
.catalog-header h1,.package-header h1 { font-size:clamp(36px,4vw,60px); line-height:1.12; margin:20px 0; }
.package-wordmark { width:360px; max-width:100%; margin-bottom:40px; }
.package-header > p,.package-card p { color:var(--muted); }
.package-links,.demo-inline,.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.package-card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.package-card > a { display:block; }
.package-card > a img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.package-card-info { padding:24px; }
.package-card h2 { margin-bottom:16px; font-size:24px; }
.spec-section { border-top:1px solid var(--line); padding-top:32px; margin-top:48px; }
.spec-section > h2 { font-size:26px; margin-bottom:18px; }
.spec-section > h3 { margin:28px 0 18px; font-size:19px; }
.spec-section > p { max-width:80ch; color:var(--muted); }
.catalog-index { display:flex; flex-wrap:wrap; gap:8px 16px; margin:20px 0 32px; }
.catalog-index a,.text-link { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.catalog-index a { min-width:44px; }
.state-link-group { margin-top:24px; }
.state-link-group h3 { font-size:17px; }
.state-link-group .catalog-index { margin:8px 0; }
.state-grid-wide { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:24px; }
.state-sample > h3,.state-label { font-size:12px; color:var(--muted); margin:0 0 16px; }
.state-sample { min-width:0; overflow-wrap:break-word; }
.state-sample .poster-card,.state-sample .landscape-card,.state-sample .collection-tile { width:100%; }
.state-sample .episode-card { grid-template-columns:110px minmax(0,1fr); width:100%; gap:12px; }
.state-sample .episode-card > .icon-btn { display:none; }
.state-sample .episode-card h3 { font-size:14px; }
.state-sample .episode-card .episode-duration { font-size:12px; }
.component-form-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.component-form-row .field { flex:1 1 14rem; min-width:0; }
.component-form-row > input { height:48px; min-height:48px; flex:1 1 14rem; min-width:0; padding:0 14px; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.component-form-row .btn { flex-shrink:0; }
.component-card-fallback svg { width:100%; height:100%; }
.component-player-frame { position:relative; min-width:0; width:100%; min-height:320px; aspect-ratio:auto; padding:24px; border:1px solid var(--line); border-radius:16px; }
.component-player-frame.is-bright { background:#F4EBDD; }
.component-player-frame.is-dark { background:#000; }
.player-preview-controls { display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:28px; min-width:0; min-height:270px; padding:16px; background:var(--bg); border-radius:12px; }
.player-control-set { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; }
.player-preview-controls .player-title { max-width:100%; white-space:nowrap; font-size:14px; }
#stepper .state-grid { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.player-preview-controls > .demo-inline { justify-content:center; }
.component-player-frame .player-control { position:static; }
.component-player-frame .scrub-wrap { background:var(--bg); border-radius:8px; padding:0 12px; }
.component-dialog { max-width:480px; }
.component-dialog,.parent-backdrop.is-static,.times-up.is-static,.account-panel.is-static { position:relative; inset:auto; transform:none; width:100%; margin:0; }
.parent-backdrop.is-static { padding:20px; min-height:280px; }
.times-up.is-static { min-height:340px; padding:16px; border-radius:12px; }
.times-up.is-static .times-up-panel { padding:24px 16px; }
.times-up.is-static .times-up-panel h2,.times-up.is-static .times-up-panel h3 { font:400 28px/1.2 var(--display); }
.account-panel.is-static .btn { justify-content:flex-start; }
.component-account-phone { max-width:390px; }
.player-status.is-static { position:relative; inset:auto; min-height:220px; border-radius:12px; }
.topbar.is-static { position:relative; padding:16px; height:auto; flex-wrap:wrap; gap:16px; }
.topbar.is-static .brand-wordmark { width:140px; }
.topbar.is-static .desktop-nav { gap:4px; }
.topbar.is-static .desktop-nav a { padding-inline:8px; }
.phone-tabs.is-static { display:grid; position:relative; inset:auto; min-height:72px; grid-template-columns:repeat(4,1fr); padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.phone-tabs.is-static a,.phone-tabs.is-static button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; min-height:48px; font-size:11px; color:var(--muted); border:0; background:transparent; }
.phone-tabs.is-static [aria-current="page"] { color:var(--accent); }
.catalog-shell .hero-card { min-height:450px; }
.catalog-shell .hero-copy { max-width:560px; padding:40px; }
.catalog-shell .hero-title { font-size:40px; }
.catalog-shell .hero .dots { left:40px; }
.catalog-shell .metric-table { width:100%; border-collapse:collapse; }
.metric-table th,.metric-table td { padding:12px; text-align:left; border-bottom:1px solid var(--line); }
@media (max-width:1100px) {
 .desktop-nav { gap:0; }.desktop-nav a { padding-inline:10px; }
 .topbar { gap:24px; }
 .collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
 .player-volume { width:140px; }
 .package-grid { gap:20px; }
}
@media (max-width:680px) {
 body { padding-bottom:0; } body.has-tabs { padding-bottom:90px; }
 .topbar { height:72px; padding-inline:20px; gap:16px; }
 .brand > .brand-wordmark { width:140px; }
 .brand > img { width:28px; }.brand-name { font-size:24px; }
 .desktop-nav { display:none; }
 .hero-card,.title-hero { background-size:auto 300px; background-position:70% top; }
 .hero-card { display:block; min-height:0; }
 .hero-art { inset:0 0 auto; height:280px; object-position:70% center; }
 .hero-copy { padding:286px 20px 32px; max-width:none; }
 .hero-card::after,.title-hero::after { background:linear-gradient(0deg,var(--bg) 0%,var(--bg) calc(100% - 255px),transparent calc(100% - 310px)); }
 .hero .dots { top:218px; bottom:auto; left:20px; padding-right:8px; background:var(--bg); border-radius:10px; }
 .hero-rotation { margin-left:6px; }
 .hero-title { font-size:38px; }
 .hero-copy p { font-size:15px; }
 .title-hero { display:block; min-height:0; }
 .title-copy { max-width:none; padding:250px 20px 32px; }
 .title-copy .hero-title { font-size:36px; max-width:100%; }
 .title-copy p { font-size:15px; }
 .title-hero::after { background:linear-gradient(0deg,var(--bg) calc(100% - 220px),transparent calc(100% - 285px)); }
 .rows { padding-top:20px; padding-bottom:24px; }
 .track { grid-auto-columns:calc((100% - 18px)/2.5); }
 .collections .track { grid-auto-columns:calc((100% - 12px)/1.65); }
 .continue .track { grid-auto-columns:calc((100% - 12px)/1.45); }
 .caption { padding:12px 10px; min-height:94px; }.caption strong { font-size:13px; }.caption small { font-size:11px; }
 .collection-tile { aspect-ratio:16/11; }.collection-tile strong { font-size:13px; padding:12px 10px; }
 .page { padding:28px 20px 40px; }
 .page-heading { flex-wrap:wrap; align-items:flex-start; margin-bottom:24px; gap:16px; }
 .page h1 { font-size:34px; }
 .poster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
 .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
 .search-box { min-height:56px; padding:4px 12px; gap:12px; margin-bottom:28px; }
 .search-box input { font-size:16px; }.search-box > svg { width:20px; height:20px; }
 .episode-card { grid-template-columns:112px minmax(0,1fr); padding:10px; gap:12px; }
 .episode-card > .icon-btn { display:none; }
 .episode-copy h3 { font-size:14px; margin-bottom:6px; }.episode-duration { font-size:12px; }
 .login-page { padding:32px 20px; }.login-card { padding:28px 24px; }
 .login-card h1 { font-size:34px; }.login-card .brand-wordmark { width:180px; }
 .login-art { background-position:70% center; }
 .account-panel { position:fixed; top:auto; right:12px; bottom:90px; left:12px; width:auto; padding:20px; max-height:calc(100svh - 114px); overflow:auto; }
 .picker-panel { padding:20px; }.picker-heading { gap:12px; margin-bottom:20px; }.picker-heading h2 { font-size:18px; }
 .parent-backdrop { padding:12px; align-items:center; }
 dialog.parent-dialog { width:calc(100vw - 24px); max-height:calc(100svh - 24px); padding:20px; }
 .parent-preview-background { padding:32px 20px; }
 .parent-preview-background h1 { font-size:34px; }
 .dialog-actions .btn { flex:1 1 auto; }
 .timer-stepper { gap:14px; }.timer-stepper output { font-size:28px; }
 .times-up { padding:20px; }.times-up .times-up-panel { padding:32px 24px; }
 .times-up .times-up-panel h1,.times-up .times-up-panel h2 { font-size:32px; }
 .parents-unlock { padding:28px 20px; margin:4px auto; }
 .parents-head .page-heading { align-items:flex-start; }
 .toast-live { bottom:102px; max-width:calc(100% - 24px); }
 .toast { gap:10px; padding-left:12px; flex-wrap:wrap; }
 .toast-copy { flex:1 1 150px; }.toast .btn { margin-left:30px; }
 .toast-stack .toast .icon-btn { margin-left:auto; }
 .player-top { padding:16px 12px; gap:8px; }.player-title { font-size:14px; padding:8px!important; }
 .player-centre,.player-mid { gap:20px; }.player-control { width:52px; height:52px; }.player-control.main { width:72px; height:72px; }
 .player-bottom { padding:24px 16px max(20px,env(safe-area-inset-bottom)); gap:8px; grid-template-columns:auto 1fr; }
 .player-tools { justify-content:flex-end; gap:8px; }.player-volume { display:none; }
 .player-tools .btn { width:44px; padding:0; height:44px; }.player-tools .icon-btn { width:44px; height:44px; }
 .tool-label { display:none; }.player-time { font-size:12px; padding:8px; }
 .player-picker { right:12px; left:12px; width:auto; bottom:145px; max-height:calc(100svh - 185px); }
 .next-episode { right:16px; bottom:160px; }
 .player-status .empty-state { width:calc(100% - 32px); padding:28px 20px; }
 .catalog-shell,.package-shell { padding:32px 20px 48px; }.catalog-header h1,.package-header h1 { font-size:38px; }
 .package-wordmark { width:240px; margin-bottom:28px; }.package-grid { grid-template-columns:1fr; }
 .package-card-info { padding:20px; }.package-card h2 { font-size:22px; }
 .spec-section { margin-top:36px; padding-top:28px; }.spec-section > h2 { font-size:23px; }
 .state-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
 .state-sample { padding:8px 4px; }.state-sample .btn { --button-padding:12px; --button-font-size:13px; --button-gap:8px; }
 .state-grid-wide { grid-template-columns:1fr; }
 .catalog-shell .hero-card { min-height:0; }.catalog-shell .hero-copy { padding:286px 16px 28px; }.catalog-shell .hero-title { font-size:32px; }
 .catalog-shell .hero .dots { left:16px; }
 .component-player-frame { aspect-ratio:auto; min-height:360px; padding:16px; }
 .component-player-frame .player-preview-controls { gap:24px; }
 .component-player-frame .player-control { width:48px; height:48px; }.component-player-frame .player-control.main { width:60px; height:60px; }
 .component-dialog { padding:20px; }.parent-backdrop.is-static { padding:8px; }
 .topbar.is-static .desktop-nav { display:none; }.topbar.is-static { padding:12px; }
 .details-list { grid-template-columns:80px minmax(0,1fr); gap:16px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:color 0s,background-color 0s,border-color 0s!important; }
}

/* Lamplight addendum: parent settings, switches, textarea and tall flag dialog. */
.setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.setting-row > div { min-width:0; }
.setting-label { margin:0 0 8px; color:var(--text); font:600 16px/1.4 var(--ui); }
.setting-row .parent-note { font-size:14px; line-height:1.6; }
.settings-content { gap:0; }
.settings-content > .settings-intro { padding-bottom:8px; }
.settings-content > .inline-alert { margin-top:16px; }
.settings-save-status { color:var(--muted); font-size:13px; margin:16px 0 24px; min-height:21px; }
.settings-save-status.is-error { color:var(--error); }
.toggle-switch { display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; width:100px; min-width:88px; height:48px; min-height:44px; padding:0 2px; flex:none; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--text); font:600 13px/1 var(--ui); letter-spacing:0; }
.switch-label { display:block; min-width:24px; text-align:left; }
.switch-track { display:block; position:relative; flex:none; width:46px; height:26px; border:1px solid var(--line); border-radius:999px; background:var(--surface-raised); transition:background-color var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard); }
.switch-thumb { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text); transition:transform var(--duration-fast) var(--easing-standard),background-color var(--duration-fast) var(--easing-standard); }
.toggle-switch[aria-checked="true"] .switch-track { background:var(--accent); border-color:var(--accent); }
.toggle-switch[aria-checked="true"] .switch-thumb { transform:translateX(20px); background:var(--accent-text); }
.toggle-switch:is(:hover,.is-hover):not(:disabled) { background:var(--surface-raised); }
.toggle-switch:is(:active,.is-active):not(:disabled) { background:var(--bg); }
.toggle-switch[aria-checked="true"]:is(:hover,.is-hover):not(:disabled) .switch-track { background:var(--accent-hover); border-color:var(--accent-hover); }
.toggle-switch[aria-checked="true"]:is(:active,.is-active):not(:disabled) .switch-track { background:var(--accent-active); border-color:var(--accent-active); }
.toggle-switch:disabled { color:var(--disabled-text); cursor:default; opacity:1; }
.toggle-switch:disabled .switch-track { background:var(--disabled-bg); border-color:var(--line); }
.toggle-switch:disabled .switch-thumb { background:var(--disabled-text); }
.toggle-switch[aria-busy="true"] .switch-thumb { background:transparent; border:2px solid var(--disabled-text); border-right-color:transparent; animation:toggle-spin .85s linear infinite; }
@keyframes toggle-spin { to { rotate:360deg; } }
.settings-dialog .toggle-switch[aria-busy="true"] { cursor:progress; }
.field textarea { display:block; width:100%; min-width:0; min-height:120px; max-height:320px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font:400 16px/1.6 var(--ui); resize:vertical; overflow:auto; }
.field textarea::placeholder { color:var(--muted); }
.field textarea:is(:hover,.is-hover):not(:disabled) { border-color:var(--text); }
.field textarea:focus-visible,.field textarea.is-focus { outline:3px solid var(--focus); outline-offset:3px; box-shadow:0 0 0 8px var(--bg); }
.field textarea[aria-invalid="true"] { border-color:var(--error); }
.field textarea:disabled { color:var(--disabled-text); background:var(--disabled-bg); opacity:1; resize:none; }
.field textarea:is(:autofill,:-webkit-autofill) { -webkit-text-fill-color:var(--text); caret-color:var(--text); box-shadow:0 0 0 1000px var(--surface-raised) inset; }
.field-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.field-meta > small { min-width:0; line-height:1.5; }
.field-meta .field-counter { flex:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.optional { font-weight:400; color:var(--muted); }
.field label .optional { font-size:13px; }
.flag-fieldset { display:grid; min-width:0; padding:0; margin:0; gap:12px; border:0; }
.flag-fieldset .picker-section-label { padding:0; margin:0 0 8px; font-size:15px; font-weight:600; color:var(--text); }
.flag-fieldset .optional { margin-left:4px; font-size:13px; }
.flag-fieldset .chips { margin:0; }
.flag-fieldset > .btn { width:fit-content; max-width:100%; }
.concern-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.concern-chips .chip { justify-content:flex-start; min-width:44px; min-height:48px; padding:10px 12px; line-height:1.4; white-space:normal; text-align:left; }
.concern-chips .chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
.concern-chips .chip[aria-pressed="true"]::before { content:"✓"; display:block; flex:none; margin-right:8px; font-size:15px; font-weight:600; }
.concern-chips .chip:disabled { color:var(--disabled-text); background:var(--disabled-bg); border-color:var(--line); }
.flag-moments { display:grid; gap:16px; }
.flag-moment { display:flex; align-items:flex-end; gap:12px; min-width:0; }
.flag-moment .field { flex:1; min-width:0; }
.flag-moment .field input { font-variant-numeric:tabular-nums; }
.parent-form .flag-moment .btn { width:auto; }
.flag-moment .btn { flex:none; }
.flag-title-note { padding:16px; background:var(--bg); border-radius:10px; }
.flag-title-note strong { display:block; color:var(--text); font-weight:600; margin-top:4px; }
.flag-link { margin-top:24px; }
dialog.parent-dialog.flag-dialog { display:flex; flex-direction:column; padding:0; width:min(640px,calc(100vw - 48px)); max-width:none; max-height:calc(100svh - 48px); overflow:hidden; }
dialog.parent-dialog.flag-dialog:not([open]) { display:none; }
.flag-dialog > .picker-heading { padding:20px 24px; margin:0; border-bottom:1px solid var(--line); flex:none; }
.flag-dialog > .addendum-pin-form { padding:24px; overflow:auto; }
.flag-dialog .flag-form { display:flex; flex-direction:column; min-height:0; overflow:hidden; gap:0; }
.flag-dialog .flag-scroll-body { display:grid; gap:24px; overflow:auto; min-height:0; padding:24px; overscroll-behavior:contain; }
.flag-dialog .flag-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-top:1px solid var(--line); background:var(--surface); flex:none; }
.flag-footer .parent-note { max-width:32ch; font-size:12px; }
.flag-footer > .btn { width:auto; }
.flag-confirmation { padding:32px; text-align:center; }
.flag-confirmation h3 { font:400 30px/1.2 var(--display); font-synthesis:none; margin:24px 0 16px; }
.flag-confirmation p { color:var(--muted); }
.flag-confirmation .btn { margin-top:8px; }
.switch-specimen { padding:16px; border:1px solid var(--line); border-radius:12px; align-items:center; gap:12px; }
.switch-specimen .setting-label { font-size:14px; margin:0; }
.concern-specimen { max-width:560px; margin-top:24px; }
@media(max-width:680px) {
  .setting-row { gap:14px; padding-block:20px; }
  .setting-label { font-size:15px; }
  .setting-row .parent-note { font-size:13px; }
  .toggle-switch { width:88px; gap:6px; }
  .settings-dialog .picker-heading { margin-bottom:16px; }
  dialog.parent-dialog.flag-dialog { inset:auto 0 0; margin:0; width:100%; max-height:calc(100svh - 16px); border-radius:20px 20px 0 0; }
  .flag-dialog > .picker-heading { padding:16px 20px; }
  .flag-dialog > .addendum-pin-form { padding:20px; }
  .flag-dialog .flag-scroll-body { padding:20px; gap:24px; }
  .flag-dialog .flag-footer { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:16px 20px max(20px,env(safe-area-inset-bottom)); }
  .flag-footer .parent-note { max-width:none; font-size:12px; }
  .flag-footer > .btn { width:100%; }
  .concern-chips .chip { font-size:13px; padding:10px; }
  .flag-moment { gap:8px; }.flag-moment .btn { padding-inline:12px; font-size:14px; }
  .field-meta { gap:12px; }
  .field-meta > small { font-size:12px; }
  .flag-confirmation { padding:28px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .toggle-switch,.switch-track,.switch-thumb { transition:none!important; animation:none!important; }
}

/* Step2 addendum: family screens. Included in the one generated tokens.css. */
.icon-moon,.icon-flag { stroke-width:1.7; }
.account-expanded { width:360px; padding:20px; max-height:calc(100svh - 108px); overflow:auto; overscroll-behavior:contain; }
.account-expanded .picker-heading { align-items:flex-start; margin-bottom:12px; }
.account-expanded .picker-heading h2 { font-size:20px; }
.account-expanded .picker-heading p { margin:6px 0 0; }
.account-expanded .account-group { padding-top:14px; margin-top:14px; border-top:1px solid var(--line); }
.account-group h3 { font:600 11px/1.5 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 12px 8px; }
.account-group > .btn { margin:0!important; width:100%; justify-content:flex-start; gap:12px; padding-inline:12px; }
.account-group > .btn + .btn { margin-top:2px!important; }
.account-group.account-bedtime { border:0; margin-top:0; padding-top:0; }
.account-bedtime > .btn { justify-content:center; border-color:var(--line); }
.account-bedtime .parent-note { margin:8px 0 0; text-align:center; font-size:12px; }
.account-expanded .timer-line { margin:12px 0 16px; padding:12px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.account-expanded .account-signout { padding-top:8px; margin-top:8px; }
.account-expanded .btn:focus-visible { outline-offset:1px; box-shadow:0 0 0 5px var(--surface); }
.bedtime-toggle[aria-pressed="true"] { color:var(--accent-text); background:var(--accent); border-color:var(--accent); }
.title-details { padding-bottom:24px; }
.details-panel { max-width:850px; }
.flag-link { margin-top:24px; }
.similar-rows { margin-top:16px; padding-bottom:40px; }
.similar-rows:empty { display:none; }
.suggest-page { max-width:1440px; margin:auto; }
.suggest-page .page-heading { margin-bottom:32px; }
.suggest-page .page-heading p { max-width:65ch; }
.suggest-layout { display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); align-items:start; gap:clamp(32px,5vw,80px); }
.suggest-compose { padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.suggest-left { display:flex; align-items:center; color:var(--accent); font-weight:600; font-size:15px; margin:0 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.suggest-form { gap:24px; }
.suggest-form .flag-fieldset { display:block; }
.suggest-form .picker-section-label { margin:0 0 10px; padding:0; font-size:14px; color:var(--text); }
.suggest-form .chips { margin:0; }
.suggest-form .chip { min-width:80px; justify-content:center; }
.suggest-form .inline-alert { background:var(--bg); border-radius:6px; }
.optional { color:var(--muted); font-weight:400; }
.field-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.field-meta small:first-child { flex:1; }
.field-meta small:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.section-heading h2 { font:600 21px/1.3 var(--ui); }
.section-heading > span { font-size:12px; }
.suggest-history { padding-top:6px; }
.suggest-list { list-style:none; padding:0; margin:20px 0; display:grid; gap:0; }
.suggest-list li { padding:20px 0; display:grid; gap:10px; background:transparent; border-bottom:1px solid var(--line); border-radius:0; }
.suggest-list li:first-child { border-top:1px solid var(--line); }
.suggest-list strong { font-size:16px; font-weight:600; }
.suggest-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.suggest-status.is-added { color:var(--success); }
.suggest-status svg { width:16px; height:16px; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.suggest-note { font-size:13px; margin-top:20px; max-width:42ch; }
.suggest-history-empty { padding:36px 24px; margin-top:20px; border:1px dashed var(--line); border-radius:12px; }
.suggest-history-empty > svg { width:28px; height:28px; color:var(--accent); margin-bottom:20px; }
.suggest-history-empty h3 { font-size:18px; margin-bottom:10px; }
.suggest-history-empty p { color:var(--muted); font-size:14px; margin:0; max-width:35ch; }
.suggest-limit { padding:12px 0 4px; text-align:center; }
.suggest-limit h2 { font:400 30px/1.2 var(--display); margin:24px 0 16px; }
.suggest-limit p { color:var(--muted); margin:0; }
.skeleton-field { height:72px; margin-top:24px; }
.skeleton-block { padding:24px; border:1px solid var(--line); border-radius:16px; }
.autoplay-card { position:absolute; right:32px; bottom:190px; z-index:5; width:min(384px,calc(100% - 40px)); padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--bg); color:var(--text); box-shadow:var(--shadow-panel); }
.autoplay-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.autoplay-card .eyebrow { margin:0 0 10px; font-size:11px; }
.autoplay-card .autoplay-count { margin:0; font:400 26px/1.25 var(--display); font-synthesis:none; }
.autoplay-symbol { display:grid; place-items:center; width:44px; height:44px; color:var(--accent); background:var(--surface); border:1px solid var(--line); border-radius:50%; flex:none; }
.autoplay-symbol svg { width:20px; height:20px; }
.autoplay-name { color:var(--muted); font-size:14px; line-height:1.5; margin:12px 0 20px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.autoplay-actions { display:flex; align-items:center; gap:12px; }
.autoplay-actions .btn { flex:1; min-width:0; }
.autoplay-frame { min-height:340px; display:grid; place-items:center; padding:24px; border:1px solid var(--line); border-radius:16px; }
.autoplay-frame.is-bright { background:#F4EBDD; }
.autoplay-frame.is-dark { background:#030606; }
.autoplay-card.is-static { position:relative; inset:auto; width:100%; max-width:384px; margin:0; }
.player-scene.frame-bright { background:#F4EBDD; }.player-scene.frame-bright img { opacity:.18; }
.player-scene.frame-dark { background:#000; }.player-scene.frame-dark img { opacity:.18; }
.autoplay-cancelled { position:absolute; top:110px; left:50%; transform:translateX(-50%); border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:14px 20px; font-size:14px; }
/* One overlay per display context. Native dialog/fullscreen replace the root overlay. */
html[data-bedtime="on"] { --line:var(--bedtime-line); }
html[data-bedtime="on"]::after,
html[data-bedtime="on"] .player-page:fullscreen::after,
html[data-bedtime="on"] dialog[open]::after {
 content:""; position:fixed; inset:0; z-index:var(--z-bedtime); pointer-events:none;
 background:var(--bedtime-filter); mix-blend-mode:multiply;
}
html[data-bedtime="on"]:has(:fullscreen)::after,
html[data-bedtime="on"]:has(dialog[open])::after,
html[data-bedtime="on"]:has(dialog[open]) .player-page:fullscreen::after { content:none; }
html[data-bedtime="on"] .player-page:fullscreen::after { position:absolute; }
/* Native top-layer dialogs isolate blending. Clip to their panel; the modal
   backdrop dims the surrounding page without a second warming layer. */
html[data-bedtime="on"] dialog[open]::after { position:absolute; inset:0; border-radius:inherit; clip-path:inset(0 round 20px); }
@media (max-width:860px) {
 .suggest-layout { grid-template-columns:1fr; gap:36px; }
 .suggest-history { padding-top:0; }
}
@media (max-width:680px) {
 .account-expanded { width:auto; inset:auto 12px 90px; max-height:calc(100svh - 110px); padding:16px; }
 .account-expanded .picker-heading { margin-bottom:8px; }
 .account-group > .btn { min-height:44px; height:44px; }
 .account-expanded .account-group { padding-top:10px; margin-top:10px; }
 .account-group h3 { font-size:10px; margin-bottom:6px; }
 .account-expanded .account-bedtime { padding-top:0; margin-top:0; }
 .account-bedtime .parent-note { margin-top:6px; }
 .suggest-page .page-heading h1 { max-width:12ch; }
 .suggest-compose { padding:24px 20px; }
 .suggest-left { font-size:14px; line-height:1.5; margin-bottom:24px; }
 .suggest-form { gap:24px; }
 .field-meta { gap:10px; }.field-meta small { font-size:12px; }
 .section-heading h2 { font-size:20px; }
 .autoplay-card { bottom:170px; right:16px; width:calc(100% - 32px); padding:20px; }
 .autoplay-card .autoplay-count { font-size:24px; }
 .autoplay-actions { gap:10px; }
 .autoplay-actions .btn { padding-inline:14px; }
 .autoplay-frame { padding:12px; min-height:300px; }
 .autoplay-card.is-static { width:100%; }
 .autoplay-symbol { width:40px; height:40px; }
 .player-tools .btn { height:44px; width:44px; padding:0; }
 .player-tools { gap:8px; }
 .player-bottom { grid-template-columns:auto 1fr; }
}
@media (max-width:680px) and (max-height:650px) {
 .autoplay-card { bottom:140px; padding:16px; }
 .autoplay-card .eyebrow { display:none; }
 .autoplay-card .autoplay-count { font-size:22px; }
 .autoplay-name { margin:8px 0 14px; }
}
@media (prefers-reduced-motion:reduce) {
 .autoplay-card::before,.autoplay-card::after { animation:none; }
}

/* Lamplight admin. Existing admin-* class meanings retained; laptop reference. */
.admin-topbar { gap:var(--space-4); }
.admin-topbar .brand-wordmark { width:208px; }
.admin-badge { padding:4px 10px; border:1px solid var(--line); color:var(--accent); border-radius:6px; font-size:12px; font-weight:600; letter-spacing:.04em; line-height:1.4; }
.admin-user { margin-left:auto; font-size:14px; }
.admin-page { max-width:1440px; margin:auto; padding:36px var(--gutter) 64px; }
.admin-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:28px; }
.admin-page-heading .eyebrow { margin-bottom:12px; }
.admin-page-heading h1 { font:400 38px/1.15 var(--display); font-synthesis:none; margin:0 0 12px; }
.admin-page-heading > div > p:last-child { margin:0; color:var(--muted); font-size:15px; }
.admin-preview-note { flex:none; margin:0; padding-left:16px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.6; }
.admin-page > .tabs { padding-inline:0; gap:12px; }
.admin-tabs .tab { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.admin-tabs .tab[aria-current="page"] { color:var(--text); border-bottom-color:var(--accent); }
.admin-panel { padding:28px 0 0; }
.admin-section-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:0 0 20px; }
.admin-section-heading h2 { margin:0; font:600 18px/1.4 var(--ui); }
.admin-section-heading p { margin:0; font-size:13px; }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.admin-stat,.admin-add,.admin-password,.admin-flag { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; min-width:0; }
.admin-stat { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.admin-stat-attention { border-top:3px solid var(--accent); padding-top:22px; }
.admin-stat-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.admin-stat-heading h2 { font:600 18px/1.4 var(--ui); margin:0; }
.admin-stat-heading > svg { width:20px; height:20px; color:var(--muted); }
.admin-stat p { margin:0; font-size:14px; }
.admin-stat-figures { display:flex; align-items:center; gap:48px; padding:8px 0; }
.admin-stat-figures p,.admin-stat-number { display:flex; align-items:baseline; gap:12px; }
.admin-stat-figures p { flex-direction:column; gap:6px; }
.admin-stat-figures strong,.admin-stat-number strong { font:400 46px/1.05 var(--display); font-synthesis:none; }
.admin-stat-figures span,.admin-stat-number span { color:var(--muted); font-size:14px; }
.admin-stat > .admin-actions { margin-top:auto; padding-top:8px; }
.admin-stat > [data-storage-known] { width:100%; }
.admin-stat-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--accent); font-size:14px; font-weight:600; margin-top:auto; }
.admin-stat-link svg { width:18px; height:18px; }
.admin-server-list { display:grid; gap:12px; width:100%; margin:2px 0; font-size:14px; }
.admin-server-list > div { display:flex; justify-content:space-between; gap:20px; }
.admin-server-list dt { color:var(--muted); }.admin-server-list dd { margin:0; }
.admin-meter { position:relative; display:block; width:100%; height:8px; border-radius:4px; background:var(--line); overflow:hidden; margin:16px 0 12px; }
.admin-meter i { position:absolute; inset:0 auto 0 0; width:var(--progress); background:var(--accent); }
.admin-meter.is-warning i { background:var(--error); }
.admin-storage-note { font-size:13px!important; color:var(--muted); }
.admin-storage-note.is-warning { color:var(--error); }
.admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.admin-actions .btn { height:44px; min-height:44px; padding-inline:14px; font-size:13px; }
.admin-add { margin-bottom:24px; }
.admin-add-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:20px; align-items:start; }
.admin-add-fields > .btn { height:48px; margin-top:30px; min-width:140px; }
.admin-add-fields .field { margin:0; }
.admin-add .inline-alert { margin-bottom:20px; }
.admin-password { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; border-color:var(--accent); margin-bottom:24px; }
.admin-password-title { margin:0 0 10px; font-size:15px; }
.admin-password code { display:block; width:fit-content; padding:10px 14px; margin:0 0 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; font:500 20px/1.4 var(--ui); letter-spacing:.04em; color:var(--accent); user-select:all; }
.admin-password .muted { font-size:13px; margin:0; }
.admin-password-sample { flex-basis:100%; font-size:12px; color:var(--muted); margin:0; }
.admin-table-wrap { width:100%; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.admin-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; background:var(--surface); }
.admin-table th,.admin-table td { text-align:left; vertical-align:top; padding:16px 12px; border-bottom:1px solid var(--line); overflow-wrap:break-word; }
.admin-table th { font-weight:600; }
.admin-table thead th { color:var(--muted); font-weight:500; font-size:12px; background:var(--bg); padding-block:14px; }
.admin-table tbody tr:last-child > * { border-bottom:0; }
.admin-table tbody tr:hover > * { background-color:color-mix(in srgb,var(--surface-raised) 40%,var(--surface)); }
.admin-account-name { display:block; line-height:1.5; }.admin-account-username { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:400; }
.admin-status { display:inline-flex; align-items:center; gap:6px; padding:3px 7px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font-size:12px; font-weight:500; line-height:1.5; white-space:nowrap; }
.admin-status-success { color:var(--success); }.admin-status-attention { color:var(--accent); }
.admin-status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.admin-accounts-table th:nth-child(1) { width:15%; }.admin-accounts-table th:nth-child(2) { width:12%; }.admin-accounts-table th:nth-child(3) { width:10%; }.admin-accounts-table th:nth-child(4) { width:13%; }.admin-accounts-table th:nth-child(5) { width:7%; }.admin-accounts-table th:nth-child(6) { width:43%; }
.admin-accounts-table .admin-actions .btn { font-size:12px; padding-inline:12px; }
.admin-inline-confirm { border-left:3px solid var(--error); padding:0 0 0 14px; }
.admin-inline-confirm p { margin:0 0 12px; line-height:1.6; font-size:13px; }
.admin-danger,.btn.admin-danger { background:var(--error); border-color:var(--error); color:var(--bg); }
.admin-danger:hover { background:var(--text); border-color:var(--text); }
.admin-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.admin-toolbar .chips { margin:0; }.admin-toolbar > p { margin:0; font-size:13px; text-align:right; }
.admin-toolbar > p > small { display:block; margin-top:4px; font-size:12px; }
.admin-library-table th:nth-child(1) { width:26%; }.admin-library-table th:nth-child(2) { width:13%; }.admin-library-table th:nth-child(3) { width:7%; }.admin-library-table th:nth-child(4) { width:13%; }.admin-library-table th:nth-child(5) { width:9%; }.admin-library-table th:nth-child(6),.admin-library-table th:nth-child(7) { width:10%; }.admin-library-table th:nth-child(8) { width:12%; }
.admin-library-table td,.admin-library-table th { vertical-align:middle; }
.admin-title-cell { display:flex; align-items:center; gap:12px; line-height:1.5; }
.admin-title-cell img { flex:none; width:38px; height:57px; border:1px solid var(--line); border-radius:4px; object-fit:cover; }
.admin-title-cell span { min-width:0; }.admin-title-cell small { display:block; color:var(--muted); font-weight:400; font-size:12px; margin-top:4px; }
.admin-switch.toggle-switch { width:60px; min-width:60px; height:44px; min-height:44px; padding:0; justify-content:center; }
.admin-switch .switch-track { flex:none; }
.admin-table select { height:44px; min-height:44px; width:100%; max-width:100%; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:500 13px/1.4 var(--ui); padding:0 30px 0 12px; }
.admin-table select:disabled { color:var(--disabled-text); background:var(--disabled-bg); opacity:1; }
.admin-editor-row td { padding:24px!important; background:var(--bg)!important; }
.admin-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 28px; background:transparent; padding:0; border:0; border-radius:0; }
.admin-editor-heading,.admin-editor > .inline-alert,.admin-editor > .admin-actions { grid-column:1/-1; }
.admin-editor-heading h3 { font:600 18px/1.4 var(--ui); margin:0 0 6px; }.admin-editor-heading p { margin:0; font-size:13px; }
.admin-editor > .field:first-of-type { grid-row:span 2; }
.admin-editor textarea { min-height:168px; }
.admin-editor .flag-fieldset { min-width:0; border:0; padding:0; margin:0; }
.admin-editor .picker-section-label { margin:0 0 10px; font-size:14px; color:var(--text); font-weight:600; }
.admin-editor .chips { margin:0; gap:8px; }.admin-editor .chip { min-height:44px; font-size:12px; padding-inline:10px; }
.admin-editor > .admin-actions { padding-top:4px; }
.admin-suggestions-table th:nth-child(1) { width:24%; }.admin-suggestions-table th:nth-child(2) { width:15%; }.admin-suggestions-table th:nth-child(3) { width:13%; }.admin-suggestions-table th:nth-child(4) { width:25%; }.admin-suggestions-table th:nth-child(5) { width:23%; }
.admin-save-status { display:block; margin-top:8px; min-height:18px; font-size:12px; color:var(--muted); }
.admin-flags { display:grid; gap:24px; }
.admin-flags-note { margin:0; max-width:86ch; color:var(--muted); font-size:13px; }
.admin-flag { display:grid; gap:20px; }
.admin-flag.reviewed { opacity:1; border-left:3px solid var(--success); padding-left:22px; }
.admin-flag-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 8px; }
.admin-flag h3 { font:600 20px/1.4 var(--ui); margin:0; }
.admin-flag header p { margin:0; font-size:13px; }.admin-flag .chips { margin:0; }
.admin-flag-note { margin:0; padding:14px 18px; border-left:2px solid var(--line); background:var(--bg); font:400 15px/1.65 var(--ui); color:var(--text); }
.admin-moments { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; }
.admin-moments > span { font-size:13px; margin-right:4px; }
.admin-moments a { display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--accent); background:var(--bg); font-size:13px; font-weight:600; }
.admin-moments svg { width:16px; height:16px; }
.admin-moments a:hover { background:var(--surface-raised); }
.admin-load-error { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.admin-empty { padding:56px 24px; border:1px dashed var(--line); border-radius:12px; background:var(--surface); text-align:center; }
.admin-empty h2 { font:400 30px/1.2 var(--display); font-synthesis:none; margin:0 0 16px; }.admin-empty p { max-width:58ch; color:var(--muted); margin:0 auto; font-size:14px; }
.admin-loading { padding:24px; border:1px solid var(--line); border-radius:12px; }
.admin-loading > .skeleton-line { max-width:450px; }.admin-loading > .skeleton-line.short { max-width:300px; }
.admin-loading-row { height:72px; margin-top:20px; }
.admin-preview-message { position:fixed; z-index:var(--z-toast); right:24px; bottom:24px; max-width:min(460px,calc(100vw - 48px)); margin:0; padding:0; color:var(--text); background:var(--surface-raised); border-radius:12px; box-shadow:var(--shadow-panel); font-size:14px; }
.admin-preview-message:not(:empty) { padding:16px 20px; border:1px solid var(--line); border-left:3px solid var(--success); }
.admin-login-page .login-card { width:448px; }
.admin-login-page form { margin-top:24px; }.admin-login-page .inline-alert { margin-bottom:20px; }
@media (min-width:900px) and (max-width:1150px) {
 .admin-page { padding-inline:28px; }.admin-topbar { padding-inline:28px; }
 .admin-stat,.admin-add,.admin-password,.admin-flag { padding:20px; }
 .admin-stats { gap:20px; }.admin-stat-heading h2 { font-size:17px; }
 .admin-table th,.admin-table td { padding:14px 10px; font-size:12px; }
 .admin-library-table th:nth-child(1) { width:25%; }.admin-library-table th:nth-child(2) { width:12%; }.admin-library-table th:nth-child(3) { width:7%; }.admin-library-table th:nth-child(4) { width:13%; }.admin-library-table th:nth-child(5) { width:9%; }.admin-library-table th:nth-child(6),.admin-library-table th:nth-child(7) { width:11%; }.admin-library-table th:nth-child(8) { width:12%; }
 .admin-title-cell { gap:8px; }.admin-title-cell img { width:32px; height:48px; }
 .admin-library-table .btn { font-size:12px; padding-inline:12px; }
 .admin-accounts-table .admin-actions { gap:8px; }.admin-accounts-table .admin-actions .btn { padding-inline:10px; }
 .admin-editor { gap:20px; }.admin-editor .chip { padding-inline:9px; }
 .admin-table select { padding-left:10px; font-size:12px; }
}
@media (max-width:899px) {
 .admin-topbar { flex-wrap:wrap; height:auto; min-height:88px; padding-block:16px; }
 .admin-user { display:none; }.admin-topbar > .btn { margin-left:auto; }
 .admin-page-heading { flex-wrap:wrap; }.admin-preview-note { display:none; }
 .admin-page > .tabs { overflow-x:auto; flex-wrap:nowrap; }.admin-tabs .tab { flex:none; }
 .admin-stats { grid-template-columns:1fr; }.admin-add-fields { grid-template-columns:1fr; }.admin-add-fields > .btn { margin-top:0; }
 .admin-table { min-width:880px; }.admin-editor { grid-template-columns:1fr; }.admin-editor > * { grid-column:1!important; }
 .admin-flag-heading { flex-wrap:wrap; gap:12px; }
}

/* Selected identity + title-specific media. Existing class meanings remain. */
.hero.hero-media .hero-card { background:var(--bg); min-height:540px; overflow:hidden; isolation:isolate; }
.hero-media .media-backdrop { z-index:-2; object-position:50% 35%; }
.hero-media .hero-card::after { z-index:-1; background:linear-gradient(90deg,rgba(17,31,36,.98) 0%,rgba(17,31,36,.94) 53%,rgba(17,31,36,.30) 78%,rgba(17,31,36,.25)),linear-gradient(0deg,var(--bg),transparent 30%); }
.hero-media .hero-copy { width:55%; max-width:750px; padding:66px var(--gutter) 90px; }
.hero-media .hero-title { max-width:16ch; margin-bottom:20px; font-size:clamp(36px,4.2vw,62px); }
.hero-media .hero-metadata { color:var(--muted); font-size:14px; margin:0 0 18px; }
.hero-media .hero-synopsis { color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:16px; line-height:1.65; }
.hero-media .hero-synopsis[hidden] { display:none; }
.hero-media .hero-title-logo { width:min(100%,340px); max-height:160px; object-fit:contain; object-position:left center; margin-bottom:24px; }
.hero-media .hero-title-logo.is-dark-logo { background:var(--text); border-radius:8px; padding:14px 18px; }
.hero-media .hero-title-logo[hidden] { display:none; }
.hero-poster-accent { position:absolute; z-index:0; width:clamp(170px,16vw,236px); max-height:360px; object-fit:contain; right:10%; top:50%; transform:translateY(-50%); border-radius:10px; box-shadow:0 16px 48px #0008; border:1px solid #f4ebdd44; }
.hero-media[data-art-kind="cover"] .media-backdrop { object-fit:contain; object-position:82% center; padding:36px; }
.hero-media[data-art-kind="cover"] .hero-poster-accent,.hero-media[data-art-kind="brand"] .hero-poster-accent { display:none; }
.hero-media .dots { background:var(--bg); border-radius:10px; padding-right:8px; }
.login-art.login-art-posters { overflow:hidden; background:var(--bg); }
.login-poster-wall { position:absolute; width:125%; left:-12%; top:-24%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; transform:rotate(-9deg); }
.login-poster-wall img { display:block; width:100%; aspect-ratio:2/3; height:auto; object-fit:cover; object-position:50% 30%; border-radius:10px; }
.login-art-posters::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,31,36,.75),rgba(17,31,36,.62) 50%,rgba(17,31,36,.75)); }
.login-page:has(.login-art-posters) .login-card { background:var(--bg); box-shadow:0 30px 100px #000b; }
.empty-library-art { display:flex; justify-content:center; align-items:center; min-height:140px; margin:0 0 26px; isolation:isolate; }
.empty-library-art img { width:72px; height:108px; object-fit:cover; border-radius:8px; border:1px solid var(--line); box-shadow:0 12px 26px #0005; }
.empty-library-art img:first-child { transform:rotate(-10deg) translate(12px,5px); }.empty-library-art img:nth-child(2){z-index:1}.empty-library-art img:last-child{transform:rotate(10deg) translate(-12px,5px)}
.player-status.player-status-art { isolation:isolate; background:var(--bg); overflow:hidden; padding:28px; }
.player-wait-art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }
.player-status-art::before { content:""; position:absolute; z-index:-1; inset:0; background:rgba(17,31,36,.76); }
.player-wait-card { width:min(430px,100%); padding:32px; background:var(--bg); border:1px solid var(--line); border-radius:18px; text-align:center; box-shadow:var(--shadow-panel); }
.player-wait-card>.spinner { display:block; position:static; width:32px; height:32px; margin:0 auto 24px; }
.player-wait-card h2 { font:400 28px/1.2 var(--display); font-synthesis:none; margin:0 0 16px; }
.player-wait-card p { font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
.casting-cover { display:block; width:100px; height:150px; object-fit:cover; margin:0 auto 28px; border-radius:8px; border:1px solid var(--line); }
.casting-card .eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:18px; }
.casting-card>.btn { margin-top:26px; width:100%; }
.artwork-source-proof,.artwork-cover-proof,.artwork-brand-proof { height:260px; position:relative; overflow:hidden; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.artwork-source-proof>img:first-child { width:100%; height:100%; object-fit:cover; }
.artwork-source-proof .source-cover { position:absolute; right:18px; bottom:18px; width:95px; height:143px; object-fit:contain; border-radius:6px; box-shadow:0 6px 20px #0008; }
.artwork-cover-proof { display:grid; place-items:center; padding:16px; }.artwork-cover-proof img { height:100%; max-height:226px; width:auto; object-fit:contain; }
.artwork-brand-proof img { width:100%; height:100%; object-fit:cover; }.artwork-brand-proof strong { position:absolute; bottom:18px; left:18px; padding:10px 14px; border-radius:8px; background:var(--bg); color:var(--text); }
.copy-absence-proof { padding:30px; border:1px solid var(--line); border-radius:12px; background:var(--bg); min-height:260px; }.copy-absence-proof h3 { font:400 42px/1.2 var(--display); font-synthesis:none; margin-bottom:20px; }.copy-absence-proof p { margin-bottom:24px; }
@media(max-width:900px) {
 .hero.hero-media .hero-card { display:block; min-height:0; }
 .hero-media .media-backdrop { inset:0 0 auto; height:280px; object-position:center; }
 .hero-media .hero-card::after { background:linear-gradient(0deg,var(--bg) 0%,var(--bg) calc(100% - 240px),rgba(17,31,36,.15) calc(100% - 290px)); }
 .hero-media .hero-copy { width:100%; max-width:none; padding:300px var(--gutter) 40px; background:transparent; }
 .hero-media .hero-title { font-size:38px; max-width:22ch; }
 .hero-media .hero-title-logo { max-width:290px; max-height:110px; }
 .hero-poster-accent { width:120px; height:180px; top:26px; right:26px; transform:none; }
 .hero-media .dots { top:220px; left:var(--gutter); bottom:auto; }
 .hero-media[data-art-kind="cover"] .media-backdrop { object-position:center; padding:18px; height:260px; }
 .hero-media .hero-synopsis { font-size:15px; -webkit-line-clamp:3; max-width:60ch; }
}
@media(max-width:680px) {
 .hero-media .hero-copy { padding:292px 20px 32px; }.hero-media .hero-title { font-size:38px; }.hero-media .hero-metadata { font-size:13px; margin-bottom:16px; }
 .hero-media .hero-actions { margin-top:22px; }.hero-media .dots { left:20px; }
 .login-poster-wall { width:155%; left:-26%; top:-10%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 .login-art-posters::after { background:rgba(17,31,36,.7); }
 .player-status.player-status-art { padding:20px; }.player-wait-card { padding:28px 24px; }.player-wait-card h2 { font-size:26px; }.casting-cover { width:88px; height:132px; margin-bottom:22px; }
}
@media(prefers-reduced-motion:reduce) { .login-poster-wall,.hero-poster-accent { transition:none; animation:none; } }

/* Title and episode artwork. Concatenate after the shared media rules. */
.title-hero.title-artwork { background:var(--bg); min-height:560px; overflow:hidden; isolation:isolate; }
.title-artwork .title-backdrop { inset:0 0 0 auto; width:76%; height:100%; object-fit:cover; object-position:center 35%; z-index:-2; }
.title-artwork[data-art-source="cover"] .title-backdrop { object-fit:contain; object-position:right center; }
.title-hero.title-artwork::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,var(--bg) 0%,rgba(17,31,36,.98) 24%,rgba(17,31,36,.94) 53%,rgba(17,31,36,.24) 79%,rgba(17,31,36,.12) 100%),linear-gradient(0deg,var(--bg),transparent 30%); }
.title-artwork .title-copy { max-width:min(760px,58%); padding:64px var(--gutter) 66px; }
.title-artwork .title-wording { margin-bottom:24px; }
.title-artwork .hero-title { max-width:18ch; margin-bottom:0; font:400 clamp(36px,4.2vw,60px)/1.06 var(--display); font-synthesis:none; }
.title-artwork .title-logo { width:auto; max-width:min(340px,100%); height:auto; max-height:130px; object-fit:contain; object-position:left center; }
.title-artwork .title-logo.is-dark-logo { background:var(--text); border-radius:8px; padding:14px 18px; }
.title-artwork .title-copy .chips { margin-top:0; }
.title-artwork .title-short-synopsis { color:var(--muted); max-width:49ch; font-size:16px; margin:24px 0 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.title-artwork .title-cover-accent { position:absolute; right:var(--gutter); bottom:48px; width:152px; height:228px; object-fit:contain; background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 42px #0007; z-index:0; }
.title-details .title-full-synopsis { max-width:70ch; color:var(--muted); font-size:16px; line-height:1.7; margin:20px 0 28px; }
.title-details .tmdb-notice { max-width:72ch; font-size:12px; line-height:1.6; color:var(--muted); margin:28px 0 0; }
.episode-card.episode-card-detailed { position:relative; grid-template-columns:220px minmax(0,1fr) 48px; gap:6px 24px; align-items:start; padding:16px; }
.episode-card-detailed > .episode-image { grid-column:1; grid-row:1 / 3; display:block; border-radius:8px; min-width:44px; min-height:44px; }
.episode-card-detailed .episode-copy { grid-column:2; grid-row:1; padding:0; }
.episode-card-detailed .episode-copy h3 { margin:0; font:600 17px/1.4 var(--ui); }
.episode-card-detailed .episode-copy h3 a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px 0 0; min-width:44px; }
.episode-card-detailed .episode-duration { display:block; margin:0 0 4px; font-size:13px; color:var(--muted); }
.episode-card-detailed .episode-duration.watched { color:var(--success); }
.episode-card-detailed .episode-play { grid-column:3; grid-row:1 / 3; align-self:center; }
.episode-card-detailed .episode-summary { grid-column:2; grid-row:2; min-width:0; }
.episode-card-detailed .episode-synopsis { font:400 14px/1.6 var(--ui); color:var(--muted); margin:6px 0 0; max-width:80ch; }
.episode-card-detailed .episode-synopsis.is-clamped { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.episode-card-detailed .episode-readmore { min-height:44px; height:auto; padding:8px 0; font-size:13px; color:var(--text); margin:2px 0 0; background:transparent; justify-content:flex-start; }
.episode-card-detailed .episode-readmore:hover { color:var(--accent); background:transparent; }
.episode-card-detailed .episode-still { object-fit:cover; object-position:center; }
.title-text-specimen { padding:24px; background:var(--bg); border-radius:12px; }
.title-text-specimen h3 { font:400 34px/1.14 var(--display); font-synthesis:none; margin:0 0 20px; }
.title-text-specimen p { color:var(--muted); font-size:14px; }
.missing-title-specimen { display:grid; gap:20px; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.missing-title-specimen img { width:100%; height:150px; object-fit:cover; border-radius:8px; }
.missing-title-specimen h3 { margin:0 0 10px; font-size:18px; }.missing-title-specimen p { font-size:14px; color:var(--muted); }
.episode-type-specimen { margin:32px 0; }
.catalog-shell .episode-type-specimen .episode-card-detailed { grid-template-columns:180px minmax(0,1fr); }
@media(max-width:1100px) and (min-width:681px) {
 .title-artwork .title-copy { max-width:70%; padding-right:28px; }
 .title-hero.title-artwork::after { background:linear-gradient(90deg,var(--bg) 0%,rgba(17,31,36,.98) 28%,rgba(17,31,36,.94) 68%,rgba(17,31,36,.3) 100%),linear-gradient(0deg,var(--bg),transparent 30%); }
 .title-artwork .title-cover-accent { width:120px; height:180px; bottom:56px; }
}
@media(max-width:680px) {
 .title-hero.title-artwork { display:block; min-height:0; }
 .title-artwork .title-backdrop { inset:0 0 auto; width:100%; height:250px; object-position:center 35%; }
 .title-artwork[data-art-source="cover"] .title-backdrop { object-position:center; }
 .title-hero.title-artwork::after { background:linear-gradient(180deg,rgba(17,31,36,.06) 0px,rgba(17,31,36,.06) 180px,var(--bg) 238px,var(--bg) 100%); }
 .title-artwork .title-copy { padding:252px 20px 32px; max-width:none; }
 .title-artwork .title-wording { margin-bottom:20px; }
 .title-artwork .hero-title { font-size:36px; max-width:100%; }
 .title-artwork .title-logo { max-width:280px; max-height:100px; }
 .title-artwork .title-cover-accent { right:20px; top:110px; bottom:auto; width:76px; height:114px; border-radius:6px; }
 .title-artwork .title-short-synopsis { font-size:15px; margin-top:22px; -webkit-line-clamp:3; }
 .title-details .title-full-synopsis { font-size:15px; margin-top:18px; }
 .episode-card.episode-card-detailed { grid-template-columns:112px minmax(0,1fr); gap:8px 14px; padding:12px; }
 .episode-card-detailed > .episode-image { grid-row:1; align-self:center; }
 .episode-card-detailed .episode-copy { grid-column:2; grid-row:1; }
 .episode-card-detailed .episode-copy h3 { font-size:14px; line-height:1.4; }
 .episode-card-detailed .episode-copy h3 a { min-height:44px; }
 .episode-card-detailed .episode-duration { font-size:12px; margin-top:2px; }
 .episode-card-detailed .episode-play { display:none; }
 .episode-card-detailed .episode-summary { grid-column:1 / -1; grid-row:2; }
 .episode-card-detailed .episode-synopsis { font-size:13px; line-height:1.6; margin-top:4px; }
 .episode-card-detailed .episode-readmore { margin-top:2px; }
 .catalog-shell .episode-type-specimen .episode-card-detailed { grid-template-columns:112px minmax(0,1fr); }
}

/* Unselected poster-collection proposal. Does not change illustrated tiles. */
.collection-poster-tile { aspect-ratio:auto; display:grid; grid-template-rows:auto auto; background:var(--bg); border:1px solid var(--line); border-radius:var(--card-radius); color:var(--text); }
.collection-poster-art { display:block; position:relative; aspect-ratio:2/1; overflow:hidden; isolation:isolate; background:var(--surface); }
.collection-poster-atmosphere { position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; filter:blur(12px) brightness(.42) saturate(.7); transform:scale(1.05); opacity:.75; }
.collection-poster-art::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,#111f2400 45%,#111f2466); }
.collection-poster-fan { position:absolute; inset:0; z-index:1; display:block; }
.collection-poster-slip { position:absolute; top:12%; left:50%; height:88%; width:auto; max-width:none; aspect-ratio:2/3; object-fit:cover; object-position:50% 35%; border:1px solid #f4ebdd66; border-radius:5px; box-shadow:0 10px 24px #0008; transform:translateX(-50%); }
.collection-poster-slip:first-child { left:29%; transform:translateX(-50%) rotate(-12deg); z-index:1; }
.collection-poster-slip:nth-child(2) { left:50%; top:7%; z-index:3; transform:translateX(-50%) rotate(0); }
.collection-poster-slip:nth-child(3) { left:71%; transform:translateX(-50%) rotate(12deg); z-index:2; }
.collection-poster-fan[data-count="2"] .collection-poster-slip:first-child { left:39%; top:10%; transform:translateX(-50%) rotate(-9deg); }
.collection-poster-fan[data-count="2"] .collection-poster-slip:nth-child(2) { left:62%; top:10%; transform:translateX(-50%) rotate(9deg); }
.collection-poster-fan[data-count="1"] .collection-poster-slip:first-child { left:50%; height:94%; top:6%; transform:translateX(-50%) rotate(-5deg); }
.collection-poster-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--bg); border-top:1px solid var(--line); min-height:52px; }
.collection-poster-tile .collection-poster-caption strong { padding:0; font:600 15px/1.4 var(--ui); }
.collection-poster-caption>span { color:var(--accent); font-size:21px; line-height:1; }
.collection-art-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; padding:20px; color:var(--muted); background:var(--surface); font-size:13px; line-height:1.4; text-align:center; }
.collection-art-empty>img { width:56px; height:56px; object-fit:contain; }
.collection-runtime-empty { position:absolute; inset:0; z-index:4; }
.collection-poster-skeleton { display:block; height:100%; width:100%; border-radius:0; }
.collection-poster-tile.is-loading { box-shadow:none; }
.collection-artwork-page { max-width:1500px; margin-inline:auto; }
.collection-artwork-page>.page-heading h1 { max-width:18ch; }
.collection-artwork-page>.page-heading p { max-width:56ch; }
.collection-review-note { display:flex; gap:16px; padding:20px 24px; border:1px solid var(--line); border-radius:12px; margin-bottom:24px; background:var(--surface); }
.collection-review-dot { width:8px; height:8px; flex:none; border-radius:50%; margin-top:8px; background:var(--accent); }
.collection-review-note p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; max-width:100ch; }
.collection-review-note strong { color:var(--text); font-weight:600; }
.collection-review-nav { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 36px; }
.collection-comparison { display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; padding:36px 0; border-top:1px solid var(--line); }
.collection-comparison-heading { padding-top:5px; }
.collection-comparison-heading .eyebrow { margin-bottom:14px; }
.collection-comparison-heading h2 { font:400 30px/1.16 var(--display); font-synthesis:none; margin:0 0 14px; }
.collection-comparison-heading p { color:var(--muted); font-size:13px; margin:0; }
.collection-compare-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; min-width:0; }
.collection-compare-pair figure { margin:0; min-width:0; }
.collection-compare-pair figcaption { margin-bottom:14px; color:var(--muted); font-size:12px; }
.collection-compare-current { aspect-ratio:auto; grid-template-rows:auto auto!important; border:1px solid var(--line); background:var(--bg); }
.collection-compare-current>.collection-image { aspect-ratio:2/1; height:auto; display:block; }
.collection-compare-current>strong { min-height:52px; padding:14px 16px; border-top:1px solid var(--line); font:600 15px/1.4 var(--ui); }
.collection-provenance { grid-column:1/-1; color:var(--muted); font-size:12px; line-height:1.6; margin:0; max-width:90ch; }
.collection-review-summary { border-top:1px solid var(--line); margin-top:24px; padding:36px 0 8px; max-width:100%; }
.collection-review-summary h2 { font:400 30px/1.2 var(--display); font-synthesis:none; margin-bottom:18px; }
.collection-review-summary p { max-width:78ch; font-size:15px; color:var(--muted); }
.collection-proposal-states .state-sample { min-width:0; }
.collection-proposal-states .collection-art-empty { min-height:100%; }
@media(max-width:1100px) {
 .collection-comparison { grid-template-columns:160px minmax(0,1fr); gap:28px; }
 .collection-comparison-heading h2 { font-size:26px; }
 .collection-compare-pair { gap:18px; }
 .collection-poster-caption,.collection-compare-current>strong { padding:12px; min-height:48px; }
 .collection-poster-tile .collection-poster-caption strong,.collection-compare-current>strong { font-size:14px; }
}
@media(max-width:760px) {
 .collection-comparison { display:block; padding:28px 0; }
 .collection-comparison-heading { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline; margin-bottom:22px; padding:0; }
 .collection-comparison-heading .eyebrow { margin:0; grid-row:1/3; align-self:start; padding-top:7px; }
 .collection-comparison-heading h2 { font-size:27px; margin-bottom:6px; }
 .collection-comparison-heading p { grid-column:2; }
 .collection-compare-pair { grid-template-columns:1fr; gap:24px; }
 .collection-compare-pair figcaption { margin-bottom:10px; }
 .collection-provenance { grid-column:1; font-size:12px; }
 .collection-review-note { padding:18px; gap:12px; }
 .collection-review-note p { font-size:13px; }
 .collection-review-nav { gap:10px; margin-bottom:28px; }
 .collection-review-nav .btn { padding-inline:14px; }
 .collection-poster-caption,.collection-compare-current>strong { padding:14px; min-height:50px; }
 .collection-poster-tile .collection-poster-caption strong,.collection-compare-current>strong { font-size:14px; }
 .collection-art-empty { gap:10px; font-size:12px; }
 .collection-review-summary h2 { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) {
 .collection-poster-tile,.collection-poster-slip,.collection-poster-skeleton { transition:none; animation:none; }
}