/* Blue Heron cinema layout and player styles. */
:root {
  --bg: #101116; --bg-soft: #191b23; --text: #f4f4f6; --text-2: #aaaeba; --text-3: #7e8494;
  --brand: #ff665e; --brand-2: #ff8a74; --grad-brand: linear-gradient(110deg, #ff6b5e, #f44e61);
  --line: #ffffff0c; --line-strong: #ffffff13; --app-max: 1600px;
  --font-sans: var(--font); --font-serif: var(--font); --radius: 12px;
}
html { color-scheme: dark; scroll-padding-top: 96px; }
body { background: var(--bg); color: var(--text); font-size: 14px; }
button, a, input, select { touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ambient { background: var(--bg); }.ambient__glow,.ambient__grain { display:none; }
.app,.app.has-tabbar:not(.tabbar-hidden) { width: 100%; max-width: 1600px; min-height: 80vh; margin: 0 auto; padding: 0 40px; background: none; box-shadow: none; }
.app:focus { outline: none; }.page { animation: page-in .2s ease both; }
.skip-link { position: fixed; z-index: 1000; top: -100px; left: 16px; padding: 14px 20px; color: #fff; background: var(--brand); border-radius: 8px; }.skip-link:focus { top: 10px; }
#header-root { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: #101116f5; backdrop-filter: blur(18px); }
.studio-header { height: 80px; display: flex; align-items: center; gap: 38px; padding: 0 28px; max-width: 1800px; margin: auto; }
.studio-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 158px; }
.studio-brand img { width: 36px; height: 36px; }.studio-brand b { display: block; font-size: 20px; font-weight: 750; letter-spacing: 1px; }
.studio-brand small { display: block; color: #7f899e; font-size: 8px; letter-spacing: 3.2px; margin-top: 3px; }
.desktop-sidebar { position: fixed; top: 80px; left: 0; bottom: 0; width: 200px; display: flex; flex-direction: column; padding: 30px 16px 24px; background: #121319; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.studio-nav { display: flex; flex-direction: column; gap: 8px; }.studio-nav .tab { display: flex; flex-direction: row; gap: 14px; justify-content: flex-start; align-items: center; width: 100%; min-height: 48px; padding: 0 18px; border-radius: 10px; color: var(--text-2); font-size: 14px; }
.studio-nav .tab:before { display: none; }.studio-nav .tab.is-active { background: #ff665e18; color: var(--brand); font-weight: 650; }.studio-nav .tab:hover { background: #ffffff07; color: var(--text); }
.sidebar-genres { padding: 28px 18px; margin-top: 24px; border-top: 1px solid var(--line-strong); }.sidebar-genres > p { margin-bottom: 14px; font-size: 11px; color: var(--text-3); letter-spacing: 1px; }
.sidebar-genres a { display: flex; gap: 12px; align-items: center; min-height: 38px; color: #9197a7; font-size: 12px; }.sidebar-genres a:hover { color: #fff; }.sidebar-genres i { width: 5px; height: 5px; border-radius: 50%; opacity: .65; }
.sidebar-note { margin-top: auto; padding: 20px 18px 0; color: #646b7d; font-size: 10px; line-height: 1.8; }.sidebar-note span { letter-spacing: 2px; }.sidebar-note p { margin-top: 8px; }
.header-search { display: flex; align-items: center; gap: 12px; width: min(400px,38vw); height: 40px; background: #ffffff06; border: 1px solid #ffffff08; border-radius: 9px; padding: 0 12px; color: #7e8595; }
.header-search:focus-within { border-color: #ff665e70; }.header-search input { min-width: 0; flex: 1; border: none; background: none; outline: none; font-size: 12px; color: #fff; }.header-search button { display: grid; place-items: center; min-width: 28px; height: 32px; }
.studio-header__actions { margin-left: auto; display: flex; align-items: center; gap: 25px; }.header-saved { display: flex; align-items: center; gap: 9px; color: #afb3bf; font-size: 12px; white-space: nowrap; }
.locale-switch { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 7px; }.locale-switch button { min-width: 33px; min-height: 28px; border-radius: 4px; font-size: 11px; color: #8c93a3; }.locale-switch button[aria-pressed=true] { background: #ffffff0d; color: #fff; }
.header-search-mobile { display: none !important; }
.icon-btn { min-width: 42px; width: 42px; height: 42px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ffffff25; border-radius: 10px; color: #eee; background: #ffffff0c; }
.icon-btn:hover { background: #ffffff1a; }.icon-btn[aria-pressed=true] { color: var(--brand); border-color: #ff665e80; }
.btn { min-height: 45px; padding: 0 24px; gap: 10px; border-radius: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.btn--primary { color: #fff; background: var(--grad-brand); border: 0; box-shadow: 0 5px 24px #ff665e15; }.btn--primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn--outline,.btn--ghost { color: #e8e9ed; border: 1px solid #ffffff25; background: #ffffff06; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: #a7adbb; font-size: 12px; min-height: 36px; }.text-link:hover { color: var(--brand); }
.eyebrow { font-size: 9px; font-family: var(--font-en); color: #7e879a; letter-spacing: 1.7px; line-height: 1.8; }
.live-dot,.quiet-dot,.heading-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }.quiet-dot { background: #6a7283; }.heading-dot { vertical-align: middle; margin-left: 6px; }
.studio-title,.section__title { font-family: var(--font-sans); font-size: 23px; font-weight: 650; letter-spacing: -.5px; }.section__title:before { display: none; }
.section__head { margin-bottom: 22px; align-items: center; gap: 12px; }.section__sub { margin-top: 7px; font-size: 11px; color: var(--text-3); letter-spacing: .3px; }.section__more { color: var(--text-2); }.studio-section { margin: 36px 0 44px; }
.studio-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px 20px; }
.pcard { display: block; width: 100%; min-width: 0; border: none; background: transparent; overflow: visible; border-radius: 0; box-shadow: none; }
.pcard__art { position: relative; overflow: hidden; aspect-ratio: 2/3; border-radius: 12px; background: #222631; box-shadow: 0 8px 30px #0002; }
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.pcard:hover .pcard__img { transform: scale(1.035); }
.pcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg,#0000 60%,#0007); }.pcard__top { position: absolute; inset: auto 0 0; padding: 13px; display: flex; justify-content: space-between; }
.pcard__eps { font-size: 10px; color: #fff; font-weight: 500; background: #0005; padding: 4px 7px; border: 1px solid #ffffff20; border-radius: 4px; backdrop-filter: blur(8px); }
.pcard__info { position: static; padding: 13px 1px 0; background: none; }.pcard__title { font-size: 15px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: #e7e9ef; }.pcard:hover .pcard__title { color: var(--brand); }.pcard__meta { color: #7f8797; font-size: 11px; margin-top: 6px; }.pcard__meta i { background: #6c7382; }
.pcard__play { position: absolute; top: 50%; left: 50%; width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; background: #ff665ef2; color: white; opacity: 0; transform: translate(-50%,-40%); transition: .2s; box-shadow: 0 6px 30px #0005; }.pcard:hover .pcard__play,.pcard:focus-visible .pcard__play { opacity: 1; transform: translate(-50%,-50%); }
.pcard--titled .pcard__title { display:none; }.pcard--titled .pcard__top { top:0; bottom:auto; }.pcard--titled .pcard__shade { background:linear-gradient(180deg,#0004,transparent 24%); }.pcard--titled .pcard__meta { margin-top:0; }
.spotlight { position: relative; margin-top: 28px; isolation: isolate; overflow: hidden; border-radius: 16px; min-height: 478px; background: #151e2c; }
.spotlight [data-spotlight] { min-height: 478px; display: flex; align-items: center; }.spotlight__backdrop { position: absolute; inset: 0; z-index: -2; }.spotlight__backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 36%; }
.spotlight__backdrop:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#10141cf7 0%,#11151de8 24%,#11151d60 58%,#11151d05 82%),linear-gradient(0deg,#10141cfa,#10141c00 50%); }
.spotlight__copy { width: 57%; padding: 40px 0 100px 42px; }.feature-label { display: flex; align-items: center; gap: 8px; color: #ff9a8b; font-size: 10px; font-weight: 650; letter-spacing: 1.4px; }.feature-label > span { width: 5px; height: 5px; background: var(--brand); border-radius:50%; }
.spotlight h1 { font-size: clamp(30px,3vw,48px); line-height: 1.16; font-weight: 760; letter-spacing: -1px; margin: 20px 0 12px; text-wrap: balance; }.spotlight__english { font-size: 12px; color: #9ba8bb; line-height: 1.5; }
.spotlight__genre { display:flex; align-items:center; gap:12px; margin-top:18px; color:#c9cfd8; font-size:11px; }.spotlight__genre i { color:#828c9c; font-style:normal; }
.spotlight__synopsis { max-width: 400px; margin-top:16px; color:#aab4c3; font-size:12px; line-height:1.9; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.spotlight__actions { display:flex; align-items:center; gap:12px; margin-top:24px; }.feature-detail { margin-left:4px; }
.spotlight__controls { position:absolute; bottom:20px; left:42px; right:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.spotlight__dots { display:flex; gap:9px; min-width:0; }.spotlight__dots button { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border:1px solid #ffffff13; border-radius:7px; background:#0b101ba0; color:#939bad; max-width:150px; min-width:0; }
.spotlight__dots img { width:27px; height:36px; object-fit:cover; border-radius:3px; }.spotlight__dots button > span { font-size:10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }.spotlight__dots button[aria-pressed=true] { border-color:#ff8c7ba0; color:#fff; background:#ff665e12; }.spotlight__arrows { display:flex; gap:6px; }.spotlight__arrows .icon-btn { min-width:32px; width:32px; height:32px; border-radius:50%; }
.studio-genres { display:flex; gap:8px; overflow:auto; scrollbar-width:none; padding:24px 0; border-bottom:1px solid var(--line); }.studio-genres a { flex-shrink:0; display:flex; align-items:center; min-height:35px; padding:0 15px; border-radius:7px; background:#1d1f28; color:#a8adbb; font-size:11px; }.studio-genres a:hover { color:#fff; background:#2a2d38; }.studio-genres a.is-active { color:var(--brand); background:#ff665e17; }
.discovery-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:30px 34px; background:linear-gradient(110deg,#27202a,#1c1e2b); border:1px solid #ffffff0a; border-radius:12px; margin:48px 0; }.discovery-banner span { font-size:9px; color:#e4938c; letter-spacing:2px; }.discovery-banner h2 { font-size:23px; font-weight:650; margin:10px 0; }.discovery-banner p { color:#8e94a6; font-size:11px; line-height:1.8; }.discovery-banner .btn { flex-shrink:0; }
.studio-footer { display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--line-strong); margin-top:48px; padding:30px 0; font-size:10px; color:#757d90; line-height:1.8; }.studio-footer > div b { display:block; letter-spacing:2px; color:#a1a9b9; font-size:12px; }.studio-footer > div span { display:block; margin-top:6px; }.studio-footer > p { max-width:450px; justify-self:end; }.studio-footer > small { grid-column:1/-1; font-size:9px; }
.collection-heading { padding:38px 0 28px; }.collection-heading h1 { font-size:32px; font-weight:700; margin:12px 0; line-height:1.3; }.collection-heading p { color:var(--text-2); font-size:12px; line-height:1.8; }
.catalog-filters { background:#171920; border:1px solid var(--line); border-radius:12px; padding:0 20px; }.catalog-genres { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0; }.chip { min-height:36px; padding:0 14px; font-size:11px; background:#ffffff05; border:1px solid transparent; border-radius:7px; }.chip.is-active { color:#fff; background:var(--brand); box-shadow:none; border-color:transparent; }
.catalog-options { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line-strong); padding:12px 0; }.catalog-options > div { display:flex; flex-wrap:wrap; gap:20px; }.catalog-channel { color:var(--text-2); font-size:11px; min-height:32px; }.catalog-channel.is-active { color:var(--brand); }.catalog-options label { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:11px; }
select { font:inherit; color:var(--text); background:#232631; padding:8px 10px; border:1px solid var(--line-strong); border-radius:6px; max-width:170px; }.catalog-status { display:flex; justify-content:space-between; align-items:center; min-height:66px; font-size:12px; color:#929aab; }.catalog-status b { color:#e9edf4; padding:0 5px; }.catalog-empty { grid-column:1/-1; text-align:center; padding:30px; }.empty { padding:48px 20px; }.empty__icon { background:#ff665e0b; color:var(--brand); }.empty__desc { max-width:360px; margin:8px auto 0; color:var(--text-2); }
.series-back { margin:20px 0 12px; }.series-hero { position:relative; display:grid; grid-template-columns:220px 1fr; gap:40px; padding:36px; isolation:isolate; overflow:hidden; border-radius:14px; border:1px solid var(--line-strong); }
.series-hero__art { position:absolute; inset:0; z-index:-1; }.series-hero__art img { width:100%; height:100%; object-fit:cover; opacity:.3; filter:blur(18px); }.series-hero__art:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#13172180,#141821ee); }
.series-poster img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; box-shadow:0 15px 40px #0005; }.series-copy { align-self:center; min-width:0; }.series-copy h1 { font-size:36px; font-weight:700; line-height:1.3; margin-top:15px; }.series-original { font-size:12px; color:var(--text-2); margin-top:8px; }.series-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.tag { font-size:10px; color:#b8c0d0; border:1px solid #ffffff16; background:#ffffff06; }.tag--brand { color:var(--brand); border-color:#ff665e25; background:#ff665e08; }
.series-intro { margin-top:18px; font-size:12px; line-height:1.9; color:#b3bbcb; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }.series-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:24px; }.series-actions [aria-pressed=true] { color:var(--brand); border-color:#ff665e80; }.series-availability { display:flex; gap:8px; align-items:center; margin-top:18px; color:var(--text-2); font-size:11px; }
.series-content { display:grid; grid-template-columns:1fr 260px; gap:45px; margin:44px 0; }.story-text { color:#a4adbf; font-size:13px; line-height:2; max-height:150px; overflow:hidden; margin:20px 0 10px; }.story-text p+p { margin-top:12px; }.story-text.is-expanded { max-height:none; }.series-facts { align-self:start; border:1px solid var(--line-strong); border-radius:12px; padding:24px; background:#191c24; }.series-facts h2 { font-size:14px; }.series-facts dl { margin:18px 0; }.series-facts dl>div { display:flex; justify-content:space-between; gap:12px; font-size:11px; margin:12px 0; }.series-facts dt,.series-facts p { color:var(--text-3); }.series-facts dd { margin:0; text-align:right; }.series-facts p { font-size:9px; line-height:1.7; }
.player-breadcrumb { display:flex; align-items:center; gap:16px; padding:18px 0; color:var(--text-2); font-size:11px; }.player-breadcrumb>span:last-child { margin-left:auto; color:#fff; }.watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:22px; align-items:start; }.watch-main { min-width:0; }
.player-stage { position:relative; width:100%; height:min(72vh,720px); min-height:420px; background:#05060b; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; isolation:isolate; }
.player-stage.is-landscape { height:auto; min-height:0; aspect-ratio:16/9; }.player-poster { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; filter:blur(32px); opacity:.3; }
.story-video { display:block; width:100%; height:100%; object-fit:contain; background:#05060b; }.player-stage.has-video:not(.is-playing) .story-video { background:transparent; }
.player-message { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:28px; background:#111620dc; }.player-message__icon { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--brand); border:1px solid #ff665e40; background:#ff665e09; margin-bottom:20px; }.player-message h2 { font-size:24px; font-weight:600; margin-top:14px; }.player-message p { font-size:12px; color:var(--text-2); margin:12px 0 24px; line-height:1.8; }
.player-big-play { position:absolute; z-index:2; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:linear-gradient(145deg,#ffffff16,#ffffff04),#0d10186b; border:1px solid #ffffff38; color:#fff; backdrop-filter:blur(12px); box-shadow:0 4px 24px #0003,inset 0 1px 0 #ffffff10; transition:transform .2s,background .2s,border-color .2s; }
.player-big-play svg { width:30px; height:30px; transform:translateX(1px); }.player-big-play:hover { transform:translate(-50%,-50%) scale(1.04); background:#222631a6; border-color:#ffffff70; }.player-big-play:active { transform:translate(-50%,-50%) scale(.97); }
.custom-controls { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:36px 20px 12px; background:linear-gradient(0deg,#06070be8,#06070b75 58%,transparent); opacity:1; transition:opacity .2s; pointer-events:none; }.custom-controls>div { pointer-events:auto; }
.player-seek { --played:0%; --buffered:0%; --track-size:3px; --thumb-opacity:0; position:relative; height:32px; display:flex; align-items:center; margin-bottom:2px; }
.player-seek:before,.player-buffer,.player-played { content:''; position:absolute; left:0; height:var(--track-size); border-radius:8px; pointer-events:none; transition:height .15s; }
.player-seek:before { right:0; background:#ffffff24; }.player-buffer { width:var(--buffered); background:#ffffff3d; }.player-played { width:var(--played); background:var(--brand); }
.player-seek:focus-within,.player-seek.is-scrubbing { --track-size:5px; --thumb-opacity:1; }
.player-seek input { position:relative; appearance:none; width:calc(100% + 12px); flex-shrink:0; left:-6px; height:100%; margin:0; background:none; cursor:pointer; touch-action:none; border-radius:6px; }
.player-seek input:disabled { cursor:default; }.player-seek input:focus-visible { outline:2px solid #ffffffa0; outline-offset:-3px; }
.player-seek input::-webkit-slider-runnable-track { height:var(--track-size); background:transparent; }.player-seek input::-moz-range-track,.player-seek input::-moz-range-progress { height:var(--track-size); background:transparent; }
.player-seek input::-webkit-slider-thumb { appearance:none; width:12px; height:12px; margin-top:calc((var(--track-size) - 12px)/2); border:0; border-radius:50%; background:#fff; box-shadow:0 1px 5px #0005; opacity:var(--thumb-opacity); transition:opacity .15s; }
.player-seek input::-moz-range-thumb { width:12px; height:12px; background:#fff; border:0; border-radius:50%; opacity:var(--thumb-opacity); box-shadow:0 1px 5px #0005; transition:opacity .15s; }
.player-seek-preview { position:absolute; bottom:calc(50% + 16px); transform:translateX(-50%); min-width:48px; padding:5px 9px; border:1px solid #ffffff13; border-radius:7px; background:#15171ff0; box-shadow:0 3px 12px #0003; color:#fff; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; pointer-events:none; }
.player-seek-preview:after { content:''; position:absolute; left:50%; bottom:-4px; width:6px; height:6px; background:#15171f; transform:translateX(-50%) rotate(45deg); }
.player-controls-row { display:flex; align-items:center; gap:6px; min-height:44px; }.player-controls-row button { display:grid; place-items:center; flex-shrink:0; width:44px; min-width:44px; height:44px; color:#fff; border-radius:10px; transition:background .15s,transform .15s; }.player-controls-row button svg { width:22px; height:22px; }
.player-controls-row button:hover { background:#ffffff16; }.player-controls-row button:active { transform:scale(.94); }.player-controls-row .player-toggle { background:#ffffff0d; border:1px solid #ffffff0d; margin-right:2px; }.player-controls-row .player-toggle:hover { background:#ffffff24; }.player-controls-spacer { flex:1; }.player-time { padding:0 6px; font-size:12px; white-space:nowrap; color:#fff; font-variant-numeric:tabular-nums; }.player-time i { color:#b2b5bf; font-style:normal; }
.player-skip svg { overflow:visible; }.player-volume { display:flex; align-items:center; gap:3px; }.player-volume input { appearance:none; width:58px; accent-color:#fff; height:3px; cursor:pointer; border-radius:3px; background:#ffffff40; }.player-volume input::-webkit-slider-thumb { appearance:none; width:10px; height:10px; border-radius:50%; background:#fff; }.player-volume input::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#fff; }
.player-rate select { appearance:none; border:0; background:transparent; font-size:12px; font-weight:650; padding:0 6px; width:48px; height:44px; max-width:none; cursor:pointer; text-align:center; border-radius:10px; }.player-rate select:hover { background:#ffffff16; }.player-rate option { background:#20232e; color:#fff; }.player-loading { position:absolute; z-index:4; width:28px; height:28px; border:2px solid #ffffff30; border-top-color:var(--brand); border-radius:50%; animation:player-spin .8s linear infinite; pointer-events:none; }@keyframes player-spin { to { transform:rotate(360deg); } }
@media(hover:hover) { .player-seek:hover { --track-size:5px; --thumb-opacity:1; } }
@media(pointer:coarse) { .player-seek { --thumb-opacity:1; } }
.player-stage.is-playing.controls-hidden:not(:focus-within) .custom-controls { opacity:0; pointer-events:none; }
.player-stage:fullscreen,.player-stage.is-landscape:fullscreen,.player-stage.is-viewport-fullscreen { height:100%; width:100%; max-width:none; min-height:0; border:0; border-radius:0; background:#000; touch-action:none; }
.player-stage:fullscreen .custom-controls,.player-stage.is-viewport-fullscreen .custom-controls { padding:70px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.player-stage:fullscreen .story-video,.player-stage.is-viewport-fullscreen .story-video { background:#000; }
.player-gesture-surface { display:none; position:absolute; inset:0; z-index:1; touch-action:none; }
.player-stage:fullscreen .player-gesture-surface,.player-stage.is-viewport-fullscreen .player-gesture-surface { display:block; }
.player-stage:fullscreen,.player-stage.is-viewport-fullscreen { overscroll-behavior:contain; user-select:none; -webkit-user-select:none; }
.player-stage>.story-video { transform:translate3d(0,var(--swipe-y,0px),0); transition:transform .18s ease-out; filter:brightness(var(--video-brightness,1)); }
.player-stage.is-swiping .story-video { transition:none; will-change:transform; }
.player-swipe-feedback { position:absolute; z-index:7; top:65%; left:50%; transform:translateX(-50%); padding:12px 18px; border:1px solid #ffffff25; border-radius:24px; background:#11131bd9; color:#fff; font-size:13px; white-space:nowrap; pointer-events:none; }
.player-stage.is-switching .player-big-play { visibility:hidden; }
.player-gesture-meter { position:absolute; z-index:9; top:42%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px; width:210px; padding:18px; border:1px solid #ffffff25; border-radius:16px; background:#151923ec; box-shadow:0 12px 50px #0004; pointer-events:none; color:#fff; }
.player-gesture-meter>span:first-child { display:grid; place-items:center; }.player-gesture-meter svg { width:28px; height:28px; }.player-gesture-meter>span:last-child { flex:1; font-size:11px; }.player-gesture-meter b { display:block; margin:4px 0 9px; font-size:22px; font-variant-numeric:tabular-nums; }.player-gesture-meter i { display:block; height:4px; border-radius:4px; background:#ffffff25; overflow:hidden; }.player-gesture-meter em { display:block; height:100%; background:var(--brand); border-radius:4px; }
.player-episode-transition { position:absolute; z-index:2; inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at center,#242737dc,#0b0e17f2); pointer-events:none; }
.player-transition-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; filter:brightness(var(--video-brightness,1)); }
.player-transition-card { position:relative; display:grid; justify-items:center; gap:14px; width:210px; padding:25px; border:1px solid #ffffff15; border-radius:20px; color:#fff; background:#141924e8; box-shadow:0 16px 60px #0005; }
.player-transition-direction { font-size:28px; color:var(--brand); }.player-transition-card b { font-size:26px; letter-spacing:2px; }.player-transition-card>span:last-of-type { font-size:12px; color:#b6bfce; }
.player-transition-progress { width:130px; height:3px; overflow:hidden; border-radius:3px; background:#ffffff20; }.player-transition-progress:after { content:''; display:block; width:45%; height:100%; border-radius:3px; background:var(--brand); animation:episode-loading 1s ease-in-out infinite alternate; }@keyframes episode-loading { from { transform:translateX(-80%); } to { transform:translateX(210%); } }
.player-stage.has-episode-transition .player-loading { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { .player-stage .story-video { transition:none; transform:none; } }
body.player-fullscreen-open { overflow:hidden; }body.player-fullscreen-open .app { z-index:100; }body.player-fullscreen-open .page { animation:none; }
.player-stage.is-viewport-fullscreen,.player-stage.is-landscape.is-viewport-fullscreen { position:fixed; inset:0; z-index:100; height:100vh; height:100dvh; width:100%; }
.player-swipe-hint { position:absolute; z-index:7; top:max(20px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); display:none; align-items:center; gap:12px; max-width:calc(100% - 92px); padding:8px 12px; border:1px solid #ffffff13; border-radius:20px; background:#11131ba0; backdrop-filter:blur(10px); color:#d4d7df; font-size:11px; pointer-events:none; transition:opacity .2s; }
.player-swipe-hint b { white-space:nowrap; color:#fff; font-size:10px; font-variant-numeric:tabular-nums; }.player-swipe-hint span { text-align:center; }
.player-stage:fullscreen .player-swipe-hint,.player-stage.is-viewport-fullscreen .player-swipe-hint { display:flex; }
.player-stage.is-playing.controls-hidden:not(:focus-within) .player-swipe-hint { opacity:0; }
.player-fullscreen-exit { position:absolute; z-index:8; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); display:none; place-items:center; width:44px; height:44px; border:1px solid #ffffff20; border-radius:50%; background:#11131ba0; backdrop-filter:blur(10px); color:#fff; }.player-fullscreen-exit:hover { background:#343944cc; }
.player-stage:fullscreen .player-fullscreen-exit,.player-stage.is-viewport-fullscreen .player-fullscreen-exit { display:grid; }
.player-swipe-notice { position:absolute; z-index:8; top:80px; left:50%; transform:translateX(-50%); padding:10px 18px; border-radius:9px; background:#171b24e8; color:#fff; font-size:12px; text-align:center; pointer-events:none; }
.player-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-strong); }.autoplay-switch { display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:10px; }.autoplay-switch input { accent-color:var(--brand); width:14px; height:14px; }
.watch-story { padding:24px 0; }.watch-story .eyebrow { font-size:8px; }.watch-story h1 { font-size:27px; font-weight:650; margin:10px 0 8px; }.watch-story>p { color:var(--text-2); font-size:12px; }.watch-story__meta { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; color:var(--text-3); font-size:10px; }.watch-story__meta i { font-style:normal; }.watch-story__actions { display:flex; align-items:center; gap:20px; }
.episode-panel { position:sticky; top:104px; border:1px solid var(--line-strong); background:#191c24; border-radius:12px; padding:22px; }.episode-panel__heading { display:flex; justify-content:space-between; align-items:end; gap:12px; }.episode-panel__heading h2 { font-size:21px; font-weight:650; margin-top:5px; }.episode-panel__heading>span { font-size:10px; color:var(--text-3); text-align:right; }.episode-panel .eyebrow { font-size:7px; letter-spacing:1.4px; }.episode-panel__status { color:#8993a5; font-size:10px; margin:16px 0; padding-bottom:16px; border-bottom:1px solid var(--line-strong); }
.episode-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-height:410px; overflow:auto; padding:3px; margin:-3px; scrollbar-width:thin; scrollbar-color:#535c7133 transparent; }.episode-button { position:relative; min-height:39px; border:1px solid #ffffff08; background:#ffffff03; border-radius:6px; color:#636d7e; font-size:11px; }.episode-button.is-ready { color:#d8deea; background:#ffffff06; }.episode-button.is-ready i { position:absolute; width:3px; height:3px; bottom:4px; left:calc(50% - 1px); background:#9da6b7; border-radius:50%; }.episode-button.is-active { border-color:#ff665e90; background:#ff665e19; color:#ff8b80; }.episode-button.is-active i { background:var(--brand); }.episode-button:hover { border-color:#ff665e80; }.episode-panel__more { margin-top:18px; }
.my-list-stats { display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:20px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); color:var(--text-2); font-size:11px; }.my-list-stats b { color:#fff; font-size:22px; margin-right:7px; }.my-list-stats small { margin-left:auto; font-size:10px; color:var(--text-3); }.list-empty { border:1px solid var(--line-strong); border-radius:12px; text-align:center; padding-bottom:20px; background:#191c24; }
.recent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }.mrow { min-width:0; background:none; border-bottom:1px solid var(--line-strong); padding:16px 0; }.mrow__title { font-size:15px; }.mrow__sub { color:var(--text-2); }.mrow__tags:empty { display:none; }.mrow__thumb { width:52px; }.clear-history { margin-top:22px; }
.resume-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.resume-card { display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line-strong); background:#191c24; border-radius:10px; }.resume-card>img { width:52px; height:70px; border-radius:5px; object-fit:cover; }.resume-card>div { flex:1; min-width:0; }.resume-card h3 { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:7px; }.resume-card span { font-size:9px; color:#8994a9; }.resume-card>svg { color:var(--brand); flex-shrink:0; }.resume-progress { height:2px; background:#ffffff14; margin-top:12px; }.resume-progress i { display:block; height:100%; background:var(--brand); }
.studio-searchbox { display:flex; gap:14px; align-items:center; padding:10px 12px 10px 22px; border:1px solid var(--line-strong); border-radius:12px; background:#1a1d26; }.studio-searchbox>svg { color:#949fb2; flex-shrink:0; }.studio-searchbox input { min-width:0; flex:1; border:0; background:none; outline:0; min-height:42px; font-size:14px; }.studio-searchbox:focus-within { border-color:#ff665e80; }.search-content { margin-top:30px; min-height:40vh; }.recent-search-heading { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }.recent-search-heading h2 { font-size:17px; }
.confirm-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }.sheet { max-width:520px; background:#1d212c; }.sheet__body>p { color:var(--text-2); line-height:1.8; }.toast { background:#2d3443; color:#fff; border:1px solid var(--line-strong); }
#tabbar-root { display:none; }
@media(min-width:1100px) { #app { width:calc(100% - 200px); max-width:1700px; margin-left:200px; padding:0 36px; } }
@media(min-width:1700px) { .studio-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.spotlight,.spotlight [data-spotlight] { min-height:510px; }.spotlight__copy { padding-left:52px; width:50%; } }
@media(max-width:1099px) { .desktop-sidebar { display:none; }.studio-header { padding:0 32px; }.app,.app.has-tabbar:not(.tabbar-hidden) { padding:0 32px; }.studio-grid { gap:26px 16px; }.watch-layout { grid-template-columns:minmax(0,1fr) 260px; gap:18px; }.episode-panel { padding:18px; }.player-volume input { display:none; }.spotlight__copy { width:62%; }.spotlight__dots button { max-width:130px; }.series-hero { grid-template-columns:200px 1fr; padding:28px; gap:28px; } }
@media(min-width:760px) and (max-width:1099px) { .studio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.header-saved span { display:none; } }
@media(max-width:759px) {
  .app,.app.has-tabbar:not(.tabbar-hidden) { padding:0 18px 80px; }.app:not(.has-tabbar) { padding-bottom:12px; }.studio-header { height:68px; padding:0 18px; gap:12px; }.studio-brand { min-width:0; gap:8px; }.studio-brand img { width:29px; height:29px; }.studio-brand b { font-size:17px; letter-spacing:.5px; }.studio-brand small { font-size:7px; letter-spacing:2.2px; }.header-search,.header-saved { display:none; }.header-search-mobile { display:inline-flex !important; }.studio-header__actions { gap:10px; }.locale-switch button { min-width:26px; min-height:26px; }.header-search-mobile { min-width:32px; width:32px; height:32px; border:0; background:transparent; }
  #tabbar-root { display:block; }.tabbar { position:fixed; max-width:none; width:100%; height:calc(62px + env(safe-area-inset-bottom)); padding:7px 10px calc(7px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); background:#15171ff5; backdrop-filter:blur(16px); border-top:1px solid var(--line-strong); box-shadow:none; }.tab { display:flex; flex-direction:column; gap:4px; justify-content:center; align-items:center; color:#8a93a7; font-size:9px; }.tab.is-active { color:var(--brand); }.tab:before { display:none; }.tab>svg { width:21px; height:21px; }
  .spotlight { margin:16px -2px 0; border-radius:12px; min-height:515px; }.spotlight [data-spotlight] { min-height:515px; align-items:flex-end; }.spotlight__backdrop img { object-position:62% 22%; height:76%; }.spotlight__backdrop:after { background:linear-gradient(0deg,#11141d 5%,#11141df5 28%,#11141d70 60%,#11141d00 95%); }.spotlight__copy { width:100%; padding:195px 22px 70px; }.feature-label { font-size:8px; }.spotlight h1 { font-size:32px; margin:14px 0 8px; line-height:1.12; }.spotlight__english { font-size:10px; }.spotlight__genre { font-size:10px; gap:9px; margin-top:13px; }.spotlight__synopsis { font-size:11px; margin-top:12px; line-height:1.75; -webkit-line-clamp:2; }.spotlight__actions { margin-top:18px; gap:10px; }.spotlight__actions .btn { min-height:42px; padding:0 18px; font-size:12px; }.spotlight__actions .icon-btn { min-width:42px; width:42px; height:42px; }.feature-detail { font-size:10px; margin:0; }
  .spotlight__controls { left:22px; right:22px; bottom:18px; }.spotlight__dots { gap:7px; }.spotlight__dots button { width:25px; height:23px; padding:0; border:0; background:none; border-radius:0; position:relative; }.spotlight__dots button:after { content:''; position:absolute; height:3px; border-radius:3px; background:#ffffff35; left:0; right:0; }.spotlight__dots button[aria-pressed=true] { background:none; }.spotlight__dots button[aria-pressed=true]:after { background:var(--brand); }.spotlight__dots img,.spotlight__dots button>span { display:none; }.spotlight__arrows .icon-btn { height:27px; width:27px; min-width:27px; }
  .studio-genres { padding:18px 0; margin:0; gap:7px; }.studio-genres a { font-size:10px; padding:0 12px; min-height:33px; }.studio-section { margin:25px 0 34px; }.studio-title,.section__title { font-size:21px; letter-spacing:0; }.section__head { margin-bottom:18px; }.section__sub { font-size:10px; margin-top:6px; }.section__head .text-link { font-size:10px; }.studio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }.pcard__art { border-radius:9px; }.pcard__info { padding-top:10px; }.pcard__title { font-size:13px; }.pcard__meta { font-size:10px; margin-top:4px; }.pcard__top { padding:9px; }.pcard__eps { font-size:8px; padding:4px 5px; }.pcard__play { width:44px; height:44px; }
  .discovery-banner { padding:25px; flex-direction:column; align-items:flex-start; gap:18px; margin:32px 0; }.discovery-banner h2 { font-size:21px; }.discovery-banner p { font-size:10px; }.discovery-banner .btn { min-height:40px; font-size:11px; }.studio-footer { grid-template-columns:1fr; margin-top:32px; gap:15px; padding:25px 0; font-size:9px; }.studio-footer>p { justify-self:start; }.studio-footer>small { font-size:8px; }
  .collection-heading { padding:30px 0 23px; }.collection-heading h1 { font-size:27px; margin:11px 0; }.collection-heading p { font-size:11px; }.catalog-filters { padding:0 14px; }.catalog-genres { gap:7px; padding:15px 0; }.chip { min-height:34px; font-size:10px; padding:0 10px; }.catalog-options { flex-wrap:wrap; gap:8px; }.catalog-options>div { gap:17px; }.catalog-options label { width:100%; justify-content:flex-end; border-top:1px solid var(--line); padding-top:10px; }.catalog-status { min-height:60px; font-size:11px; }
  .series-hero { grid-template-columns:105px 1fr; gap:16px; padding:22px 18px; }.series-copy { display:contents; }.series-poster { grid-column:1; grid-row:1/5; align-self:start; }.series-copy .eyebrow { grid-column:2; font-size:6px; letter-spacing:.8px; align-self:end; }.series-copy .eyebrow>span { display:block; }.series-copy h1 { grid-column:2; font-size:23px; margin:0; align-self:end; }.series-original { grid-column:2; font-size:9px; margin:-5px 0 0; }.series-tags { grid-column:2; margin:0; gap:5px; align-self:start; }.series-tags .tag { font-size:8px; padding:4px 5px; }.series-intro { grid-column:1/-1; margin:0; font-size:11px; }.series-actions { grid-column:1/-1; margin:0; gap:8px; }.series-actions .btn { min-height:42px; font-size:11px; padding:0 13px; }.series-availability { grid-column:1/-1; margin:0; font-size:10px; }.series-content { grid-template-columns:1fr; gap:25px; margin:30px 0; }.story-text { font-size:12px; }.series-facts { padding:20px; }
  .player-breadcrumb { font-size:9px; padding:13px 0; gap:10px; }.player-breadcrumb>span:nth-child(2) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.player-breadcrumb .text-link { flex-shrink:0; font-size:10px; }.watch-layout { grid-template-columns:1fr; gap:8px; }.player-stage { height:min(69vh,620px); min-height:370px; border-radius:11px; }.player-stage.is-landscape { min-height:0; height:auto; aspect-ratio:16/9; }.custom-controls { padding:28px 12px 6px; }.player-controls-row { gap:3px; }.player-controls-row [data-pip],.player-volume input,.player-controls-row .player-skip { display:none; }.player-time { font-size:11px; padding:0 3px; }.player-rate select { font-size:11px; width:46px; }.player-big-play { width:56px; height:56px; }.player-big-play svg { width:26px; height:26px; }.is-landscape .player-big-play { top:42%; }.player-message { padding:22px; }.player-message h2 { font-size:21px; }.player-message p { font-size:11px; }.player-message__icon { width:54px; height:54px; }.player-toolbar { gap:8px; }.player-toolbar .text-link { font-size:10px; }.autoplay-switch { font-size:9px; }.watch-story { padding:22px 0 15px; }.watch-story h1 { font-size:24px; }.episode-panel { position:static; padding:21px; }.episode-grid { grid-template-columns:repeat(6,minmax(0,1fr)); max-height:260px; gap:8px; }.episode-button { min-height:41px; }
  .resume-grid { grid-template-columns:1fr; }.resume-card { padding:10px; }.my-list-stats { gap:20px; }.my-list-stats b { font-size:21px; margin-right:5px; }.my-list-stats>span { font-size:9px; }.my-list-stats small { flex-basis:100%; margin-left:0; }.recent-grid { grid-template-columns:1fr; gap:0; }.studio-searchbox { padding:8px 8px 8px 14px; gap:10px; }.studio-searchbox input { font-size:12px; }.studio-searchbox .btn { min-height:40px; padding:0 14px; font-size:11px; }.search-content { margin-top:25px; }
}
@media(max-width:370px) { .app,.app.has-tabbar:not(.tabbar-hidden) { padding-left:14px; padding-right:14px; }.studio-header { padding:0 14px; }.studio-brand b { font-size:16px; }.studio-header__actions { gap:6px; }.feature-detail { display:none; }.spotlight h1 { font-size:29px; }.episode-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }