:root{color-scheme:dark;--bg:#101016;--surface:#191923;--surface-raised:#21212d;--text:#f7f5ff;--muted:#b9b6ca;--line:#353344;--accent:#c6adff;--ink:#21133b;--radius:20px;--gutter:clamp(16px,4vw,56px);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,p{margin:0}
h1{font-size:clamp(2rem,5.5vw,4.7rem);line-height:1;letter-spacing:-.065em;text-wrap:balance}
h2{font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.12;letter-spacing:-.035em}
.shell{width:min(100% - var(--gutter) * 2,1320px);margin-inline:auto}
.top{border-bottom:1px solid #272631;background:#121219}
.nav{display:flex;align-items:center;gap:clamp(16px,4vw,46px);min-height:70px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:1.85rem;font-weight:790;letter-spacing:-.09em;line-height:1}
.brand span{display:grid;place-items:center;width:32px;aspect-ratio:1;border-radius:10px;background:var(--accent);color:var(--ink);font-size:.76rem;letter-spacing:0}
.nav-item,.nav-admin{font-size:.9rem;color:var(--muted);font-weight:620}
.nav-admin{margin-left:auto;border:1px solid var(--line);padding:8px 13px;border-radius:8px}
.nav a:hover{color:var(--accent)}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:480px;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);background:#20202c}
.hero-art{position:absolute;inset:0 0 0 auto;z-index:-2;width:70%;height:100%;object-fit:cover;object-position:center 35%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1a1924 18%,rgba(26,25,36,.95) 35%,rgba(26,25,36,.42) 67%,rgba(26,25,36,.08)),linear-gradient(0deg,#1a1924 1%,transparent 60%)}
.hero-copy{max-width:min(660px,72%);padding:clamp(26px,5vw,66px);display:grid;gap:16px;justify-items:start}
.eyebrow{font-weight:750;font-size:.71rem;letter-spacing:.17em;color:var(--accent);display:flex;align-items:center;gap:8px}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:currentColor}
.hero-meta{font-size:.88rem;font-weight:650;color:#e3dcef}
.synopsis{line-height:1.55;color:#d1ccdf;font-size:.96rem;overflow-wrap:anywhere}
.button{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:8px 15px;border:1px solid transparent;border-radius:9px;font-weight:720;font-size:.88rem}
.primary{color:var(--ink);background:var(--accent)}
.primary:hover{background:#dbcaff}
.secondary{color:var(--text);border-color:var(--line);background:var(--surface-raised)}
.secondary:hover{border-color:var(--accent)}
.section{margin-block:clamp(30px,5vw,64px)}
.section-head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:19px}
.section-head h2,.section-head h1{margin-top:6px}
.section-head form{display:flex;gap:8px;max-width:100%}
.section-head input{min-width:0}
input,textarea,select{background:#171720;color:var(--text);border:1px solid var(--line);border-radius:8px;min-height:42px;padding:9px 12px;width:100%}
textarea{resize:vertical}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),210px));gap:clamp(12px,2.5vw,24px)}
.poster{display:grid;align-content:start;gap:5px;min-width:0}
.poster-art{display:block;overflow:hidden;aspect-ratio:2/3;border-radius:13px;background:var(--surface-raised);border:1px solid var(--line)}
.poster-art img,.resume img{width:100%;height:100%;object-fit:cover}
.poster strong{margin-top:5px}
.poster small,.resume small,.episodes small,.muted{color:var(--muted)}
.poster:hover .poster-art{border-color:var(--accent)}
.resume{max-width:460px;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 16px 10px 10px;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:13px}
.resume img{height:64px;border-radius:8px}
.resume>span:nth-last-child(2){display:grid;gap:4px;grid-column:2}
.resume-play{color:var(--accent);grid-column:3}
progress{width:100%;height:6px;accent-color:var(--accent)}
.back{display:inline-block;margin-top:24px;font-size:.9rem;color:var(--muted)}
.back:hover{color:var(--accent)}
.detail{min-height:410px;margin-top:16px}
.episodes{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:7px}
.episodes a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:52px;overflow-wrap:anywhere}
.episodes a:hover,.episodes a[aria-current]{border-color:var(--accent);background:var(--surface-raised)}
.episodes small{display:block;font-size:.71rem;margin-top:2px}
.number,.episode-mark{color:var(--accent);font-size:.82rem;font-variant-numeric:tabular-nums}
.watch-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,1fr);gap:clamp(18px,4vw,58px);margin:18px auto 0;max-width:1000px}
.watch-title{font-size:clamp(1.8rem,5vw,3.2rem);margin:7px 0 15px}
.stage{position:relative;display:grid;place-items:center;background:#08080b;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.stage video{display:block;width:100%;height:min(66vh,680px);min-height:270px;background:#08080b;object-fit:contain}
.watch-sidebar h2{margin-bottom:12px}
.watch-sidebar h2 small{font-size:.75rem;color:var(--muted)}
.watch-sidebar .episodes{max-height:min(75vh,760px);overflow:auto;padding-right:5px}
.up-next{position:absolute;inset:auto 12px 50px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:#191923f5;padding:12px;border-radius:9px;font-size:.88rem}
[hidden]{display:none!important}
.status{font-size:.87rem;color:var(--muted);min-height:1.5em;margin-block:8px}
.error{color:#ffc0cb}
.narrow{max-width:480px}
.narrow h1,.admin h1{font-size:clamp(2rem,4vw,3.25rem);margin-block:8px 18px}
.editor{display:grid;gap:15px;margin-top:18px;justify-items:start}
.editor label,.admin>label{width:100%;display:grid;gap:6px;font-size:.86rem;color:var(--muted)}
.edit-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.episode-editor{list-style:none;padding:0;margin:0;width:100%;display:grid;gap:8px}
.episode-editor li{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(150px,2fr) auto;align-items:end;gap:10px;padding:10px;background:var(--surface);border-radius:9px}
.episode-editor button{min-height:38px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface-raised);color:var(--text)}
.row-number{align-self:center;color:var(--accent);font-size:.78rem}
.footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:45px;padding-block:22px;color:var(--muted);font-size:.79rem}
@media(max-width:768px){
  .hero{min-height:380px}
  .hero-copy{max-width:85%}
  .watch-grid{grid-template-columns:minmax(0,1fr)}
  .watch-sidebar .episodes{max-height:390px}
  .episode-editor li{grid-template-columns:auto minmax(0,1fr)}
  .episode-editor li label:nth-of-type(2),.episode-editor li .actions{grid-column:2}
}
@media(max-width:550px){
  .nav{min-height:58px}
  .hero{min-height:440px;margin-top:16px;align-items:end}
  .hero-art{width:100%;height:78%;object-position:center 24%}
  .hero::after{background:linear-gradient(0deg,#1a1924 11%,rgba(26,25,36,.96) 36%,rgba(26,25,36,.18) 90%)}
  .hero-copy{max-width:100%;padding:22px;gap:11px}
  .hero-copy .synopsis{font-size:.84rem}
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head form,.edit-grid{width:100%}
  .edit-grid{grid-template-columns:minmax(0,1fr)}
  .stage video{height:min(64vh,630px)}
}.resume-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),460px));gap:12px;margin-top:16px}
.resume-list .resume{margin-top:0;width:100%}
.episodes .resume-tag{color:var(--accent);font-weight:700}
.watch-crumb{margin-top:16px}
.watch-grid{align-items:start}
.watch-grid .stage{border-radius:12px;background:#060607}
.watch-grid .watch-title{font-size:clamp(1.1rem,3vw,1.75rem);line-height:1.25;letter-spacing:-.035em;margin:8px 0 12px;text-wrap:pretty}
.watch-grid .stage video{height:min(66vh,660px)}
.custom-stage{display:block}
.custom-stage video{cursor:pointer}
.custom-stage .up-next{bottom:75px}
.custom-stage #near-end-next{bottom:75px}
#near-end-next{position:absolute;z-index:1;right:12px;bottom:52px;background:#f5f0ff;color:#20172e;border-radius:7px;box-shadow:0 2px 14px #0009}
.player-controls{background:#080809;width:100%;align-self:stretch}
.player-toolbar{display:flex;align-items:center;gap:4px;padding:0 7px 3px}
.player-toolbar button{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;color:#f4f0fb;background:none;border:0;font-size:1rem}
#player-clock,#player-quality{font-variant-numeric:tabular-nums;font-size:.72rem;white-space:nowrap;color:#dfdbe5}
#player-quality{margin-left:auto;color:var(--accent)}
#player-seek{display:block;appearance:none;width:100%;height:20px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
#player-seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) var(--played,0%),#36343b var(--played,0%))}
#player-seek::-moz-range-track{height:3px;background:linear-gradient(to right,var(--accent) var(--played,0%),#36343b var(--played,0%))}
#player-seek::-webkit-slider-thumb{appearance:none;width:11px;height:11px;margin-top:-4px;border-radius:50%;background:var(--accent)}
#player-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--accent)}
.custom-stage:fullscreen{display:flex;flex-direction:column;justify-content:end}
.custom-stage:fullscreen video{height:auto;flex:1 1 auto;min-height:0;max-height:calc(100% - 61px)}
.playlist-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.playlist-head h2{margin:0}
.playlist-head a{font-size:.8rem;color:var(--muted);text-align:right}
.watch-sidebar .episodes{grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:7px;padding:2px}
.watch-sidebar .episodes a{display:grid;place-items:center;position:relative;padding:4px;min-height:44px}
.watch-sidebar .episodes a>span:nth-child(2){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.watch-sidebar .episodes .episode-mark{display:none}
.watch-sidebar .episodes a[aria-current]{background:#352848;box-shadow:inset 0 -3px var(--accent)}
.watch-sidebar .episodes a:has(.resume-tag):not([aria-current]){border-color:#766490}
@media(max-width:768px){
  .watch-grid{gap:22px}
  .watch-sidebar .episodes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:54px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
}
@media(max-width:550px){
  .watch-grid .stage video{height:min(57vh,510px);min-height:225px}
  .player-toolbar{gap:2px;padding-inline:2px}
  .player-toolbar button{width:34px}
  .player-toolbar #player-clock{font-size:.65rem}
}