:root {
  color-scheme: dark;
  --black:#000; --surface:#101114; --panel:#1a1b1d; --white:#fff;
  --muted:#b8b6bb; --subtle:#89868e; --line:#ffffff29;
  --blue:#3d6a99; --link:#71b8f2; --gutter:48px;
  --ease:cubic-bezier(0,0,.34,1); --font:Inter,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { background:#000; scroll-behavior:smooth; scrollbar-color:#555 #080808; }
body { margin:0; background:#000; color:#fff; font:400 16px/1.45 var(--font); }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
button { color:inherit; background:none; border:0; cursor:pointer; }
button:disabled { opacity:.35; cursor:default; }
img { display:block; max-width:100%; }
svg { width:24px; height:24px; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.15; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #fff; outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-60px; left:16px; padding:12px 20px; background:#fff; color:#000; z-index:100; border-radius:4px; }
.skip-link:focus { top:12px; }
.header { position:fixed; left:0; right:0; top:0; z-index:40; height:80px; display:flex; align-items:center; padding:0 var(--gutter); transition:background .2s var(--ease); background:linear-gradient(#0008,transparent); }
.header.scrolled,.header.solid { background:#000f; }
.header-left,.header-right { display:flex; align-items:center; }
.header-right { margin-left:auto; gap:2px; }
.icon-button { width:52px; height:52px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; transition:background .2s var(--ease); position:relative; }
.icon-button:hover,.icon-button[aria-expanded="true"] { background:#ffffff24; }
.header-left>.icon-button { width:32px; margin-right:20px; }
.wordmark { display:inline-flex; flex-direction:column; font-size:24px; font-weight:900; letter-spacing:-1.5px; line-height:.88; }
.wordmark>span { font-size:11px; font-weight:500; letter-spacing:4.3px; margin-top:6px; padding-left:2px; }
.header .wordmark { font-size:24px; }
.history-icon { border:1px solid #ffffff55; border-radius:100px; width:32px; height:32px; margin-left:14px; }
.history-icon svg { width:18px; height:18px; }
.nav-count { display:grid; place-items:center; font-size:10px; font-weight:700; line-height:1; min-width:18px; height:18px; padding:0 4px; border-radius:10px; position:absolute; top:5px; right:3px; background:#fff; color:#000; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero { position:relative; min-height:610px; height:min(49vw,820px); isolation:isolate; background:#050505; }
.hero-art { position:absolute; inset:0; overflow:hidden; z-index:-2; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center 25%; animation:hero-reveal .8s var(--ease) both; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#000b 0%,#0005 36%,#0000 72%),linear-gradient(0deg,#000 0%,#000c 10%,#0000 58%); }
.hero-content { position:absolute; left:var(--gutter); bottom:102px; width:min(485px,48%); }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#e6e6e6; margin-bottom:18px; }
.hero-title { font-size:clamp(44px,4.5vw,76px); line-height:.95; font-weight:800; letter-spacing:-2.7px; text-wrap:balance; margin-bottom:18px; max-width:600px; }
.hero-title.title-magic { font-family:Georgia,serif; font-weight:500; font-size:clamp(52px,5vw,84px); line-height:.89; letter-spacing:-2.7px; }
.metadata { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; color:#dedede; }
.media-label { border:1px solid #ffffff70; padding:1px 5px; font-size:10px; letter-spacing:.65px; line-height:1.4; }
.hero-overview { font-size:16px; line-height:1.4; margin-top:10px; max-width:465px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-actions { display:flex; align-items:center; gap:14px; margin-top:20px; }
.button { min-height:52px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 28px; font-weight:700; font-size:18px; transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease); }
.button-primary { background:#ddd; color:#000; }
.button-primary:hover { background:#fff; }
.button-secondary { background:#ffffff29; }
.button-secondary:hover { background:#ffffff45; }
.button-outline { border:1px solid #ffffff70; }
.button-outline:hover { background:#ffffff17; }
.button-small { min-height:42px; padding:10px 18px; font-size:14px; }
.button-square { padding:0; width:52px; flex-shrink:0; }
.hero-more { font-size:14px; font-weight:600; padding:12px; opacity:.8; display:inline-flex; align-items:center; gap:7px; }
.hero-more:hover { opacity:1; }
.hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; }
.hero-dot { width:22px; height:28px; display:grid; place-items:center; }
.hero-dot::after { content:""; width:10px; height:10px; border-radius:50%; background:#ffffff65; transition:background .2s,transform .2s; }
.hero-dot[aria-current="true"]::after { background:white; }
.hero-dot:hover::after { transform:scale(1.3); }
.hero-arrow { position:absolute; top:calc(50% - 28px); width:40px; height:56px; opacity:0; transition:opacity .2s; border-radius:4px; z-index:2; }
.hero:hover .hero-arrow,.hero:focus-within .hero-arrow { opacity:1; }
.hero-arrow:hover { background:#0005; }
.hero-arrow.prev { left:5px; } .hero-arrow.next { right:5px; }
.hero-counter { position:absolute; right:var(--gutter); bottom:29px; font-size:11px; color:#bbb; letter-spacing:1px; }
.rail-section { position:relative; margin:0 0 42px; }
.rail-header { display:flex; align-items:flex-end; gap:20px; padding:0 var(--gutter); margin-bottom:16px; }
.rail-header h2 { font-size:22px; letter-spacing:-.4px; font-weight:700; }
.rail-subtitle { color:var(--muted); font-size:12px; margin-top:5px; }
.rail-header-actions { display:flex; align-items:center; margin-left:auto; gap:5px; }
.rail-view-all { font-size:12px; color:#ddd; font-weight:500; margin-right:12px; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.rail-view-all:hover { color:#fff; }
.rail-view-all svg { width:15px; height:15px; }
.rail-header-actions .icon-button { width:30px; height:30px; }
.rail { display:flex; gap:16px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding:6px var(--gutter) 12px; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail>.card { flex:0 0 calc((100% - 80px)/6); scroll-snap-align:start; }
.card { position:relative; min-width:0; }
.card-art { position:relative; display:block; aspect-ratio:2/3; background:#151515; border-radius:4px; transition:outline .2s var(--ease),transform .2s var(--ease); outline:2px solid transparent; outline-offset:4px; }
.card-art img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.card-art:hover,.card:focus-within .card-art { outline-color:#fff; }
.card-play { position:absolute; bottom:16px; left:16px; opacity:0; transition:opacity .2s; display:grid; place-items:center; }
.card-art:hover .card-play,.card:focus-within .card-play { opacity:1; }
.card-art:hover::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#0009); border-radius:0 0 4px 4px; pointer-events:none; }
.card-play { z-index:1; }
.card-menu-button { position:absolute; right:0; top:0; width:36px; height:40px; border-radius:4px; display:grid; place-items:center; color:white; text-shadow:0 1px 5px #000; background:linear-gradient(#0004,transparent); }
.card-menu-button:hover { background:#000b; }
.card-menu-button svg { width:20px; height:20px; }
.card-copy { margin-top:10px; }
.card-title { font-size:13px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.card-meta { font-size:12px; color:var(--muted); display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
.card-badge { position:absolute; left:0; top:0; z-index:1; background:#fff; color:#000; padding:3px 6px; font-size:10px; font-weight:700; border-radius:4px 0 2px 0; }
.card-saved { position:absolute; left:10px; bottom:10px; background:#0009; padding:5px; border-radius:50%; width:27px; height:27px; }
.card-saved svg { width:17px; height:17px; }
.card.landscape .card-art { aspect-ratio:16/9; }
.card.landscape .card-title { font-size:14px; }
.card-progress { position:absolute; bottom:0; left:0; right:0; height:4px; background:#ffffff40; }
.card-progress>span { display:block; height:100%; background:#fff; }
.home-rails { position:relative; padding-top:18px; }
.category-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:8px var(--gutter) 72px; }
.category-tile { aspect-ratio:16/8; overflow:hidden; position:relative; border-radius:8px; outline:2px solid transparent; outline-offset:4px; }
.category-tile img { width:100%; height:100%; object-fit:cover; opacity:.65; transition:transform .4s var(--ease),opacity .4s; }
.category-tile:hover { outline-color:#fff; } .category-tile:hover img { transform:scale(1.025); opacity:.85; }
.category-tile::after { content:""; position:absolute; inset:20% 0 0; background:linear-gradient(transparent,#000b); }
.category-tile span { position:absolute; bottom:22px; left:24px; z-index:1; font-size:28px; font-weight:700; }
.page { padding:126px var(--gutter) 72px; min-height:75vh; animation:page-reveal .32s var(--ease) both; }
.page-heading { display:flex; align-items:center; gap:20px; margin-bottom:36px; }
.page-heading h1 { font-size:32px; letter-spacing:-.75px; font-weight:700; }
.page-heading small { color:var(--muted); font-size:13px; display:block; margin-top:8px; }
.page-heading .button { margin-left:auto; }
.tabs { display:flex; gap:12px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; margin-bottom:28px; }
.tab { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 14px; color:#bbb; font-size:16px; font-weight:500; position:relative; white-space:nowrap; }
.tab:hover { color:#fff; background:#ffffff15; border-radius:4px 4px 0 0; }
.tab[aria-selected="true"] { color:#fff; font-weight:700; }
.tab[aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:#fff; }
.pill-tabs { border-bottom:0; gap:26px; margin:0; padding:0 var(--gutter) 30px; }
.pill-tabs .tab { border-radius:30px; border:1px solid transparent; padding:10px 25px; font-weight:700; min-height:42px; }
.pill-tabs .tab[aria-selected="true"] { border-color:#fff9; }
.pill-tabs .tab[aria-selected="true"]::after { display:none; }
.browse-content { padding:14px var(--gutter) 72px; }
.browse-heading { font-size:26px; font-weight:700; margin-bottom:28px; display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.browse-heading small { font-size:12px; font-weight:400; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px 16px; }
.grid-landscape { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
.empty { text-align:center; min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:36px 20px 54px; }
.empty h2 { font-size:30px; font-weight:700; }
.empty p { color:var(--muted); font-size:16px; max-width:620px; }
.empty .empty-icon { width:40px; height:40px; color:#ccc; }
.collection-page .rail-section { margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); margin-top:24px; }
.search-page { padding-top:80px; }
.search-field { display:flex; align-items:center; gap:16px; height:68px; border:1px solid #888; background:#ffffff05; border-radius:8px; padding:0 16px; margin-bottom:30px; }
.search-field:focus-within { outline:1px solid white; border-color:white; }
.search-field input { color:#fff; width:100%; height:100%; font-size:20px; background:none; outline:0; border:0; min-width:0; }
.search-field input::placeholder { color:#b8b6bb; }
.search-field .icon-button { flex-shrink:0; width:40px; height:40px; }
.search-field .search-submit { font-size:12px; font-weight:600; letter-spacing:1px; height:38px; }
.search-toolbar { display:flex; align-items:center; gap:24px; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; }
.search-toolbar .tabs { margin:0; flex:1; }
.search-toolbar select { color:white; background:#131313; border:1px solid #ffffff50; padding:8px 12px; border-radius:4px; font-size:13px; }
.results-count { font-size:13px; color:var(--muted); margin-bottom:20px; }
.search-suggestions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.suggestion { border:1px solid #ffffff55; border-radius:100px; padding:8px 16px; font-size:13px; color:#ddd; }
.suggestion:hover { color:#fff; border-color:#fff; }
.search-page .rail-section { margin:40px calc(-1 * var(--gutter)); }
.pagination { display:flex; justify-content:center; gap:7px; margin-top:42px; align-items:center; }
.pagination button { min-width:40px; height:40px; padding:6px 12px; border-radius:4px; color:#bbb; }
.pagination button[aria-current="page"] { background:#fff; color:#000; }
.pagination button:hover:not(:disabled) { outline:1px solid #fff; }
.detail-hero { height:650px; min-height:650px; }
.detail-hero .hero-content { bottom:20px; width:70%; max-width:650px; }
.detail-hero .hero-title { max-width:540px; margin-bottom:24px; }
.detail-hero .hero-actions { flex-direction:column; align-items:flex-start; gap:18px; margin-top:22px; }
.detail-hero .button-primary { min-width:284px; }
.detail-action-group { display:flex; gap:20px; }
.detail-action { display:flex; align-items:center; flex-direction:column; gap:6px; min-width:62px; font-size:12px; padding:5px 10px; border-radius:4px; }
.detail-action:hover { background:#ffffff20; }
.detail-body { padding:24px var(--gutter) 72px; }
.detail-overview { max-width:840px; font-size:20px; line-height:1.45; font-weight:400; }
.tagline { margin:12px 0; color:var(--muted); font-size:15px; font-style:italic; }
.detail-genres { display:flex; flex-wrap:wrap; gap:12px; margin-top:15px; color:#ddd; font-size:13px; }
.detail-body>.tabs { margin:44px 0 30px; }
.detail-body .rail-section { margin:0 calc(-1 * var(--gutter)) 42px; }
.detail-panel { animation:page-reveal .3s var(--ease) both; }
.season-toolbar { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.season-toolbar select { background:#1b1b1b; border:1px solid #ffffff70; color:#fff; border-radius:4px; padding:10px 14px; font-weight:600; font-size:16px; max-width:100%; }
.season-toolbar p { color:var(--muted); font-size:13px; }
.episodes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 20px; }
.episode-image { aspect-ratio:16/9; display:block; background:#161719; position:relative; border-radius:4px; outline:2px solid transparent; outline-offset:4px; overflow:hidden; }
.episode-image:hover { outline-color:#fff; }
.episode-image>img { width:100%; height:100%; object-fit:cover; }
.episode-number { position:absolute; inset:0; display:grid; place-items:center; font-size:48px; font-weight:300; color:#aaa; }
.episode-image .card-play { opacity:1; }
.episode-title { display:flex; justify-content:space-between; gap:12px; margin-top:12px; }
.episode-title h3 { font-size:15px; font-weight:600; }
.episode-title span { color:var(--muted); font-size:12px; white-space:nowrap; }
.episode-copy { color:var(--muted); font-size:13px; margin-top:7px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.detail-fields { max-width:840px; margin:0; }
.detail-fields dt { font-size:16px; font-weight:700; margin-bottom:10px; }
.detail-fields dd { margin:0 0 26px; color:var(--muted); }
.cast-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px 18px; margin-top:24px; }
.cast-image { aspect-ratio:2/3; border-radius:4px; overflow:hidden; background:#171719; }
.cast-image img { width:100%; height:100%; object-fit:cover; }
.cast-image .person-fallback { height:100%; display:grid; place-items:center; color:#888; }
.cast-image .person-fallback svg { width:56px; height:56px; }
.cast-card h3 { font-size:13px; margin-top:10px; } .cast-card p { font-size:12px; color:var(--muted); margin-top:4px; }
.catalog-toolbar { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:30px; }
.catalog-toolbar input { width:100%; font-size:18px; height:58px; background:#0d0d0d; border:1px solid #ffffff65; border-radius:8px; padding:12px 16px; color:#fff; }
.catalog-toolbar select { background:#161616; color:#fff; border:1px solid #ffffff55; border-radius:4px; padding:10px 14px; max-width:280px; font-size:14px; }
.catalog-type { display:flex; align-items:center; gap:8px; font-size:14px; }
.catalog-type input { width:17px; height:17px; accent-color:white; }
.load-more { display:flex; justify-content:center; padding:40px 0 0; }
.footer { padding:64px var(--gutter) 44px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; border-top:1px solid #ffffff12; color:var(--muted); }
.footer .wordmark { color:#fff; font-size:20px; }
.footer p { font-size:11px; margin-top:20px; }
.footer nav { display:flex; align-items:flex-start; flex-wrap:wrap; gap:20px; font-size:12px; }
.footer nav a:hover { color:#fff; }
.drawer-overlay { position:fixed; inset:0; background:#000b; z-index:60; animation:page-reveal .2s; }
.drawer { position:fixed; inset:0 auto 0 0; z-index:61; width:300px; background:linear-gradient(90deg,#0d0d0d 90%,#0d0d0d00); padding:24px 36px 36px 24px; overflow-y:auto; animation:drawer-in .28s var(--ease) both; }
.drawer .icon-button { width:28px; height:32px; margin-bottom:36px; }
.drawer-links { display:flex; flex-direction:column; gap:4px; }
.drawer-link { padding:10px 0; font-size:21px; color:#aaa; }
.drawer-link:hover,.drawer-link[aria-current="page"] { color:#fff; }
.drawer-link[aria-current="page"] { font-weight:700; }
.drawer-divider { height:1px; width:180px; background:#555; margin:22px 0; }
.drawer-small .drawer-link { font-size:16px; }
.drawer-section-label { font-size:10px; letter-spacing:1.5px; color:#888; text-transform:uppercase; margin:10px 0 16px; }
.menu-popover { position:fixed; z-index:65; width:220px; background:#1a1b1c; border-radius:8px; padding:8px; animation:page-reveal .16s; }
.menu-popover button,.menu-popover a { display:flex; align-items:center; gap:13px; width:100%; padding:12px 10px; font-size:15px; border-radius:4px; }
.menu-popover button:hover,.menu-popover a:hover { background:#ffffff20; }
.menu-popover svg { width:21px; height:21px; }
.modal-backdrop { position:fixed; inset:0; background:#000c; display:grid; place-items:center; z-index:70; padding:28px; animation:page-reveal .2s; }
.modal { background:#151618; border:1px solid #ffffff20; border-radius:8px; width:min(700px,100%); max-height:90vh; overflow-y:auto; padding:32px; position:relative; animation:modal-in .26s var(--ease) both; }
.modal h2 { font-size:24px; padding-right:35px; margin-bottom:20px; }
.modal-close { position:absolute; top:18px; right:18px; width:32px; height:32px; }
.modal p { color:var(--muted); line-height:1.6; }
.modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:32px; }
.trailer-modal { width:min(1000px,100%); padding:24px; }
.trailer-frame { width:100%; aspect-ratio:16/9; border:0; margin:10px 0 20px; background:#000; }
.trailer-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; }
.trailer-meta a { color:var(--link); }
.trailer-buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.toast { position:fixed; z-index:90; bottom:32px; left:50%; transform:translate(-50%,12px); background:#ececec; color:#080808; padding:14px 24px; border-radius:6px; font-size:14px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; max-width:calc(100vw - 32px); text-align:center; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.initial-loading { min-height:100vh; display:flex; align-items:center; justify-content:center; gap:28px; flex-direction:column; }
.spinner { display:block; width:26px; height:26px; border-radius:50%; border:2px solid #ffffff35; border-top-color:#fff; animation:spin .7s linear infinite; }
.skeleton { background:#181818; animation:skeleton-pulse 1.2s infinite alternate; }
.skeleton-hero { min-height:610px; }
.skeleton-card { aspect-ratio:2/3; border-radius:4px; }
.loading-panel { min-height:220px; display:grid; place-items:center; }
/* Player: fullscreen canvas and quiet controls observed in HBO's trailer player. */
.player-page { background:#000; }
.player-stage { position:relative; height:100svh; min-height:480px; background:#000; isolation:isolate; overflow:hidden; }
.player-stage video { width:100%; height:100%; object-fit:contain; display:block; }
.player-stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(#0007,transparent 28%,transparent 55%,#000b); opacity:1; transition:opacity .2s; }
.player-stage.controls-hidden::after { opacity:0; }
.player-top { position:absolute; z-index:3; top:30px; left:var(--gutter); right:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.player-top .icon-button { width:44px; height:44px; }
.player-top-actions { display:flex; align-items:center; gap:12px; }
.player-provider-label { color:#ccc; font-size:11px; letter-spacing:1px; }
.player-controls { position:absolute; z-index:3; left:var(--gutter); right:var(--gutter); bottom:26px; }
.player-top,.player-controls { transition:opacity .25s var(--ease); }
.controls-hidden .player-top,.controls-hidden .player-controls { opacity:0; pointer-events:none; }
.player-title-line { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:20px; }
.player-title-line h1 { font-size:22px; }
.player-title-line p { color:#ddd; font-size:13px; margin-top:6px; }
.player-remaining { font-size:14px; white-space:nowrap; }
.player-seek { width:100%; height:4px; accent-color:#fff; cursor:pointer; display:block; margin:0 0 19px; }
.player-seek:hover { height:6px; margin-bottom:17px; }
.player-control-row { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:48px; }
.player-center-controls { display:flex; gap:18px; align-items:center; }
.player-control-row .icon-button { width:42px; height:42px; }
.player-center-controls .play-toggle { width:56px; height:48px; }
.player-center-controls .play-toggle svg { width:32px; height:32px; }
.player-control-label { display:flex; gap:9px; align-items:center; font-size:14px; min-width:155px; }
.player-control-end { display:flex; align-items:center; gap:12px; justify-content:flex-end; min-width:155px; }
.seek-ten { position:relative; }
.seek-ten svg { width:27px; height:27px; } .seek-ten span { position:absolute; top:17px; left:18px; font-size:8px; }
.player-loading { position:absolute; inset:0; display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; z-index:2; text-align:center; padding:70px 24px; }
.player-loading h2 { font-size:26px; } .player-loading p { font-size:14px; color:var(--muted); max-width:460px; }
.player-loading .modal-actions { margin-top:12px; justify-content:center; flex-wrap:wrap; }
.player-panel { position:absolute; z-index:5; background:#000e; inset:0; padding:80px max(var(--gutter),calc((100% - 1000px)/2)); display:flex; flex-direction:column; overflow-y:auto; animation:page-reveal .2s; }
.player-panel>.icon-button { position:absolute; right:var(--gutter); top:24px; }
.player-panel h2 { font-size:24px; margin-bottom:28px; }
.player-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.player-settings-grid h3 { font-size:18px; border-bottom:1px solid #777; padding-bottom:18px; margin-bottom:18px; }
.settings-option { display:flex; align-items:center; gap:12px; padding:10px 8px; width:100%; text-align:left; border-radius:4px; font-size:14px; }
.settings-option:hover { background:#ffffff22; }
.settings-option[aria-checked="true"] { font-weight:700; }
.settings-option svg { width:17px; height:17px; }
.settings-option .check-space { width:17px; }
.player-panel-note { margin-top:36px; align-self:flex-start; background:var(--blue); font-size:13px; padding:12px 18px; border-radius:4px; }
.caption-fields { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.caption-field { display:flex; flex-direction:column; gap:10px; font-size:13px; }
.caption-field input[type="range"] { width:100%; accent-color:white; }
.caption-field select { background:#222; border:1px solid #777; padding:8px; border-radius:4px; color:#fff; }
.caption-field input[type="color"] { width:100%; background:#222; height:32px; border:1px solid #777; }
.caption-delay { grid-column:1/-1; }
.caption-delay-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.caption-delay-buttons button { border:1px solid #777; border-radius:4px; padding:7px 14px; }
.subtitle-file-row { padding:22px 0 0; margin-top:24px; border-top:1px solid #ffffff35; }
.subtitle-file-row label { display:block; margin-bottom:12px; font-size:14px; }
.subtitle-file-row p { font-size:12px; margin-top:12px; }
.subtitle-saved { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:12px; }
.subtitle-saved span { margin-right:auto; overflow:hidden; text-overflow:ellipsis; }
.subtitle-saved button { padding:8px; }
.caption-style::cue { font-size:var(--cc-size,100%); color:var(--cc-color,#fff); background-color:var(--cc-bg,#0009); text-shadow:var(--cc-shadow,0 1px 2px #000); font-family:var(--cc-font,Inter,Arial,sans-serif); }
.episode-picker-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.episode-picker-grid button { border:1px solid #ffffff50; border-radius:4px; min-height:52px; }
.episode-picker-grid button.active { background:#fff; color:#000; font-weight:700; }
.resume-card,.up-next { position:absolute; z-index:6; right:var(--gutter); bottom:150px; width:min(360px,calc(100% - 32px)); background:#1d1e20; border:1px solid #ffffff45; border-radius:8px; padding:24px; }
.resume-card p,.up-next p { margin-bottom:15px; }
.resume-card .icon-button { position:absolute; top:4px; right:4px; width:28px; height:28px; }
.up-next h3 { font-size:20px; margin:6px 0 16px; }
.player-info { padding:50px var(--gutter) 70px; }
.player-info h2 { font-size:28px; margin-bottom:16px; }
.player-info p { max-width:780px; color:var(--muted); font-size:16px; line-height:1.6; margin:20px 0; }
.shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 0; }
.shortcuts kbd { padding:6px 10px; min-width:50px; border:1px solid #777; border-radius:4px; display:inline-block; text-align:center; font-family:inherit; font-size:13px; margin-right:12px; }
@keyframes spin { to {transform:rotate(360deg)} }
@keyframes page-reveal { from {opacity:0} to {opacity:1} }
@keyframes hero-reveal { from {opacity:0;transform:scale(1.025)} to {opacity:1;transform:scale(1)} }
@keyframes drawer-in { from {opacity:0;transform:translateX(-30px)} to {opacity:1;transform:translateX(0)} }
@keyframes modal-in { from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:translateY(0)} }
@keyframes skeleton-pulse { to {background:#242424} }
@media(min-width:1800px) { .rail>.card { flex-basis:calc((100% - 112px)/8); } .grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media(max-width:1100px) { :root {--gutter:32px} .rail>.card {flex-basis:calc((100% - 64px)/5)} .grid {grid-template-columns:repeat(5,minmax(0,1fr))} .hero-content {width:52%} .hero-more {display:none} .cast-grid {grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(max-width:800px) {
  :root {--gutter:24px}
  .header {height:76px} .header-left>.icon-button {margin-right:15px}
  .hero {height:550px;min-height:550px}
  .hero-content {left:var(--gutter);right:var(--gutter);bottom:56px;width:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero::after {background:linear-gradient(0deg,#000 0%,#000c 16%,#0003 56%,#0003)}
  .hero-art img {object-position:center 20%}
  .hero-title,.hero-title.title-magic {font-size:52px;max-width:450px;margin-bottom:16px}
  .eyebrow {font-size:10px;margin-bottom:12px}
  .hero-overview {font-size:14px;max-width:590px;-webkit-line-clamp:2}
  .hero-actions {margin-top:14px;gap:12px} .metadata {justify-content:center;font-size:12px;gap:8px}
  .hero-dots {bottom:14px}.hero-counter {display:none}
  .rail>.card {flex-basis:calc((100% - 30px)/4)} .rail {gap:10px}
  .rail-header {margin-bottom:10px} .rail-header h2 {font-size:18px} .rail-section {margin-bottom:30px}
  .rail-header-actions .icon-button {display:none} .rail-subtitle {font-size:11px} .rail-view-all {margin:0;font-size:11px}
  .grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 14px} .grid-landscape {grid-template-columns:repeat(3,minmax(0,1fr))}
  .page {padding-top:112px}.page-heading h1 {font-size:28px}.search-page {padding-top:78px}
  .category-tiles {gap:12px}.category-tile span {font-size:20px;left:16px;bottom:16px}
  .detail-hero {height:550px;min-height:550px} .detail-hero .hero-content {bottom:12px;width:auto;max-width:100%;text-align:left;align-items:flex-start}
  .detail-hero .hero-title {max-width:70%}.detail-hero .metadata {justify-content:flex-start}
  .detail-hero .hero-actions {gap:16px}.detail-hero .button-primary {min-width:235px}
  .detail-overview {font-size:17px}.detail-body>.tabs {margin-top:32px}
  .episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.cast-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  .player-title-line h1 {font-size:20px}.player-control-label {min-width:80px;font-size:12px}.player-control-end {min-width:80px;gap:3px}.player-center-controls {gap:8px}
  .player-settings-grid {gap:22px}.player-panel {padding:70px 24px}
}
@media(max-width:540px) {
  :root {--gutter:16px}
  .header {height:68px;padding-inline:16px}.header-left>.icon-button {width:24px;margin-right:13px}.header .wordmark {font-size:21px}.wordmark>span {font-size:9px;letter-spacing:3.6px;margin-top:5px}
  .header-right .icon-button {width:40px;height:44px}.header-right .history-icon {width:28px;height:28px;margin-left:6px}.header-right svg {width:22px;height:22px}
  .hero {height:600px;min-height:600px}.hero-content {bottom:60px}
  .hero-title,.hero-title.title-magic {font-size:44px;letter-spacing:-1.8px;max-width:330px}.hero-title.title-magic {font-size:51px}
  .hero-art img {object-position:58% 20%}.hero-overview {-webkit-line-clamp:3;max-width:360px;font-size:13px}
  .button {min-height:48px;font-size:16px;padding:12px 20px}.button-square {width:48px;padding:0}
  .hero-arrow {width:24px}.hero-arrow svg {width:20px}.eyebrow {font-size:9px;letter-spacing:2px}
  .home-rails {padding-top:6px}.rail-header h2 {font-size:17px}.rail-header {gap:8px}.rail-subtitle {max-width:270px;font-size:10px;line-height:1.4}
  .rail>.card {flex-basis:calc((100% - 20px)/2.65)}.rail {gap:10px}.rail .landscape {flex-basis:75vw}
  .card-title {font-size:12px}.card-meta {font-size:10px;gap:6px}.card-menu-button {width:32px;height:36px}
  .grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px}.grid-landscape {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .card.landscape .card-title {font-size:12px}.card.landscape .card-meta {font-size:10px}
  .category-tiles {grid-template-columns:1fr;gap:16px;padding-bottom:44px}.category-tile {aspect-ratio:16/7}.category-tile span {font-size:25px}
  .page {padding-top:100px;padding-bottom:40px}.page-heading {margin-bottom:25px;gap:10px;align-items:flex-start}.page-heading h1 {font-size:26px}.page-heading small {font-size:11px}.page-heading .button {padding:8px 12px;font-size:11px;min-height:36px}
  .tab {font-size:14px;padding:10px 12px}.tabs {gap:6px}.pill-tabs {gap:6px;padding-bottom:24px}.pill-tabs .tab {padding:9px 17px;font-size:13px;min-height:38px}
  .browse-heading {font-size:22px}.browse-heading small {font-size:10px}.browse-content {padding-top:8px}
  .empty {padding:32px 4px 45px;gap:16px;min-height:260px}.empty h2 {font-size:24px}.empty p {font-size:14px}
  .search-page {padding-top:70px}.search-field {height:58px;padding:0 12px;gap:10px;margin-bottom:22px}.search-field input {font-size:16px}.search-field .search-submit {display:none}.search-field>svg {width:20px}
  .search-toolbar {gap:15px}.search-toolbar .tabs {flex-basis:100%}.search-toolbar select {margin-left:auto;max-width:180px;font-size:12px}.results-count {margin-top:-46px;margin-bottom:32px;font-size:12px;max-width:50%}
  .search-suggestions {gap:8px}.suggestion {font-size:11px;padding:7px 12px}
  .detail-hero {height:580px;min-height:580px}.detail-hero .hero-title {max-width:100%;font-size:40px;line-height:1;letter-spacing:-1.5px}.detail-hero .hero-title.title-magic {font-size:50px}
  .detail-hero .hero-content {bottom:12px}.detail-hero .button-primary {width:100%;min-width:220px}.detail-hero .hero-actions {width:100%;gap:15px}.detail-action-group {width:100%;gap:15px}.detail-action {font-size:11px;padding:4px 8px;min-width:55px}
  .detail-overview {font-size:16px;line-height:1.5}.detail-genres {font-size:11px;gap:10px}.detail-body {padding-top:20px;padding-bottom:44px}.detail-body>.tabs {margin:26px 0}.detail-fields dd {font-size:14px}
  .episodes-grid {grid-template-columns:1fr;gap:28px}.episode-title h3 {font-size:15px}.episode-copy {font-size:13px}.season-toolbar {flex-wrap:wrap;gap:12px}.season-toolbar select {font-size:14px}
  .cast-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
  .catalog-toolbar {gap:12px}.catalog-toolbar input {height:52px;font-size:16px}.catalog-toolbar select {max-width:calc(50% - 6px);font-size:12px;padding:9px}.catalog-type {font-size:12px}.catalog-type input {width:16px;height:16px}
  .footer {padding-top:36px;gap:28px}.footer nav {gap:15px;font-size:11px}.drawer {width:260px;padding-left:24px}
  .modal-backdrop {padding:12px}.modal {padding:24px;max-height:92svh}.modal h2 {font-size:20px}.modal-actions {gap:10px}.trailer-modal {padding:16px}.trailer-meta {flex-wrap:wrap;font-size:12px}
  .player-stage {min-height:100svh}.player-top {top:16px}.player-title-line h1 {font-size:17px}.player-title-line p {font-size:11px}.player-remaining {font-size:11px}.player-provider-label {max-width:115px;overflow:hidden;text-overflow:ellipsis;font-size:9px}
  .player-controls {bottom:18px}.player-control-row {gap:0;flex-wrap:wrap}.player-center-controls {order:0;justify-content:center;flex:1}.player-control-end {order:1}.player-control-label {order:2;width:100%;justify-content:center;margin-top:12px}
  .player-control-row .icon-button {width:32px;height:38px}.player-center-controls .play-toggle {width:40px}.player-control-end svg {width:20px;height:20px}.player-control-end .theater-button {display:none}
  .player-settings-grid {grid-template-columns:1fr;gap:24px}.player-settings-grid h3 {font-size:16px;margin-bottom:10px;padding-bottom:10px}.settings-option {padding:9px 8px;font-size:13px}.player-panel h2 {font-size:21px}
  .episode-picker-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.caption-fields {gap:18px 15px}.caption-field {font-size:12px}.subtitle-file-row input {max-width:100%;font-size:12px}
  .player-info {padding-top:35px}.player-info h2 {font-size:24px}.player-info p {font-size:14px}.resume-card,.up-next {bottom:170px;right:16px}
  .shortcuts {grid-template-columns:1fr}.toast {bottom:20px;font-size:12px;padding:12px 18px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto} *,*::before,*::after {animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* LAYAR motion: measured HBO easing, quiet fades, and grouped rail movement. */
.wordmark {font-size:28px;letter-spacing:1.5px;font-weight:900}
.wordmark>span {font-size:9px;letter-spacing:4.5px;margin-top:7px}
.header .wordmark {font-size:28px}
.hero::after {display:none}
.hero-scene {position:absolute;inset:0;isolation:isolate;z-index:0}
.hero-scene::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#000b 0%,#0005 36%,#0000 72%),linear-gradient(0deg,#000 0%,#000c 10%,#0000 58%)}
.hero-scene .hero-art img {animation:none}
/* AniList banners are much wider than a hero: keep the clear image uncropped. */
.hero-scene-anime .hero-art{background:#06080d}
.hero-scene-anime .hero-art picture{position:absolute;inset:0;z-index:1}
.hero-scene-anime .hero-art picture>img{position:absolute;left:0;top:30%;height:auto;max-height:100%;object-fit:contain;object-position:center;transform:translateY(-30%);mask-image:linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent)}
.hero-scene-anime .hero-art .hero-art-ambient{position:absolute;inset:0;object-fit:cover;object-position:center;filter:blur(32px) brightness(.3);transform:scale(1.08)}
@media(max-width:600px){.hero-scene-anime .hero-art picture{top:76px}.hero-scene-anime .hero-art picture>img{object-position:center top}}
.hero-scene.is-entering {animation:scene-in .5s var(--ease) both}
.hero-scene.is-leaving {z-index:1;pointer-events:none;animation:scene-out .5s var(--ease) both}
.hero-scene.is-entering .hero-content>* {animation:content-in .5s var(--ease) both}
.hero-scene.is-entering .hero-content>*:nth-child(2) {animation-delay:40ms}
.hero-scene.is-entering .hero-content>*:nth-child(3) {animation-delay:80ms}
.hero-scene.is-entering .hero-content>*:nth-child(4) {animation-delay:100ms}
.hero-scene.is-entering .hero-content>*:nth-child(5) {animation-delay:120ms}
.hero-scene.is-leaving .hero-content {animation:scene-out .18s var(--ease) both}
.hero-dots,.hero-counter {z-index:3}
.hero-arrow {z-index:3;transition:opacity .2s var(--ease),background .2s var(--ease)}
.rail-section {margin-bottom:56px}
.rail-header h2 {font-size:24px;letter-spacing:-.5px}
.rail-header-actions button:disabled {opacity:0;pointer-events:none}
.rail.is-scrolling {scroll-snap-type:none}
.rail>.card.landscape {flex-basis:calc((100% - 32px)/3)}
.card-art {transition:outline-color .15s var(--ease)}
.card-art img {transition:opacity .2s var(--ease)}
.card-menu-button {transition:opacity .15s var(--ease),background .2s var(--ease);opacity:0;z-index:3}
.card:hover .card-menu-button,.card:focus-within .card-menu-button {opacity:1}
.ranking-section {padding:28px 0 34px;background:radial-gradient(ellipse at 45% 100%,#1d202650,transparent 75%)}
.ranking-heading {display:flex;align-items:center;gap:22px!important}
.ranking-heading>.ranking-label {display:flex;align-items:center;flex:0 0 auto;height:1em;font-size:clamp(56px,7.5vw,112px);line-height:1}
.ranking-label img {display:block;width:3em;height:.75em;max-width:none}
.ranking-heading>small {font-size:17px;letter-spacing:5px;font-weight:600;line-height:1.6}
.ranking-rail {gap:4px;overflow-y:hidden;padding-top:12px;padding-bottom:18px}
.rail>.card.ranked {flex-basis:calc((100% - 16px)/5);isolation:isolate}
.ranked .card-art {margin-left:36%;width:64%;z-index:2;border-radius:1px}
.ranked .card-art img {border-radius:1px}
.ranked .card-copy {display:none}
.rank-number {position:absolute;left:1px;bottom:0;z-index:1;width:36%;height:78%;overflow:visible;color:#101318;transform-origin:right bottom;transition:transform .5s var(--ease),color .2s var(--ease)}
.rank-number text {font:800 136px Inter,Arial,sans-serif;fill:currentColor;stroke:#a4a6ab;stroke-width:1;paint-order:stroke fill;letter-spacing:0;font-variant-numeric:tabular-nums}
.ranked:hover .rank-number,.ranked:focus-within .rank-number {transform:perspective(1000px) rotateY(0) rotateX(0) translateY(-3px);color:#262b34}
.rank-number[data-rank="10"] {width:36%;left:0}
.language-select {display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--muted);min-width:140px;max-width:100%}
.language-select select {width:100%;min-height:40px;padding:8px 32px 8px 12px;background:#17191d;color:#fff;border:1px solid #45474d;border-radius:4px;font:inherit}
.language-select select:focus-visible {outline:2px solid #fff;outline-offset:3px}
.drawer-language {margin-top:26px;border-top:1px solid #36383c;padding-top:22px}
.footer-language {min-width:150px}
.player-language {margin-top:28px;padding-top:22px;border-top:1px solid #36383c;max-width:240px}
.editorial-copy h2>span {display:block;max-width:9em}
.ranking-heading>small {max-width:10em}
.ranking-section .rail-header {align-items:center;margin-bottom:8px}
.ranking-section .rail-view-all {align-self:flex-end}
.collections-section {margin:14px 0 56px}
.collections-section .eyebrow {margin-bottom:10px;color:#a3a7ae}
.collection-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 var(--gutter)}
.collection-tile {position:relative;isolation:isolate;aspect-ratio:1.95;overflow:hidden;border-radius:5px;background:#151a20;display:flex;align-items:flex-end;padding:22px;outline:2px solid transparent;outline-offset:4px;transition:outline-color .2s var(--ease)}
.collection-tile::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#000c,#0001)}
.collection-tile img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.72;transition:transform .5s var(--ease),opacity .2s var(--ease)}
.collection-tile span {max-width:85%;font-size:22px;font-weight:750;line-height:1.15;letter-spacing:-.5px;text-wrap:balance}
.collection-tile svg {margin-left:auto;width:20px}
.collection-tile:hover,.collection-tile:focus-visible {outline-color:#fff}
.collection-tile:hover img {transform:scale(1.025);opacity:.9}
.collection-horror-night {background:#231a20}.collection-family-time {background:#192727}.collection-love-and-laughter {background:#302129}.collection-acclaimed {background:#25241c}.collection-indonesian-stories {background:#242724}.collection-short-nights {background:#1e2330}
.editorial-banner {position:relative;isolation:isolate;height:40vw;min-height:420px;max-height:640px;display:flex;align-items:center;margin:14px 0 60px;overflow:hidden}
.editorial-art {position:absolute;inset:0;z-index:-2;overflow:hidden}
.editorial-art img {width:100%;height:100%;object-fit:cover}
.editorial-banner::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#02070b80,transparent 65%),linear-gradient(0deg,#000 0%,transparent 16%,transparent 88%,#000)}
.editorial-copy {padding:40px var(--gutter);width:55%}
.editorial-copy h2 {font-size:clamp(50px,6vw,94px);line-height:.94;letter-spacing:-3px;font-weight:700;margin:18px 0 22px}
.editorial-copy>p:not(.eyebrow) {font-size:18px;color:#c5ccd2;margin-bottom:26px;max-width:320px}
.editorial-copy .button {font-size:15px;min-height:48px;padding:12px 22px}
.skeleton-poster {aspect-ratio:2/3;border-radius:4px;min-width:0}
.collection-loading .skeleton-poster {flex:0 0 calc((100% - 80px)/6)}
.browse-tabs {justify-content:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none}
.browse-tabs .tab {flex-shrink:0;transition:color .2s var(--ease),background-color .2s var(--ease)}
#browse-results {scroll-margin-top:104px;padding-top:28px}
.browse-heading-row {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.browse-heading-row .eyebrow {color:#969aa2;font-size:10px;margin-bottom:10px}
.browse-heading-row .browse-heading {margin:0;font-size:40px;letter-spacing:-1.2px}
.browse-heading-row .browse-heading small {display:block;font-size:14px;letter-spacing:0;font-weight:400;margin-top:8px}
.genre-filter {display:flex;align-items:center;gap:12px;font-size:13px;color:#bbb}
.genre-filter select {min-width:160px}
.genre-links {display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:5px 4px 13px;margin:0 -4px 8px}
.genre-links a {white-space:nowrap;border:1px solid #ffffff38;border-radius:100px;padding:8px 16px;color:#c2c2c5;font-size:13px;transition:background .2s var(--ease),color .2s var(--ease)}
.genre-links a[aria-current="page"],.genre-links a:hover {background:#fff;color:#000;border-color:#fff}
.catalog-summary {display:flex;justify-content:space-between;gap:20px;align-items:center;color:#9c9ca3;font-size:12px;margin:22px 0}
.catalog-summary .results-count {margin:0;color:#c5c5ca;font-size:13px}
.catalog-grid {row-gap:30px;animation:page-reveal .22s var(--ease)}
.catalog-notice {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;background:#11141a;border:1px solid #ffffff20;border-radius:6px;font-size:13px;color:#c5c5cd;margin:16px 0}
.catalog-notice .button {white-space:nowrap}
.catalog-pagination {margin:48px 0 12px}
.pagination {display:flex;align-items:center;justify-content:center;gap:24px}
.pagination>a,.pagination>.page-disabled {display:flex;align-items:center;gap:6px;font-size:13px;min-height:42px}
.pagination>a:hover {color:#fff}.page-disabled {opacity:.35}
.page-numbers {display:flex;align-items:center;gap:6px}
.page-numbers a,.page-gap {width:40px;min-height:40px;display:grid;place-items:center;border-radius:5px;font-size:13px;border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease)}
.page-numbers a:hover {border-color:#ffffff50}
.page-numbers a[aria-current="page"] {background:#fff;color:#000;font-weight:700}
#catalog-page-jump {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;color:#989ba2;font-size:12px}
#catalog-page-jump input {width:64px;height:36px;border:1px solid #ffffff36;border-radius:4px;background:#111;color:#fff;text-align:center}
#catalog-page-jump .button {min-height:36px;padding:6px 14px;font-size:12px}
.collection-intro {position:relative;isolation:isolate;min-height:380px;padding:126px var(--gutter) 64px;display:flex;align-items:flex-end;background:#080b10}
.collection-intro>div:not(.editorial-art) {max-width:850px}
.collection-intro h1 {font-size:clamp(44px,5.5vw,80px);letter-spacing:-2px;line-height:1.03;margin:14px 0 22px;text-wrap:balance}
.collection-intro p:last-child {color:#b4bbc5;font-size:17px;max-width:560px}
.collection-back {display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#b4bbc5;margin-bottom:28px}
.collection-back svg {width:18px}
.imagination-intro {min-height:500px;background:transparent}
.imagination-intro::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0009,transparent),linear-gradient(0deg,#000,transparent 70%)}
.imagination-intro>div:not(.editorial-art) {max-width:50%}
.menu-popover {animation:popover-in .16s var(--ease) both}
.drawer {animation:drawer-in .3s var(--ease) both}
#layer.is-closing {pointer-events:none}
#layer.is-closing .drawer {animation:drawer-out .18s var(--ease) both}
#layer.is-closing .drawer-overlay,#layer.is-closing .modal-backdrop {animation:scene-out .18s var(--ease) both}
#layer.is-closing .menu-popover {animation:popover-out .18s var(--ease) both}
@keyframes scene-in {from{opacity:0}to{opacity:1}}
@keyframes scene-out {from{opacity:1}to{opacity:0}}
@keyframes content-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawer-out {from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-35px)}}
@keyframes popover-in {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes popover-out {from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}
@media(min-width:1800px) {.rail>.card.ranked{flex-basis:calc((100% - 24px)/7)}.rank-number{font-size:170px}.rail>.card.landscape{flex-basis:calc((100% - 48px)/4)}}
@media(max-width:1100px) {.ranking-heading>.ranking-label{font-size:78px}.ranking-heading>small{font-size:14px;letter-spacing:4px}.rail>.card.ranked{flex-basis:calc((100% - 12px)/4)}.rank-number{font-size:135px}.rank-number[data-rank="10"]{font-size:108px}.collection-tile span{font-size:20px}.collection-tile{padding:18px}.editorial-copy{width:62%}}
@media(max-width:800px) {
  .hero-scene::after{background:linear-gradient(0deg,#000 0%,#000c 16%,#0003 56%,#0003)}
  .rail-section{margin-bottom:40px}.rail-header h2{font-size:22px}.rail>.card.landscape{flex-basis:calc((100% - 10px)/2)}
  .ranking-heading{gap:16px!important}.ranking-heading>.ranking-label{font-size:64px}.ranking-heading>small{font-size:12px;letter-spacing:3px}
  .rail>.card.ranked{flex-basis:calc((100% - 8px)/3)}.rank-number{font-size:130px}
  .collection-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-tile{aspect-ratio:1.7}.collection-tile span{font-size:20px}
  .editorial-banner{min-height:450px;height:60vw}.editorial-copy{width:65%}.editorial-copy h2{font-size:60px}.editorial-copy>p:not(.eyebrow){font-size:15px}
  .browse-heading-row .browse-heading{font-size:34px}.genre-filter{flex-direction:column;align-items:flex-start;gap:5px}.genre-filter select{min-width:140px;font-size:12px}
  .pagination{gap:10px}.pagination>a>span,.pagination>.page-disabled>span{display:none}.page-numbers{gap:4px}.page-numbers a,.page-gap{width:34px;min-height:36px}
  .imagination-intro>div:not(.editorial-art){max-width:70%}.collection-intro{min-height:340px;padding-top:110px}.imagination-intro{min-height:450px}
}
@media(max-width:520px) {
  .wordmark,.header .wordmark{font-size:25px}.wordmark>span{font-size:8px;letter-spacing:4px}
  .rail-header h2{font-size:20px}.rail>.card.landscape{flex-basis:78vw}
  .ranking-section{padding-top:14px}.ranking-heading>.ranking-label{font-size:clamp(48px,15vw,56px)}.ranking-heading>small{font-size:10px;letter-spacing:2.5px}.rail>.card.ranked{flex-basis:53vw}.rank-number{font-size:118px;letter-spacing:-12px}.rank-number[data-rank="10"]{font-size:95px;letter-spacing:-16px}
  .collection-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:10px}.collection-tile{flex:0 0 70vw;scroll-snap-align:start;aspect-ratio:1.8}.collection-tile span{font-size:23px}
  .editorial-banner{height:520px;min-height:0;align-items:flex-end}.editorial-art img{object-position:64% center}.editorial-banner::after{background:linear-gradient(0deg,#000 0%,#000b 32%,transparent 75%)}.editorial-copy{width:100%;padding-bottom:35px}.editorial-copy h2{font-size:54px;margin:14px 0 16px}.editorial-copy>p:not(.eyebrow){max-width:250px;margin-bottom:20px}
  #browse-results{scroll-margin-top:86px}.browse-heading-row{gap:14px}.browse-heading-row .browse-heading{font-size:30px}.browse-heading-row .browse-heading small{font-size:12px}.genre-filter{font-size:10px}.genre-filter select{min-width:115px;max-width:140px;padding:9px 10px}
  .genre-links{gap:7px}.genre-links a{font-size:12px;padding:7px 13px}.catalog-summary{font-size:10px;gap:10px}.catalog-summary .results-count{font-size:11px}
  .catalog-notice{flex-direction:column;align-items:flex-start;padding:16px;font-size:12px}.catalog-grid{row-gap:22px}.catalog-pagination{margin-top:34px}.pagination{gap:5px}.page-numbers{gap:1px}.page-numbers a,.page-gap{width:30px;min-height:34px;font-size:11px}.pagination svg{width:20px}
  .collection-intro{min-height:340px;padding-bottom:38px}.collection-intro h1{font-size:43px;letter-spacing:-1.5px}.collection-intro p:last-child{font-size:14px}.imagination-intro{min-height:430px}.imagination-intro>div:not(.editorial-art){max-width:100%}
  .collection-loading .skeleton-poster{flex-basis:calc((100vw - 50px)/2.4)}
  .card-menu-button{opacity:1}
}
@media(prefers-reduced-motion:reduce) {.rank-number{transform:none!important}.hero-scene.is-leaving{display:none}}