:root { color-scheme: dark; --bg:#05070b; --fg:#f4f7f8; --muted:#a0b8c7; --blue:#b3d9eb; --gold:#e8c56b; --line:#27333d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:#486372 #0a1018; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:Sora,sans-serif; font-size:15px; line-height:1.65; }
::selection { background:var(--blue); color:var(--bg); }
button, input { font:inherit; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
a:hover { color:var(--blue); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
input { caret-color:var(--blue); }
svg { width:20px; height:20px; flex:none; }
img { display:block; max-width:100%; }
h1,h2,h3 { text-wrap:balance; line-height:1.18; letter-spacing:-.03em; font-weight:400; }
p { text-wrap:pretty; }
.container { width:min(1180px,calc(100% - 80px)); margin-inline:auto; }
.muted { color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; border:1px solid transparent; border-radius:12px; padding:12px 21px; font-size:13px; line-height:1.4; font-weight:500; text-align:center; transition:background .2s,color .2s,border-color .2s; }
.button--primary { background:var(--fg); color:#070a0f; }
.button--primary:hover { background:#cce5f0; color:#070a0f; }
.button--secondary { border-color:#4b6473; background:transparent; color:#c0dbe8; }
.button--secondary:hover { background:#14212b; color:#f4f7f8; border-color:var(--blue); }
.text-link { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:transparent; color:var(--blue); text-decoration:underline; text-underline-offset:5px; font-size:inherit; }
.text-link:hover { color:#f4f7f8; }
.skip-link { position:fixed; z-index:50; top:8px; left:8px; padding:10px 20px; background:white; color:black; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.skip-link:hover { color:#05070b; }
.site-header { height:90px; padding:0 44px; display:flex; align-items:center; gap:40px; border-bottom:1px solid #1b252e; background:var(--bg); position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:12px; flex:none; min-height:44px; font-size:14px; font-weight:600; letter-spacing:.14em; }
.brand img { object-fit:contain; }
.site-header nav { display:flex; justify-content:center; gap:34px; margin:auto; font-size:13px; }
.site-header nav a { position:relative; padding:14px 0; color:#a7bdca; }
.site-header nav a[aria-current] { color:var(--fg); }
.site-header nav a[aria-current]::after { content:""; position:absolute; bottom:4px; height:1px; left:0; right:0; background:var(--blue); }
.header-account { min-height:44px; background:none; color:#c5d9e4; border:1px solid #344a59; border-radius:12px; padding:8px 16px; font-size:12px; }
.map-hero { position:relative; overflow:hidden; }
.map-composition { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:10px; padding:0 44px 28px 0; min-height:590px; }
.selected-film { align-self:center; padding:0 0 12px; min-width:0; position:relative; z-index:2; }
.selected-film-image { aspect-ratio:16/9; width:100%; height:auto; object-fit:cover; border-radius:12px; background:#121a23; }
.selected-film-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; margin:19px 0 8px; }
.selected-film h2 { font-size:31px; margin:0 0 14px; }
.selected-film-desc { font-size:13px; color:#c0d0da; margin:20px 0 5px; line-height:1.75; }
.selected-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:9px; }
.selected-actions .button { width:100%; }
.selected-actions .button:only-child { grid-column:1/-1; }
.selected-actions .button { padding-inline:10px; font-size:12px; }
#main { overflow-anchor:none; }
.map-shortcuts { margin:0 44px; display:flex; align-items:center; gap:16px; padding:15px 0 26px; border-bottom:1px solid var(--line); }
.map-shortcuts > span { color:var(--muted); font-size:11px; flex:none; }
.map-shortcut-list { display:flex; gap:8px; overflow-x:auto; padding:6px 4px; scrollbar-width:thin; }
.map-shortcut-list button { display:flex; align-items:center; gap:8px; white-space:nowrap; border:1px solid #314653; padding:9px 13px; border-radius:999px; background:transparent; color:#b0c5d2; font-size:11px; min-height:44px; }
.map-shortcut-list button[aria-pressed="true"] { background:#162c3c; color:#d3eaf5; border-color:#81b7d1; }
.map-shortcut-list em { font-style:normal; font-size:11px; color:var(--gold); }
.chapter { margin:92px auto; scroll-margin-top:24px; }
.chapter-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin:0 0 30px; }
.chapter-heading h2 { margin:0 0 12px; font-size:clamp(30px,3.3vw,44px); }
.chapter-heading p { color:var(--muted); margin:0; font-size:14px; max-width:58ch; }
.rail-controls { display:flex; gap:8px; flex:none; }
.rail-controls button { height:44px; width:44px; display:flex; justify-content:center; align-items:center; background:none; color:#c4dbe9; border:1px solid #425768; border-radius:50%; }
.episode-rail { display:flex; gap:24px; overflow-x:auto; padding:7px 3px 22px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#4c6576 #111a23; }
.episode-card { flex:0 0 min(330px,76vw); scroll-snap-align:start; min-width:0; }
.episode-card .cover-link { display:block; overflow:hidden; border-radius:12px; aspect-ratio:16/9; background:#101822; }
.episode-card img { width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.episode-card .card-meta { display:flex; justify-content:space-between; margin:17px 0 7px; color:var(--muted); font-size:11px; }
.episode-card .card-meta span:last-child { color:var(--gold); }
.episode-card h3 { margin:0 0 10px; font-size:20px; line-height:1.4; }
.episode-card p { color:#a8c0ce; font-size:12px; line-height:1.7; margin:0; }
.episode-card .text-link { font-size:12px; margin-top:16px; min-height:36px; }
.chapter-nav { position:fixed; left:5px; top:44%; z-index:4; display:flex; flex-direction:column; gap:4px; }
.chapter-nav a { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; }
.chapter-nav a::before { content:""; width:7px; height:7px; border:1px solid #839ead; border-radius:50%; background:#05070b; }
.chapter-nav a[aria-current]::before { background:var(--blue); border-color:var(--blue); }
.chapter-nav a span { display:none; }
.chapter-nav a:hover span,.chapter-nav a:focus-visible span { display:block; position:absolute; top:50%; left:39px; transform:translateY(-50%); white-space:nowrap; font-size:11px; background:#101c27; padding:4px 8px; border-radius:5px; }
.site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:24px; padding-block:38px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; margin-top:80px; }
.site-footer .brand { font-size:11px; color:#f4f7f8; }
.site-footer > a { margin-left:auto; color:var(--blue); }
.site-footer > .brand { margin-left:0; }
.planet-attribution { flex-basis:100%; color:#94adbd; font-size:11px; line-height:1.8; }
.planet-attribution a { text-decoration:underline; }
@media (hover:hover) and (pointer:fine) { .episode-card .cover-link:hover img { transform:scale(1.025) rotate(.5deg); } }
@media (prefers-reduced-motion:no-preference) {
  .selected-film.is-arriving .selected-film-image { animation:film-arrives .5s cubic-bezier(.16,1,.3,1); }
  .selected-film.is-arriving h2 { animation:title-arrives .34s cubic-bezier(.16,1,.3,1); }
  @keyframes film-arrives { from { clip-path:inset(0 0 10% 0); transform:translateY(8px); } to { clip-path:inset(0); transform:none; } }
  @keyframes title-arrives { from { clip-path:inset(0 0 20% 0); transform:translateY(5px); } to { clip-path:inset(0); transform:none; } }
}
@media (max-width:1000px) {
  .container { width:calc(100% - 48px); }
  .site-header { padding-inline:24px; gap:22px; }
  .map-composition { grid-template-columns:minmax(0,1fr) 310px; padding-right:24px; }
  .selected-film h2 { font-size:26px; }
  .map-shortcuts { margin-inline:24px; }
  .chapter-nav { display:none; }
}
@media (max-width:700px) {
  .container { width:calc(100% - 40px); }
  .site-header { height:76px; padding-inline:20px; gap:16px; flex-wrap:wrap; align-content:center; }
  .brand { font-size:11px; gap:7px; letter-spacing:.1em; }
  .brand img { width:27px; height:27px; }
  .site-header nav { gap:17px; font-size:11px; margin-left:auto; margin-right:0; }
  .header-account { display:none; }
  .map-composition { display:flex; flex-direction:column; padding:0; gap:0; }
  .selected-film { padding:0 20px 20px; width:100%; }
  .selected-film-image { aspect-ratio:16/9; }
  .selected-film h2 { font-size:29px; }
  .selected-film-meta { margin-top:16px; }
  .selected-film-desc { font-size:13px; margin-bottom:5px; }
  .selected-actions { grid-template-columns:1fr; }
  .map-shortcuts { margin-inline:20px; gap:8px; display:block; padding-top:0; padding-bottom:18px; }
  .map-shortcuts > span { display:block; margin:5px 0; }
  .map-shortcut-list { margin-inline:-4px; }
  .chapter { margin-block:62px; }
  .chapter-heading { gap:14px; align-items:start; }
  .chapter-heading h2 { font-size:29px; }
  .chapter-heading p { font-size:12px; }
  .rail-controls { gap:6px; margin-top:4px; }
  .rail-controls button { width:44px; height:44px; }
  .episode-rail { gap:18px; margin-right:-20px; padding-right:20px; }
  .episode-card { flex-basis:78vw; }
  .site-footer { flex-wrap:wrap; gap:14px; padding-block:30px; margin-top:52px; }
  .site-footer p { margin:0; }
  .site-footer > a:last-child { margin-left:0; flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }

.footer-links { display:flex; flex-wrap:wrap; gap:4px 22px; flex-basis:100%; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); }
.footer-links a:hover { color:var(--blue); }