:root {
  --ink: #0a141d;
  --ink-2: #132534;
  --steel: #35546c;
  --steel-2: #6f8797;
  --gold: #d8a23a;
  --gold-light: #f2d492;
  --paper: #f3f1e9;
  --white: #fff;
  --line: rgb(255 255 255 / 32%);
  --shadow: 0 22px 68px rgb(0 0 0 / 42%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #000; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.tour-shell,
.pano-stage { position: fixed; inset: 0; width: 100%; height: 100%; }
.pano-stage { transition: filter 180ms ease; }
.tour-fallback { width: min(42rem, calc(100% - 2rem)); margin: 8rem auto; padding: 2rem; color: var(--paper); background: var(--ink-2); }
.tour-fallback a { color: var(--gold-light); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .7rem 1rem; color: var(--ink); background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.tour-header {
  position: fixed;
  z-index: 130;
  inset: 0 0 auto;
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 1rem;
  padding: max(.48rem, env(safe-area-inset-top)) clamp(.7rem, 2vw, 1.4rem) .48rem;
  color: var(--white);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(6 18 28 / 96%), rgb(8 24 36 / 82%));
  box-shadow: 0 9px 30px rgb(0 0 0 / 20%);
  backdrop-filter: blur(16px);
}
.tour-home { width: max-content; display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.tour-home > span:first-child { color: var(--gold-light); font-family: Georgia, serif; font-size: 1.35rem; }
.tour-home small, .tour-home strong { display: block; }
.tour-home small { color: var(--gold-light); font-size: .55rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.tour-home strong { margin-top: .1rem; font-family: Georgia, serif; font-size: .96rem; font-weight: 500; }
.tour-location { min-width: 260px; text-align: center; line-height: 1.1; }
.tour-location small { display: block; color: var(--gold-light); font-size: .58rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.tour-location strong { display: block; max-width: 45vw; margin-top: .18rem; overflow: hidden; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: .55rem; }
.header-action, .settings-toggle { min-height: 42px; border: 1px solid rgb(255 255 255 / 42%); color: inherit; background: rgb(255 255 255 / 3%); }
.header-action { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.header-action:hover, .header-action:focus-visible, .settings-toggle:hover, .settings-toggle:focus-visible { color: var(--gold-light); background: rgb(255 255 255 / 9%); }
.audio-mark { height: 18px; display: inline-flex; align-items: center; gap: 2px; }
.audio-mark i { width: 2px; height: 8px; display: block; background: currentColor; }
.audio-mark i:nth-child(2) { height: 16px; }
.header-action[aria-pressed="true"] .audio-mark i { animation: audio-bars .65s ease-in-out infinite alternate; }
.header-action[aria-pressed="true"] .audio-mark i:nth-child(2) { animation-delay: -.35s; }
@keyframes audio-bars { to { height: 17px; } }
.settings-toggle { width: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.gear-mark { position: relative; width: 20px; height: 20px; display: block; border: 3px dotted currentColor; border-radius: 50%; }
.gear-mark::before { position: absolute; inset: 4px; border: 2px solid var(--gold); border-radius: 50%; content: ""; }
.gear-mark i { position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: currentColor; border-bottom-color: currentColor; border-radius: 50%; transform: rotate(45deg); }

.tour-ribbon {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(690px, calc(100% - 2rem));
  min-height: 64px;
  display: flex;
  align-items: stretch;
  padding: 5px;
  color: var(--white);
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 5px;
  background: rgb(8 23 34 / 90%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.tour-ribbon[hidden] { display: none; }
.tour-ribbon button { border: 0; color: inherit; background: transparent; cursor: pointer; }
.tour-ribbon button:hover, .tour-ribbon button:focus-visible { color: var(--gold-light); background: rgb(255 255 255 / 8%); }
.ribbon-step { width: 56px; min-width: 56px; font-family: Georgia, serif; font-size: 2.5rem; line-height: 1; }
.ribbon-step[aria-disabled="true"] { opacity: .34; cursor: default; }
.ribbon-divider { width: 1px; height: 34px; align-self: center; background: rgb(255 255 255 / 28%); }
.current-stop { min-width: 0; flex: 1; display: grid; grid-template-columns: 58px minmax(0, 1fr) 20px; align-items: center; gap: .75rem; padding: .25rem .75rem; text-align: left; }
.current-stop img { width: 58px; height: 44px; object-fit: cover; border: 1px solid rgb(255 255 255 / 48%); }
.current-stop small, .current-stop strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-stop small { color: var(--gold-light); font-size: .56rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.current-stop strong { margin-top: .12rem; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.current-stop > i { font-style: normal; font-size: 1.2rem; }

.view-wheel-shell { position: relative; width: 64px; min-width: 64px; display: grid; place-items: center; }
.view-wheel-toggle { width: 52px; height: 52px; display: grid; place-items: center; }
.pan-symbol { position: relative; width: 31px; height: 31px; display: block; border: 1px solid currentColor; border-radius: 50%; }
.pan-symbol b { position: absolute; width: 9px; height: 9px; inset: 10px; border: 2px solid var(--gold); border-radius: 50%; }
.pan-symbol i { position: absolute; width: 5px; height: 5px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.pan-symbol i:nth-child(1) { top: 4px; left: 12px; transform: rotate(45deg); }
.pan-symbol i:nth-child(2) { top: 12px; right: 4px; transform: rotate(135deg); }
.pan-symbol i:nth-child(3) { bottom: 4px; left: 12px; transform: rotate(225deg); }
.pan-symbol i:nth-child(4) { top: 12px; left: 4px; transform: rotate(315deg); }
.view-wheel-panel { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 270px; padding: 14px; color: var(--paper); border: 1px solid rgb(255 255 255 / 42%); border-radius: 8px; background: rgb(8 23 34 / 96%); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: 160ms ease; }
.view-wheel-shell.is-open .view-wheel-panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.zoom-control { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; font-size: .65rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.zoom-control input { width: 100%; accent-color: var(--gold); }
.pan-wheel { position: relative; width: 148px; height: 148px; margin: .7rem auto; border: 1px solid rgb(255 255 255 / 26%); border-radius: 50%; }
.pan-wheel button { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.05rem; }
.pan-up { top: 2px; left: 55px; } .pan-down { bottom: 2px; left: 55px; } .pan-left { top: 55px; left: 2px; } .pan-right { top: 55px; right: 2px; }
.pan-joystick { top: 48px; left: 48px; width: 52px !important; height: 52px !important; border: 2px solid var(--gold) !important; border-radius: 50%; touch-action: none; }
.pan-joystick span { width: 18px; height: 18px; display: block; margin: auto; border-radius: 50%; background: var(--gold-light); transform: translate(var(--joystick-x, 0), var(--joystick-y, 0)); }
.view-utility { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.view-utility button { min-height: 38px; border: 1px solid rgb(255 255 255 / 28%); font-size: .66rem; font-weight: 800; text-transform: uppercase; }

.museum-dialog, .object-dialog { margin: auto; padding: 0; color: #17242d; border: 1px solid rgb(10 20 29 / 26%); border-radius: 8px; background: var(--paper); box-shadow: 0 34px 110px rgb(0 0 0 / 52%); }
.museum-dialog { width: min(620px, calc(100% - 2rem)); max-height: min(820px, calc(100dvh - 2rem)); overflow: auto; }
.museum-dialog::backdrop, .object-dialog::backdrop { background: rgb(0 8 15 / 72%); backdrop-filter: blur(6px); }
.dialog-heading, .object-heading { position: sticky; z-index: 3; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; color: var(--white); background: var(--ink); }
.dialog-heading small, .object-heading small { color: var(--gold-light); font-size: .6rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.dialog-heading h2, .object-heading h2 { margin: .16rem 0 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 500; line-height: 1.05; }
.dialog-close { width: 44px; height: 44px; flex: 0 0 44px; border: 0; color: inherit; background: transparent; font-size: 2rem; cursor: pointer; }
.dialog-tools { position: sticky; z-index: 2; top: 77px; padding: .8rem 1rem; border-bottom: 1px solid rgb(10 20 29 / 15%); background: var(--paper); }
.dialog-tools label { display: block; margin-bottom: .25rem; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dialog-tools input { width: 100%; min-height: 42px; padding: .6rem .75rem; border: 1px solid rgb(10 20 29 / 27%); color: #17242d; background: #fff; }
.stops-list section > h3 { position: sticky; top: 153px; z-index: 1; margin: 0; padding: .55rem 1rem; color: var(--white); background: var(--steel); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.stops-list ol { margin: 0; padding: 0; list-style: none; }
.stops-list button { width: 100%; min-height: 56px; display: grid; grid-template-columns: 58px 3rem 1fr; align-items: center; gap: .65rem; padding: .5rem 1rem; border: 0; border-bottom: 1px solid rgb(10 20 29 / 12%); color: #17242d; background: var(--paper); text-align: left; cursor: pointer; }
.stops-list button:hover, .stops-list button:focus-visible { background: #fff; }
.stops-list button[aria-current="true"] { color: var(--white); background: var(--ink-2); }
.stops-list img { width: 58px; height: 40px; object-fit: cover; }
.stop-number { color: var(--gold); font-size: .67rem; font-weight: 900; }
.stop-name { font-family: Georgia, serif; font-size: .96rem; }

.settings-section { padding: 1.15rem; border-bottom: 1px solid rgb(10 20 29 / 16%); }
.settings-heading { display: grid; grid-template-columns: 2.15rem 1fr; gap: .6rem; }
.settings-heading > span { color: #9b6b16; font-size: .72rem; font-weight: 900; }
.settings-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.32rem; font-weight: 500; }
.settings-heading p { margin: .2rem 0 0; color: #5f6c74; font-size: .8rem; line-height: 1.45; }
.segmented, .lighting-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .42rem; margin-top: .85rem; }
.segmented button, .lighting-presets button, .reset-settings { min-height: 42px; border: 1px solid rgb(10 20 29 / 27%); color: var(--ink); background: transparent; font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.segmented button[aria-pressed="true"], .lighting-presets button:hover, .lighting-presets button:focus-visible { color: var(--white); background: var(--steel); }
.toggle-list { display: grid; gap: .45rem; margin-top: .8rem; }
.toggle-list label { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .7rem; border: 1px solid rgb(10 20 29 / 14%); background: rgb(255 255 255 / 48%); }
.toggle-list strong, .toggle-list small { display: block; }.toggle-list strong { font-size: .82rem; }.toggle-list small { color: #65727a; font-size: .71rem; }
.toggle-list input { width: 20px; height: 20px; accent-color: var(--steel); }
.sliders { display: grid; gap: .8rem; margin-top: .9rem; }
.sliders label > span { display: flex; justify-content: space-between; font-size: .78rem; }
.sliders input { width: 100%; accent-color: var(--gold); }
.sliders output { color: #8b5e10; font-weight: 850; }
.text-alternative { display: block; margin-top: .85rem; padding: .85rem; color: var(--white); background: var(--ink-2); text-decoration: none; }
.text-alternative strong, .text-alternative span { display: block; }.text-alternative span { margin-top: .2rem; color: #c9d5dc; font-size: .74rem; }
.reset-settings { width: calc(100% - 2.3rem); margin: 1.15rem; }

.object-dialog { width: min(1040px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.object-card { min-height: min(720px, calc(100dvh - 2rem)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.object-heading { position: sticky; }
.object-body { min-height: 470px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }
.object-media { min-height: 470px; display: grid; place-items: center; overflow: hidden; color: var(--paper); background: #050a0e; }
.object-media iframe, .object-media video { width: 100%; height: 100%; min-height: 470px; border: 0; background: #fff; }
.object-media video { object-fit: contain; background: #000; }
.object-placeholder { width: min(31rem, calc(100% - 2rem)); padding: 2rem; text-align: center; }
.object-placeholder span { display: block; color: var(--gold-light); font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.object-placeholder strong { display: block; margin-top: .5rem; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; }
.object-placeholder p { color: #b8c6cf; line-height: 1.5; }
.object-copy { padding: 1.4rem; color: #1b2831; background: var(--paper); }
.object-copy > p { margin: 0 0 1rem; color: #5d6971; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.55; }
.object-sources { display: grid; gap: .55rem; }
.object-source, .related-link { display: block; padding: .8rem; border: 1px solid rgb(10 20 29 / 18%); color: var(--ink); background: #fff; text-decoration: none; }
.object-source small, .related-link small { display: block; color: #8b5e10; font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.object-source strong, .related-link strong { display: block; margin-top: .18rem; font-family: Georgia, serif; font-weight: 500; }
.object-related { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(10 20 29 / 18%); }
.object-related > p { margin: 0 0 .5rem; color: #5f6c74; font-size: .76rem; line-height: 1.45; }
.related-link { color: var(--white); background: var(--steel); }
.related-link small { color: var(--gold-light); }
.object-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid rgb(10 20 29 / 17%); background: #fff; }
.object-nav button { min-height: 62px; display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.object-nav button:last-child { justify-content: flex-end; }.object-nav button:hover, .object-nav button:focus-visible { background: #ece9df; }
.object-nav button:disabled { opacity: .35; cursor: default; }.object-nav > span { padding: 0 1rem; color: #647079; font-size: .72rem; font-weight: 800; }
.object-actions { padding: .7rem; background: var(--ink); }
.object-actions button { width: 100%; min-height: 46px; border: 1px solid rgb(255 255 255 / 32%); color: var(--white); background: transparent; cursor: pointer; }
.object-actions button:hover, .object-actions button:focus-visible { color: var(--ink); background: var(--gold-light); }

@media (max-width: 820px) {
  .tour-header { grid-template-columns: 1fr auto; }.tour-location { display: none; }.collection-link { display: none; }
  .object-body { grid-template-columns: 1fr; }.object-media, .object-media iframe, .object-media video { min-height: 52dvh; }.object-copy { min-height: 230px; }
}
@media (max-width: 560px) {
  .tour-home small { display: none; }.tour-home strong { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-action > span:last-child { display: none; }.header-action { width: 42px; justify-content: center; padding: 0; }.header-actions { gap: .35rem; }
  .tour-ribbon { width: calc(100% - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); min-height: 58px; }.ribbon-step { width: 45px; min-width: 45px; }.current-stop { grid-template-columns: 46px minmax(0, 1fr) 14px; gap: .5rem; padding-inline: .45rem; }.current-stop img { width: 46px; height: 36px; }.view-wheel-shell { width: 52px; min-width: 52px; }.view-wheel-panel { left: auto; right: -47px; transform: translate(0, 12px); }.view-wheel-shell.is-open .view-wheel-panel { transform: translate(0, 0); }
  .museum-dialog, .object-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }.object-card { min-height: calc(100dvh - 1rem); }.object-heading h2 { font-size: 1.18rem; }.object-nav button span:not([aria-hidden="true"]) { display: none; }.object-nav > span { padding: 0 .4rem; }.object-body { min-height: 0; }.object-media, .object-media iframe, .object-media video { min-height: 45dvh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
