/* Flagship exhibit: the native skin leads; the modular listening desk stays playable. */
.hero-bottom { min-width: 0; }
.hero-stage {
  --hero-accent: #8be0e8;
  min-width: 0;
  border: 1px solid #3e6069;
  background: #061016;
  box-shadow: 0 30px 78px rgba(0, 0, 0, .34);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.hero-stage[data-hero-mode='desk'] { --hero-accent: var(--green); border-color: #49634f; }
.hero-scene { height: clamp(470px, 38vw, 570px); min-width: 0; }
.hero-scene[hidden] { display: none !important; }
.hero-scene-aeon { display: grid; grid-template-rows: 48px minmax(0, 1fr); background: radial-gradient(ellipse 60% 60% at 51% 49%, #102533 0%, #060e16 72%); }
.hero-scene-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: 17px; color: #b2ccd2; border-bottom: 1px solid #2b4851;
  font: 600 11px/1.3 var(--mono); letter-spacing: .025em;
}
.hero-scene-top span:first-child { color: var(--hero-accent); }
.hero-scene-title-mobile, .hero-inspect-mobile { display: none; }
.hero-scene-title-mobile { color: var(--hero-accent); }
.hero-scene-top button { align-self: stretch; border: 0; border-left: 1px solid #2b4851; padding: 0 3px 0 16px; background: transparent; color: #d5e4e5; font: inherit; cursor: pointer; transition: color .2s ease, background .2s ease; }
.hero-scene-top button:hover { color: var(--hero-accent); background: rgba(121, 205, 216, .08); }
.hero-scene-top button:focus-visible { outline-offset: -4px; }
.hero-scene-top button > span:last-child { margin-left: 9px; }
.hero-aeon-art { min-height: 0; min-width: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 8px; overflow: hidden; }
.hero-aeon-art img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .2)); }
.hero-aeon-art img:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: -6px; }
.hero-scene-desk { display: grid; grid-template-rows: minmax(0, 1fr) 44px; }
.hero-scene-desk .listening-desk { height: 100%; border: 0; box-shadow: none; }
.hero-scene-desk .listening-desk:hover { border: 0; box-shadow: none; }
.hero-scene-desk .desk-instruction { padding-inline: 16px; border-top: 1px solid #2b4851; }
.hero-mode-switch { display: grid; grid-template-columns: 1fr 1fr; min-height: 56px; border-top: 1px solid #3b555d; }
.hero-mode-switch button { position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; min-width: 0; min-height: 56px; border: 0; border-right: 1px solid #2f464d; padding: 8px; background: #0b171c; color: #b2c5c8; font: 600 12px/1.2 var(--mono); cursor: pointer; transition: color .25s ease, background .25s ease; }
.hero-mode-switch button:last-child { border-right: 0; }
.hero-mode-switch button span { font-size: 11px; color: #8aa3a9; }
.hero-mode-switch button:hover { color: #eff7f7; background: #172a30; }
.hero-mode-switch button[aria-selected='true'] { color: #07161b; background: var(--hero-accent); }
.hero-mode-switch button[aria-selected='true'] span { color: #24535a; }
.hero-mode-switch button:focus-visible { outline-offset: -5px; }
.hero-side p { max-width: 390px; }
@media (max-width: 980px) {
  .hero-scene { height: 440px; }
  .hero-scene-desk { grid-template-rows: minmax(0, 1fr); }
  .hero-scene-desk .desk-instruction { display: none; }
  .hero-bottom { padding-top: 0; }
}
@media (max-width: 680px) {
  .hero-stage { margin-inline: 0; }
  .hero-scene { height: clamp(360px, 100vw, 460px); }
  .hero-scene-aeon { grid-template-rows: 43px minmax(0, 1fr); }
  .hero-scene-top { padding-inline: 11px; font-size: 10px; }
  .hero-scene-title-desktop, .hero-inspect-desktop { display: none; }
  .hero-scene-title-mobile, .hero-inspect-mobile { display: inline; }
  .hero-scene-top button { white-space: nowrap; }
  .hero-scene-top button { padding-left: 10px; }
  .hero-scene-desk .listening-desk { margin-inline: 0; }
  .hero-mode-switch, .hero-mode-switch button { min-height: 54px; }
  .hero-mode-switch button { font-size: 11px; }
  .hero-footer { display: flex; justify-content: flex-end; padding-block: 17px 30px; }
  .hero-footer > span:not(:last-child) { display: none; }
  .hero-footer > span:last-child { min-height: 28px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage, .hero-scene-top button, .hero-mode-switch button { transition: none !important; }
}