: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; padding-top:56px; overflow-x:hidden; background:#101114; } a { color:inherit; text-decoration:none; }
.gp-logo { display:block; width:auto; height:26px; flex:0 0 auto; }
.gp-topbar { position:fixed; z-index:60; top:0; right:0; left:0; height:56px; background:#fff; box-shadow:0 1px 12px rgba(0,0,0,.32); }.gp-topbar-inner { display:flex; width:min(100% - 100px,1540px); height:100%; align-items:center; gap:13px; margin:0 auto; color:#1f1f1f; }.gp-topbar-text { min-width:0; overflow:hidden; padding-left:13px; border-left:1px solid #e3e4e6; color:#5f6368; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }.gp-topbar-cta { display:inline-flex; height:36px; flex:0 0 auto; align-items:center; margin-left:auto; padding:0 22px; border-radius:999px; background:#01875f; color:#fff; font-size:14px; font-weight:800; white-space:nowrap; transition:background .18s ease; }.gp-topbar-inner:hover .gp-topbar-cta { background:#046c4e; }
.gp-cta { padding:0 28px; }.gp-cta-text { display:grid; justify-items:center; gap:5px; line-height:1; }.gp-cta-text small { color:#202124; font-size:10px; font-weight:700; letter-spacing:.1em; }.gp-cta .gp-logo { height:24px; }
.fandom-banner > a.gp-cta { padding:13px 28px; background:#fff; color:#151518; }.fandom-banner > a.gp-cta:hover { background:#ffe4d4; }
.site-header { position:absolute; z-index:10; top:56px; 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); }.locale { display:flex; align-items:center; gap:9px; color:#fff; font-size:15px; font-weight:650; white-space:nowrap; }.locale span { font-size:22px; }.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-radius:999px; background:#fff; color:#151518; font-size:18px; font-weight:800; 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 { display:grid; min-width:0; gap:10px; color:#f7f7f8; font-size:15px; font-weight:650; line-height:1.3; }.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 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 { display:inline-flex; flex:0 0 auto; align-items:center; gap:11px; padding:15px 23px; border-radius:999px; background:var(--orange); color:#fff; font-size:15px; font-weight:800; }.fandom-banner > a: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; }
@media (max-width:1050px) { .gp-topbar-inner { width:min(100% - 56px,900px); }.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) { body { padding-top:52px; }.gp-topbar { height:52px; }.gp-topbar-inner { width:min(100% - 28px,560px); gap:11px; }.gp-logo { height:23px; }.gp-topbar-text { padding-left:11px; font-size:12px; }.gp-topbar-cta { height:32px; padding:0 17px; font-size:13px; }.site-header { top:52px; }.gp-cta { padding:0 24px; }.gp-cta .gp-logo { height:21px; }.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:none; }.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 { padding:13px 18px; } footer { flex-wrap:wrap; gap:14px; padding:25px 0 35px; } footer > div { width:100%; margin-left:0; } }