:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#101114; color:#fff; --orange:#ff6d25; --panel:#202124; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:72px; } body { position:relative; min-width:320px; margin:0; overflow-x:hidden; background:#101114; } a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:10; top:0; right:0; left:0; padding:20px 50px; }.header-inner { display:flex; align-items:center; gap:24px; max-width:1540px; margin:0 auto; }.brand { display:block; flex:0 0 auto; }.brand img { display:block; width:175px; height:auto; }.site-nav { display:flex; align-items:center; gap:4px; padding:4px; border-radius:999px; background:rgba(63,63,66,.64); backdrop-filter:blur(16px); }.site-nav a { padding:12px 33px; border-radius:999px; color:rgba(255,255,255,.68); font-size:16px; font-weight:650; transition:color .18s ease,background .18s ease; }.site-nav a:hover,.site-nav a.is-active { background:rgba(122,122,125,.48); color:var(--orange); }.header-tools { display:flex; align-items:center; gap:18px; margin-left:auto; }.search { display:flex; width:245px; align-items:center; gap:10px; padding:0 16px; border-radius:999px; background:rgba(68,68,72,.72); color:#fff; backdrop-filter:blur(12px); }.search span { font-size:26px; line-height:1; transform:rotate(-20deg); }.search input { width:100%; height:44px; border:0; outline:0; background:transparent; color:#fff; font:inherit; }.search input::placeholder { color:rgba(255,255,255,.75); }.menu-toggle { display:none; }
.hero { position:relative; min-height:560px; overflow:hidden; background:#0e0e10; }.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }.hero-gradient { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,11,12,.93) 0%,rgba(10,11,12,.68) 27%,rgba(10,11,12,.12) 63%,rgba(10,11,12,.72) 100%),linear-gradient(0deg,#101114 0%,rgba(16,17,20,0) 37%); }.hero-copy { position:relative; z-index:1; display:flex; width:min(100% - 100px,1540px); min-height:560px; flex-direction:column; justify-content:center; align-items:flex-start; margin:0 auto; padding:110px 0 40px; }.hero-kicker { margin:0 0 12px; color:#ff9866; font-size:12px; font-weight:800; letter-spacing:.12em; }.hero h1 { max-width:480px; margin:0 0 16px; font-size:clamp(31px,3vw,45px); font-weight:800; letter-spacing:-.04em; line-height:1.17; }.hero-copy > p:not(.hero-kicker) { max-width:390px; margin:0 0 27px; color:rgba(255,255,255,.78); font-size:16px; line-height:1.55; }.play-button { display:inline-flex; min-width:218px; min-height:60px; align-items:center; justify-content:center; gap:12px; border:0; border-radius:999px; background:#fff; color:#151518; font-family:inherit; font-size:18px; font-weight:800; cursor:pointer; transition:transform .2s ease,background .2s ease; }.play-button:hover { background:#ffe4d4; transform:translateY(-2px); }.play-button span { font-size:16px; }.hero-dots { position:absolute; z-index:2; right:max(50px,calc((100% - 1540px)/2)); bottom:46px; display:flex; align-items:center; gap:9px; }.hero-dots span { width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.53); }.hero-dots .is-current { width:30px; background:#fff; }
.page-content { width:min(100% - 100px,1540px); margin:0 auto; padding:44px 0 88px; }.shelf { margin-bottom:53px; }.section-title { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:21px; }.section-title h2 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.04em; }.rail-controls { display:flex; gap:9px; }.rail-controls button { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#242528; color:#fff; cursor:pointer; font-size:27px; line-height:1; }.rail-controls button:hover { border-color:#ff9a6e; background:#38383c; }.poster-rail { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; overflow-x:auto; padding:0 1px 6px; scrollbar-width:none; scroll-behavior:smooth; }.poster-rail::-webkit-scrollbar { display:none; }.poster { position:relative; display:grid; min-width:0; gap:10px; padding:0; border:0; background:none; color:#f7f7f8; font-family:inherit; font-size:15px; font-weight:650; line-height:1.3; text-align:left; cursor:pointer; appearance:none; }.poster img { display:block; width:100%; aspect-ratio:293/390; border-radius:14px; object-fit:cover; box-shadow:0 12px 22px rgba(0,0,0,.24); transition:transform .22s ease,filter .22s ease; }.poster:hover img { filter:brightness(1.1); transform:translateY(-5px) scale(1.015); }.poster::after { content:"▶"; position:absolute; top:calc(50% - 15px); left:50%; display:grid; width:56px; height:56px; place-items:center; padding-left:4px; border-radius:50%; background:rgba(255,109,37,.94); color:#fff; font-size:19px; opacity:0; transform:translate(-50%,-50%) scale(.85); transition:opacity .2s ease,transform .2s ease; pointer-events:none; }.poster:hover::after,.poster:focus-visible::after { opacity:1; transform:translate(-50%,-50%) scale(1); }.poster span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.fandom-banner { display:flex; align-items:center; justify-content:space-between; gap:50px; margin-top:72px; padding:45px 52px; border:1px solid rgba(255,124,72,.25); border-radius:24px; background:radial-gradient(circle at 78% 40%,rgba(255,93,31,.24),transparent 28%),linear-gradient(120deg,#282329,#1c1d20); }.fandom-banner p { margin:0 0 8px; color:#ff9b73; font-size:12px; font-weight:850; letter-spacing:.12em; }.fandom-banner h2 { max-width:580px; margin:0 0 10px; font-size:29px; letter-spacing:-.035em; }.fandom-banner span { color:rgba(255,255,255,.7); font-size:15px; }.fandom-banner > a,.fandom-banner > button { display:inline-flex; flex:0 0 auto; align-items:center; gap:11px; padding:15px 23px; border:0; border-radius:999px; background:var(--orange); color:#fff; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; }.fandom-banner > a:hover,.fandom-banner > button:hover { background:#ff8245; }
footer { display:flex; width:min(100% - 100px,1540px); align-items:center; gap:28px; margin:0 auto; padding:28px 0 42px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:13px; } footer > img { width:146px; height:auto; } footer > div { display:flex; gap:18px; margin-left:auto; } footer a:hover { color:#fff; }
body.is-locked { overflow:hidden; }
.language-switcher { position:relative; font-size:15px; }.language-button { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:rgba(68,68,72,.72); backdrop-filter:blur(12px); color:#fff; font-family:inherit; font-size:15px; font-weight:650; white-space:nowrap; cursor:pointer; }.language-button:hover { background:rgba(90,90,95,.8); }.language-button > span:first-child { font-size:18px; }.language-menu { position:absolute; z-index:20; top:calc(100% + 8px); right:0; min-width:152px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(25,25,29,.98); box-shadow:0 18px 40px rgba(0,0,0,.45); }.language-menu[hidden] { display:none; }.language-option { display:block; width:100%; padding:10px 12px; border:0; border-radius:9px; background:transparent; color:#f5f7fa; font-family:inherit; font-size:14px; text-align:left; white-space:nowrap; cursor:pointer; }.language-option:hover,.language-option.is-active { background:rgba(255,109,37,.16); color:#ff9a6e; }
.player { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(9,9,11,.86); backdrop-filter:blur(8px); }.player[hidden] { display:none; }.player-dialog { position:relative; width:min(100%,380px); padding:26px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:#19191d; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:player-pop .2s ease-out; }.player-close { position:absolute; z-index:2; top:10px; right:10px; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:#a3a3aa; font-family:inherit; font-size:26px; line-height:1; cursor:pointer; }.player-close:hover { background:rgba(255,255,255,.08); color:#fff; }.player-kicker { margin:0 0 6px; color:#ff9866; font-size:11px; font-weight:800; letter-spacing:.12em; }.player-title { margin:0 36px 22px 0; font-size:20px; letter-spacing:-.02em; }.player-loading { text-align:center; }.player-loading[hidden],.player-error[hidden] { display:none; }.loading-spinner { width:42px; height:42px; margin:0 auto 18px; border:3px solid rgba(255,109,37,.18); border-top-color:var(--orange); border-radius:50%; animation:loading-spin .8s linear infinite; }.player-status { min-height:24px; margin:0 0 18px; color:rgba(255,255,255,.86); font-size:15px; font-weight:600; }.progress-track { height:8px; overflow:hidden; border-radius:999px; background:#343439; }.progress-fill { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ff6d25,#ffa46b); box-shadow:0 0 12px rgba(255,109,37,.35); }.progress-value { margin:10px 0 0; color:#a3a3aa; font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }.player-error { padding:18px 0 6px; text-align:center; }.error-icon { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 14px; border-radius:50%; background:rgba(255,112,112,.14); color:#ff7070; font-size:28px; font-weight:700; }.error-message { margin:0; font-size:16px; font-weight:700; }.error-hint { margin:8px 0 0; color:#a3a3aa; font-size:13px; }
@keyframes loading-spin { to { transform:rotate(360deg); } }
@keyframes player-pop { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
@media (max-width:1050px) { .site-header { padding:17px 28px; }.header-inner { gap:17px; }.brand img { width:150px; }.site-nav a { padding:10px 17px; }.search { width:190px; }.hero-copy,.page-content,footer { width:min(100% - 56px,900px); }.hero-dots { right:28px; }.poster-rail { display:flex; }.poster { width:175px; flex:0 0 175px; }.fandom-banner { padding:36px; } }
@media (max-width:720px) { .site-header { padding:15px 18px; }.header-inner { gap:12px; }.brand img { width:140px; }.menu-toggle { display:grid; width:39px; height:39px; place-content:center; gap:5px; margin-left:auto; border:0; border-radius:9px; background:rgba(49,49,53,.7); color:#fff; }.menu-toggle span { display:block; width:18px; height:2px; border-radius:3px; background:currentColor; }.site-nav { position:absolute; top:65px; right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:2px; padding:8px; border-radius:13px; background:#242529; }.site-nav.is-open { display:flex; }.site-nav a { padding:12px 14px; }.header-tools { display:flex; gap:0; order:2; }.header-tools .search { display:none; }.menu-toggle { order:3; margin-left:0; }.hero { min-height:505px; }.hero > img { object-position:55% center; }.hero-gradient { background:linear-gradient(90deg,rgba(10,11,12,.91) 0%,rgba(10,11,12,.53) 70%,rgba(10,11,12,.38)),linear-gradient(0deg,#101114 0%,rgba(16,17,20,0) 36%); }.hero-copy,.page-content,footer { width:min(100% - 36px,560px); }.hero-copy { min-height:505px; padding:117px 0 32px; }.hero h1 { max-width:327px; font-size:31px; }.hero-copy > p:not(.hero-kicker) { max-width:300px; font-size:14px; }.play-button { min-width:190px; min-height:54px; font-size:16px; }.hero-dots { right:18px; bottom:33px; }.page-content { padding-top:30px; }.shelf { margin-bottom:40px; }.section-title h2 { font-size:23px; }.rail-controls { display:none; }.poster-rail { gap:12px; margin-right:-18px; padding-right:18px; }.poster { width:138px; flex-basis:138px; font-size:13px; }.fandom-banner { align-items:flex-start; flex-direction:column; gap:23px; margin-top:45px; padding:28px 24px; border-radius:18px; }.fandom-banner h2 { font-size:24px; }.fandom-banner span { font-size:14px; }.fandom-banner > a,.fandom-banner > button { padding:13px 18px; } footer { flex-wrap:wrap; gap:14px; padding:25px 0 35px; } footer > div { width:100%; margin-left:0; } .player { padding:14px; }.player-dialog { padding:24px 20px; } }