/* Illustrative app screens: static artwork, not interactive player controls. */
.app-screen{position:relative;container-type:inline-size;width:100%;height:100%;overflow:hidden;background:#080a10;color:#fff;isolation:isolate}
.app-screen>div{height:100%}
.app-screen .screen-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.app-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,15,.86),rgba(5,8,15,.4) 44%,transparent 72%);z-index:-2}
.app-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080a10 0%,rgba(8,10,16,.82) 16%,transparent 54%,rgba(8,10,16,.3) 100%);z-index:-1}
.screen-nav{position:absolute;inset:4.8% 4.6% auto;display:flex;align-items:center;gap:2.6cqw;font-size:1.1cqw;font-weight:650;line-height:1.4}
.screen-brand{font-size:1.65cqw;letter-spacing:-.04em}
.screen-nav-current{border-bottom:.15cqw solid #b7b4ff;padding-block:.55cqw}
.screen-time{margin-left:auto;color:#f0f0f5;font-size:1cqw;font-weight:500}
.screen-feature{position:absolute;left:4.6%;top:20%;width:53%}
.screen-kicker{display:block;font-size:.82cqw;letter-spacing:.13em;text-transform:uppercase;color:#e5e2d6;margin-bottom:1.3cqw}
.film-title{font-size:5.3cqw;line-height:.96;letter-spacing:.025em;color:#fff8e8;font-weight:650}
.title-signal{font-stretch:condensed;font-weight:750;letter-spacing:.075em;font-size:4.7cqw}
.screen-meta{display:flex;align-items:center;gap:1.2cqw;margin-top:1.45cqw;font-size:.88cqw;color:#e0e1e9;line-height:1.5}
.screen-meta span{border-inline:1px solid #9a9ba86b;padding-inline:1.2cqw}
.screen-tagline{font-size:1.03cqw;color:#eceaf0;margin-top:.8cqw}
.screen-action{display:inline-flex;align-items:center;gap:.65cqw;padding:.65cqw 1.65cqw;background:#f8f8fb;color:#13141b;border-radius:.45cqw;font-size:.9cqw;font-weight:750;margin-top:1.6cqw;line-height:1.6}
.screen-action .icon{width:1.05cqw;height:1.05cqw;fill:currentColor;stroke-width:0}
.screen-shelf{position:absolute;bottom:4.5%;left:4.6%;right:4.6%}
.screen-shelf-heading{display:flex;justify-content:space-between;align-items:center;font-size:1.28cqw;font-weight:650;margin-bottom:1cqw;line-height:1.5}
.screen-shelf-heading>span{font-size:.8cqw;color:#c0c2d1;font-weight:500}
.screen-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3cqw}
.screen-card{position:relative;min-width:0}
.screen-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.5cqw;border:1px solid #ffffff21}
.screen-card-title{display:block;font-size:.91cqw;line-height:1.5;margin-top:.65cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e7e8f1;font-weight:550}
.watch-progress{position:absolute;left:.5cqw;right:.5cqw;bottom:2.15cqw;height:.19cqw;background:#ffffff45;border-radius:2px;overflow:hidden}
.watch-progress::after{content:"";display:block;width:var(--watched);height:100%;background:#b7b4ff}
.screen-details::before{background:linear-gradient(90deg,rgba(8,6,8,.93),rgba(8,6,8,.67) 39%,rgba(8,6,8,.06) 70%)}
.screen-details::after{background:linear-gradient(0deg,rgba(8,6,8,.6),transparent 45%)}
.screen-details .screen-feature{top:22%;width:44%}
.title-velvet{font-family:Georgia,'Times New Roman',serif;font-size:6.5cqw;line-height:.94;font-weight:400;letter-spacing:.045em}
.title-velvet small{display:block;font-size:1.2cqw;letter-spacing:.45em;margin-bottom:.9cqw}
.screen-details .screen-kicker{letter-spacing:.06em;text-transform:none;font-size:.95cqw;margin-bottom:2cqw}
.screen-synopsis{font-size:1.04cqw;line-height:1.8;max-width:35cqw;color:#e0d9d8;margin-top:1.5cqw}
.screen-action-row{display:flex;align-items:center;gap:1.8cqw;margin-top:.7cqw}
.screen-action-row .screen-action{margin-top:0}
.screen-secondary{font-size:.9cqw;color:#f0e8e5;padding:.8cqw 0}
.screen-remaining{font-size:.78cqw;margin-top:1cqw;color:#d2c7c5}
.detail-poster{position:absolute;right:5%;bottom:6%;width:11%;transform:rotate(3deg)}
.detail-poster img{width:100%;height:auto;aspect-ratio:2/3;border:.15cqw solid #e0c9ad80;border-radius:.3cqw}
.detail-poster span{display:block;text-align:center;font-size:.65cqw;color:#e8d9c7;margin-top:.6cqw}
.screen-live::before{background:linear-gradient(90deg,rgba(5,10,18,.9),rgba(5,10,18,.55) 35%,transparent 70%)}
.screen-live .screen-feature{top:20%}
.screen-live-label{display:flex;align-items:center;gap:.55cqw;font-size:.8cqw;font-weight:700;letter-spacing:.09em;margin-bottom:1.2cqw}
.screen-live-label i{width:.45cqw;height:.45cqw;background:#e7ab7f;border-radius:50%}
.screen-live-label>span{font-weight:500;color:#d4dce5;margin-left:.65cqw}
.title-live{letter-spacing:-.045em;font-size:5.1cqw;font-weight:600;line-height:1}
.channel-label{position:absolute;top:.65cqw;left:.65cqw;background:#0a1020d9;color:#fff;padding:.2cqw .55cqw;border-radius:.3cqw;font-size:.65cqw;font-weight:650;letter-spacing:.015em}
.multiview{container-type:inline-size;border:1px solid #343649;padding:5px;background:#070910;border-radius:12px}
.multiview-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:hidden;border-radius:7px}
.multiview-channel{position:relative;min-width:0;aspect-ratio:16/9;overflow:hidden}
.multiview-channel::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,#050b16e8,transparent)}
.live-visual .multiview img{width:100%;height:100%;object-fit:cover;border-radius:0}
.multiview-live{position:absolute;top:7%;left:6%;color:#fff;background:#101623b3;padding:.3cqw .7cqw;font-size:1.3cqw;line-height:1.4;font-weight:750;letter-spacing:.08em}
.multiview-info{position:absolute;left:6%;bottom:7%;right:4%;z-index:1;line-height:1.5}
.multiview-info>span{display:block;font-size:1.4cqw;color:#d6dbe4}
.multiview-info>strong{display:block;font-size:2.1cqw;font-weight:650;color:#f8f8fb;white-space:nowrap}
@media(max-width:760px){.detail-poster{right:4%;width:13%}.screen-kicker{font-size:1.1cqw}.screen-meta{font-size:1.2cqw}.screen-card-title{font-size:1.35cqw;margin-top:.5cqw}.watch-progress{bottom:2.7cqw}.screen-shelf-heading{font-size:1.5cqw}.screen-shelf-heading>span{font-size:1.2cqw}.screen-tagline{font-size:1.3cqw}.screen-action{font-size:1.2cqw}.screen-nav{font-size:1.3cqw}.screen-brand{font-size:2cqw}.screen-time{font-size:1.2cqw}.screen-synopsis{font-size:1.2cqw;line-height:1.6}.screen-remaining{font-size:1.1cqw}.screen-secondary{font-size:1.2cqw}.channel-label{font-size:.95cqw}.multiview-info>strong{font-size:2.6cqw}.multiview-info>span{font-size:1.8cqw}.multiview-live{font-size:1.7cqw}}