/* Iris — one token system, three looks (Cinema · Material · macOS), each in dark and light.
   Components only read tokens; the theme blocks at the top are the only place colours and shapes are decided.
   --accent / --accent-ink are set by theme.js (the defaults below cover first paint). */

@property --hole { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- tokens: Cinema (default) ---------- */

:root {
  --bg: #0A0A0B;
  --s1: #111113;
  --s2: #17171A;
  --s3: #1D1D21;
  --s4: #27272C;
  --raised: rgba(23, 23, 26, 0.97);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #F5F5F2;
  --text-2: #A4A4AA;
  --text-3: #6E6E75;
  --accent: #D6A75D;
  --accent-ink: #1B1409;
  --accent-hi: color-mix(in oklab, var(--accent), white 14%);
  --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 45%, transparent);
  --ok: #7FB28C;
  --warn: #E0A33B;
  --down: #D0705F;
  --glass: rgba(10, 10, 11, 0.7);
  --glass-2: rgba(10, 10, 11, 0.88);
  --scrim: rgba(5, 5, 6, 0.62);
  --over: rgba(10, 10, 11, 0.74);
  --star-off: rgba(255, 255, 255, 0.14);
  --hair-in: rgba(255, 255, 255, 0.06);
  --ph-a: 19%;
  --ph-b: 9%;
  --ph-ink: rgba(245, 245, 242, 0.88);
  --inverse: #F5F5F2;
  --inverse-ink: #111113;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);

  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display-weight: 400;
  --display-track: -0.01em;
  --em-style: italic;
  --em-color: var(--text-2);
  --word: var(--display);
  --word-style: italic;
  --word-weight: 400;
  --word-size: 25px;

  --r-sm: 6px;
  --r: 8px;
  --r-lg: 14px;
  --r-art: 6px;
  --r-btn: 8px;
  --r-seg: 9px;
  --r-seg-in: 6px;
  --btn-h: 38px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 64px;
  --gutter: clamp(16px, 3.6vw, 56px);
  color-scheme: dark;
}

:root[data-mode="light"] {
  --bg: #F4F1EC;
  --s1: #FBF9F6;
  --s2: #EDE9E2;
  --s3: #E5E0D8;
  --s4: #D9D2C7;
  --raised: rgba(251, 249, 246, 0.98);
  --line: rgba(25, 23, 19, 0.09);
  --line-2: rgba(25, 23, 19, 0.16);
  --text: #191713;
  --text-2: #5E5A52;
  --text-3: #8C867B;
  --accent: #A8742A;
  --accent-ink: #FFFFFF;
  --accent-hi: color-mix(in oklab, var(--accent), black 10%);
  --ok: #3F8A55;
  --warn: #B7791F;
  --down: #B64A38;
  --glass: rgba(244, 241, 236, 0.72);
  --glass-2: rgba(244, 241, 236, 0.9);
  --scrim: rgba(25, 23, 19, 0.3);
  --star-off: rgba(25, 23, 19, 0.16);
  --hair-in: rgba(0, 0, 0, 0.06);
  --ph-a: 86%;
  --ph-b: 74%;
  --ph-ink: rgba(25, 23, 19, 0.82);
  --inverse: #26231F;
  --inverse-ink: #F4F1EC;
  --shadow: 0 10px 28px rgba(40, 32, 20, 0.14);
  --shadow-lg: 0 30px 70px rgba(40, 32, 20, 0.22);
  color-scheme: light;
}

/* ---------- tokens: Material (Android · Material You) — surfaces take a tint of the accent ---------- */

:root[data-theme="material"] {
  --accent: #D0BCFF;
  --accent-ink: #21005D;
  --bg: color-mix(in oklab, var(--accent) 4%, #121115);
  --s1: color-mix(in oklab, var(--accent) 5%, #1B1A1F);
  --s2: color-mix(in oklab, var(--accent) 6%, #211F26);
  --s3: color-mix(in oklab, var(--accent) 8%, #2B2930);
  --s4: color-mix(in oklab, var(--accent) 10%, #36343B);
  --raised: color-mix(in oklab, var(--accent) 7%, #242229);
  --line: rgba(230, 224, 233, 0.1);
  --line-2: rgba(230, 224, 233, 0.2);
  --text: #E6E0E9;
  --text-2: #CAC4D0;
  --text-3: #938F99;
  --glass: color-mix(in oklab, var(--bg) 80%, transparent);
  --glass-2: color-mix(in oklab, var(--s1) 94%, transparent);
  --inverse: #E6E0E9;
  --inverse-ink: #322F35;

  --sans: "Roboto Flex", Roboto, "Google Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Roboto Flex", Roboto, ui-sans-serif, system-ui, sans-serif;
  --display-weight: 500;
  --display-track: -0.02em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: var(--display);
  --word-style: normal;
  --word-weight: 600;
  --word-size: 22px;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 24px;
  --r-art: 12px;
  --r-btn: 999px;
  --r-seg: 999px;
  --r-seg-in: 999px;
  --btn-h: 40px;
}
:root[data-theme="material"][data-mode="light"] {
  --accent: #6750A4;
  --accent-ink: #FFFFFF;
  --bg: color-mix(in oklab, var(--accent) 4%, #FEF7FF);
  --s1: color-mix(in oklab, var(--accent) 4%, #F7F2FA);
  --s2: color-mix(in oklab, var(--accent) 5%, #F3EDF7);
  --s3: color-mix(in oklab, var(--accent) 7%, #ECE6F0);
  --s4: color-mix(in oklab, var(--accent) 9%, #E6E0E9);
  --raised: color-mix(in oklab, var(--accent) 4%, #F7F2FA);
  --line: rgba(29, 27, 32, 0.1);
  --line-2: rgba(29, 27, 32, 0.2);
  --text: #1D1B20;
  --text-2: #49454F;
  --text-3: #79747E;
  --inverse: #322F35;
  --inverse-ink: #F5EFF7;
}

/* ---------- tokens: macOS ---------- */

:root[data-theme="mac"] {
  --accent: #0A84FF;
  --accent-ink: #FFFFFF;
  --bg: #161618;
  --s1: #1E1E20;
  --s2: #262628;
  --s3: #2C2C2E;
  --s4: #3A3A3C;
  --raised: rgba(40, 40, 43, 0.82);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #F5F5F7;
  --text-2: #A1A1A6;
  --text-3: #6E6E73;
  --glass: rgba(30, 30, 32, 0.68);
  --glass-2: rgba(30, 30, 32, 0.84);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif;
  --display-weight: 700;
  --display-track: -0.03em;
  --em-style: normal;
  --em-color: var(--text-2);
  --word: var(--display);
  --word-style: normal;
  --word-weight: 600;
  --word-size: 20px;

  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --r-art: 10px;
  --r-btn: 9px;
  --r-seg: 9px;
  --r-seg-in: 7px;
  --btn-h: 36px;
}
:root[data-theme="mac"][data-mode="light"] {
  --accent: #007AFF;
  --bg: #F5F5F7;
  --s1: #FFFFFF;
  --s2: #F0F0F2;
  --s3: #E8E8ED;
  --s4: #DCDCE1;
  --raised: rgba(255, 255, 255, 0.86);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #86868B;
  --glass: rgba(245, 245, 247, 0.72);
  --glass-2: rgba(245, 245, 247, 0.88);
}

/* ---------- tokens: Fluent (Windows 11) ---------- */

:root[data-theme="fluent"] {
  --accent: #60CDFF;
  --accent-ink: #003A4F;
  --bg: #1C1C1C;
  --s1: #242424;
  --s2: #2B2B2B;
  --s3: #323232;
  --s4: #3D3D3D;
  --raised: rgba(43, 43, 43, 0.96);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #FFFFFF;
  --text-2: #C8C8C8;
  --text-3: #8A8A8A;
  --glass: rgba(28, 28, 28, 0.72);
  --glass-2: rgba(28, 28, 28, 0.9);
  --sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600;
  --display-track: -0.02em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: var(--display);
  --word-style: normal;
  --word-weight: 600;
  --word-size: 20px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-art: 6px;
  --r-btn: 4px;
  --r-seg: 6px;
  --r-seg-in: 4px;
  --btn-h: 34px;
}
:root[data-theme="fluent"][data-mode="light"] {
  --accent: #005FB8;
  --bg: #F3F3F3;
  --s1: #FBFBFB;
  --s2: #F0F0F0;
  --s3: #E9E9E9;
  --s4: #DDDDDD;
  --raised: rgba(251, 251, 251, 0.97);
  --line: rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.13);
  --text: #1B1B1B;
  --text-2: #5C5C5C;
  --text-3: #8A8A8A;
  --glass: rgba(243, 243, 243, 0.74);
  --glass-2: rgba(243, 243, 243, 0.9);
}
[data-theme="fluent"] .btn { border-bottom-color: rgba(0, 0, 0, 0.28); }
[data-theme="fluent"] .display, [data-theme="fluent"] .display-sm { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
[data-theme="fluent"] .nav-pill { background: var(--s2); }
[data-theme="fluent"] .nav a.is-on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--accent); }
[data-theme="fluent"] .eyebrow, [data-theme="fluent"] .label { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ---------- tokens: One UI (Samsung) ---------- */

:root[data-theme="oneui"] {
  --accent: #5E9EFF;
  --accent-ink: #FFFFFF;
  --bg: #000000;
  --s1: #161616;
  --s2: #1E1E1E;
  --s3: #262626;
  --s4: #333333;
  --raised: rgba(30, 30, 30, 0.97);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --text: #FAFAFA;
  --text-2: #B5B5B5;
  --text-3: #7D7D7D;
  --glass: rgba(0, 0, 0, 0.72);
  --glass-2: rgba(0, 0, 0, 0.9);
  --sans: "SamsungOne", "Samsung Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "SamsungOne", "Samsung Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-track: -0.025em;
  --em-style: normal;
  --em-color: var(--text-2);
  --word: var(--display);
  --word-style: normal;
  --word-weight: 700;
  --word-size: 21px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-art: 16px;
  --r-btn: 999px;
  --r-seg: 999px;
  --r-seg-in: 999px;
  --btn-h: 42px;
}
:root[data-theme="oneui"][data-mode="light"] {
  --accent: #3E91FF;
  --bg: #F6F6F6;
  --s1: #FFFFFF;
  --s2: #EFEFEF;
  --s3: #E7E7E7;
  --s4: #DADADA;
  --raised: rgba(255, 255, 255, 0.98);
  --line: rgba(0, 0, 0, 0.06);
  --line-2: rgba(0, 0, 0, 0.12);
  --text: #111111;
  --text-2: #555555;
  --text-3: #8A8A8A;
  --glass: rgba(246, 246, 246, 0.74);
  --glass-2: rgba(246, 246, 246, 0.9);
}
[data-theme="oneui"] .display { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; }
[data-theme="oneui"] .panel, [data-theme="oneui"] .tonight, [data-theme="oneui"] .empty { border-color: transparent; }
[data-theme="oneui"] .btn { border-color: transparent; font-weight: 600; }
[data-theme="oneui"] .nav a { border-radius: 999px; }
[data-theme="oneui"] .nav .nav-pill { border-radius: 999px; background: var(--s3); }

/* ---------- tokens: Glyph (dot-matrix, in the spirit of Nothing OS) ---------- */

:root[data-theme="nothing"] {
  --accent: #D71921;
  --accent-ink: #FFFFFF;
  --bg: #000000;
  --s1: #0E0E0E;
  --s2: #151515;
  --s3: #1C1C1C;
  --s4: #272727;
  --raised: rgba(21, 21, 21, 0.97);
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #FFFFFF;
  --text-2: #A8A8A8;
  --text-3: #6B6B6B;
  --glass: rgba(0, 0, 0, 0.74);
  --glass-2: rgba(0, 0, 0, 0.9);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "Doto", "Space Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-track: 0.01em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: "Doto", "Space Mono", ui-monospace, monospace;
  --word-style: normal;
  --word-weight: 900;
  --word-size: 22px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-art: 10px;
  --r-btn: 999px;
  --r-seg: 999px;
  --r-seg-in: 999px;
  --btn-h: 38px;
}
:root[data-theme="nothing"][data-mode="light"] {
  --bg: #F2F2F2;
  --s1: #FFFFFF;
  --s2: #EAEAEA;
  --s3: #E0E0E0;
  --s4: #D0D0D0;
  --raised: rgba(255, 255, 255, 0.98);
  --line: rgba(0, 0, 0, 0.1);
  --line-2: rgba(0, 0, 0, 0.18);
  --text: #000000;
  --text-2: #555555;
  --text-3: #8C8C8C;
  --glass: rgba(242, 242, 242, 0.74);
  --glass-2: rgba(242, 242, 242, 0.9);
}
[data-theme="nothing"] body { background-image: radial-gradient(color-mix(in oklab, var(--text) 7%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
[data-theme="nothing"] .eyebrow, [data-theme="nothing"] .label { font-family: var(--display); font-weight: 800; letter-spacing: 0.16em; }
[data-theme="nothing"] .display { font-size: clamp(34px, 5vw, 60px); line-height: 1.1; }
[data-theme="nothing"] .panel, [data-theme="nothing"] .tonight { border-style: dashed; }
[data-theme="nothing"] .nav a.is-on { color: var(--text); }
[data-theme="nothing"] .nav .nav-pill { background: transparent; }
[data-theme="nothing"] .nav a.is-on::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); }

/* ---------- Pop: neo-brutalist — ink outlines, hard offset shadows, flat colour, buttons that press in ---------- */
:root[data-theme="pop"] {
  --accent: #C6FF4F;
  --accent-ink: #111111;
  --bg: #1B1A22;
  --s1: #24232D;
  --s2: #2E2D38;
  --s3: #393845;
  --s4: #4A4957;
  --raised: #24232D;
  --line: rgba(251, 248, 241, 0.16);
  --line-2: rgba(251, 248, 241, 0.3);
  --text: #FBF8F1;
  --text-2: #CFCAC0;
  --text-3: #938E85;
  --glass: rgba(27, 26, 34, 0.9);
  --glass-2: rgba(27, 26, 34, 0.97);
  --ink: #0A090D;
  --ink-line: rgba(251, 248, 241, 0.88);
  --pop-shadow: 4px 4px 0 var(--ink);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -0.03em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --word-style: normal;
  --word-weight: 800;
  --word-size: 22px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-art: 12px;
  --r-btn: 12px;
  --r-seg: 12px;
  --r-seg-in: 8px;
  --btn-h: 40px;
}
:root[data-theme="pop"][data-mode="light"] {
  --bg: #FFF4DE;
  --s1: #FFFFFF;
  --s2: #FFE9C2;
  --s3: #FFDDA0;
  --s4: #F4CB7E;
  --raised: #FFFFFF;
  --line: rgba(17, 17, 17, 0.14);
  --line-2: rgba(17, 17, 17, 0.28);
  --text: #111111;
  --text-2: #3B372F;
  --text-3: #6E685C;
  --glass: rgba(255, 244, 222, 0.9);
  --glass-2: rgba(255, 244, 222, 0.97);
  --ink: #111111;
  --ink-line: #111111;
}
[data-theme="pop"] body { background-image: radial-gradient(color-mix(in oklab, var(--text) 11%, transparent) 1.2px, transparent 1.5px); background-size: 22px 22px; }
[data-theme="pop"] .eyebrow, [data-theme="pop"] .label { font-weight: 700; letter-spacing: 0.1em; color: var(--text-2); }
[data-theme="pop"] .display { line-height: 1.02; }
:root[data-theme="pop"] :is(.panel, .tonight, .pick-card, .glance, .tiles, .modal, .toast, .pet, .coll, .franchise, .resume-card, .theme-card, .person, .empty) {
  border: 2px solid var(--ink-line); box-shadow: var(--pop-shadow);
}
:root[data-theme="pop"] :is(.hero-search, .search-trigger, .input, .select select, .seg) { border: 2px solid var(--ink-line); box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="pop"] .btn { border: 2px solid var(--ink-line); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
:root[data-theme="pop"] .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
:root[data-theme="pop"] .btn-ghost { background: var(--s1); }
:root[data-theme="pop"] .art { border: 2px solid var(--ink-line); box-shadow: var(--pop-shadow); transition: transform 0.15s, box-shadow 0.15s; }
:root[data-theme="pop"] .card-link:hover .art { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
:root[data-theme="pop"] .nav .nav-pill { background: var(--accent); border: 2px solid var(--ink-line); box-shadow: 2px 2px 0 var(--ink); }
:root[data-theme="pop"] .nav a.is-on { color: var(--accent-ink); font-weight: 700; }
:root[data-theme="pop"] .tabbar .nav-pill { background: linear-gradient(var(--accent), var(--accent)) no-repeat 50% 0 / 28px 4px; }
:root[data-theme="pop"] .tag-must { border: 1.5px solid var(--ink); color: var(--accent-ink); }
:root[data-theme="pop"] .srv { border-width: 2px; }
.theme-pop { --pv-bg: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.3px) 0 0 / 9px 9px, #1B1A22; --pv-text: #FBF8F1; --pv-accent: #C6FF4F; --pv-card: #2E2D38; --pv-r: 4px; --pv-btn: 5px; }
.theme-pop .theme-preview i:nth-child(3), .theme-pop .theme-preview::after { outline: 2px solid #FBF8F1; box-shadow: 2px 2px 0 #000; }
[data-mode="light"] .theme-pop { --pv-bg: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1.3px) 0 0 / 9px 9px, #FFF4DE; --pv-text: #111; --pv-accent: #FF4F8B; --pv-card: #FFFFFF; }
[data-mode="light"] .theme-pop .theme-preview i:nth-child(3), [data-mode="light"] .theme-pop .theme-preview::after { outline-color: #111; box-shadow: 2px 2px 0 #111; }

/* ---------- Neon: night city — deep violet, magenta and cyan glow ---------- */
:root[data-theme="neon"] {
  --accent: #FF3CAC;
  --accent-ink: #1A0414;
  --neon-2: #2DE2E6;
  --bg: #07060F;
  --s1: #0F0D1C;
  --s2: #16132A;
  --s3: #1E1A38;
  --s4: #2A2550;
  --raised: rgba(22, 19, 42, 0.97);
  --line: rgba(170, 150, 255, 0.16);
  --line-2: rgba(170, 150, 255, 0.32);
  --text: #F3F0FF;
  --text-2: #BCB5DD;
  --text-3: #8078AA;
  --glass: rgba(7, 6, 15, 0.72);
  --glass-2: rgba(7, 6, 15, 0.9);
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display: "Chakra Petch", "Inter", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
  --display-track: 0.01em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --word-style: normal;
  --word-weight: 700;
  --word-size: 22px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-art: 10px;
  --r-btn: 10px;
  --r-seg: 10px;
  --r-seg-in: 7px;
  --btn-h: 38px;
}
:root[data-theme="neon"][data-mode="light"] {
  --accent: #D1007A;
  --accent-ink: #FFFFFF;
  --neon-2: #008C99;
  --bg: #F5F2FF;
  --s1: #FFFFFF;
  --s2: #EDE8FF;
  --s3: #E2DBFF;
  --s4: #D2C8FF;
  --raised: rgba(255, 255, 255, 0.98);
  --line: rgba(60, 30, 140, 0.14);
  --line-2: rgba(60, 30, 140, 0.26);
  --text: #150F2E;
  --text-2: #4A4270;
  --text-3: #7A7299;
  --glass: rgba(245, 242, 255, 0.76);
  --glass-2: rgba(245, 242, 255, 0.92);
}
[data-theme="neon"] body {
  background-image: linear-gradient(color-mix(in oklab, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--neon-2) 6%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
[data-theme="neon"] .eyebrow, [data-theme="neon"] .label { font-family: var(--display); letter-spacing: 0.18em; color: var(--neon-2); }

/* ---------- Retro: an 80s VHS tape — warm dusk colours, scanlines, a little colour bleed ---------- */
:root[data-theme="retro"] {
  --accent: #FF8A3D;
  --accent-ink: #1B1020;
  --retro-2: #3DD6D0;
  --bg: #1A1320;
  --s1: #231A2B;
  --s2: #2C2136;
  --s3: #372A43;
  --s4: #463653;
  --raised: #231A2B;
  --line: rgba(255, 233, 214, 0.14);
  --line-2: rgba(255, 233, 214, 0.28);
  --text: #FFEBD9;
  --text-2: #D8C2B0;
  --text-3: #9E8A7C;
  --glass: rgba(26, 19, 32, 0.9);
  --glass-2: rgba(26, 19, 32, 0.97);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "VT323", "Space Mono", ui-monospace, monospace;
  --display-weight: 400;
  --display-track: 0.02em;
  --em-style: normal;
  --em-color: var(--accent);
  --word: "VT323", ui-monospace, monospace;
  --word-style: normal;
  --word-weight: 400;
  --word-size: 30px;
  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;
  --r-art: 4px;
  --r-btn: 5px;
  --r-seg: 5px;
  --r-seg-in: 3px;
  --btn-h: 38px;
}
:root[data-theme="retro"][data-mode="light"] {
  --accent: #E4572E;
  --accent-ink: #FFF8EE;
  --retro-2: #0F8B8D;
  --bg: #F4EAD5;
  --s1: #FBF4E6;
  --s2: #EFE2C7;
  --s3: #E6D5B3;
  --s4: #D8C49C;
  --raised: #FBF4E6;
  --line: rgba(60, 35, 20, 0.14);
  --line-2: rgba(60, 35, 20, 0.28);
  --text: #2B1B12;
  --text-2: #5E4636;
  --text-3: #8E7564;
  --glass: rgba(244, 234, 213, 0.9);
  --glass-2: rgba(244, 234, 213, 0.97);
}
[data-theme="retro"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
}
[data-mode="light"][data-theme="retro"] body::after { background: repeating-linear-gradient(0deg, rgba(60, 35, 20, 0.05) 0 1px, transparent 1px 3px); }
[data-theme="retro"] .display { font-size: clamp(40px, 6.4vw, 78px); line-height: 0.95; }
[data-theme="retro"] .eyebrow, [data-theme="retro"] .label { font-family: var(--display); font-size: 16px; letter-spacing: 0.12em; color: var(--retro-2); }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 16px);
  scrollbar-color: var(--s4) transparent;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s;
}

html.has-modal, html.has-player { overflow: hidden; }

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
p { margin: 0 0 0.75em; }
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[data-theme="mac"] :focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 1px; }
.view:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: 1720px; margin: 0 auto; padding-inline: var(--gutter); }
.page { padding-block: 32px 72px; }
.grow { flex: 1; }

/* ---------- type ---------- */

.display {
  font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(40px, 6vw, 72px);
  line-height: 1; letter-spacing: var(--display-track); margin: 0;
}
[data-theme="material"] .display, [data-theme="mac"] .display { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.display em, .h1 em { font-style: var(--em-style); color: var(--em-color); }
.display-sm { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; margin: 0 0 6px; }
[data-theme="material"] .display-sm, [data-theme="mac"] .display-sm { font-size: clamp(24px, 2.6vw, 32px); }
.h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
.h2 em { font-family: var(--display); font-style: var(--em-style); font-weight: var(--display-weight); font-size: 1.2em; }
.h3 { font-size: 15px; font-weight: 600; margin: 0; }
.eyebrow, .label {
  display: block; margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
[data-theme="mac"] .eyebrow, [data-theme="mac"] .label { letter-spacing: 0.04em; text-transform: none; font-size: 12px; }
[data-theme="material"] .eyebrow, [data-theme="material"] .label { letter-spacing: 0.06em; }
.eyebrow a:hover { color: var(--text); }
.sub { color: var(--text-2); margin: 4px 0 0; font-size: 13px; }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.lede { font-size: 16px; line-height: 1.65; color: color-mix(in oklab, var(--text) 86%, var(--text-2)); max-width: 68ch; margin: 0; }
.footnote { font-size: 12px; color: var(--text-3); margin: 12px 0 0; }
kbd {
  display: inline-block; min-width: 18px; padding: 3px 5px; text-align: center;
  font: 500 11px/1 var(--sans); color: var(--text-2);
  background: var(--s2); border: 1px solid var(--line-2); border-radius: 4px;
}

/* Icons: line SVGs, or Material Symbols in the Material theme. Size comes from --isz. */
.i {
  width: var(--isz, 18px); height: var(--isz, 18px); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.msr {
  /* The glyph is drawn a little larger than its box (Material's own padding); place-content keeps it centred —
     without it the grid track starts at the left and the glyph sits right and low, clipped on the right. */
  display: inline-grid; place-items: center; place-content: center; overflow: hidden;
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: calc(var(--isz, 18px) * 1.2); line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; direction: ltr; word-wrap: normal; user-select: none; -webkit-user-select: none;
  font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* Material icons are spans; keep generic "x span" rules (labels, counters, collapsing text) off them. */
.i.msr { flex: none; display: inline-grid !important; margin: 0; padding: 0; background: none; border-radius: 0; text-align: center; text-decoration: none; }

/* ---------- controls ---------- */

.btn {
  --isz: 17px;
  display: inline-flex; align-items: center; gap: 8px; height: var(--btn-h); padding: 0 14px;
  border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--s3); color: var(--text);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn:hover { background: var(--s4); border-color: var(--line-2); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn small { font-size: 12px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; box-shadow: none; }
.btn-primary:hover { background: var(--accent-hi); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--s2); }
.btn-lg { height: calc(var(--btn-h) + 6px); padding: 0 18px; font-size: 14px; }
.btn-sm { --isz: 15px; height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.btn.toggle.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn-danger { background: #B0513F; border-color: transparent; color: #fff; }
.btn-danger:hover { background: #C25A47; border-color: transparent; }
.btn-danger-ghost { background: transparent; color: var(--down); }
.btn-danger-ghost:hover { background: color-mix(in oklab, var(--down) 10%, transparent); border-color: color-mix(in oklab, var(--down) 35%, transparent); }
.btn kbd { background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

[data-theme="material"] .btn { border-color: transparent; font-weight: 500; letter-spacing: 0.01em; padding: 0 20px; }
[data-theme="material"] .btn-sm { padding: 0 14px; }
[data-theme="material"] .btn-ghost { color: var(--accent); }
[data-theme="material"] .btn-ghost:hover { background: var(--accent-soft); }
[data-theme="material"] .btn-primary:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
[data-theme="mac"] .btn { box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.18); }
[data-theme="mac"] .btn-ghost { box-shadow: none; }
[data-theme="mac"] .btn-primary { background: linear-gradient(180deg, color-mix(in oklab, var(--accent), white 8%), var(--accent)); }

.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--r); color: var(--text-2); transition: background 0.15s, color 0.15s, transform 0.1s;
}
[data-theme="material"] .icon-btn { border-radius: 999px; }
.icon-btn:hover { background: var(--s2); color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn-sm { --isz: 16px; width: 30px; height: 30px; }
.icon-btn-lg { width: calc(var(--btn-h) + 6px); height: calc(var(--btn-h) + 6px); border: 1px solid var(--line); background: var(--s3); color: var(--text); }
[data-theme="material"] .icon-btn-lg { border-color: transparent; }
.icon-btn-lg:hover { background: var(--s4); }
.fav.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.fav.is-on .i { fill: currentColor; }
.fav.is-on .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

.link { color: var(--accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-more { --isz: 14px; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.link-more:hover { color: var(--text); }

.input {
  width: 100%; height: 38px; padding: 0 12px; border-radius: var(--r);
  background: var(--s1); border: 1px solid var(--line-2); color: var(--text); font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-3); }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }

.select { --isz: 14px; position: relative; display: inline-flex; align-items: center; }
.select select {
  appearance: none; -webkit-appearance: none; height: 34px; padding: 0 30px 0 12px;
  border-radius: var(--r); background: var(--s2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; max-width: 200px;
}
[data-theme="material"] .select select { border-radius: 999px; padding-left: 16px; }
.select select:hover { border-color: var(--line-2); }
.select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.select .i { position: absolute; right: 9px; color: var(--text-3); pointer-events: none; }

.seg {
  --isz: 16px;
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-seg);
}
.seg::-webkit-scrollbar { display: none; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: var(--r-seg-in); font-size: 13px; color: var(--text-2); white-space: nowrap;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--s4); color: var(--text); }
[data-theme="material"] .seg { padding: 0; gap: 0; background: transparent; border-color: var(--line-2); }
[data-theme="material"] .seg-btn { height: 34px; padding: 0 14px; border-radius: 0; border-right: 1px solid var(--line-2); }
[data-theme="material"] .seg-btn:last-child { border-right: 0; }
[data-theme="material"] .seg-btn.is-on { background: color-mix(in oklab, var(--accent) 24%, transparent); }
[data-theme="mac"] .seg { background: color-mix(in oklab, var(--text) 9%, transparent); border-color: transparent; padding: 2px; }
[data-theme="mac"] .seg-btn { height: 26px; }
[data-theme="mac"] .seg-btn.is-on { background: var(--s4); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
[data-theme="mac"][data-mode="light"] .seg-btn.is-on { background: #fff; }

.chip {
  --isz: 14px;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--s2); border: 1px solid var(--line); color: var(--text-2); font-size: 13px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
[data-theme="material"] .chip { border-radius: var(--r-sm); background: transparent; border-color: var(--line-2); }

/* ---------- the aperture mark ---------- */

.mark { display: block; flex: none; overflow: visible; }
/* The Iris mark's six blades: shades of the accent, lighter at the top left, darker below (theme.js SHADES). */
.mark .mark-b0 { fill: var(--accent); }
.mark .mark-b1 { fill: color-mix(in oklab, var(--accent) 82%, #fff); }
.mark .mark-b2 { fill: color-mix(in oklab, var(--accent) 66%, #fff); }
.mark .mark-b3 { fill: color-mix(in oklab, var(--accent) 86%, #000); }
.mark .mark-b4 { fill: color-mix(in oklab, var(--accent) 70%, #000); }
.mark .mark-b5 { fill: color-mix(in oklab, var(--accent) 88%, #000); }
.mark .mark-pupil { fill: #0B0B0E; stroke: color-mix(in oklab, var(--accent) 45%, #000); }
.mark .mark-glint { fill: #fff; opacity: 0.92; }
.brand-mark { transition: transform 0.9s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(60deg); }

.loader { display: inline-flex; align-items: center; gap: 10px; color: var(--text-3); }
.mark-spin { animation: spin 14s linear infinite; }
.rail-loading, .page-loading { display: grid; place-items: center; min-height: 180px; }
.page-loading { min-height: 50vh; }
.year-more { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 24px 0 8px; font-size: 13px; color: var(--text-3); }
.year-more:empty { padding: 0; min-height: 0; }

/* ---------- boot: the iris opens on the app ---------- */

.boot {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
/* The aperture sits at the exact centre of the screen (the word hangs below it), so the opening that reveals the app
   grows from the aperture itself; the aperture flies toward you as it opens. */
.boot-inner { position: relative; display: grid; place-items: center; animation: bootIn 0.6s var(--ease-out) both; }
.boot-word {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--word); font-style: var(--word-style); font-weight: var(--word-weight); font-size: 30px;
  letter-spacing: 0.02em; color: var(--text); animation: bootWord 0.9s 0.15s var(--ease-out) both;
}
.boot.is-done { --hole: 150vmax; opacity: 0; transition: --hole 0.9s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.3s 0.6s; pointer-events: none; }
.boot.is-done .boot-inner { transform: scale(2.6); opacity: 0; transition: transform 0.8s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.4s 0.2s; }
@keyframes bootIn { from { opacity: 0; transform: scale(0.86) rotate(-30deg); } }
@keyframes bootWord { from { opacity: 0; letter-spacing: 0.3em; filter: blur(6px); } }

/* ---------- chrome ---------- */

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200; padding: 8px 12px;
  border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip:focus { top: 12px; }

.topbar {
  position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s;
  view-transition-name: topbar;
}
.topbar.is-scrolled { background: var(--glass-2); border-color: var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: var(--topbar-h); }

.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-word { font-family: var(--word); font-style: var(--word-style); font-weight: var(--word-weight); font-size: var(--word-size); line-height: 1; letter-spacing: -0.01em; }

.nav { position: relative; display: flex; gap: 2px; }
.nav a { position: relative; z-index: 1; padding: 7px 12px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--text-2); transition: color 0.2s; }
.nav a:hover { color: var(--text); }
.nav a.is-on { color: var(--text); }
/* One highlight per bar, gliding to the current tab (app.js places it; a little overshoot, like a spring). */
.nav-pill {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r); background: var(--s2); pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.45, 1), width 0.45s cubic-bezier(0.34, 1.3, 0.45, 1), opacity 0.2s;
}
[data-theme="material"] .nav a { border-radius: 999px; padding: 7px 14px; }
[data-theme="material"] .nav .nav-pill { border-radius: 999px; background: color-mix(in oklab, var(--accent) 22%, transparent); }
[data-theme="cinema"] .nav .nav-pill { border-radius: 0; background: linear-gradient(var(--accent), var(--accent)) no-repeat 50% calc(100% - 1px) / calc(100% - 24px) 2px; }

.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.search-trigger {
  display: flex; align-items: center; gap: 10px; min-width: 230px; height: 36px; padding: 0 8px 0 12px; margin-right: 6px;
  border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); color: var(--text-3); font-size: 13px;
  transition: border-color 0.15s, color 0.15s;
}
[data-theme="material"] .search-trigger { border-radius: 999px; background: var(--s3); border-color: transparent; padding-left: 16px; }
.search-trigger span { flex: 1; text-align: left; }
.search-trigger:hover { border-color: var(--line-2); color: var(--text-2); }

.tabbar { display: none; }

.site-foot { margin-top: 24px; padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.site-foot .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.site-foot .link { color: var(--text-2); }

/* ---------- motion: page transitions & reveal ---------- */

.view.enter > * { animation: enter 0.4s var(--ease-out) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: 0.4; } }

/* The bars stay live through a page change (no snapshot cross-fade), so their highlight is seen gliding. */
::view-transition-old(topbar), ::view-transition-old(tabbar) { display: none; }
::view-transition-new(topbar), ::view-transition-new(tabbar) { animation: none; }
::view-transition-old(root) { animation: vtOut 0.18s var(--ease) both; }
::view-transition-new(root) { animation: vtIn 0.34s var(--ease-out) both; }
::view-transition-group(poster) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1); }
::view-transition-old(poster), ::view-transition-new(poster) { animation-duration: 0.45s; }
/* Pages change with a gentle zoom from the centre: the new one settles in, the old one eases out. */
@keyframes vtOut { to { opacity: 0; transform: scale(1.012); } }
@keyframes vtIn { from { opacity: 0; transform: scale(0.985); } }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.swap-in { animation: swapIn 0.5s var(--ease-out) both; }
@keyframes swapIn { from { opacity: 0; transform: translateX(16px); filter: blur(4px); } }

/* ---------- sections & rails ---------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.head-actions { margin-top: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-tools { display: flex; align-items: center; gap: 2px; }
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
[data-theme="material"] .panel { border-color: transparent; }

.rail { margin-top: 48px; }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(128px, 11.5vw, 196px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-wide { grid-auto-columns: clamp(200px, 20vw, 260px); }
.rail .empty { padding: 32px 16px; }
.rail .grid { margin-top: 4px; }
@media (hover: none) { .rail-btn { display: none; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 28px 18px; }
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 32px 20px; } }
.sentinel { height: 1px; }

/* ---------- posters ---------- */

.art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r-art); background: var(--s2); isolation: isolate; }
.art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out); z-index: 1;
}
.art img.is-in { opacity: 1; transform: none; }
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px;
  background: linear-gradient(165deg, hsl(var(--ph) 22% var(--ph-a)), hsl(var(--ph) 16% var(--ph-b)));
}
.ph-title {
  font-family: var(--display); font-size: 17px; line-height: 1.1; color: var(--ph-ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="material"] .ph-title, [data-theme="mac"] .ph-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ph-year { font-size: 10.5px; letter-spacing: 0.12em; color: color-mix(in oklab, var(--ph-ink) 55%, transparent); }
.row-art .ph span, .mini-art .ph span, .pal-art .ph span, .diary-art .ph span, .coll-cover .ph span { display: none; }

/* ---------- cards: posters lean toward the pointer (--rx/--ry set by ui.js) ---------- */

.card { position: relative; min-width: 0; }
.card-link { display: block; position: relative; border-radius: var(--r-art); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible .art { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-link .art {
  --lift: 0px; --sc: 1;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)) scale(var(--sc));
  box-shadow: inset 0 0 0 1px var(--hair-in), 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.card-link .art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hair-in);
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.32));
}
@media (hover: hover) {
  .card:hover .card-link .art { --lift: -3px; --sc: 1.012; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38); }
}

.badges { --isz: 13px; position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 4px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 22px; min-width: 22px; padding: 0 5px;
  border-radius: var(--r-sm); background: var(--over); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600; color: #F5F5F2;
}
[data-theme="material"] .badge { border-radius: 999px; padding: 0 6px; }
/* A badge that's only an icon (the tick, the heart) is a circle with the icon in the middle. */
:root .badge:not(:has(b)) { width: 22px; padding: 0; }
.badge .i { stroke-width: 2; }
.badge-seen { background: var(--accent); color: var(--accent-ink); }
.badge-fav .i { fill: #F5F5F2; }
.badge-fav .msr { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }

.card-quick {
  --isz: 16px;
  position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; flex-direction: column; gap: 6px;
}
.card-quick .qa { opacity: 0; transform: translateY(-3px); transition: opacity 0.18s, transform 0.18s var(--ease), background 0.15s; }
.card:hover .card-quick .qa, .card:focus-within .card-quick .qa, .card-quick .qa.on { opacity: 1; transform: none; }
@media (hover: none) {
  .card-quick .qa { opacity: 1; transform: none; width: 28px; height: 28px; }
}
.qa {
  --isz: 16px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r);
  background: var(--over); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12); color: #F5F5F2; transition: background 0.15s, color 0.15s, transform 0.1s;
}
[data-theme="material"] .qa { border-radius: 999px; }
.qa:hover { background: rgba(36, 36, 40, 0.92); }
.qa:active { transform: scale(0.9); }
.qa.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.qa.on .i { stroke-width: 2; }

.card-progress { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.card-progress i { display: block; height: 100%; background: var(--accent); }

.card-body { padding-top: 10px; }
.card-title { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--text-3); }
.card-meta > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-caption { margin-top: 2px; font-size: 12px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-caption b, .row-caption b { color: var(--text-2); font-weight: 500; }
.imdb { font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.stars {
  display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; white-space: nowrap; color: transparent;
  background: linear-gradient(90deg, var(--accent) calc(var(--v) * 100%), var(--star-off) calc(var(--v) * 100%));
  -webkit-background-clip: text; background-clip: text;
}
.stars-sm { font-size: 11.5px; letter-spacing: 0.5px; flex: none; }

/* ---------- rows ---------- */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 84px 96px auto; align-items: center; gap: 16px;
  padding: 10px; border-bottom: 1px solid var(--line); border-radius: var(--r); transition: background 0.15s;
}
.row:hover { background: var(--s1); }
.ranked .row { grid-template-columns: 30px 48px minmax(0, 1fr) 84px 96px auto; }
.row-rank { font-family: var(--display); font-size: 22px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.row-art .art { width: 48px; border-radius: calc(var(--r-art) * 0.6); }
.row-main { min-width: 0; }
.row-title { font-size: 14px; font-weight: 500; }
.row-title:hover { color: var(--accent); }
.row-meta { margin-top: 2px; overflow: hidden; font-size: 12.5px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.row-caption { margin-top: 3px; font-size: 12px; color: var(--text-2); }
.row-score { display: flex; flex-direction: column; align-items: flex-end; }
.row-score small { font-size: 11px; color: var(--text-3); }
.row-you { font-size: 12px; }
.row-actions { display: flex; gap: 6px; }
.row .qa, .ep .qa { background: var(--s2); border-color: var(--line); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
.row .qa:hover, .ep .qa:hover { background: var(--s3); }
.row .qa.on, .ep .qa.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

/* ---------- empty & skeleton ---------- */

.empty { padding: 56px 20px; text-align: center; color: var(--text-2); background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.empty .h3 { margin-bottom: 8px; font-family: var(--display); font-size: 26px; font-weight: var(--display-weight); letter-spacing: var(--display-track); color: var(--text); }
[data-theme="material"] .empty .h3, [data-theme="mac"] .empty .h3 { font-size: 20px; }
.empty p { max-width: 48ch; margin: 0 auto 16px; }

.skeleton-line {
  display: block; height: 12px; max-width: 520px; margin: 9px 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%); background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-line.short { display: inline-block; width: 40%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--s4); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.spinner-sm { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-width: 1.5px; }

/* ---------- browse ---------- */

.filters { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; display: flex; align-items: center; }
.search-field input {
  width: 100%; height: 50px; padding: 0 48px 0 46px; border-radius: var(--r);
  background: var(--s1); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="material"] .search-field input { border-radius: 999px; background: var(--s3); border-color: transparent; padding-left: 50px; }
.search-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field input::placeholder { color: var(--text-3); }
.search-field input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }
.search-field-icon { position: absolute; left: 15px; display: grid; color: var(--text-3); pointer-events: none; }
[data-theme="material"] .search-field-icon { left: 18px; }
.search-field kbd { position: absolute; right: 14px; pointer-events: none; }
.search-field input:focus ~ kbd, .search-field input:not(:placeholder-shown) ~ kbd { display: none; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-row + .filter-row { margin-top: -2px; }

.recent-searches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 24px; }
.recent-searches .label { margin: 0 4px 0 0; }
.did-you-mean {
  margin: -8px 0 22px; padding: 11px 14px; border-radius: var(--r);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-2); font-size: 13.5px;
  animation: enter 0.3s var(--ease) both;
}
.did-you-mean strong { color: var(--text); font-weight: 600; }

/* ---------- home ---------- */

.home-hero { padding-top: 0; }
/* The greeting is a hello, not a poster: smaller than a page title, whatever the style or mood font. */
.home-hero .hero-line { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; }
[data-theme="retro"] .home-hero .hero-line { font-size: clamp(36px, 5.4vw, 64px); }
.lib-tabs-top .tabs { margin-top: 0; }
.hero-search {
  --isz: 20px;
  display: flex; align-items: center; gap: 12px; width: min(640px, 100%); height: 56px; margin-top: 28px; padding: 0 12px 0 18px;
  border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line-2); color: var(--text-3); font-size: 15px;
  box-shadow: var(--shadow); transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.home-hero .hero-search { width: 100%; } /* the same width as everything below it */
[data-theme="material"] .hero-search { border-radius: 999px; background: var(--s3); border-color: transparent; box-shadow: none; padding-left: 22px; }
.hero-search span { flex: 1; min-width: 0; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.hero-search:hover { border-color: var(--accent-line); color: var(--text-2); transform: translateY(-1px); }

.glance {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 22px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* A compact strip: numbers you glance at, not a dashboard. */
.glance-item { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 12px 16px; background: var(--bg); text-align: center; transition: background 0.15s; }
.glance-item:hover { background: var(--s1); }
.glance-item strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.glance-item span { max-width: 100%; font-size: 12px; color: var(--text-3); }
[data-theme="material"] .glance { gap: 8px; background: transparent; border: 0; border-radius: 0; }
[data-theme="material"] .glance-item { background: var(--s2); border-radius: var(--r-lg); }

.home-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; }
.tonight {
  margin-top: 40px; padding: 18px 18px 16px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
[data-theme="material"] .tonight { border-color: transparent; background: var(--s2); }
.tonight-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.tonight-head .eyebrow { margin: 0 0 2px; }
.tonight-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pick-card {
  position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0;
  padding: 8px; border-radius: var(--r-lg); background: color-mix(in oklab, var(--s2) 70%, transparent); transition: background 0.2s;
}
.pick-card:hover { background: var(--s3); }
.pick-art .art { width: 62px; border-radius: calc(var(--r-art) * 0.8); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 30px; }
.pick-title { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pick-title:hover { color: var(--accent); }
.pick-facts { overflow: hidden; font-size: 12px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.pick-why { overflow: hidden; font-size: 12px; color: var(--accent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.pick-play {
  --isz: 15px; position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.pick-card:hover .pick-play, .pick-play:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .pick-play { opacity: 1; transform: none; } }
@media (max-width: 900px) and (min-width: 641px) { .tonight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tonight-list .pick-card:nth-child(3) { grid-column: 1 / -1; } }
.recent .section-head { margin-bottom: 6px; }
.mini-diary { list-style: none; margin: 0; padding: 0; }
.mini-diary a { display: grid; grid-template-columns: 46px 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.mini-diary li:first-child a { border-top: 0; }
.mini-diary a:hover .mini-title { color: var(--accent); }
.mini-date { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mini-art .art { width: 26px; border-radius: 3px; }
.mini-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rewatch { --isz: 13px; }
.rewatch .i { color: var(--text-3); vertical-align: -2px; }

.resume-card { position: relative; display: block; min-width: 0; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.3s var(--ease-out), opacity 0.24s; }
.resume-open { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55)); }
/* Remove from Continue watching: shows on hover (always on touch screens), top right of the picture. */
.resume-x {
  --isz: 16px; position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(10, 10, 11, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff;
  opacity: 0; transition: opacity 0.18s, background 0.15s, transform 0.1s;
}
.resume-card:hover .resume-x, .resume-x:focus-visible { opacity: 1; }
.resume-x:hover { background: rgba(10, 10, 11, 0.85); }
.resume-x:active { transform: scale(0.9); }
@media (hover: none) { .resume-x { opacity: 1; width: 28px; height: 28px; top: 6px; right: 6px; } }
.resume-card.is-leaving { opacity: 0; transform: scale(0.94); pointer-events: none; }
.resume-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--s2); box-shadow: inset 0 0 0 1px var(--hair-in); }
.resume-art > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.resume-card:hover .resume-art > img { transform: scale(1.04); }
.resume-art .art { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
/* Just the round button plays; the rest of the card opens the title's page. */
.resume-play { --isz: 20px; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: auto; border-radius: 50%; color: #fff; }
.resume-art .card-progress { z-index: 2; }
.resume-play .i { box-sizing: content-box; padding: 12px; border-radius: 50%; background: rgba(10, 10, 11, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.2s var(--ease), background 0.2s; }
.resume-card:hover .resume-play .i { transform: scale(1.08); background: var(--accent); color: var(--accent-ink); }
.resume-body { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; }
.resume-body strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.resume-body span { color: var(--text-3); white-space: nowrap; }

/* ---------- years: see the dial section below ---------- */

/* ---------- film & show pages ---------- */

.film { position: relative; }
.film-backdrop {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--topbar-h)); z-index: 0; height: min(80vh, 760px);
  overflow: hidden; opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none;
}
.film-backdrop.is-in { opacity: 1; }
.film-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.film-backdrop.is-in img { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.film-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 50%, transparent) 0%, color-mix(in oklab, var(--bg) 74%, transparent) 50%, var(--bg) 100%),
    linear-gradient(90deg, color-mix(in oklab, var(--bg) 90%, transparent) 0%, color-mix(in oklab, var(--bg) 25%, transparent) 75%);
}
[data-mode="light"] .film-backdrop::after {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 62%, transparent) 0%, color-mix(in oklab, var(--bg) 82%, transparent) 50%, var(--bg) 100%),
    linear-gradient(90deg, color-mix(in oklab, var(--bg) 94%, transparent) 0%, color-mix(in oklab, var(--bg) 40%, transparent) 75%);
}
.film-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: end; gap: 40px; padding-top: clamp(40px, 12vh, 140px); }
.film-poster .art { border-radius: calc(var(--r-art) + 2px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--hair-in); }
.film-title { margin: 6px 0 14px; font-size: clamp(40px, 6vw, 76px); overflow-wrap: anywhere; }
[data-theme="material"] .film-title, [data-theme="mac"] .film-title { font-size: clamp(32px, 4.6vw, 58px); }
.film-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 14px; color: var(--text-2); }
.sep { margin: 0 4px; color: var(--text-3); }
.film-scores { margin: 10px 0 0; min-height: 1px; }
.imdb-score { font-variant-numeric: tabular-nums; }
.imdb-score b { margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); }
.imdb-score small { margin-left: 4px; color: var(--text-3); }
.film-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.film-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; margin-top: 56px; }
.film-main > section, .film-main > .franchise { margin-bottom: 36px; }
.credits { display: grid; gap: 16px; }
.credits p { margin: 0; }
.details { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.details dt { color: var(--text-3); }
.details dd { margin: 0; }
.ext-links { display: flex; gap: 18px; margin: 18px 0 0; }

.film-record { position: sticky; top: calc(var(--topbar-h) + 16px); align-self: start; display: flex; flex-direction: column; gap: 24px; }
[data-slot="record"] { display: flex; flex-direction: column; gap: 24px; }
.record-block .label { margin-bottom: 10px; }
.record-block p { margin: 0; color: var(--text-2); }
.rate { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; border-radius: 6px; }
.rate-glyphs {
  font-size: 32px; line-height: 1; letter-spacing: 3px; color: transparent; white-space: nowrap;
  background: linear-gradient(90deg, var(--accent) calc(var(--v) * 100%), var(--star-off) calc(var(--v) * 100%));
  -webkit-background-clip: text; background-clip: text; transition: filter 0.15s;
}
.rate.is-preview .rate-glyphs { filter: brightness(1.2); }
.rate.pop .rate-glyphs { animation: pop 0.3s var(--ease); }
.rate-value { min-width: 2.6em; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.record-summary { margin: 0 0 10px; color: var(--text-2); }
.log { --isz: 15px; list-style: none; margin: 0 0 12px; padding: 0; }
.log li { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--line); }
.log li span { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.log em { font-size: 12px; font-style: normal; color: var(--text-3); }
.log .i { color: var(--text-3); }
.log-form { display: flex; gap: 8px; margin-top: 10px; }
.log-form .input { flex: 1; min-width: 0; }

.franchise { display: grid; gap: 3px; padding: 16px 18px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s; }
.franchise:hover { border-color: var(--line-2); }
.franchise .label { margin: 0; }
.franchise span { font-size: 13px; color: var(--text-2); }
.meter { display: block; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: var(--s4); }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.6s var(--ease-out); }
.meter-lg { height: 6px; margin: 22px 0 28px; }

/* episodes */
.show-season { margin-bottom: 36px; }
.season-nav { margin-bottom: 18px; }
.season-nav .seg { max-width: 100%; }
.season-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.season-head .muted { font-weight: 400; font-size: 14px; margin-left: 6px; }
.episodes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ep {
  display: grid; grid-template-columns: 172px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 10px; border-radius: var(--r-lg); transition: background 0.15s, opacity 0.15s;
}
.ep:hover { background: var(--s1); }
.ep.is-upcoming { opacity: 0.55; }
.ep-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--s2); box-shadow: inset 0 0 0 1px var(--hair-in); }
.ep-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ep-play { --isz: 22px; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.2s; }
.ep-thumb:hover .ep-play, .ep-thumb:focus-visible .ep-play { opacity: 1; }
@media (hover: none) { .ep-play { opacity: 0.85; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.5)); } }
.ep.is-watched .ep-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: var(--accent); }
.ep.is-watched .ep-title { color: var(--text-2); }
.ep-main { min-width: 0; }
.ep-title { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 500; }
.ep-num { flex: none; min-width: 2.4em; font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ep-date { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.ep-overview { margin: 6px 0 0; font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- library ---------- */

.tabs { display: flex; gap: 4px; margin: 22px 0 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 14px; border-bottom: 2px solid transparent; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color 0.15s, border-color 0.2s; }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--text); border-color: var(--accent); }
.tab span { padding: 1px 7px; border-radius: 10px; background: var(--s2); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tabs + .filter-row { margin-bottom: 24px; }

.collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.coll { display: block; overflow: hidden; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s, transform 0.25s var(--ease-out); }
.coll:hover { border-color: var(--line-2); transform: translateY(-3px); }
.coll-cover { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--bg); }
.coll-cover .art { border-radius: 0; }
.coll-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.coll-body span { font-size: 12.5px; color: var(--text-2); }

/* ---------- diary ---------- */

.scope-nav { margin: 22px 0 24px; overflow-x: auto; scrollbar-width: none; }
.heat-wrap { overflow-x: auto; padding-bottom: 4px; }
/* 53 week-columns share the panel width; below ~560px the calendar scrolls instead of shrinking further. */
.heat { display: grid; gap: 6px; min-width: 560px; }
.heat-months { display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); column-gap: 3px; font-size: 11px; color: var(--text-3); }
.heat-months span { white-space: nowrap; }
.heat-grid { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.heat-grid i { aspect-ratio: 1; }
.heat-grid i, .heat-legend i { display: block; border-radius: 3px; background: var(--s3); }
.heat-grid i.h-pad { background: transparent; }
.heat-grid i:hover { outline: 1px solid var(--text-2); outline-offset: 1px; }
.heat-grid .l1, .heat-legend .l1 { background: color-mix(in oklab, var(--accent) 38%, var(--s3)); }
.heat-grid .l2, .heat-legend .l2 { background: color-mix(in oklab, var(--accent) 68%, var(--s3)); }
.heat-grid .l3, .heat-legend .l3 { background: var(--accent); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--text-3); }
.heat-legend i { width: 12px; height: 12px; }
.heat-legend span { margin: 0 4px; }
.heat-summary { margin: 14px 0 0; color: var(--text-2); }
.heat-summary strong { color: var(--text); font-weight: 600; }

.month { margin-top: 44px; }
.month-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.month-head .h2 { font-family: var(--display); font-size: 32px; font-weight: var(--display-weight); letter-spacing: var(--display-track); }
[data-theme="material"] .month-head .h2, [data-theme="mac"] .month-head .h2 { font-size: 24px; }
.month-head .h2 span { color: var(--text-3); }
.month-head p { margin: 0; }
.diary-list { list-style: none; margin: 0; padding: 0; }
.diary-row { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.diary-day { display: flex; flex-direction: column; align-items: center; }
.diary-day strong { font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.diary-day small { margin-top: 3px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.diary-art .art { width: 44px; border-radius: calc(var(--r-art) * 0.6); }
.diary-main { min-width: 0; }
.diary-title { font-size: 15px; font-weight: 500; }
.diary-title:hover { color: var(--accent); }
.diary-note { margin: 4px 0 0; font-family: var(--display); font-size: 16px; font-style: var(--em-style); color: var(--text-2); }
.diary-rating { display: flex; align-items: center; gap: 8px; }
.fav-mark { --isz: 14px; }
.fav-mark .i { fill: var(--accent); stroke: var(--accent); }
.fav-mark .msr { color: var(--accent); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }

/* ---------- stats ---------- */

.stat-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 48px; padding: 4px 0 28px; }
.hero-figure { display: flex; flex-direction: column; }
.hero-num { font-size: clamp(72px, 10vw, 124px); font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.hero-label { margin-top: 10px; color: var(--text-2); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--bg); }
[data-theme="material"] .tiles { gap: 8px; background: transparent; border: 0; border-radius: 0; }
[data-theme="material"] .tile { background: var(--s2); border-radius: var(--r-lg); }
.tile-label { font-size: 12px; color: var(--text-3); }
.tile-value { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 12px; color: var(--text-3); }
.chart-panel { margin-top: 24px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }

.cols { display: flex; align-items: stretch; gap: 2px; height: 190px; padding-top: 20px; }
.col { display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 0; border-radius: 4px; cursor: default; }
.col:focus-visible { outline-offset: 0; }
.col:hover, .col:focus-visible { background: color-mix(in oklab, var(--text) 4%, transparent); }
.col-plot { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; border-bottom: 1px solid var(--line-2); }
.col-bar { width: min(24px, 72%); border-radius: 4px 4px 0 0; background: var(--accent); transition: filter 0.15s; transform-origin: bottom; }
.reveal .col-bar { transform: scaleY(0); transition: transform 0.7s var(--ease-out), filter 0.15s; }
.reveal.in .col-bar { transform: none; }
.col-bar.is-zero { height: 0 !important; }
.col:hover .col-bar, .col:focus-visible .col-bar { filter: brightness(1.2); }
.col-val { margin-bottom: 5px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.col-label { margin-top: 7px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cols-dense .col-label { font-size: 10px; }
.cols-dense .col:nth-child(even) .col-label { visibility: hidden; }

.bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) 34px; align-items: center; gap: 12px; border-radius: 4px; }
.bars li:hover .bar-fill, .bars li:focus-visible .bar-fill { filter: brightness(1.2); }
.bar-label { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.bar-track { height: 10px; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); transform-origin: left; }
.reveal .bar-fill { transform: scaleX(0); transition: transform 0.7s var(--ease-out), filter 0.15s; }
.reveal.in .bar-fill { transform: none; }
.bar-val { text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.ranked-list { margin: 0; padding: 0; list-style: none; }
.ranked-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ranked-list li:first-child { border-top: 0; }
.rank { width: 26px; font-family: var(--display); font-size: 18px; color: var(--text-3); }
.records { display: grid; margin: 0; }
.records > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.records > div:first-child { border-top: 0; }
.records dt { font-size: 13px; color: var(--text-3); }
.records dd { display: flex; flex-direction: column; margin: 0; }
.records dd small { font-size: 12px; color: var(--text-3); }
.records a:hover { color: var(--accent); }

.tip {
  position: fixed; left: 0; top: 0; z-index: 150; display: none; max-width: 300px; padding: 8px 10px; pointer-events: none;
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow);
}
.tip-value { font-size: 13px; font-weight: 600; }
.tip-label { font-size: 12px; color: var(--text-2); white-space: pre-line; }

/* ---------- modals ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center;
  padding: min(12vh, 120px) 16px 16px; overflow-y: auto; opacity: 0; transition: opacity 0.18s;
  background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-backdrop.in { opacity: 1; }
/* A glass sheet blurs what's behind it; a blur on the scrim too would leave it only the scrim to blur (the page shows
   through sharp). */
[data-glass]:not([data-glass="off"]) .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal {
  position: relative; width: 100%; max-width: 560px; transform: translateY(10px) scale(0.985); transition: transform 0.26s var(--ease-out);
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
[data-theme="mac"] .modal { -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
[data-theme="material"] .modal { border-color: transparent; border-radius: 28px; }
.modal-backdrop.in .modal { transform: none; }
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; }
.modal-pad { padding: 24px; }
.modal-sm { max-width: 440px; }
.modal-md { max-width: 680px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

.modal-palette { max-width: 640px; overflow: hidden; }
[data-theme="material"] .modal-palette { border-radius: 28px; }
.palette-input { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 16px; }
.palette-busy { display: inline-flex; }
.palette-list { max-height: min(56vh, 480px); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.pal-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); cursor: pointer; }
.pal-item.is-active { background: var(--s4); }
[data-theme="material"] .pal-item.is-active { background: color-mix(in oklab, var(--accent) 18%, transparent); }
[data-theme="mac"] .pal-item.is-active { background: var(--accent); color: var(--accent-ink); }
[data-theme="mac"] .pal-item.is-active small, [data-theme="mac"] .pal-item.is-active .pal-icon, [data-theme="mac"] .pal-item.is-active .pal-mark { color: color-mix(in oklab, var(--accent-ink) 75%, transparent); }
.pal-art .art { width: 30px; border-radius: 3px; }
.pal-icon { display: grid; place-items: center; width: 30px; color: var(--text-2); }
.pal-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pal-main strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.pal-main small { overflow: hidden; font-size: 12px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.pal-mark { color: var(--text-3); }
.pal-mark .i-ok { color: var(--accent); }
.pal-keys { display: flex; gap: 3px; }
.pal-empty { padding: 32px 16px; text-align: center; color: var(--text-2); }
.pal-empty small { color: var(--text-3); }
.palette-foot { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 16px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line); }
.palette-foot kbd { margin-right: 2px; }

/* Surprise me: a ring of posters spins and lands on the pick. */
.modal-pick { max-width: 820px; overflow: hidden; }
.pick { padding: 24px; }
.pick-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-right: 40px; }
.pick-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 340px; }
/* Kept cheap for phones: the edges fade with two overlays (a CSS mask here would redraw the whole 3D scene every
   frame), the ring is its own GPU layer, and posters don't run their own fade-in while it turns. */
.pick-ring-wrap { position: relative; display: grid; place-items: center; height: 340px; perspective: 1100px; overflow: hidden; }
.pick-ring-wrap::before, .pick-ring-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 24%; pointer-events: none;
  background: linear-gradient(90deg, var(--pick-bg, var(--raised)), transparent);
}
.pick-ring-wrap::before { left: 0; }
.pick-ring-wrap::after { right: 0; transform: scaleX(-1); }
.pick-ring {
  --ring-r: 300px;
  position: relative; width: 156px; aspect-ratio: 2 / 3; transform-style: preserve-3d; will-change: transform;
  transform: translateZ(calc(var(--ring-r) * -1)); transition: transform 2.8s cubic-bezier(0.3, 0.1, 0.12, 1); /* winds up, then a long glide */
}
.pick-face { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--ring-r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pick-face .art { border-radius: var(--r-art); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.pick-face .art img { opacity: 1; transform: none; transition: none; }
/* A solid sheet behind the ring: a live backdrop blur under a spinning 3D scene is the costliest thing on a phone. */
.modal.modal-pick, [data-glass]:not([data-glass="off"]) .modal.modal-pick, [data-theme="mac"] .modal.modal-pick {
  --pick-bg: var(--raised); background: var(--raised); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pick-body { min-width: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out); }
.pick-body.in { opacity: 1; transform: none; }
.pick-overview { margin: 12px 0 0; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pick-overview:empty { display: none; }

.modal-trailer { max-width: 1040px; overflow: hidden; background: #000; }
.modal-trailer .modal-x { background: rgba(0, 0, 0, 0.6); color: #fff; }
.trailer { aspect-ratio: 16 / 9; }
.trailer iframe { display: block; width: 100%; height: 100%; border: 0; }

/* settings */
.settings section { margin-top: 26px; }
.set-me { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.set-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 700; }
.set-me .input { flex: 1; min-width: 0; }
.set-group { padding: 0 14px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in oklab, var(--text) 3%, transparent); }
.set-group > .setting-row { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.set-group > .setting-row:first-child { border-top: 0; }
.settings .theme-grid + .set-group, .settings .set-group + .set-group { margin-top: 14px; }
.settings [data-storage] { margin-top: 12px; }
.settings .set-sub { margin: 18px 0 10px; }
.set-group .setting-stack { gap: 6px; }
.settings .h2 { margin-bottom: 4px; }
.settings .sub { margin-bottom: 12px; }
.settings label.btn { cursor: pointer; }

.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 8px 8px 10px; text-align: left;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s1);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.2s var(--ease-out);
}
.theme-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.theme-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-card strong { margin: 8px 2px 0; font-size: 13.5px; font-weight: 600; }
.theme-card small { margin: 0 2px; font-size: 11.5px; color: var(--text-3); overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.theme-preview { position: relative; display: block; width: 100%; height: 74px; overflow: hidden; border-radius: calc(var(--r-lg) - 5px); background: var(--pv-bg); box-shadow: inset 0 0 0 1px var(--hair-in); }
.theme-preview i { position: absolute; display: block; }
.theme-preview i:nth-child(1) { left: 10px; top: 12px; width: 44%; height: 8px; border-radius: var(--pv-r); background: var(--pv-text); opacity: 0.9; }
.theme-preview i:nth-child(2) { left: 10px; top: 26px; width: 30%; height: 5px; border-radius: var(--pv-r); background: var(--pv-text); opacity: 0.4; }
.theme-preview i:nth-child(3) { left: 10px; bottom: 10px; width: 46px; height: 17px; border-radius: var(--pv-btn); background: var(--pv-accent); }
.theme-preview::after { content: ""; position: absolute; right: 10px; top: 10px; bottom: 10px; width: 36px; border-radius: var(--pv-r); background: var(--pv-card); }
.theme-cinema { --pv-bg: #0A0A0B; --pv-text: #F5F5F2; --pv-accent: #D6A75D; --pv-card: #27272C; --pv-r: 2px; --pv-btn: 4px; }
.theme-material { --pv-bg: #17151B; --pv-text: #E6E0E9; --pv-accent: #D0BCFF; --pv-card: #36343B; --pv-r: 8px; --pv-btn: 999px; }
.theme-mac { --pv-bg: linear-gradient(140deg, #2C2C2E, #1C1C1E); --pv-text: #F5F5F7; --pv-accent: #0A84FF; --pv-card: #3A3A3C; --pv-r: 5px; --pv-btn: 6px; }
[data-mode="light"] .theme-cinema { --pv-bg: #F4F1EC; --pv-text: #191713; --pv-accent: #A8742A; --pv-card: #E0DAD0; }
[data-mode="light"] .theme-material { --pv-bg: #FEF7FF; --pv-text: #1D1B20; --pv-accent: #6750A4; --pv-card: #E6E0E9; }
[data-mode="light"] .theme-mac { --pv-bg: linear-gradient(140deg, #FFFFFF, #ECECEF); --pv-text: #1D1D1F; --pv-accent: #007AFF; --pv-card: #DCDCE1; }

.setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.setting-row > span { font-size: 13.5px; color: var(--text-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches-line { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
.swatch {
  --isz: 13px;
  position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sw); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s var(--ease), outline-color 0.15s; outline: 2px solid transparent; outline-offset: 2px; cursor: pointer;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-on { outline-color: var(--text); }
.swatch-auto { background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); }
.swatch-custom { background: conic-gradient(from 90deg, #E5484D, #F5A524, #3FB950, #22B8CF, #0A84FF, #A78BFA, #F472B6, #E5484D); }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.file-status {
  --isz: 20px;
  display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s2);
}
.file-status > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.file-status strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.file-status small { font-size: 12px; color: var(--text-3); }
.file-status.ok > .i { color: var(--ok); }
.file-status.warn { border-color: color-mix(in oklab, var(--warn) 40%, transparent); }
.file-status.warn > .i { color: var(--warn); }

.server-list { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; }
.server-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.server-list em { margin-left: auto; font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srv-dot { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.srv-ok .srv-dot { background: var(--ok); }
.srv-down .srv-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--down); }
.server-list .srv-down em { color: var(--down); }
.shortcut-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; margin-top: 18px; }
.shortcut-groups dl { display: grid; gap: 7px; margin: 0; }
.shortcut-groups dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.shortcut-groups dt { display: flex; align-items: center; gap: 3px; }
.shortcut-groups dd { margin: 0; color: var(--text-2); text-align: right; }

/* ---------- player (always dark, whatever the theme) ---------- */

.player {
  --bg: #000; --s1: #111113; --s2: #17171A; --s3: #1D1D21; --s4: #27272C;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
  --text: #F5F5F2; --text-2: #A4A4AA; --text-3: #6E6E75; --raised: rgba(23, 23, 26, 0.96);
  color-scheme: dark;
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #000; color: var(--text);
}
.player[hidden] { display: none; }
.player-top { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: #060607; border-bottom: 1px solid var(--line); }
.player-title { display: flex; flex-direction: column; min-width: 0; }
.player-title strong { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.player-title span { font-size: 12px; color: var(--text-3); }
.player-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.player-stage { position: relative; display: grid; flex: 1; place-items: center; min-height: 0; padding: 12px; }
.player-frame { position: relative; width: min(100%, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #0B0B0D; }
.player-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--text-2); }
.player-status h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: var(--display-weight); color: var(--text); }
.player-status p { max-width: 52ch; margin: 0; }
.inline-form { display: flex; gap: 8px; width: min(420px, 100%); }
.player-notice {
  position: absolute; left: 50%; bottom: 74px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); font-size: 13px;
  animation: enter 0.3s var(--ease) both;
}
/* A show's "3 of 29 episodes watched" keeps together (wraps whole, not word by word). */
.show-seen { white-space: nowrap; }
.imdb-score + .show-seen::before { content: " · "; }
@media (max-width: 640px) { .film-scores .show-seen { display: block; margin-top: 2px; } .imdb-score + .show-seen::before { content: none; } }

/* Where to watch: services as small tiles with their logo and what it costs. */
.where { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.where-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); transition: border-color 0.15s, background 0.15s; }
.where-item:hover { border-color: var(--line-2); background: var(--s2); }
.where-item img, .where-dot { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--s3); }
.where-item span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.where-item b { overflow: hidden; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.where-item small { font-size: 12px; color: var(--text-3); }
.where-note { margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.where-note .link { font-size: 12px; }
.where-none { margin: 0; }
@media (max-width: 640px) { .where { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Film page Download with several pages: the list in a sheet. */
.modal-dl { max-width: 420px; }
.dl-sheet .h3 { margin: 2px 40px 14px 0; }
.dl-list { display: flex; flex-direction: column; gap: 2px; }
.dl-link { --isz: 16px; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; }
.dl-link > span:not(.i) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-link .i:last-child { color: var(--text-3); }
.dl-link:hover, .dl-link:focus-visible { background: var(--s2); }
.dl-note { margin: 12px 12px 0; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* Episodes: download and watched side by side; the season's pack in the header. */
.season-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-actions { display: flex; align-items: center; gap: 6px; }
.ep-dl { color: var(--text-2); }

/* Up Next: the next episode, counting down in the corner. */
.player-upnext {
  position: absolute; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; align-items: center; gap: 12px;
  width: min(420px, calc(100% - 32px)); padding: 10px 12px 12px 10px; overflow: hidden; border-radius: 14px;
  background: var(--raised); border: 1px solid var(--line-2); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  animation: upnextIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.player-upnext img { flex: none; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--s3); }
.upnext-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.upnext-text small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.upnext-text strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.upnext-text span { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.upnext-actions { display: flex; flex: none; flex-direction: column; gap: 6px; }
.upnext-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; animation: upnextBar linear both; }
@keyframes upnextIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes upnextBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) { .player-upnext img { display: none; } .player-upnext { right: 12px; left: 12px; width: auto; } }

/* Download: a short list of the title's download pages under the top bar. */
.player-dl {
  position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 4; display: flex; flex-direction: column; gap: 4px;
  width: min(320px, calc(100% - 24px)); padding: 10px; background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); animation: enter 0.2s var(--ease) both;
}
.player-dl[hidden] { display: none; }
.player-dl .label { margin: 2px 6px 4px; }
.player-dl-link { --isz: 16px; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.player-dl-link > span:not(.i) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player-dl-link .i:last-child { color: var(--text-3); }
.player-dl-link:hover, .player-dl-link:focus-visible { background: var(--s3); }
.player-dl-note { margin: 4px 6px 2px; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.player-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; background: #060607; border-top: 1px solid var(--line); }
.player-bar .label { margin: 0; }
.player-servers { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.srv {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--s1); color: var(--text-2); font-size: 13px; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
[data-theme="material"] .srv { border-radius: 999px; }
.srv:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.srv small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srv.is-active { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
.srv:disabled { opacity: 0.4; cursor: not-allowed; }
.srv-wait .srv-dot { animation: breathe 1s ease-in-out infinite; }
.srv-down span { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.3); }
.pal-group-note { margin-left: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.7; }
.show-cast:empty { display: none; }
.player-bar .srv-sep { flex: none; align-self: center; margin: 0 2px 0 6px; padding-left: 12px; border-left: 1px solid var(--line-2); }

/* ---------- toasts ---------- */

.toasts {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 160; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 14px; pointer-events: auto;
  background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); font-size: 13.5px;
  opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
[data-theme="mac"] .toast { border-radius: 14px; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
[data-theme="material"] .toast { border: 0; border-radius: 4px; background: var(--inverse); color: var(--inverse-ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
[data-theme="material"] .toast-action { color: color-mix(in oklab, var(--accent), var(--inverse-ink) 25%); }
[data-theme="material"][data-mode="dark"] .toast-action { color: color-mix(in oklab, var(--accent), black 45%); }
.toast.in { opacity: 1; transform: none; }
.toast-action { padding: 4px 8px; border-radius: 6px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.toast-action:hover { background: var(--accent-soft); }

/* ---------- the year picker (dial · wheel · ruler · chips) ---------- */

.years-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.years-head .eyebrow { margin: 0; }
.years-hint { margin: 0; font-size: 12px; color: var(--text-3); }
.dial { --yw: 76px; --dh: 84px; position: relative; display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
.dial-window {
  position: relative; flex: 1; min-width: 0; height: var(--dh);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dial-track {
  position: relative; display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent;
}
.dial-track::-webkit-scrollbar { display: none; }
.dial-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dial-pad { flex: none; width: calc(50% - var(--yw) / 2); }
.dial-yr {
  /* Paint containment keeps scaled numbers from changing the scroller's overflow — without it the browser's
     snap-back and the scaling feed each other and the dial creeps sideways. */
  contain: paint;
  position: relative; flex: none; width: var(--yw); display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; color: var(--text-3); user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.dial-yr b { display: block; font-weight: 500; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; transition: color 0.3s; }
.dial-yr.is-center b, .dial-yr[aria-selected="true"] b { color: var(--text); }
.dial-yr i { position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--w), var(--line-2) var(--w)); }
.dial-lens, .dial-tag { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.dial-step {
  --isz: 16px; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--text-2); background: transparent; border: 1px solid var(--line); transition: background 0.15s, color 0.15s;
}
.dial-step:hover { color: var(--text); background: var(--s2); }
.dial-window:has(.dial-track:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }

/* Dial — numbers on a drum over a knurled edge; a notch marks the centre. */
.dial-dial .dial-yr b {
  margin-top: -16px; font-family: var(--display); font-weight: var(--display-weight); font-size: 17px; letter-spacing: -0.01em;
  transform: perspective(480px) rotateY(var(--r, 0deg)) scale(var(--s, 0.66)); opacity: var(--o, 0.18); will-change: transform, opacity;
}
[data-theme="cinema"] .dial-dial .dial-yr b { font-size: 18px; }
:is([data-theme="mac"], [data-theme="material"], [data-theme="fluent"], [data-theme="oneui"]) .dial-dial .dial-yr b { font-weight: 600; letter-spacing: -0.04em; font-size: 16px; }
.dial-dial .dial-yr.is-decade b { color: var(--text-2); }
.dial-dial .dial-yr.is-center b { color: var(--text); }
.dial-dial .dial-yr::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(var(--yw) / 5));
  background-position: calc(var(--yw) / 10) 0;
}
.dial-dial .dial-yr::after {
  content: ""; position: absolute; left: 50%; bottom: 12px; width: 1.5px; height: 9px; margin-left: -0.75px;
  border-radius: 1px; background: var(--text-3); transition: background 0.3s, height 0.3s;
}
.dial-dial .dial-yr.is-decade::after { height: 12px; background: var(--text-2); }
.dial-dial .dial-yr.is-center::after { height: 13px; background: var(--accent); }
.dial-dial .dial-yr i { bottom: 28px; }
.dial-dial .dial-lens { top: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--accent); }
/* Cupertino: like the iPhone camera's dial — the value itself lights up, no box. */
[data-theme="mac"] .dial-dial .dial-yr.is-center b { color: var(--accent); }
/* Material: a tonal pill behind the chosen value, like Android's camera controls. */
[data-theme="material"] .dial-dial .dial-lens { top: calc(var(--dh) / 2 - 29px); width: calc(var(--yw) + 22px); height: 42px; border: 0; border-radius: 21px; background: color-mix(in oklab, var(--accent) 20%, transparent); }

/* Wheel — the iPhone camera's mode strip: plain labels, the chosen one in the accent with a dot beneath. */
.dial-wheel { --yw: 62px; --dh: 46px; }
.dial-wheel .dial-yr b { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; opacity: var(--o, 0.3); transition: color 0.25s; }
.dial-wheel .dial-yr.is-center b { color: var(--accent); opacity: 1; }
.dial-wheel .dial-yr i { display: none; }
.dial-wheel .dial-lens { bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* Ruler — a measuring tape: a tick per year, labels every five, the chosen year in a tag above the needle. */
.dial-ruler { --yw: 16px; --dh: 74px; }
.dial-ruler .dial-yr { align-items: flex-end; }
.dial-ruler .dial-yr b { position: absolute; bottom: 30px; font-size: 10px; color: var(--text-3); letter-spacing: 0; }
.dial-ruler .dial-yr:not(.is-decade):not(.is-five) b { display: none; }
.dial-ruler .dial-yr.is-five b { opacity: 0.6; }
.dial-ruler .dial-yr.is-center b { visibility: hidden; }
.dial-ruler .dial-yr::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 1px; height: 8px; background: var(--line-2); }
.dial-ruler .dial-yr.is-five::after { height: 12px; background: var(--text-3); }
.dial-ruler .dial-yr.is-decade::after { height: 16px; width: 1.5px; background: var(--text-2); }
.dial-ruler .dial-yr { contain: none; overflow: visible; }
.dial-ruler .dial-yr i { bottom: 4px; width: 6px; margin-left: -3px; }
.dial-ruler .dial-lens { bottom: 8px; width: 2px; height: 26px; border-radius: 1px; background: var(--accent); z-index: 1; }
.dial-ruler .dial-tag {
  top: 4px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.dial-ruler .dial-window { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Chips — Material filter chips; the chosen one filled. */
.dial-chips { --yw: 74px; --dh: 48px; }
.dial-chips .dial-window { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.dial-chips .dial-yr b { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.dial-chips .dial-yr.is-center b { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.dial-chips .dial-yr i { bottom: 2px; width: 14px; margin-left: -7px; }

[data-results] { transition: opacity 0.3s var(--ease); }
[data-results].is-swapping { opacity: 0; transition: none; }
.grid-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 18px 0 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.grid-divider::before, .grid-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.year-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: -6px 0 22px; }
.year-count { font-size: 14px; color: var(--text-2); }
.year-count strong { font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.year-summary .meter { flex: 1; max-width: 360px; margin: 0; height: 6px; }
.years-filters { margin-top: 10px; }

/* Filters that fold away on phones. */
.filters-toggle { display: none; position: relative; flex: none; }
.filters-toggle b {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 16px; font-weight: 700;
}
.filters.is-open .filters-toggle { color: var(--accent); background: var(--accent-soft); }

/* ---------- people ---------- */

.people { display: flex; flex-wrap: wrap; gap: 8px; }
.people.is-collapsed > .person:nth-child(n+13) { display: none; }
.people-more { margin-top: 10px; }
.people-more:not(.is-many) { display: none; }
.person {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 14px 4px 4px;
  border-radius: 999px; background: var(--s1); border: 1px solid var(--line); transition: border-color 0.15s, background 0.15s;
}
.person:hover { border-color: var(--line-2); background: var(--s2); }
.person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.person-text b { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.person-text small { font-size: 11px; color: var(--text-3); }
.avatar {
  position: relative; flex: none; display: grid; place-items: center; width: var(--sz); height: var(--sz); overflow: hidden; border-radius: 50%;
  background: linear-gradient(145deg, hsl(var(--ph) 28% 36%), hsl(var(--ph) 26% 22%));
  color: rgba(255, 255, 255, 0.86); font-size: calc(var(--sz) * 0.36); font-weight: 600; letter-spacing: 0.02em;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; animation: fadeIn 0.4s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } }
.person-head { display: flex; align-items: center; gap: 28px; padding-top: 12px; }
.person-head .avatar { box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-in); }
.person-intro { min-width: 0; }
.person-intro .display { font-size: clamp(34px, 5vw, 60px); overflow-wrap: anywhere; }
.person-intro .ext-links { margin-top: 10px; }
.person-page .rail { margin-top: 40px; }

/* ---------- episodes without a still ---------- */

.ep-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bd, none) center 25% / cover no-repeat, var(--s2); }
.ep-fallback::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7)); }
.ep-fallback b { position: relative; font-family: var(--display); font-weight: var(--display-weight); font-size: 15px; color: #fff; letter-spacing: 0.02em; }

/* ---------- appearance settings ---------- */

.set-sub { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.set-sub .muted { font-weight: 400; margin-left: 4px; }
.setting-row > span small, .setting-row > label small { display: block; font-size: 11.5px; color: var(--text-3); }
.setting-row > label { font-size: 13.5px; color: var(--text-2); }
.set-on { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.set-sub-note { margin: 12px 0 8px; font-size: 12.5px; }
.set-details { margin-top: 14px; }
.set-details > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13.5px; color: var(--text-2); list-style: none; }
.set-details > summary::-webkit-details-marker { display: none; }
.set-details > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.set-details[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.preset-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.preset-row::-webkit-scrollbar { display: none; }
.preset { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.preset:hover { color: var(--text); }
.preset-art {
  position: relative; display: block; height: 64px; overflow: hidden; border-radius: var(--r-lg);
  background: var(--pv-bg); box-shadow: inset 0 0 0 1px var(--hair-in); transition: box-shadow 0.15s, transform 0.2s var(--ease-out);
}
.preset:hover .preset-art { transform: translateY(-2px); }
.preset.is-on .preset-art { box-shadow: 0 0 0 2px var(--accent); }
.preset-art[data-ambient-preview="lights"] { background: radial-gradient(38% 55% at 25% 35%, color-mix(in srgb, var(--pv-accent) 30%, transparent), transparent), radial-gradient(30% 50% at 75% 70%, color-mix(in srgb, var(--pv-accent) 18%, transparent), transparent), var(--pv-bg); }
.preset-art[data-ambient-preview="aurora"] { background: linear-gradient(120deg, transparent 25%, color-mix(in srgb, var(--pv-accent) 22%, transparent) 45%, transparent 65%), linear-gradient(200deg, transparent 35%, color-mix(in srgb, #3fe0c5 14%, transparent) 55%, transparent 75%), var(--pv-bg); }
.preset-art i { position: absolute; display: block; }
.preset-art i:nth-child(1) { left: 10px; right: 10px; bottom: 10px; height: 20px; border-radius: 8px; background: var(--pv-s); opacity: 0.9; }
.preset-art[data-glass-preview]:not([data-glass-preview="off"]) i:nth-child(1) { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.preset-art i:nth-child(2) { left: 16px; bottom: 16px; width: 26px; height: 8px; border-radius: 4px; background: var(--pv-accent); }
.pal-swatch {
  display: flex; flex-direction: column; gap: 4px; padding: 4px; min-width: 0; scroll-snap-align: start; font-size: 10.5px; color: var(--text-2);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in oklab, var(--s2) 70%, transparent), color-mix(in oklab, var(--s1) 50%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.15s, transform 0.2s var(--ease-out);
}
.pal-swatch small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; padding: 0 2px; }
.pal-swatch:hover { color: var(--text); transform: translateY(-2px); }
.pal-swatch-art {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--r-lg) - 4px);
  background: linear-gradient(135deg, var(--pv-bg) 55%, var(--pv-s) 55%); box-shadow: inset 0 0 0 1px var(--hair-in);
}
.pal-swatch-art i { position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--pv-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv-accent) 25%, transparent); }
.pal-swatch-art::after { content: ""; position: absolute; left: 6px; right: 30%; bottom: 6px; height: 3px; border-radius: 2px; background: var(--pv-text); opacity: 0.7; }
.pal-swatch.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pal-swatch.is-on small { color: var(--text); font-weight: 600; }
.theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-fluent { --pv-bg: #1C1C1C; --pv-text: #FFFFFF; --pv-accent: #60CDFF; --pv-card: #3D3D3D; --pv-r: 3px; --pv-btn: 4px; }
.theme-oneui { --pv-bg: #000000; --pv-text: #FAFAFA; --pv-accent: #5E9EFF; --pv-card: #262626; --pv-r: 10px; --pv-btn: 999px; }
.theme-nothing { --pv-bg: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.2px) 0 0 / 8px 8px, #000; --pv-text: #FFFFFF; --pv-accent: #D71921; --pv-card: #1C1C1C; --pv-r: 6px; --pv-btn: 999px; }
[data-mode="light"] .theme-fluent { --pv-bg: #F3F3F3; --pv-text: #1B1B1B; --pv-accent: #005FB8; --pv-card: #DDDDDD; }
[data-mode="light"] .theme-oneui { --pv-bg: #F6F6F6; --pv-text: #111111; --pv-accent: #3E91FF; --pv-card: #FFFFFF; }
[data-mode="light"] .theme-nothing { --pv-bg: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1.2px) 0 0 / 8px 8px, #F2F2F2; --pv-text: #000; --pv-accent: #D71921; --pv-card: #E0E0E0; }

/* ---------- liquid glass ---------- */

/* A fine frosted grain in the glass, so what glows behind it is scattered, not seen. It tiles, so it works on sheets
   that scroll too. */
:root { --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }

[data-glass="subtle"] { --gb: 16px; --gm: 76%; --gm2: 64%; --gm3: 88%; --rim: 0.1; --rim2: 0.05; }
[data-glass="balanced"] { --gb: 24px; --gm: 58%; --gm2: 42%; --gm3: 80%; --rim: 0.16; --rim2: 0.07; }
[data-glass="clear"] { --gb: 34px; --gm: 36%; --gm2: 20%; --gm3: 70%; --rim: 0.22; --rim2: 0.09; }
[data-mode="light"][data-glass="subtle"] { --rim: 0.7; --rim2: 0.35; }
[data-mode="light"][data-glass="balanced"] { --rim: 0.8; --rim2: 0.45; }
[data-mode="light"][data-glass="clear"] { --rim: 0.9; --rim2: 0.55; }

/* Panels, chips and cards on the page: glass made of a translucent fill and a lit rim, with no live blur. What's
   behind them (the background) is already soft, and a live blur on every panel and chip is what makes scrolling
   stutter, so the real blur is kept for things that float over moving content (the bars, sheets, toasts). */
[data-glass]:not([data-glass="off"]) :is(.panel, .tonight, .empty, .glance-item, .tile, .theme-card, .file-status, .franchise, .coll, .hero-search, .search-trigger, .did-you-mean, .person, .dial-step, .chip, .seg) {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, var(--rim2)), transparent 55%),
    linear-gradient(160deg, color-mix(in oklab, var(--s2) calc(var(--gm) + 14%), transparent), color-mix(in oklab, var(--s1) calc(var(--gm2) + 14%), transparent));
  border-color: rgba(255, 255, 255, var(--rim2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--rim)), inset 0 -1px 0 rgba(0, 0, 0, 0.06), 0 12px 32px -14px rgba(0, 0, 0, 0.45);
}
[data-glass]:not([data-glass="off"]) :is(.glance, .tiles) { gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
[data-glass]:not([data-glass="off"]) :is(.glance-item, .tile) { border: 1px solid rgba(255, 255, 255, var(--rim2)); border-radius: var(--r-lg); }
[data-glass]:not([data-glass="off"]) .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger) {
  background: color-mix(in oklab, var(--s3) var(--gm), transparent); border-color: rgba(255, 255, 255, var(--rim2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--rim));
}
[data-glass]:not([data-glass="off"]) .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 8px 22px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
[data-glass]:not([data-glass="off"]) :is(.topbar, .topbar.is-scrolled, .tabbar) {
  background: var(--grain), color-mix(in oklab, var(--bg) var(--gm2), transparent);
  -webkit-backdrop-filter: blur(var(--gb)) saturate(180%);
  backdrop-filter: blur(var(--gb)) saturate(180%);
}
[data-glass]:not([data-glass="off"]) .topbar.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, var(--rim2)); border-color: transparent; }
[data-glass]:not([data-glass="off"]) :is(.modal, .toast) {
  background: var(--grain), color-mix(in oklab, var(--s2) var(--gm3), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gb) + 14px)) saturate(180%);
  backdrop-filter: blur(calc(var(--gb) + 14px)) saturate(180%);
  border-color: rgba(255, 255, 255, var(--rim2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--rim)), var(--shadow-lg);
}

/* ---------- ambient backgrounds ---------- */

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Artwork: the title's picture, blurred to a wash of its colours; it drifts slowly unless motion is calm. */
.ambient-art { position: absolute; inset: 0; }
.ambient-art img { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; opacity: 0; filter: blur(72px) saturate(1.15) brightness(0.62);
  transition: opacity 1.2s ease; animation: artDrift 48s ease-in-out infinite alternate; }
.ambient-art img.is-on { opacity: 0.2; }
[data-mode="light"] .ambient-art img.is-on { opacity: 0.12; filter: blur(72px) saturate(1.1); }
/* Fades to the page colour away from the top, so text sits on something calm. */
.ambient-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 30%, var(--bg) 100%); }
[data-motion="calm"] .ambient-art img { animation: none; }
@keyframes artDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
/* Keep the lights low: a dark veil at the edges so they glow through rather than shine. */
.ambient::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 40%, color-mix(in oklab, var(--bg) 52%, transparent) 20%, color-mix(in oklab, var(--bg) 90%, transparent) 100%); }
[data-mode="light"] .ambient::before { background: radial-gradient(120% 90% at 50% 40%, color-mix(in oklab, var(--bg) 30%, transparent) 30%, color-mix(in oklab, var(--bg) 70%, transparent) 100%); }
/* The frosted pane the lights sit behind: a fine grain over everything. */
.ambient::after {
  content: ""; position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-ambient]:not([data-ambient="off"]) body { background: transparent; }
.aurora { position: absolute; inset: -20%; opacity: 0.12; }
[data-mode="light"] .aurora { opacity: 0.14; }
.aurora i { position: absolute; width: 70%; height: 60%; border-radius: 50%; will-change: transform; animation: auroraA 40s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: 0; top: 5%; background: radial-gradient(closest-side, var(--a1), transparent); }
.aurora i:nth-child(2) { right: -5%; top: 25%; background: radial-gradient(closest-side, var(--a2), transparent); animation-name: auroraB; animation-duration: 52s; }
.aurora i:nth-child(3) { left: 20%; bottom: -5%; background: radial-gradient(closest-side, var(--a3), transparent); animation-name: auroraC; animation-duration: 64s; }
@keyframes auroraA { to { transform: translate(22%, 14%) rotate(30deg) scale(1.25); } }
@keyframes auroraB { to { transform: translate(-26%, -10%) rotate(-24deg) scale(0.85); } }
@keyframes auroraC { to { transform: translate(12%, -22%) rotate(18deg) scale(1.15); } }

/* ---------- calm motion ---------- */

[data-motion="calm"] .aurora i, [data-motion="calm"] .film-backdrop.is-in img, [data-motion="calm"] .view.enter > *,
[data-motion="calm"] .boot-inner, [data-motion="calm"] .boot-word { animation: none !important; }
[data-motion="calm"] .card-link .art { transform: none !important; }
/* Calm: no movement, but pages still crossfade (a quick dissolve, as Apple's Reduce Motion does). */
:root[data-motion="calm"]::view-transition-old(root), :root[data-motion="calm"]::view-transition-new(root) { animation-duration: 0.18s !important; }
:root[data-motion="calm"]::view-transition-group(poster) { animation-duration: 0.01ms !important; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .film-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
  .nav a { padding: 7px 9px; }
  .topbar-inner { gap: 18px; }
  .search-trigger { min-width: 180px; }
}

@media (max-width: 1000px) {
  .film-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .film-record { position: relative; top: auto; }
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .stat-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-trigger { min-width: 0; }
  .search-trigger span { display: none; }
  .srv small { display: none; }
  .pick-stage { grid-template-columns: minmax(0, 1fr); gap: 4px; min-height: 0; }
  .pick-ring-wrap { height: 280px; }
  .pick-ring { --ring-r: 250px; width: 130px; }
  .pick-body { text-align: center; }
  .pick-body .btn-row { justify-content: center; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .nav, .search-trigger { display: none; }
  .topbar-inner { gap: 12px; }
  .tabbar {
    --isz: 22px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--glass-2); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-top: 1px solid var(--line);
    view-transition-name: tabbar;
  }
  .tabbar a:not(.tab-browse) { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0; color: var(--text-3); transition: color 0.15s; }
  .tabbar a.is-on:not(.tab-browse) { color: var(--text); }
  .tabbar a.is-on:not(.tab-browse) .i { color: var(--accent); }
  .tabbar a { position: relative; z-index: 1; }
  .tabbar .nav-pill { border-radius: 0; background: linear-gradient(var(--accent), var(--accent)) no-repeat 50% 100% / 18px 3px; }
  [data-theme="material"] .tabbar .nav-pill { display: none; }
  /* Browse: the big button in the middle, set apart from the other tabs; a ring shows when you're on it. */
  .tab-browse { justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 35%, transparent); transition: transform 0.15s, box-shadow 0.25s; }
  .tab-browse:active { transform: scale(0.92); }
  .tab-browse .i { stroke-width: 2; }
  .tab-browse.is-on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 6px 18px color-mix(in oklab, var(--accent) 35%, transparent); }
  [data-theme="material"] .tab-browse.is-on .i { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
  [data-theme="material"] .tabbar { height: calc(60px + env(safe-area-inset-bottom, 0px)); background: var(--s2); border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  [data-theme="material"] .tabbar a:not(.tab-browse) .i { width: 58px; height: 30px; border-radius: 15px; transition: background 0.2s; }
  [data-theme="material"] .tabbar a.is-on:not(.tab-browse) .i { color: var(--text); background: color-mix(in oklab, var(--accent) 26%, transparent); font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
  [data-theme="material"] .tab-browse { width: 46px; height: 46px; border-radius: 15px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  [data-theme="material"] body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .page { padding-block: 22px 48px; }
  .rail { margin-top: 36px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 22px 12px; }
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
  .glance-item { padding: 8px 9px 7px; }
  .glance-item strong { font-size: 17px; }
  .glance-item span { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .glance-item span[data-short] { font-size: 0; }
  .glance-item span[data-short]::after { content: attr(data-short); font-size: 10.5px; }
  .page-sub { display: none; }
  .hero-search { height: 50px; margin-top: 22px; font-size: 14px; }
  .hero-search kbd { display: none; }
  .hide-sm { display: none; }
  .palette-foot { display: none; }
  .shortcut-groups { grid-template-columns: minmax(0, 1fr); }
  .site-foot { display: none; }
  .ep { grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; padding: 8px 4px; }
  .ep-overview { display: none; }
  .ep-title { font-size: 13.5px; }
  .dial { margin-top: 2px; }
  .dial-dial { --yw: 72px; --dh: 76px; }
  .dial-step, .years-hint { display: none; }
  .dial-dial .dial-yr b, [data-theme="cinema"] .dial-dial .dial-yr b { font-size: 15px; }

  /* Modals become bottom sheets; search stays at the top, clear of the keyboard. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(40px);
  }
  [data-theme="material"] .modal { border-radius: 28px 28px 0 0; }
  .modal-backdrop:has(.modal-palette) { align-items: flex-start; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; }
  .modal-palette { border-radius: var(--r-lg); border-bottom: 1px solid var(--line-2); padding-bottom: 0; transform: translateY(-10px); }
  .modal-palette .palette-list { max-height: calc(100dvh - 120px); }
  .modal-trailer { border-radius: 0; }
}

@media (max-width: 640px) {
  /* Poster beside the title block; actions span the full width underneath. */
  .film-hero { grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; padding-top: 28px; }
  .film-head { display: contents; }
  .film-poster { grid-column: 1; grid-row: 1 / span 5; }
  .film-head > * { grid-column: 2; }
  .film-head > .eyebrow { margin-top: 2px; }
  .film-title { font-size: 30px !important; margin: 2px 0 8px; }
  .film-facts { font-size: 13px; }
  .film-head > .film-actions { grid-column: 1 / -1; grid-row: 6; margin-top: 20px; }
  .film-actions .btn-lg { flex: 1 1 auto; order: 2; justify-content: center; height: 42px; padding: 0 12px; font-size: 13.5px; }
  .film-actions .btn-primary { flex: 1 1 calc(100% - 60px); order: 0; }
  .film-actions .fav { order: 1; }
  .film-body { margin-top: 32px; }
  .tonight { padding: 14px 12px 12px; }
  .tonight-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pick-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 6px 10px 6px 6px; }
  .pick-art .art { width: 52px; }
  .pick-text { padding-right: 0; }
  .pick-play { position: static; width: 34px; height: 34px; }
  .row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 10px 4px; }
  .ranked .row { grid-template-columns: 24px 44px minmax(0, 1fr) auto; }
  .row-rank { font-size: 17px; }
  .row-score, .row-you, .row-actions a { display: none; }
  .row-art .art { width: 44px; }
  .diary-row { grid-template-columns: 34px 38px minmax(0, 1fr); gap: 12px; }
  .diary-rating { grid-column: 3; }
  .diary-art .art { width: 38px; }
  .pick { padding: 18px 16px; }
  .pick-ring-wrap { height: 250px; }
  .pick-ring { --ring-r: 210px; width: 112px; }
  .pick-overview { -webkit-line-clamp: 3; }
  .records > div { grid-template-columns: 110px minmax(0, 1fr); }
  .player-top-actions .btn span, .player-bar .label { display: none; }
  .player-notice { bottom: 66px; }
  .select select { max-width: 160px; }
  .theme-grid { gap: 8px; }
  .theme-preview { height: 58px; }
  .theme-card small { display: none; }
  .year-summary { margin-top: -4px; }
  .ep { grid-template-columns: 96px minmax(0, 1fr) auto; }

  /* Phones: one row of filters; the rest open from the sliders button. */
  .filters { gap: 10px; margin: 12px 0 18px; padding-bottom: 14px; }
  .filters-toggle { display: inline-grid; }
  .filters:not(.is-open) .filter-more { display: none; }
  .filter-main { flex-wrap: nowrap; }
  .filter-main .seg { flex: 1 1 auto; min-width: 0; }
  .filter-more { animation: enter 0.3s var(--ease-out) both; }
  .year-summary { margin: -4px 0 16px; gap: 8px 14px; }
  .year-count strong { font-size: 17px; }
  /* Phones: cast as small tiles, two or three to a row (by width), one row to start. */
  .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .person { flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; padding: 12px 6px 10px; border-radius: 18px; text-align: center; }
  .person .avatar { --sz: 52px !important; }
  .person-text { align-items: center; width: 100%; }
  .person-text b { width: 100%; font-size: 12.5px; }
  .person-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; }
  .people.is-collapsed > .person:nth-child(n+3) { display: none; }
  .people-more:not(.is-many) { display: inline-flex; }
  .film-record { gap: 12px; padding: 14px 16px; }
  .film-record .h3 { margin: 0; font-size: 15px; }
  .film-record .rate { gap: 10px; }
  .film-record .rate-glyphs { font-size: 26px; letter-spacing: 2px; }
  .film-record .ext-links { margin: 0; }
  .film-record .footnote { display: none; }
  .person-head { gap: 16px; }

}

/* Phones: three posters across, like a shelf — more of the year at a glance. */
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .rail-track { grid-auto-columns: 112px; gap: 12px; }
  .rail-wide { grid-auto-columns: 56vw; }
  .card-body { padding-top: 7px; }
  .card-title { font-size: 12.5px; }
  .card-meta { font-size: 11px; }
  .card-meta .imdb, .card-meta .stars-sm { display: none; }
  .card-quick { top: 6px; right: 6px; gap: 4px; }
  .card-quick .qa { width: 26px; height: 26px; --isz: 14px; }
  .badges { top: 6px; left: 6px; }
  .ph { padding: 8px; }
  .ph-title { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Must watch ---------- */

.tag-must {
  position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 3px 8px 3px 7px; border-radius: 999px;
  background: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent);
  color: color-mix(in oklab, var(--accent), white 20%); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.tag-must::before { content: "★"; margin-right: 4px; font-size: 9px; }
.card-link:has(.card-progress) .tag-must { bottom: 18px; }
.tag-must.tag-inline { position: static; display: inline-block; margin-left: 8px; vertical-align: 2px; background: var(--accent-soft); color: var(--accent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 520px) { .tag-must { left: 6px; bottom: 6px; padding: 2px 6px; font-size: 8.5px; } }

/* ---------- the companion: a five-second check-in at the top right (pet.js) ---------- */

.pet {
  /* Just under the top bar, so it never covers search or settings. */
  position: fixed; top: calc(var(--topbar-h, 64px) + 18px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 180; display: flex; align-items: center; gap: 10px;
  max-width: min(380px, calc(100vw - 32px)); padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--s2) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--line-2); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.6); color: var(--text); font-size: 13.5px;
  opacity: 0; transform: translate3d(0, -150%, 0);
  transition: opacity 0.3s var(--ease-out), transform 0.65s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.pet.in { opacity: 1; transform: none; }
/* Ten seconds, counted down at the end of the bubble and drained along its bottom edge. */
.pet-count { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; background: color-mix(in oklab, var(--text) 9%, transparent); color: var(--text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pet-bar { position: absolute; left: 24px; right: 24px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.75; transform-origin: left; animation: petBar linear forwards; pointer-events: none; }
@keyframes petBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
[data-motion="calm"] .pet-bar { animation: none; opacity: 0.4; }
/* Lifted into the top layer over a video site's own fullscreen (FL.ui.overTop): keep their own place and look. */
.pet[popover] { left: auto; bottom: auto; margin: 0; overflow: visible; }
.toasts[popover] { top: auto; right: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
.player-upnext[popover] { position: fixed; top: auto; left: auto; margin: 0; color: var(--text); }
.pet.out { opacity: 0; transform: translate3d(24%, -70%, 0) scale(0.9); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
/* The face pokes up over the bubble's edge. */
.pet-face { flex: none; width: 54px; height: 54px; margin: -18px -2px -8px -6px; }
.pet-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
/* Animated only when a companion drops in (Settings’ picker shows them still). */
.pet .pet-head { transform-origin: 32px 50px; animation: petTilt 3.4s 0.8s ease-in-out infinite; }
.pet .pet-eyes { transform-origin: 32px 32px; animation: petBlink 3.2s 1s infinite; }
.pet .pet-tail { transform-origin: 50px 56px; animation: petTail 1.3s ease-in-out infinite alternate; }
.pet .pet-ear-l { transform-origin: 20px 24px; animation: petEar 4s 1.6s infinite; }
.pet .pet-ear-r { transform-origin: 44px 24px; animation: petEar 4s 2.5s infinite; }
.pet .pet-tongue { transform-origin: 32px 44px; animation: petPant 0.45s ease-in-out infinite alternate; }
.pet-dog .pet-tail, .pet-bunny .pet-tail { animation-duration: 0.32s; }
.pet-penguin .pet-paw { transform-origin: 32px 46px; animation: petFlap 0.6s ease-in-out infinite alternate; }
.pet-owl .pet-head { animation-name: petOwl; animation-duration: 3s; }
.pet-bubble { line-height: 1.35; }
.pet-emoji { font-size: 15px; }
/* The Iris character: two eyes in the aperture. */
.pet-iris { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.pet-iris .mark { width: 44px; height: 44px; }
.pet-iris i { position: absolute; top: 19px; width: 4px; height: 7px; border-radius: 2px; background: #fff; animation: blink 2.6s 0.6s infinite; }
.pet-iris i:first-of-type { left: 19px; }
.pet-iris i:last-of-type { right: 19px; }
@keyframes blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes petBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }
/* Actions, matched to what the companion says. */
.pet.act-hop .pet-svg, .pet.act-hop .pet-iris { animation: petHop 0.7s 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) 3; }
.pet.act-stretch .pet-svg, .pet.act-stretch .pet-iris { transform-origin: 50% 100%; animation: petStretch 1.6s 0.4s ease-in-out 2; }
.pet.act-blink .pet-eyes { animation: petSlowBlink 2.4s 0.5s ease-in-out 2; }
.pet.act-wave .pet-paw:last-of-type { transform-origin: 44px 50px; animation: petWave 0.45s 0.4s ease-in-out 6 alternate; }
.pet.act-sleep .pet-eyes { transform: scaleY(0.12); animation: none; }
.pet.act-sleep .pet-face::after { content: "z z"; position: absolute; top: -6px; right: -4px; font: 700 11px/1 system-ui, sans-serif; color: var(--text-2); animation: petZ 2.2s ease-in-out infinite; }
.pet-face { position: relative; }
@keyframes petHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes petStretch { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(0.94, 1.12); } }
@keyframes petSlowBlink { 0%, 100% { transform: scaleY(1); } 40%, 60% { transform: scaleY(0.1); } }
@keyframes petWave { from { transform: rotate(0); } to { transform: rotate(-35deg) translateY(-3px); } }
@keyframes petZ { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
:root[data-motion="calm"] .pet[class*="act-"] :is(.pet-svg, .pet-iris, .pet-eyes, .pet-paw) { animation: none; }
@keyframes petTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 62% { transform: rotate(5deg); } }
@keyframes petTail { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
@keyframes petEar { 0%, 86%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 96% { transform: rotate(7deg); } }
@keyframes petPant { to { transform: scaleY(1.3); } }
@keyframes petFlap { to { transform: rotate(6deg); } }
@keyframes petOwl { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 55% { transform: rotate(12deg); } }

/* A plain grid: a wrapping column flexbox sizes the picker at its narrowest (one pet a row) and keeps that height. */
.setting-stack { display: grid; gap: 12px; }
.pet-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.pet-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--s1); color: var(--text-2); font-size: 11.5px; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.pet-pick:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-1px); }
.pet-pick.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.pet-pick-face { display: grid; place-items: center; width: 40px; height: 40px; }
.pet-pick-face .pet-svg { width: 40px; height: 40px; filter: none; }
.pet-pick-face .pet-iris { width: 40px; height: 40px; }
.pet-pick-face .pet-iris .mark { width: 32px; height: 32px; }
.pet-pick-face .pet-iris i { top: 14px; width: 3px; height: 5px; }
.pet-pick-face .pet-iris i:first-of-type { left: 14px; }
.pet-pick-face .pet-iris i:last-of-type { right: 14px; }
.pet-pick-mix { font-size: 24px; }
.pet-pick-face .i { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .pet, .pet * { animation: none !important; }
  .pet, .pet.in, .pet.out { transform: none; transition: opacity 0.2s; }
}
[data-motion="calm"] .pet-head, [data-motion="calm"] .pet-tail { animation: none; }

/* ---------- mood headline ---------- */

.hero-words[data-mood] { font-family: var(--mood-font), var(--display); font-size: calc(1em * var(--mood-size)); letter-spacing: var(--mood-track); font-weight: 400; }
.hero-words[data-mood] em { font-family: inherit; font-style: normal; }
.hero-words[data-mood="sweet"] em { font-style: italic; }
.hero-words[data-mood="bold"] { text-transform: uppercase; line-height: 0.95; }
.hero-words[data-mood="future"] { font-weight: 600; line-height: 1.15; }

/* ---------- footer ---------- */

.foot-sign { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.foot-sign .brand-word { font-size: 17px; }
.site-foot .container { justify-content: center; }
.foot-mark { opacity: 0.85; }
.site-foot .container { align-items: center; }

/* ---------- person ---------- */

.person-head { gap: 16px; padding-top: 4px; }
.person-intro .h1 { margin: 0; }
.person-filters { margin: 22px 0 24px; }

/* ---------- player: fullscreen (the whole player, so reminders and toasts can show over the film) ---------- */

.player-hot { display: none; }
.player.is-fs .player-stage { position: absolute; inset: 0; padding: 0; }
.player.is-fs .player-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.player.is-fs .player-top, .player.is-fs .player-bar {
  position: absolute; left: 0; right: 0; z-index: 4; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.player.is-fs .player-top { top: 0; background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55)); border: 0; }
.player.is-fs .player-bar { bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85)); border: 0; }
.player.is-fs.is-idle .player-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.player.is-fs.is-idle .player-bar { opacity: 0; transform: translateY(100%); pointer-events: none; }
.player.is-fs .player-hot { display: block; position: absolute; left: 0; right: 0; z-index: 5; height: 10px; }
.player.is-fs:not(.is-idle) .player-hot { pointer-events: none; }
@media (pointer: coarse) { .player.is-fs .player-hot { height: 44px; } } /* a finger-sized strip at each edge */
.player-hot-top { top: 0; }
.player-hot-bottom { bottom: 0; }
.player.is-fs .player-notice { top: 70px; bottom: auto; }
.player.is-fs .pet { top: 70px; }

/* ---------- player: starting hint ---------- */

.player-starting {
  position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(10, 10, 11, 0.78); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #D8D8D8; font-size: 12px; pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.player-starting.is-gone { opacity: 0; transform: translateY(-6px); }

/* ---------- home: the big logo and search dock into the top bar ---------- */

.topbar .brand { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); }
.search-trigger { view-transition-name: search; transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.15s, color 0.15s; }
html.has-page-search:not(.search-docked) .search-trigger { opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none; view-transition-name: none; }
html.has-page-search:not(.search-docked) [data-page-search] { view-transition-name: search; }
::view-transition-group(search) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1); }

/* ---------- stats, diary, collections ---------- */

.face-row { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.face-row:hover { color: var(--accent); }
.diary-mark { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--s3); color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; vertical-align: 2px; }
.coll-filters { margin: 22px 0 24px; }

/* ---------- selected choices stay obvious (glass must not wash them out) ---------- */

.theme-card, .pal-swatch { position: relative; }
.theme-card.is-on, [data-glass]:not([data-glass="off"]) .theme-card.is-on,
.pal-swatch.is-on, [data-glass]:not([data-glass="off"]) .pal-swatch.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 14px 34px -16px color-mix(in oklab, var(--accent) 60%, transparent);
}
.theme-card.is-on::after, .pal-swatch.is-on::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.pal-swatch.is-on::after { top: 4px; right: 4px; width: 16px; height: 16px; font-size: 10px; }
.theme-card.is-on strong { color: var(--accent); }

/* ---------- trailers ---------- */

.art-trailer { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #000; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.art-trailer.in { opacity: 1; }
/* A 16:9 video filling a 2:3 poster: full height, centred, sides cropped. */
.art-trailer iframe { position: absolute; top: 0; left: 50%; width: 267%; height: 100%; border: 0; transform: translateX(-50%); pointer-events: none; }
.art-trailer-tag {
  --isz: 12px; position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.trailer-inline {
  position: relative; display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg);
  background: #000; box-shadow: var(--shadow); cursor: pointer;
}
.trailer-inline img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.6s var(--ease-out), opacity 0.3s; }
.trailer-inline:hover img { transform: scale(1.03); opacity: 1; }
.trailer-play {
  --isz: 26px; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: color-mix(in oklab, var(--accent) 92%, transparent); color: var(--accent-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform 0.25s var(--ease-out);
}
.trailer-inline:hover .trailer-play { transform: scale(1.08); }
.trailer-frame { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg); background: #000; }
.trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Move (phone ↔ laptop) and Movie night ---------- */

.move-page .page-head, .match-page .page-head { margin-bottom: 22px; }
.move-page .sub, .match-page .page-head .sub { max-width: 60ch; }
.move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sync-card { margin-bottom: 16px; }
.sync-card .qr-foot { max-width: 46ch; margin: 0 auto; }
.move-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.move-card .btn-row { margin-top: 0; }
.move-card .label { margin: 0 0 -6px; }
.move-head { display: flex; align-items: center; gap: 14px; }
.move-head .sub { margin: 2px 0 0; }
.move-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); --isz: 22px; }
.move-ico .i { width: 22px; height: 22px; }

.qr-stage { display: grid; place-items: center; align-self: center; width: min(100%, 380px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); cursor: pointer; }
.qr-stage.is-static { width: min(100%, 300px); margin: 4px auto 0; cursor: default; }
.qr-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.qr-frame, .qr-stage > .qr { display: block; width: 100%; height: 100%; }
.qr-frame[hidden] { display: none; }
.qr { display: block; width: 100%; height: 100%; border-radius: 18px; }
.qr-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--text-3); text-align: center; }
.qr-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 320px; }
.qr-parts i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background 0.15s, transform 0.15s; }
.qr-parts i.on { background: var(--accent); transform: scale(1.35); }

.scan-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: #000; }
.scan-stage video { width: 100%; height: 100%; object-fit: cover; }
.scan-box { position: absolute; inset: 14% 22%; border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 26px 3px, linear-gradient(var(--accent), var(--accent)) top left / 3px 26px,
    linear-gradient(var(--accent), var(--accent)) top right / 26px 3px, linear-gradient(var(--accent), var(--accent)) top right / 3px 26px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 26px 3px, linear-gradient(var(--accent), var(--accent)) bottom left / 3px 26px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 26px 3px, linear-gradient(var(--accent), var(--accent)) bottom right / 3px 26px;
  background-repeat: no-repeat; }
.scan-meter { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  background: rgba(10, 10, 12, 0.66); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.scan-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.scan-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.25s var(--ease-out); }

.move-found { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--s2); }
.move-found div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.move-found span:not(.move-ico) { font-size: 13px; color: var(--text-2); }
.move-found.is-done .move-ico { background: color-mix(in oklab, var(--accent) 24%, transparent); }
.move-note { margin: 0; font-size: 13px; color: var(--text-2); }
.move-note.warn { color: var(--text); }
.move-card .footnote { margin: 0; }
.move-row { padding-top: 14px; border-top: 1px solid var(--line); }
.move-row small { display: block; font-size: 12px; color: var(--text-3); }

.match-covers { display: flex; flex: none; padding-left: 10px; }
.match-covers .art { width: 34px; margin-left: -10px; border-radius: 5px; box-shadow: 0 0 0 2px var(--s1), 0 4px 10px rgba(0, 0, 0, 0.3); }
.match-paste { display: flex; gap: 8px; }
.match-paste .input { flex: 1; min-width: 0; }
.match-recent-label { margin: 6px 0 -6px; }
.match-recent { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.match-recent li { display: flex; align-items: center; gap: 6px; }
.match-recent a { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px; border-radius: 10px; }
.match-recent a:hover { background: var(--s2); }
.match-recent span { font-size: 12px; color: var(--text-3); }
.match-page .eyebrow a:hover { color: var(--accent); }
.match-top { margin: 4px 0 30px; }
.match-sec { margin-top: 30px; }

@media (max-width: 760px) {
  .move-grid { grid-template-columns: minmax(0, 1fr); }
  .move-card { padding: 16px; }
}

/* Phones and tablets held upright have room under the video: every server in view, in rows, Vega's on their own line. */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 760px) and (min-height: 560px) {
  .player-bar { flex-wrap: wrap; gap: 10px; overflow: visible; }
  .player-bar > .label { display: none; }
  .player-servers { flex: 1 1 100%; flex-wrap: wrap; max-height: 36vh; overflow: hidden auto; }
  .player-bar .srv-sep { display: block; flex-basis: 100%; margin: 4px 0 0; padding: 0; border: 0; }
  .player-servers .srv { height: 38px; }
  .player-bar [data-pl="next"] { margin-left: auto; height: 40px; }
  .player-notice { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; }
}
@media (max-width: 760px) and (min-height: 560px) {
  .player-bar [data-pl="next"] { flex: 1; justify-content: center; }
  .player-bar [data-pl="next"] kbd { display: none; }
}

/* ---------- style signatures (after the glass rules, so they win) ---------- */

/* Material 3: tonal surfaces, big shapes, a FAB for play, tonal buttons. */
:root[data-theme="material"] .tonight { border-radius: 28px; background: color-mix(in oklab, var(--accent) 6%, var(--s1)); }
:root[data-theme="material"] :is(.pick-card, .glance-item, .tile) { border-radius: 20px; background: color-mix(in oklab, var(--accent) 10%, var(--s1)); border-color: transparent; }
:root[data-theme="material"] .pick-play { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 34%, var(--s3)); color: var(--text); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
:root[data-theme="material"] .btn-ghost { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: transparent; }
:root[data-theme="material"] .h2 { font-size: 20px; font-weight: 500; }
:root[data-theme="material"] .art { border-radius: 16px; }

/* One UI: rounded cards on black, bold titles, roomy. */
:root[data-theme="oneui"] :is(.tonight, .panel) { border-radius: 26px; }
:root[data-theme="oneui"] :is(.pick-card, .glance-item, .tile) { border-radius: 22px; border-color: transparent; background: var(--s2); }
:root[data-theme="oneui"] .h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
:root[data-theme="oneui"] .btn { font-weight: 600; }
:root[data-theme="oneui"] .art { border-radius: 18px; }
:root[data-theme="oneui"] .pick-play { width: 36px; height: 36px; }

/* Cupertino: tinted buttons, grouped cards, large bold titles. */
:root[data-theme="mac"] .btn-ghost { background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent); border-color: transparent; }
:root[data-theme="mac"] .btn-ghost:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); }
:root[data-theme="mac"] .h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
:root[data-theme="mac"] :is(.pick-card, .glance-item) { border-radius: 14px; }

/* Glyph: dot-matrix numbers and headings. */
:root[data-theme="nothing"] :is(.glance-item strong, .tile-value, .stat-big) { font-family: var(--display); font-weight: 800; letter-spacing: 0.03em; }
:root[data-theme="nothing"] .h2 { font-family: var(--display); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 17px; }

/* Neon: glowing edges, a magenta-to-cyan play button, a glowing headline. */
:root[data-theme="neon"] :is(.tonight, .panel, .glance, .tiles, .modal) {
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--neon-2) 12%, transparent), 0 0 28px -8px color-mix(in oklab, var(--accent) 55%, transparent);
}
:root[data-theme="neon"] :is(.pick-play, .btn-primary) { background: linear-gradient(120deg, var(--accent), var(--neon-2)); color: #0B0716; border: 0; box-shadow: 0 0 18px -2px color-mix(in oklab, var(--accent) 60%, transparent); }
:root[data-theme="neon"] .hero-words em, :root[data-theme="neon"] .display em { text-shadow: 0 0 22px color-mix(in oklab, var(--accent) 70%, transparent); }
:root[data-theme="neon"] .nav .nav-pill { background: color-mix(in oklab, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 14px -3px var(--accent); }
:root[data-theme="neon"] .art { box-shadow: 0 0 0 1px color-mix(in oklab, var(--neon-2) 25%, transparent); }
:root[data-theme="neon"] .card-link:hover .art { box-shadow: 0 0 0 1px var(--accent), 0 0 24px -4px var(--accent); }
[data-mode="light"][data-theme="neon"] .hero-words em { text-shadow: none; }

/* Retro: flat tape-box colours, a little colour bleed on the headline, chunky edges. */
:root[data-theme="retro"] :is(.tonight, .panel, .glance, .tiles, .pick-card) { border: 2px solid var(--line-2); box-shadow: none; }
:root[data-theme="retro"] .hero-words em, :root[data-theme="retro"] .display em { text-shadow: 2px 0 0 color-mix(in oklab, var(--retro-2) 55%, transparent), -2px 0 0 color-mix(in oklab, #FF3C8E 45%, transparent); }
:root[data-theme="retro"] .pick-play { border-radius: 4px; }
:root[data-theme="retro"] .art { border: 2px solid var(--line-2); }
:root[data-theme="retro"] .nav .nav-pill { background: var(--accent); border-radius: 4px; }
:root[data-theme="retro"] .nav a.is-on { color: var(--accent-ink); }
:root[data-theme="retro"] :is(.glance-item strong, .tile-value, .h2) { font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; }
:root[data-theme="retro"] .h2 { font-size: 24px; }
:root[data-theme="retro"] .glance-item strong { font-size: 40px; }

/* Style picker previews for the two newest. */
.theme-neon { --pv-bg: linear-gradient(140deg, #16132A, #07060F); --pv-text: #F3F0FF; --pv-accent: linear-gradient(120deg, #FF3CAC, #2DE2E6); --pv-card: #1E1A38; --pv-r: 4px; --pv-btn: 5px; }
.theme-neon .theme-preview::after { box-shadow: 0 0 10px -1px #FF3CAC; outline: 1px solid rgba(255, 60, 172, 0.6); }
[data-mode="light"] .theme-neon { --pv-bg: #F5F2FF; --pv-text: #150F2E; --pv-accent: linear-gradient(120deg, #D1007A, #008C99); --pv-card: #FFFFFF; }
.theme-retro { --pv-bg: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px), #1A1320; --pv-text: #FFEBD9; --pv-accent: #FF8A3D; --pv-card: #372A43; --pv-r: 2px; --pv-btn: 3px; }
[data-mode="light"] .theme-retro { --pv-bg: repeating-linear-gradient(0deg, rgba(60, 35, 20, 0.08) 0 1px, transparent 1px 3px), #F4EAD5; --pv-text: #2B1B12; --pv-accent: #E4572E; --pv-card: #E6D5B3; }

/* ---------- Aurora: a ribbon of the accent's colours with faint curtain streaks, drifting slowly ---------- */
.aurora::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 14%; height: 36%; opacity: 0.9;
  background: linear-gradient(100deg, transparent 8%, var(--a1) 30%, var(--a2) 52%, var(--a3) 72%, transparent 92%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, rgba(0, 0, 0, 0.72) 10px 22px);
  mask: repeating-linear-gradient(90deg, #000 0 10px, rgba(0, 0, 0, 0.72) 10px 22px);
  filter: blur(16px); transform: skewY(-9deg); border-radius: 50%;
  animation: auroraRibbon 36s ease-in-out infinite alternate;
}
@keyframes auroraRibbon { 0% { transform: skewY(-9deg) translateX(-6%); } 50% { transform: skewY(-5deg) translate(4%, 6%) scaleY(1.15); } 100% { transform: skewY(-11deg) translateX(8%); } }
[data-motion="calm"] .aurora::before { animation: none; }

/* ---------- phones and tablets: smooth scrolling first ----------
   A live backdrop blur re-blurs whatever is behind it on every scroll frame, and a page holds dozens (two buttons on
   every poster, badges, tags, each glass card). On touch screens only the bars and sheets keep the real blur; cards
   keep the glass tint and rim, and the small poster buttons get a solid translucent fill. */
/* The small buttons and badges on every poster: a solid translucent fill everywhere (a live blur per poster button
   is dozens of blurs per page). */
.qa, .badge, .tag-must, .resume-play .i, .player-starting { -webkit-backdrop-filter: none; backdrop-filter: none; }
.qa:where(:not(.on)), .badge:where(:not(.badge-seen)) { background: rgba(12, 12, 14, 0.72); } /* watched and saved stay in the accent */
@media (hover: none) and (pointer: coarse) {
  [data-glass]:not([data-glass="off"]) :is(.panel, .tonight, .empty, .glance-item, .tile, .theme-card, .file-status, .franchise, .coll, .hero-search, .search-trigger, .did-you-mean, .person, .dial-step, .chip, .seg) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, var(--rim2)), transparent 55%),
      linear-gradient(160deg, color-mix(in oklab, var(--s2) var(--gm3), transparent), color-mix(in oklab, var(--s1) var(--gm3), transparent));
  }
  [data-glass]:not([data-glass="off"]) .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Long pages (300+ collections, long lists): the browser skips laying out and painting what's off screen until it
   scrolls near, and keeps its last size so the scrollbar doesn't jump. (Not poster grids: containment would clip
   their hover tilt and Pop's offset shadows.) */
.collections > .coll { content-visibility: auto; contain-intrinsic-size: auto 250px; }
.rows > .row { content-visibility: auto; contain-intrinsic-size: auto 72px; }

/* Collections: a top-bar button on phones only (the tab bar is full). */
.topbar-coll { display: none; }
@media (max-width: 760px) {
  .topbar-coll { display: grid; }
  .topbar-coll.is-on { color: var(--accent); }
  /* Library's tabs all fit on a phone: Collections has its button up top, the counts are in the line above, and the
     four share the width, so nothing hides off to the side. */
  .tabs .tab-coll { display: none; }
  .tabs { overflow: visible; }
  .tabs .tab { flex: 1 1 0; justify-content: center; min-width: 0; padding: 10px 2px; font-size: 13.5px; }
  .tabs .tab span { display: none; }
  .lib-tabs-top { display: none; }
  /* Movie night, Diary, Stats: one row of small buttons, not two rows of big ones. */
  .head-actions { flex-wrap: nowrap; gap: 6px; }
  .head-actions .btn { --isz: 15px; height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; }
}

@media (max-width: 350px) { .tabs .tab { font-size: 12.5px; } }
@media (min-width: 400px) and (max-width: 640px) {
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people.is-collapsed > .person:nth-child(3) { display: flex; }
  .people-more.is-three { display: none; }
}

/* Touch screens have no keyboard: no shortcut chips ("g h", "esc", "⌘K", "R") in search, buttons or bars.
   Hints inside sentences ("press N") stay, since hiding them would leave a gap in the text. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .pal-keys, .palette-foot, .palette-input kbd, .hero-search kbd, .search-trigger kbd, .btn kbd { display: none; }
}

/* Search on phones: always in the top bar, on every page (the tab bar's middle button is Browse). It sits in the
   middle of the bar, or — Settings → Appearance → Search button — as a round button just under Settings. With it
   always there, Home doesn't repeat it as a big bar. */
.search-float { display: none; }
@media (max-width: 760px) {
  .topbar-inner { position: relative; }
  :root:not([data-search="float"]) .search-trigger {
    display: flex; position: absolute; left: 50%; top: 50%; translate: -50% -50%; gap: 6px; width: auto; min-width: 0; height: 36px;
    margin: 0; padding: 0 14px 0 11px; font-size: 13px; font-weight: 500; color: var(--text-2);
  }
  :root:not([data-search="float"]) .search-trigger span { display: inline; flex: none; }
  :root .search-trigger { --isz: 17px; view-transition-name: none; }
  html.has-page-search:not(.search-docked) .search-trigger { opacity: 1; transform: none; pointer-events: auto; }
  :root[data-search="float"] .search-float {
    --isz: 20px; position: absolute; top: calc(100% + 8px); right: 13px; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: color-mix(in oklab, var(--s3) 86%, transparent); color: var(--text); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6); transition: transform 0.15s;
  }
  :root[data-search="float"] .search-float:active { transform: scale(0.92); }
  :root[data-theme="material"][data-search="float"] .search-float { border-radius: 16px; border-color: transparent; background: color-mix(in oklab, var(--accent) 24%, var(--s3)); }
  :root[data-search="float"] .pet { top: calc(var(--topbar-h, 56px) + 66px + env(safe-area-inset-top, 0px)); }
  .hero-search { display: none; }
  .home-hero .glance { margin-top: 20px; }
  /* A little tighter up top, so the middle search has room either side. */
  .topbar-actions { gap: 2px; }
  .topbar-actions .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  /* "Another three" is just its icon here, sized and lined up with the play buttons below it. */
  .tonight-more { width: 40px; height: 32px; margin-right: 10px; padding: 0; justify-content: center; }
}
/* Very narrow phones: the middle search is just its icon, so it never meets the logo or the buttons. */
@media (max-width: 360px) {
  :root:not([data-search="float"]) .search-trigger { width: 38px; padding: 0; justify-content: center; }
  :root:not([data-search="float"]) .search-trigger span { display: none; }
  .glance-item { padding-inline: 4px; }
  .glance-item span, .glance-item span[data-short]::after { font-size: 9.5px; }
}

/* Tablets: the full nav and the buttons share a narrow bar. Tighter links; and if a style's type runs wider still,
   the links scroll sideways instead of pushing Settings off the screen. */
@media (min-width: 761px) and (max-width: 1000px) {
  .topbar-inner { gap: 14px; }
  :root .nav a { padding: 6px 8px; font-size: 13.5px; }
  .nav { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .topbar-actions { flex: none; }
}

/* ---------- Tonight: three picks as wide artwork cards ---------- */
.tonight-row { margin-top: 40px; }
.tonight-row .tonight-more { margin-right: 0; }
.tn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tn-card {
  position: relative; isolation: isolate; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--s3), var(--s1)); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.45s;
}
[data-theme="material"] .tn-card { border-radius: 24px; }
.tn-link { position: absolute; inset: 0; display: block; color: #fff; }
.tn-media { position: absolute; inset: 0; }
.tn-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(0.2, 0.9, 0.25, 1); }
.tn-card:not(.is-posteronly) .tn-poster { display: none; }
/* No backdrop: the poster stands at the right, on a soft wash of the card's own colour. */
.is-posteronly .tn-poster { position: absolute; top: 12px; right: 12px; bottom: 12px; aspect-ratio: 2 / 3; }
.is-posteronly .tn-poster .art { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.tn-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0) 72%); }
.is-posteronly::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 60%); }
.tn-body { position: absolute; left: 16px; right: 110px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.is-posteronly .tn-body { right: auto; max-width: calc(100% - 120px - 16px - 12px); top: 16px; bottom: auto; }
.tn-why { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.tn-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.tn-facts { font-size: 12.5px; color: rgba(255, 255, 255, 0.74); }
.tn-play {
  --isz: 18px; position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #111; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.15s, background 0.15s;
}
.tn-play:hover { background: #fff; }
.tn-play:active { transform: scale(0.94); }
@media (hover: hover) {
  .tn-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.8); }
  .tn-card:hover .tn-bg { transform: scale(1.07); }
}
:root[data-motion="calm"] .tn-card, :root[data-motion="calm"] .tn-bg { transition: none; transform: none !important; }
/* Tablets and phones: a row you swipe, the next card peeking in. */
@media (max-width: 900px) {
  .tn-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
  .tn-list::-webkit-scrollbar { display: none; }
  .tn-card { flex: 0 0 48%; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .tonight-row { margin-top: 28px; }
  .tn-card { flex-basis: 74%; aspect-ratio: 16 / 9; }
  .tn-title { font-size: 16px; }
  .tn-why { font-size: 10px; }
  .tn-facts { font-size: 11.5px; }
  .tn-body { left: 12px; right: 92px; bottom: 11px; }
  .tn-play { right: 10px; bottom: 10px; height: 32px; padding: 0 13px 0 10px; font-size: 12.5px; }
  .is-posteronly .tn-body { max-width: calc(100% - 110px - 16px - 12px); }
}

/* ---------- Liquid glass (Apple style) ----------
   On top of the frosted fill: a specular rim that catches the light at the top left and fades round the edge (a
   gradient ring drawn with a mask, so it follows any corner radius), a deeper blur with more colour, and on phones a
   tab bar that floats as a capsule above the page. Off when glass is off (and Pop / Retro, which are flat by design). */
/* No weight of its own (:where), so the tab bar, toasts and sticky panels keep their fixed / sticky positions.
   Sheets and segmented rows scroll, so their rim is a shadow on the box instead (a ::before would scroll away). */
[data-glass]:not([data-glass="off"]) .seg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--rim) * 2.2)), inset 0 0 0 1px rgba(255, 255, 255, calc(var(--rim) * 0.8)); }
[data-glass]:not([data-glass="off"]) .modal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--rim) * 2.2)), inset 0 0 0 1px rgba(255, 255, 255, calc(var(--rim) * 0.8)), var(--shadow-lg); }
:where([data-glass]:not([data-glass="off"]) :is(.search-trigger, .hero-search, .modal, .toast, .panel, .seg, .chip, .tabbar, .search-float, .tn-play)) { position: relative; isolation: isolate; }
[data-glass]:not([data-glass="off"]) :is(.search-trigger, .hero-search, .toast, .panel, .chip, .tabbar, .search-float)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, calc(var(--rim) * 2.6)) 0%, rgba(255, 255, 255, calc(var(--rim) * 0.6)) 28%,
    rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, calc(var(--rim) * 1.2)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-mode="light"][data-glass]:not([data-glass="off"]) :is(.search-trigger, .hero-search, .toast, .panel, .chip, .tabbar, .search-float)::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 30%, rgba(0, 0, 0, 0.06) 60%, rgba(255, 255, 255, 0.7));
}
[data-glass="clear"] :is(.search-trigger, .hero-search, .search-float) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)), color-mix(in oklab, var(--s2) 46%, transparent);
  border-color: transparent;
}
/* Only the floating button needs its own live blur: the bar's pill sits on the already-blurred bar, and Home's
   big search sits on the soft background. */
[data-glass="clear"] .search-float { -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.08); backdrop-filter: blur(22px) saturate(190%) brightness(1.08); }
[data-mode="light"][data-glass="clear"] :is(.search-trigger, .hero-search, .search-float) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
}
@media (max-width: 760px) {
  /* The tab bar floats: a glass capsule with a margin all round, like iOS. */
  [data-glass]:not([data-glass="off"]) .tabbar {
    left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: 58px; padding-bottom: 0;
    border-radius: 30px; border: 0; background: var(--grain), color-mix(in oklab, var(--s1) 42%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, calc(var(--rim) * 1.4));
  }
  [data-mode="light"][data-glass]:not([data-glass="off"]) .tabbar { background: var(--grain), color-mix(in oklab, #fff 62%, transparent); }
  [data-glass]:not([data-glass="off"]) body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  [data-glass]:not([data-glass="off"] ) .toasts { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Motion that answers you ----------
   A press gives way a touch (both motion settings: it's feedback, not movement); with full motion, a chosen tab's icon
   springs and sheets rise with a little overshoot. */
:is(.btn, .icon-btn, .qa, .card-link, .tn-card, .resume-card, .seg-btn, .chip, .srv, .tab-browse, .tabbar a):active { transform: scale(0.965); transition: transform 0.08s ease-out; }
:root[data-motion="full"] .tabbar a.is-on .i { animation: tabSpring 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes tabSpring { 0% { transform: scale(0.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
:root[data-motion="full"] .modal { transition: transform 0.42s cubic-bezier(0.22, 1.25, 0.36, 1); }

/* ---------- Sakura, the anime app ----------
   Iris's design language with its own colour (cherry-blossom pink, set in theme.js) and mark, plus a few parts of
   its own: the app switch on the logo, the season and letter strips, the Sub / Dub switch in the player. */

/* The logo is the switch between Iris and Sakura: a capsule with both marks, the current one named and lit in its
   own colour. Switching morphs the capsule (the name slides across) before the other app opens. */
.app-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: -4px; padding: 3px; border-radius: 999px; background: color-mix(in oklab, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.app-seg {
  display: inline-flex; align-items: center; height: 34px; padding: 0 6px; border-radius: 999px; color: var(--text);
  transition: background 0.35s var(--ease-out), padding 0.4s cubic-bezier(0.34, 1.25, 0.45, 1), box-shadow 0.35s;
}
.app-seg .mark { width: 24px; height: 24px; transition: transform 0.6s var(--ease-out), opacity 0.25s, filter 0.25s; }
.app-seg:not(.is-on) .mark { opacity: 0.72; transform: scale(0.84); }
.app-seg:not(.is-on):hover .mark { opacity: 1; filter: none; transform: scale(0.96) rotate(36deg); }
.app-seg.is-on { padding-right: 12px; background: color-mix(in oklab, var(--accent) 20%, var(--s2)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.app-seg-word { display: grid; grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns 0.4s cubic-bezier(0.34, 1.2, 0.45, 1), opacity 0.25s, margin 0.4s; }
.app-seg-word .brand-word { overflow: hidden; min-width: 0; font-size: 18px; white-space: nowrap; }
.app-seg.is-on .app-seg-word { grid-template-columns: 1fr; opacity: 1; margin-left: 7px; }
.app-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-mode="light"] .app-seg.is-on { background: color-mix(in oklab, var(--accent) 14%, #fff); }
/* Phones with the search in the middle of the bar: just the two marks. */
@media (max-width: 480px) {
  :root:not([data-search="float"]) .app-seg-word { display: none; }
  :root:not([data-search="float"]) .app-seg.is-on { padding-right: 6px; }
}
:root[data-motion="calm"] :is(.app-seg, .app-seg-word, .app-seg .mark) { transition: none; }

.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px;
  border-radius: 22px; background: var(--s2); border: 1px solid var(--line);
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.45, 1), border-color 0.2s, background 0.2s;
}
.app-tile:hover { transform: translateY(-3px); border-color: var(--line-2); }
.app-tile:active { transform: scale(0.97); }
.app-tile.is-on { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 10%, var(--s2)); }
.app-icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: #0A0A0B;
  box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--accent) 60%, #000), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.app-icon .mark { width: 54px; height: 54px; }
.app-tile:hover .app-icon .mark { transform: rotate(40deg); transition: transform 0.9s var(--ease-out); }
.app-text { display: flex; flex-direction: column; gap: 2px; }
.app-text strong { font-family: var(--word); font-style: var(--word-style); font-weight: var(--word-weight); font-size: 22px; line-height: 1.1; }
.app-text small { font-size: 13px; color: var(--text-2); }
.app-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); --isz: 15px; }

/* The boot screen shows the app you're opening. */
.mark-boot-sakura, .boot-sakura { display: none; }
[data-app="sakura"] .boot .mark-boot:not(.mark-boot-sakura), [data-app="sakura"] .boot-iris { display: none; }
[data-app="sakura"] .boot .mark-boot-sakura { display: block; }
[data-app="sakura"] .boot-sakura { display: inline; }

/* Cards and title pages */
.tag-air { box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.55); color: #86E3A4; }
.tag-air::before { content: "●"; font-size: 7px; vertical-align: 1px; }
.film-alt { margin: -6px 0 12px; font-size: 15px; color: var(--text-3); }
.air-next { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 500; --isz: 14px; }
.imdb-score + .air-next { margin-left: 12px; }
.anime-page .film-scores { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.person.char { cursor: default; }

/* Lists: genres, seasons, letters */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
:root .chip.is-on, :root .chip.is-on:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sakura-chips { margin: 18px 0 4px; }
.sakura-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px; }
.page > .hero-search { width: 100%; margin-top: 18px; }
.sakura-years, .az-strip {
  display: flex; gap: 6px; margin-top: 18px; padding: 2px 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.sakura-years::-webkit-scrollbar, .az-strip::-webkit-scrollbar { display: none; }
.sakura-years .chip { flex: none; font-variant-numeric: tabular-nums; }
.az-letter {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: var(--s2); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s var(--ease-out);
}
.az-letter:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-1px); }
.az-letter.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (min-width: 1000px) {
  .az-strip { flex-wrap: wrap; overflow: visible; -webkit-mask: none; mask: none; }
}
.sakura-genres .chip-row { padding-bottom: 4px; }

/* The player's Sub / Dub switch (anime only). */
.player-audio { flex: none; }
.player-audio .seg { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.player-audio .seg-btn { height: 26px; color: rgba(255, 255, 255, 0.7); }
.player-audio .seg-btn.is-on { background: var(--accent); color: var(--accent-ink); }
.settings .apps .app-tile { flex-direction: row; align-items: center; padding: 12px; border-radius: 18px; }
.settings .apps .app-icon { width: 52px; height: 52px; border-radius: 14px; }
.settings .apps .app-icon .mark { width: 40px; height: 40px; }
.settings .apps .app-text strong { font-size: 18px; }
.settings .apps .app-check { display: none; }
.settings .apps .app-text { min-width: 0; }

/* ---------- motion.js: smooth scrolling, the headline word by word ---------- */

/* Lenis (smooth wheel scrolling on mouse and trackpad) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Home's headline arrives a word at a time, out of a soft blur; its coloured half glows gently. */
:root[data-motion="full"] .hero-words .word { display: inline-block; animation: wordIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
@keyframes wordIn { from { opacity: 0; transform: translateY(0.38em); filter: blur(10px); } }
:root[data-motion="full"]:not([data-theme="neon"]):not([data-theme="retro"]) .hero-words em { animation: emGlow 5s 1.2s ease-in-out infinite alternate; }
@keyframes emGlow { from { text-shadow: 0 0 0 transparent; } to { text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .hero-words .word, .hero-words em { animation: none !important; } }

/* Sakura collections: the title you came from is marked in the list. */
.row.is-here { background: var(--accent-soft); }
.coll-sub { margin: 30px 0 16px; }

/* Settings → Palette: a grid of all the palettes (no scrolling row, so none is cut off or faded). */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.palette-grid .pal-swatch { min-width: 0; }
.palette-grid .pal-swatch small { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- parallax: pictures move a little slower than the page ----------
   Scroll-driven animations (run by the browser off the main thread). Only with Full motion; the `translate` property
   is used, so each picture's own zoom and hover effects keep working. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The hero backdrop on film, show and anime pages sinks and fades as you scroll past it. */
    :root[data-motion="full"] .film-backdrop.is-in img {
      animation: drift 30s ease-in-out infinite alternate, heroSink linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 90vh;
    }
    @keyframes heroSink { to { translate: 0 22vh; opacity: 0.35; } }
    /* Tonight's Trio, Spotlight and Up Next: the picture drifts inside its card. */
    :root[data-motion="full"] :is(.tn-card .tn-bg, .resume-art > img) {
      inset: -9% 0 auto; height: 118%;
      animation: cardDrift linear both; animation-timeline: view();
    }
    :root[data-motion="full"] .resume-art > img { position: absolute; left: 0; width: 100%; }
    @keyframes cardDrift { from { translate: 0 -6%; } to { translate: 0 6%; } }
  }
}
/* Rows dragged with the mouse: the grabbing hand, and no snapping or smooth scrolling fighting the drag. */
@media (hover: hover) and (pointer: fine) {
  .rail-track, .tn-list { cursor: grab; }
  .rail-track.is-dragging, .tn-list.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .is-dragging a, .is-dragging img { pointer-events: none; }
}
/* A stacked setting (label above, control below) spans the row's full width. */
.setting-row.setting-stack { justify-content: stretch; }
.setting-stack > :not(span):not(label) { min-width: 0; }
/* Settings: one short line under a section's name, saying what it's for. */
.set-note { margin: -4px 0 12px; font-size: 12px; color: var(--text-3); }