/* Full-viewport cinematic environments. Render only in response to navigation. */
html{scroll-behavior:auto;scrollbar-color:#65717f #080b12;background:#080b12}
html[data-era]{--bg:#080b12;--bg-solid:#0b1019;--fg:#f3f5f8;--card:rgba(10,16,26,.94);--card-border:#ffffff24;--font-display:system-ui,sans-serif;--border-r:18px;--vault-face:transparent;--vault-digit:#fff}
html[data-era="1970s"]{--accent:#ffd09a;--accent-rgb:255,208,154}
html[data-era="1980s"]{--accent:#ffb6ef;--accent-rgb:255,182,239}
html[data-era="1990s"]{--accent:#a5f1dc;--accent-rgb:165,241,220}
html[data-era="2000s"]{--accent:#b4ddff;--accent-rgb:180,221,255}
html[data-era="2010s"]{--accent:#e3ccff;--accent-rgb:227,204,255}
html[data-era="2020s"]{--accent:#a0f5f0;--accent-rgb:160,245,240}
body{background:#080b12;overflow-x:clip;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
body .bg-layer,body .era-icon{display:none}
.time-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#080b12;contain:strict}
.journey-scene{position:absolute;inset:-2%;background-size:cover;background-position:50% 43%;transform-origin:50% 43%;opacity:0;visibility:hidden;backface-visibility:hidden}
.journey-scene.is-visible{visibility:visible;will-change:transform,opacity}
.journey-atmosphere{position:absolute;inset:-10%;opacity:.18;background:radial-gradient(ellipse at 50% 45%,transparent 20%,rgba(var(--accent-rgb),.18) 70%,transparent 90%);transform:scale(var(--atmosphere-scale,1));mix-blend-mode:screen}
.journey-vignette{position:absolute;inset:0;background:linear-gradient(#04070ccc,transparent 27%,transparent 64%,#04070ce8),radial-gradient(ellipse at 50% 43%,#04070c88,transparent 62%)}
.journey-atmosphere{z-index:3}.journey-vignette{z-index:4}
html[data-journey-active="false"] .journey-vignette{background:#04070cdf}
body .container{width:100%;max-width:none;padding:0 0 32px;gap:0}
.container>header{position:fixed;inset:0 0 auto;z-index:20;width:100%;padding:10px 16px 0;pointer-events:none}
.container>header .top-controls{pointer-events:auto;margin:0 auto 6px}
.container>header h1{font:600 clamp(.85rem,2vw,1.05rem)/1.5 system-ui,sans-serif;letter-spacing:.25em;color:#fff;text-shadow:none;animation:none}
.container>header .subtitle{display:none}
.container>header .locale-btn{border:0;background:transparent;color:#dce2ea;opacity:1;font-size:.67rem;min-height:32px;padding:5px 10px}
.container>header .locale-btn.active{color:#fff;text-decoration:underline;text-underline-offset:5px;background:transparent}
html[data-journey-active="false"] .container>header{visibility:hidden;pointer-events:none}
.main-content{width:100%;min-width:0;gap:16px}
.main-content>section,.main-content>details{width:calc(100% - 32px);max-width:700px;align-self:center}
#journeyCockpit{position:relative;width:100%;height:calc(100svh + 5200px);min-width:0;overflow-anchor:none}
.journey-view{position:sticky;top:0;height:100svh;min-height:640px;display:flex;justify-content:center;align-items:center;padding:92px 16px 172px}
#vaultSection{width:100%;max-width:500px;padding:16px 12px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;border-radius:0;isolation:isolate}
#vaultSection::before{inset:-22px 0;z-index:-1;background:radial-gradient(ellipse,#050912b8 20%,#05091266 48%,transparent 73%);border-radius:50%}
#vaultSection .region-selector{margin-bottom:20px;background:#080e18a6;border:1px solid #ffffff24;border-radius:100px;padding:3px;gap:0}
#vaultSection .region-btn{border:0;min-height:40px;min-width:54px;border-radius:100px;color:#dae1eb;opacity:1;background:transparent;font-size:.7rem;letter-spacing:.06em;padding:8px 16px}
#vaultSection .region-btn.active{color:#0b1019;background:#edf2f7}
#vaultSection .region-selector{width:auto;max-width:100%}
#regionLegend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#vaultLabel{font:500 .65rem/1.5 system-ui,sans-serif;letter-spacing:.25em;color:#d6deea;margin-bottom:4px;opacity:1}
#vaultLock{background:transparent;box-shadow:none;border:0;padding:0 8px;gap:0;border-radius:8px}
#vaultLock:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
#vaultLock.ticking{box-shadow:none!important}
#vaultLock .roller-wrapper{width:76px;height:104px;background:transparent;box-shadow:none;border-radius:0}
#vaultLock .roller-wrapper::before,#vaultLock .roller-wrapper::after,#vaultLock .center-line,#vaultLock .roller-sep{display:none}
#vaultLock .roller-digit{font:300 88px/1 system-ui,sans-serif;color:#fff;text-shadow:0 4px 30px #0008;letter-spacing:-.04em}
.year-stepper{gap:8px}
#vaultSection .year-step{border:1px solid #ffffff30;background:#080e1866;color:#eef2f6;border-radius:50%;width:44px;height:44px;min-width:44px;font-weight:300}
#vaultSection .year-step:disabled{opacity:.35}
#eraDesc{font-size:.73rem;color:#e0e6ee;opacity:1;margin-top:0;text-align:center;line-height:1.6}
.catalog-count{font-size:.65rem;color:#c8d3e1;line-height:1.6;margin:4px 0 0;text-align:center}
#vaultHint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#vaultSection .vault-buttons{max-width:296px;margin-top:22px;gap:4px}
#goBtn{min-height:52px;border:1px solid #ffffff88;border-radius:100px;background:#f1f5f9;color:#101621;box-shadow:0 0 36px #ffffff15;letter-spacing:.22em;font:600 .85rem/1.3 system-ui,sans-serif}
#goBtn:hover{background:var(--accent);box-shadow:0 0 38px rgba(var(--accent-rgb),.22);transform:translateY(-2px)}
#vaultSection .vault-sub-btn{min-height:44px;color:#e1e7ef;font:500 .8125rem/1.4 system-ui,sans-serif;letter-spacing:.02em;border:0;opacity:1}
#vaultSection .vault-sub-btn>span[aria-hidden]{display:none}
#youtubeDisclosure{font-size:.75rem;line-height:1.6;max-width:360px;color:#e0e6ee;opacity:1;margin-top:8px}
#youtubeDisclosure a{text-decoration:underline;text-underline-offset:2px}
#verificationStatus{color:#f1d3a0;font-size:.75rem;margin-top:8px;text-align:center}
.time-navigation{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 48px));text-align:center;color:#e0e7ef}
#timeCaption{display:block;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--accent);text-shadow:0 2px 12px #000}
#timeSlider{display:block;width:100%;height:32px;min-height:32px;margin:8px 0 0;accent-color:var(--accent);cursor:ew-resize;touch-action:pan-y;background:transparent}
#timeSlider{-webkit-appearance:none;appearance:none}
#timeSlider::-webkit-slider-runnable-track{height:2px;background:#ffffff60;border-radius:2px}
#timeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 16px rgba(var(--accent-rgb),.5)}
#timeSlider::-moz-range-track{height:2px;background:#ffffff60;border:0}
#timeSlider::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid #fff}
.time-ticks{display:flex;justify-content:space-between;font:10px/1.5 ui-monospace,monospace;color:#c4cedc}
#timeHint{font-size:.65rem;line-height:1.7;margin-top:10px;color:#d3dce8}
.journey-exit,.journey-return{min-height:44px;background:transparent;border:0;color:#d4deea;font:500 .68rem/1.6 system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 18px}
.journey-return{align-self:center;border:1px solid #ffffff33;border-radius:40px;margin-top:20px}
.container>footer{width:calc(100% - 32px);max-width:700px;margin:20px auto 0}
html[data-era] footer .maker-credit{color:var(--accent)}
html[data-era] .birth-submit{color:#101214}
body.mini-visible .journey-view .time-navigation{bottom:92px}
@media(max-width:640px){
 .journey-view{padding:90px 16px 176px}
 #vaultSection{padding:10px 0;max-width:380px}
 #vaultSection .region-selector{margin-bottom:16px}
 #vaultSection .region-btn{min-height:44px;padding:8px 13px;font-size:.8125rem}
 #vaultLock{padding:0 4px}
 #vaultLock .roller-wrapper{width:52px;height:80px}
 #vaultLock .roller-digit{font-size:64px}
 .year-stepper{gap:4px}
 #vaultSection .vault-buttons{margin-top:18px;max-width:270px}
 #eraDesc{font-size:.8125rem}
 #youtubeDisclosure{font-size:.75rem;padding-inline:10px}
 .journey-scene{background-size:auto 104%;background-position:50% 43%}
}
@media(max-height:700px){
 .journey-view{min-height:590px;padding-top:74px;padding-bottom:150px}
 #vaultSection .region-selector{margin-bottom:8px}
 #vaultSection .vault-buttons{margin-top:10px}
 #timeHint{margin-top:4px}.time-navigation{bottom:6px}
 #timeSlider{margin-top:2px}
}
@media(max-width:360px){
 #vaultLock .roller-wrapper{width:42px}#vaultLock .roller-digit{font-size:56px}
 #vaultSection .region-btn{padding-inline:10px}
}
@media(max-height:550px){
 .journey-view{height:100svh;min-height:0;padding:68px 16px 52px}
 #vaultSection{padding:0;max-width:450px}
 #vaultSection .region-selector{margin-bottom:4px}
 #vaultLock .roller-wrapper{height:64px;width:52px}
 #vaultLock .roller-digit{font-size:54px}
 #vaultSection .vault-buttons{grid-template-columns:1fr auto auto;max-width:340px;margin-top:8px;align-items:center}
 #goBtn{grid-column:auto;min-height:44px}
 #vaultSection .vault-sub-btn{padding:8px}
 #youtubeDisclosure{margin-top:4px;max-width:420px}
 .time-navigation{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:min(500px,calc(100% - 32px));bottom:4px}
 #timeCaption,#timeHint,.time-ticks{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #timeSlider{margin:0}
 body.mini-visible .journey-view .time-navigation{bottom:4px}
}
@media(prefers-reduced-motion:reduce){
 .journey-scene{transform:none!important;will-change:opacity}
 .journey-atmosphere{display:none}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Ordinary page scrolling is the default; the long journey is opt-in. */
html:not([data-scroll-journey="true"]) #journeyCockpit{height:auto}
html:not([data-scroll-journey="true"]) .journey-view{position:relative}
.journey-mode{display:flex;justify-content:center;align-items:center;gap:8px;min-height:32px;font-size:.72rem;color:#e0e6ee;cursor:pointer}
.journey-mode input{width:18px;height:18px;accent-color:var(--accent)}
.transfer-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.transfer-tools p{flex-basis:100%;margin:0;font-size:.8rem;line-height:1.6}
.transfer-tools a,.spotify-track{color:var(--accent);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.spotify-track[hidden]{display:none}
#vaultLock{touch-action:pan-y}

/* The default home has one task and no reserved space for hidden modules. */
html[data-journey-active="false"] .home-simple .container>header{position:absolute;visibility:visible}
.home-simple #vaultSection .vault-buttons{display:flex;justify-content:center}
.home-simple #goBtn{width:100%}
.home-simple #settingsDetails{max-width:500px;background:transparent;border:0;box-shadow:none}
.home-simple #settingsDetails>summary{font-size:.8rem;min-height:44px;text-align:center}
.home-simple #localPrivacy{margin-top:8px}
.home-simple .main-content{gap:0}
.home-simple #playerSection.active{margin-top:16px}
.home-simple .video-anchor{width:100%;min-width:0}
.home-simple #playerQueue{margin:0 20px 16px}
.home-simple #queueList{max-height:240px;overflow:auto}
/* Leave room to scroll privacy/recovery controls above the visible video dock. */
.home-simple:has(.floating-video) .container{padding-bottom:240px}
.home-simple footer a{display:inline-flex;align-items:center;min-height:44px}
.home-simple .journey-mode{min-height:44px}
.home-simple #timeSlider{min-height:44px}
.home-simple .container>header .locale-btn{min-height:44px}
.home-simple #vaultSection .region-btn{min-height:44px}
@media(max-height:550px){.home-simple #vaultSection .vault-buttons{margin-top:8px}.home-simple .time-navigation{display:block}.home-simple .journey-mode{display:none}}