/* Two design families retain the existing layouts and artwork accent colours. */
#fx-design-choices{display:flex;gap:6px;margin:3px 0 13px}
#fx-design-choices button{flex:1;min-height:36px;padding:7px 12px;border:1px solid #b7cbd42b;border-radius:5px;background:transparent;color:#9fb3be;font:11px var(--display);text-align:center}
#fx-design-choices button[aria-pressed=true]{color:#e2f1ef;border-color:#bedfd675;background:color-mix(in srgb,var(--scene-accent,#aec9e4) 6.27%,transparent)}
#fx-design-choices button:disabled{cursor:default;opacity:.7}
#fx-background-help{font:10px/1.5 var(--display);color:#9bafb8;margin:2px 0 7px}
@media(any-pointer:coarse){.explorer-tools>span{display:none}}
html[data-landscape=true]{--paper:#eaf4f1;--muted:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff);--line:color-mix(in srgb,var(--scene-accent) 20%,transparent);--accent:var(--scene-accent);background:var(--scene-surface)}
html[data-landscape=true] body{background:var(--scene-surface)}
html[data-landscape=true] #nebula{opacity:1;filter:none}
html[data-scene=polar-night] #nebula{opacity:.96}
html[data-landscape=true] .vignette{background:linear-gradient(#101d2078,transparent 28%,transparent 65%,#122124ba),linear-gradient(90deg,#12282a66,transparent 38%,transparent 80%,#12282a33)}
html[data-landscape=true] #universe-footer{background:color-mix(in srgb,var(--scene-surface) 85%,transparent);border-color:#d4ece22e}
html[data-landscape=true] header nav :is(#fx-button,#language-toggle,#view-toggle),html[data-landscape=true] #genre-select,html[data-landscape=true] .explorer-tools{background:#d8f4ea09;border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 21.96%,transparent);color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
@media(max-width:599px),(max-height:499px) and (max-width:999px){html[data-landscape=true] .genre-picker{background:#d8f4ea09;border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 21.96%,transparent)}}
html[data-landscape=true] .brand-caption,html[data-landscape=true] .genre-label,html[data-landscape=true] #era-range,html[data-landscape=true] #flight-hint{color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff);text-shadow:0 1px 5px #0e1c20}
html[data-landscape=true] #era-title,html[data-landscape=true] #genre-value,html[data-landscape=true] .artifact-label strong{color:#f3fcf8;text-shadow:0 1px 3px #102126,0 2px 9px #102126cf}
html[data-landscape=true] .era-stepper button{border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 25.88%,transparent);color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
html[data-landscape=true] :is(dialog,#fx-panel,#welcome-panel,#music-search,#tracklist-modal,#share-panel,#mixcloud-consent){background:var(--scene-surface);color:#e6f1ed;border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 21.96%,transparent)}
html[data-landscape=true] #detail .detail-info{background:var(--scene-surface)}
html[data-landscape=true] dialog::backdrop{background:#0b1619bd}
html[data-landscape=true] :is(.fx-row small,.fx-note,.fx-volume-row,#fx-background-status,.search-head .eyebrow,.section-label,#chart-title){color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
html[data-landscape=true] #fx-background-choices button{background:#142426;color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
html[data-landscape=true] #fx-background-choices button[aria-checked=true]{border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff);color:#f0fff7;box-shadow:0 0 0 1px color-mix(in srgb,var(--scene-accent,#aec9e4) 16.86%,transparent)}
html[data-landscape=true] :is(#fx-sound-choices button,#fx-sound-choices button[aria-checked=true],.search-input-wrap,#collection-search){border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 23.14%,transparent);background:color-mix(in srgb,var(--scene-accent,#aec9e4) 4.31%,transparent);color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
html[data-landscape=true] #set-navigation button[aria-pressed=true]{border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 63.92%,transparent);background:color-mix(in srgb,var(--scene-accent,#aec9e4) 7.84%,transparent);color:#ecfff4}
html[data-landscape=true] #tracklist-modal th,html[data-landscape=true] #share-url{background:#122225;color:color-mix(in srgb,var(--scene-accent,#aec9e4) 65%,#ffffff)}
html[data-landscape=true] .ambient-star-field{-webkit-mask-image:var(--ice-sky-mask,none);mask-image:var(--ice-sky-mask,none);opacity:.6}
.ice-aurora{position:absolute;inset:0;pointer-events:none;z-index:1;background-image:var(--universe-background);background-position:inherit;background-size:cover;-webkit-mask-image:var(--aurora-mask);mask-image:var(--aurora-mask);mix-blend-mode:screen;opacity:.04;animation:ice-aurora-breathe 46s ease-in-out -9s infinite}
@keyframes ice-aurora-breathe{0%,100%{opacity:.025}46%{opacity:.14}74%{opacity:.06}}
.ice-aurora[data-paused=true]{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ice-aurora{animation:none;opacity:.04}}

/* Worlds are navigation categories; the selected place supplies its own palette. */
#fx-design-choices{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:3px 2px 10px;margin:0 -2px;scrollbar-width:thin}
#fx-design-choices button{flex:0 0 112px;min-width:0;padding:0 0 9px;overflow:hidden;text-align:left;scroll-snap-align:start;font:10px var(--display);color:var(--muted)}
#fx-design-choices button img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:9px}
#fx-design-choices button span{display:block;padding:0 8px;white-space:nowrap}
#fx-design-choices button[aria-pressed=true]{border-color:var(--scene-accent,#aec9e4);color:var(--paper);background:#ffffff08}
.fx-world-section h3,.fx-section-title{font:14px var(--display);font-weight:400;margin:18px 0 10px}
.fx-world-section{min-width:0}.fx-section-title{color:var(--paper)}
html[data-landscape=true] header nav :is(#fx-button,#language-toggle,#view-toggle),html[data-landscape=true] #genre-select,html[data-landscape=true] .explorer-tools{background:color-mix(in srgb,var(--scene-accent) 3.5%,transparent);border-color:color-mix(in srgb,var(--scene-accent) 22%,transparent)}
html[data-landscape=true] :is(.era-stepper button,#set-navigation button[aria-pressed=true],#fx-background-choices button[aria-checked=true]){border-color:color-mix(in srgb,var(--scene-accent) 65%,transparent)}
html[data-landscape=true] #fx-background-choices button{background:var(--scene-surface);color:var(--paper)}
#space-atmosphere[data-landscape=true] .atmosphere-depth:is([data-kind=rocket],[data-kind=visitor],[data-kind=roadster]){display:none}
#space-atmosphere[data-landscape=true] .ambient-satellite:not([data-sky-visitor=true]){display:none}
#space-atmosphere[data-landscape=true] .ambient-satellite{width:7px!important;height:5px!important;--sat-opacity:.24!important}
html[data-landscape=true] .vignette{background:linear-gradient(#060d1880,transparent 28%,transparent 65%,#060d18b0),linear-gradient(90deg,#07101d55,transparent 38%,transparent 80%,#07101d33)}

#fx-panel button:focus-visible{outline:2px solid var(--scene-accent,#aec9e4);outline-offset:3px}

html[data-landscape=true]{--paper:color-mix(in srgb,var(--scene-accent) 15%,white);--muted:color-mix(in srgb,var(--scene-accent) 65%,#c5c9ce)}

html[data-design=space]{--accent:var(--scene-accent,#aec9e4)}
html[data-design=space] :is(dialog,#fx-panel,#welcome-panel,#music-search,#tracklist-modal,#share-panel,#mixcloud-consent),html[data-design=space] #detail .detail-info{background:var(--scene-surface,#0b1422)}
html[data-design=space] header nav :is(#fx-button,#language-toggle,#view-toggle),html[data-design=space] #genre-select,html[data-design=space] .explorer-tools{background:color-mix(in srgb,var(--scene-accent,#aec9e4) 3.5%,transparent);border-color:color-mix(in srgb,var(--scene-accent,#aec9e4) 22%,transparent)}
html[data-design=space] :is(#fx-background-choices button[aria-checked=true],#fx-sound-choices button[aria-checked=true]){border-color:var(--scene-accent,#aec9e4)}

/* All place surfaces share the active scene palette, including the Space footer
   and the FX sub-controls that previously kept hard-coded blue/green colours. */
html[data-scene]{--scene-line:color-mix(in srgb,var(--scene-accent) 22%,transparent);--scene-quiet:color-mix(in srgb,var(--scene-accent) 55%,#aeb7c2)}
html[data-scene] #universe-footer{background:color-mix(in srgb,var(--scene-surface) 85%,transparent);border-color:var(--scene-line)}
html[data-scene] :is(#fx-panel,#welcome-panel){background:var(--scene-surface);border-color:var(--scene-line)}
html[data-scene] :is(#fx-panel,#welcome-panel)::backdrop{background:color-mix(in srgb,var(--scene-surface) 68%,transparent)}
html[data-scene] :is(.fx-kicker,.fx-row small,.fx-note,.fx-volume-row,.fx-intro,#fx-background-status,#fx-background-help,.fx-state){color:var(--scene-quiet)}
html[data-scene] :is(.fx-close,.fx-state,.fx-row,.fx-background-section,#fx-design-choices button,.fx-background-arrows button){border-color:var(--scene-line)}
html[data-scene] #fx-background-choices button{background:var(--scene-surface);color:var(--scene-quiet);border-color:var(--scene-line)}
html[data-scene] #fx-background-choices button[aria-checked=true]{color:var(--paper);border-color:var(--scene-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--scene-accent) 17%,transparent)}
html[data-scene] .fx-row[aria-checked=true] .fx-state{color:var(--scene-accent);border-color:color-mix(in srgb,var(--scene-accent) 40%,transparent);background:color-mix(in srgb,var(--scene-accent) 4%,transparent)}
html[data-scene] #fx-sound-choices button{color:var(--scene-quiet);border-color:var(--scene-line);background:transparent}
html[data-scene] #fx-sound-choices button[aria-checked=true]{color:var(--paper);border-color:var(--scene-accent);background:color-mix(in srgb,var(--scene-accent) 6%,transparent)}
html[data-scene] .fx-volume-row input{accent-color:var(--scene-accent)}
html[data-scene] .explorer-tools{color:color-mix(in srgb,var(--scene-accent) 70%,white)}
@media(max-width:599px),(max-height:499px) and (max-width:999px){html[data-scene] .genre-picker{background:color-mix(in srgb,var(--scene-accent) 3.5%,transparent);border-color:var(--scene-line)}}

/* The 3D artwork stays luminous and opaque; only its black cover carrier follows
   the same chronological place opacity as raster covers. Detail view is intact. */
.artifact.is-sculpture .motif-cover-plane{background:rgb(0 0 0 / var(--cover-opacity,.5))}