:root{color-scheme:dark;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:#f5f5f1;background:#141414;--red:#e50914;--muted:#a4a4a4;--pad:4.5vw}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:#2c2c2c;border-radius:4px;padding:11px 18px;font-weight:600;transition:background .18s,transform .18s}button:hover{background:#414141}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:4px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.topbar{height:80px;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:32px;padding:0 var(--pad);background:linear-gradient(#090909f5,#101010ed)}.brand{padding:0;background:none;color:var(--red);font-weight:900;font-size:29px;letter-spacing:-1.6px;transform:scaleY(1.15)}.brand:hover{background:none;color:#ff2630}nav{display:flex;align-items:center;gap:21px;white-space:nowrap}nav button{padding:8px 0;background:none;color:#c0c0c0;font-weight:400;font-size:13px}nav button:hover{background:none;color:white}nav button.selected{color:white;font-weight:700}.header-tools{display:flex;align-items:center;gap:14px;margin-left:auto}#search{display:flex;align-items:center;height:34px;border:1px solid #ffffff45;background:#10101090}#query{width:175px;padding:7px 0 7px 12px;outline:none;border:0;color:#fff;background:none;font-size:12px}#search button{font-size:25px;line-height:1;background:none;padding:0 9px;font-weight:400}.icon-button{background:none;padding:3px;font-size:21px;font-weight:400}.icon-button:hover{background:none;color:#ddd}main{position:fixed;inset:0;overflow:auto;scroll-behavior:smooth;scrollbar-color:#464646 #141414;scrollbar-width:thin}footer{position:fixed;inset:auto 0 0;height:27px;background:#101010;border-top:1px solid #242424;display:flex;justify-content:space-between;gap:20px;padding:7px var(--pad);font-size:9px;color:#777;letter-spacing:.3px}#status{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}footer>span:last-child{white-space:nowrap;letter-spacing:1px}.hero{position:relative;height:72vh;min-height:490px;max-height:790px;background:#1b1b1b;overflow:hidden}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.85}.hero>img:not([src]),.hero>img[src=""]{display:none}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#090909e8 0%,#10101098 35%,#10101010 80%),linear-gradient(0deg,#141414 0%,transparent 33%,#0004 100%)}.hero-copy{position:absolute;left:var(--pad);top:26%;max-width:51%;z-index:2}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#b3b3b3}.hero-copy>.eyebrow{display:flex;align-items:center;gap:10px;color:#e4e4e4;font-size:11px;letter-spacing:3px}.mini-brand{font-weight:900;font-size:27px;letter-spacing:-2px;color:var(--red)}h1{margin:17px 0;font-size:48px;line-height:1.05;letter-spacing:-1.2px;font-weight:800}.hero h1{font-size:clamp(44px,5.7vw,88px);text-transform:uppercase;max-width:660px;line-height:.99;letter-spacing:-2px;text-shadow:0 4px 30px #0007}.hero-meta{font-size:12px;color:#d9d9d9;margin:20px 0 12px;font-weight:600}.hero-copy p{max-width:580px;font-size:15px;line-height:1.6;color:#e0e0e0;text-shadow:0 1px 8px #000;margin:14px 0 24px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hero-actions{display:flex;gap:11px}.hero-actions button{display:flex;gap:12px;align-items:center;font-size:17px;padding:12px 27px}.primary-light{background:#f3f3f3;color:#141414}.primary-light:hover{background:#d8d8d8}.secondary-light{background:#6d6d6eb3;color:white}.secondary-light:hover{background:#6d6d6e80}.hero-corner{position:absolute;right:0;bottom:25%;padding:10px 45px 10px 15px;border-left:3px solid #ddd;background:#2228;color:#ddd;font-size:10px;letter-spacing:1.3px}.home-rows{position:relative;margin-top:-25px;padding-bottom:40px;z-index:3}.shelf{margin-bottom:32px}.shelf-heading{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);margin-bottom:14px}.shelf-heading h2{font-size:20px;font-weight:650;margin:0;letter-spacing:-.3px}.shelf-tools{display:flex;align-items:center;gap:5px}.shelf-tools button{padding:5px 10px;background:transparent;color:#b5b5b5;font-size:12px}.shelf-tools button:hover{color:white;background:#ffffff0e}.rail{display:flex;gap:13px;padding:4px var(--pad) 12px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x proximity}.rail::-webkit-scrollbar{display:none}.rail .poster-wrap{flex:0 0 clamp(145px,13.6vw,216px);scroll-snap-align:start}.poster-wrap{min-width:0;position:relative}.poster-card{background:none;padding:0;text-align:left;width:100%;font-weight:400;display:block;transform-origin:center center}.poster-card:hover{background:none;transform:translateY(-5px)}.poster-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:5px;background:#252525;display:block;box-shadow:0 5px 18px #0004}.poster-card h3{font-size:12px;font-weight:550;line-height:1.45;margin:9px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.poster-card p{font-size:10px;line-height:1.4;color:#929292;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.page-section{padding:105px var(--pad) 40px}.section-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:18px}.section-heading h1{font-size:36px;margin:10px 0}.section-heading h2{font-size:20px;font-weight:600;line-height:1.4;margin:7px 0}.section-heading>span{font-size:12px;color:var(--muted)}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:25px 17px;margin-top:25px}#library-message,.loading-copy{color:#aaa;font-size:13px;line-height:1.6}.loading-copy{padding:10px var(--pad)}#more{display:block;margin:35px auto 0;min-width:170px;border:1px solid #626262;background:transparent}#more:hover{border-color:white}#library-source{color:#e3a4a7}.remove-save{position:absolute;right:7px;top:7px;background:#141414df;border:1px solid #ffffff66;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;padding:0;font-size:18px}.back-button{position:absolute;top:99px;left:var(--pad);z-index:4;background:#161616bb;font-size:12px;border:1px solid #ffffff25;padding:8px 13px}.detail-heading{position:relative;min-height:440px;height:52vh;max-height:620px;background:#202020}.detail-heading{overflow:hidden}
.detail-heading>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:.65;transition:filter .4s,opacity .4s}
.detail-heading>img.portrait{filter:blur(18px) saturate(1.2);transform:scale(1.15);opacity:.5}
.trailer{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;background:#000}
.trailer.playing{opacity:1}
.trailer iframe{position:absolute;top:50%;left:50%;width:max(100%,calc(62vh*16/9));aspect-ratio:16/9;height:auto;border:0;transform:translate(-50%,-50%) scale(1.18)}
.facts{font-size:13px;color:#d6d6d6;font-weight:600;margin:-6px 0 4px;white-space:pre}
.round{border-radius:50%;width:42px;height:42px;padding:0;display:grid;place-items:center;font-size:16px;border:1px solid #ffffff90;background:#14141480}
#trailer-sound{position:absolute;right:var(--pad);bottom:34px;z-index:3}
.info-grid{display:grid;grid-template-columns:max-content 1fr;gap:7px 22px;margin:22px var(--pad) 0;padding:18px 22px;background:#1b1b1b;border:1px solid #262626;border-radius:6px;font-size:12.5px;line-height:1.55}
.info-grid:empty{display:none}
.info-grid dt{color:#8f8f8f}
.info-grid dd{margin:0;color:#e2e2e2}
.segmented{display:flex;border:1px solid #666;border-radius:3px;overflow:hidden}
.segmented button{border-radius:0;background:#202020;padding:8px 14px;font-size:12px;font-weight:600}
.segmented button.selected{background:#f3f3f3;color:#141414}
.skip-button{position:absolute;right:28px;bottom:78px;z-index:3;background:#141414cc;border:1px solid #ffffffb0;color:#fff;font-size:14px;padding:11px 22px;backdrop-filter:blur(4px)}
.skip-button:hover{background:#f3f3f3;color:#141414}
.skip-button.subtle{opacity:.75;font-size:12px;padding:8px 15px;border-color:#ffffff55}
video::cue{background:#000000b8;color:#fff;font-size:1.05em;line-height:1.35}
.detail-shade{position:absolute;inset:0;background:linear-gradient(90deg,#141414ed 10%,#14141475 65%,#14141420),linear-gradient(0deg,#141414,transparent 55%)}.detail-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;max-width:65%;z-index:2}.detail-copy h1{font-size:clamp(28px,3.4vw,50px);line-height:1.1}.detail-copy p{font-size:13px;line-height:1.7;color:#ccc;max-width:750px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.detail-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.detail-actions #detail-play{border:0;background:#f3f3f3;color:#141414;font-size:14px;padding:11px 26px}
.detail-actions #detail-play:hover{background:#d8d8d8}.detail-actions button{font-size:12px;border:1px solid #777;background:#292929a0}#playback{padding-top:12px}.player-options{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}select{background:#202020;color:#eee;border:1px solid #666;border-radius:3px;padding:9px 12px;font-size:12px}#video-box{position:relative;background:#000;border:1px solid #303030;border-radius:5px;overflow:hidden;aspect-ratio:16/9;max-height:70vh;display:flex;align-items:center;justify-content:center}video{width:100%;height:100%;background:#000}#player-message{position:absolute;left:12%;right:12%;text-align:center;font-size:15px;line-height:1.8;color:#bbb;pointer-events:none}.player-actions{display:flex;gap:10px;margin:16px 0 36px}.player-actions button{font-size:12px}#play{min-width:100px}.error{color:#ff999e!important}#save.saved{border-color:#ddd}@media(min-width:1600px){#grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}@media(max-width:1100px){.topbar{gap:23px}nav{gap:14px}#query{width:120px}.header-tools{gap:10px}.hero-copy{max-width:62%;top:28%}.hero-copy p{font-size:13px}.hero-corner{display:none}.hero{min-height:480px}.detail-copy{max-width:80%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
main{scroll-padding-top:94px}.rail{scroll-padding-inline:var(--pad)}#playback{scroll-margin-top:94px}

.episodes-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.episodes-heading h2{font-size:24px;font-weight:700;margin:0}
.episode-pickers{display:flex;gap:10px}
.episode-pickers select{font-size:16px;font-weight:600;padding:9px 14px;background:#242424;border-color:#4d4d4d}
.episode-subhead{color:#bcbcbc;font-size:13px;margin:10px 0 14px}
.episode-subhead:empty{display:none}
.episode-list{display:flex;flex-direction:column;border-top:1px solid #404040}
.episode-row{display:grid;grid-template-columns:clamp(42px,5vw,72px) clamp(140px,17vw,250px) 1fr;align-items:center;min-height:120px;padding:16px 18px 16px 0;background:none;border-radius:0;border-bottom:1px solid #404040;text-align:left;font-weight:400}
.episode-row:hover{background:#ffffff08}
.episode-row.current{background:#333;border-radius:4px;border-bottom-color:transparent}
.ep-index{font-size:24px;color:#d2d2d2;text-align:center}
.ep-thumb{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#222}
.ep-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ep-thumb.fallback img{filter:brightness(.55) saturate(.8)}
.ep-play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;border:1px solid #fff;background:#1e1e1eb3;display:grid;place-items:center;font-size:14px;padding-left:3px;opacity:0;transition:opacity .18s}
.episode-row:hover .ep-play,.episode-row:focus-visible .ep-play{opacity:1}
.ep-progress{position:absolute;left:8px;right:8px;bottom:8px;height:4px;background:#ffffff59;border-radius:1px;overflow:hidden}
.ep-progress i{display:block;height:100%;background:var(--red)}
.ep-body{display:flex;flex-direction:column;gap:8px;padding-left:20px;min-width:0}
.ep-head{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.ep-head strong{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-head span{flex-shrink:0;color:#d2d2d2}
.ep-synopsis{font-size:14px;line-height:1.45;color:#bcbcbc;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ep-synopsis:empty{display:none}
.hero .trailer iframe{width:max(100%,calc(79vh*16/9))}
.hero-sound{position:absolute;right:var(--pad);bottom:calc(25% + 56px);z-index:3}
.poster-card{position:relative}
.rating-badge{position:absolute;top:7px;left:7px;background:#141414d9;border:1px solid #ffffff38;border-radius:4px;padding:3px 7px;font-size:11px;font-weight:700;color:#f5c518;letter-spacing:.2px}
.big-play{position:absolute;z-index:2;width:88px;height:88px;border-radius:50%;border:2px solid #fff;background:#141414b3;font-size:32px;padding:0 0 0 6px;display:grid;place-items:center;transition:transform .15s,background .15s}
.big-play:hover{background:#f3f3f3;color:#141414;transform:scale(1.06)}
#video-box.idle video{cursor:pointer}
#video-box.idle #player-message{transform:translateY(84px)}
#video-box video{cursor:pointer}
#video-box:fullscreen{max-height:none;border:0;border-radius:0}
.card-art{position:relative;display:block}
.card-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff4d;border-radius:0 0 5px 5px;overflow:hidden}
.card-progress i{display:block;height:100%;background:var(--red)}
.watched-badge{position:absolute;left:7px;bottom:7px;background:#141414d9;border:1px solid #ffffff38;border-radius:4px;padding:3px 7px;font-size:11px;font-weight:700}
.detail-progress{display:flex;align-items:center;gap:12px;margin:12px 0 2px;font-size:13px;color:#d6d6d6}
.detail-progress .bar{width:min(260px,40%);height:4px;background:#ffffff4d;border-radius:2px;overflow:hidden}
.detail-progress i{display:block;height:100%;background:var(--red)}
.poster-wrap .remove-save{opacity:0;transition:opacity .15s}
.poster-wrap:hover .remove-save,.poster-wrap .remove-save:focus-visible{opacity:1}

.title-logo{display:block;max-width:min(460px,42vw);max-height:150px;object-fit:contain;object-position:left bottom;margin:18px 0 14px;filter:drop-shadow(0 3px 18px #000a)}
.hero .title-logo{max-height:190px;max-width:min(560px,46vw)}
h1.logo-shown{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hover-card{position:fixed;z-index:40;background:#181818;border-radius:6px;overflow:hidden;box-shadow:0 14px 40px #000c;opacity:.4;transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;will-change:transform}
.hover-card.open{transform:none!important;opacity:1}
.hover-media{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.hover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hover-media .trailer iframe{width:100%;transform:translate(-50%,-50%) scale(1.22)}
.hover-logo{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);max-width:72%;max-height:42%;object-fit:contain;filter:drop-shadow(0 2px 12px #000c);transition:all .5s ease;pointer-events:none}
.hover-card.trailer-on .hover-logo{left:14px;bottom:12px;transform:none;max-width:38%;max-height:26%}
.hover-name{position:absolute;left:14px;right:14px;bottom:12px;font-size:20px;font-weight:800;text-shadow:0 2px 10px #000;pointer-events:none}
.hover-name[hidden]{display:none}
.hover-media .round{position:absolute;right:12px;bottom:12px;width:34px;height:34px;font-size:13px;z-index:2}
.hover-body{padding:14px 16px 16px}
.hover-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.circle{width:38px;height:38px;border-radius:50%;padding:0;display:grid;place-items:center;border:2px solid #ffffff99;background:#2a2a2ae6;font-size:15px;line-height:1}
.circle:hover{border-color:#fff;background:#3a3a3a}
.circle.primary{background:#fff;color:#141414;border-color:#fff}
.circle.primary:hover{background:#d8d8d8}
.circle.more{margin-left:auto}
.circle.active{border-color:#fff;background:#fff3}
.hover-line{font-size:14px;font-weight:600;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hover-facts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#d2d2d2}
.hover-facts .star{color:#f5c518;font-weight:700}
.hover-facts .badge{border:1px solid #ffffff73;padding:0 5px;border-radius:3px;font-size:11px}
.hover-extra{font-size:13px;color:#d2d2d2}
.hover-progress{display:flex;align-items:center;gap:12px}
.hover-progress>span:first-child{flex:1;height:3px;background:#ffffff4d;overflow:hidden}
.hover-progress>span:first-child i{display:block;height:100%;background:var(--red)}
@media(prefers-reduced-motion:reduce){.hover-card{transition:opacity .1s}}
.detail-copy .title-logo{max-height:105px;max-width:min(400px,40vw);margin:10px 0 12px}
.detail-copy p{-webkit-line-clamp:3}
.back-button{z-index:5}

.launch{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(ellipse at center,#1a0a0b 0%,#0b0b0b 62%);transition:opacity .6s ease,visibility .6s}
.launch.done{opacity:0;visibility:hidden}
.launch-brand{position:relative;color:var(--red);font-weight:900;font-size:clamp(52px,7vw,96px);letter-spacing:-4px;transform:scaleY(1.15);text-shadow:0 0 50px #e5091440;overflow:hidden;animation:launch-in .9s cubic-bezier(.2,.8,.2,1) both}
.launch-brand::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);animation:launch-shine 2.2s ease-in-out .6s infinite;mix-blend-mode:overlay}
.launch.done .launch-brand{transform:scaleY(1.15) scale(1.12);transition:transform .6s ease}
.launch-bar{width:min(260px,50vw);height:3px;background:#ffffff1f;border-radius:2px;overflow:hidden}
.launch-bar i{display:block;width:4%;height:100%;background:var(--red);box-shadow:0 0 12px var(--red);transition:width .5s ease}
#launch-step{margin:0;font-size:12px;letter-spacing:1.2px;color:#8d8d8d;text-transform:uppercase;min-height:16px}
@keyframes launch-in{from{opacity:0;letter-spacing:6px}to{opacity:1;letter-spacing:-4px}}
@keyframes launch-shine{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.launch-brand,.launch-brand::after{animation:none}}

.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.icon.fill{fill:currentColor;stroke:none}
.circle .icon{width:18px;height:18px}
.circle.primary .icon{width:17px;height:17px;margin-left:2px}
.round .icon{width:18px;height:18px}
.hover-media .round .icon{width:15px;height:15px}
.trailer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.circle{border-width:1.5px;transition:border-color .15s,background .15s,transform .15s}
.circle:hover{transform:scale(1.06)}

.up-next{position:absolute;right:28px;bottom:78px;z-index:4;display:flex;gap:12px}
.up-next button{border-radius:6px;font-size:15px;font-weight:700;padding:11px 22px;height:46px}
.credits-button{background:#6d6d6eb3;color:#fff;backdrop-filter:blur(4px)}
.credits-button:hover{background:#6d6d6ee6}
.next-button{position:relative;overflow:hidden;background:#fff;color:#141414;min-width:170px}
.next-button:hover{background:#fff}
.next-button.counting{background:#9a9a9a}
.next-fill{position:absolute;inset:0;width:0;background:#fff;border-radius:inherit}
.next-button.counting .next-fill{animation:next-fill 5s linear forwards}
.next-label{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
.next-label .icon{width:18px;height:18px}
@keyframes next-fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.next-button.counting .next-fill{animation-duration:5s}}
.hero:not(.ready) .hero-copy,.hero:not(.ready) .hero-corner,.hero:not(.ready)>img{visibility:hidden}
.hero.empty{height:110px;min-height:0}

/* The title area grows with its content instead of overlapping the back button. */
.detail-heading{height:auto;min-height:max(440px,52vh);max-height:none;display:flex;align-items:flex-end;padding:168px 0 30px}
.detail-copy{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--pad)}
.detail-actions button{white-space:nowrap}
.detail-progress .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(520px,50vw)}

.spinner{position:absolute;z-index:2;width:58px;height:58px;border-radius:50%;border:4px solid #ffffff33;border-top-color:var(--red);animation:spin .8s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* Title page loading: the heading is covered until its artwork and logo are ready. */
.detail-heading.loading .detail-copy,.detail-heading.loading>img,.detail-heading.loading .trailer{visibility:hidden}
.detail-heading::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:4px solid #ffffff26;border-top-color:var(--red);animation:spin .8s linear infinite;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}
.detail-heading.loading::after{opacity:1}
.detail-heading:not(.loading) .detail-copy{animation:fade-in .35s ease}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.spinner,.detail-heading::after{animation-duration:2s}}

.settings-button{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;background:#141414b3;border:1px solid #ffffff40;opacity:0;transition:opacity .2s,background .15s}
.settings-button .icon{width:22px;height:22px}
#video-box.active .settings-button,#video-box.settings-open .settings-button,.settings-button:focus-visible{opacity:1}
#video-box:fullscreen:not(.active):not(.settings-open),#video-box:fullscreen:not(.active):not(.settings-open) video{cursor:none}
.settings-button:hover{background:#2a2a2ae6}
.settings-panel{position:absolute;top:64px;right:14px;z-index:6;display:flex;gap:6px;max-width:calc(100% - 28px);max-height:calc(100% - 140px);padding:14px 10px;background:#181818f2;border:1px solid #ffffff1f;border-radius:8px;box-shadow:0 14px 40px #000b;backdrop-filter:blur(6px)}
.settings-column{display:flex;flex-direction:column;min-width:150px;max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#555 transparent;padding:0 4px}
.settings-column+.settings-column{border-left:1px solid #ffffff14;padding-left:10px}
.settings-column h4{margin:0 0 8px 34px;font-size:15px;font-weight:700}
.settings-option{display:flex;align-items:center;gap:8px;background:none;border-radius:4px;padding:7px 10px 7px 4px;font-size:14px;font-weight:400;color:#bcbcbc;text-align:left;white-space:nowrap}
.settings-option:hover{background:#ffffff12;color:#fff}
.settings-option.selected{color:#fff;font-weight:600}
.settings-option .tick{width:22px;display:grid;place-items:center}
.settings-option .tick .icon{width:16px;height:16px}
.settings-option small{color:#8c8c8c;font-size:11px;margin-left:auto;padding-left:10px}

/* The player spans the page width; its height fits the window, with the video letterboxed inside. */
#video-box{width:100%;aspect-ratio:auto;height:min(51.2vw,calc(100vh - 150px));max-height:none}
#video-box video{object-fit:contain}
#video-box:fullscreen{height:100%;width:100%}
.player-corner{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:10px}
.player-corner .settings-button{position:static}
.settings-panel{top:66px}

.cast-panel{min-width:260px}
.casting{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:radial-gradient(ellipse at center,#1d1d1df2,#0b0b0bfa)}
#video-box.is-casting video{visibility:hidden}
.casting-copy{text-align:center;max-width:520px;padding:20px}
.casting-copy h3{font-size:26px;margin:6px 0 4px}
.casting-copy p{color:#bcbcbc;margin:0 0 18px;font-size:14px}
.casting-progress{display:flex;align-items:center;gap:12px;margin:0 auto 20px;width:min(420px,80%)}
.casting-progress span{flex:1;height:4px;background:#ffffff33;border-radius:2px;overflow:hidden}
.casting-progress i{display:block;height:100%;width:0;background:var(--red);transition:width .5s}
.casting-progress small{color:#d0d0d0;font-size:12px;white-space:nowrap}
.casting-actions{display:flex;align-items:center;justify-content:center;gap:12px}
.casting-actions .circle{width:46px;height:46px}
.cast-stop{margin-left:10px;border:1px solid #ffffff66;background:#ffffff14;border-radius:4px}
.casting-note{margin-top:16px!important;color:#ffb4b8!important;font-size:13px}
.casting-note:empty{display:none}
.play-anyway{position:absolute;z-index:3;top:calc(50% + 70px);border:1px solid #ffffff66;background:#141414cc;font-size:13px}
#video-box.idle .play-anyway{top:calc(50% + 120px)}

/* Page loading screen between pages: covers the content area (the top bar stays). */
.page-loader{position:fixed;inset:80px 0 27px;z-index:15;display:grid;place-items:center;background:#141414;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.page-loader.on{opacity:1;visibility:visible}
main>section{transition:opacity .3s ease}
main.page-loading>section{opacity:0;transition:none}
/* Accounts and profiles */
.gate{position:fixed;inset:0;z-index:60;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:90px 20px 40px;background:#141414}
.gate-logo{position:fixed;top:24px;left:var(--pad);color:var(--red);font-weight:900;font-size:29px;letter-spacing:-1.6px;transform:scaleY(1.15)}
body.gated .topbar,body.gated main,body.gated footer{visibility:hidden}
.gate h1{font-size:32px;font-weight:600;letter-spacing:-.4px;margin:0 0 22px;line-height:1.2}
.gate-card{position:relative;width:min(440px,100%);background:#000000bf;border-radius:6px;padding:48px 52px 40px;display:flex;flex-direction:column;gap:14px}.gate-card.wide{width:min(620px,100%)}
.gate-card h1{margin-bottom:8px}
.gate input:not([type=checkbox]){width:100%;background:#16161690;border:1px solid #ffffff4d;border-radius:4px;padding:15px 16px;color:#fff;font-size:15px;outline:none}
.gate input:focus{border-color:#fff}
.gate-primary{background:var(--red);color:#fff;font-size:15px;padding:12px 18px}.gate-primary:hover{background:#c11119}.gate-primary.narrow{min-width:120px}
.gate-outline{background:transparent;border:1px solid #808080;color:#aaa;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;padding:10px 24px}.gate-outline:hover{background:transparent;border-color:#fff;color:#fff}.gate-outline.small{text-transform:none;letter-spacing:0;padding:7px 14px}
.gate-outline.danger:hover,.danger-fill{border-color:var(--red);color:#fff}.danger-fill{background:var(--red)}
.gate-link{background:none;padding:0;color:#b3b3b3;font-weight:400;font-size:14px;align-self:center}.gate-link:hover{background:none;color:#fff;text-decoration:underline}.gate-link.strong{color:#fff;font-weight:600}
.gate-switch{color:#8c8c8c;margin:10px 0 0;font-size:15px}.gate-switch .gate-link{display:inline;font-size:15px}
.gate-note{color:#b3b3b3;font-size:14px;line-height:1.55;margin:0}.gate-note.small{font-size:12px}
.gate-server{color:#737373;font-size:12px;margin:18px 0 0}.gate-server .gate-link{font-size:12px;display:inline}
.gate-error{color:#ff8a8f;font-size:13px;margin:0;min-height:0}.gate-error:empty{display:none}.gate-ok{color:#5fd47c;font-size:13px}.gate-warn{color:#f5b81a;font-size:13px}
.gate-banner{background:#2fa84f26;border:1px solid #2fa84f80;color:#d7f5df;border-radius:4px;padding:10px 16px;font-size:14px;margin:0 0 30px;text-align:center}
.gate-close{position:absolute;top:14px;right:14px;background:none;font-size:20px;padding:4px 10px;color:#aaa}.gate-close:hover{background:none;color:#fff}
.profiles{display:flex;flex-direction:column;align-items:center;text-align:center}.profiles h1{font-size:clamp(34px,3.6vw,56px);font-weight:500;margin-bottom:34px}
.profile-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2vw;margin-bottom:56px;max-width:1100px}
.profile-tile{position:relative;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(100px,10vw,170px);font-weight:400}.profile-tile:hover{background:none}
.profile-tile .avatar{width:100%;aspect-ratio:1;border:3px solid transparent;border-radius:6px;transition:border-color .15s}.profile-tile:hover .avatar,.profile-tile:focus-visible .avatar{border-color:#fff}
.profile-tile .profile-name{color:#808080;font-size:clamp(13px,1.15vw,18px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-tile:hover .profile-name{color:#fff}
.profile-lock{position:absolute;bottom:-26px;color:#808080}.profile-lock .icon{width:18px;height:18px}
.avatar{position:relative;display:block;overflow:hidden;border-radius:4px}.avatar svg{display:block;width:100%;height:100%}
.avatar.kids b{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:clamp(9px,.9vw,14px);font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 1px 4px #0008}
.avatar.add{display:grid;place-items:center;background:none;color:#808080}.avatar.add .icon{width:55%;height:55%;stroke-width:1.2}.profile-tile:hover .avatar.add{background:#e5e5e5;color:#141414}
.profile-tile.manage .avatar svg{opacity:.45}.profile-edit{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.profile-edit .icon{width:34%;height:34%;color:#fff}
.profile-entering .avatar{width:150px;height:150px;animation:enter-pulse 1.2s ease-in-out infinite}@keyframes enter-pulse{50%{transform:scale(.92);opacity:.75}}
.pin-screen{position:relative;text-align:center;max-width:620px}.pin-screen .gate-close{position:fixed;top:24px;right:var(--pad);font-size:26px}.pin-title{color:#b3b3b3;font-size:17px;margin:0 0 10px}.pin-screen h1{font-size:30px;margin-bottom:32px}
.pin-row{display:flex;gap:16px;justify-content:center;margin-bottom:20px}.gate .pin-box{width:76px!important;height:76px;text-align:center;font-size:36px;padding:0!important;border:2px solid #fff!important;background:transparent!important}
.pin-row.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}.pin-screen .gate-link{margin-top:22px}
.editor{width:min(720px,100%)}.editor h1{font-size:clamp(34px,3.6vw,56px);font-weight:500;padding-bottom:16px;border-bottom:1px solid #333}
.editor-body{display:flex;gap:28px;padding:22px 0;border-bottom:1px solid #333;align-items:flex-start}.editor-body>.avatar{width:130px;flex:none}
.editor-avatar{position:relative;flex:none;width:130px;padding:0;background:none}.editor-avatar:hover{background:none}.editor-avatar .avatar{width:100%}.editor-avatar .profile-edit{inset:auto 6px 6px auto;width:30px;height:30px;background:#141414cc;border-radius:50%}.editor-avatar .profile-edit .icon{width:16px;height:16px}
.editor-fields{flex:1;display:flex;flex-direction:column;gap:20px}.editor-fields>input{background:#666!important;border:0!important;border-radius:0!important;font-size:17px!important;padding:10px 12px!important}
.editor-check{display:flex;gap:14px;align-items:flex-start;cursor:pointer}.editor-check input{width:24px;height:24px;accent-color:var(--red);margin:0}.editor-check span{display:flex;flex-direction:column;gap:4px}.editor-check small,.editor-pin small{color:#999;font-size:13px}
.editor-pin{display:flex;flex-direction:column;gap:6px;border-top:1px solid #333;padding-top:18px;color:#ccc}.editor-pin-row{display:flex;gap:12px;align-items:center;margin-top:8px}.editor-pin-row input{width:150px!important;padding:8px 12px!important;letter-spacing:6px}
.editor-actions{display:flex;gap:18px;padding-top:28px;flex-wrap:wrap}.editor .gate-note{max-width:440px}
.avatar-picker{position:fixed;inset:0;z-index:70;background:#000c;display:grid;place-items:center}.avatar-picker-card{background:#181818;border-radius:8px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:22px}.avatar-picker-card h2{margin:0;font-weight:500}
.avatar-picker-card{max-height:90vh;max-width:calc(100vw - 32px);box-sizing:border-box}.avatar-sections{overflow-y:auto;padding:4px;display:flex;flex-direction:column;gap:18px}.avatar-section h3{margin:0 0 10px;font-size:16px;font-weight:500;color:#e5e5e5}
.avatar-grid{display:grid;grid-template-columns:repeat(8,82px);gap:14px}@media (max-width:860px){.avatar-grid{grid-template-columns:repeat(4,minmax(0,72px))}}.avatar-choice{padding:0;background:none;border:3px solid transparent;border-radius:6px}.avatar-choice:hover,.avatar-choice.selected{background:none;border-color:#fff}
.account-row{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #333;font-size:14px}.account-row b{color:#999;font-weight:500}.account-row>:nth-child(3){grid-column:2}.account-row .gate-link{font-size:13px;display:inline}
.account-password{display:flex;flex-direction:column;gap:12px;margin:12px 0 8px}.account-password h2{font-size:16px;margin:8px 0 0;color:#ddd}
.profile-button{display:flex;align-items:center;gap:6px;background:none;padding:0}.profile-button:hover{background:none}.profile-button .avatar{width:32px;height:32px}.profile-button .avatar.kids b{font-size:6px;letter-spacing:0}.profile-button .caret .icon{width:14px;height:14px;transition:transform .2s}.profile-button:hover .caret .icon{transform:rotate(180deg)}
.profile-menu{position:fixed;top:68px;right:var(--pad);z-index:45;min-width:220px;background:#000000eb;border:1px solid #ffffff26;padding:10px 0;display:flex;flex-direction:column}.profile-menu::before{content:'';position:absolute;top:-8px;right:16px;border:8px solid transparent;border-top:0;border-bottom-color:#ffffffaa}
.profile-menu .menu-item{display:flex;align-items:center;gap:12px;background:none;padding:8px 16px;font-weight:400;font-size:13px;text-align:left;border-radius:0}.profile-menu .menu-item:hover span,.profile-menu .menu-item.center:hover{text-decoration:underline}.profile-menu .menu-item .avatar{width:32px;height:32px}.profile-menu .menu-item .avatar.kids b{font-size:6px}.profile-menu .menu-item>.icon{width:22px;height:22px;margin:0 5px;color:#b3b3b3}
.profile-menu hr{border:0;border-top:1px solid #ffffff33;margin:8px 0}.profile-menu .menu-item.center{justify-content:center}
body.kids .brand::after{content:'KIDS';margin-left:8px;padding:2px 6px;border-radius:3px;background:linear-gradient(135deg,#2a6cdb,#13a6a6);color:#fff;font-size:12px;letter-spacing:1px;vertical-align:middle;display:inline-block;transform:scaleY(.87)}
body.kids-blocked #playback,body.kids-blocked .detail-actions,body.kids-blocked #detail-info{display:none}
.safari .player-corner{top:60px}
.ep-jellyfin{margin-left:auto;margin-right:10px;padding:2px 7px;border-radius:3px;background:linear-gradient(135deg,#aa5cc3,#00a4dc);color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;white-space:nowrap}
.away #cast-button{display:none!important}
.invite-list{display:flex;flex-direction:column;margin-top:6px}.invite-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #333;font-size:14px}.invite-actions{display:flex;gap:14px;align-items:center}.invite-actions .gate-link{font-size:13px}.invite-status{color:#999;font-size:13px}
/* TV mode (tv.js): a clear focus highlight for the remote, no mouse-only hints, a progress bar in the player */
.tv body{cursor:none}
.tv :focus{outline:none}
.tv :focus-visible,.tv button:focus,.tv input:focus,.tv select:focus,.tv [tabindex]:focus{outline:3px solid #fff!important;outline-offset:3px;box-shadow:0 0 0 6px #e5091466}
.tv .poster-card:focus{outline:none!important;box-shadow:none;transform:scale(1.08);transition:transform .15s}
.tv .poster-card:focus .card-art img{outline:4px solid #fff;outline-offset:2px}
.tv .profile-tile:focus{outline:none!important;box-shadow:none}.tv .profile-tile:focus .avatar{border-color:#fff}.tv .profile-tile:focus .profile-name{color:#fff}
.tv .episode-row:focus{outline:3px solid #fff!important;background:#2a2a2a}
.tv #video-box:focus{outline:none!important;box-shadow:none}
.tv footer>span:last-child,.tv #pip,.tv #cast-button{display:none!important}
.tv-progress{display:none}
.tv #video-box:fullscreen .tv-progress{display:flex;position:absolute;left:4%;right:4%;bottom:5%;z-index:6;align-items:center;gap:18px;font-size:22px;font-weight:600;color:#fff;text-shadow:0 1px 6px #000;opacity:0;transition:opacity .3s}
.tv #video-box.active:fullscreen .tv-progress,.tv #video-box.idle:fullscreen .tv-progress{opacity:1}
.tv-track{flex:1;height:6px;border-radius:3px;background:#ffffff40;overflow:hidden}.tv-track i{display:block;height:100%;background:var(--red);width:0}
/* TV sign-in with a phone: QR code beside the steps and the code */
.tv-signin{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}.tv-signin h1{font-size:44px;font-weight:600;margin:0}
.tv-signin-body{display:flex;align-items:center;gap:60px;background:#000000b0;border-radius:10px;padding:40px 56px}
.tv-qr{width:300px;height:300px;background:#fff;border-radius:8px;padding:6px}.tv-qr svg{width:100%;height:100%;display:block}
.tv-signin-steps{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:520px}.tv-signin-steps p{margin:4px 0;font-size:20px;color:#bbb}
.tv-signin-steps .tv-step{color:#fff;font-size:22px;margin:10px 0}.tv-url{font-size:30px!important;color:#fff!important;font-weight:700}
.tv-code{font-size:56px!important;font-weight:800;letter-spacing:8px;color:#fff!important;font-family:ui-monospace,Menlo,Consolas,monospace;margin:6px 0 10px!important}
/* TV sign-in backdrop: a tilted poster wall, dimmed towards the middle so the sign-in stays readable */
.gate-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#000}
.gate-wall{position:absolute;inset:-25% -15%;display:grid;grid-template-columns:repeat(10,1fr);gap:16px;transform:rotate(-12deg);opacity:.45;animation:wall-drift 90s linear infinite alternate}
.gate-wall img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;display:block}
.gate-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,#000000e6 0%,#000000b3 45%,#00000059 100%),linear-gradient(0deg,#000000cc 0%,transparent 30%,transparent 70%,#000000cc 100%)}
@keyframes wall-drift{from{transform:rotate(-12deg) translateY(0)}to{transform:rotate(-12deg) translateY(-6%)}}
.gate>.tv-signin,.gate>.gate-card,.gate>.gate-logo{position:relative;z-index:1}.gate>.gate-logo{position:fixed}
.tv-signin-body{background:#000000c0}
@media(max-width:700px){.gate-wall{grid-template-columns:repeat(5,1fr);gap:10px;inset:-20% -40%}}
/* Phones: a compact top bar (logo, search, avatar), a tab bar at the bottom, a full-width banner, smaller posters
   to swipe through, and episode rows that keep their titles. */
@media (max-width:760px){
 :root{--pad:16px}
 .topbar{height:56px;gap:10px;padding:0 var(--pad);padding-top:env(safe-area-inset-top);background:linear-gradient(#000000e6,#0000)}
 .brand{font-size:22px;letter-spacing:-1px}
 nav{position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;gap:0;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0c0c0cf2;border-top:1px solid #ffffff1a}
 nav button{flex:1;height:56px;font-size:11px;font-weight:600;color:#8c8c8c;padding:0}
 nav button.selected{color:#fff;font-weight:700;box-shadow:inset 0 2px 0 var(--red)}
 .header-tools{gap:8px;margin-left:auto}
 #reload,#fullscreen{display:none}
 #search{height:32px;border-color:#ffffff30;background:#00000080;border-radius:4px}
 #query{width:min(38vw,160px);font-size:13px;padding:6px 0 6px 10px}
 #search button{font-size:20px;padding:0 8px}
 .profile-button .caret{display:none}
 .profile-menu{top:56px;right:8px;left:8px;min-width:0}
 main{inset:0 0 calc(56px + env(safe-area-inset-bottom)) 0}
 footer{display:none}
 /* Home banner */
 .hero{height:72vh;min-height:430px;max-height:620px}
 .hero>img{object-position:center 20%}
 .hero-shade{background:linear-gradient(0deg,#141414 0%,#141414cc 25%,transparent 60%),linear-gradient(180deg,#00000099,transparent 25%)}
 .hero-copy{left:var(--pad);right:var(--pad);top:auto;bottom:44px;max-width:none;text-align:center;display:flex;flex-direction:column;align-items:center}
 .hero-copy>.eyebrow{font-size:9px;letter-spacing:2px;justify-content:center}.mini-brand{font-size:18px}
 .hero h1{font-size:30px;letter-spacing:-1px;margin:10px 0}
 .hero .title-logo{max-width:70vw;max-height:90px;object-position:center bottom;margin:10px auto}
 .hero-meta{font-size:11px;margin:8px 0 6px}
 .hero-copy p{font-size:13px;line-height:1.5;-webkit-line-clamp:2;margin:6px 0 14px}
 .hero-actions{gap:10px;justify-content:center;width:100%}
 .hero-actions button{flex:1;max-width:170px;justify-content:center;font-size:15px;padding:10px 14px}
 .hero-sound{bottom:auto;top:70px;right:var(--pad)}
 .hero-corner{display:none}
 /* Rows */
 .home-rows{margin-top:-10px}
 .shelf{margin-bottom:22px}
 .shelf-heading{margin-bottom:8px}
 .shelf-heading h2{font-size:16px}
 .shelf-tools button:not(:first-child){display:none}
 .shelf-tools button{font-size:11px;padding:4px 0}
 .rail{gap:8px;padding:2px var(--pad) 6px;scroll-snap-type:x mandatory}
 .rail .poster-wrap{flex:0 0 29vw}
 .poster-card:hover{transform:none}
 .poster-card h3{font-size:11px;margin:6px 0 2px}.poster-card p{font-size:9px}
 .rating-badge{transform:scale(.85);transform-origin:top left}
 /* Libraries and search */
 .page-section{padding:72px var(--pad) 28px}
 .section-heading h1{font-size:26px}
 #grid{grid-template-columns:repeat(3,1fr);gap:16px 8px;margin-top:14px}
 /* Title page */
 .back-button{top:66px;padding:6px 10px;font-size:11px}
 .detail-heading{min-height:0;padding:150px 0 18px}
 .detail-shade{background:linear-gradient(0deg,#141414 5%,#141414b3 45%,#14141433)}
 .detail-copy{max-width:none}
 .detail-copy .title-logo{max-width:72vw;max-height:80px}
 .detail-copy h1{font-size:26px}
 .detail-copy p{font-size:13px;-webkit-line-clamp:4}
 .facts{font-size:11px;white-space:normal}
 .detail-actions{flex-wrap:wrap}
 .detail-actions #detail-play{flex:1 1 100%;font-size:15px;padding:12px}
 .detail-actions button{flex:1}
 /* Player */
 #playback{scroll-margin-top:60px}
 #playback .section-heading{flex-direction:column;align-items:flex-start;gap:6px}
 #video-box{border-radius:0;margin:0 calc(var(--pad) * -1);border-left:0;border-right:0;max-height:none}
 .player-options{justify-content:flex-start}
 .player-actions{flex-wrap:wrap;gap:8px;margin:12px 0 26px}
 .player-actions button{flex:1 1 calc(50% - 8px);white-space:nowrap;padding:10px 8px}
 #pip{display:none}
 .player-corner{top:8px;right:8px;gap:6px}
 /* Episodes */
 .episodes-heading h2{font-size:19px}
 .episode-row{grid-template-columns:38% 1fr;grid-template-rows:auto auto;min-height:0;padding:12px 0;gap:0 12px}
 .ep-index{display:none}
 .ep-body{padding-left:0;gap:4px}
 .ep-head{flex-direction:column;gap:2px;font-size:14px}
 .ep-head strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .ep-head span{font-size:12px;color:#999}
 .ep-synopsis{font-size:12px;-webkit-line-clamp:2}
 .ep-jellyfin{margin:2px 0 0;align-self:flex-start}
 /* Sign-in and profiles */
 .gate{padding:80px 12px 30px}
 .gate-card{padding:32px 22px 28px}
 .profile-grid{gap:18px 22px}
 .profile-tile{width:30vw}
 .editor-body{flex-direction:column;align-items:center}
}
/* No footer bar: its status line is no longer shown. */
footer{display:none!important}
@media (max-width:760px){
 .topbar{background:#0b0b0b;box-shadow:0 1px 0 #ffffff12}
 #trailer-sound{bottom:auto;top:66px;right:var(--pad)}
 #video-box{width:calc(100% + var(--pad) * 2)}
}
/* ---------- TV interface (tv-ui.js), 1920×1080, Netflix-style ---------- */
.tv-ui-on .topbar,.tv-ui-on main{visibility:hidden}
.tv-ui{position:fixed;inset:0;z-index:50;background:#0b0b0b;overflow:hidden;color:#fff}
.tv-ui[hidden]{display:none}
.tv-content{position:absolute;inset:0}
.tv-loader{position:absolute;inset:0}
/* Menu rail: icons, opening to labels over a dark fade */
.tv-rail{position:absolute;left:0;top:0;bottom:0;width:120px;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 0 0 34px;background:linear-gradient(90deg,#000000d9,#00000000);transition:width .2s ease,background .2s ease}
.tv-rail.open{width:520px;background:linear-gradient(90deg,#000 0%,#000000f0 55%,#00000000 100%)}
.tv-rail-item{display:flex;align-items:center;gap:26px;height:62px;color:#9a9a9a;font-size:28px;font-weight:600;white-space:nowrap}
.tv-rail-item .icon{width:38px;height:38px;flex:none}.tv-rail-item .avatar{width:44px;height:44px;flex:none;border-radius:6px}
.tv-rail-item span:last-child{opacity:0;transition:opacity .15s}.tv-rail.open .tv-rail-item span:last-child{opacity:1}
.tv-rail-item.active{color:#fff}.tv-rail-item.active .icon{color:var(--red)}
.tv-rail-item.focus{color:#fff;transform:scale(1.06);transform-origin:left center}.tv-rail-item.focus span:last-child{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:8px;text-decoration-thickness:3px}
/* Billboard: the highlighted title */
.tv-browse{position:absolute;inset:0}
.tv-billboard{position:absolute;inset:0 0 auto 0;height:720px}
.tv-bb-art{position:absolute;right:0;top:0;width:1300px;height:731px}
.tv-bb-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}.tv-bb-art img.shown{opacity:1}
.tv-bb-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0b 34%,#0b0b0bcc 50%,#0b0b0b00 78%),linear-gradient(0deg,#0b0b0b 0%,#0b0b0b00 38%)}
.tv-bb-copy{position:absolute;left:160px;top:96px;width:760px}
.tv-bb-logo{display:block;max-width:560px;max-height:170px;object-fit:contain;object-position:left bottom;margin-bottom:22px}
.tv-bb-copy h1{font-size:64px;line-height:1.05;margin:0 0 20px;letter-spacing:-1px}
.tv-bb-meta{font-size:24px;color:#d0d0d0;font-weight:600;margin-bottom:16px;white-space:pre}
.tv-bb-desc{font-size:24px;line-height:1.5;color:#cfcfcf;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Rows: the current row sits in a fixed place; rows and posters glide with transforms */
.tv-rows{position:absolute;left:160px;right:0;top:560px;bottom:0;overflow:hidden}
.tv-rows-track{transition:transform .22s ease-out;will-change:transform}
.tv-row{height:360px;transition:opacity .2s}.tv-row.above{opacity:0}
.tv-row h2{font-size:30px;font-weight:700;margin:0 0 16px;color:#e5e5e5}
.tv-row-track{display:flex;gap:16px;transition:transform .22s ease-out;will-change:transform;padding:10px 0}
.tv-tile{position:relative;flex:0 0 196px;height:294px;border-radius:8px;overflow:hidden;background:#222;transition:transform .15s ease-out}
.tv-tile img{width:100%;height:100%;object-fit:cover;display:block}
.tv-tile.focus{transform:scale(1.1);outline:5px solid #fff;outline-offset:0;z-index:2;box-shadow:0 10px 30px #000c}
.tv-tile-bar{position:absolute;left:10px;right:10px;bottom:10px;height:6px;border-radius:3px;background:#ffffff4d;overflow:hidden}.tv-tile-bar i{display:block;height:100%;background:var(--red)}
.tv-empty{position:absolute;left:160px;top:600px;font-size:28px;color:#aaa}
/* Search: keyboard and results */
.tv-search{position:absolute;inset:0;display:flex;gap:70px;padding:90px 80px 0 160px}
.tv-search-left{width:560px;flex:none}
.tv-search-query{font-size:40px;font-weight:700;min-height:64px;border-bottom:3px solid #444;margin-bottom:30px;padding-bottom:10px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.tv-key{height:74px;display:grid;place-items:center;font-size:30px;font-weight:600;color:#ccc;background:#1d1d1d;border-radius:6px}
.tv-key.wide{grid-column:span 2;font-size:24px}
.tv-key.focus{background:#fff;color:#000}
.tv-search-results{flex:1;overflow:hidden;position:relative}
.tv-grid-row{display:flex;gap:22px;margin-bottom:26px}
.tv-search-results .tv-empty{position:static;margin-top:120px}
/* Title page */
.tv-detail{position:absolute;inset:0}
.tv-dt-art{position:absolute;right:0;top:0;width:1400px;height:788px}.tv-dt-art img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}.tv-dt-art img.shown{opacity:1}
.tv-dt-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0b 30%,#0b0b0bd9 48%,#0b0b0b00 80%),linear-gradient(0deg,#0b0b0b 0%,#0b0b0b00 45%)}
.tv-dt-copy{position:absolute;left:160px;top:110px;width:820px}
.tv-dt-logo{display:block;max-width:600px;max-height:190px;object-fit:contain;object-position:left bottom;margin-bottom:24px}
.tv-dt-copy h1{font-size:64px;line-height:1.05;margin:0 0 20px}
.tv-dt-meta{font-size:24px;color:#d0d0d0;font-weight:600;white-space:pre;margin-bottom:14px}
.tv-dt-progress{font-size:22px;color:#e5e5e5;margin-bottom:10px}
.tv-dt-desc{font-size:24px;line-height:1.5;color:#cfcfcf;margin:0 0 34px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tv-dt-buttons{display:flex;gap:18px}
.tv-btn{display:flex;align-items:center;gap:14px;height:72px;padding:0 34px;border-radius:8px;background:#ffffff26;color:#fff;font-size:26px;font-weight:700}
.tv-btn .icon{width:30px;height:30px}.tv-btn.primary .icon{fill:currentColor}
.tv-btn.focus{background:#fff;color:#000;transform:scale(1.05)}
.tv-seasons{position:absolute;left:160px;top:640px;display:flex;gap:14px}
.tv-chip{padding:14px 26px;border-radius:30px;background:#ffffff1f;font-size:24px;font-weight:600;color:#ddd}.tv-chip.active{box-shadow:inset 0 0 0 2px #fff}.tv-chip.focus{background:#fff;color:#000}
.tv-episodes{position:absolute;left:160px;right:0;top:720px}
.tv-episodes h2{font-size:28px;margin:0 0 16px;color:#e5e5e5}
.tv-ep-track{display:flex;gap:24px;transition:transform .22s ease-out;will-change:transform}
.tv-ep{flex:0 0 408px;transition:transform .15s}
.tv-ep-still{position:relative;height:230px;border-radius:8px;overflow:hidden;background:#222}.tv-ep-still img{width:100%;height:100%;object-fit:cover}
.tv-ep.focus .tv-ep-still{outline:5px solid #fff}.tv-ep.focus{transform:scale(1.04)}
.tv-ep-title{font-size:22px;font-weight:600;margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tv-ep-time{font-size:18px;color:#999;margin-top:4px}
/* Player: full screen inside the app, the title and progress bar over the picture */
.tv-ui-on #video-box.tv-playing{visibility:visible}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing{position:fixed;inset:0;z-index:70;width:100vw;height:100vh;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:#000}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .tv-progress{display:flex;position:absolute;left:4%;right:4%;bottom:6%;z-index:6;align-items:center;gap:18px;font-size:24px;font-weight:600;color:#fff;text-shadow:0 1px 6px #000;opacity:0;transition:opacity .3s}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.active .tv-progress,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.idle .tv-progress{opacity:1}
.tv-player-title{display:none}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .tv-player-title{display:block;position:absolute;left:4%;top:5%;z-index:6;font-size:34px;font-weight:700;text-shadow:0 2px 10px #000;opacity:0;transition:opacity .3s}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.active .tv-player-title{opacity:1}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,#000000b3,#0000 30%,#0000 75%,#00000099);opacity:0;transition:opacity .3s}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.active::before{opacity:1}
/* TV mode: no costly effects */
.tv .poster-card img,.tv .title-logo{box-shadow:none;filter:none}
.tv .gate-wall{animation:none}
.tv main{scroll-behavior:auto}
.tv-row{height:392px}.tv-tile.focus{transform:scale(1.07)}
.tv-ui .tv-bb-copy,.tv-ui .tv-dt-copy,.tv-ui .tv-rows,.tv-ui .tv-episodes{transition:opacity .2s}
.tv-ui .tv-billboard .tv-bb-copy.tv-bb-wait{opacity:0;transition:none}
.tv-ui.rail-open .tv-bb-copy,.tv-ui.rail-open .tv-dt-copy,.tv-ui.rail-open .tv-search-left{opacity:.12}.tv-ui.rail-open .tv-rows,.tv-ui.rail-open .tv-episodes{opacity:.35}
.tv-rail.open{background:linear-gradient(90deg,#000 0%,#000 40%,#000000d0 70%,#00000000 100%)}
/* TV trailers over the billboard and title artwork */
.tv-trailer{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;opacity:0;transition:opacity .6s;pointer-events:none}
.tv-trailer-on .tv-trailer{opacity:1}
.tv-trailer-on .tv-bb-desc{opacity:0;transition:opacity .4s}
.tv-bb-art,.tv-dt-art{overflow:hidden}
/* TV loading screen: new screens are built behind it */
.tv-loader{z-index:8;background:#0b0b0b;display:grid;place-items:center}.tv-loader[hidden]{display:none}
.tv-spinner{width:84px;height:84px;border-radius:50%;border:7px solid #ffffff1f;border-top-color:var(--red);animation:spin .9s linear infinite}
.tv-content.tv-veiled{visibility:hidden}
.tv-content.tv-reveal{animation:tv-reveal .4s ease}@keyframes tv-reveal{from{opacity:0}to{opacity:1}}
/* Episode cards are all the same size, whatever the title's length */
.tv-ep{width:408px;min-width:0;overflow:hidden}.tv-ep-title,.tv-ep-time{max-width:100%}
/* The full-screen player lives inside the (hidden) website layer, so that layer rises above the TV interface while it plays. */
.tv-player-open main{z-index:55}
/* TV fixes: the website layer never shows on the TV; a safe margin on the left (TVs crop their edges); the billboard
   artwork stays inside its fade; the highlighted poster is never clipped. */
.tv .topbar,.tv main{visibility:hidden}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing{visibility:visible}
.tv-rail{align-items:flex-start;padding-left:60px;width:150px;gap:14px}
.tv-rail.open{width:560px}
.tv-bb-art{height:720px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.tv-dt-art{height:788px;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.tv-bb-copy,.tv-dt-copy,.tv-empty{left:190px}
.tv-rows{left:176px;top:548px}
.tv-row h2{padding-left:14px}
.tv-row-track{padding:16px 14px}
.tv-episodes,.tv-seasons{left:176px}
.tv-episodes h2{padding-left:14px}
.tv-ep-track{padding:12px 14px}
.tv-search{padding-left:190px}
.hover-card.preparing{opacity:0!important;pointer-events:none}
.hover-card:not(.open){pointer-events:none}
/* Trailers fit their box exactly (16:9), so nothing is cropped: TVs draw video on their own layer and may not crop as asked. */
.tv-bb-art{width:1280px;height:720px}
.tv-dt-art{width:1400px;height:787.5px}
.tv-trailer{object-fit:contain;background:#000}
/* Admin dashboard */
.gate>/* ---------- TV redesign (Netflix TV): full-screen artwork and trailers, title page with tabs and panels, player ---------- */
/* Artwork and trailers fill the screen: a TV draws video on its own layer and ignores masks, so there is no edge to hide. */
.tv-billboard{inset:0;height:auto}
.tv-bb-art,.tv-dt-art{inset:0;width:100%!important;height:100%!important;-webkit-mask-image:none;mask-image:none}
.tv-trailer{object-fit:cover}
.tv-bb-shade{background:linear-gradient(90deg,#000000e6 0%,#000000b3 30%,#00000033 60%,#0000 75%),linear-gradient(0deg,#000 0%,#000000d9 30%,#0000 55%)}
.tv-dt-shade{background:linear-gradient(90deg,#000000e0 0%,#00000099 38%,#0000 62%),linear-gradient(0deg,#000000f2 0%,#000000b3 30%,#0000 60%)}
.panel-open .tv-dt-shade{background:#000000c7}
/* Title page: copy at the bottom left */
.tv-detail .tv-dt-copy{top:auto;bottom:178px;left:190px;width:900px}
.tv-dt-logo{max-width:620px;max-height:200px}.tv-dt-logo-title{font-size:72px;font-weight:800;line-height:1;margin-bottom:22px}
.tv-dt-meta{font-size:26px;margin:6px 0 14px;color:#e5e5e5}
.tv-dt-desc{font-size:26px;line-height:1.45;-webkit-line-clamp:3;margin-bottom:30px;max-width:860px}
.tv-dt-buttons{display:flex;align-items:center;gap:22px}
.tv-play{display:flex;align-items:center;gap:16px;height:76px;padding:0 38px 0 30px;border-radius:40px;background:#ffffff2e;font-size:28px;font-weight:700;color:#fff;transition:transform .12s}
.tv-play .icon{width:30px;height:30px;fill:currentColor}
.tv-play-bar{width:160px;height:5px;border-radius:3px;background:#0000004d;overflow:hidden}.tv-play-bar i{display:block;height:100%;background:var(--red)}
.tv-play small{font-size:20px;font-weight:600;opacity:.8}
.tv-play.focus{background:#fff;color:#000;transform:scale(1.04)}.tv-play.focus .tv-play-bar{background:#00000033}
.tv-round{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:3px solid #ffffff80;color:#fff}.tv-round .icon{width:30px;height:30px}
.tv-round.focus{background:#fff;color:#000;border-color:#fff;transform:scale(1.08)}
.tv-dt-tags{position:absolute;right:120px;bottom:250px;display:flex;flex-direction:column;gap:12px;align-items:flex-end;max-width:520px}
.tv-tag{font-size:22px;font-weight:600;color:#e5e5e5;background:#00000080;padding:8px 16px;border-radius:6px;text-align:right}
.tv-dt-tabs{position:absolute;left:190px;bottom:70px;display:flex;align-items:center;gap:46px}
.tv-tab{font-size:26px;font-weight:700;color:#cfcfcf;padding:10px 22px;border-radius:10px}
.tv-tab.focus{background:#fff;color:#000}.tv-tab.active:not(.focus){background:#ffffff33;color:#fff}
.tv-chevron .icon{width:34px;height:34px;color:#ddd}.tv-chevron.up .icon{transform:rotate(180deg)}
/* Panels: tabs at the top, a small logo and summary, then episodes / details / audio */
.tv-panel-tabs{position:absolute;left:190px;right:120px;top:70px;display:flex;align-items:center;gap:30px;padding-bottom:22px;border-bottom:2px solid #ffffff40}
.tv-panel-head{position:absolute;left:190px;top:190px}
.tv-panel-logo{display:block;max-width:420px;max-height:120px;object-fit:contain;object-position:left bottom}.tv-panel-logo-title{font-size:52px;font-weight:800}
.tv-panel-sub{font-size:24px;font-weight:600;color:#e5e5e5;margin-top:12px}
.tv-panel-body{position:absolute;left:176px;right:0;top:420px}
.tv-season-chip{display:inline-flex;flex-direction:column;gap:2px;margin-left:14px;padding:12px 22px;border-radius:10px;background:#ffffff26}
.tv-season-chip b{font-size:24px}.tv-season-chip small{font-size:18px;color:#ccc}.tv-season-chip.focus{background:#fff;color:#000}.tv-season-chip.focus small{color:#333}
.tv-panel-body .tv-episodes{position:static;margin-top:18px}
.tv-ep-still{height:230px}.tv-ep-num{position:absolute;left:14px;top:10px;font-size:26px;font-weight:800;text-shadow:0 2px 8px #000}
.tv-ep.focus{transform:scale(1.07)}.tv-ep.focus .tv-ep-still{outline:5px solid #fff}
.tv-ep-info{margin:26px 0 0 14px;max-width:1100px}.tv-ep-info h3{font-size:30px;margin:0 0 10px}.tv-ep-info p{font-size:24px;line-height:1.45;color:#ddd;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-ep-facts{display:flex;gap:80px}.tv-ep-facts small,.tv-details-grid small{display:block;font-size:20px;color:#aaa}.tv-ep-facts b,.tv-details-grid b{font-size:24px}
.tv-seasons{top:auto;bottom:60px;left:190px}
.tv-details{padding-left:14px;max-width:1500px}.tv-details .tv-dt-desc{-webkit-line-clamp:4}
.tv-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 60px}
.tv-audio{padding-left:14px;display:flex;flex-direction:column;gap:14px}
.tv-audio-option{display:flex;align-items:center;gap:18px;font-size:28px;font-weight:600;padding:14px 26px;border-radius:10px;width:620px;background:#ffffff1a}
.tv-audio-option.focus{background:#fff;color:#000}.tv-check{width:28px}
/* Player controls */
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .tv-progress,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .tv-player-title,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .player-corner,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing::before{display:none!important}
.tvp{display:none}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .tvp{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;color:#fff}
.tvp>*:not(.tvp-rating){opacity:0;transition:opacity .3s}.tvp.on>*{opacity:1}
/* The loading card and the end-of-film page show whether or not the controls do. */
.tvp>.tvp-rating{z-index:0;transition:transform .3s ease}.tvp.on>.tvp-rating{transform:translateY(96px)}
.tvp>.tvp-loader{opacity:1;transition:opacity .45s}.tvp>.tvp-loader.entering,.tvp>.tvp-loader.fading{opacity:0}.tvp>.tvp-end{opacity:0;transition:opacity .9s ease}.tvp>.tvp-end.on{opacity:1}
.tvp-shade{position:absolute;inset:0;background:linear-gradient(180deg,#000000b3 0%,#0000 22%,#0000 62%,#000000d9 100%)}
.tvp-top{position:absolute;left:5%;right:5%;top:6%;display:flex;align-items:flex-start;gap:30px}
.tvp-icons{display:flex;gap:26px}.tvp-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center}.tvp-icon .icon{width:40px;height:40px}
.tvp-icon.focus{background:#fff;color:#000}
.tvp-label{position:absolute;left:0;top:84px;font-size:22px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.tvp-title{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:6px}.tvp-title b{font-size:28px}.tvp-title span{font-size:22px;color:#ddd}
.tvp-bottom{position:absolute;left:5%;right:5%;bottom:7%}
.tvp-line{display:flex;align-items:center;gap:26px;font-size:26px;font-weight:600}
.tvp-state{width:84px;height:84px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;flex:none}.tvp-state .icon{width:38px;height:38px;fill:currentColor}
.tvp-bar{position:relative;flex:1;height:6px;border-radius:3px;background:#ffffff59}.tvp-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);border-radius:3px}
.tvp-bar.focus{height:10px}.tvp-bar.focus i::after{content:'';position:absolute;right:-11px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--red)}
.tvp-pills{display:flex;align-items:center;gap:16px;margin-top:26px;margin-left:110px}
.tvp-pill{display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:24px;background:#ffffff2e;font-size:22px;font-weight:600}
.tvp-pill .icon{width:26px;height:26px}.tvp-pill.focus{background:#fff;color:#000}.tvp-tick{font-weight:800}
.tvp-rating{position:absolute;left:5%;top:9%;display:flex;align-items:center;gap:18px;font-size:28px;font-weight:600;border-left:5px solid var(--red);padding:6px 0 6px 20px;text-shadow:0 2px 10px #000;animation:tv-reveal .5s ease}
.tvp-rating b{background:#ffffffe6;color:#000;padding:2px 12px;border-radius:4px;font-size:26px}.tvp-rating-label{font-weight:500}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .up-next{z-index:7;font-size:26px}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button{left:5%;right:auto;bottom:20%;padding:16px 30px;background:#1c1c1c80;color:#fff;border:2px solid #ffffffb3;border-radius:8px}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button:hover,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button.focus{background:#fffffff0;color:#000;border-color:#fff}
.gate-spinner{width:64px;height:64px;border-radius:50%;border:6px solid #ffffff1f;border-top-color:var(--red);animation:spin .9s linear infinite;margin:auto}
/* Widescreen trailers carry black bars in the video itself (about 13% of the height at 2.39:1); solid black over the
   bars that then fades out hides the hard line where a bar meets the picture, at the top and the bottom. */
.tv-bb-shade{background:linear-gradient(180deg,#000 0%,#000 13%,#000000a6 22%,#0000 34%),linear-gradient(90deg,#000000e6 0%,#000000b3 30%,#00000033 60%,#0000 75%),linear-gradient(0deg,#000 0%,#000 14%,#000000d9 30%,#0000 55%)}
.tv-dt-shade{background:linear-gradient(180deg,#000 0%,#000 13%,#000000a6 22%,#0000 34%),linear-gradient(90deg,#000000e0 0%,#00000099 38%,#0000 62%),linear-gradient(0deg,#000 0%,#000 14%,#000000d9 32%,#0000 60%)}
.panel-open .tv-dt-shade{background:#000000c7}
/* Focus rings follow the rounded corners (an outline is drawn square on some TV engines, leaving white corners). */
.tv-ep.focus .tv-ep-still{outline:none;box-shadow:0 0 0 5px #fff,0 12px 30px #000c}
.tv-tile.focus{outline:none;box-shadow:0 0 0 5px #fff,0 10px 30px #000c}
.tv-ep-still,.tv-tile{border-radius:8px}
/* The card must not clip its own focus ring (only the long title text is clipped). */
.tv-ep{overflow:visible}.tv-ep-title,.tv-ep-time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-ep-track{padding-top:14px;padding-bottom:14px}
/* ---------- The TV-style layout on computers (tv-desk): mouse, pointer, back button, row arrows ---------- */
.tv-desk body{cursor:auto}
.tv-desk .tv-ui{inset:auto;left:0;top:0}
.tv-desk .tv-tile,.tv-desk .tv-ep,.tv-desk .tv-rail-item,.tv-desk .tv-tab,.tv-desk .tv-play,.tv-desk .tv-round,.tv-desk .tv-key,.tv-desk .tv-chip,.tv-desk .tv-season-chip,.tv-desk .tv-audio-option,.tv-desk .tv-chevron,.tv-desk .tv-back,.tv-desk .tv-row-arrow{cursor:pointer}
.tv-desk .tv-play:hover:not(.focus),.tv-desk .tv-tab:hover:not(.focus),.tv-desk .tv-key:hover:not(.focus),.tv-desk .tv-chip:hover:not(.focus),.tv-desk .tv-audio-option:hover:not(.focus),.tv-desk .tv-season-chip:hover:not(.focus){background:#ffffff4d}
.tv-desk .tv-round:hover:not(.focus){border-color:#fff}
.tv-desk .tv-rail-item:hover{color:#fff}
.tv-back{position:absolute;left:190px;top:40px;z-index:4;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#00000080;color:#fff}.tv-back .icon{width:34px;height:34px}.tv-back:hover{background:#fff;color:#000}
.panel-open .tv-back{display:none}
.tv-search .tv-back{left:190px;top:20px}
.tv-row{position:relative}
.tv-row-arrow{position:absolute;top:58px;height:294px;width:60px;display:grid;place-items:center;font-size:64px;color:#fff;background:#00000099;opacity:0;transition:opacity .15s;z-index:3}
.tv-row-arrow.prev{left:-14px}.tv-row-arrow.next{right:0}
.tv-row:hover .tv-row-arrow{opacity:1}.tv-row-arrow:hover{background:#000000cc}
.tv-desk .tvp-icon,.tv-desk .tvp-pill,.tv-desk .tvp-bar,.tv-desk .tvp-state,.tv-desk .tvp-vol{pointer-events:auto;cursor:pointer}
.tv-desk .tvp-icon:hover:not(.focus),.tv-desk .tvp-pill:hover:not(.focus){background:#ffffff40}
.tv-desk .tvp-bar::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.tv-desk #video-box.tv-playing{cursor:default}
.tv-desk #cast-panel{z-index:8}
/* Seek preview above the progress bar */
.tvp-bottom{position:absolute}
.tvp-preview{position:absolute;bottom:150px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.tvp-preview[hidden]{display:none}
.tvp-preview img{width:320px;height:180px;object-fit:cover;border-radius:8px;background:#111;border:3px solid #fff;opacity:.35;transition:opacity .15s}
.tvp-preview img.shown{opacity:1}
.tvp-preview span{font-size:26px;font-weight:700;text-shadow:0 2px 8px #000}
/* ---------- Computers: a top bar instead of the rail, and content that starts near the left edge ---------- */
.tvd-bar{display:none}
.tv-desk .tv-rail{display:none}
.tv-desk .tvd-bar{display:flex;align-items:center;gap:56px;position:absolute;left:0;right:0;top:0;height:110px;padding:0 80px;z-index:6;background:linear-gradient(180deg,#000000e6 0%,#000000a6 55%,#0000 100%)}
.tvd-logo{color:var(--red);font-weight:900;font-size:46px;letter-spacing:-2px;transform:scaleY(1.15);cursor:pointer}
.tvd-nav{display:flex;gap:34px}.tvd-nav span{font-size:24px;color:#d0d0d0;cursor:pointer;transition:color .15s}.tvd-nav span:hover{color:#fff}.tvd-nav span.active{color:#fff;font-weight:700}
.tvd-tools{margin-left:auto;display:flex;align-items:center;gap:30px}
.tvd-search{cursor:pointer;color:#fff}.tvd-search .icon{width:36px;height:36px}
.tvd-avatar{cursor:pointer}.tvd-avatar .avatar{width:48px;height:48px;border-radius:6px}
.tv-desk .tv-bb-copy{left:80px;top:150px}
.tv-desk .tv-rows{left:66px}
.tv-desk .tv-row-arrow.prev{left:-6px}
.tv-desk .tv-empty{left:80px}
.tv-desk .tv-detail .tv-dt-copy{left:80px}
.tv-desk .tv-dt-tabs{left:80px}
.tv-desk .tv-back{left:80px;top:130px}
.tv-desk .tv-panel-tabs{left:80px;top:130px}
.tv-desk .tv-panel-head{left:80px;top:240px}
.tv-desk .tv-panel-body{left:66px;top:450px}
.tv-desk .tv-seasons{left:80px}
.tv-desk .tv-search{padding-left:80px;padding-top:150px}
.tv-desk .tv-search .tv-back{left:80px;top:130px}
.tv-desk .tv-search-left{margin-top:60px}
/* Computers: the website as before; a title's page and the player use the TV-style interface over it */
.tv-desk .tv-back{top:40px}
.tv-desk .tv-panel-tabs{top:70px}.tv-desk .tv-panel-head{top:190px}.tv-desk .tv-panel-body{top:410px}
.tv-desk .tv-ui{z-index:50}
.tv-desk.tv-ui-on body{overflow:hidden}
/* Nothing of the website's own player shows under the TV-style player */
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .big-play,:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing #player-message:empty{display:none!important}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing video::-webkit-media-controls{display:none!important}
/* The Nightjar badge: on your own server */
.nj-badge{position:absolute;top:6px;right:6px;width:24px;height:24px;z-index:2;filter:drop-shadow(0 1px 4px #000c);pointer-events:none}
.nj-badge svg{display:block;width:100%;height:100%}
.card-art{position:relative;display:block}
.ep-thumb .nj-badge{width:22px;height:22px}
.tv-tile .nj-badge{top:10px;right:10px;width:38px;height:38px}
.tv-ep-still .nj-badge{top:10px;right:10px;width:40px;height:40px}
.hover-media .nj-badge{top:10px;right:10px}
.tvp-preview img.near{opacity:.75}
/* The loaded part of the video, behind the red progress */
.tvp-bar b{position:absolute;left:0;top:0;bottom:0;background:#ffffffb3;border-radius:3px;transition:width .3s}
.tvp-bar i{z-index:1}
/* Starting playback: a loading screen with the episode's still */
.tvp-loader{position:absolute;inset:0;z-index:9;background:#000;display:grid;place-items:center;pointer-events:none}
.tvp-loader[hidden]{display:none}
.tvp-loader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:blur(2px)}
.tvp-loader-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,#000000a6,#000000e6)}
.tvp-loader-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.tvp-loader-copy b{font-size:44px;font-weight:800}.tvp-loader-copy span{font-size:26px;color:#ddd}
.tvp-spinner{width:84px;height:84px;border-radius:50%;border:7px solid #ffffff26;border-top-color:var(--red);animation:spin .9s linear infinite;margin-bottom:10px}
/* Genres menu beside a library's title, as on Netflix: a small outlined dropdown. */
.library-title-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.genre-select{appearance:none;-webkit-appearance:none;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 10px center/9px 6px;color:#fff;border:1px solid rgba(255,255,255,.9);border-radius:2px;padding:5px 32px 5px 11px;font-size:14px;font-weight:600;letter-spacing:.2px;cursor:pointer;line-height:1.3}
.genre-select:hover,.genre-select:focus-visible{background-color:rgba(255,255,255,.12);outline:none}
.genre-select.chosen{border-color:var(--red)}
.genre-select option{background:#141414;color:#fff;font-weight:400}
/* TV: the Genres chip at the top of a library, and the genre list it opens. */
.tv-chips{position:absolute;left:190px;top:36px;z-index:3;display:flex;gap:18px}
.tv-genre-chip{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;color:#fff;padding:10px 20px 10px 24px;border:2px solid rgba(255,255,255,.75);border-radius:10px;background:rgba(0,0,0,.45)}
.tv-genre-chip .icon{width:26px;height:26px}
.tv-genre-chip.focus{background:#fff;color:#000;border-color:#fff}
.tv-genres{position:absolute;inset:0;background:rgba(0,0,0,.88);overflow:hidden}
.tv-genres::before,.tv-genres::after{content:"";position:absolute;left:0;right:0;height:300px;z-index:1;pointer-events:none}
.tv-genres::before{top:0;background:linear-gradient(#000,transparent)}.tv-genres::after{bottom:0;background:linear-gradient(transparent,#000)}
.tv-genres-list{position:absolute;left:0;right:0;top:504px;display:flex;flex-direction:column;align-items:center;transition:transform .18s ease-out}
.tv-genre{height:72px;line-height:72px;font-size:34px;font-weight:600;color:#9a9a9a;transition:color .15s,transform .15s}
.tv-genre.focus{color:#fff;font-weight:800;transform:scale(1.18)}
/* Top 10 rows, as on Netflix: each card is a large outlined rank number with the poster beside it,
   the poster slightly overlapping the number's right edge. */
/* Room above the posters for the numbers, which stand taller than them (the row's scrolling would clip them). */
.top10-shelf .rail{--w:clamp(112px,9.4vw,158px);gap:0;padding-top:calc(var(--w)*.5);margin-top:calc(var(--w)*-.3);padding-bottom:16px}
.top10-shelf .shelf-heading{position:relative;z-index:2}
.top10-shelf .rail .poster-wrap.top10-card{flex:0 0 calc(var(--w)*1.84);display:flex;align-items:flex-end;justify-content:flex-end;position:relative}
.top10-rank{position:absolute;left:0;bottom:calc(var(--w)*-.13);width:calc(var(--w)*1.02);text-align:right;font:900 calc(var(--w)*2.02)/1 "Arial Black",Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.07em;color:#14141466;-webkit-text-stroke:max(3px,.018em) #5e5e5e;paint-order:stroke fill;user-select:none;pointer-events:none;z-index:0}
.top10-rank.wide{letter-spacing:-.19em;width:calc(var(--w)*1.1)}
.top10-card .poster-card{flex:0 0 var(--w);width:var(--w);position:relative;z-index:1}
.top10-card .poster-card>h3,.top10-card .poster-card>p,.top10-card .rating-badge{display:none}
.top10-badge{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:1;padding:4px 6px;border-radius:2px;letter-spacing:.1px;pointer-events:none}
/* The row's backdrop: its number one's artwork, dimmed, faded at the top, bottom and left. */
.top10-shelf{position:relative;isolation:isolate}
.top10-bg{position:absolute;left:0;right:0;top:-6px;bottom:-24px;z-index:-1;background:center 30%/cover no-repeat;opacity:0;transition:opacity .6s;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%)}
.top10-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141414f0 0%,#14141499 45%,#14141466 100%)}
.top10-bg.shown{opacity:.75}
@media (max-width:700px){.top10-shelf .rail{--w:25vw}.top10-badge{font-size:9px;padding:3px 4px}}
/* TV Top 10 rows */
.tv-top10{position:relative;flex:0 0 356px;display:flex;justify-content:flex-end}
.tv-top10-rank{position:absolute;left:0;bottom:-14px;width:200px;text-align:right;font:900 300px/.8 "Arial Black",Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-18px;color:#000;-webkit-text-stroke:6px #6a6a6a;paint-order:stroke fill;z-index:0}
.tv-top10.wide .tv-top10-rank{letter-spacing:-34px;width:214px}
.tv-top10 .tv-tile{z-index:1}
.tv-top10-badge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;background:#e50914;color:#fff;font-size:18px;font-weight:700;line-height:1;padding:6px 9px;border-radius:3px}
/* Player volume (computers): a speaker; hovering it opens an upright slider above it, as on Netflix. */
.tvp-vol{position:relative;display:flex;align-items:center;margin-left:18px}
.tvp-vol[hidden]{display:none}
.tvp-vol-btn{display:flex;cursor:pointer;padding:6px;border-radius:50%}
.tvp-vol-btn .icon{width:34px;height:34px}
.tvp-vol-btn:hover{background:#ffffff22}
.tvp-vol-pop{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding:0 0 14px;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.tvp-vol-pop::before{content:"";position:absolute;inset:0 0 14px;background:#262626;border-radius:6px;box-shadow:0 6px 20px #000a}
.tvp-vol:hover .tvp-vol-pop,.tvp-vol-pop:focus-within{opacity:1;visibility:visible}
.tvp-vol-range{--fill:100%;position:relative;display:block;margin:22px 26px;-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:8px;height:150px;border-radius:4px;cursor:pointer;background:linear-gradient(0deg,#e50914 var(--fill),#ffffff55 var(--fill))}
.tvp-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#e50914;border:0}
.tvp-vol-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#e50914;border:0}
/* Computers: how far into a title, on a slim line above Resume (the button stays compact). */
.tv-dt-progress{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.tv-dt-progress .tv-play-bar{width:260px;height:6px;background:#ffffff4d}
.tv-dt-progress small{font-size:22px;font-weight:600;color:#ddd}
/* Player: audio and subtitle choices in labelled groups. */
.tvp-pills{gap:34px}
.tvp-group{display:flex;align-items:center;gap:12px}
.tvp-group-label{font-size:18px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#bdbdbd;margin-right:4px}
.tvp-group+.tvp-group:not(.plain){padding-left:34px;border-left:2px solid #ffffff33}
.tvp-pill.on:not(.focus){background:#ffffff4d}
/* The gear's settings in the full-screen player: a large dark panel above the controls at the bottom right,
   in the player's type and colours (uppercase headings, white choices, a red tick), each column scrolling alone. */
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-panel{top:auto;bottom:calc(19vh + 80px);right:4%;z-index:8;gap:0;max-width:92%;max-height:min(60vh,640px);padding:clamp(18px,1.8vw,28px) clamp(10px,1vw,16px);background:#141414;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 24px 60px #000d;backdrop-filter:blur(10px);animation:settings-in .16s ease-out}
@keyframes settings-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-column{min-width:clamp(160px,13vw,250px);padding:0 clamp(8px,.8vw,14px);scrollbar-color:#ffffff40 transparent}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-column+.settings-column{border-left:1px solid #ffffff1f;padding-left:clamp(14px,1.2vw,22px)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-column h4{position:sticky;top:0;z-index:1;margin:0 0 clamp(8px,.8vw,14px);padding:0 0 4px clamp(30px,2.3vw,40px);background:#141414;font-size:clamp(13px,1vw,16px);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#bdbdbd}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option{gap:clamp(8px,.7vw,12px);padding:clamp(7px,.65vw,11px) clamp(10px,.9vw,16px) clamp(7px,.65vw,11px) clamp(4px,.4vw,8px);border-radius:6px;font-size:clamp(16px,1.35vw,22px);font-weight:500;color:#b3b3b3;transition:background .12s,color .12s}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option:hover{background:#ffffff17;color:#fff}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option.selected{color:#fff;font-weight:700}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option .tick{width:clamp(22px,1.7vw,30px)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option .tick .icon{width:clamp(16px,1.25vw,22px);height:clamp(16px,1.25vw,22px);color:var(--red);stroke:var(--red)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option small{font-size:clamp(11px,.85vw,14px);color:#8c8c8c}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .settings-option:disabled{opacity:.4;cursor:default}
/* Title page: the tabs above the episodes (seasons, episode ranges). */
.tv-groups{margin-left:14px;overflow:hidden;max-width:1500px;padding:6px 6px 8px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.tv-groups-track{display:flex;gap:14px;transition:transform .25s ease-out;will-change:transform}
.tv-group-tab{flex:0 0 auto;padding:12px 26px;border-radius:30px;font-size:24px;font-weight:700;color:#d0d0d0;background:#ffffff1f;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.tv-group-tab.range{font-variant-numeric:tabular-nums}
.tv-group-tab.active{background:#ffffff40;color:#fff;box-shadow:inset 0 0 0 2px #ffffffb3}
.tv-group-tab.focus{background:#fff;color:#000;box-shadow:none;transform:scale(1.05)}
.tv-desk .tv-group-tab{cursor:pointer}.tv-desk .tv-group-tab:hover:not(.focus){background:#ffffff4d}
.tv-groups-none{display:inline-flex;flex-direction:column;gap:2px;margin-left:14px;padding:6px 8px}
.tv-groups-none b{font-size:24px}.tv-groups-none small{font-size:18px;color:#ccc}
/* Title page: sliding between the main page and its panels. */
.tv-leaving{pointer-events:none;z-index:2}
.tv-leaving .tv-dt-art,.tv-leaving .tv-dt-shade,.tv-leaving .tv-back{visibility:hidden}
.tv-leaving.leave-up>:not(.tv-dt-art):not(.tv-dt-shade){animation:tv-out-up .3s cubic-bezier(.4,0,.2,1) both}
.tv-leaving.leave-down>:not(.tv-dt-art):not(.tv-dt-shade),.tv-leaving.leave-side>:not(.tv-dt-art):not(.tv-dt-shade){animation:tv-out-down .3s cubic-bezier(.4,0,.2,1) both}
.tv-leaving.leave-side>:not(.tv-dt-art):not(.tv-dt-shade){animation-name:tv-out-fade}
.tv-detail.enter-up>:not(.tv-dt-art):not(.tv-dt-shade):not(.tv-back){animation:tv-in-up .46s cubic-bezier(.2,.7,.2,1) both}
.tv-detail.enter-down>:not(.tv-dt-art):not(.tv-dt-shade):not(.tv-back){animation:tv-in-down .46s cubic-bezier(.2,.7,.2,1) both}
.tv-detail.enter-side>:not(.tv-dt-art):not(.tv-dt-shade):not(.tv-back){animation:tv-in-fade .3s ease-out both}
.tv-detail.enter-up>.tv-panel-head,.tv-detail.enter-down>.tv-dt-tags{animation-delay:.04s}
.tv-detail.enter-up>.tv-panel-body,.tv-detail.enter-down>.tv-dt-tabs{animation-delay:.08s}
.tv-detail .tv-dt-shade{transition:background .45s}
@keyframes tv-out-up{to{opacity:0;transform:translate3d(0,-160px,0)}}
@keyframes tv-out-down{to{opacity:0;transform:translate3d(0,160px,0)}}
@keyframes tv-out-fade{to{opacity:0}}
@keyframes tv-in-up{from{opacity:0;transform:translate3d(0,200px,0)}}
@keyframes tv-in-down{from{opacity:0;transform:translate3d(0,-200px,0)}}
@keyframes tv-in-fade{from{opacity:0;transform:translate3d(0,24px,0)}}
/* Ghost episodes while another season loads. */
.tv-ep.ghost .tv-ep-still,.tv-ep-info.ghost i{background:linear-gradient(100deg,#ffffff14 30%,#ffffff2e 50%,#ffffff14 70%) 0 0/300% 100%;animation:tv-ghost 1.3s linear infinite}
.tv-ep.ghost .tv-ep-still{border-radius:8px}
.tv-ep-info.ghost{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.tv-ep-info.ghost i{display:block;height:24px;border-radius:6px;width:520px}
.tv-ep-info.ghost i:nth-child(2){width:880px;height:20px}.tv-ep-info.ghost i:nth-child(3){width:640px;height:20px}
.tv-panel-body.switching .tv-group-tab:not(.active){opacity:.55}
@keyframes tv-ghost{from{background-position:100% 0}to{background-position:-200% 0}}
/* The website's page loader never shows over the TV interface (it has its own). */
.tv-ui-on #page-loader,.tv #page-loader{display:none!important}
/* Title page: the season / related-series dropdown above the episode ranges. */
.tv-season-row{position:relative;z-index:5;margin:0 0 14px 14px}
.tv-season-select{display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 26px;border-radius:10px;background:#ffffff26;border:2px solid #ffffff40;font-size:26px;font-weight:700;color:#fff;max-width:900px}
.tv-season-select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-season-select .icon{width:28px;height:28px;flex:none}
.tv-season-select.focus{background:#fff;color:#000;border-color:#fff}
.tv-desk .tv-season-select,.tv-desk .tv-season-item{cursor:pointer}
.tv-desk .tv-season-select:hover:not(.focus){background:#ffffff40}
.tv-season-list{position:absolute;left:0;top:calc(100% + 10px);min-width:420px;max-width:900px;max-height:520px;overflow:auto;padding:12px;border-radius:12px;background:#141414f7;border:1px solid #ffffff26;box-shadow:0 24px 60px #000e;animation:settings-in .16s ease-out}
.tv-season-list[hidden]{display:none}
.tv-season-item{padding:14px 20px;border-radius:8px;font-size:24px;font-weight:600;color:#bdbdbd;white-space:nowrap}
.tv-season-item.active{color:#fff;font-weight:800}
.tv-season-item.active::after{content:"  ✓";color:var(--red)}
.tv-season-item.focus{background:#fff;color:#000}
.tv-desk .tv-season-item:hover:not(.focus){background:#ffffff1f;color:#fff}
.tv-season-row+.tv-groups{margin-top:0}
/* Computers: arrows at the ends of the episode row. */
.tv-desk .tv-episodes{position:relative;left:auto;top:auto;right:auto}
.tv-ep-nav{position:absolute;top:14px;bottom:14px;z-index:4;width:70px;display:grid;place-items:center;font-size:64px;font-weight:300;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
/* ‹ starts at the screen's left edge (the row starts 66px in), covering the card that peeks in there. */
.tv-ep-nav.prev{left:-66px;width:150px;background:linear-gradient(90deg,#000 0,#000e 45%,#0000)}
.tv-ep-nav.next{right:0;background:linear-gradient(270deg,#000c,#0000)}
.tv-episodes:hover .tv-ep-nav{opacity:.85}
.tv-ep-nav.prev{opacity:.85}
.tv-ep-nav.off{opacity:0!important;pointer-events:none}
.tv-ep-nav:hover{opacity:1!important}
/* Endless scrolling: the end of the grid is an invisible marker, and ghost cards hold the next titles' places. */
#more{display:block;width:100%;height:1px;min-width:0;margin:0;padding:0;border:0;background:none;opacity:0;pointer-events:none}
#more[hidden]{display:none}
.poster-wrap.ghost{pointer-events:none}
.poster-wrap.ghost .ghost-art{display:block;aspect-ratio:2/3;border-radius:6px}
.poster-wrap.ghost i{display:block;height:13px;border-radius:4px;margin-top:10px;width:80%}
.poster-wrap.ghost i+i{width:50%;height:10px;margin-top:7px}
.poster-wrap.ghost .ghost-art,.poster-wrap.ghost i{background:linear-gradient(100deg,#ffffff0d 30%,#ffffff21 50%,#ffffff0d 70%) 0 0/300% 100%;animation:tv-ghost 1.3s linear infinite}
/* Skip intro / recap / credits: see-through until pointed at, then solid. */
.skip-button{background:#1414148c;border:2px solid #ffffffa6;color:#fff;backdrop-filter:blur(6px);transition:background .15s,color .15s,border-color .15s,opacity .15s}
.skip-button:hover,.skip-button:focus-visible,.skip-button.focus{background:#f3f3f3f2;color:#141414;border-color:#f3f3f3}
:is(.tv,.tv-desk,.tv-phone) #video-box .skip-button{background:#1c1c1c80;color:#fff;border:2px solid #ffffffb3}
:is(.tv,.tv-desk,.tv-phone) #video-box .skip-button:hover,:is(.tv,.tv-desk,.tv-phone) #video-box .skip-button.focus{background:#fffffff0;color:#000;border-color:#fff}
/* Into and out of the player. */
@keyframes player-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes player-out{to{opacity:0;transform:scale(.97)}}
@keyframes loader-drift{from{transform:scale(1.1)}to{transform:scale(1)}}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.tv-player-in{animation:player-in .45s cubic-bezier(.2,.7,.2,1)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing.tv-player-out{animation:player-out .32s ease-in forwards;pointer-events:none}
.tvp-loader img{animation:loader-drift 9s ease-out forwards}
.tvp-loader{transition:opacity .45s}
.tvp-loader.fading{opacity:0}
/* The switch to the next episode: the picture sinks and fades under an "Up next" card, which gives way to the new episode. */
:is(.tv,.tv-desk,.tv-phone) #video-box #video{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-switching #video{opacity:0;transform:scale(.96)}
.tvp-loader.entering{opacity:0}
.tvp-loader-copy em,.tvp-loader-line{display:none}
.tvp-loader.next .tvp-spinner{display:none}
.tvp-loader.next .tvp-loader-copy em{display:block;font-style:normal;font-size:20px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--red);animation:next-rise .7s .1s cubic-bezier(.2,.7,.2,1) both}
.tvp-loader.next .tvp-loader-copy b{animation:next-rise .7s .2s cubic-bezier(.2,.7,.2,1) both}
.tvp-loader.next .tvp-loader-copy span{animation:next-rise .7s .3s cubic-bezier(.2,.7,.2,1) both}
.tvp-loader.next .tvp-loader-line{display:block;position:relative;width:260px;height:3px;border-radius:2px;background:#ffffff26;overflow:hidden;margin-top:10px;animation:next-rise .7s .4s cubic-bezier(.2,.7,.2,1) both}
.tvp-loader.next .tvp-loader-line::after{content:"";position:absolute;inset:0;width:40%;background:var(--red);border-radius:2px;animation:next-line 1.4s ease-in-out infinite}
.tvp-loader.next img{opacity:.6;animation:loader-drift 12s ease-out forwards}
@keyframes next-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes next-line{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* Subtitles, drawn by Nightjar: centred, anchored by their bottom edge, styled as chosen in the gear menu. */
#subtitles{position:absolute;left:50%;bottom:6%;z-index:5;transform:translateX(-50%);width:max-content;text-align:center;pointer-events:none;font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-weight:600;line-height:1.3;color:#fff;transition:bottom .2s ease}
#subtitles[hidden]{display:none}
#subtitles .sub-line span{white-space:pre-line}
#subtitles[data-color="yellow"]{color:#ffd60a}
#subtitles[data-color="cyan"]{color:#5ee7ff}
#subtitles[data-back="shadow"] span{text-shadow:0 0 6px #000,0 2px 4px #000,0 0 2px #000}
#subtitles[data-back="outline"] span{text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 6px #000}
#subtitles[data-back="box"] span{background:#000000bf;padding:.06em .35em;border-radius:.15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Account: the Android TV app download. */
.account-apps{margin:22px 0 6px;padding-top:18px;border-top:1px solid #ffffff1f}
.account-apps h2{font-size:18px;margin:0 0 6px}
.account-download{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-top:10px;width:auto;padding:12px 22px}
/* The full-screen player's skip button and Next Episode: see-through until highlighted (moved to with the remote, or
   pointed at), then solid. */
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button{transition:bottom .2s ease,background .15s,color .15s}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .skip-button:not(.focus):not(:hover){background:#1c1c1c66;color:#fff;border-color:#ffffff99}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-playing .next-button.focus{box-shadow:0 0 0 4px #fff;transform:scale(1.04)}

/* The end of a film: the credits shrink into the corner over a page of films like it, with the chosen one's trailer behind. */
.tvp-end{position:absolute;inset:0;pointer-events:auto;background:#000;opacity:0;transition:opacity .9s ease;overflow:hidden;font-family:inherit}
.tvp-end[hidden]{display:none}.tvp-end.on{opacity:1}
.tvp-end-bg{position:absolute;inset:0}.tvp-end-bg img,.tvp-end-trailer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tvp-end-bg img{opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 9s ease-out}.tvp-end-bg img.in{opacity:1;transform:scale(1)}
.tvp-end-trailer{opacity:0;transition:opacity 1.2s ease;pointer-events:none}.tvp-end.trailer-on .tvp-end-trailer{opacity:1}
iframe.tvp-end-trailer{width:140%;height:140%;left:-20%;top:-20%}
/* Trailers are mostly widescreen films inside a 16:9 frame: zoomed a little, their black bars fall outside the screen. */
video.tvp-end-trailer{transform:scale(1.34)}
.tvp-end-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000000f0 0%,#000000b3 30%,#0000 62%),linear-gradient(0deg,#000 0%,#000000cc 22%,#0000 48%)}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-ending #video{position:absolute;inset:0;width:100%;height:100%;z-index:7;transform-origin:0 0;transform:translate(76px,56px) scale(.24);border-radius:22px;box-shadow:0 30px 90px #000c;background:#000}
:is(.tv,.tv-desk,.tv-phone) #video-box.tv-ending.tv-ending-gone #video{opacity:0}
#video-box.tv-ending #subtitles,#video-box.tv-ending .skip-button,#video-box.tv-ending #up-next{display:none!important}
.tvp-end-credits{padding:14px 26px;font-size:22px;font-weight:600;color:#fff;background:#6d6d6eb3;border:0;border-radius:6px;cursor:pointer;transition:transform .15s,background .15s}.tvp-end-credits.focus,.tvp-end-credits:hover{background:#fff;color:#000;border-color:#fff}
.tvp-end-info{position:absolute;left:76px;bottom:300px;width:760px;display:flex;flex-direction:column;gap:12px}
.tvp-end-info>*{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.tvp-end.on .tvp-end-info>*{opacity:1;transform:none}.tvp-end.on .tvp-end-info>:nth-child(2){transition-delay:.1s}.tvp-end.on .tvp-end-info>:nth-child(3){transition-delay:.2s}.tvp-end.on .tvp-end-info>:nth-child(4){transition-delay:.3s}
.tvp-end-logo{height:100px;display:flex;align-items:flex-end}.tvp-end-logo img{max-height:100px;max-width:480px;object-fit:contain;object-position:left bottom}.tvp-end-logo b{font-size:56px;font-weight:800;line-height:1.05;text-shadow:0 2px 12px #000a}
.tvp-end-meta{font-size:22px;color:#d6d6d6;font-weight:500}
.tvp-end-plot{margin:0;font-size:22px;line-height:1.45;color:#e8e8e8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px #000a}
.tvp-end-actions{display:flex;align-items:center;gap:16px;margin-top:6px}
.tvp-end-play{position:relative;overflow:hidden;display:flex;align-items:center;padding:14px 40px;font-size:24px;font-weight:700;color:#000;background:#ffffff8c;border:0;border-radius:6px;cursor:pointer;transition:transform .15s,background .15s}
.tvp-end-play i{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffffff;transition:width 1s linear}.tvp-end-play span{position:relative}
.tvp-end-play.focus,.tvp-end-play:hover{transform:scale(1.06)}.tvp-end-play.stopped{background:#fff}.tvp-end-play.stopped i{display:none}
.tvp-end-count{margin-left:8px;font-size:22px;color:#e5e5e5;font-weight:600}
.tvp-end-row{position:absolute;left:76px;right:0;bottom:40px;opacity:0;transform:translateY(40px);transition:opacity .8s .4s cubic-bezier(.2,.7,.2,1),transform .8s .4s cubic-bezier(.2,.7,.2,1)}
.tvp-end.on .tvp-end-row{opacity:1;transform:none}
.tvp-end-row>b{display:block;font-size:21px;font-weight:700;margin-bottom:10px}
.tvp-end-cards{display:flex;gap:16px;transition:transform .3s ease-out}
.tvp-end-card{flex:0 0 256px;cursor:pointer;transition:transform .2s}
.tvp-end-still{position:relative;height:144px;border-radius:8px;overflow:hidden;background:#222;outline:3px solid transparent;transition:outline-color .15s}
.tvp-end-still img{width:100%;height:100%;object-fit:cover}
.tvp-end-card>b{display:block;font-size:17px;font-weight:600;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvp-end-card>span{display:block;font-size:15px;color:#aaa;margin-top:2px}
.tvp-end-card.picked .tvp-end-still{outline-color:#ffffff80}
.tvp-end-card.focus{transform:scale(1.05)}.tvp-end-card.focus .tvp-end-still,.tvp-end-card:hover .tvp-end-still{outline:4px solid #fff}
/* Administration follows the app's dark surfaces, restrained red accents and wide spacing. */
.gate:has(>.admin){justify-content:flex-start;background:#141414;padding:116px max(24px,var(--pad)) 60px}
.admin{position:relative;width:min(1080px,100%);margin:0 auto;color:#eee;align-self:center}
.admin-header{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:30px}
.admin-kicker{margin:0 0 14px;font-size:10px;letter-spacing:2.5px;color:#e78c91;font-weight:700}
.admin h1{font-size:clamp(28px,3.1vw,42px);font-weight:650;letter-spacing:-1.2px;margin:0 0 12px}
.admin-intro{color:#939393;font-size:14px;margin:0;line-height:1.6}
.admin-button{background:#262626;border:1px solid #3d3d3d;border-radius:4px;color:#ddd;font-size:12px;font-weight:500;padding:8px 13px;white-space:nowrap}
.admin-button:hover{background:#383838;border-color:#666;color:white}.admin-back{background:transparent;padding:10px 14px}.admin-button.danger{color:#e9989c;background:transparent;border-color:#593135}
.admin-feedback:empty{display:none}.admin-feedback{font-size:13px;padding:12px 15px;background:#202020;border-radius:4px;line-height:1.5;margin:0 0 20px}
.admin-tabs{display:flex;gap:28px;border-bottom:1px solid #333;margin-bottom:30px}.admin-tabs>button{position:relative;background:none;border:0;border-radius:0;padding:13px 0 17px;color:#999;font-size:14px;display:flex;align-items:center;gap:9px}
.admin-tabs>button.selected{color:#fff}.admin-tabs>button.selected::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:var(--red)}
.admin-tab-count{font-size:10px;background:#2c2c2c;border-radius:4px;padding:3px 6px;color:#aaa}
.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.admin h2{font-size:19px;font-weight:600;margin:0 0 7px}.admin-section-head p{font-size:12px;color:#8f8f8f;margin:0;line-height:1.6}
.admin-search{width:260px;padding:11px 13px;background:#202020;border:1px solid #3b3b3b;border-radius:4px;color:white;font-size:12px}
.admin-accounts{display:flex;flex-direction:column;gap:10px}.admin-account{background:#1b1b1b;border:1px solid #303030;border-radius:6px;overflow:hidden}.admin-account[open]{border-color:#464646}
.admin-account-head{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;padding:20px}.admin-account-head::-webkit-details-marker{display:none}.admin-account-head:hover{background:#212121}
.admin-avatar{display:grid;place-items:center;width:39px;height:39px;flex-shrink:0;background:#362629;color:#edacaf;border-radius:5px;font-size:17px;font-weight:650}
.admin-account-title{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}.admin-account-title>b{font-size:14px;font-weight:550;overflow-wrap:anywhere}.admin-account-title>span{font-size:11px;color:#929292}
.admin-badge{font-size:10px;background:#2d2d2d;color:#b9b9b9;border-radius:4px;padding:4px 7px;white-space:nowrap}.admin-badge.current{color:#cce5d6;background:#23372a}.admin-badge.pending{color:#d6b98e;background:#322c23}
.admin-chevron{font-size:20px;color:#888;margin-left:8px}.admin-account[open]>.admin-account-head .admin-chevron{transform:rotate(180deg)}
.admin-account-body{padding:0 22px 20px;border-top:1px solid #303030}.admin-profile-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:20px 0 24px}.admin-label{font-size:11px;color:#999;margin-right:8px}.admin-chip{font-size:11px;color:#bcbcbc;background:#292929;padding:5px 9px;border-radius:4px}
.admin h3{font-size:14px;font-weight:600;margin:18px 0 8px}.admin-help{color:#989898;font-size:12px;line-height:1.65;margin:8px 0 16px}
.admin-session{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid #2c2c2c}.admin-session-copy{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.admin-session-copy b{font-weight:500;font-size:13px;overflow-wrap:anywhere}.admin-session-copy span{font-size:11px;color:#929292}.admin-session-icon{font-size:23px;color:#777;width:29px;text-align:center}
.admin-legacy{margin-top:18px;border-left:2px solid #48413a;padding-left:15px}.admin-legacy>summary,.admin-maintenance>summary{font-size:12px;color:#bbb;cursor:pointer;padding:8px 0}.admin-legacy>.admin-session:last-child{border:0}
.admin-empty{color:#888;font-size:13px;padding:15px 0}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-account-foot{display:flex;flex-direction:column;gap:0;margin-top:16px}.admin-account-foot>.admin-help{font-size:11px;margin-bottom:14px}
.admin-service-list{border:1px solid #303030;border-radius:5px;background:#1b1b1b;padding:0 20px}.admin-service-row{display:flex;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid #2b2b2b;font-size:13px}.admin-service-row:last-child{border:0}.admin-service-row span{color:#999}.admin-service-row b{font-weight:500;text-align:right}
.admin-maintenance{margin-top:25px;padding:12px 18px;border:1px solid #303030;border-radius:5px}.admin-maintenance .admin-help{overflow-wrap:anywhere}.admin-maintenance .admin-actions{margin:16px 0 6px}
.admin .account-password{max-width:700px;margin:0}.admin .account-password h2{font-size:19px;margin:0}.admin .account-password>input{padding:13px;background:#222;border:1px solid #444;border-radius:4px;color:#eee}.admin .account-password>.gate-primary{align-self:flex-start;width:auto;font-size:13px;padding:11px 22px}.admin .invite-list{margin-top:20px}.admin .invite-row{background:#1b1b1b;padding:16px;border-radius:4px;font-size:13px}
@media(max-width:680px){.gate:has(>.admin){padding:95px 16px 30px}.admin-header{align-items:flex-start;gap:15px}.admin-back{font-size:0;padding:9px}.admin-back::before{content:'← Back';font-size:12px}.admin-section-head{align-items:stretch;flex-direction:column}.admin-search{width:100%}.admin-tabs{gap:22px}.admin-account-head{padding:15px 12px;gap:9px;flex-wrap:wrap}.admin-account-title{min-width:calc(100% - 80px)}.admin-account-head>.admin-badge{margin-left:0}.admin-chevron{margin-left:auto}.admin-account-body{padding:0 14px 18px}.admin-session{gap:9px;flex-wrap:wrap}.admin-session-copy{min-width:calc(100% - 45px)}.admin-session>.admin-badge,.admin-session>.admin-button{margin-left:38px}.admin-actions{gap:8px}.admin-service-row{font-size:12px}}
/* The end page's row: a window over the cards, with arrows at its ends for the mouse. */
.tvp-end-window{overflow:hidden;margin-left:-12px;padding:8px 12px 4px;margin-right:0}
.tvp-end-arrow{position:absolute;top:49px;height:144px;width:76px;z-index:3;display:grid;place-items:center;border:0;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s}
.tvp-end-arrow[hidden]{display:none}
.tvp-end-arrow::before{content:"";width:22px;height:22px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(135deg);margin-left:8px}
.tvp-end-arrow.right::before{transform:rotate(-45deg);margin:0 8px 0 0}
.tvp-end-arrow.left{left:-76px;background:linear-gradient(90deg,#000d,#0000)}.tvp-end-arrow.right{right:0;background:linear-gradient(270deg,#000d,#0000)}
.tvp-end-row:hover .tvp-end-arrow{opacity:1}.tvp-end-arrow:hover{background-color:#0006}
/* ---------- Phones, as in Netflix's app: a slim top bar, a rounded billboard card, poster-only rows, pill filters,
   a title page led by its artwork, and a tab bar with icons. ---------- */
nav .icon{display:none}
@media (max-width:760px){
 body{background:#0b0b0b}
 /* (No backdrop filter here: it would make the bar the frame of the fixed tab bar inside it.) */
 .topbar{height:54px;background:#0b0b0bf2;box-shadow:none}
 .brand{font-size:24px}
 /* Search: an icon that opens into a full-width field */
 #search{position:relative;height:36px;border:0;background:none;border-radius:18px;transition:background .2s}
 #search #query{width:0;padding:0;opacity:0;transition:width .25s ease,opacity .2s}
 #search button{width:36px;height:36px;font-size:22px;padding:0;color:#fff}
 #search.open{position:absolute;left:12px;right:12px;top:calc(9px + env(safe-area-inset-top));z-index:5;background:#2a2a2a;padding-left:6px}
 #search.open #query{width:100%;opacity:1;padding:8px 6px 8px 10px;font-size:15px;background:none;border:0}
 .profile-button .avatar{width:30px;height:30px;border-radius:5px}
 /* Tab bar with icons */
 nav{height:calc(60px + env(safe-area-inset-bottom));background:#0b0b0bf0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #ffffff14}
 nav button{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:500;color:#9a9a9a;box-shadow:none!important}
 nav .icon{display:block;width:23px;height:23px;stroke-width:1.8}
 nav button.selected{color:#fff;font-weight:600}nav button.selected .icon{stroke-width:2.3}
 main{bottom:calc(60px + env(safe-area-inset-bottom))}
 /* Home: the billboard is a rounded card */
 .hero{height:auto;min-height:0;max-height:none;aspect-ratio:auto;margin:66px 16px 26px;border-radius:14px;overflow:hidden;height:min(128vw,560px);box-shadow:0 18px 50px #0009,0 0 0 1px #ffffff14}
 .hero>img{object-position:center 25%}
 .hero-shade{background:linear-gradient(0deg,#000000f2 0%,#000000b3 28%,#0000 58%)}
 .hero-copy{bottom:18px;left:16px;right:16px}
 .hero-copy>.eyebrow{font-size:9px;letter-spacing:2.5px;opacity:.9}
 .hero .title-logo{max-width:64vw;max-height:84px;margin:8px auto 6px}
 .hero h1{font-size:28px;margin:8px 0 4px}
 .hero-meta{font-size:12px;color:#ddd;margin:6px 0 4px}
 .hero-copy p{display:none}
 .hero-actions{gap:10px;margin-top:12px}
 .hero-actions button{max-width:none;flex:1;height:42px;padding:0 12px;font-size:15px;font-weight:700;border-radius:6px}
 #hero-info{background:#ffffff33;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
 .hero-sound{top:12px;right:12px;width:34px;height:34px}
 .home-rows{margin-top:0}
 /* Rows: posters only, a little smaller */
 .shelf{margin-bottom:20px}
 .shelf-heading{padding:0 16px;margin-bottom:8px}
 .shelf-heading h2{font-size:17px;font-weight:700;letter-spacing:-.2px}
 .shelf-tools{display:none}
 .rail{gap:7px;padding:0 16px 4px;scroll-padding:0 16px}
 .rail .poster-wrap{flex:0 0 28vw;max-width:130px}
 .rail .poster-card h3,.rail .poster-card p,#grid .poster-card h3,#grid .poster-card p{display:none}
 .poster-card .card-art,.poster-card img{border-radius:6px}
 /* Libraries: a large title and the filters as a swipeable row of pills */
 .page-section{padding:68px 16px 24px}
 #library-source{display:none}
 .library-title-row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
 .library-title-row::-webkit-scrollbar{display:none}
 .section-heading h1,#library-title{font-size:24px;font-weight:800;white-space:nowrap;margin-right:6px}
 .genre-select{flex:none;height:34px;padding:0 30px 0 14px;font-size:13px;font-weight:600;color:#fff;background-color:transparent;border:1px solid #ffffff59;border-radius:17px;-webkit-appearance:none;appearance:none}
 .genre-select.chosen{background-color:#fff;color:#000;border-color:#fff}
 #count{display:none}
 #grid{grid-template-columns:repeat(3,1fr);gap:8px 7px;margin-top:16px}
 /* Title page: the artwork leads, a round back button sits on it */
 .back-button{top:calc(66px + env(safe-area-inset-top));left:12px;width:38px;height:38px;padding:0;border-radius:50%;font-size:0;background:#000000a6;border:0;display:grid;place-items:center}
 .back-button::after{content:"←";font-size:20px;color:#fff;line-height:1}
 .detail-heading{padding:56vw 0 16px}
 #detail-backdrop,.detail-heading .trailer{height:62vw;bottom:auto}
 .detail-shade{background:linear-gradient(0deg,#0b0b0b 0%,#0b0b0b calc(100% - 64vw),#0b0b0b00 calc(100% - 38vw))}
 .detail-copy #detail-source{display:none}
 .detail-copy .title-logo{max-height:70px;max-width:64vw}
 .detail-copy h1{font-size:24px}
 .facts{font-size:12px;color:#bbb}
 .detail-copy p{font-size:14px;line-height:1.45;color:#e5e5e5}
 .detail-actions{gap:8px;flex-direction:column}
 .detail-actions button{width:100%;height:44px;font-size:15px;font-weight:700;border-radius:6px;flex:none}
 .detail-actions #save{background:#2a2a2a;border:0}
 #trailer-sound{top:calc(66px + env(safe-area-inset-top));right:12px;width:38px;height:38px}
 .info-grid{margin:4px 0 0;padding:14px 16px;border:0;background:none;font-size:13px}
 /* Under the title: the player and the episode list */
 #playback .section-heading{display:none}
 .player-actions{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:12px 0 18px;scrollbar-width:none}
 .player-actions button{flex:none;height:34px;padding:0 14px;font-size:13px;border-radius:17px;background:#2a2a2a;border:0}
 .player-actions #play{background:#fff;color:#000}
 .episodes-heading{border-top:3px solid var(--red);padding-top:12px;margin-top:6px}
 .episodes-heading h2{font-size:17px;text-transform:uppercase;letter-spacing:.5px}
 #seasons,#episode-range{height:36px;border-radius:6px;background:#2a2a2a;border:0;font-size:14px;font-weight:600;padding:0 12px}
 .episode-row{border:0;padding:10px 0}
 .ep-thumb,.episode-row img{border-radius:6px}
}
@media (max-width:760px){
 /* The billboard's trailer fills the card (cropped at the sides, as the card is taller than the trailer). */
 .hero .trailer{position:absolute;inset:0;overflow:hidden}
 .hero .trailer video{width:100%;height:100%;object-fit:cover;transform:scale(1.34)}
 .hero .trailer iframe{position:absolute;top:0;left:50%;height:100%;width:auto;aspect-ratio:16/9;transform:translateX(-50%) scale(1.02);border:0}
 /* Playing full screen in landscape: the picture fills the screen. */
 #video-box:fullscreen{width:100vw;height:100vh;margin:0;border-radius:0;background:#000}
 #video-box:fullscreen video{width:100%;height:100%;object-fit:contain}
}
/* ---------- Admin dashboard: summary cards, a live strip, accounts with their profiles and device cards ---------- */
.gate:has(>.admin){background:radial-gradient(1200px 500px at 10% -10%,#e5091422,transparent 60%),#0e0e0e;padding:96px max(24px,var(--pad)) 60px}
.admin{width:min(1180px,100%)}
.admin-header{margin-bottom:26px}.admin-kicker{color:var(--red);letter-spacing:3px}
.admin h1{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-1.5px}
.admin-back{border-radius:999px;border-color:#ffffff2e;padding:10px 18px}
.admin-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.admin-stat{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;background:linear-gradient(180deg,#1d1d1d,#161616);border:1px solid #ffffff12;overflow:hidden}
.admin-stat-label{font-size:12px;color:#a3a3a3;font-weight:600;letter-spacing:.3px}
.admin-stat b{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.05}
.admin-stat-note{font-size:11px;color:#7c7c7c}
.admin-stat.live{background:linear-gradient(160deg,#16301f,#141a16 70%);border-color:#2f6b4580}
.admin-stat.live .admin-stat-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#46d369;margin-right:8px;box-shadow:0 0 0 0 #46d36999;animation:admin-pulse 1.8s infinite}
@keyframes admin-pulse{70%{box-shadow:0 0 0 8px #46d36900}100%{box-shadow:0 0 0 0 #46d36900}}
.admin-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px;padding:12px 14px;border-radius:12px;background:#151515;border:1px solid #ffffff10}
.admin-live-title{font-size:11px;font-weight:700;letter-spacing:2px;color:#46d369;text-transform:uppercase;margin-right:6px}
.admin-live-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;background:#212121;font-size:12px;color:#bbb}
.admin-live-chip .icon{width:15px;height:15px;stroke:#46d369;fill:none;stroke-width:2}.admin-live-chip b{color:#fff;font-weight:600}
.admin-tabs{gap:6px;border:0;margin-bottom:22px;background:#161616;padding:5px;border-radius:12px;width:max-content;max-width:100%}
.admin-tabs>button{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600}
.admin-tabs>button.selected{background:#fff;color:#000}.admin-tabs>button.selected::after{display:none}.admin-tabs>button.selected .admin-tab-count{background:#0000001a;color:#000}
.admin-search{border-radius:999px;padding:10px 16px;background:#1a1a1a;border-color:#ffffff1a;width:280px}
.admin-accounts{gap:12px}
.admin-account{border-radius:14px;background:#161616;border:1px solid #ffffff10;transition:border-color .2s}
.admin-account[open]{border-color:#ffffff26;background:#181818}
.admin-account-head{padding:16px 18px;gap:14px}.admin-account-head:hover{background:#ffffff06}
.admin-avatars{display:flex;flex:none}.admin-avatars .avatar{width:34px;height:34px;border-radius:7px;border:2px solid #161616;margin-left:-10px}.admin-avatars .avatar:first-child{margin-left:0}
.admin-account-head.active .admin-account-title>b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#46d369;margin-left:9px;vertical-align:middle}
.admin-account-title>span{color:#8f8f8f}
.admin-badge{border-radius:999px;padding:4px 10px;font-weight:600}
.admin-account-body{padding:4px 18px 18px}
.admin-sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:8px 0 6px}
.admin-session{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:start;padding:14px;border-radius:12px;background:#202020;border:1px solid #ffffff0d}
.admin-session.active{border-color:#2f6b45;background:linear-gradient(160deg,#1a2a20,#1d1f1d)}
.admin-session-icon{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#2b2b2b;font-size:0}
.admin-session-icon .icon{width:21px;height:21px;fill:none;stroke:#ddd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.admin-session.active .admin-session-icon{background:#24442f}.admin-session.active .admin-session-icon .icon{stroke:#7be39a}
.admin-session-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.admin-session-copy b{font-size:14px;font-weight:600}
.admin-status{font-size:12px;color:#9a9a9a}.admin-status.active{color:#46d369;font-weight:600}
.admin-session-since{font-size:11px;color:#707070}
.admin-session>.admin-button,.admin-session>.admin-badge{grid-column:2;justify-self:start;margin-top:6px}
.admin-button{border-radius:999px;padding:7px 14px}
@media (max-width:900px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-stat.live{grid-column:1/-1}.admin-search{width:100%}}
@media (max-width:600px){.gate:has(>.admin){padding:76px 14px 40px}.admin-header{align-items:flex-start}.admin h1{font-size:28px}.admin-intro{font-size:13px}
 .admin-stats{gap:10px}.admin-stat{padding:12px 14px;border-radius:12px}.admin-stat b{font-size:24px}.admin-stat-label{font-size:11px}.admin-stat-note{display:none}
 .admin-live{padding:10px}.admin-sessions{grid-template-columns:1fr}.admin-account-head{padding:12px}.admin-account-body{padding:4px 12px 14px}}

/* Phones: the player is the computer's, full screen (turned sideways while the phone is held upright); the title page
   loses its inline video box and its row of player buttons. */
#mark-intro{display:none!important}
.tv-phone #video-box:not(.tv-playing),.tv-phone .player-actions,.tv-phone #playback>.section-heading{display:none!important}
.tv-phone #video-box.tv-playing{position:fixed;left:0;top:0;right:auto;bottom:auto;z-index:90;margin:0;border:0;border-radius:0;max-height:none;aspect-ratio:auto;background:#000}
.tv-phone #video-box.tv-playing video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tv-phone.tv-player-open body{overflow:hidden}