/* Get Qurio design system: the only stylesheet. Mobile-first; breakpoints 360/600/768/1024/1440/1920/2560 (10-foot).
   Markup contract with live examples: /styleguide. 1 tokens 2 base 3 layout 4 shell 5 hero, rows, tiles 6 title page
   7 controls and forms 8 settings 9 player 10 overlays 11 states 12 older pages 13 breakpoints 14 preferences */

/* 1. Tokens */
:root {
  color-scheme: dark;
  --bg: #07080b; --surface: #0f1116; --surface-2: #161922; --surface-3: #1e222d; --line: #232734; --line-2: #343a4b;
  --text: #f3efe6; --soft: #d9d4c9; --muted: #a39e92;
  --accent: #ff7a2e; --accent-hi: #ff9150; --on-accent: #1b0b02; --accent-2: #3fd6c6; --on-accent-2: #03150f;
  --danger: #ff8a7a; --ok: #3fd6c6; --scrim: rgba(4,5,7,.7); --glass: rgba(10,11,15,.9); --w1: rgba(243,239,230,.1); --w2: rgba(243,239,230,.3);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-sm: .875rem; --fs-lg: 1.125rem;
  --fs-h3: clamp(1.0625rem, .98rem + .35vw, 1.3125rem); --fs-h2: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  --fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem); --fs-hero: clamp(2.375rem, 1.5rem + 4.4vw, 5.5rem);
  --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --r-sm: .375rem; --r: .625rem; --r-lg: 1rem; --r-xl: 1.375rem; --pill: 999px;
  --sh: 0 18px 50px rgba(0,0,0,.6);
  --ease: cubic-bezier(.22,.8,.24,1); --fast: 150ms var(--ease); --med: 200ms var(--ease); --slow: 250ms var(--ease);
  --gutter: clamp(1rem, 4vw, 3.5rem); --maxw: 110rem; --measure: 42rem;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px)); --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --header-h: 3.5rem; --tabbar-h: 3.5rem; --tabbar-space: 0px; --top: calc(var(--header-h) + var(--safe-t));
  --ring: var(--accent-2); --ring-w: 3px; --lift: 1.04;   /* --lift: a focused tile's scale */
  --per: 2.3; --gaps: 2; --per-w: 1.15; --gaps-w: 1; --gap: .625rem; --cols: 2;
}

/* 2. Base */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg);
  scroll-padding: calc(var(--top) + 1rem) 0 calc(var(--tabbar-space) + 1rem); }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; background: var(--bg); color: var(--text);
  font: 400 1rem/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.has-tabbar body { padding-bottom: var(--tabbar-space); }
html.no-scroll { overflow: hidden; }
main { flex: 1 0 auto; width: 100%; }
main:focus, [tabindex="-1"]:focus, :focus:not(:focus-visible) { outline: none; }
img, video, svg { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
p { text-wrap: pretty; }
::selection { background: rgba(255,122,46,.4); color: #fff; }
:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: 3px; }
[hidden] { display: none !important; }
.i { width: 1.5rem; height: auto; aspect-ratio: 1; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i .fill { fill: currentColor; stroke: none; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link, .skip { position: fixed; z-index: 100; left: var(--pad-l); top: calc(var(--safe-t) + .5rem); padding: .75rem 1rem; border-radius: var(--r);
  background: var(--accent-2); color: var(--on-accent-2); font-weight: 700; text-decoration: none; transform: translateY(-300%); }
.skip-link:focus, .skip:focus { transform: none; }
.eyebrow, .mono { font: 600 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--font-mono); }
.lead { font-size: var(--fs-lg); color: var(--soft); }
.muted, .dim, .fine { color: var(--muted); }
.fine { font-size: var(--fs-sm); }
kbd { min-width: 1.75rem; height: 1.75rem; padding: 0 .4rem; border-radius: var(--r-sm); background: var(--surface-3); font: 600 .75rem/1 var(--font-mono); }

/* shared alignments */
.hero-media::after, .title-backdrop::after, .auth-bg::after, .tile-art::after { content: ""; position: absolute; inset: 0; }
.footer-col a, .footer-base a, .row-more, .btn, .chip, .filter, .settings-nav a, .status { display: inline-flex; align-items: center; }
.avatar, .feature-icon, .start-in, .toast-icon, .empty-icon, .notfound { display: grid; place-items: center; }
.search, .search-hit, .menu-item, .row-head, .faq-item > summary, .player-top, .player-bar, .player-row, .player-group, .vol, .player-panel-head, .player-option, .sheet-head, .toast, .install-hint { display: flex; align-items: center; }
kbd, .icon-btn, .avatar-btn, .player-btn { display: inline-grid; place-items: center; }

/* 3. Layout */
.container { width: 100%; max-width: calc(var(--maxw) + var(--pad-l) + var(--pad-r)); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.container.text { max-width: calc(48rem + var(--pad-l) + var(--pad-r)); }
.container.form { max-width: calc(30rem + var(--pad-l) + var(--pad-r)); }
.page { padding-block: var(--s6) var(--s8); }
.page-head { display: grid; gap: .5rem; margin-bottom: var(--s6); }
.page-title { font-size: var(--fs-h1); }
.page-section { margin-top: var(--s7); }
.section-title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.grid-2, .grid-3, .features { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.grid-posters { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s5) var(--gap); list-style: none; }
.prose { max-width: var(--measure); color: var(--soft); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: 1.375rem; margin-top: 2.25rem; color: var(--text); }
.prose h3 { margin-top: 1.5rem; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .375rem; }
.prose a { color: var(--text); }

/* 4. Shell. The header placeholder keeps the bar's height (nothing jumps when shell.js fills it); data-overlay puts the
   bar over a hero, transparent until the page scrolls (.is-solid). */
[data-shell] { display: block; flex-shrink: 0; }
[data-shell=header] { height: var(--top); }
[data-shell=header][data-overlay] { height: 0; }
.site-header { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding-top: var(--safe-t); }
.site-header::before, .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--med); }
.site-header::before, .tabbar { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
.site-header::after { bottom: -2.5rem; background: linear-gradient(rgba(7,8,11,.78), rgba(7,8,11,.35) 60%, rgba(7,8,11,0)); opacity: 0; }
.is-overlay:not(.is-solid)::before { opacity: 0; }
.is-overlay:not(.is-solid)::after { opacity: 1; }
.site-header-in { position: relative; display: flex; align-items: center; gap: .5rem; height: var(--header-h); }
.logo { display: inline-block; color: var(--text); text-decoration: none; white-space: nowrap; font: 800 1.375rem/2 var(--font-display); letter-spacing: -.04em; }
.logo-get { font-weight: 500; color: var(--soft); margin-right: .2em; letter-spacing: -.02em; }
/* the q: the favicon's mark in a 512 box whose ink starts and ends about .085em inside it */
.logo-q { display: inline-block; height: .8em; width: auto; margin: 0 -.06em 0 -.075em; vertical-align: -.17em; }
.logo.large { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.4; }
.nav { display: none; }
.nav-links { display: flex; gap: .125rem; list-style: none; }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r); color: var(--soft);
  text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.nav-links a:hover, .nav-links [aria-current] { color: var(--text); }
.nav-links [aria-current] { font-weight: 700; }
.nav-links [aria-current]::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .375rem; height: 2px; border-radius: 1px; background: var(--accent); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.icon-btn, .avatar-btn, .player-btn { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 50%; color: var(--text);
  text-decoration: none; transition: background-color var(--fast), transform var(--fast); }
.icon-btn:hover { background: var(--w1); }
.icon-btn .i { width: 1.375rem; }
/* search: an icon that opens a field; below 1024 px the field covers the bar */

.search-box { display: none; align-items: center; gap: .25rem; height: 2.75rem; padding-left: .875rem; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line-2); }
.search-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.search-box > .i { width: 1.125rem; color: var(--muted); }
.search-input { flex: 1; min-width: 0; height: 100%; padding: 0 .375rem; background: none; border: 0; font-size: 1rem; outline: none !important; -webkit-appearance: none; appearance: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.is-open .search-toggle { display: none; }
.is-open .search-box { display: flex; position: absolute; z-index: 2; left: var(--pad-l); right: var(--pad-r); top: .375rem; bottom: .375rem; height: auto; }
.search-panel { position: fixed; z-index: 3; left: 0; right: 0; top: var(--top); max-height: calc(100svh - var(--top) - var(--tabbar-space)); overflow-y: auto; overscroll-behavior: contain;
  padding: .5rem var(--pad-r) 1rem var(--pad-l); background: var(--surface); border-bottom: 1px solid var(--line-2); box-shadow: var(--sh); }
.search-status { padding: .5rem; font-size: var(--fs-sm); color: var(--muted); }
.search-results { list-style: none; }
.search-hit { gap: .875rem; min-height: 3rem; padding: .5rem; border-radius: var(--r); text-decoration: none; outline-offset: -2px !important; }
.search-hit:hover, .search-hit:focus-visible, .menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); color: var(--text); }
.search-hit img { width: 2.75rem; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-3); }
.search-hit-title { display: block; font-weight: 600; line-height: 1.3; }
.search-hit-sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
/* account: "Sign in" or the avatar; the menu is a dropdown, a bottom sheet below 768 px */
.account { position: relative; display: flex; justify-content: flex-end; min-width: 2.75rem; }
.avatar { width: 2.125rem; height: 2.125rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font: 700 .8125rem/1 var(--font); text-transform: uppercase; transition: box-shadow var(--fast); }
.avatar .i { width: 1.25rem; }
.avatar.is-anon { background: var(--surface-3); color: var(--text); }
.avatar.is-loading { background: var(--surface-2); margin: .3125rem; }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded=true] .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--soft); }
.avatar.large { width: 4rem; height: 4rem; font-size: 1.375rem; }
.menu { position: absolute; z-index: 5; right: 0; top: calc(100% + .375rem); width: 16.5rem; padding: .375rem; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh); animation: pop var(--med); }
.menu-head { padding: .625rem .75rem .75rem; margin-bottom: .375rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.menu-name { font-weight: 700; }
.menu-email { font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
.menu-email.is-note { word-break: normal; }
.menu-item { gap: .75rem; width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--r); color: var(--soft);
  text-decoration: none; text-align: left; font-size: .9375rem; font-weight: 500; outline-offset: -2px !important; }
.menu-item .i { width: 1.25rem; color: var(--muted); }
.menu-sep { height: 1px; margin: .375rem 0; background: var(--line); }
.menu-backdrop { display: none; }
/* phone tab bar (shell.js sets html.has-tabbar so the page keeps clear of it) */
.tabbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--line);
  padding: 0 env(safe-area-inset-right, 0px) var(--safe-b) env(safe-area-inset-left, 0px); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem; height: var(--tabbar-h); min-width: 0; color: var(--muted);
  text-decoration: none; font: 600 .75rem/1 var(--font); white-space: nowrap; outline-offset: -4px !important; }
.tabbar [aria-current] { color: var(--text); }
.tabbar [aria-current] .i { color: var(--accent); }
/* footer */
.site-footer { margin-top: var(--s8); padding-block: var(--s7) var(--s6); border-top: 1px solid var(--line); background: #050609; color: var(--muted); font-size: var(--fs-sm); }
.footer-in { display: grid; gap: var(--s6); }
.footer-tagline { margin-top: .5rem; max-width: 22rem; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) 1rem; }
.footer-h { margin-bottom: .25rem; font: 700 .75rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.footer-col ul { list-style: none; }
.footer-col a, .footer-base a { gap: .5rem; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; }
.footer-col a:hover, .footer-base a:hover { color: var(--text); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem var(--s5); padding-top: 1rem; border-top: 1px solid var(--line); }

/* 5. Hero: full-bleed under the overlay header; a tall poster-ratio crop on phones */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(150vw, 88vh); min-height: min(150vw, 88svh);
  padding-top: calc(var(--top) + 1rem); overflow: hidden; background: var(--surface); }
.hero-media, .auth-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img, .title-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); }
.hero-media::after { background: linear-gradient(to top, var(--bg), rgba(7,8,11,.86) 24%, rgba(7,8,11,.2) 58%, rgba(7,8,11,.5)); }
.hero-content { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-bottom: var(--s6); text-align: center; }
.hero-title { font-size: var(--fs-hero); line-height: .95; letter-spacing: -.035em; max-width: 13ch; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.hero-logo { width: min(80%, 26rem); }
.hero-pitch { font-size: clamp(1rem, .94rem + .4vw, 1.25rem); color: var(--soft); max-width: 36rem; }
.hero-actions, .title-actions { display: grid; gap: .625rem; width: 100%; margin-top: .5rem; }
.hero-note { font-size: var(--fs-sm); color: var(--muted); }
/* rows: heading + a rail that scroll-snaps; arrow buttons only with a mouse */
.row { padding-top: 1rem; }
.row.defer { content-visibility: auto; contain-intrinsic-size: auto 22rem; }
.row-head { justify-content: space-between; gap: 1rem; }
.row-title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.row-more { gap: .25rem; min-height: 2.75rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.row-more:hover { color: var(--text); }
.row-more .i { width: 1rem; }
.rail { position: relative; max-width: calc(var(--maxw) + var(--pad-l) + var(--pad-r)); margin-inline: auto; --rail-w: min(100vw, calc(var(--maxw) + var(--pad-l) + var(--pad-r))); }
@supports (width: 1cqi) { .rail { container-type: inline-size; } .rail > * { --rail-w: 100cqi; } }
.rail > * { --tile-w: calc((var(--rail-w) - var(--pad-l) - var(--gap) * var(--gaps)) / var(--per)); --art-h: calc(var(--tile-w) * 1.5); }
.rail > .wide, .wide-rail > * { --tile-w: calc((var(--rail-w) - var(--pad-l) - var(--gap) * var(--gaps-w)) / var(--per-w)); --art-h: calc(var(--tile-w) * .5625); }
/* room above the tiles for a focused tile's lift and ring: the scrolling track clips whatever is outside its padding */
.rail > * { --track-top: max(.75rem, calc(var(--art-h) * (var(--lift) - 1) / 2 + (3px + var(--ring-w)) * var(--lift) + 2px)); }
.rail-track { display: flex; gap: var(--gap); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-l) var(--pad-r);
  padding: var(--track-top) var(--pad-r) 1rem var(--pad-l); scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-item { flex: 0 0 var(--tile-w); min-width: 0; scroll-snap-align: start; }
.rail-btn { display: none; }
/* poster tiles: 2:3 art that lifts on hover/focus (transform only: no layout shift), title and badge underneath */
.tile { display: block; position: relative; color: var(--text); text-decoration: none; border-radius: var(--r); scroll-margin-top: 4rem; outline: none !important; }
.tile-art { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--r); background: var(--surface-2); transition: transform var(--med), box-shadow var(--med); }
.tile-art::after { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile.wide .tile-art { aspect-ratio: 16/9; }
.tile.wide .tile-title { min-height: 0; -webkit-line-clamp: 1; }
.tile:focus-visible .tile-art { transform: scale(var(--lift)); outline: var(--ring-w) solid var(--ring); outline-offset: 3px; box-shadow: var(--sh); }
.tile-meta { display: grid; gap: .125rem; padding: .625rem .125rem 0; }
.tile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.tile-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-badge { position: absolute; z-index: 1; top: .5rem; left: .5rem; display: inline-flex; align-items: center; gap: .25rem; height: 1.375rem; padding: 0 .4375rem;
  border-radius: var(--r-sm); background: rgba(7,8,11,.82); font: 700 .6875rem/1 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.tile-badge .i { width: .8125rem; stroke-width: 3; }
.tile-badge.is-free { background: var(--accent-2); color: var(--on-accent-2); }
.tile-badge.is-owned { background: var(--text); color: var(--bg); }
.tile-badge.is-soon { box-shadow: inset 0 0 0 1px var(--w2); }
.tile-lock { position: absolute; z-index: 1; top: .5rem; right: .5rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(7,8,11,.78); }
.tile-lock .i { width: .875rem; }
.tile-progress, .progress { display: block; height: 4px; border-radius: 2px; background: var(--w2); overflow: hidden; }
.tile-progress { position: absolute; z-index: 1; left: .5rem; right: .5rem; bottom: .5rem; }
.tile-progress > span, .progress > span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); }
.is-soon .tile-art img { filter: saturate(.75) brightness(.85); }

/* 6. Title page: backdrop on top, then poster + info (two columns from 1024 px) */
.title-page { position: relative; isolation: isolate; }
/* explicit height, no aspect-ratio: with aspect-ratio a max-height also caps the width (a 520 px box on landscape phones) */
.title-backdrop { position: relative; z-index: -1; width: 100%; height: min(75vw, 70vh); height: min(75vw, 70svh); overflow: hidden; background: var(--surface); }
.title-backdrop::after { background: linear-gradient(to top, var(--bg) 2%, rgba(7,8,11,.55) 40%, rgba(7,8,11,.15) 70%, rgba(7,8,11,.55)); }
.title-layout { display: grid; gap: var(--s5); margin-top: -5rem; }
.title-poster { display: none; }
.title-poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh), 0 0 0 1px rgba(255,255,255,.08); }
.title-info { display: grid; gap: .75rem; justify-items: start; min-width: 0; }
.title-name { font-size: var(--fs-h1); line-height: 1; letter-spacing: -.02em; }
.title-name.has-logo { line-height: 0; }
.title-name.has-logo .hero-logo { width: clamp(16rem, 30vw, 32rem); max-width: 100%; }
.title-tagline { max-width: 40rem; font-size: var(--fs-lg); color: var(--soft); font-weight: 500; }
.title-price { font-size: var(--fs-sm); color: var(--muted); }
.title-synopsis { max-width: var(--measure); color: var(--soft); }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; color: var(--soft); font-size: var(--fs-sm); font-weight: 500; }
.meta-line > :not(:first-child, .chip)::before { content: "·"; margin-right: .5rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
/* "What you get", FAQ */
.features { list-style: none; gap: .75rem; }
.feature, .panel, .card { padding: 1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.feature { display: flex; gap: .875rem; }
.feature-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--r); background: rgba(255,122,46,.12); color: var(--accent); }
.feature-icon .i { width: 1.25rem; }
.feature h3 { font: 700 1rem/1.3 var(--font); }
.feature p { margin-top: .125rem; font-size: var(--fs-sm); color: var(--muted); }
.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary { justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .75rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--muted); }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-a { padding-bottom: 1.125rem; color: var(--soft); max-width: var(--measure); }

/* 7. Buttons */
.btn { justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .625rem 1.25rem; border: 1px solid transparent; border-radius: var(--r);
  background: var(--accent); color: var(--on-accent); font: 700 .9375rem/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--fast), color var(--fast), transform var(--fast); }
.btn:hover { background: var(--accent-hi); color: var(--on-accent); }
.btn:active, .player-btn:active { transform: scale(.96); }
.btn .i { width: 1.25em; }
.btn.light { background: var(--text); color: var(--bg); }
.btn.light:hover { background: #fff; }
.btn.ghost { background: rgba(243,239,230,.12); border-color: rgba(243,239,230,.16); color: var(--text); }
.btn.ghost:hover { background: rgba(243,239,230,.2); }
.btn.outline, .btn.quiet { background: none; border-color: var(--w2); color: var(--text); }
.btn.quiet { border-color: transparent; color: var(--soft); }
.btn.outline:hover, .btn.quiet:hover { background: var(--w1); color: var(--text); }
.btn.danger { background: none; border-color: rgba(255,138,122,.55); color: var(--danger); }
.btn.danger:hover { background: rgba(255,138,122,.1); }
.btn.small { padding: .5rem .875rem; font-size: .875rem; }
.btn.large { min-height: 3.25rem; padding: .875rem 1.625rem; font-size: 1.0625rem; }
.btn.wide { width: 100%; }
.btn.icon { width: 2.75rem; padding: 0; border-radius: 50%; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy=true] { cursor: progress; }
.btn[aria-busy=true]::before { content: ""; width: 1em; height: 1em; border: 2px solid; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.linkbtn { padding: 0; background: none; border: 0; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.linkbtn:disabled, .linkbtn[aria-disabled=true] { opacity: .55; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
/* chips, badges, filters */
.chip { height: 1.5rem; padding: 0 .5rem; border: 1px solid var(--w2); border-radius: var(--r-sm); color: var(--soft);
  font: 600 .75rem/1 var(--font); letter-spacing: .04em; white-space: nowrap; }
.chip.is-accent { border-color: rgba(255,122,46,.6); color: var(--accent); }
.chip.is-teal { border-color: rgba(63,214,198,.5); color: var(--accent-2); }
.badge { display: inline-block; margin-left: .5rem; padding: .125rem .5rem; border: 1px solid; border-radius: var(--pill); font: 700 .6875rem/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; vertical-align: .2em; }
.badge.ok { color: var(--accent-2); }
.badge.warn { color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter { min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line-2); border-radius: var(--pill); color: var(--soft);
  font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color var(--fast), color var(--fast); }
.filter:hover { border-color: #4a5164; color: var(--text); }
.filter:is([aria-pressed=true], [aria-current]:not([aria-current=false]), [aria-selected=true]) { background: var(--text); border-color: var(--text); color: var(--bg); }
/* forms: 16 px text so iOS never zooms */
.field { display: grid; gap: .375rem; margin-bottom: 1.125rem; }
label { font-size: .875rem; font-weight: 600; color: var(--soft); }
.input, select, textarea, input:is([type=text], [type=email], [type=password], [type=tel], [type=url], [type=number]) {
  width: 100%; min-height: 3rem; padding: .75rem .875rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); font-size: 1rem; line-height: 1.4; transition: border-color var(--fast); }
textarea { min-height: 7rem; resize: vertical; }
:is(.input, input, select, textarea):hover { border-color: #454c5f; }
:is(.input, input, select, textarea):focus-visible { outline-width: 2px; outline-offset: 1px; border-color: var(--ring); }
::placeholder { color: var(--muted); opacity: 1; }
[aria-invalid=true] { border-color: var(--danger) !important; }
.hint { font-size: .8125rem; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: .625rem; min-height: 2.75rem; padding-top: .625rem; font-weight: 500; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.pw { position: relative; }
.pw input { padding-right: 5rem; }
.pw-toggle { position: absolute; right: .125rem; top: 50%; transform: translateY(-50%); min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r-sm); background: var(--surface-3);
  border: 1px solid var(--line-2); font: 600 .8125rem var(--font); }
.field input.code { max-width: 15rem; font: 600 1.5rem/1.2 var(--font-mono); letter-spacing: .32em; }
.msg { margin: 0 0 1rem; padding: .75rem .875rem; border-radius: var(--r); border: 1px solid var(--line-2); font-size: .9375rem; color: var(--soft); }
.msg:empty { display: none; }
.msg[data-kind=err] { border-color: rgba(255,138,122,.5); background: rgba(255,138,122,.08); color: #ffd6cf; }
.msg[data-kind=ok] { border-color: rgba(63,214,198,.45); background: rgba(63,214,198,.08); color: #cdf6f0; }
.msg a, .msg .linkbtn { color: inherit; font-weight: 600; }
.msg.flat { margin: .75rem 0 0; }
.tabs { display: flex; gap: .25rem; padding: .25rem; margin: 1.5rem 0 1.25rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); }
.tabs [role=tab] { flex: 1; min-height: 2.75rem; border-radius: var(--pill); color: var(--muted); font-weight: 700; font-size: .9375rem; }
.tabs [aria-selected=true] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.row-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; margin-top: .625rem; font-size: .9375rem; }
.row-split > * { min-height: 2.75rem; display: inline-flex; align-items: center; }
.row-end { display: flex; justify-content: flex-end; margin: -.375rem 0 1rem; font-size: .9375rem; }
.sent-to { margin: 0 0 1.125rem; font-size: .9375rem; overflow-wrap: anywhere; }
/* sign-in card: flat on phones, a card from 600 px */
.auth-page { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; padding: var(--s5) var(--pad-r) var(--s8) var(--pad-l); }
.auth-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: blur(2px) saturate(.8); }
.auth-bg::after { background: radial-gradient(ellipse at top, rgba(7,8,11,.35), var(--bg) 70%); }
.auth-card { width: 100%; max-width: 28rem; }
.auth-title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }
.auth-sub { margin-top: .5rem; color: var(--soft); }
.auth-foot { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--muted); }

/* 8. Settings: sticky top tabs on phones and tablets, a sidebar from 1024 px */
.settings { display: grid; gap: var(--s5); }
.settings-nav { position: sticky; z-index: 5; top: var(--top); display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad-l) * -1) calc(var(--pad-r) * -1);
  padding: .5rem var(--pad-r) .5rem var(--pad-l); background: rgba(7,8,11,.95); border-bottom: 1px solid var(--line); }
.settings-nav a { gap: .625rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--pill); flex-shrink: 0; color: var(--soft);
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.settings-nav a:hover { color: var(--text); background: var(--surface); }
.settings-nav [aria-current] { background: var(--surface-3); color: var(--text); }
.settings-nav .i { display: none; width: 1.25rem; color: var(--muted); }
.settings-nav .is-danger { color: var(--danger); }
.settings-body { min-width: 0; }
.settings-section { scroll-margin-top: calc(var(--top) + 4.5rem); }
.settings-section + .settings-section { margin-top: var(--s7); }
.settings-h { font-size: var(--fs-h3); margin-bottom: .875rem; }
.panel + .panel { margin-top: .75rem; }
.panel.is-danger { border-color: rgba(255,138,122,.35); }
.panel-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.panel-row + .panel-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.status { gap: .625rem; font-weight: 600; }
.status-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--muted); }
.status-dot.is-on { background: var(--ok); box-shadow: 0 0 0 4px rgba(63,214,198,.18); }
.status-dot.is-busy { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,122,46,.18); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .375rem 1.25rem; margin: .875rem 0 1.25rem; font-size: var(--fs-sm); }
.facts dt { color: var(--muted); }
.facts dd { color: var(--soft); overflow-wrap: anywhere; }
.purchase { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .875rem; align-items: center; }
.purchase img { width: 3.5rem; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r-sm); }

/* 9. Player. .player is the protected container; .is-page fills the viewport (watch page, iPhone landscape too).
   The watermark is drawn by script with inline styles: nothing here may target it. */
.player { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #000; container-type: inline-size;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.player video { width: 100%; height: 100%; object-fit: contain; }
.player:fullscreen, .player.is-page { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.player:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.player.is-page { position: fixed; inset: 0; height: 100vh; height: 100svh; }
.player:fullscreen:not(.ui), .player.is-page:not(.ui) { cursor: none; }
.watch-body { background: #000; }
.start { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(7,8,11,.25); color: var(--text); }
.start-in { width: 5rem; height: 5rem; border-radius: 50%; background: rgba(7,8,11,.7); border: 1px solid var(--w2); transition: background-color var(--fast), transform var(--fast); }
.start:hover .start-in { background: var(--accent); color: var(--on-accent); transform: scale(1.05); }
.start svg { width: 2.25rem; height: 2.25rem; margin-left: .25rem; fill: currentColor; }
.start:focus-visible { outline-offset: -6px; }
.fs { position: absolute; z-index: 6; top: .625rem; right: .625rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--w2); border-radius: var(--r);
  background: rgba(7,8,11,.6); color: var(--text); opacity: 0; transition: opacity var(--med); }
.player.ui .fs, .fs:focus-visible { opacity: 1; }
.fs svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fs .exit, .fs[data-on] .enter { display: none; }
.fs[data-on] .exit { display: block; }
.busy { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 1rem; background: rgba(7,8,11,.86); text-align: center; overflow: auto; }
.busy-in { display: grid; justify-items: center; gap: .5rem; max-width: 26rem; }
.busy-title { font-weight: 700; font-size: clamp(1rem, 3.2cqw, 1.25rem); }
.busy-sub { margin-bottom: .375rem; color: var(--muted); font-size: var(--fs-sm); }
.busy .msg { margin: .375rem 0 0; }
.busy.err { z-index: 5; }
.busy .linkbtn { min-height: 2rem; color: var(--muted); }
/* watch-page chrome; shown while .player has .ui (the page drops .ui after 3 s of playback) */
.player-chrome { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transition: opacity var(--slow); }
.player:not(.ui) .player-chrome { opacity: 0; }
.player.ui :is(.player-top, .player-bar, .player-center > *) { pointer-events: auto; }
.player-top, .player-bar { gap: .5rem; padding: calc(.5rem + var(--safe-t)) var(--pad-r) 2.25rem var(--pad-l); background: linear-gradient(rgba(0,0,0,.75), transparent); }
.player-bar { display: block; padding: 2.25rem var(--pad-r) calc(.5rem + var(--safe-b)) var(--pad-l); background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.player-heading { flex: 1; min-width: 0; }
.player-kicker, .player-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-kicker { font-size: .75rem; color: rgba(255,255,255,.7); }
.player-title { font-weight: 700; }
.player-center { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: clamp(1.5rem, 8vw, 4rem); transform: translate(-50%, -50%); }
.player-row, .player-group { justify-content: space-between; gap: .125rem; min-width: 0; }
.player-btn { color: #fff; }
.player-btn:hover { background: rgba(255,255,255,.14); }
.player-btn.big { width: 5rem; height: 5rem; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.player-btn.big:hover { background: rgba(255,255,255,.24); }
.player-btn.big .i { width: 2.25rem; }
.player-center .player-btn:not(.big) { width: 3.5rem; height: 3.5rem; }
.player-center .player-btn:not(.big) .i { width: 2rem; }
.player-btn.text { width: auto; padding: 0 .75rem; border-radius: var(--pill); font: 700 .8125rem/1 var(--font); }
.player-time { padding: 0 .5rem; color: rgba(255,255,255,.88); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrub { position: relative; display: flex; align-items: center; height: 1.75rem; cursor: pointer; touch-action: none; }
.scrub-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); transition: height var(--fast); }
.scrub:is(:hover, :focus-visible, .is-drag) .scrub-track { height: 6px; }
.scrub-buffer, .scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: rgba(255,255,255,.35); }
.scrub-fill { background: var(--accent); }
.scrub-thumb { position: absolute; left: calc(var(--p, 0) * 100%); }
.scrub-thumb { top: 50%; width: .875rem; height: .875rem; margin: -.4375rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--fast); }
.scrub:is(:hover, :focus-visible, .is-drag) .scrub-thumb { transform: none; }

.vol-range { width: 5rem; margin-right: .5rem; accent-color: var(--accent); }
.player-ripple { position: absolute; z-index: 2; top: 0; bottom: 0; width: 35%; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.player-ripple.is-left { left: 0; }
.player-ripple.is-right { right: 0; }
.player-ripple span { padding: .375rem .75rem; border-radius: var(--pill); background: rgba(0,0,0,.6); font-weight: 700; }
.player-ripple.show { animation: ripple 650ms var(--ease); }
.player-panel { position: absolute; z-index: 7; right: var(--pad-r); bottom: calc(5.5rem + var(--safe-b)); display: flex; flex-direction: column; width: min(24rem, calc(100% - 2rem));
  max-height: min(60%, 32rem); padding: .5rem; background: rgba(15,17,22,.97); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh); animation: pop var(--med); }
.player-panel-head { justify-content: space-between; padding: .25rem .25rem .375rem .5rem; }
.player-panel-head h2, .player-panel-head h3, .sheet-title { font: 700 1.0625rem/1.3 var(--font); }
.player-panel-body { overflow-y: auto; overscroll-behavior: contain; }
.player-option { justify-content: space-between; width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--r); color: var(--soft); text-align: left; }
.player-option:hover { background: var(--surface-2); color: var(--text); }
.player-option[aria-checked=true] { color: var(--text); font-weight: 700; }
.player-option[aria-checked=true]::after { content: ""; width: .375rem; height: .75rem; margin-right: .25rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* 10. Overlays: bottom sheet (a centred dialog from 768 px), toasts, install hint */
.sheet-backdrop, .menu-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--scrim); animation: fade var(--med); }
.sheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: calc(100svh - 2rem - var(--safe-t)); outline: none !important;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh); animation: sheet-up var(--slow); }
.sheet { padding: .5rem var(--pad-r) calc(1rem + var(--safe-b)) var(--pad-l); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.sheet-handle { flex-shrink: 0; width: 2.5rem; height: 4px; margin: .25rem auto .625rem; border-radius: 2px; background: var(--line-2); }
.sheet-head { justify-content: space-between; gap: 1rem; padding-bottom: .5rem; touch-action: none; }
.sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet.is-closing { animation: sheet-down var(--med) forwards; }
.sheet-backdrop.is-closing { animation: fade var(--med) reverse forwards; }
.toasts, .toast, .install-hint { position: fixed; z-index: 90; left: var(--pad-l); right: var(--pad-r); bottom: calc(1rem + max(var(--tabbar-space), var(--safe-b))); }
.toasts { display: grid; justify-items: center; gap: .5rem; pointer-events: none; }
.toast, .install-hint { gap: .75rem; max-width: 30rem; margin: 0 auto; padding: .875rem 1rem; border-radius: var(--r-lg); background: #1b1f29;
  border: 1px solid var(--line-2); box-shadow: var(--sh); font-size: .9375rem; }
.toast { opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: opacity var(--med), transform var(--med); }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toasts .toast { position: relative; inset: auto; width: 100%; margin: 0; }
.toast[data-kind=err] { border-color: rgba(255,138,122,.55); }
.toast[data-kind=ok] { border-color: rgba(63,214,198,.5); }
.toast-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; background: var(--surface-3); }
.toast-icon .i { width: .875rem; stroke-width: 3; }
[data-kind=err] > .toast-icon { background: rgba(255,138,122,.18); color: var(--danger); }
[data-kind=ok] > .toast-icon { background: rgba(63,214,198,.18); color: var(--ok); }
.toast-text, .install-hint p { flex: 1; min-width: 0; }
.toast-action { min-height: 2.75rem; margin: -.5rem -.25rem -.5rem 0; padding: 0 .5rem; color: var(--accent); font-weight: 700; }
.install-hint { z-index: 55; padding: .625rem .375rem .625rem .75rem; animation: sheet-up var(--slow); }
.install-hint p { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.install-hint strong { display: block; color: var(--text); font-size: .875rem; }
.app-icon { width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .75rem; box-shadow: inset 0 0 0 1px var(--line-2); }

/* 11. States: empty, 404, skeletons, banners */
.empty { display: grid; justify-items: center; gap: .75rem; padding: 3rem 1.25rem; border: 1px dashed var(--line-2); border-radius: var(--r-xl); text-align: center; }
.empty-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.empty :is(h2, h3) { font-size: var(--fs-h3); }
.empty p { max-width: 28rem; color: var(--muted); }
.notfound { min-height: 70svh; padding: var(--s7) var(--pad-r) var(--s8) var(--pad-l); text-align: center; }
.notfound-in { display: grid; justify-items: center; gap: 1rem; max-width: 34rem; }
.notfound-code { font: 800 clamp(6rem, 28vw, 13rem)/.85 var(--font-display); letter-spacing: -.06em; color: var(--accent);
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.notfound p { color: var(--soft); }
.skeleton, .is-skeleton :is(.tile-art, .tile-title, .tile-sub) { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0/300% 100%;
  animation: shimmer 1.4s linear infinite; }
.skeleton { display: block; border-radius: var(--r-sm); }
.skeleton.text { height: .875em; margin-block: .3em; }
.is-skeleton { pointer-events: none; }
.is-skeleton .tile-title { min-height: 0; height: .875rem; width: 85%; margin: .2rem 0 1.2rem; border-radius: 4px; }
.is-skeleton .tile-sub { height: .75rem; width: 50%; margin: .2rem 0; border-radius: 4px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.75rem; padding: 1rem 1.125rem; border-radius: var(--r-lg);
  border: 1px solid rgba(255,122,46,.4); background: rgba(255,122,46,.07); }
.banner p { flex: 1 1 16rem; }
.banner .msg { flex-basis: 100%; margin: 0; }
.banner-actions { display: flex; flex-wrap: wrap; gap: .625rem; }

/* 12. Older pages, until each is rebuilt on the shell (remove then) */
.bar-in, .foot-in, .wrap { max-width: 60rem; margin: 0 auto; padding: 1rem var(--pad-r) 1rem var(--pad-l); }
.bar-in, .foot-in, .foot nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; }
.bar { border-bottom: 1px solid var(--line); }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.brand { font: 800 1.125rem/2.75rem var(--font-display); text-decoration: none; }
.toplink, .foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pending { opacity: 0; }
.wrap { padding-block: 2rem 4.5rem; }
.narrow { max-width: 34rem; }
.wrap > * + *, .section-gap { margin-top: 1.25rem; }

/* 13. Breakpoints */
@media (min-width: 360px) { :root { --cols: 3; } }
@media (max-width: 599.98px) {
  .browse-bar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad-l) * -1) calc(var(--pad-r) * -1); padding-inline: var(--pad-l) var(--pad-r); }
  .browse-bar .filters::-webkit-scrollbar { display: none; }
}
@media (max-width: 767.98px) {
  html.has-tabbar { --tabbar-space: calc(var(--tabbar-h) + var(--safe-b)); }
  .settings-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .account > .btn { background: none; border-color: var(--w2); color: var(--text); }   /* one orange action per screen */
  .account > .btn:hover { background: var(--w1); }
  .menu { position: fixed; z-index: 81; left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: .5rem var(--pad-r) calc(1rem + var(--safe-b)) var(--pad-l);
    border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-up var(--slow); }
  .menu::before { content: ""; display: block; width: 2.5rem; height: 4px; margin: .25rem auto .75rem; border-radius: 2px; background: var(--line-2); }
  .menu-item { min-height: 3.25rem; font-size: 1rem; }
  .menu-backdrop { display: block; }
  .player.is-page .busy { place-items: end stretch; padding: 0; }
  .player.is-page .busy-in { max-width: none; padding: 1.5rem var(--pad-r) calc(1.5rem + var(--safe-b)) var(--pad-l); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); animation: sheet-up var(--slow); }
}
@media (max-width: 767.98px), (max-height: 500px) {
  .player-panel { left: 0; right: 0; bottom: 0; width: auto; max-height: 80%; padding-bottom: calc(1rem + var(--safe-b)); border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-up var(--slow); }
}
@media (pointer: coarse) {
  .linkbtn { min-height: 2.75rem; }
  .scrub { height: 2.75rem; }
  .scrub-thumb { transform: none; }
  .vol-range { display: none; }
}
@media (min-width: 600px) {
  :root { --per: 3.3; --gaps: 3; --per-w: 2.2; --gaps-w: 2; --cols: 4; --gap: .75rem; }
  .grid-2, .grid-3, .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions, .title-actions { display: flex; flex-wrap: wrap; width: auto; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-page { padding-top: var(--s7); }
  .auth-card { padding: 2.25rem 2rem; background: rgba(15,17,22,.94); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh); }
  .panel, .card { padding: 1.5rem 1.75rem; }
  .toasts { left: auto; width: 26rem; justify-items: end; }
  .toasts .toast { width: auto; }
}
@media (min-width: 768px) {
  :root { --header-h: 4.25rem; --per: 4.25; --gaps: 4; }
  .site-header-in { gap: 1rem; }
  .nav { display: block; min-width: 0; }
  .search-panel { left: auto; right: var(--pad-r); top: calc(var(--top) - .25rem); width: 25rem; max-height: min(70vh, 34rem); padding: .375rem; border: 1px solid var(--line-2); border-radius: var(--r-lg); }
  .tabbar { display: none; }
  .hero { min-height: min(56.25vw, 92vh); min-height: min(56.25vw, 92svh); }
  .hero-media::after { background: linear-gradient(90deg, rgba(7,8,11,.9), rgba(7,8,11,.55) 32%, rgba(7,8,11,0) 62%), linear-gradient(to top, var(--bg), rgba(7,8,11,0) 32%),
    linear-gradient(rgba(7,8,11,.5), rgba(7,8,11,0) 22%); }
  .hero-content { align-items: flex-start; text-align: left; padding-bottom: clamp(3rem, 7vw, 7rem); }
  .hero-content > * { max-width: 40rem; }
  .hero-title { max-width: 14ch; }
  .footer-in { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); }
  .footer-base { grid-column: 1 / -1; }
  .title-backdrop { height: min(56.25vw, 75vh); height: min(56.25vw, 75svh); }
  .rail-btn { position: absolute; z-index: 2; top: var(--track-top); height: calc(var(--tile-w) * 1.5); width: max(var(--pad-l), 2.75rem); display: grid; place-items: center; color: var(--text);
    background: rgba(7,8,11,.72); opacity: 0; transition: opacity var(--med); }
  .wide-rail .rail-btn { height: calc(var(--tile-w) * .5625); }
  .rail-btn.prev { left: 0; }
  .rail-btn.next { right: 0; }
  .rail-btn .i { width: 2rem; }
  .rail[data-start] .prev, .rail[data-end] .next { visibility: hidden; }
}
@media (min-width: 768px) and (hover: hover) {
  .rail:hover .rail-btn { opacity: 1; }
  .tile:hover .tile-art { transform: translateY(-.25rem) scale(1.04); box-shadow: var(--sh); }
}
@media (hover: none) { .rail-btn { display: none; } }
@media (hover: none) and (pointer: coarse) { #keys-btn { display: none; } }   /* no keyboard to map */
@media (min-width: 1024px) and (hover: hover) {
  .player-bar .player-btn { width: 3.25rem; height: 3.25rem; }
  .player-bar .player-btn .i { width: 1.75rem; }
  .player-kicker { font-size: .875rem; }
  .player-title { font-size: 1.25rem; }
  .player-time { font-size: .9375rem; }
}
@media (min-width: 768px) and (pointer: fine) { .footer-col a { min-height: 2.25rem; } }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(32rem, calc(100vw - 4rem)); max-height: min(80vh, 44rem); padding: 1.25rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--line-2); border-radius: var(--r-xl); transform: translate(-50%, -50%); animation: pop-center var(--med); }
  .sheet.is-closing { animation: fade var(--med) reverse forwards; }
  .sheet-handle { display: none; }
}
@media (min-width: 1024px) {
  :root { --per: 5.25; --gaps: 5; --per-w: 3.2; --gaps-w: 3; --cols: 5; --gap: .875rem; }
  .grid-3, .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .title-backdrop { position: absolute; inset: 0 0 auto; height: clamp(30rem, 50vw, 54rem); }
  .title-backdrop::after { background: linear-gradient(to top, var(--bg) 3%, rgba(7,8,11,.72) 34%, rgba(7,8,11,.15) 72%, rgba(7,8,11,.55)), linear-gradient(90deg, rgba(7,8,11,.88), rgba(7,8,11,.5) 45%, rgba(7,8,11,0) 75%); }
  .title-layout { grid-template-columns: minmax(14rem, 21rem) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 4vw, 4rem); margin-top: 0; padding-top: clamp(13rem, 22vw, 24rem); }
  .title-poster { display: block; }
  .settings { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }
  .settings-nav { top: calc(var(--top) + 1.5rem); flex-direction: column; gap: .125rem; margin: 0; padding: 0; overflow: visible; background: none; border: 0; }
  .settings-nav a { border-radius: var(--r); padding: 0 .875rem; font-size: .9375rem; }
  .settings-nav .i { display: block; }
  .settings-nav [aria-current] { box-shadow: inset 3px 0 0 var(--accent); }
  .settings-section { scroll-margin-top: calc(var(--top) + 1.5rem); }
  .is-open .search-box { position: static; width: clamp(14rem, 22vw, 20rem); }
}
@media (min-width: 1440px) {
  :root { --per: 6.25; --gaps: 6; --per-w: 4.2; --gaps-w: 4; --cols: 6; --gap: 1rem; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* big screens and TV: rem sizes grow with the root (10-foot above 2560 px), with a heavier focus ring */
@media (min-width: 1920px) { :root { --per: 7.25; --gaps: 7; --cols: 7; --ring-w: 4px; } html { font-size: calc(.3125vw + 10px); } }
@media (min-width: 2560px) { :root { --per: 6.25; --gaps: 6; --cols: 6; --ring-w: .25rem; } html { font-size: .78125vw; } :root { --lift: 1.06; } }
/* TV browsers (Tizen, webOS, Android/Google TV, Fire TV…) report 1920×1080 or 960×540 CSS px, so the width rules above
   never give them the 10-foot size: 1.25vw is 1/80 of the screen, about 24 device px on a 1080p TV. */
html.is-tv { font-size: 1.25vw; --per: 5.25; --gaps: 5; --cols: 5; --ring-w: .25rem; --lift: 1.08; }

/* 14. Motion and contrast preferences */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } }
@keyframes pop-center { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes ripple { 15% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tile .tile-art { transform: none !important; }
}