/* Shared, stable geometry. Transitions move composited surfaces only. */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.featured-hero { isolation:isolate; position:relative; height:540px; min-height:480px; overflow:hidden; border:1px solid var(--line); border-radius:24px; margin:20px 0 34px; background:#08101f; }
.featured-hero .cinema-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.76; animation:none; transform:scale(1.02); }
.feature-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#050a15f7 5%,#050a15bb 43%,#050a1520 80%),linear-gradient(0deg,#050a15ef,transparent 70%); pointer-events:none; }
.featured-hero .cinema-hero-copy { position:absolute; z-index:3; inset:auto auto 82px 44px; padding:0; width:min(63%,620px); }
.featured-hero h1 { font-size:clamp(32px,3.5vw,56px); line-height:1.07; letter-spacing:-1.7px; margin:20px 0 17px; }
.original-title img { display:block; object-fit:contain; object-position:left center; width:auto; max-width:100%; height:auto; max-height:145px; filter:none!important; transform:none!important; }
.featured-hero .original-title img { max-width:440px; max-height:145px; width:100%; }
.feature-meta { display:flex; gap:10px 18px; flex-wrap:wrap; color:#a7bbd7; font-size:11px; }
.feature-description { color:#b4c3d8; font-size:12px; line-height:1.8; max-width:520px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:16px 0 21px; }
.feature-topline { position:absolute; left:28px; right:28px; top:22px; display:flex; justify-content:space-between; gap:12px; z-index:4; color:#aebed5; font-size:10px; }
.feature-topline a { color:#c8ddfc; }
.feature-trailer-note { font-size:10px; color:#93a7c3; margin:13px 0 0; }
.feature-sound { position:absolute; right:28px; bottom:100px; z-index:6; width:38px; height:38px; display:grid; place-items:center; border:1px solid #9ec8ff60; border-radius:50%; background:#081326b3; color:#d9e9ff; }
.feature-sound[hidden] { display:none; }
.feature-sound svg { width:17px; height:17px; }
.featured-hero .cinema-feature-navigation { z-index:5; top:auto; right:27px; bottom:27px; }
.feature-dots { display:flex; position:absolute; left:43px; bottom:35px; gap:7px; z-index:5; }
.feature-dots button { display:grid; place-items:center; height:24px; width:25px; background:none; border:0; padding:0; cursor:pointer; }
.feature-dots i { display:block; width:19px; height:3px; border-radius:5px; background:#ffffff40; transition:background .25s,width .25s; }
.feature-dots [aria-current=true] i { background:#76b7ff; width:25px; }
.feature-wait { position:relative; z-index:2; padding:90px 44px; max-width:600px; }
.feature-wait p { font-size:13px; color:var(--muted); line-height:1.7; }
.featured-hero .hero-trailer-layer { z-index:0; inset:0!important; width:100%!important; height:100%!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.featured-hero .hero-trailer-layer .trailer-stage { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.featured-hero .hero-trailer-layer .er-trailer-video { object-fit:cover; }
.featured-hero.trailer-active { min-height:480px; }
.featured-hero.trailer-active .cinema-hero-copy { position:absolute; inset:auto auto 82px 44px; width:min(63%,620px); max-width:none; padding:0; }
.featured-hero.trailer-active h1 { position:static; margin:20px 0 17px; font-size:clamp(32px,3.5vw,56px); letter-spacing:-1.7px; }
.featured-hero.trailer-active .cinema-hero-copy>.n-eyebrow { position:static; }
.featured-hero:before,.featured-hero:after { display:none; }
.featured-hero.trailer-active .cinema-backdrop { opacity:0; }
.featured-hero .trailer-control-bar { z-index:5; }
.trailer-external .trailer-stage { background:#08101f; }
.trailer-external .trailer-poster { opacity:.72; animation:none; transform:none; }
.trailer-external .trailer-state { font-size:10px; line-height:1.5; white-space:normal; }
.trailer-external .trailer-source-link { font-size:10px; }
.trailer-external .trailer-control-bar { min-height:58px; }
.shared-story .story-copy .original-title { margin:0 0 18px; }
.shared-story .story-copy .original-title img { max-height:145px; max-width:min(440px,100%); }
.shared-story .story-layout { grid-template-columns:220px minmax(0,1fr); }
.shared-story .story-copy { min-width:0; }
.shared-story .story-actions { display:flex; flex-wrap:wrap; gap:10px; }
.shared-story .story-body { grid-template-columns:minmax(0,1fr) 320px; }
.shared-guide { margin-top:38px; }
.shared-guide .screen-episode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body #app .watch-layout,body #app .screen-watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
body #app .watch-layout.theater,body #app .screen-watch-layout.theater { grid-template-columns:minmax(0,1fr); }
.watch-layout.theater>.watch-sidebar { display:none; }
.player-intro-title img { object-fit:contain; filter:none!important; }
.watch-main,.watch-sidebar { min-width:0; }
.watch-main .video-shell { width:100%; margin:0; aspect-ratio:16/9; }
.watch-main .episode-summary { border:0; border-bottom:1px solid var(--line); background:none; padding:20px 0 16px; }
.watch-main .summary-top h1 { font-size:clamp(18px,1.5vw,24px); line-height:1.4; margin:0; }
.watch-main .summary-top { align-items:start; gap:18px; }
.watch-main .summary-meta { margin-top:12px; gap:12px; flex-wrap:wrap; font-size:10px; }
.watch-main .episode-summary>p { margin:12px 0 0; }
.watch-main .watch-options { padding:12px 0; gap:12px; font-size:10px; flex-wrap:wrap; }
.watch-main .watch-options button { font-size:10px; background:none; color:var(--muted); border:0; padding:4px; display:inline-flex; align-items:center; gap:5px; }
.watch-main .source-station { padding:16px 0 20px; margin:0; border:0; background:none; }
.watch-main .source-station>.n-eyebrow { display:none; }
.watch-story { padding:20px 0; }
.watch-story h2 { font-size:22px; }
.watch-story p { color:var(--muted); font-size:12px; line-height:1.8; }
.watch-sidebar .episode-scroll { max-height:620px; overflow:auto; }
.watch-sidebar .episode-row { text-decoration:none; }
.watch-sidebar .unreleased { opacity:.5; pointer-events:none; }
.watch-season-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.watch-season-label select { max-width:65px; padding:7px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--fg); }
.movie-chapter>img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.movie-chapter>h3,.movie-chapter>p { margin:15px; }
.movie-chapter>p { color:var(--muted); font-size:11px; }
.compact-station .station-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 10px; }
.compact-station .station-heading h3 { font-size:13px; margin:0; font-weight:500; }
.compact-station .station-heading h3 small { color:var(--muted); margin-left:5px; font-size:10px; }
.compact-station .station-heading>div { display:flex; gap:8px; }
.compact-station .station-heading button { display:inline-flex; align-items:center; gap:5px; font-size:10px; background:none; border:1px solid var(--line); border-radius:18px; padding:7px 10px; color:var(--muted); }
.compact-station .station-heading button.selected { color:var(--accent); border-color:#478ce999; background:#2b69b51a; }
.compact-station .station-heading svg { width:12px; height:12px; }
.compact-station .source-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.compact-station .connection-row { display:flex; border:1px solid var(--line); border-radius:9px; min-width:0; background:#0b1524; align-items:center; overflow:hidden; transition:border-color .2s,background .2s; }
.compact-station .connection-row.selected { border-color:#6caaff; background:#172d4a; }
.compact-station .source-choice { display:flex; align-items:center; gap:7px; min-height:47px; padding:9px 7px; border:0; border-radius:0; background:none; width:calc(100% - 25px); flex:1; min-width:0; }
.compact-station .source-choice>span { min-width:0; }
.compact-station .source-choice strong { font-size:10px; }
.compact-station .source-choice small { display:block; font-size:8px; line-height:1.5; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-station .source-light { width:5px; height:5px; min-width:5px; background:#74829a; box-shadow:none; }
.compact-station [data-state=playing] .source-light,.compact-station [data-state=ready] .source-light { background:#6fe4b1; }
.compact-station [data-state=available] .source-light { background:#95cfff; }
.compact-station [data-state=reachable] .source-light { background:#76aaff; }
.compact-station [data-state=failed] .source-light,.compact-station [data-state=unavailable] .source-light { background:#e48691; }
.compact-station .connection-info { display:grid; place-items:center; width:25px; min-height:40px; background:none; border:0; color:#91a4be; padding:5px; }
.compact-station .connection-info svg { width:12px; height:12px; }
.compact-station .source-scan { margin:10px 0 13px; }
.compact-station .source-scan>div { font-size:9px; }
.compact-station .source-scan>i { height:2px; margin-top:7px; }
.compact-station .station-foot { font-size:9px; line-height:1.7; margin:11px 0 0; color:#7f93b1; }
.connection-details { padding:15px; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#0b1423; }
.connection-details>strong { font-size:12px; font-weight:500; }
.connection-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; margin:17px 0; }
.connection-details dt { font-size:9px; color:#7e95b5; margin-bottom:5px; }
.connection-details dd { margin:0; font-size:11px; color:#d0def2; overflow-wrap:anywhere; line-height:1.6; }
.connection-details p { font-size:10px; color:var(--muted); margin:0; }
@media(max-width:1250px) { .compact-station .source-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:540px) { .compact-station .source-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .connection-details dl { grid-template-columns:minmax(0,1fr); } }
.featured-hero.trailer-active .cinema-hero-copy { pointer-events:auto; }
@media(max-width:540px) { .featured-hero.trailer-active { min-height:490px; } .featured-hero.trailer-active .cinema-hero-copy { left:21px; right:21px; bottom:80px; width:auto; } .featured-hero.trailer-active h1 { font-size:34px; letter-spacing:-1px; } }
@media(min-width:1300px) { .featured-hero { height:570px; } }
@media(max-width:1000px) { .featured-hero .cinema-hero-copy { width:70%; left:28px; } body #app .watch-layout,body #app .screen-watch-layout { grid-template-columns:minmax(0,1fr) 280px; gap:18px; } .shared-story .story-layout { grid-template-columns:175px minmax(0,1fr); } .shared-story .story-body { grid-template-columns:minmax(0,1fr); } }
@media(max-width:800px) { body #app .watch-layout,body #app .screen-watch-layout { grid-template-columns:minmax(0,1fr); } .watch-sidebar { display:block; } .watch-sidebar .episode-scroll { max-height:480px; } .shared-story .story-layout { grid-template-columns:145px minmax(0,1fr); gap:24px; } .shared-guide .screen-episode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .content-columns { grid-template-columns:minmax(0,1fr)!important; } .catalog-main,.sidebar { min-width:0; } .content-columns>.sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; width:100%; } .sidebar>.n-pocket,.sidebar>.recorded-schedule { grid-column:1/-1; } .sidebar>.side-section { min-width:0; } }
@media(max-width:540px) { .featured-hero { height:490px; min-height:490px; border-radius:17px; } .featured-hero .cinema-hero-copy { left:21px; right:21px; bottom:80px; width:auto; } .featured-hero h1 { font-size:34px; letter-spacing:-1px; } .featured-hero .original-title img { max-width:280px; max-height:110px; } .feature-description { font-size:11px; } .feature-topline { left:19px; right:19px; top:18px; font-size:8px; } .feature-topline a { max-width:120px; text-align:right; } .featured-hero .cinema-feature-navigation { right:17px; bottom:22px; } .feature-dots { left:19px; bottom:25px; gap:4px; } .feature-dots button { width:17px; } .feature-dots i { width:12px; } .feature-dots [aria-current=true] i { width:17px; } .feature-shade { background:linear-gradient(0deg,#050a15ff 10%,#050a15c9 48%,#050a1540); } .feature-wait { padding:90px 24px; } .shared-story .story-layout { grid-template-columns:100px minmax(0,1fr); gap:18px; } .shared-story .story-copy h1 { font-size:27px; } .shared-story .story-copy .original-title img { max-height:90px; } .shared-story .story-synopsis { font-size:11px; } .shared-story .story-actions { grid-column:1/-1; } .shared-story .story-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .shared-story .overview-genres { gap:5px; } .shared-story .overview-genres a { font-size:8px; padding:5px 8px; } .watch-main .source-pickers { width:100%; } }