:root{color-scheme:dark;--bg:#0b0d11;--ink:#f7f2e8;--muted:#bcb5aa;--gold:#f5ce86;--line:#ffffff24;font:15px/1.5 Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.48;cursor:default}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
header{height:74px;padding:0 5vw;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--line);background:#101217}.brand{font-weight:750;font-size:23px;letter-spacing:-.07em;white-space:nowrap}.brand i{display:inline-block;background:var(--gold);width:8px;height:8px;border-radius:50%;margin:0 8px 3px 0}.brand span{color:var(--muted);font-size:10px;letter-spacing:.15em;margin-left:5px}.private{color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-left:auto}.outline{background:#17191f;border:1px solid var(--line);border-radius:30px;padding:7px 13px;font-size:12px;white-space:nowrap}
main{max-width:1150px;margin:auto;display:grid;grid-template-columns:1fr 1.12fr;align-items:center;gap:8vw;padding:25px 6vw}.intro{max-width:365px}.label{font-size:10px;letter-spacing:.24em;color:var(--gold);font-weight:750;margin:0 0 10px}h1,h2{font-family:Georgia,serif;line-height:1;letter-spacing:-.035em;margin:0}h1{font-size:clamp(43px,5.6vw,73px)}.synopsis{max-width:315px;color:var(--muted);margin:21px 0 30px}.rule{height:1px;background:var(--line);margin-bottom:16px}.episode{width:100%;display:flex;align-items:center;gap:13px;background:transparent;border:1px solid transparent;border-bottom-color:var(--line);padding:12px;font-size:14px;text-align:left}.episode.active{background:#1a1816;border-color:#c9a46965;border-radius:9px}.episode span,.episode small{color:var(--gold)}.episode small{margin-left:auto}
.viewer{position:relative;width:min(100%,calc((100dvh - 124px)*.5625));min-width:min(270px,100%);justify-self:center}.feed{aspect-ratio:9/16;overflow:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;border:1px solid var(--line);border-radius:18px;background:#111621;box-shadow:0 22px 65px #0009}.feed::-webkit-scrollbar{display:none}.scene{height:100%;position:relative;isolation:isolate;scroll-snap-align:start;scroll-snap-stop:always;background:#101521 url('/poster.jpg') center/cover no-repeat}.scene video,.shade,.locked::before{position:absolute;inset:0;width:100%;height:100%}.scene video{object-fit:contain}.shade{pointer-events:none;background:linear-gradient(#0008,transparent 18%,transparent 63%,#080a10ee)}.top,.bottom{position:absolute;left:0;right:0;padding:16px;z-index:1}.top{top:0;display:flex;justify-content:space-between;pointer-events:none}.top span{font-size:10px;font-weight:750;letter-spacing:.1em;background:#0b0d11b8;border:1px solid #ffffff30;border-radius:30px;padding:5px 9px}.bottom{bottom:0}.bottom h2{font-size:24px;margin-bottom:9px}.play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:60px;height:60px;border-radius:50%;border:1px solid #fff7;background:#090b10ba;backdrop-filter:blur(5px);font-size:22px}.play.is-playing{opacity:0}.play:hover,.play:focus-visible{opacity:1}.controls{display:flex;gap:8px;align-items:center;font-size:11px}.controls input{min-width:0;flex:1;accent-color:var(--gold)}.controls button{padding:2px 7px}.swipe,.text{border:0;background:none;color:var(--ink);font-size:12px;padding:8px;text-align:center}.swipe{display:block;width:100%;color:#e5d6bc;margin:6px auto -7px}.locked::before{content:'';background:#080a12c7;backdrop-filter:blur(6px);z-index:-1}.offer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:42px 23px;text-align:center}.offer h2{font-size:clamp(29px,4vw,40px)}.offer p{color:#e0d9cc;font-size:13px;max-width:240px}.lock{border:1px solid #f5ce8670;border-radius:50%;display:grid;place-items:center;width:49px;height:49px;margin-bottom:14px}.gold{border:0;background:var(--gold);color:#1a1309;border-radius:9px;font-weight:750;padding:11px 16px;min-height:44px}.offer .gold{width:100%;max-width:240px}.offer .text{text-decoration:underline;text-underline-offset:3px}.offer #offer-status{font-size:11px;margin:3px 0 0}.back{position:absolute;bottom:13px}.arrows{display:grid;gap:9px;position:absolute;left:calc(100% + 14px);top:46%}.arrows button{border-radius:50%;width:37px;height:37px;background:#17191f;border:1px solid var(--line)}
dialog{background:#181a20;color:var(--ink);border:1px solid var(--line);border-radius:18px;width:min(420px,calc(100% - 28px));padding:26px}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}dialog h2{font-size:33px;padding-right:20px}dialog p{color:var(--muted)}dialog label{display:block;font-size:13px;margin:9px 0 4px}dialog input{width:100%;border:1px solid var(--line);border-radius:7px;background:#0d1016;padding:10px;color:var(--ink);font-size:16px}dialog .close{position:absolute;right:12px;top:7px;font-size:26px;border:0;background:none}dialog .gold{width:100%}dialog .text{width:100%;margin-top:5px}
@media(max-width:680px){header{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;gap:8px}.brand{font-size:19px}.brand span{font-size:8px;margin-left:2px}.private{font-size:9px;letter-spacing:.06em}.outline{padding-inline:9px}main{display:block;padding:0}.intro,.arrows{display:none}.viewer{width:100%;min-width:0;margin:auto}.feed{height:calc(100dvh - 58px - env(safe-area-inset-top));aspect-ratio:auto;border:0;border-radius:0}.scene{background-size:contain}.bottom{padding-bottom:calc(14px + env(safe-area-inset-bottom))}.back{bottom:calc(11px + env(safe-area-inset-bottom))}.offer{padding-inline:26px}.offer h2{font-size:36px}.scene video{object-fit:contain}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#expand{position:absolute;z-index:3;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#0b0d11d9;font-size:23px;line-height:1}
.top{padding-right:60px}
.view-expanded{overflow:hidden}
.view-expanded .viewer{position:fixed;inset:0;z-index:5;width:100%;background:#080a10}
.view-expanded .feed{width:min(100%,100dvh * .5625);height:100%;aspect-ratio:auto;margin-inline:auto;border:0;border-radius:0;box-shadow:none}
.view-expanded .scene{background-size:contain}
.view-expanded #expand{top:calc(8px + env(safe-area-inset-top));right:max(calc(8px + env(safe-area-inset-right)),calc((100% - 100dvh * .5625) / 2 + 8px))}
.view-expanded .top{padding-top:calc(16px + env(safe-area-inset-top))}
.view-expanded .bottom{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.view-expanded .back{bottom:calc(13px + env(safe-area-inset-bottom))}
.view-expanded .arrows{display:none}
@media(max-width:680px){.view-expanded .feed{width:100%}}

.view-expanded .viewer,.view-expanded .feed{background:#1c1c1c}
.view-expanded .scene{background-color:#1c1c1c}
.view-clean .shade,.view-clean .top,.view-clean .bottom,.view-clean #expand,.view-clean .play,.view-clean .back{opacity:0;pointer-events:none}
.view-expanded:not(.view-clean) .play{opacity:1}

.view-expanded .viewer,.view-expanded .feed,.view-expanded .scene{background-color:#000}
.view-expanded #expand{right:auto;left:max(calc(8px + env(safe-area-inset-left)),calc((100% - 100dvh * .5625) / 2 + 8px));font-size:34px}
.view-expanded .top{padding-left:60px;padding-right:16px}

@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .view-expanded .feed { width: 100%; }
  .view-expanded .scene { background-size: contain; }
  .view-expanded .scene video { object-fit: contain; object-position: center; }
  .view-expanded #expand { left: calc(8px + env(safe-area-inset-left)); }
}

@media (display-mode: standalone) {
  .view-expanded .viewer { min-height: 100lvh; }
}

#trailer-dialog{width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:14px}
.trailer-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
#trailer-title{font-size:24px;padding:0}
#close-trailer{font-size:20px;line-height:1;min-width:38px;min-height:38px}
#trailer{display:block;width:min(100%, calc((100dvh - 112px) * .5625));aspect-ratio:9/16;margin:auto;background:#000}
@media(max-width:680px){header .private{display:none}header #watch-trailer{margin-left:auto}}

#open-episodes{position:absolute;z-index:3;right:12px;bottom:14px;min-height:40px;background:#101217e8;border-color:#ffffff40}
.view-expanded #open-episodes{bottom:calc(14px + env(safe-area-inset-bottom))}
.view-clean #open-episodes{opacity:0;pointer-events:none}
.series-name{font-size:11px;color:#e2d7c5;letter-spacing:.12em;text-transform:uppercase;margin:0 0 5px}
.scene .bottom{padding-inline:18px}
.scene .bottom h2{font-size:clamp(24px,5vw,34px)}
.scene .bottom .swipe{width:auto;margin:8px auto -4px 0;padding:0 6px 0 0;min-height:40px}
.scene .bottom .swipe span{margin-left:4px}
.feed{touch-action:pan-y}
#episode-dialog-title{font-size:30px;padding:0}
#close-episodes{font-size:20px;min-height:38px}
#episode-dialog .episode{min-height:51px}
.locked .back{width:auto;left:14px;margin:0}
.view-expanded .scene .bottom{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@media(max-width:680px){
  .viewer .feed{border-radius:0}
  .scene .bottom{padding-inline:16px}
}

.scene{background-image:none}
.scene.locked{background:radial-gradient(ellipse at 50% 35%,#3a3023,#101217 70%)}
.scene.locked::before{backdrop-filter:none;background:#0003}
.scene .bottom{padding-bottom:68px}
.scene .bottom h2{font-family:Georgia,serif;font-size:25px;margin-bottom:5px}
.series-name{letter-spacing:.06em;font-size:11px}
.episode-time{font-size:12px;color:#e9e5dd;margin:0 0 10px}
.controls{display:grid;grid-template-columns:1fr auto auto;gap:9px}
.controls input{width:100%;margin:0;min-height:28px}
.controls .outline{min-height:36px;min-width:40px}
.scene .bottom .swipe{display:none}
#share-episode,#open-episodes{position:absolute;z-index:3;bottom:12px;min-height:40px;background:#101217df}
#share-episode{left:16px}
#open-episodes{right:16px}
.view-expanded #share-episode,.view-expanded #open-episodes{bottom:calc(12px + env(safe-area-inset-bottom))}
.view-expanded .scene .bottom{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
.view-clean #share-episode{opacity:0;pointer-events:none}
#share-title{font-size:26px;padding:0}
#share-link{margin-bottom:14px}
@media(max-width:680px){.scene .bottom{padding-bottom:calc(66px + env(safe-area-inset-bottom))}}
