:root {
  --tour-navy: #071b2a;
  --tour-blue: #0f5277;
  --tour-blue-2: #17618c;
  --tour-gold: #e7b94f;
  --tour-paper: #f7f4ec;
  --tour-white: #fff;
  --tour-shadow: 0 20px 52px rgba(0, 12, 23, .34);
}

.experience-page,
.experience-page body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.tsa-tour-shell,
.tsa-pano {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.experience-page #pano {
  height: 100%;
}

.tsa-pano {
  transition: filter .22s ease;
}

.tour-fallback {
  max-width: 42rem;
  margin: 8rem auto;
  padding: 2rem;
  color: var(--tour-white);
  background: var(--tour-navy);
}

.tour-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;
}

.tsa-tour-header {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  gap: 1rem;
  padding: max(.45rem, env(safe-area-inset-top)) clamp(.7rem, 2vw, 1.5rem) .45rem;
  color: var(--tour-white);
  border-bottom: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(4,19,31,.94), rgba(4,19,31,.78));
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

.tour-home,
.tour-study-link,
.tour-access-link {
  color: inherit;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tour-study-link {
  color: var(--tour-gold);
}

.tour-home { display: inline-flex; align-items: center; gap: .55rem; width: max-content; }
.tour-home span:first-child { color: var(--tour-gold); font-size: 1.2rem; }
.tour-location { text-align: center; line-height: 1.1; }
.tour-location small { display: block; color: var(--tour-gold); font-size: .58rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.tour-location strong { display: block; max-width: 48vw; margin-top: .18rem; overflow: hidden; font-family: Georgia, serif; font-size: .98rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tour-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; }
.tour-access-link { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.46); }

.tour-settings-toggle,
.tour-ribbon button,
.dialog-close {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.tour-settings-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 50%;
}

.gear-mark {
  position: relative;
  width: 21px;
  height: 21px;
  display: block;
  border: 3px dotted currentColor;
  border-radius: 50%;
}
.gear-mark::before { content: ""; position: absolute; inset: 4px; border: 2px solid var(--tour-gold); border-radius: 50%; }
.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: 115;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(900px, calc(100% - 2rem));
  min-height: 58px;
  display: flex;
  align-items: stretch;
  padding: 0 .35rem;
  color: var(--tour-white);
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 7px;
  background: rgba(6, 29, 45, .88);
  box-shadow: var(--tour-shadow);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  transition: opacity .2s ease, transform .2s ease;
}

.tour-ribbon[hidden] { display: none; }
.tour-ribbon button { min-width: 44px; min-height: 44px; }
.tour-ribbon button:hover,
.tour-ribbon button:focus-visible,
.tour-settings-toggle:hover,
.tour-settings-toggle:focus-visible { color: var(--tour-gold); background: rgba(255,255,255,.08); }
.ribbon-step { width: 54px; font-family: Georgia, serif; font-size: 2.4rem; line-height: 1; }
.ribbon-step[aria-disabled="true"] { opacity: .34; }

.current-stop {
  min-width: 250px;
  max-width: 330px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .55rem 1rem;
  text-align: left;
}
.current-stop span { min-width: 0; }
.current-stop small { display: block; color: var(--tour-gold); font-size: .58rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.current-stop strong { display: block; overflow: hidden; font-family: Georgia, serif; font-size: 1rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.current-stop i { font-style: normal; font-size: 1.2rem; }
.ribbon-divider { width: 1px; align-self: center; height: 28px; background: rgba(255,255,255,.3); }
.pan-controls,
.view-controls { display: flex; align-items: center; }
.pan-controls button,
.view-controls button { width: 46px; font-size: 1.05rem; font-weight: 750; }
.view-controls button[data-command="fullscreen"] { font-size: 1.25rem; }

.tour-dialog {
  width: min(520px, calc(100% - 2rem));
  max-height: min(780px, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: auto;
  color: #12212e;
  border: 1px solid rgba(7,27,42,.24);
  border-radius: 8px;
  background: var(--tour-paper);
  box-shadow: 0 30px 90px rgba(0,0,0,.44);
}
.tour-dialog::backdrop { background: rgba(0, 12, 23, .66); backdrop-filter: blur(5px); }
.dialog-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  color: var(--tour-white);
  background: var(--tour-navy);
}
.dialog-heading small { color: var(--tour-gold); font-size: .62rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.dialog-heading h2 { margin: .12rem 0 0; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 500; line-height: 1; }
.dialog-close { width: 44px; height: 44px; font-size: 2rem; }

.tour-stops-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(7,27,42,.14); }
.tour-stops-list button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: .7rem;
  padding: .65rem 1rem;
  border: 0;
  color: #12212e;
  background: var(--tour-paper);
  text-align: left;
  cursor: pointer;
}
.tour-stops-list button:hover,
.tour-stops-list button:focus-visible { background: #fff; }
.tour-stops-list button[aria-current="true"] { color: var(--tour-white); background: var(--tour-blue); }
.stop-number { color: var(--tour-gold); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.stop-name { font-family: Georgia, serif; font-size: 1rem; }

.settings-section { padding: 1.15rem; border-bottom: 1px solid rgba(7,27,42,.16); }
.settings-heading { display: grid; grid-template-columns: 2.25rem 1fr; gap: .6rem; }
.settings-heading > span { color: var(--tour-gold); font-size: .75rem; 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: #52616c; font-size: .82rem; line-height: 1.4; }

.size-options,
.lighting-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .85rem; }
.size-options button,
.lighting-presets button,
.reset-settings {
  min-height: 42px;
  padding: .55rem .7rem;
  color: var(--tour-navy);
  border: 1px solid rgba(7,27,42,.28);
  background: transparent;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.size-options button[aria-pressed="true"],
.lighting-presets button:hover,
.lighting-presets button:focus-visible { color: var(--tour-white); background: var(--tour-blue); }

.toggle-list { display: grid; gap: .45rem; margin-top: .8rem; }
.toggle-list label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 50px; padding: .55rem .7rem; border: 1px solid rgba(7,27,42,.14); background: rgba(255,255,255,.52); }
.toggle-list strong,
.toggle-list small { display: block; }
.toggle-list strong { font-size: .84rem; }
.toggle-list small { color: #61707b; font-size: .72rem; }
.toggle-list input { width: 20px; height: 20px; accent-color: var(--tour-blue); }

.lighting-sliders { display: grid; gap: .85rem; margin-top: 1rem; }
.lighting-sliders label > span { display: flex; justify-content: space-between; font-size: .8rem; }
.lighting-sliders output { color: var(--tour-blue); font-weight: 850; }
.lighting-sliders input { width: 100%; accent-color: var(--tour-blue); }
.accessible-panel-link { display: block; margin-top: .85rem; padding: .85rem; color: var(--tour-white); background: var(--tour-navy); text-decoration: none; }
.accessible-panel-link strong,
.accessible-panel-link span { display: block; }
.accessible-panel-link span { margin-top: .2rem; color: #c6ddea; font-size: .76rem; }
.reset-settings { width: calc(100% - 2.3rem); margin: 1.15rem; }

.experience-page .skip-link { z-index: 500; }

@media (max-width: 780px) {
  .tsa-tour-header { grid-template-columns: 1fr auto; }
  .tour-location { display: none; }
  .tour-access-link { display: none; }
  .tour-ribbon { width: calc(100% - 1rem); bottom: max(.5rem, env(safe-area-inset-bottom)); min-height: 54px; }
  .current-stop { min-width: 0; flex: 1; padding-inline: .6rem; }
  .pan-controls { display: none; }
  .view-controls button[data-command="reset-view"] { display: none; }
  .view-controls button { width: 42px; }
}

@media (max-width: 520px) {
  .tour-home span:last-child { font-size: .68rem; }
  .ribbon-divider { display: none; }
  .view-controls button[data-command="zoom-out"],
  .view-controls button[data-command="zoom-in"] { display: none; }
  .current-stop strong { max-width: 41vw; }
  .tour-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
}

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