:root {
  --bg: #070a0c;
  --surface: #101517;
  --surface-soft: rgba(21, 29, 31, .72);
  --text: #f5f1e8;
  --muted: #9ca7a8;
  --line: rgba(230, 237, 231, .17);
  --ivory: #eee7dc;
  --accent: #bfc9bf;
  --display: "Italiana", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; }
body.intro-active { overflow:hidden; }
button, input { font: inherit; }
button { color: inherit; }
button, .upload-button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, label:focus-within { outline: 2px solid #f7f2e7; outline-offset: 3px; }

.noise { position: fixed; inset: 0; opacity: .025; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.brand-intro { position:fixed; inset:0; z-index:300; display:grid; place-items:center; align-content:center; background:#030506; overflow:hidden; transition:opacity .8s var(--ease),visibility .8s; }
.brand-intro.done { opacity:0; visibility:hidden; pointer-events:none; }
.intro-aurora { position:absolute; width:min(94vw,980px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(119,165,159,.18),rgba(31,63,67,.07) 36%,transparent 68%); filter:blur(22px); transform:scale(.28); opacity:0; animation:introAurora 2.8s var(--ease) forwards; }
.intro-mark { position:relative; display:flex; align-items:baseline; font-family:var(--display); font-size:clamp(64px,12vw,170px); line-height:.8; letter-spacing:-.075em; filter:drop-shadow(0 0 28px rgba(168,205,199,.12)); }
.intro-mark span { display:inline-block; opacity:0; transform:translateY(28px) scale(.94); filter:blur(12px); animation:introLetter .8s var(--ease) forwards; animation-delay:calc(.28s + var(--i) * .095s); }
.intro-mark i { color:#9dc0ba; font-style:normal; opacity:0; transform:scale(.2); animation:introDot .7s 1.15s var(--ease) forwards; }
.brand-intro>p { position:relative; margin:30px 0 0; color:#718184; font-size:clamp(8px,1vw,11px); letter-spacing:.4em; opacity:0; animation:introTag .8s 1.35s ease forwards; }
.intro-line { position:relative; width:min(270px,58vw); height:1px; margin-top:20px; overflow:hidden; background:rgba(255,255,255,.08); opacity:0; animation:introTag .4s 1.6s forwards; }
.intro-line::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#d8ede8,transparent); transform:translateX(-110%); animation:lightRun 1.2s 1.7s var(--ease) forwards; }
#skipIntro { position:absolute; right:28px; bottom:26px; border:0; background:none; color:#687779; font:500 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; opacity:0; animation:introTag .5s 1s forwards; }
#skipIntro:hover { color:white; }
@keyframes introLetter { to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes introDot { 70%{opacity:1;transform:scale(1.25)} to{opacity:1;transform:scale(1)} }
@keyframes introAurora { 25%{opacity:.8} to{opacity:.42;transform:scale(1)} }
@keyframes introTag { to { opacity:1; } }
@keyframes lightRun { to { transform:translateX(110%); } }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); transition: background .5s, border .5s, backdrop-filter .5s; }
.topbar.scrolled, body:not(.route-home) .topbar { background: rgba(7, 10, 12, .72); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(24px) saturate(130%); }
.brand { font-family: var(--display); color: var(--text); text-decoration: none; font-size: 32px; letter-spacing: -.04em; }
.brand span { color: #aebbb6; }
.desktop-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 5px; background: rgba(15, 20, 22, .36); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; backdrop-filter: blur(16px); }
.nav-link { border: 0; background: transparent; color: #aab3b3; padding: 9px 18px; border-radius: 99px; cursor: pointer; transition: .3s var(--ease); }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.11); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.icon-button, .avatar, .round-button, .sound-button { display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: rgba(18, 25, 27, .52); backdrop-filter: blur(18px); transition: transform .25s var(--ease), background .25s, border .25s; }
.icon-button:hover, .avatar:hover, .round-button:hover, .sound-button:hover { transform: scale(1.06); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42); }
.icon-button { width: 42px; height: 42px; border-radius: 50%; }
.icon-button svg, .sound-button svg, .search-box svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.avatar { width: 42px; height: 42px; border-radius: 50%; color: #101413; font-weight: 600; background: linear-gradient(145deg,#d9c8b5,#8e9d9c); border-color: rgba(255,255,255,.55); }

.view { display: none; min-height: 100vh; animation: pageIn .55s var(--ease); }
.view.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.hero { position: relative; min-height: 760px; height: min(91vh, 940px); overflow: hidden; background: #0c1214; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; filter: saturate(.82) contrast(1.03); transform: scale(1.025); transition: opacity .7s, transform 8s var(--ease); }
.hero:hover .hero-art { transform: scale(1.055); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,10,.84) 0%, rgba(4,8,10,.43) 37%, rgba(4,8,10,.02) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(7,10,12,.78) 10%, transparent 46%), linear-gradient(180deg,rgba(4,8,10,.58),transparent 30%); }
.hero-content { position: relative; z-index: 2; width: min(1480px, 100%); height: 100%; margin: auto; padding: 118px clamp(24px, 6vw, 92px) 86px; display: flex; flex-direction: column; justify-content: space-between; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { border: 1px solid var(--line); color: #bdc5c5; background: rgba(18,25,27,.42); backdrop-filter: blur(18px); padding: 10px 19px; border-radius: 99px; cursor: pointer; transition: .3s var(--ease); }
.pill:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.pill.active { color: #111514; background: linear-gradient(145deg,#f3eee4,#c8c5bd); border-color: rgba(255,255,255,.8); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.hero-copy { max-width: 610px; }
.eyebrow, .page-kicker, .section-kicker { margin: 0 0 14px; letter-spacing: .28em; font-size: 11px; font-weight: 600; color: #cbd1cc; }
.hero h1 { font-family: var(--display); font-size: clamp(72px, 8vw, 126px); line-height: .88; font-weight: 400; letter-spacing: -.035em; margin: 0 0 24px; text-wrap: balance; }
.meta { display: flex; align-items: center; gap: 10px; color: #d7ddda; font-size: 13px; }
.meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.meta b { border: 1px solid rgba(255,255,255,.33); border-radius: 4px; padding: 2px 6px; font-size: 10px; letter-spacing: .08em; }
.hero-description { font-size: 17px; line-height: 1.65; color: #c6cfcd; max-width: 490px; margin: 17px 0 0; }
.hero-actions, .detail-actions { display: flex; align-items: center; gap: 11px; margin-top: 27px; }
.primary-button, .glass-button, .upload-button { border-radius: 999px; min-height: 50px; padding: 0 25px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; border: 1px solid rgba(255,255,255,.25); }
.primary-button { color: #101311; background: linear-gradient(145deg,#faf5eb,#d9d4ca); border-color: #fff; font-weight: 600; min-width: 144px; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.32); }
.play-icon { margin-right: 8px; font-size: 12px; }
.glass-button, .upload-button { color: #f2f2ed; background: rgba(21,28,30,.54); backdrop-filter: blur(18px); }
.glass-button:hover, .upload-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.15); }
.round-button { width: 50px; height: 50px; border-radius: 50%; font-size: 23px; flex: 0 0 auto; }
.sound-button { position: absolute; right: clamp(24px,5vw,76px); bottom: 90px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; }
.sound-button svg { width: 20px; }
.scroll-cue { position: absolute; z-index: 3; bottom: 31px; right: clamp(24px,5vw,76px); color: #a5afaf; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.scroll-cue span { width: 38px; height: 1px; background: #a5afaf; }

.content-shell { width: min(1480px, 100%); margin: auto; }
.home-content { padding: 10px clamp(24px, 5vw, 76px) 90px; }
.continue-section, .catalog-section { padding-top: 54px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 21px; }
.section-heading h2 { font-family: var(--display); font-size: clamp(31px, 4vw, 46px); font-weight: 400; margin: 0; letter-spacing: -.025em; }
.section-kicker { font-size: 9px; color: #758587; margin-bottom: 7px; }
.section-heading > button { border: 0; background: none; color: #aab5b6; cursor: pointer; padding: 8px 0; }
.section-heading > button:hover { color: white; }
.poster-rail, .continue-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(175px, 17vw, 242px); gap: 14px; overflow-x: auto; padding: 3px 3px 17px; scrollbar-width: none; scroll-snap-type: x proximity; }
.poster-rail::-webkit-scrollbar, .continue-rail::-webkit-scrollbar { display:none; }
.poster-card { position: relative; aspect-ratio: .72; border: 0; border-radius: 15px; overflow: hidden; background: #152023; cursor: pointer; text-align: left; padding: 0; scroll-snap-align: start; box-shadow: 0 18px 42px rgba(0,0,0,.19); transition: transform .45s var(--ease), box-shadow .45s; }
.poster-card:hover { transform: translateY(-8px) scale(1.018); box-shadow: 0 28px 62px rgba(0,0,0,.42); z-index: 2; }
.poster-card img, .landscape-card img, .continue-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.poster-card:hover img, .landscape-card:hover img, .continue-card:hover img { transform: scale(1.06); }
.poster-shade { position:absolute; inset:0; background: linear-gradient(0deg,rgba(4,8,10,.95),rgba(4,8,10,.03) 62%); }
.poster-info { position:absolute; left:15px; right:15px; bottom:15px; }
.poster-info strong { display:block; font-family:var(--display); font-weight:400; font-size:25px; letter-spacing:.01em; line-height:1; }
.poster-info span { display:block; color:#aeb9b8; font-size:10px; margin-top:8px; letter-spacing:.08em; text-transform:uppercase; }
.rank { position:absolute; top:10px; left:12px; font-family:var(--display); font-size:56px; color:rgba(255,255,255,.84); text-shadow:0 3px 24px #000; }
.continue-rail { grid-auto-columns: clamp(255px, 29vw, 430px); }
.continue-card { border:0; background:none; color:inherit; text-align:left; cursor:pointer; padding:0; }
.continue-visual { position:relative; aspect-ratio:1.8; border-radius:14px; overflow:hidden; background:#172124; }
.continue-card h3 { margin:12px 0 4px; font-weight:500; font-size:14px; }
.continue-card p { margin:0; color:#879597; font-size:11px; }
.progress { position:absolute; left:12px; right:12px; bottom:10px; height:3px; background:rgba(255,255,255,.25); border-radius:9px; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--ivory); border-radius:inherit; }
.editorial-banner { position:relative; min-height:510px; border-radius:22px; overflow:hidden; margin-top:86px; display:flex; align-items:center; box-shadow:0 35px 80px rgba(0,0,0,.25); }
.editorial-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editorial-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,9,11,.86),rgba(5,9,11,.5) 45%,rgba(5,9,11,.08)),linear-gradient(0deg,rgba(5,9,11,.5),transparent); }
.editorial-copy { position:relative; padding:clamp(30px,6vw,85px); max-width:670px; }
.editorial-copy h2 { font-family:var(--display); font-weight:400; font-size:clamp(48px,6vw,78px); line-height:.98; margin:0; }
.editorial-copy > p:not(.eyebrow) { color:#bac4c2; font-size:15px; margin:19px 0 24px; }
.landscape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.landscape-card { position:relative; aspect-ratio:1.45; overflow:hidden; border-radius:15px; border:0; padding:0; cursor:pointer; color:inherit; text-align:left; background:#152023; }
.landscape-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,9,11,.88),transparent 65%); }
.landscape-card div { position:absolute; z-index:2; bottom:18px; left:20px; }
.landscape-card strong { display:block; font-family:var(--display); font-weight:400; font-size:27px; }
.landscape-card span { color:#aab4b4; font-size:10px; }

.discover-view, .library-view { position:relative; overflow:hidden; padding-top:88px; }
.discover-glow { position:fixed; width:70vw; height:70vw; border-radius:50%; top:-42vw; left:15vw; background:radial-gradient(circle,rgba(65,91,96,.22),transparent 66%); pointer-events:none; }
.page-shell { position:relative; z-index:1; padding:70px clamp(24px,5vw,76px) 120px; }
.page-kicker { color:#718185; font-size:10px; margin-bottom:13px; }
.page-title-row { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
.page-title-row h1 { font-family:var(--display); font-size:clamp(66px,8vw,112px); font-weight:400; line-height:.9; margin:0; }
.page-title-row p { color:#8e9b9e; max-width:430px; line-height:1.6; margin:0 0 5px; }
.search-box { height:67px; max-width:900px; margin:auto; display:flex; align-items:center; gap:16px; padding:0 23px; background:rgba(21,29,31,.65); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(20px); transition:.3s; }
.search-box:focus-within { border-color:rgba(255,255,255,.48); box-shadow:0 18px 55px rgba(0,0,0,.18); }
.search-box svg { width:22px; color:#9da9a9; }
.search-box input { flex:1; height:100%; border:0; outline:0; background:none; color:white; font-size:16px; }
.search-box input::placeholder { color:#657477; }
.search-box kbd { color:#6e7d80; border:1px solid #344145; border-radius:6px; padding:4px 7px; font-size:10px; }
.discover-toolbar, .library-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:42px 0 24px; }
.discover-toolbar .filter-pills, .library-actions .filter-pills { margin:0; }
.discover-toolbar > p { color:#718084; font-size:12px; }
.discover-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.discover-grid .poster-card { width:100%; }
.upload-button { display:inline-flex; align-items:center; min-height:43px; font-size:12px; }
.empty-state { display:none; text-align:center; padding:100px 20px; color:#7f8e91; }
.empty-state.visible { display:block; }
.empty-state span { font-family:var(--display); font-size:70px; color:#a7b3ae; }
.empty-state h2 { color:#e6e5de; font-family:var(--display); font-size:38px; font-weight:400; margin:10px 0; }
.empty-state p { margin:0 0 24px; }

.mobile-nav { display:none; }
.detail-panel { position:fixed; inset:0; z-index:80; pointer-events:none; visibility:hidden; }
.detail-panel.open { pointer-events:auto; visibility:visible; }
.panel-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.74); backdrop-filter:blur(10px); opacity:0; transition:.45s; }
.detail-panel.open .panel-backdrop { opacity:1; }
.detail-card { position:absolute; top:0; bottom:0; right:0; width:min(740px,100%); overflow-y:auto; background:#090d0f; transform:translateX(105%); transition:transform .62s var(--ease); box-shadow:-35px 0 100px rgba(0,0,0,.48); }
.detail-panel.open .detail-card { transform:translateX(0); }
.detail-close { position:absolute; z-index:5; right:24px; top:24px; font-size:29px; line-height:1; }
.detail-visual { position:relative; height:min(68vh,620px); }
.detail-visual > img { width:100%; height:100%; object-fit:cover; }
.detail-gradient { position:absolute; inset:0; background:linear-gradient(0deg,#090d0f 0%,transparent 48%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%); }
.detail-title-block { position:absolute; left:45px; right:45px; bottom:25px; }
.detail-title-block h2 { font-family:var(--display); font-size:clamp(56px,7vw,90px); font-weight:400; line-height:.9; margin:0 0 17px; }
.detail-body { padding:15px 45px 70px; }
.detail-actions { margin:0 0 32px; }
.detail-body > p { color:#b7c0bf; line-height:1.75; font-size:15px; }
.detail-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid var(--line); margin-top:35px; padding-top:25px; }
.detail-stats span { display:block; color:#657477; font-size:9px; letter-spacing:.16em; }
.detail-stats strong { display:block; font-size:12px; margin-top:8px; font-weight:500; }

.player-modal { position:fixed; inset:0; z-index:120; background:#020303; display:grid; place-items:center; opacity:0; visibility:hidden; transition:.4s; }
.player-modal.open { opacity:1; visibility:visible; }
.player-close { position:absolute; top:24px; right:28px; z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#1119; color:#fff; font-size:27px; cursor:pointer; }
.player-frame { width:min(1200px,92vw); aspect-ratio:16/9; background:#000; box-shadow:0 0 90px rgba(68,89,90,.2); position:relative; }
.player-frame video { width:100%; height:100%; }
.player-loading { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.player-loading span { width:42px; height:42px; border-radius:50%; border:2px solid #fff3; border-top-color:#fff; animation:spin .9s linear infinite; }
.player-loading.hidden { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.player-caption { position:absolute; bottom:24px; left:5vw; }
.player-caption p { font-size:9px; letter-spacing:.2em; color:#778487; margin:0; }
.player-caption h2 { font-family:var(--display); font-size:29px; font-weight:400; margin:5px 0; }
.toast { position:fixed; z-index:150; left:50%; bottom:35px; transform:translate(-50%,25px); opacity:0; pointer-events:none; color:#111; background:var(--ivory); padding:12px 18px; border-radius:99px; font-size:12px; font-weight:600; box-shadow:0 18px 50px #0008; transition:.35s var(--ease); }
.toast.show { opacity:1; transform:translate(-50%,0); }

.account-modal { position:fixed; inset:0; z-index:140; pointer-events:none; visibility:hidden; display:grid; place-items:center; padding:24px; }
.account-modal.open { pointer-events:auto; visibility:visible; }
.account-backdrop { position:absolute; inset:0; border:0; background:rgba(1,3,4,.76); opacity:0; backdrop-filter:blur(18px); transition:opacity .35s; }
.account-modal.open .account-backdrop { opacity:1; }
.account-card { position:relative; width:min(100%,480px); max-height:min(760px,92vh); overflow:auto; border:1px solid rgba(255,255,255,.14); border-radius:28px; padding:46px; background:linear-gradient(145deg,rgba(29,39,41,.96),rgba(8,12,14,.98)); box-shadow:0 40px 120px rgba(0,0,0,.58); transform:translateY(28px) scale(.97); opacity:0; transition:transform .45s var(--ease),opacity .35s; }
.account-modal.open .account-card { transform:translateY(0) scale(1); opacity:1; }
.account-close { position:absolute; right:19px; top:17px; width:39px; height:39px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.06); color:white; font-size:25px; cursor:pointer; }
.account-brand { font-family:var(--display); font-size:26px; margin-bottom:38px; }
.account-brand span,.brand span { color:#91b4b0; }
.account-card h2 { font-family:var(--display); font-size:48px; font-weight:400; line-height:1; margin:0 0 13px; }
.account-intro,.account-note { color:#8e9b9e; line-height:1.55; }
.account-intro { margin-bottom:25px; }
.account-note { font-size:10px; text-align:center; margin:17px 0 0; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border:1px solid var(--line); background:rgba(0,0,0,.22); border-radius:14px; margin-bottom:22px; }
.auth-tabs button { border:0; border-radius:10px; padding:11px; color:#909c9e; background:transparent; cursor:pointer; }
.auth-tabs button.active { background:rgba(255,255,255,.1); color:white; box-shadow:inset 0 1px rgba(255,255,255,.12); }
#accountForm { display:grid; gap:14px; }
#accountForm label { display:grid; gap:7px; color:#aab5b6; font-size:11px; }
#accountForm input { width:100%; border:1px solid var(--line); background:rgba(3,6,7,.48); color:white; border-radius:13px; padding:15px 16px; outline:none; font:inherit; }
#accountForm input:focus { border-color:rgba(201,224,218,.55); box-shadow:0 0 0 4px rgba(141,184,177,.09); }
.account-submit { width:100%; margin-top:7px; }
.hidden { display:none !important; }
.profile-view { display:none; text-align:center; }
.profile-view.visible { display:block; }
.profile-avatar { width:92px; height:92px; display:grid; place-items:center; margin:17px auto 20px; border-radius:50%; color:#091012; font-family:var(--display); font-size:39px; background:linear-gradient(145deg,#f3eee4,#8fb0aa); box-shadow:0 18px 45px rgba(117,162,156,.2); }
.profile-view h2 { margin-bottom:8px; }
.profile-view>p:not(.page-kicker) { color:#8e9b9e; margin:0; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:16px; margin:28px 0 20px; overflow:hidden; }
.profile-stats div { padding:18px; }
.profile-stats div+div { border-left:1px solid var(--line); }
.profile-stats strong,.profile-stats span { display:block; }
.profile-stats strong { font-family:var(--display); font-size:28px; font-weight:400; }
.profile-stats span { color:#7f8d8f; font-size:10px; margin-top:3px; }
.profile-view .glass-button { width:100%; }
.text-button { border:0; color:#829092; background:none; padding:14px; margin-top:8px; cursor:pointer; }
.text-button:hover { color:white; }
@media(max-width:600px){.account-card{padding:36px 23px 28px;border-radius:23px}.account-card h2{font-size:39px}.account-brand{margin-bottom:28px}}
.reveal { animation:revealUp .8s .08s both var(--ease); }
@keyframes revealUp { from { opacity:0; transform:translateY(24px); } }
.scroll-reveal { opacity:0; transform:translateY(34px) scale(.985); filter:blur(5px); transition:opacity .8s var(--ease) var(--delay,0ms),transform .9s var(--ease) var(--delay,0ms),filter .7s ease var(--delay,0ms); }
.scroll-reveal.in-view { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.poster-card.scroll-reveal:nth-child(even) { transform:translateY(46px) scale(.98); }
.poster-card.scroll-reveal.in-view { transform:translateY(0) scale(1); }

@media (max-width: 1000px) {
  .discover-grid { grid-template-columns:repeat(3,1fr); }
  .landscape-grid { grid-template-columns:repeat(2,1fr); }
  .desktop-nav { display:none; }
  .page-title-row { display:block; }
  .page-title-row p { margin-top:18px; }
}

@media (max-width: 700px) {
  .topbar { height:70px; padding:0 20px; }
  .brand { font-size:28px; }
  .top-actions .icon-button { display:none; }
  .avatar { width:37px; height:37px; }
  .hero { height:780px; min-height:100svh; }
  .hero-art { object-position:62% center; }
  .hero-wash { background:linear-gradient(0deg,var(--bg) 0%,rgba(7,10,12,.65) 28%,rgba(7,10,12,.05) 60%),linear-gradient(90deg,rgba(4,8,10,.48),transparent); }
  .hero-content { padding:88px 20px 92px; }
  .hero-copy { max-width:100%; }
  .hero h1 { font-size:clamp(62px,19vw,86px); }
  .hero-description { font-size:14px; max-width:340px; }
  .hero-actions .glass-button { display:none; }
  .primary-button { flex:1; }
  .sound-button, .scroll-cue { display:none; }
  .home-content { padding:0 18px 110px; }
  .continue-section, .catalog-section { padding-top:38px; }
  .section-heading { align-items:center; }
  .section-heading h2 { font-size:30px; }
  .section-heading > button { font-size:11px; }
  .poster-rail { grid-auto-columns:44vw; gap:10px; margin-right:-18px; }
  .continue-rail { grid-auto-columns:75vw; margin-right:-18px; }
  .editorial-banner { min-height:440px; margin-top:52px; }
  .editorial-copy { padding:28px; align-self:end; }
  .editorial-copy h2 { font-size:46px; }
  .landscape-grid { grid-template-columns:1fr; }
  .discover-view, .library-view { padding-top:70px; }
  .page-shell { padding:46px 18px 115px; }
  .page-title-row h1 { font-size:66px; }
  .page-title-row p { font-size:13px; }
  .search-box { height:57px; border-radius:15px; }
  .search-box kbd { display:none; }
  .discover-toolbar, .library-actions { align-items:flex-start; flex-direction:column; margin-top:27px; }
  .discover-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .discover-grid .poster-info strong { font-size:21px; }
  .mobile-nav { position:fixed; z-index:60; display:flex; left:14px; right:14px; bottom:max(12px,env(safe-area-inset-bottom)); height:66px; border:1px solid rgba(255,255,255,.19); border-radius:35px; overflow:hidden; background:rgba(14,20,22,.76); backdrop-filter:blur(24px) saturate(150%); padding:6px; box-shadow:0 20px 50px #0008; }
  .mobile-nav button { flex:1; border:0; background:none; color:#7d898b; border-radius:28px; font-size:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:.3s; }
  .mobile-nav button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease),filter .35s; }
  .mobile-nav button.active { color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  .mobile-nav button.active svg { transform:translateY(-1px) scale(1.08); filter:drop-shadow(0 0 7px rgba(255,255,255,.28)); }
  .detail-card { width:100%; }
  .detail-visual { height:62vh; }
  .detail-title-block { left:22px; right:22px; }
  .detail-body { padding:10px 22px 110px; }
  .detail-title-block h2 { font-size:58px; }
  .detail-actions .primary-button { flex:1; }
  .detail-stats { grid-template-columns:1fr 1fr; }
  .player-caption { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}