:root {
  --paper: #f5f0e4;
  --ink: #263f39;
  --muted: #77847a;
  --gold: #e9c68a;
  --line: #d7d9c9;
  --scale: 1;
  color-scheme: dark;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: #152e26;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #ba7335;
  outline-offset: 4px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
button {
  touch-action: manipulation;
}
#world,
#app {
  position: fixed;
  left: var(--play-left, 0px);
  top: var(--play-top, 0px);
  width: var(--play-width, 100%);
  height: var(--play-height, 100%);
}
#app {
  transform: translateZ(0);
}
#world canvas {
  display: block;
  touch-action: none;
}
#app {
  pointer-events: none;
}
body:not(.playing):not(.film-mode) #app::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(21, 46, 38, 0.79), rgba(23, 43, 35, 0.15) 70%),
    linear-gradient(0deg, rgba(18, 43, 32, 0.45), transparent 40%);
  pointer-events: none;
}
#app button,
#app a,
#app input,
#app select,
#app label,
#app .panel,
#app .hero,
#app .scrim {
  pointer-events: auto;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* A hidden control must stay hidden even when its component uses flex/grid. */
[hidden] {
  display: none !important;
}
.panel.photo-review {
  width: min(760px, 94vw);
}
.photo-review .panel-head {
  padding: 18px 24px;
}
.photo-review .panel-body {
  padding: 0 24px 22px;
}
.captured-photo {
  margin: 0;
  padding: 10px;
  border: 1px solid #d9d9c6;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 5px 18px #2e443716;
}
.captured-photo img {
  display: block;
  width: 100%;
  max-height: 49dvh;
  object-fit: contain;
  background: #233f36;
  border-radius: 3px;
}
.captured-photo figcaption {
  padding: 12px 6px 5px;
}
.captured-photo strong {
  display: block;
  font:
    23px Georgia,
    serif;
  margin-bottom: 6px;
}
.captured-photo span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #61715d;
}
.photo-save-state {
  font-size: 12px;
  color: #45684d;
  line-height: 1.5;
  margin: 14px 0;
}
.photo-review-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.photo-review-actions button {
  font-size: 12px;
  padding: 12px 16px;
}
.joystick[data-pace]:not([data-pace=""])::after {
  content: attr(data-pace);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 20px;
  background: #294a40ee;
  color: #fff0cc;
  font-size: 10px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .photo-review .panel-head {
    padding: 16px;
  }
  .photo-review .panel-head h2 {
    font-size: 25px;
  }
  .photo-review .panel-body {
    padding: 0 14px 18px;
  }
  .captured-photo {
    padding: 7px;
  }
  .captured-photo img {
    max-height: 41dvh;
  }
  .captured-photo strong {
    font-size: 21px;
  }
  .photo-review-actions {
    gap: 8px;
  }
  .photo-review-actions .primary,
  .photo-review-actions .secondary {
    flex: 1;
    padding: 12px 8px;
  }
  .photo-review-actions .quiet {
    flex-basis: 100%;
    min-height: 32px;
    padding: 6px;
  }
}
.choosing-explorer #app > :not(#modal) {
  visibility: hidden;
}
.explorer-choice {
  position: fixed;
  inset: 0;
  color: #fff4dd;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #203e35f2 0%,
    #203e35d9 32%,
    #203e3500 65%
  );
}
.explorer-copy {
  position: absolute;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(430px, 43vw);
  pointer-events: auto;
}
.explorer-copy h1 {
  font:
    400 clamp(32px, 4.6vw, 64px)/1.06 Georgia,
    serif;
  margin: 18px 0;
  letter-spacing: -0.025em;
}
.explorer-copy p {
  font-size: 14px;
  line-height: 1.7;
  color: #dae2cb;
}
.explorer-options {
  display: flex;
  gap: 14px;
  margin: 24px 0;
}
.explorer-option {
  width: 172px;
  border: 2px solid #e2dabb55;
  border-radius: 12px;
  background: #f3edda14;
  color: #fff4df;
  padding: 8px 10px 12px;
  text-align: center;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.explorer-option.selected {
  border-color: #edc788;
  background: #e4ce9b24;
}
.explorer-option:hover {
  background: #e4ce9b30;
}
.explorer-portrait {
  width: 94px;
  height: 104px;
  fill: initial;
  stroke: none;
}
.explorer-option strong {
  display: block;
  font:
    24px Georgia,
    serif;
}
.explorer-option small {
  display: block;
  font-size: 9px;
  margin: 7px 0 12px;
}
.explorer-selected {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #ecd3a1;
}
.explorer-caption {
  position: absolute;
  bottom: 12%;
  left: 66%;
  transform: translateX(-50%);
  font:
    32px Georgia,
    serif;
  text-align: center;
  text-shadow: 0 2px 12px #263d35;
}
.explorer-caption small {
  display: block;
  margin-top: 10px;
  font:
    9px system-ui,
    sans-serif;
  letter-spacing: 0.2em;
}
.landmark-label {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #29483fef;
  color: #fff3d7;
  border: 1px solid #f4ddb36b;
  border-radius: 9px;
  padding: 11px 16px;
  box-shadow: 0 5px 25px #1e39263d;
  text-align: center;
  max-width: 290px;
}
.landmark-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 6px);
  border: 6px solid transparent;
  border-top-color: #29483fef;
}
.landmark-label strong {
  display: block;
  font:
    20px Georgia,
    serif;
  margin: 5px 0;
}
.landmark-label span {
  display: block;
  font-size: 10px;
}
.landmark-label .landmark-category {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #dfc899;
}
.landmark-label.ready {
  background: #f4e8ce;
  color: #2b493b;
  border-color: #f8dc98;
}
.landmark-label.ready .landmark-category {
  color: #617752;
}
.landmark-label.ready::after {
  border-top-color: #f4e8ce;
}
.drone-telemetry {
  position: absolute;
  top: 112px;
  right: 28px;
  padding: 17px 20px;
  border-radius: 9px;
}
.drone-telemetry strong {
  display: block;
  font-size: 26px;
  margin: 9px 0 6px;
}
.drone-telemetry small {
  font-size: 11px;
  font-weight: 400;
}
.drone-telemetry span {
  display: block;
  font-size: 10px;
}
.drone-telemetry button {
  margin-top: 9px;
  padding: 4px 0;
  font-size: 11px;
}
#tutorial {
  position: fixed;
  top: calc(var(--play-top, 0px) + 112px);
  left: calc(var(--play-left, 0px) + 28px);
  width: 340px;
  max-height: calc(var(--play-height, 100dvh) - 260px);
  overflow: auto;
  padding: 20px 22px 16px;
  border-radius: 10px;
  color: #2b4439;
  background: #f8f1dfef;
  box-shadow: 0 8px 35px #233e3330;
  border: 1px solid #fff4d7;
  backdrop-filter: blur(14px);
  z-index: 3;
}
.tour-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tour-top .eyebrow {
  font-size: 8px;
  letter-spacing: 0.1em;
}
.tour-top .quiet {
  padding: 4px 0;
  font-size: 10px;
}
#tutorial .tour-toggle {
  min-height: 44px;
  padding: 8px 6px;
  white-space: nowrap;
}
#tutorial.minimized {
  width: auto;
  max-width: calc(100vw - 28px);
  max-height: none;
  padding: 0 12px;
}
#tutorial.minimized .tour-top {
  gap: 14px;
}
#tutorial h2 {
  font:
    27px/1.1 Georgia,
    serif;
  margin: 16px 0 12px;
}
#tutorial p {
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
  color: #566554;
}
.tour-controls {
  background: #e4e7d4;
  padding: 11px 12px;
  border-radius: 6px;
  margin: 14px 0;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 600;
}
.tour-task {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.tour-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid #9bab84;
  border-radius: 50%;
  font-size: 9px;
}
.tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
}
.tour-actions .secondary,
.tour-actions .primary {
  font-size: 11px;
  padding: 10px 12px;
  min-height: 39px;
}
.tour-actions .quiet {
  font-size: 10px;
  padding: 8px 0;
}
.tour-progress {
  display: flex;
  gap: 4px;
  margin-top: 17px;
}
.tour-progress i {
  height: 3px;
  flex: 1;
  background: #d7ddc7;
  border-radius: 2px;
}
.tour-progress i.done {
  background: #78926b;
}
.tutorial-active .goal,
.tutorial-active .hint,
.tutorial-active .field-chip-toggle,
.tutorial-active .hud-notes {
  display: none;
}
.tutorial-active .toast {
  top: auto;
  bottom: 110px;
}
@media (max-width: 720px) {
  .explorer-choice {
    background: linear-gradient(0deg, #203e35 0%, #203e35f0 27%, #203e3500 70%);
  }
  .explorer-copy {
    top: auto;
    bottom: 22px;
    left: 6%;
    width: 88%;
    transform: none;
  }
  .explorer-copy h1 {
    font-size: 30px;
    margin: 8px 0;
  }
  .explorer-copy h1 br,
  .explorer-copy p,
  .explorer-caption {
    display: none;
  }
  .explorer-options {
    gap: 10px;
    margin: 12px 0;
  }
  .explorer-option {
    flex: 1;
    width: auto;
    padding: 10px;
    text-align: left;
    position: relative;
  }
  .explorer-portrait {
    float: left;
    width: 56px;
    height: 67px;
    margin-right: 7px;
  }
  .explorer-option strong {
    font-size: 20px;
    margin-top: 4px;
  }
  .explorer-option small {
    display: none;
  }
  .explorer-selected {
    display: block;
    margin-top: 10px;
    font-size: 8px;
  }
  .explorer-copy .actions {
    flex-wrap: nowrap;
  }
  .explorer-copy .primary,
  .explorer-copy .ghost {
    font-size: 12px;
    padding: 12px;
  }
  #tutorial {
    top: calc(var(--play-top, 0px) + 90px);
    left: calc(var(--play-left, 0px) + 14px);
    width: min(320px, calc(100vw - 28px));
    max-height: calc(var(--play-height, 100dvh) - 330px);
    padding: 14px 16px;
  }
  #tutorial h2 {
    font-size: 23px;
    margin: 10px 0;
  }
  #tutorial p {
    font-size: 11px;
  }
  .tour-controls {
    margin: 10px 0;
    padding: 8px;
    font-size: 10px;
  }
  .tour-task {
    font-size: 10px;
  }
  .tour-actions {
    margin-top: 10px;
  }
  .tour-progress {
    margin-top: 10px;
  }
  .drone-telemetry {
    top: 94px;
    right: 14px;
    padding: 11px;
  }
  .tutorial-active .drone-telemetry,
  body.night-watch .drone-telemetry {
    display: none;
  }
  .landmark-label {
    max-width: 230px;
    padding: 9px 12px;
  }
  .landmark-label strong {
    font-size: 17px;
  }
}
@media (max-height: 560px) and (min-width: 721px) {
  #tutorial {
    top: calc(var(--play-top, 0px) + 86px);
    max-height: calc(var(--play-height, 100dvh) - 155px);
    width: 300px;
    padding: 12px 16px;
  }
  .explorer-copy h1 {
    font-size: 32px;
  }
  .explorer-copy p {
    display: none;
  }
  .explorer-options {
    margin: 12px 0;
  }
  .explorer-portrait {
    height: 74px;
  }
}
.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.brand small {
  display: block;
  opacity: 0.65;
  font-size: 9px;
  letter-spacing: 0.23em;
  margin-top: 5px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.hero {
  position: absolute;
  inset: 0;
  background: none;
  color: #fff6df;
  display: flex;
  flex-direction: column;
  padding: 35px 5vw;
}
.hero-enter .hero-top,
.hero-enter .hero-main,
.hero-enter .hero-footer {
  animation: hero-copy-in 0.9s ease both;
}
.hero-enter .hero-top {
  animation-delay: 0.12s;
}
.hero-enter .hero-main {
  animation-delay: 0.28s;
}
.hero-enter .hero-footer {
  animation-delay: 0.55s;
}
@keyframes hero-copy-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-enter .hero-top,
  .hero-enter .hero-main,
  .hero-enter .hero-footer {
    animation: none;
  }
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-main {
  margin: auto 0;
  max-width: 620px;
  padding: 30px 0;
}
.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(75px, 10vw, 146px);
  letter-spacing: -0.065em;
  font-weight: 400;
  line-height: 0.95;
  margin: 18px 0 12px;
}
.hero h2 {
  font-size: 13px;
  letter-spacing: 0.45em;
  font-weight: 450;
  text-transform: uppercase;
  margin: 24px 0;
}
.hero p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 370px;
  color: #e3e5d3;
}
.hero-footer {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  opacity: 0.8;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.primary {
  background: var(--gold);
  color: #273d33;
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.primary:hover {
  background: #f5d9a8;
  transform: translateY(-1px);
}
.secondary {
  background: #e5e8d9;
  color: #37564c;
  border: 1px solid #d0d6c4;
  border-radius: 5px;
  padding: 13px 20px;
  min-height: 46px;
  font-size: 13px;
  font-weight: 600;
}
.secondary:hover {
  background: #d8dfca;
}
.ghost {
  background: transparent;
  color: inherit;
  border: 1px solid #ffffff50;
  border-radius: 5px;
  padding: 13px 18px;
  font-size: 12px;
  min-height: 46px;
}
.quiet {
  color: #657568;
  background: none;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px;
}
.icon {
  height: 45px;
  width: 45px;
  border: 1px solid #f4f1dd70;
  background: #f7f3e5e8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #35584e;
  box-shadow: 0 3px 15px #243e3520;
  position: relative;
}
.icon:hover,
.icon.active {
  background: #eacf9a;
}
.glass {
  background: #f8f4e9ed;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 35px #253f3320;
  border: 1px solid #fff7df80;
}
.hud-top {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.field-chip {
  display: contents;
}
.field-chip-toggle {
  display: none;
}
.place {
  border-radius: 8px;
  padding: 15px 20px;
  min-width: 185px;
}
.place strong {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  display: block;
  margin-top: 4px;
}
.place small {
  font-size: 10px;
  color: #758174;
  display: block;
  margin-top: 5px;
}
.tools {
  display: flex;
  gap: 9px;
}
.compass {
  position: absolute;
  left: 50%;
  top: 27px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 25px;
  color: #fff6e0;
  text-shadow: 0 1px 5px #263f39;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.compass b {
  font-size: 14px;
}
.wayfinder,
.lens-compass {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
  padding: 0;
  max-width: none;
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
}
.wayfinder[hidden],
.lens-compass[hidden] {
  display: none !important;
}
.wayfinder-dial,
.lens-dial {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 2px solid #f0d39a;
  background:
    radial-gradient(circle at 50% 36%, #5a8070, #1a3328 68%);
  box-shadow:
    0 0 0 6px #1a332866,
    0 0 0 calc(8px + 10px * var(--lens-strength, 0.35)) #e9c68a55,
    0 10px 28px #0e1c1688;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}
.wayfinder-dial::before,
.lens-dial::before {
  content: "";
  position: absolute;
  top: 9px;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: #f0d39a;
}
.wayfinder-dial::after,
.lens-dial::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #e9c68a40;
  border-radius: 50%;
}
.wayfinder-dial i,
.lens-dial i {
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 40px solid #f3d48a;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 3px 6px #000a);
}
.wayfinder span,
.lens-compass span {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff6e0;
  text-shadow:
    0 1px 0 #1a3328,
    0 2px 12px #0e1c16,
    0 0 18px #0e1c16cc;
}
body.lens-on .compass,
body.lens-on .wayfinder {
  visibility: hidden;
}
.goal {
  position: fixed;
  bottom: 30px;
  left: 28px;
  width: 310px;
  border-radius: 9px;
  padding: 19px 21px;
  border-left: 3px solid #d3a85c;
}
.goal h3 {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.15;
  margin: 10px 0;
}
.goal p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  color: #657165;
}
.goal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.goal .quiet {
  padding: 0;
  font-size: 11px;
}
.hud-notes {
  display: contents;
}
.hud-note-toggle {
  display: none;
}
.progress-dots {
  display: flex;
  gap: 5px;
}
.progress-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d7d9c9;
}
.progress-dots i.done {
  background: #69816b;
}
.context {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 28px;
  padding: 12px 21px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: #f6f1df;
  background: #294a40ee;
  box-shadow: 0 5px 20px #28403330;
  font-size: 12px;
}
.key {
  border: 1px solid #ffffff65;
  border-radius: 4px;
  min-width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
}
.mode {
  position: absolute;
  bottom: 35px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode button {
  border-radius: 25px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  background: #f6f3e5ee;
  color: #3c574b;
}
.mode button.active {
  background: #35594c;
  color: #f8f0dc;
}
.hint {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 0 1px 4px #263e37;
  font-size: 9px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.toast {
  position: absolute;
  top: 115px;
  left: 50%;
  transform: translate(-50%, -15px);
  background: #f8f2df;
  color: #375749;
  padding: 15px 25px;
  border-radius: 7px;
  box-shadow: 0 8px 40px #263b3535;
  font-size: 13px;
  opacity: 0;
  transition: 0.3s;
  max-width: 90%;
  text-align: center;
  z-index: 4;
}
body:has(#wayfinder:not([hidden])) .toast,
body.lens-on .toast {
  top: 178px;
  bottom: auto;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast b {
  display: block;
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}
.scrim {
  position: absolute;
  inset: 0;
  background: #193b315e;
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 16;
}
.panel {
  background: var(--paper);
  border: 1px solid #fdf7e5;
  border-radius: 13px;
  box-shadow: 0 30px 100px #18352e50;
  width: min(970px, 100%);
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  font-size: calc(14px * var(--scale));
  overflow: hidden;
}
.panel.small {
  width: min(660px, 100%);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px 20px;
  border-bottom: 1px solid var(--line);
  gap: 15px;
}
.panel-head h2 {
  font-family: Georgia, serif;
  font-size: 33px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
}
.panel-head .icon {
  box-shadow: none;
  background: #e6e8db;
  border: none;
  flex-shrink: 0;
}
.panel-body {
  overflow: auto;
  padding: 26px 30px 30px;
  overscroll-behavior: contain;
  line-height: 1.65;
}
.panel-body h3 {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 13px;
}
.panel-body p {
  color: #626f60;
  margin: 0 0 16px;
}
.panel-body .lede {
  font-size: 17px;
  color: #415748;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 0 25px;
  gap: 22px;
  overflow: auto;
  flex-shrink: 0;
}
.tabs button {
  background: none;
  color: #7a8475;
  padding: 17px 2px 14px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  white-space: nowrap;
}
.tabs button.active {
  border-color: #557663;
  color: #294b3e;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid.two {
  grid-template-columns: repeat(2, 1fr);
}
.card {
  background: #fffaf0;
  border: 1px solid #dce0d0;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  color: var(--ink);
}
button.card:hover {
  border-color: #86a087;
  background: #edf0df;
}
.card h3 {
  font-size: 23px;
  margin: 8px 0;
}
.card p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.card small {
  color: #819078;
  font-size: 10px;
}
.chip {
  display: inline-block;
  border: 1px solid #c6cfb8;
  color: #648062;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 10px;
  line-height: 1.5;
}
.chip.done {
  background: #dce5cc;
  border-color: #dce5cc;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.row label {
  flex: 1;
}
.row small {
  display: block;
  color: #758170;
  font-size: 11px;
  margin-top: 4px;
}
.row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #486b56;
}
.row select {
  background: #fffcf3;
  border: 1px solid var(--line);
  padding: 8px;
  color: #355646;
  border-radius: 4px;
}
.row input[type="range"] {
  accent-color: #567257;
  width: 130px;
}
.source {
  display: block;
  font-size: 11px;
  color: #6f7f69;
  margin-top: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notice {
  background: #e8e9d9;
  border-left: 3px solid #91a280;
  padding: 13px 16px;
  font-size: 12px;
  line-height: 1.6;
  margin: 20px 0;
}
.lab-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.lab-entry p {
  margin: 0;
  flex: 1 1 220px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.map-wrap {
  position: relative;
  background: #e4e5ce;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1.5;
}
.map-wrap svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: #f6f0dd;
  color: #42614e;
  border: 1px solid #9baa8a;
  box-shadow: 0 2px 6px #304b3920;
  padding: 0;
}
.map-pin.done {
  background: #6f8968;
  color: white;
}
.map-pin.player {
  background: #e5ae67;
  width: 15px;
  height: 15px;
  border: 3px solid white;
  pointer-events: none;
}
.map-label {
  position: absolute;
  font-size: 11px;
  font-weight: 650;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #667555;
  letter-spacing: 0.03em;
}
.map-legend {
  display: flex;
  gap: 18px;
  font-size: 10px;
  color: #7a866d;
  margin: 9px 0 20px;
}
.map-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #faf6e9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin-top: 15px;
}
.map-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.map-pin.is-next,
.map-pin.is-coach {
  z-index: 3;
  background: #fff6df;
  border-color: #e9c68a;
  color: #3e5240;
  box-shadow:
    0 0 0 3px #f0d39a,
    0 0 0 10px #e9c68a40,
    0 0 22px #e9c68a99;
  animation: coach-pulse 1.5s ease-in-out infinite;
}
.map-wrap.is-guided {
  overflow: visible;
}
.map-guide {
  margin: 0 0 12px;
  font-size: 13px;
  color: #3e5240;
}
.map-guide strong {
  font-weight: 700;
}
.map-detail-actions .is-coach {
  position: relative;
}
.map-pin.is-nav {
  background: #35594c;
  color: #f8f0dc;
}
.map-detail h3 {
  margin: 0 0 4px;
  font-size: 24px;
}
.map-detail p {
  font-size: 12px;
  margin: 0;
}
.photo-card {
  padding: 0;
  overflow: hidden;
}
.photo-card img {
  width: 100%;
  aspect-ratio: 1.65;
  object-fit: cover;
  display: block;
  background: #d4dbc5;
}
.photo-caption {
  padding: 13px 17px;
}
.photo-caption h3 {
  font-size: 19px;
  margin: 0 0 5px;
}
.photo-caption p {
  font-size: 10px;
  margin: 0;
}
.camera-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff8e6;
}
.camera-top {
  display: flex;
  position: absolute;
  top: 25px;
  left: 30px;
  right: 30px;
  justify-content: space-between;
  align-items: center;
}
.camera-brand {
  text-shadow: 0 1px 4px #203d32;
}
.viewfinder {
  position: absolute;
  inset: 22% 24%;
  border: 1px solid #fff4d730;
  border-radius: 5px;
}
.viewfinder:before,
.viewfinder:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff6dfb3;
  clip-path: polygon(
    0 0,
    10% 0,
    10% 2%,
    2% 2%,
    2% 15%,
    0 15%,
    0 0,
    100% 0,
    100% 15%,
    98% 15%,
    98% 2%,
    90% 2%,
    90% 0,
    100% 0,
    100% 100%,
    90% 100%,
    90% 98%,
    98% 98%,
    98% 85%,
    100% 85%,
    100% 100%,
    0 100%,
    0 85%,
    2% 85%,
    2% 98%,
    10% 98%,
    10% 100%,
    0 100%
  );
}
.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 200;
  opacity: 0.6;
}
.camera-ui .look-hint {
  top: auto;
  bottom: 28%;
  transform: translate(-50%, 0);
}
.camera-subject {
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 5px #264431;
}
.camera-subject strong {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 31px;
}
.camera-subject small {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
.camera-bottom {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
.shutter {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid #fff4e0;
  background: #ffffff35;
  box-shadow: inset 0 0 0 6px #466858;
  display: grid;
  place-items: center;
  color: #fff7e8;
}
.shutter:hover {
  background: #e9cc96;
}
.zoom-label {
  font-size: 11px;
  width: 30px;
  text-align: center;
}
.flash {
  position: absolute;
  inset: 0;
  background: #fff8e4;
  opacity: 0;
  pointer-events: none;
}
.flash.fire {
  animation: flash 0.4s ease-out;
}
.transition {
  position: absolute;
  inset: 0;
  background: #eee7d3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 20;
}
.transition.show {
  opacity: 1;
  pointer-events: auto;
}
@keyframes flash {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
.lab-canvas {
  width: 100%;
  height: 280px;
  display: block;
  background: #d3c0a0;
  border-radius: 9px;
  touch-action: none;
  cursor: crosshair;
}
.lab-progress {
  height: 5px;
  background: #d9d8c6;
  border-radius: 4px;
  margin: 14px 0;
  overflow: hidden;
}
.lab-progress i {
  display: block;
  background: #698663;
  height: 100%;
  transition: width 0.2s;
}
.lab-grains {
  display: flex;
  gap: 8px;
  margin: -6px 0 8px;
  flex-wrap: wrap;
}
.lab-grains span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #e8ead8;
  color: #5a7056;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.lab-grains span b {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 13px;
  color: #3f5946;
}
.lab-grains span.is-active {
  background: #496b54;
  color: #f6f1df;
}
.lab-grains span.is-active b {
  color: #f0d39a;
}
.lab-grains span.is-done {
  outline: 1px solid #c5d4b0;
}
.fossil-context-card {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4ead3;
  border: 1px solid #e2d2a8;
  color: #3f5946;
}
.fossil-context-card .eyebrow {
  margin-bottom: 4px;
}
.fossil-context-card strong {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 4px;
}
.fossil-context-card p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
}
.fossil-layer-tag {
  position: absolute;
  transform: translate(-50%, -110%);
  min-width: 148px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fbf1d9ee;
  border: 1px solid #ecd099;
  color: #305443;
  text-align: left;
  pointer-events: none;
  box-shadow: 0 8px 24px #1e352844;
  opacity: 0;
}
.fossil-layer-tag.show {
  opacity: 1;
  animation: fossil-tag-in 0.45s ease;
}
.fossil-layer-tag .eyebrow {
  color: #6d7f58;
  font-size: 9px;
}
.fossil-layer-tag strong {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  margin: 2px 0 3px;
}
.fossil-layer-tag small {
  display: block;
  font-size: 11px;
  opacity: 0.8;
}
@keyframes fossil-tag-in {
  from {
    opacity: 0;
    transform: translate(-50%, -90%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -110%);
  }
}
.time-veil {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, #dcc9a0cc, #152e26f2 72%);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.time-veil.show {
  opacity: 1;
}
.time-veil.lift {
  opacity: 0;
}
.time-copy {
  text-align: center;
  color: #f6f1df;
  text-shadow: 0 2px 16px #152e26;
}
.time-copy strong {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  margin: 8px 0 4px;
  color: #f0d39a;
}
.time-copy small {
  display: block;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 14px;
}
.time-copy p {
  margin: 0;
  font-size: 15px;
  max-width: 320px;
}
.time-skip {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 13;
  pointer-events: auto;
  color: #f6f1df;
  background: #243f39aa;
}
.reduced-motion .time-veil,
.reduced-motion .fossil-layer-tag.show {
  animation: none;
  transition: none;
}
.tool-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.tool-row button {
  background: #e3e8d8;
  color: #50704e;
  border: 1px solid #cbd4bf;
  border-radius: 6px;
  padding: 11px 15px;
  font-size: 12px;
}
.tool-row button.active {
  background: #496b54;
  color: white;
}
.timeline {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 23px;
  align-items: stretch;
}
.layers {
  height: 220px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.layers div {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 10px;
  cursor: pointer;
}
.layer-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.layer-copy h3 {
  font-size: 29px;
}
.layer-copy p {
  font-size: 13px;
}
.story-count {
  font-size: 11px;
  color: #819077;
  margin-bottom: 12px;
}
.story p {
  font-family: Georgia, serif;
  font-size: 22px;
  color: #415646;
  line-height: 1.7;
}
.story-illustration {
  height: 85px;
  background: linear-gradient(
    165deg,
    transparent 47%,
    #b4b99a 48% 62%,
    #8a9c7d 63% 80%,
    #6c8667 81%
  );
  border-radius: 6px;
  margin-bottom: 23px;
}
.survey-board {
  background: #e2e4cc;
  border: 1px solid #d0d5bc;
  border-radius: 8px;
  min-height: 220px;
  position: relative;
  margin: 20px 0;
}
.survey-animal {
  position: absolute;
  background: #897052;
  color: #f9eed4;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12px;
}
.survey-animal.marked {
  background: #3f694e;
  outline: 3px solid #e2c78e;
}
.ancient-banner {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  color: #fff2d4;
  text-align: center;
  text-shadow: 0 2px 10px #365744;
}
.ancient-banner h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 39px;
  margin: 9px 0;
}
.ancient-bottom {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  max-width: 600px;
  width: 90%;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
}
.ancient-bottom p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.night-watch-panel {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: 520px;
  width: min(90%, 520px);
  text-align: center;
  padding: 16px 18px 14px;
  z-index: 6;
  pointer-events: auto;
}
.night-watch-panel p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.night-watch-panel .smallprint {
  margin-bottom: 10px;
}
.night-watch-panel .actions {
  justify-content: center;
  margin-top: 4px;
}
body.night-watch .hint,
body.night-watch .context,
body.night-watch .lens-compass {
  visibility: hidden;
  pointer-events: none;
}
.touch-controls {
  display: none;
  position: absolute;
  bottom: 65px;
  left: 22px;
  right: 22px;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
}
.joystick {
  width: 108px;
  height: 108px;
  border: 1px solid #fff9dc80;
  background: #f6f1dd25;
  border-radius: 50%;
  position: relative;
  pointer-events: auto;
  touch-action: none;
}
.joystick i {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 40px;
  height: 40px;
  background: #f4ecd6b3;
  border-radius: 50%;
  box-shadow: 0 2px 8px #17352a30;
  pointer-events: none;
}
.touch-actions {
  display: flex;
  gap: 10px;
}
.touch-actions button {
  width: 53px;
  height: 53px;
  min-height: 48px;
  border-radius: 50%;
  background: #f8f0dbe0;
  color: #375945;
  pointer-events: auto;
}
.control-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  font-size: 13px;
}
.control-grid dt {
  color: #3f5f4a;
  font-weight: 600;
}
.control-grid dd {
  margin: 0;
  color: #71816b;
}
.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
  color: #fff6df;
  text-align: center;
  pointer-events: auto;
}
.loader h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 62px;
  letter-spacing: -0.05em;
  margin: 16px;
  color: #fff6df;
}
.loader p {
  font-size: 13px;
  color: #c5cbb8;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 2px solid #cfd4bf;
  border-top-color: #567053;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.stats {
  display: flex;
  gap: 30px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.stat strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
}
.stat small {
  font-size: 10px;
  color: #839077;
}
.empty {
  padding: 50px 25px;
  text-align: center;
  color: #819071;
}
.empty svg {
  width: 42px;
  height: 42px;
  margin: 0 auto 15px;
}
.warning {
  color: #ac694b !important;
}
.error {
  color: #8b422f;
  padding: 12px;
  background: #f8ddc4;
  border-radius: 6px;
  font-size: 12px;
}
.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  color: #4b694e;
}
.check input {
  accent-color: #517050;
  width: 20px;
  height: 20px;
}
.complete-badge {
  font-size: 42px;
  display: block;
  color: #728d69;
  margin-bottom: 16px;
}
.kit-celebration {
  animation: kit-panel-in 0.55s ease;
  box-shadow:
    0 0 0 1px #e9c68a88,
    0 30px 100px #18352e50,
    0 0 48px #e9c68a33;
}
.kit-celebration .panel-head h2 {
  animation: kit-title-in 0.6s ease 0.08s both;
}
.kit-celebration .lede {
  animation: kit-fade-up 0.5s ease 0.18s both;
}
.kit-celebration .panel-body > p:not(.lede) {
  animation: kit-fade-up 0.5s ease 0.28s both;
}
.kit-celebration .actions {
  animation: kit-fade-up 0.45s ease 0.72s both;
}
.celebrate-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  margin: 4px 0 8px;
}
.celebrate-hero .complete-badge {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 54px;
  color: #e9c68a;
  text-shadow: 0 0 18px #e9c68a88;
  animation: kit-star 0.9s ease both;
}
.celebrate-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.celebrate-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 12px;
  margin: -6px 0 0 -1.5px;
  border-radius: 2px;
  background: #e9c68a;
  transform: rotate(calc(var(--i) * 45deg)) translateY(-10px);
  animation: kit-burst 0.7s ease calc(var(--i) * 0.03s) both;
}
.celebrate-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 14px;
}
.celebrate-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d7d9c9;
  animation: kit-dot 0.35s ease calc(0.32s + var(--n, 0) * 0.07s) both;
}
.celebrate-dots i:nth-child(1) { --n: 0; }
.celebrate-dots i:nth-child(2) { --n: 1; }
.celebrate-dots i:nth-child(3) { --n: 2; }
.celebrate-dots i:nth-child(4) { --n: 3; }
.celebrate-dots i:nth-child(5) { --n: 4; }
.celebrate-dots i:nth-child(6) { --n: 5; }
.celebrate-dots i:nth-child(7) { --n: 6; }
.kit-celebration .challenge-card {
  animation: kit-fade-up 0.5s ease var(--d, 0.4s) both;
}
body.kit-celebrating .scrim {
  background:
    radial-gradient(circle at 50% 42%, #e9c68a22, #193b315e 62%);
  animation: kit-scrim 0.6s ease;
}
@keyframes kit-panel-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kit-title-in {
  from {
    opacity: 0;
    letter-spacing: 0.04em;
  }
  to {
    opacity: 1;
    letter-spacing: -0.03em;
  }
}
@keyframes kit-star {
  0% {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
  55% {
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes kit-burst {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 45deg)) translateY(-8px) scale(0.4);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 45deg)) translateY(-38px) scale(0.2);
  }
}
@keyframes kit-dot {
  from {
    transform: scale(0.5);
    background: #d7d9c9;
  }
  to {
    transform: none;
    background: #698663;
    box-shadow: 0 0 0 3px #e9c68a44;
  }
}
@keyframes kit-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kit-scrim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.reduced-motion .kit-celebration,
.reduced-motion .kit-celebration *,
.reduced-motion.kit-celebrating .scrim {
  animation: none !important;
}
.reduced-motion .celebrate-burst {
  display: none;
}
.reduced-motion .celebrate-dots i {
  background: #698663;
  box-shadow: 0 0 0 3px #e9c68a44;
}
.region-banner {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff3dc;
  opacity: 0;
  transition: opacity 0.5s;
  text-shadow: 0 2px 14px #1d402a;
  pointer-events: none;
}
.region-banner.show {
  opacity: 1;
}
.mode-shift {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff3dc;
  text-shadow: 0 2px 14px #1d402a;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mode-shift.show {
  opacity: 1;
}
.mode-shift b {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 32px;
}
.mode-shift small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.challenge-grid {
  display: grid;
  gap: 10px;
  margin: 16px 0 8px;
}
.challenge-card h3 {
  font-size: 20px;
  margin: 0 0 6px;
}
.challenge-card p {
  margin: 0 0 12px;
}
.challenge-card .primary,
.challenge-card button {
  width: 100%;
}
.region-banner h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  margin: 8px 0;
}
.region-banner small {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.smallprint {
  font-size: 10px !important;
  line-height: 1.6 !important;
  color: #8a9380 !important;
}
.left-handed .touch-controls {
  flex-direction: row-reverse;
}
.reduced-motion *,
.reduced-motion *:before {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}
@media (pointer: coarse) {
  .touch-controls {
    display: flex;
  }
  .hint {
    display: none;
  }
  .context .key {
    display: none;
  }
  .goal {
    bottom: 185px;
  }
  .context {
    bottom: 20px;
  }
  .mode {
    bottom: 20px;
  }
  .camera-bottom {
    bottom: 26px;
  }
  .goal {
    width: 270px;
    padding: 14px 17px;
  }
  .goal h3 {
    font-size: 21px;
  }
  .goal p {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .hero {
    padding: 22px 6vw;
  }
  .hero h1 {
    font-size: 82px;
  }
  .hero h2 {
    font-size: 10px;
    letter-spacing: 0.32em;
  }
  .hero p {
    font-size: 14px;
  }
  .hero-footer {
    font-size: 8px;
  }
  .hero-footer span:last-child {
    display: none;
  }
  .brand {
    font-size: 9px;
  }
  .brand small {
    font-size: 8px;
  }
  .hero-main {
    padding: 15px 0;
  }
  .hud-top {
    left: 15px;
    right: 15px;
    top: 15px;
    gap: 10px;
  }
  .place {
    min-width: 0;
    padding: 11px 13px;
  }
  .place strong {
    font-size: 21px;
  }
  .place small {
    display: none;
  }
  .place .eyebrow {
    font-size: 8px;
  }
  .tools {
    gap: 6px;
  }
  .icon {
    height: 41px;
    width: 41px;
  }
  .compass {
    display: none;
  }
  .goal {
    left: 15px;
    width: 250px;
    bottom: 190px;
  }
  .goal h3 {
    font-size: 20px;
  }
  .goal p {
    font-size: 11px;
  }
  .goal .eyebrow {
    font-size: 8px;
  }
  .mode {
    right: 15px;
    bottom: 20px;
  }
  .mode button {
    padding: 12px;
  }
  .mode button span {
    display: none;
  }
  .context {
    left: 50%;
    transform: translateX(-50%);
    bottom: 186px;
    max-width: calc(100% - 32px);
    text-align: center;
    font-size: 10px;
    padding: 11px 15px;
    white-space: normal;
  }
  .context .key {
    display: none;
  }
  .scrim {
    padding: 10px;
  }
  .panel {
    max-height: 95svh;
  }
  .panel-head {
    padding: 18px;
  }
  .panel-head h2 {
    font-size: 27px;
  }
  .panel-body {
    padding: 20px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.two {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 16px;
  }
  .tabs {
    padding: 0 18px;
    gap: 20px;
  }
  .stats {
    gap: 22px;
  }
  .stat strong {
    font-size: 29px;
  }
  .map-wrap {
    aspect-ratio: 1;
  }
  .map-label {
    font-size: 9px;
  }
  .map-detail {
    display: block;
  }
  .map-detail .primary {
    margin-top: 13px;
  }
  .camera-top {
    left: 18px;
    right: 18px;
    top: 18px;
  }
  .camera-brand .eyebrow {
    font-size: 9px;
  }
  .camera-subject strong {
    font-size: 25px;
  }
  .camera-subject {
    bottom: 27%;
  }
  .story p {
    font-size: 19px;
  }
  .ancient-banner h2 {
    font-size: 31px;
  }
  .region-banner h2 {
    font-size: 37px;
  }
  .timeline {
    grid-template-columns: 70px 1fr;
    gap: 15px;
  }
}
@media (max-height: 550px) {
  .hero h1 {
    font-size: 70px;
  }
  .hero h2 {
    margin: 14px 0;
  }
  .hero p {
    font-size: 12px;
    margin: 5px 0;
    max-width: 340px;
  }
  .hero-actions {
    margin-top: 16px;
  }
  .hero-main {
    padding: 5px 0;
  }
  .hero-footer {
    display: none;
  }
  .hero {
    padding: 17px 4vw;
  }
  .hero-main {
    max-width: 450px;
  }
  .goal {
    bottom: auto;
    top: 91px;
    width: 220px;
    padding: 12px 15px;
  }
  .goal h3 {
    font-size: 18px;
    margin: 6px 0;
  }
  .goal p {
    font-size: 10px;
  }
  .goal-footer {
    margin-top: 8px;
  }
  .hud-top {
    top: 12px;
  }
  .place {
    padding: 9px 14px;
  }
  .place strong {
    font-size: 20px;
  }
  .touch-controls {
    bottom: 65px;
    left: 25px;
    right: 20px;
  }
  .joystick {
    width: 86px;
    height: 86px;
  }
  .joystick i {
    left: 23px;
    top: 23px;
  }
  .toast {
    top: auto;
    bottom: 88px;
  }
  .camera-subject {
    bottom: 30%;
  }
  .shutter {
    width: 59px;
    height: 59px;
  }
  .camera-bottom {
    bottom: 15px;
  }
  .viewfinder {
    inset: 18% 29% 28%;
  }
  .ancient-banner {
    top: 14px;
  }
  .ancient-banner h2 {
    font-size: 29px;
  }
  .ancient-bottom {
    padding: 12px;
    bottom: 15px;
  }
  .ancient-bottom p {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .ancient-bottom .primary {
    min-height: 38px;
    padding: 10px 20px;
  }
  .night-watch-panel {
    bottom: 186px;
    width: min(92%, 420px);
    padding: 12px 14px 10px;
  }
  .night-watch-panel p {
    font-size: 12px;
  }
  .panel-head {
    padding: 13px 20px;
  }
  .panel-head h2 {
    font-size: 26px;
  }
  .panel-body {
    padding: 18px 23px;
  }
  .lab-canvas {
    height: 210px;
  }
}

.arrival {
  position: absolute;
  inset: 0;
  color: #fff5df;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px 5vw;
  background: linear-gradient(0deg, #18352ad4, transparent 65%);
}
.arrival-top,
.arrival-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrival-copy {
  margin-top: auto;
  padding: 40px 0;
}
.arrival-copy h1 {
  font:
    400 clamp(30px, 4.7vw, 64px)/1.12 Georgia,
    serif;
  letter-spacing: -0.025em;
  margin: 18px 0;
}
.arrival-copy p {
  font-size: 16px;
  color: #e6e4ce;
}
.arrival-actions {
  margin-top: 28px;
}
.arrival-copy .primary {
  min-height: 58px;
  padding: 16px 28px;
  font-size: 16px;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 28px #10241ccc;
}
.arrival-bottom {
  font-size: 10px;
  letter-spacing: 0.15em;
}
.atlas-progress {
  margin-top: 10px !important;
  font-size: 10px !important;
}
.camera-bottom {
  gap: 17px;
}
.camera-bottom .secondary {
  background: #f4f0dfe0;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 11px;
}
.reduced-motion .arrival {
  display: none;
}
@media (max-width: 500px) {
  .arrival {
    padding: 24px;
  }
  .arrival-bottom span:last-child {
    display: none;
  }
  .camera-bottom {
    gap: 12px;
  }
  .camera-bottom .secondary {
    padding: 10px;
  }
  .hero-main {
    max-width: 100%;
  }
}

.field-active .hud-top,
.field-active .mode,
.field-active .context,
.field-active .compass,
.field-active .hint,
.field-active .touch-controls {
  visibility: hidden;
}
.field-active .night-watch-panel,
.field-active .drone-telemetry,
.tablet-open .night-watch-panel,
.tablet-open .drone-telemetry {
  visibility: hidden;
  pointer-events: none;
}
.field-active .scrim {
  background: none;
  backdrop-filter: none;
  justify-content: flex-end;
  pointer-events: none;
  padding: 20px;
}
.field-active .panel {
  width: 310px;
  max-height: 85vh;
  pointer-events: auto;
}
.field-active .panel-head {
  padding: 18px;
}
.field-active .panel-head h2 {
  font-size: 26px;
}
.field-active .panel-body {
  padding: 20px;
  font-size: 12px;
}
.field-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.animal-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fbf1d9e6;
  border: 2px solid #ecd099;
  color: #305443;
  font-size: 15px;
  box-shadow: 0 2px 12px #1e352844;
  pointer-events: auto;
}
.animal-pin.marked {
  background: #3d7253;
  color: white;
}
.field-active .panel {
  position: relative;
  z-index: 2;
}
@media (max-width: 700px) {
  .field-active .scrim {
    align-items: flex-end;
    padding: 10px;
  }
  .field-active .panel {
    width: 100%;
    max-height: 32vh;
  }
  .field-active .panel-head {
    padding: 8px 15px;
  }
  .field-active .panel-head h2 {
    font-size: 21px;
  }
  .field-active .panel-body {
    padding: 12px 16px;
  }
  .field-active .panel .notice,
  .field-active .panel .source,
  .field-active .panel .lede {
    display: none;
  }
  .field-active .panel p {
    font-size: 11px;
    margin: 0;
  }
  .field-active .panel .actions {
    margin-top: 8px;
  }
  .field-active .panel .row {
    padding: 6px 0;
  }
  .field-active .panel .primary {
    padding: 9px 15px;
    min-height: 38px;
  }
}

.field-active .lens-compass {
  display: none;
}
@media (max-width: 760px) {
  .mode button {
    padding: 11px;
  }
  .context {
    max-width: calc(100% - 32px);
  }
  .lens-dial,
  .wayfinder-dial {
    width: 88px;
    height: 88px;
  }
  .lens-dial i,
  .wayfinder-dial i {
    border-left-width: 11px;
    border-right-width: 11px;
    border-bottom-width: 32px;
  }
  .wayfinder span,
  .lens-compass span {
    font-size: 18px;
  }
}

.runoff {
  width: 100%;
  height: auto;
  stroke: none;
}
.runoff text {
  font: 600 11px system-ui;
  fill: #435642;
  letter-spacing: 2px;
}
.water-flow {
  animation: runoff 1s linear infinite;
}
@keyframes runoff {
  to {
    stroke-dashoffset: -48;
  }
}
.water-bench {
  display: flex;
  justify-content: center;
  gap: 60px;
  background: #e9e8d9;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 22px;
  text-align: center;
}
.water-bench h3 {
  font: 400 16px Georgia;
  margin: 12px 0 0;
}
.sample {
  width: 94px;
  height: 125px;
  border: 3px solid #becbbc;
  border-top: 0;
  border-radius: 2px 2px 20px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 7px 0 #fff8;
}
.sample:before {
  content: "";
  position: absolute;
  inset: 30px 0 0;
  background: #a9cbc68c;
  border-top: 2px solid #cde2d2;
}
.cloudy-sample:before {
  background: #b6a878c9;
}
.sample span {
  position: absolute;
  top: 55px;
  left: 34px;
  font: 25px Georgia;
  color: #4e6554;
}
.sample:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 6px;
  width: 10px;
  height: 75px;
  background: repeating-linear-gradient(
    0deg,
    #72917c 0 1px,
    transparent 1px 15px
  );
}

.touch-actions button[data-action="rise"],
.touch-actions button[data-action="lower"] {
  display: none;
}
.survey-mode .touch-actions button[data-action="rise"],
.survey-mode .touch-actions button[data-action="lower"] {
  display: block;
}
@media (max-width: 760px) {
  .touch-controls {
    display: flex;
  }
  .hint {
    display: none;
  }
  .touch-actions {
    gap: 8px;
  }
  .touch-actions button {
    width: 48px;
    height: 48px;
  }
  .icon {
    width: 44px;
    height: 44px;
  }
  .goal {
    top: 96px;
    bottom: auto;
    left: 15px;
    width: min(320px, calc(100% - 30px));
    padding: 12px 16px;
  }
  .goal h3 {
    font-size: 19px;
    margin: 6px 0;
  }
  .goal p {
    font-size: 11px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .goal .atlas-progress {
    display: none;
  }
  .goal-footer {
    margin-top: 9px;
  }
  .toast {
    top: auto;
    bottom: 190px;
    width: calc(100% - 30px);
    font-size: 11px;
    padding: 12px;
  }
  body:has(#wayfinder:not([hidden])) .toast,
  body.lens-on .toast {
    top: auto;
    bottom: 190px;
  }
  .toast b {
    font-size: 20px;
  }
  .camera-subject {
    white-space: normal;
    width: 90%;
  }
  .camera-subject strong {
    font-size: 24px;
  }
  .camera-subject small {
    font-size: 11px;
  }
}
@media (max-width: 460px) {
  .place {
    max-width: 135px;
    padding: 11px;
  }
  .place .eyebrow {
    display: none;
  }
  .place strong {
    font-size: 19px;
    margin: 0;
  }
  .tools {
    gap: 5px;
  }
  .hud-top {
    gap: 8px;
    align-items: center;
  }
  .goal {
    top: 81px;
  }
  .hero-top .ghost {
    max-width: 135px;
    font-size: 10px;
    padding: 8px;
  }
  .hero-top .tools .icon {
    display: none;
  }
}
@media (max-height: 550px) {
  .goal {
    top: 90px;
    width: 220px;
  }
  .goal p {
    display: none;
  }
  .goal .goal-footer {
    margin-top: 6px;
  }
  .toast {
    top: auto;
    bottom: 72px;
    width: auto;
  }
  .touch-actions button {
    width: 45px;
    height: 45px;
  }
  .joystick {
    width: 86px;
    height: 86px;
  }
  .goal .eyebrow {
    font-size: 8px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .goal {
    bottom: 175px;
  }
  .context {
    left: 28px;
    transform: none;
    max-width: calc(100% - 435px);
    white-space: normal;
    bottom: 20px;
    font-size: 11px;
  }
  .mode {
    bottom: 20px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 550px) {
  .goal {
    top: 95px;
    bottom: auto;
  }
}
@media (max-width: 460px) {
  .place strong {
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }
}

@media (max-width: 760px) {
  .hud-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 76px;
    left: 12px;
    width: min(220px, calc(50vw - 46px));
    pointer-events: none;
    z-index: 4;
  }
  body.lens-on .hud-notes {
    top: 148px;
  }
  .hud-notes .goal {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0;
    padding: 8px 10px 8px 12px;
    pointer-events: auto;
  }
  .goal .hud-note-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 18px;
    background: #e7ead8;
    color: #3e5240;
  }
  .hud-note-full {
    display: none;
  }
  .goal .eyebrow {
    font-size: 8px;
  }
  .goal:not(.is-open) .hud-note-detail,
  .goal:not(.is-open) .progress-dots {
    display: none;
  }
  .goal:not(.is-open) h3 {
    font-size: 15px;
    line-height: 1.25;
    margin: 3px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .goal-footer {
    margin-top: 6px;
    justify-content: flex-end;
    gap: 8px;
  }
  .goal.is-open .goal-footer {
    justify-content: space-between;
  }
  .goal .quiet:not(.hud-note-toggle) {
    font-size: 10px;
    white-space: nowrap;
  }
  .goal.is-open h3 {
    font-size: 17px;
    margin: 4px 0;
  }
  .goal.is-open .hud-note-detail p {
    display: block;
    font-size: 11px;
    -webkit-line-clamp: unset;
  }
}

@media (max-width: 460px) {
  .hud-notes {
    top: 70px;
    width: min(292px, calc(100% - 72px));
  }
}

@media (max-height: 550px) {
  .hud-notes {
    top: 64px;
  }
  .goal:not(.is-open) .eyebrow {
    display: none;
  }
}

.is-locked {
  visibility: hidden !important;
  pointer-events: none !important;
}
.look-hint {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: #243f39cc;
  color: #f6f1df;
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 5;
}
body.is-coaching #world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--coach-x, 50%) var(--coach-y, 78%),
    rgba(16, 38, 30, 0) 0,
    rgba(16, 38, 30, 0.1) var(--coach-r, 42px),
    rgba(10, 26, 22, 0.52) calc(var(--coach-r, 42px) + 110px),
    rgba(8, 22, 18, 0.66) 100%
  );
  animation: coach-dim-in 0.45s ease;
}
body.tutorial-active.is-coaching #world::after {
  display: none;
}
body.tutorial-active.is-coaching #world {
  filter: none;
}
body.is-coaching #tutorial {
  z-index: 5;
}
.is-coach {
  box-shadow:
    0 0 0 3px #f0d39a,
    0 0 0 10px #e9c68a40,
    0 0 28px #e9c68acc !important;
  animation: coach-pulse 1.5s ease-in-out infinite;
  z-index: 8;
  outline: 2px solid #fff6df;
  outline-offset: 3px;
  opacity: 1 !important;
  filter: none !important;
}
.panel button.is-coach,
.panel .card.is-coach {
  position: relative;
}
.context.is-coach,
.landmark-label.is-coach {
  background: #4a7364f5;
  color: #fff6df;
  border-color: #f0d39a;
}
.is-coach.coach-flash {
  animation:
    coach-flash 0.7s ease,
    coach-pulse 1.5s ease-in-out 0.7s infinite;
}
.is-coach[data-coach]::after {
  content: attr(data-coach);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2f4334;
  background: #fff6df;
  border: 1px solid #e9c68a;
  border-radius: 999px;
  padding: 5px 10px;
  pointer-events: none;
  box-shadow: 0 4px 16px #1a332866;
  animation: coach-label-in 0.45s ease;
}
.mode button,
.touch-actions button,
.tools .icon {
  position: relative;
}
body.is-coaching .tools .icon:not(.is-coach),
body.is-coaching .mode button:not(.is-coach),
body.is-coaching .touch-actions button:not(.is-coach) {
  opacity: 0.22;
}
body.is-coaching .place,
body.is-coaching .compass,
body.is-coaching .goal,
body.is-coaching .hint,
body.is-coaching .wayfinder,
body.is-coaching .lens-compass,
body.is-coaching .drone-telemetry {
  opacity: 0.28;
}
body.is-coaching .field-chip {
  opacity: 0.28;
}
body.is-coaching .field-chip .place,
body.is-coaching .field-chip .goal {
  opacity: 1;
}
body.is-guided-lock .joystick {
  pointer-events: none;
  opacity: 0.28;
}
body.is-guided-lock .is-coach,
body.is-coaching .is-coach {
  z-index: 7;
  opacity: 1;
}
.tour-actions .tour-needed {
  box-shadow:
    0 0 0 3px #f0d39a,
    0 0 0 10px #e9c68a40,
    0 0 22px #e9c68a99;
  animation: coach-pulse 1.5s ease-in-out infinite;
}
@keyframes coach-dim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes coach-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px #f0d39a,
      0 0 0 10px #e9c68a33,
      0 0 24px #e9c68abb;
  }
  50% {
    box-shadow:
      0 0 0 6px #fff1c8,
      0 0 0 18px #e9c68a22,
      0 0 36px #e9c68add;
  }
}
@keyframes coach-flash {
  0% {
    box-shadow:
      0 0 0 0 #e9c68a00,
      0 0 0 0 #e9c68a00;
  }
  35% {
    box-shadow:
      0 0 0 8px #fff6df,
      0 0 0 22px #e9c68a66,
      0 0 52px #e9c68aee;
  }
  100% {
    box-shadow:
      0 0 0 3px #f0d39a,
      0 0 0 10px #e9c68a40,
      0 0 28px #e9c68acc;
  }
}
@keyframes coach-label-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-coaching #world::after,
  .is-coach,
  .is-coach.coach-flash,
  .is-coach[data-coach]::after,
  .tour-actions .tour-needed {
    animation: none;
  }
}
#landscape-gate {
  position: fixed;
  left: var(--play-left, 0px);
  top: var(--play-top, 0px);
  width: var(--play-width, 100%);
  height: var(--play-height, 100%);
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: #243f39f2;
  color: #f6f1df;
  text-align: center;
  padding: 28px;
}
#landscape-gate[hidden] {
  display: none !important;
}
body.needs-landscape #landscape-gate {
  display: flex;
}
body.needs-landscape #world {
  filter: brightness(0.45);
}
.landscape-card strong {
  display: block;
  font:
    28px/1.2 Georgia,
    serif;
  margin: 16px 0 8px;
}
.landscape-card p {
  margin: 0;
  font-size: 14px;
  max-width: 280px;
  opacity: 0.85;
}
.landscape-phone {
  width: 42px;
  height: 68px;
  margin: 0 auto;
  border: 3px solid #e9c68a;
  border-radius: 8px;
  animation: landscape-turn 1.8s ease-in-out infinite;
}
@keyframes landscape-turn {
  40% {
    transform: rotate(90deg);
  }
  70% {
    transform: rotate(90deg);
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  .hud-top {
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }
  .place small {
    display: none;
  }
  .hud-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: max(68px, calc(env(safe-area-inset-top) + 56px));
    left: max(12px, env(safe-area-inset-left));
    width: min(220px, calc(50vw - 48px));
    pointer-events: none;
    z-index: 4;
  }
  body.lens-on .hud-notes {
    top: max(140px, calc(env(safe-area-inset-top) + 126px));
  }
  .hud-notes .goal {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0;
    padding: 8px 10px 8px 12px;
    pointer-events: auto;
  }
  .goal h3 {
    font-size: 16px;
    margin: 4px 0;
  }
  .goal:not(.is-open) .eyebrow {
    display: block;
  }
  .compass {
    display: none;
  }
  .mode {
    bottom: max(14px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
    left: auto;
  }
  .mode .is-locked {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .context {
    position: absolute;
    top: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(280px, 38vw);
    z-index: 5;
  }
  .context.is-coach[data-coach]::after {
    top: auto;
    bottom: calc(100% + 6px);
  }
  .touch-controls {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
  }
  .touch-actions {
    margin-bottom: 50px;
  }
  .touch-actions .is-locked {
    display: none !important;
  }
  .hint {
    display: none;
  }
  .wayfinder,
  .lens-compass {
    top: max(8px, env(safe-area-inset-top));
  }
  .wayfinder-dial,
  .lens-dial {
    width: 84px;
    height: 84px;
  }
  .wayfinder-dial i,
  .lens-dial i {
    border-left-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 30px;
  }
  .wayfinder span,
  .lens-compass span {
    font-size: 18px;
  }
  .arrival {
    padding: 16px 4vw 14px;
  }
  .arrival-copy {
    padding: 8px 0 4px;
  }
  .arrival-copy h1 {
    font-size: clamp(26px, 4.4vw, 44px);
    margin: 8px 0;
  }
  .arrival-copy p {
    font-size: 14px;
  }
  .arrival-actions {
    margin-top: 16px;
  }
  .arrival-copy .primary {
    min-height: 52px;
    font-size: 15px;
  }
  .arrival-bottom span:last-child {
    display: none;
  }
}

@media (max-width: 760px),
  (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .field-chip {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: min(280px, calc(100% - 168px));
    border-radius: 8px;
    background: #f8f4e9ed;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 35px #253f3320;
    border: 1px solid #fff7df80;
    border-left: 3px solid #d3a85c;
    overflow: hidden;
    z-index: 4;
    pointer-events: auto;
  }
  .field-chip .place {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    max-width: none;
    padding: 8px 8px 4px 12px;
    background: none;
    box-shadow: none;
    border: 0;
    backdrop-filter: none;
  }
  .field-chip .place-copy {
    min-width: 0;
  }
  .field-chip:not(.wildlife) #place-sub {
    display: none;
  }
  .field-chip.wildlife #place-sub {
    display: block;
    color: #8a4b2a;
  }
  .field-chip .place strong {
    font-size: 16px;
    line-height: 1.15;
    margin-top: 0;
  }
  .field-chip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 18px;
    background: #e7ead8;
    color: #3e5240;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }
  .field-chip .hud-notes {
    display: block;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    pointer-events: auto;
    z-index: auto;
  }
  body.lens-on .field-chip .hud-notes {
    top: auto;
  }
  .field-chip .goal {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 10px 8px 12px;
    background: none;
    box-shadow: none;
    border: 0;
    backdrop-filter: none;
    pointer-events: auto;
  }
  .field-chip .goal > .eyebrow {
    display: none;
  }
  .field-chip .goal .hud-note-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 18px;
    background: #e7ead8;
    color: #3e5240;
    text-decoration: none;
  }
  .field-chip .goal:not(.is-open) .hud-note-detail,
  .field-chip .goal:not(.is-open) .progress-dots {
    display: none;
  }
  .field-chip .goal:not(.is-open) h3 {
    font-size: 14px;
    line-height: 1.25;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .field-chip .goal.is-open h3 {
    font-size: 16px;
    margin: 2px 0 6px;
  }
  .field-chip .goal.is-open .hud-note-detail p {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    margin: 0 0 6px;
  }
  .tools .icon.is-locked {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .field-chip .goal-footer {
    margin-top: 4px;
    justify-content: flex-end;
    gap: 8px;
  }
  .field-chip .goal.is-open .goal-footer {
    justify-content: space-between;
  }
  .field-chip.minimized {
    max-width: none;
    width: auto;
    border-left-width: 0;
    border-radius: 999px;
  }
  .field-chip.minimized .place {
    padding: 3px;
  }
  .field-chip.minimized .place-copy,
  .field-chip.minimized .hud-notes {
    display: none;
  }
  .field-chip.minimized .field-chip-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .landmark-label {
    display: none !important;
  }
  .tutorial-active .field-chip {
    display: none;
  }
  #tutorial {
    top: calc(var(--play-top, 0px) + max(10px, env(safe-area-inset-top)));
    left: calc(var(--play-left, 0px) + max(12px, env(safe-area-inset-left)));
    width: min(300px, calc(100vw - 24px));
    max-height: calc(var(--play-height, 100dvh) - 118px);
    padding: 8px 12px 10px;
    z-index: 5;
  }
  #tutorial h2 {
    font-size: 18px;
    margin: 4px 0 4px;
  }
  #tutorial p {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tour-controls {
    margin: 6px 0;
    padding: 6px 8px;
    font-size: 10px;
  }
  .tour-task {
    font-size: 10px;
  }
  .tour-actions {
    margin-top: 6px;
  }
  .tour-progress {
    margin-top: 6px;
  }
  #tutorial.minimized {
    top: calc(var(--play-top, 0px) + max(10px, env(safe-area-inset-top)));
    left: calc(var(--play-left, 0px) + max(12px, env(safe-area-inset-left)));
    right: auto;
    width: auto;
    max-width: min(240px, calc(100vw - 24px));
    max-height: none;
    padding: 0 10px;
  }
  .mode button span {
    display: none;
  }
  .mode button {
    min-width: 44px;
    padding: 8px 10px;
  }
  .context {
    max-width: min(200px, 30vw);
  }
  .explorer-copy {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: min(440px, 72vw);
    transform: none;
  }
  .explorer-copy h1 {
    font-size: clamp(22px, 4.2vh, 32px);
    margin: 6px 0;
  }
  .explorer-copy h1 br,
  .explorer-copy p,
  .explorer-caption {
    display: none;
  }
  .explorer-options {
    gap: 8px;
    margin: 8px 0;
  }
  .explorer-option {
    flex: 1;
    width: auto;
    padding: 8px;
  }
  .explorer-portrait {
    width: 52px;
    height: 58px;
  }
  .explorer-option small {
    display: none;
  }
}

body.tutorial-film,
body.tutorial-film * {
  cursor: none !important;
}
body.tutorial-film #landscape-gate,
body.tutorial-film .touch-controls {
  display: none !important;
}
body.film-mode,
body.film-mode * {
  cursor: none !important;
}
body.film-mode #landscape-gate {
  display: none !important;
}
body.film-mode .toast,
body.film-mode .look-hint,
body.film-mode .mode-shift,
body.film-mode .hint,
body.film-mode .touch-controls,
body.film-mode .hero,
body.film-mode .arrival {
  display: none !important;
}
body.film-cinematic #app > *:not(#flash):not(#transition),
body.film-quiet #app > *:not(#flash):not(#transition) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.film-play .hud-notes,
body.film-play .tools,
body.film-play .wayfinder,
body.film-play .lens-compass,
body.film-play .drone-telemetry,
body.film-play .region-banner,
body.film-play .night-watch-panel,
body.film-play #night-watch {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.film-atlas .hud-top,
body.film-atlas .compass,
body.film-atlas .mode,
body.film-atlas .context,
body.film-atlas .hud-notes,
body.film-atlas .tools,
body.film-atlas .wayfinder,
body.film-atlas .lens-compass {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.film-play .hud-top,
body.film-play .compass,
body.film-play .mode,
body.film-play .context {
  opacity: 0;
  animation: film-hud-in 1.1s ease forwards;
}
body.film-play.film-hud-ready .hud-top,
body.film-play.film-hud-ready .compass,
body.film-play.film-hud-ready .mode,
body.film-play.film-hud-ready .context {
  opacity: 1;
  animation: none;
}
@keyframes film-hud-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.film-mode .panel-body .smallprint,
body.film-mode .panel-body .actions {
  display: none;
}

.sheet-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sheet-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #e6e8db;
  color: #375945;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.sheet-toggle:hover,
.sheet-toggle:focus-visible {
  background: #dce3d2;
}

@media (max-width: 760px),
  (pointer: coarse) and (max-width: 1024px),
  (orientation: landscape) and (max-height: 540px) {
  .scrim {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: #193b3140;
    backdrop-filter: blur(3px);
  }
  .panel.sheet,
  .panel.sheet.small,
  .panel.sheet.photo-review {
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 50px #18352e45;
  }
  .panel.sheet-compact {
    max-height: min(46svh, 420px);
  }
  .panel.sheet-expanded {
    max-height: min(88svh, 920px);
  }
  .panel.sheet-minimized {
    max-height: none;
  }
  .panel.sheet-minimized .tabs,
  .panel.sheet-minimized .panel-body {
    display: none;
  }
  .panel.sheet-minimized .panel-head {
    padding: 10px 14px;
    border-bottom: 0;
  }
  .panel.sheet-minimized .panel-head h2 {
    font-size: 18px;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58vw;
  }
  .panel.sheet .panel-head {
    padding: 10px 14px 8px;
    gap: 10px;
  }
  .panel.sheet .panel-head h2 {
    font-size: 20px;
  }
  .panel.sheet .panel-body {
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .panel.sheet .tabs {
    padding: 0 14px;
    gap: 14px;
  }
  .panel.sheet .tabs button {
    padding: 10px 2px 8px;
    font-size: 12px;
  }
  .panel.sheet-compact .map-wrap {
    aspect-ratio: auto;
    height: min(26svh, 200px);
    min-height: 128px;
  }
  .panel.sheet-expanded .map-wrap {
    aspect-ratio: 4 / 3;
    max-height: 48svh;
  }
  .panel.sheet-compact .sheet-more,
  .panel.sheet-compact .map-legend,
  .panel.sheet-compact .smallprint,
  .panel.sheet-compact .source,
  .panel.sheet-compact .map-detail p,
  .panel.sheet-compact .panel-body > p:not(.lede) {
    display: none;
  }
  .panel.sheet-compact .card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .panel.sheet-compact .stats {
    gap: 12px;
    margin: 0 0 10px;
  }
  .panel.sheet-compact .stat strong {
    font-size: 22px;
  }
  .panel.sheet-compact .grid {
    gap: 8px;
  }
  .panel.sheet-compact .card {
    padding: 10px 12px;
  }
  .panel.sheet-compact .card h3,
  .panel.sheet-compact .panel-body h3 {
    font-size: 16px;
    margin: 0 0 6px;
  }
  .panel.sheet-compact .lede {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .panel.sheet-compact .row {
    padding: 4px 0;
  }
  .panel.sheet-compact .row small {
    display: none;
  }
  .panel.sheet-compact .panel-body > h3 {
    display: none;
  }
  .panel.sheet-compact .lab-canvas {
    height: 150px;
  }
  .panel.sheet-compact.photo-review .captured-photo img {
    max-height: 22svh;
  }
  .panel.sheet-compact .photo-review-actions {
    margin-top: 8px;
  }
  .panel.sheet-compact .map-detail {
    padding: 10px 12px;
    margin-top: 8px;
  }
  .panel.sheet-compact .map-detail h3 {
    font-size: 16px;
    margin: 0 0 6px;
  }
  .panel.sheet-compact .map-detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .field-active .panel.sheet-compact {
    max-height: min(40svh, 300px);
  }
  .field-active .panel.sheet-expanded {
    max-height: min(82svh, 720px);
  }
  body.sheet-peek .scrim {
    background: none;
    backdrop-filter: none;
    pointer-events: none;
    align-items: flex-end;
    padding: 0;
  }
  body.sheet-peek .panel {
    pointer-events: auto;
  }
  body.sheet-peek .touch-controls {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .night-watch-panel {
    width: min(94%, 400px);
    padding: 10px 12px 8px;
    bottom: 16px;
  }
  .night-watch-panel .smallprint {
    display: none;
  }
  .landmark-label {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  .panel.sheet-compact {
    max-height: min(72svh, 340px);
  }
  .panel.sheet-compact .map-wrap {
    height: min(28svh, 120px);
    min-height: 88px;
  }
  .field-active .panel.sheet-compact {
    max-height: min(72svh, 340px);
  }
}

:root {
  --ink: #244449;
  --green: #234d4f;
  --cream: #f5efdf;
  --gold: #d5b678;
  --scale: 1;
}
body {
  background: #1c3d42;
}
button {
  transition:
    background 0.16s,
    box-shadow 0.16s,
    transform 0.16s;
}
button:active {
  transform: translateY(1px);
}
.primary {
  background: #244d4e;
  color: #faf1da;
}
.primary:hover {
  background: #356668;
}
.secondary {
  background: #e4e7d7;
  color: #2b5153;
}
.glass {
  background: #f6f0dfeb;
  border-color: #efe7d399;
  box-shadow: 0 7px 28px #14383612;
}
.eyebrow {
  letter-spacing: 0.16em;
}
.brand {
  font-weight: 650;
  letter-spacing: 0.18em;
}
.brand small {
  letter-spacing: 0.22em;
}
.arch-mark {
  font:
    46px/1 Georgia,
    serif;
  border: 1px solid #e6d9bb88;
  border-radius: 50%;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  padding-bottom: 7px;
  color: #e9d9b2;
}
.gateway-hero {
  padding: 34px 4.5vw 24px;
  color: #f7eddb;
}
.hero-top {
  position: relative;
  padding: 0;
}
.gateway-hero .hero-main {
  margin: 8.5vh 0 0;
  max-width: 520px;
}
.gateway-hero .hero-main h1 {
  font:
    clamp(66px, 7.5vw, 112px)/0.9 Georgia,
    serif;
  letter-spacing: -0.055em;
  color: #fff4df;
  margin: 22px 0 17px;
}
.gateway-hero h1 span {
  font-style: italic;
}
.gateway-hero h1 i {
  font: 70px Georgia;
  color: #d5b678;
  margin-left: 5px;
}
.gateway-hero h2 {
  font:
    italic clamp(22px, 2vw, 29px) Georgia,
    serif;
  color: #e3ca99;
  margin: 0 0 25px;
}
.gateway-hero .hero-main p {
  font-size: 15px;
  line-height: 1.9;
  color: #f3e8d4bb;
}
.gateway-hero .primary {
  background: #ead6a5;
  color: #234548;
  padding: 17px 24px;
  border-radius: 5px;
}
.gateway-hero .ghost {
  border-color: #ecdfbf5c;
  color: #f2e7d1;
}
.gateway-hero .hero-actions {
  gap: 12px;
  margin-top: 29px;
}
.hero-locations {
  font-size: 9px;
  letter-spacing: 0.21em;
  margin-top: 27px;
  opacity: 0.7;
}
.hero-locations span {
  padding: 0 8px;
}
.gateway-hero .hero-footer {
  left: 4.5vw;
  right: 4.5vw;
  bottom: 25px;
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 0.13em;
}
.hero-coordinate {
  text-align: right;
}
.tiny-rule {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: #d7bd88;
  vertical-align: middle;
  margin-right: 9px;
}
body:not(.playing):not(.film-mode) #app::before {
  background:
    linear-gradient(90deg, #112f37e8 0%, #14383ab8 30%, #203e401c 62%),
    linear-gradient(0deg, #163638a1, transparent 25%);
}
.gateway-arrival {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  padding: 18vh 7% 7vh;
  color: #ffefd5;
  pointer-events: auto;
  text-shadow: 0 2px 22px #21464799;
  background: linear-gradient(transparent, #112f37f2 58%);
}
.gateway-arrival h1 {
  font:
    clamp(35px, 5vw, 74px)/1.08 Georgia,
    serif;
  margin: 14px 0 22px;
  max-width: 16ch;
}
.gateway-arrival .arrival-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.gateway-arrival .primary {
  background: #ead6a5;
  color: #234548;
  min-height: 58px;
  padding: 16px 32px;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 32px #08191f88;
}
.gateway-arrival .primary:hover {
  background: #f5e2b8;
}
.explorer-copy .primary {
  background: #ead6a5;
  color: #234548;
  min-height: 56px;
  padding: 16px 28px;
  font-size: 16px;
  box-shadow: 0 10px 28px #08191f88;
}
.cinematic .hud-top,
.cinematic .mode,
.cinematic .hint,
.cinematic .context,
.cinematic .touch-controls,
.cinematic .compass,
.cinematic .era-chip,
.cinematic .wayfinder,
.cinematic .ride-panel,
.cinematic .landmark-label {
  opacity: 0;
  pointer-events: none;
}
.cinematic #app {
  background: linear-gradient(#0002, transparent 20%, transparent 80%, #0002);
}
.field-chip {
  max-width: 320px;
}
.era-chip {
  position: absolute;
  top: 92px;
  right: 30px;
  display: flex;
  gap: 11px;
  align-items: center;
  color: #f8efd7;
  text-shadow: 0 1px 10px #234144;
  font:
    23px Georgia,
    serif;
}
.era-chip span {
  font: 9px system-ui;
  letter-spacing: 0.14em;
  max-width: 140px;
}
.scene-caption {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff0d4;
  text-shadow: 0 2px 22px #173438;
  width: min(90%, 700px);
  pointer-events: none;
}
.scene-caption span {
  display: block;
  font: 14px system-ui;
  letter-spacing: 0.32em;
  margin-bottom: 16px;
}
.scene-caption strong {
  font:
    clamp(34px, 4vw, 60px) Georgia,
    serif;
}
.ride-panel {
  position: absolute;
  right: 30px;
  bottom: 95px;
  width: 265px;
  padding: 17px;
  border-radius: 8px;
  background: #f3efdfec;
  pointer-events: auto;
  box-shadow: 0 6px 24px #203d4220;
}
@media (hover: hover) and (pointer: fine) {
  body:has(.mode[hidden]) .ride-panel {
    bottom: 30px;
  }
}
.ride-panel .secondary,
.ride-panel .quiet {
  font-size: 11px;
  padding: 9px;
}
.ride-panel h3 {
  font:
    21px Georgia,
    serif;
  margin: 8px 0;
}
.ride-panel small {
  font-size: 11px;
}
.ride-meter {
  height: 3px;
  background: #d4d2bc;
  margin: 14px 0;
}
.ride-meter i {
  display: block;
  height: 100%;
  background: #5b8079;
}
.panel {
  max-width: 900px;
}
.panel-head {
  background: #f2eddf;
}
.panel-body {
  background: #faf6e9;
}
.panel h3 {
  font-family: Georgia, serif;
  font-weight: 400;
}
.panel p {
  line-height: 1.75;
}
.actions {
  flex-wrap: wrap;
}
.source-list {
  display: grid;
  gap: 8px;
}
.activity-source {
  margin-top: 25px;
  border-top: 1px solid #c8caba66;
  padding-top: 10px;
}
.activity-intro {
  border-bottom: 1px solid #ced1bb;
  padding-bottom: 12px;
  margin-bottom: 23px;
}
.activity-intro p {
  margin: 8px 0;
}
.gateway-map {
  position: relative;
  width: 100%;
  height: min(47vh, 440px);
  min-height: 240px;
  overflow: hidden;
  border: 1px solid #afb99f;
  border-radius: 8px;
}
.gateway-map > svg {
  width: 100%;
  height: 100%;
  stroke: none;
}
.map-north {
  position: absolute;
  top: 13px;
  left: 13px;
  font-size: 12px;
}
.river-map-label {
  position: absolute;
  right: 1%;
  top: 35%;
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: #365e65;
}
.gateway-map .map-pin {
  width: 29px;
  height: 29px;
  font-size: 10px;
  background: #f6edcf;
  color: #315956;
  border: 1px solid #6d9382;
}
.gateway-map .map-pin.done {
  background: #426d62;
  color: white;
}
.gateway-map .map-pin.player {
  background: #bc7d50;
  border: 2px solid white;
  width: 17px;
  height: 17px;
}
.gateway-map .selected {
  box-shadow: 0 0 0 5px #e1af5577;
}
.atlas-place-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.atlas-place-list .quiet {
  font-size: 10px;
}
.atlas-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 15px;
  position: sticky;
  top: 0;
  background: #faf6e9;
  z-index: 2;
}
.atlas-tabs button {
  background: transparent;
  white-space: nowrap;
  padding: 9px 13px;
  font-size: 11px;
  border-radius: 20px;
  color: #67796b;
}
.atlas-tabs .active {
  background: #315f5d;
  color: #faf0d5;
}
.atlas-intro {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 12px 0 28px;
}
.atlas-number {
  font: 80px Georgia;
  color: #537a6b;
}
.atlas-intro h3 {
  font-size: 27px;
  margin: 0;
}
.atlas-intro p {
  font-size: 12px;
}
.journey-track {
  display: grid;
  gap: 8px;
}
.atlas-step {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 15px;
  padding: 13px;
  border-radius: 5px;
  color: #345654;
  background: #eeeddf;
}
.atlas-step > span {
  font: 24px Georgia;
  color: #8a9b80;
  min-width: 30px;
}
.atlas-step small {
  display: block;
  line-height: 1.6;
  color: #718074;
  margin-top: 5px;
}
.atlas-step.done > span {
  color: #4c8571;
}
.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}
.journey-card {
  text-align: left;
  border: 1px solid #d1d6bd;
  padding: 20px;
  background: linear-gradient(135deg, #eef0df, #e2e8d6);
  color: #294c4d;
  border-radius: 6px;
  min-height: 170px;
}
.journey-card h3 {
  font-size: 25px;
  margin: 12px 0;
}
.journey-card p {
  font-size: 12px;
}
.journey-card > span:last-child {
  font-size: 10px;
  letter-spacing: 0.07em;
}
.atlas-entry {
  margin: 15px 0 30px;
  border-bottom: 1px solid #d5d6c6;
  padding-bottom: 22px;
}
.atlas-entry h3 {
  font-size: 28px;
  margin: 12px 0;
}
.journal-label {
  display: grid;
  gap: 8px;
  font-size: 11px;
  margin: 18px 0;
}
.journal-label textarea {
  resize: vertical;
  min-height: 80px;
  padding: 14px;
  background: #f2efdf;
  border: 1px solid #c4ceb7;
  border-radius: 5px;
  font:
    14px/1.5 Georgia,
    serif;
  color: #345552;
}
.empty-atlas {
  text-align: center;
  padding: 35px 12px 45px;
}
.empty-atlas h3 {
  font: 30px Georgia;
}
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.photo-tile {
  padding: 8px;
  text-align: left;
  background: #fffcf1;
  border: 1px solid #e0d9c7;
  color: #355854;
  box-shadow: 0 5px 14px #26473e0c;
}
.photo-tile img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #d6dfcb;
}
.photo-tile span {
  display: block;
  padding: 12px 5px;
  font: 19px Georgia;
}
.photo-tile small {
  display: block;
  font: 10px system-ui;
  margin-top: 7px;
  letter-spacing: 0.08em;
}
.pair-card {
  margin: 15px 0 34px;
}
.pair-images {
  position: relative;
  aspect-ratio: 16/9;
  background: #c9d9c5;
  overflow: hidden;
  border-radius: 4px;
}
.pair-images > img,
.pair-before,
.pair-before img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pair-before {
  clip-path: inset(0 50% 0 0);
}
.then-label,
.now-label {
  position: absolute;
  bottom: 12px;
  background: #234d4ecd;
  color: #fff2d5;
  padding: 7px 10px;
  font-size: 10px;
}
.then-label {
  left: 10px;
}
.now-label {
  right: 10px;
}
.compare-control {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 11px;
  margin-top: 12px;
}
.compare-control input {
  flex: 1;
}
.setting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}
.setting-grid label {
  display: grid;
  gap: 9px;
  font-size: 12px;
}
.setting-grid select {
  padding: 9px;
}
.import-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  padding: 12px;
}
.era-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.era-option {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px;
  text-align: left;
  background: #e8ebda;
  border: 1px solid #d2d8bf;
  border-radius: 5px;
  color: #305755;
}
.era-option > strong {
  font: 25px Georgia;
  min-width: 90px;
}
.era-option > span {
  flex: 1;
  font-size: 14px;
}
.era-option small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #728374;
}
.era-option.selected {
  background: #d8e4d0;
  border-color: #69957d;
}
.viewfinder {
  position: absolute;
  inset: 0;
  color: #fff4dc;
  pointer-events: none;
  background: linear-gradient(
    #123c4530,
    transparent 20%,
    transparent 75%,
    #123c4544
  );
}
.viewfinder-top {
  position: absolute;
  top: 27px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.15em;
  font-size: 11px;
}
.viewfinder-top small {
  display: block;
  letter-spacing: 0.1em;
  margin-top: 8px;
}
.viewfinder-top button,
.viewfinder-bottom button {
  pointer-events: auto;
}
.frame-corners {
  position: absolute;
  inset: 15% 15% 23%;
  border: 1px solid #fff3d966;
  border-radius: 6px;
  background:
    linear-gradient(
      90deg,
      transparent 33.2%,
      #fff4d922 33.3%,
      transparent 33.5%,
      transparent 66.5%,
      #fff4d922 66.6%,
      transparent 66.8%
    ),
    linear-gradient(
      transparent 33.2%,
      #fff4d922 33.3%,
      transparent 33.5%,
      transparent 66.5%,
      #fff4d922 66.6%,
      transparent 66.8%
    );
}
.photo-target {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 8px #1d4244;
}
.viewfinder-bottom {
  position: absolute;
  bottom: 35px;
  left: 8%;
  right: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zoom-controls,
.photo-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.viewfinder .shutter {
  width: 65px;
  height: 65px;
  background: #eee9d7;
  border: 4px solid #fff6dd;
  outline: 1px solid #fff6ddaa;
  outline-offset: 5px;
  border-radius: 50%;
  padding: 0;
  min-width: 65px;
  box-shadow: 0 5px 18px #24454740;
}
.viewfinder .shutter span {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #68827a;
  border-radius: 50%;
  margin: auto;
}
.camera-active .hud-top,
.camera-active .mode,
.camera-active .hint,
.camera-active .context,
.camera-active .landmark-label,
.camera-active .era-chip,
.camera-active .compass,
.camera-active .ride-panel {
  visibility: hidden;
}
.camera-active .touch-actions {
  display: none;
}
.illustration-axis {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  padding: 25px 5px;
  border-radius: 5px;
  background: #e5ead8;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.illustration-axis i {
  font-size: 25px;
  color: #ac965c;
}
.document-story {
  padding: 20px 25px 25px;
  background: #efe8d5;
  border: 1px solid #d9cfb8;
  border-radius: 4px;
}
.story-year {
  font: 43px Georgia;
  color: #aa8355;
}
.document-story h3 {
  font: 30px Georgia;
  margin: 12px 0 20px;
}
.document-story p {
  font: 17px/1.95 Georgia;
  max-width: 640px;
}
.story-progress {
  display: flex;
  gap: 9px;
  margin-top: 30px;
}
.story-progress button {
  background: #e0dbc6;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: #5c7563;
}
.story-progress .active {
  background: #3e6761;
  color: #fff6dd;
}
.rights-timeline article {
  border-left: 2px solid #c4b992;
  padding: 5px 0 15px 25px;
  position: relative;
}
.rights-timeline b {
  font: 27px Georgia;
  color: #ac8859;
}
.fiction-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8d7454;
}
.role-tabs {
  display: flex;
  gap: 6px;
  margin: 15px 0;
}
.role-tabs button {
  font-size: 11px;
  text-transform: capitalize;
  padding: 9px;
}
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.evidence-card {
  padding: 16px;
  text-align: left;
  background: #e9eddf;
  border: 1px solid #cdd5bd;
  border-radius: 5px;
  color: #3f615c;
}
.evidence-card b {
  font: 19px Georgia;
}
.evidence-card p {
  font-size: 12px;
  line-height: 1.7;
}
.evidence-card small {
  font-size: 11px;
}
.activity-result {
  padding: 20px;
  background: #e0e8d5;
  border-left: 3px solid #71947b;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.8;
}
.arch-facts {
  display: flex;
  justify-content: space-around;
  padding: 22px 0 30px;
}
.arch-facts b {
  display: block;
  font: 50px Georgia;
}
.arch-facts span {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.chain-diagram {
  width: 100%;
  height: 230px;
  stroke: none;
  background: #edeedc;
  border-radius: 5px;
}
.range-label {
  display: grid;
  gap: 12px;
  font-size: 12px;
  padding: 15px 0;
}
.range-label input {
  width: 100%;
  accent-color: #537e72;
}
.build-stage h3 {
  font-size: 30px;
}
.alignment-diagram {
  height: 112px;
  position: relative;
  background: #e4e9d8;
  border-radius: 5px;
  overflow: hidden;
}
.alignment-target {
  width: 60px;
  height: 62px;
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  border: 2px dashed #749680;
  border-radius: 5px;
}
.alignment-diagram > #alignment-piece {
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  font-size: 54px;
  color: #bd9765;
}
.alignment-feedback {
  font-size: 12px;
  color: #5f7a66;
}
.build-complete {
  text-align: center;
  padding: 25px;
}
.build-complete span {
  letter-spacing: 0.18em;
  font-size: 11px;
}
.build-complete h3 {
  font: 40px Georgia;
}
.tram-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tram-options button {
  padding: 18px;
  background: #e6e8d9;
  color: #46695f;
  border: 1px solid #ccd4bd;
  border-radius: 5px;
}
.tram-options span {
  display: block;
  font-size: 40px;
  margin-bottom: 10px;
}
.tram-options strong {
  font-size: 12px;
}
.selected {
  box-shadow: inset 0 0 0 2px #668f77;
}
.tram-test {
  height: 155px;
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  background: #e5e9da;
  border-radius: 5px;
}
.tram-rail {
  position: absolute;
  left: 30%;
  top: 10%;
  border: 3px solid #9caba0;
  border-bottom: 0;
  border-radius: 90% 90% 0 0;
  width: 50%;
  height: 200px;
}
.test-capsule {
  position: absolute;
  left: 32%;
  top: 100px;
  border-radius: 40%;
  background: #f8edce;
  padding: 10px;
  border: 2px solid #7f9c8b;
}
.tram-test.elevator .test-capsule {
  animation: elevate 3s infinite alternate;
}
.tram-test.train .test-capsule {
  animation: tiltcar 3s infinite alternate;
}
.tram-test.capsule .test-capsule {
  animation: levelcar 3s infinite alternate;
}
@keyframes elevate {
  to {
    top: 15px;
  }
}
@keyframes tiltcar {
  to {
    top: 12px;
    left: 52%;
    transform: rotate(70deg);
  }
}
@keyframes levelcar {
  to {
    top: 12px;
    left: 52%;
  }
}
.observation-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.observation-list button {
  display: grid;
  grid-template-columns: 26px 1fr;
  background: #e7ecdb;
  text-align: left;
  color: #41665c;
  padding: 14px;
  font-size: 13px;
}
.observation-list small {
  grid-column: 2;
  font-size: 10px;
  color: #7a8d76;
  margin-top: 5px;
}
.event-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.event-option {
  text-align: left;
  padding: 18px;
  background: #e7ecd9;
  border: 1px solid #d1d7bf;
  border-radius: 5px;
  color: #30584e;
}
.event-option strong {
  font: 22px Georgia;
  display: block;
}
.event-option small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0;
}
.event-option > span {
  font-size: 10px;
}
.before-after-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.before-after-choice button {
  padding: 24px;
  background: #dce6d0;
  text-align: left;
  color: #365d51;
  border-radius: 4px;
}
.before-after-choice button:first-child {
  background: #d6d3c5;
}
.before-after-choice span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.before-after-choice strong {
  font: 23px Georgia;
}
.planning-board {
  height: 220px;
  background: #dce7ce;
  position: relative;
  border-radius: 5px;
  margin: 16px 0;
}
.planning-path {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 45%;
  height: 30px;
  background: linear-gradient(
    90deg,
    #e9dfc6 42%,
    #9d9e8d 42%,
    #9d9e8d 58%,
    #e9dfc6 58%
  );
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  padding: 8px;
}
.planning-path.connected {
  background: #f4ead0;
}
.plan-tree,
.plan-seat,
.plan-stage {
  position: absolute;
  font-size: 50px;
  color: #6d8c61;
  top: 10px;
  left: 15%;
}
.plan-seat {
  left: 48%;
  top: 145px;
  font-size: 25px;
  color: #9d855b;
}
.plan-stage {
  left: 76%;
  color: #ba9763;
}
.planning-board small {
  display: block;
  font: 8px system-ui;
}
.plan-visitors {
  position: absolute;
  left: 8%;
  top: 43%;
  font-size: 25px;
  color: #3e625b;
}
.plan-visitors.walking {
  animation: visitorwalk 5s infinite linear;
}
@keyframes visitorwalk {
  to {
    left: 75%;
  }
}
.network-map svg {
  width: 100%;
  height: 230px;
  background: #e3e9d7;
  border-radius: 5px;
  stroke: none;
}
.network-map text {
  font: 10px system-ui;
  fill: #476a61;
}
.portal-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.portal-preview {
  height: 175px;
  display: grid;
  place-items: center;
  background: linear-gradient(#b2c6b4, #677f73);
  color: #f5dfb2;
  border: 8px solid #d7bc89;
}
.portal-preview > span {
  font-size: 11px;
  letter-spacing: 0.2em;
}
.portal-arch {
  font: 100px/0.8 Georgia;
}
.cargo-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cargo-items button {
  text-align: left;
  background: #e8e6d6;
  color: #4c695d;
  padding: 18px;
  border: 1px solid #cecdb6;
  border-radius: 5px;
}
.cargo-items span {
  display: block;
  font-size: 36px;
  color: #ae8858;
}
.cargo-items b {
  display: block;
  font: 20px Georgia;
  margin: 8px 0;
}
.cargo-items small {
  font-size: 11px;
  line-height: 1.7;
}
.cargo-animation {
  height: 60px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  color: #8d9475;
}
.cargo-animation > span {
  animation: cargomove 3s infinite linear;
  font-size: 30px;
}
.cargo-animation strong {
  font-size: 40px;
}
@keyframes cargomove {
  to {
    transform: translateX(140px);
  }
}
.cleanup-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px;
  background: #e5ead8;
  color: #698d7b;
  gap: 10px;
}
.cleanup-flow span {
  font-size: 9px;
  letter-spacing: 0.07em;
}
.water-gauge > span {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.water-gauge > div {
  display: flex;
  gap: 12px;
  margin: 15px 0;
}
.plant-sequence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.plant-sequence > div {
  padding: 15px;
  background: #e6ead8;
  color: #789075;
  font-size: 12px;
}
.plant-sequence span {
  font: 24px Georgia;
  margin-right: 12px;
}
.plant-sequence .done {
  background: #d1e1c7;
  color: #466948;
}
.habitat-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 15px 0;
}
.habitat-comparison > div {
  padding: 25px;
  background: #d7dec4;
}
.habitat-comparison > div:first-child {
  background: #d7c5a5;
}
.habitat-comparison strong,
.habitat-comparison span {
  display: block;
  margin: 10px 0;
}
.habitat-comparison span {
  font-size: 10px;
  letter-spacing: 0.1em;
}
.ecology-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.preservation-object {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.plaster-sample {
  height: 210px;
  background:
    radial-gradient(ellipse at 44% 45%, #d1c7b0 5%, transparent 8%),
    repeating-linear-gradient(118deg, #d0ba97 0 4px, #e8d6b4 4px 28px);
  border: 12px solid #cbb38b;
  display: grid;
  place-items: center;
  color: #6f6b52;
}
.plaster-sample span {
  background: #eadfc8da;
  padding: 12px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.plaster-sample.inspected {
  outline: 2px solid #709879;
  outline-offset: 4px;
}
.inspection-tools {
  display: grid;
  gap: 8px;
}
.inspection-tools button {
  background: #e1e8d3;
  padding: 12px;
  text-align: left;
  color: #4c705f;
}
.inspection-tools small {
  display: block;
  font-size: 11px;
  margin-top: 7px;
  line-height: 1.5;
}
.design-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px;
  background: #e3e8d5;
  font-size: 11px;
  color: #638371;
}
.reduced-motion * {
  animation: none !important;
  scroll-behavior: auto !important;
}
.setting-row input[type="checkbox"] {
  accent-color: #537f70;
  width: 20px;
  height: 20px;
}
.panel summary {
  cursor: pointer;
  padding: 14px 0;
}
.flash.show {
  opacity: 0.8;
  transition: none;
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 540px) {
  .gateway-hero {
    padding: 17px 22px;
  }
  .gateway-hero .hero-main {
    margin: 6vh 0 0;
    max-width: 370px;
  }
  .gateway-hero .hero-main h1 {
    font-size: 62px;
    margin: 15px 0 12px;
  }
  .gateway-hero .hero-main h2 {
    font-size: 23px;
    margin-bottom: 12px;
  }
  .gateway-hero .hero-main p {
    font-size: 12px;
    line-height: 1.55;
  }
  .gateway-hero .hero-actions {
    margin-top: 18px;
  }
  .gateway-hero .hero-actions button {
    font-size: 11px;
    padding: 11px 15px;
  }
  .gateway-hero .hero-footer {
    left: 22px;
    right: 22px;
    bottom: 14px;
    font-size: 8px;
  }
  .hero-locations {
    display: none;
  }
  .hero-top .tools > .ghost {
    font-size: 9px;
    padding: 9px;
  }
  .brand {
    font-size: 10px;
  }
  .brand small {
    font-size: 6px;
  }
  .arch-mark {
    width: 32px;
    height: 32px;
    font-size: 32px;
  }
  .era-chip {
    top: 61px;
    right: 15px;
    font-size: 17px;
  }
  .era-chip span {
    font-size: 8px;
  }
  .field-chip {
    max-width: 240px;
  }
  .ride-panel {
    right: 12px;
    bottom: 118px;
    width: 210px;
    padding: 11px;
  }
  .ride-panel h3 {
    font-size: 17px;
  }
  .ride-panel .eyebrow {
    font-size: 8px;
  }
  .gateway-map {
    height: 190px;
    min-height: 170px;
  }
  .gateway-map .map-pin {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }
  .journey-card {
    padding: 14px;
    min-height: 140px;
  }
  .journey-card h3 {
    font-size: 21px;
  }
  .viewfinder-top {
    top: 12px;
    left: 15px;
    right: 15px;
    font-size: 8px;
  }
  .viewfinder-top button {
    font-size: 10px;
    padding: 8px;
  }
  .viewfinder-bottom {
    bottom: 18px;
    left: 21%;
    right: 5%;
  }
  .viewfinder .shutter {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .viewfinder .shutter span {
    width: 32px;
    height: 32px;
  }
  .viewfinder-bottom .secondary {
    font-size: 10px;
    padding: 9px;
  }
  .zoom-controls,
  .photo-tools {
    gap: 7px;
  }
  .frame-corners {
    inset: 18% 15% 25%;
  }
  .photo-target {
    font-size: 9px;
  }
  .document-story {
    padding: 15px;
  }
  .document-story h3 {
    font-size: 25px;
  }
  .document-story p {
    font-size: 15px;
  }
  .chain-diagram {
    height: 180px;
  }
  .evidence-grid,
  .cargo-items {
    gap: 7px;
  }
  .evidence-card,
  .cargo-items button {
    padding: 12px;
  }
  .evidence-card b,
  .cargo-items b {
    font-size: 16px;
  }
  .panel-body .actions {
    gap: 7px;
  }
  .panel-body .actions button {
    font-size: 11px;
    padding: 10px 12px;
  }
  .alignment-diagram {
    height: 85px;
  }
  .alignment-target {
    top: 12px;
  }
  .alignment-diagram > #alignment-piece {
    top: 7px;
  }
  .map-detail h3 {
    font-size: 20px;
  }
  .scene-caption strong {
    font-size: 33px;
  }
  .arch-facts b {
    font-size: 36px;
  }
  .arch-facts span {
    font-size: 8px;
  }
}
@media (orientation: landscape) and (max-height: 540px) {
  .gateway-hero .hero-main {
    margin: 16px 0 0;
  }
  .gateway-hero .hero-main h1 {
    font-size: 49px;
    line-height: 0.9;
    margin: 10px 0;
  }
  .gateway-hero .hero-main h2 {
    font-size: 20px;
    margin-bottom: 9px;
  }
  .gateway-hero .hero-main p {
    font-size: 11px;
    line-height: 1.5;
  }
  .gateway-hero .hero-actions {
    margin-top: 11px;
  }
  .gateway-hero .hero-footer {
    display: none;
  }
  .gateway-hero .hero-main h1 br {
    display: none;
  }
  .gateway-hero h1 span {
    margin-left: 10px;
  }
  .gateway-hero h1 i {
    font-size: 40px;
  }
  .ride-panel {
    bottom: 118px;
  }
  .ride-panel small {
    font-size: 9px;
  }
  .ride-meter {
    margin: 9px 0;
  }
  .era-chip {
    top: 55px;
  }
  .gateway-map {
    height: 180px;
  }
  .touch-actions {
    bottom: 8px;
  }
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.panel.sheet-compact .photo-save-state {
  display: block !important;
}
/* Activity instructions and historical context must survive the compact shell. */
.panel.sheet-compact.gateway-activity .panel-body > p,
.panel.sheet-compact.gateway-activity .panel-body > h3,
.panel.sheet-compact.gateway-activity .source {
  display: block;
}
.tram-cabin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --door-open: 0;
  perspective: 800px;
}
.cabin-rim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 44%,
    transparent 0 48%,
    #aaa99c 48.3%,
    #e5e0cf 49%,
    #ebe5d4 68%,
    #969e97 95%
  );
  box-shadow: inset 0 0 50px #4d5d58;
}
.cabin-door {
  position: absolute;
  top: 11%;
  bottom: 16%;
  width: 23%;
  border: 1px solid #aaa998;
  border-radius: 42% 42% 8% 8%;
  background: linear-gradient(90deg, #b1b5a655, #eee8d49c);
  box-shadow: inset 0 0 20px #f5eddb88;
  transition: transform 0.15s;
}
.cabin-left {
  left: 27%;
  transform: translateX(calc(var(--door-open) * -110%));
}
.cabin-right {
  right: 27%;
  transform: translateX(calc(var(--door-open) * 110%));
}
.cabin-label {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #62766c;
  background: #ece6d4bb;
  padding: 9px 15px;
}
.look-hint {
  pointer-events: none;
}
body.playing:has(#context:not([hidden])) .look-hint {
  display: none;
}
.is-coaching #app:after {
  pointer-events: none;
}
.tram-riding .field-chip,
.tram-riding .context,
.tram-riding .mode,
.tram-riding .touch-controls,
.tram-riding .hint,
.tram-riding .compass {
  visibility: hidden;
}
.tram-riding .hud-top .tools {
  position: relative;
  z-index: 10;
}

/* The inherited Field Expedition tutorial shell, fitted to the District HUD. */
.hero-save { margin-top: 15px; color: #e1e8da; font-size: 11px; letter-spacing: .02em; }
.save-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c6d6a5; margin-right: 6px; }
.gateway-hero .hero-actions { flex-wrap: wrap; gap: 10px; }
.gateway-hero .fresh-start { border-color: #e9e2cc42; }
body:not(.playing) #app::after { display: none; }
#tutorial { top: 113px; left: 28px; width: 300px; max-height: calc(var(--play-height, 100dvh) - 235px); z-index: 8; }
#tutorial h2 { margin: 12px 0 10px; font-size: 26px; }
#tutorial .tour-controls { margin: 12px 0; }
#tutorial .tour-progress { margin-top: 14px; }
.tutorial-active .look-hint { display: none; }
.tutorial-active .landmark-label { display: none; }
.tutorial-active .context { max-width: 440px; }
.tablet-open #tutorial, .cinematic #tutorial, .camera-active #tutorial { display: none; }
body.is-coaching #tutorial { z-index: 8; }
body.is-coaching .hud-top .tools .icon[data-action="settings"] { opacity: 1; }
.panel .panel-body > p { display: block; }
.panel .panel-body > .smallprint { display: block; }
#design-study { position: absolute; bottom: 30px; right: 30px; width: min(460px, calc(100% - 60px)); padding: 23px 25px; border: 1px solid #fff0c6a8; background: #f6efddf5; backdrop-filter: blur(18px); border-radius: 12px; box-shadow: 0 12px 50px #172f3655; pointer-events: auto; color: #294a42; z-index: 15; }
#design-study h2 { font: 29px/1.1 Georgia,serif; margin: 18px 0; }
#design-study h3 { font: 21px Georgia,serif; margin: 15px 0 8px; }
#design-study p { font-size: 13px; line-height: 1.65; margin: 0 0 15px; }
#design-study small { font-size: 10px; color: #64776b; }
#design-study .tour-top .secondary { padding: 8px 10px; font-size: 10px; white-space: nowrap; }
.study-tabs { display: flex; gap: 6px; }
.study-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 11px 6px; border: 1px solid #aec0ab; border-radius: 5px; background: transparent; color: #355348; font-size: 10px; cursor: pointer; }
.study-tabs button[aria-pressed="true"] { background: #294c45; color: #fff4d8; border-color: #294c45; }
.study-tabs i { display: block; height: 3px; width: 12px; background: var(--layer-color); flex-shrink: 0; }
.design-studying .hud-top,.design-studying .mode,.design-studying .era-chip,.design-studying .compass,.design-studying .wayfinder,.design-studying .context,.design-studying .touch-controls,.design-studying .hint,.design-studying .ride-panel,.design-studying .landmark-label { visibility: hidden; }
@media (max-height: 620px) and (orientation: landscape) {
  #tutorial { top: 84px; left: 18px; width: 273px; max-height: calc(var(--play-height,100dvh) - 149px); padding: 12px 15px; }
  #tutorial h2 { font-size: 21px; margin: 8px 0; }
  #tutorial p { font-size: 11px; line-height: 1.4; }
  #tutorial .tour-controls { padding: 7px 9px; margin: 8px 0; font-size: 10px; }
  #tutorial .tour-actions { margin-top: 8px; }
  #tutorial .tour-progress { margin-top: 9px; }
  #tutorial .tour-task { font-size: 10px; }
  .tutorial-active .context { left: auto; right: 18px; transform: none; max-width: 43%; }
  #design-study { right: 16px; bottom: 16px; padding: 15px 18px; width: 360px; }
  #design-study h2 { font-size: 22px; margin: 12px 0; }
  #design-study p { font-size: 11px; margin-bottom: 8px; }
  .hero-save { margin-top: 8px; font-size: 10px; }
}
@media (max-width: 600px) {
  #tutorial { left: 15px; width: min(300px, calc(100% - 30px)); }
  #design-study { right: 15px; bottom: 15px; width: calc(100% - 30px); }
}
.settings-heading { font: 21px Georgia,serif; margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid #879b7b33; }
.settings-resume { display: flex; justify-content: flex-end; margin: 12px 0; }
.panel-body > .settings-heading { display: block !important; }
#design-study button:focus-visible, #tutorial button:focus-visible { outline: 3px solid #648d78; outline-offset: 3px; }
.panel { color-scheme: light; }
.settings-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 24px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 10px 0; border-bottom: 1px solid #9daf922e; font-size: 12px; cursor: pointer; }
.setting-row input[type="checkbox"] { appearance: none; width: 38px; height: 22px; flex-shrink: 0; border-radius: 20px; background: #c3cbbc; position: relative; cursor: pointer; transition: background .18s; }
.setting-row input[type="checkbox"]:after { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: #fffbee; box-shadow: 0 1px 4px #263d3520; transition: transform .18s; }
.setting-row input[type="checkbox"]:checked { background: #456e5b; }
.setting-row input[type="checkbox"]:checked:after { transform: translateX(16px); }
.setting-row input[type="range"] { width: 115px; accent-color: #456e5b; }
.setting-row select, .setting-grid select { border: 1px solid #b5c0aa; border-radius: 5px; background: #eef0df; color: #294a42; padding: 9px 12px; font: inherit; }
.setting-row input:focus-visible, .setting-row select:focus-visible { outline: 2px solid #456e5b; outline-offset: 4px; }
@media (max-height: 620px) and (orientation: landscape) {
  .tutorial-active .context { display: none; }
  body.tutorial-active .toast { left: auto; right: 20px; top: 105px; bottom: auto; width: 280px; max-width: 40%; padding: 12px 16px; transform: translateY(-10px); }
  body.tutorial-active .toast.show { transform: translateY(0); }
  body.tutorial-active .toast b { font-size: 19px; }
}
@media(max-width:640px) { .settings-controls { grid-template-columns: 1fr; } .setting-row { min-height: 48px; } }
@media (max-height: 540px) and (orientation: landscape) {
  .gateway-hero .hero-main { width: min(560px, 85vw); max-width: none; }
  .gateway-hero .hero-main h2 { white-space: nowrap; font-size: 18px; }
  .gateway-hero .hero-actions { flex-wrap: nowrap; width: max-content; max-width: 100%; }
  .gateway-hero .hero-actions button { padding: 12px 16px; white-space: nowrap; font-size: 11px; }
  .gateway-hero .hero-locations { margin-top: 14px; }
  .gateway-arrival { padding: 10vh 5% 5vh; }
  .gateway-arrival h1 { font-size: 34px; margin: 8px 0 14px; }
  .gateway-arrival .primary { min-height: 50px; font-size: 15px; padding: 14px 26px; }
}

body.tour-offer #goal,
body.tour-offer .hud-notes {
  display: none !important;
}
body.tour-offer .hud-top,
body.tour-offer .mode,
body.tour-offer .hint,
body.tour-offer .context,
body.tour-offer .compass,
body.tour-offer .era-chip,
body.tour-offer .wayfinder,
body.tour-offer .landmark-label,
body.tour-offer .look-hint,
body.tablet-open:not(.sheet-peek) .hud-top,
body.tablet-open:not(.sheet-peek) .mode,
body.tablet-open:not(.sheet-peek) .hint,
body.tablet-open:not(.sheet-peek) .context,
body.tablet-open:not(.sheet-peek) .compass,
body.tablet-open:not(.sheet-peek) .era-chip,
body.tablet-open:not(.sheet-peek) .wayfinder,
body.tablet-open:not(.sheet-peek) .landmark-label,
body.tablet-open:not(.sheet-peek) .look-hint,
body.tablet-open:not(.sheet-peek) .ride-panel {
  visibility: hidden;
  pointer-events: none;
}
body.playing:has(#goal:not([hidden]) .actions [data-action]) #context {
  display: none !important;
}
.panel {
  max-height: min(90dvh, 740px);
  display: flex;
  flex-direction: column;
}
.panel-body {
  min-height: 0;
  overflow: auto;
}
.source-list {
  margin-bottom: 20px;
}
.panel-body > .smallprint:last-child {
  padding-bottom: 12px;
}
@media (max-height: 760px) {
  .panel {
    max-height: 88dvh;
  }
  #design-study {
    width: min(340px, calc(100% - 36px));
    bottom: 14px;
    right: 14px;
    padding: 14px 16px;
  }
  #design-study h2 {
    font-size: 20px;
    margin: 8px 0;
  }
  .photo-grid {
    max-height: 52vh;
    overflow: auto;
  }
  .history-reading {
    grid-template-columns: 1fr;
  }
  .record-timeline {
    max-height: 28vh;
    overflow: auto;
  }
}


/* The place stays visible while one action is taught. */
.time-story-active #app {
  visibility: hidden;
  pointer-events: none;
}
.time-story {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
  color: #234d48;
  font-family: var(--sans, Arial, sans-serif);
}
.time-story button,
.time-story input,
.time-story summary,
.time-story a {
  pointer-events: auto;
}
.story-top {
  position: absolute;
  top: 20px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #faf7eced;
  box-shadow: 0 5px 28px #17392b14;
  font-size: 15px;
}
.story-brand {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
}
.story-brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 400;
  margin-top: 5px;
}
.story-top button {
  margin-left: auto;
  border: 0;
  background: #e3e9dc;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 24px;
  color: inherit;
  cursor: pointer;
}
.story-time {
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #fcf8eced;
  border-radius: 30px;
  font-size: 12px;
  white-space: nowrap;
}
.story-time i {
  width: 42px;
  height: 2px;
  background: #a5b79a;
}
.story-card {
  position: absolute;
  bottom: 28px;
  left: 28px;
  width: 350px;
  max-width: calc(100vw - 56px);
  box-sizing: border-box;
  padding: 24px;
  background: #faf7ecf5;
  border: 1px solid #fff9;
  border-radius: 20px;
  box-shadow: 0 15px 60px #17392b22;
  pointer-events: auto;
  max-height: calc(100dvh - 155px);
  overflow: auto;
}
.story-card h2 {
  font-family: Georgia, serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.08;
  margin: 12px 0;
}
.story-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 12px 0 16px;
}
.story-card .eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #53755e;
}
.story-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 17px;
}
.story-progress i {
  height: 4px;
  flex: 1;
  border-radius: 10px;
  background: #dfe5d6;
}
.story-progress i.done {
  background: #bd974f;
}
.story-scrubber {
  display: block;
  background: #e9eddc;
  padding: 14px;
  border-radius: 12px;
}
.story-scrubber > span {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  gap: 12px;
}
.story-scrubber input {
  width: 100%;
  margin: 17px 0;
  accent-color: #315e51;
  cursor: ew-resize;
  height: 24px;
}
.story-scrubber small {
  font-size: 10px;
  color: #5b7564;
}
.story-piece,
.story-continue {
  width: 100%;
  background: #315e51;
  color: #fff8e6;
  border: 0;
  border-radius: 12px;
  padding: 17px;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.story-piece {
  touch-action: none;
  cursor: grab;
  position: relative;
  z-index: 4;
}
.story-piece small {
  display: block;
  font-size: 10px;
  margin-top: 7px;
  font-weight: 400;
}
.story-piece.carrying {
  cursor: grabbing;
  box-shadow: 0 12px 24px #16352d55;
}
.story-replay {
  display: block;
  margin: 13px auto 0;
  border: 0;
  color: #426453;
  background: none;
  font-size: 12px;
  cursor: pointer;
}
.story-source {
  margin-top: 15px;
  color: #617463;
  font-size: 10px;
}
.story-source summary {
  cursor: pointer;
}
.story-source p {
  font-size: 11px;
  margin-bottom: 0;
}
.story-source a {
  color: inherit;
}
.story-target {
  position: absolute;
  transform: translate(-50%, -65%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: #214b41;
  max-width: 210px;
  text-align: center;
}
.story-target > span {
  display: grid;
  place-items: center;
  font-size: 28px;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #f7e3a5;
  border: 3px solid #fff7dd;
  box-shadow:
    0 0 0 9px #f3df9960,
    0 5px 20px #193c3566;
  animation: footprint-pulse 1.8s infinite;
}
.story-target b {
  padding: 7px 11px;
  border-radius: 8px;
  background: #fbf7eaef;
  box-shadow: 0 3px 15px #1239;
  font-size: 12px;
}
.story-target.waiting {
  opacity: 0.45;
}
.story-next-cue {
  padding: 16px;
  background: #e8edda;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}
@keyframes footprint-pulse {
  50% {
    box-shadow:
      0 0 0 15px #f3df9925,
      0 5px 20px #193c3566;
  }
}
.time-story button:focus-visible,
.time-story input:focus-visible {
  outline: 3px solid #c39137;
  outline-offset: 5px;
}
.tutorial-active .hud-notes,
.tutorial-active .field-chip-toggle,
.tutorial-active .era-chip,
.tutorial-active .hint,
.tutorial-active .mode [data-action="walk"] {
  display: none;
}
.tutorial-active:not(.guide-moving) .touch-controls,
.tutorial-active:not(.guide-moving) .wayfinder,
.tutorial-active:not(.guide-moving) .compass,
.tutorial-active .touch-actions {
  display: none;
}
.tutorial-active:has([data-action="time-story:crossing"]) #context,
.tutorial-active:has([data-action="time-story:garden"]) #context {
  display: none;
}
.mission-coach {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  background: #e7ebd9;
  padding: 16px 18px;
  border-radius: 12px;
  color: #2b5347;
}
.mission-coach > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #acbc9d;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 20px;
}
.mission-coach small {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.mission-coach p {
  margin: 5px 0 0 !important;
  font-size: 15px;
  line-height: 1.5;
}
.lab-heading h3 {
  margin-bottom: 6px;
}
.lab-heading p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 650px;
}
.investigation-panel .panel-head {
  padding: 20px 26px;
}
.investigation-panel .panel-head h2 {
  font-size: 29px;
}
.lab-heading {
  margin-bottom: 10px;
}
.lab-heading .lab-mode {
  font-size: 9px;
  padding: 4px 8px;
  margin-bottom: 8px;
}
.lab-heading p {
  margin: 0 0 8px;
}
.investigation-panel .lab-diagram {
  max-height: 250px;
}
.investigation-panel .mission-coach {
  padding: 12px 16px;
  margin-bottom: 12px;
}
.investigation-panel .lab-footer {
  margin-top: 10px;
  padding-top: 6px;
}
.investigation-panel .lab-range {
  margin: 7px 0;
}
.tutorial-active:has(#tutorial .tour-controls:first-child) #context {
  display: none;
}
.tutorial-active:has(#tutorial .tour-actions) .landmark-label {
  display: none;
}

/* The guide recedes at authored arrivals without taking away the world. */
.quiet-moment .hud-top,
.quiet-moment #tutorial,
.quiet-moment .mode,
.quiet-moment .context,
.quiet-moment .hint,
.quiet-moment .compass,
.quiet-moment .wayfinder,
.quiet-moment .era-chip,
.quiet-moment .ride-panel,
.quiet-moment .landmark-label,
.quiet-moment .toast,
.quiet-moment .touch-actions {
  visibility: hidden;
}
.quiet-moment #app::after {
  display: none;
}

.opening-reveal .touch-controls,
.opening-reveal .mode,
.opening-reveal .tools {
  visibility: hidden;
}

.opening-reveal .scene-caption {
  top: auto;
  bottom: 16%;
}

.opening-compare {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: min(28vw, 200px);
  margin: 0;
  padding: 8px;
  border: 1px solid #ead9ad88;
  border-radius: 8px;
  background: #173438cc;
  color: #fff0d4;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 8px 24px #17343855;
}

.opening-compare img {
  display: block;
  width: 100%;
  border-radius: 3px;
}

.opening-compare figcaption {
  padding: 8px 4px 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.opening-lens-photo img {
  max-height: 28dvh;
}
.era-option.selected {
  border-color: #456e5b;
  background: #e2ead8;
}
.museum-object-card p {
  font-size: 12px;
  line-height: 1.6;
}
.museum-object-card .actions {
  margin-top: 12px;
}
.tutorial-active.guide-moving #tutorial .tour-actions {
  gap: 6px;
}
.tutorial-active .tour-progress {
  gap: 4px;
}
.tutorial-active .touch-controls .joystick {
  pointer-events: auto;
}
@media (max-height: 620px) and (orientation: landscape) {
  body.tutorial-active.guide-moving #tutorial {
    width: 260px;
    max-height: calc(var(--play-height, 100dvh) - 142px);
  }
  body.tutorial-active.guide-moving .touch-controls {
    left: 300px;
    right: 16px;
  }
  body.left-handed.tutorial-active.guide-moving .touch-controls {
    left: 300px;
  }
  #tutorial .tour-top .eyebrow {
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  #tutorial .tour-top .quiet {
    font-size: 9px;
    padding: 5px;
  }
}
@media (max-height: 520px) {
  .investigation-panel .lab-diagram {
    max-height: 170px;
  }
  .investigation-panel .panel-head {
    padding: 12px 20px;
  }
  .investigation-panel .panel-head h2 {
    font-size: 23px;
  }
  .investigation-panel .panel-body {
    padding: 12px 20px;
  }
  .lab-heading {
    display: none;
  }
  .mission-coach {
    position: sticky;
    top: -12px;
    z-index: 5;
  }
  .mission-coach p {
    font-size: 12px;
  }
}
.lab-detail.exhibit-inspection {
  margin-top: 0;
  margin-bottom: 14px;
}
.lab-detail.exhibit-inspection:not([open]) .exhibit-canvas {
  height: 0;
}
.lab-button.is-next,
.lab-range input.is-next {
  outline: 3px solid #c79c51;
  outline-offset: 3px;
}
.lab-button[draggable="true"] {
  cursor: grab;
}
.lab-workspace[data-next="board"] .lab-board {
  outline: 2px solid #b2c29e;
  outline-offset: 5px;
}
.lab-board {
  position: relative;
  touch-action: none;
}
.board-journey {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.board-journey {
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
.mission-coach .lab-button {
  display: inline-block;
  margin-top: 12px;
  min-height: 40px;
}
.evidence-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.evidence-display > [data-source-drop] {
  min-height: 200px;
  border: 2px dashed #9caa84;
  background: #e8ecdd;
}
.evidence-display strong {
  font-family: Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.4;
}
.evidence-display .attached-source {
  margin-top: 22px;
  color: #557464;
}
.exhibit-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.exhibit-labels article {
  background: #e9edde;
  padding: 20px;
  border-radius: 10px;
}
.exhibit-labels span {
  font-size: 9px;
  letter-spacing: 1px;
}
.exhibit-labels h4 {
  font:
    22px/1.3 Georgia,
    serif;
}
.exhibit-labels p {
  font-size: 13px;
  line-height: 1.6;
}
.lab-footer .lab-controls {
  gap: 10px;
}
.lab-footer .lab-button:first-child:not(:only-child) {
  background: #315e51;
  color: #fff8e6;
}
.lab-result[hidden],
.lab-controls[hidden] {
  display: none !important;
}
.reduced-motion .story-target > span {
  animation: none;
}
@media (max-height: 520px) and (orientation: landscape) {
  .story-top {
    top: 10px;
    left: 14px;
    right: 14px;
    padding: 7px 12px;
    font-size: 12px;
    gap: 12px;
  }
  .story-top button {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  .story-brand {
    font-size: 9px;
  }
  .story-time {
    top: 66px;
    left: 28%;
    font-size: 10px;
    padding: 6px 10px;
    gap: 8px;
  }
  .story-time i {
    width: 20px;
  }
  .story-card {
    bottom: 14px;
    top: 66px;
    right: 14px;
    left: auto;
    width: 265px;
    padding: 15px;
    max-height: none;
    border-radius: 14px;
  }
  .story-card h2 {
    font-size: 24px;
    margin: 8px 0;
  }
  .story-card p {
    font-size: 12px;
    margin: 8px 0 12px;
    line-height: 1.45;
  }
  .story-progress {
    margin-bottom: 10px;
  }
  .story-scrubber {
    padding: 10px;
  }
  .story-scrubber input {
    margin: 7px 0;
  }
  .story-source {
    margin-top: 9px;
  }
  .story-piece,
  .story-continue {
    font-size: 12px;
    padding: 12px;
  }
  .story-target > span {
    width: 39px;
    height: 39px;
    font-size: 22px;
  }
  .story-target b {
    font-size: 10px;
  }
}
@media (max-width: 650px) and (orientation: portrait) {
  .story-card {
    left: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
    max-width: none;
    max-height: 43vh;
    padding: 16px;
  }
  .story-top {
    left: 14px;
    right: 14px;
    top: 14px;
    gap: 12px;
    font-size: 12px;
  }
  .story-time {
    top: 90px;
    font-size: 10px;
  }
  .story-card h2 {
    font-size: 24px;
  }
  .story-card p {
    font-size: 12px;
  }
  .exhibit-labels {
    grid-template-columns: 1fr;
  }
}

/* Shared workbench, designed for a mouse, touch and a keyboard alike. */
.tram-concepts,
.care-samples,
.care-phases,
.access-visitors,
.trial-role-tabs,
.court-role-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.care-phases {
  padding: 12px;
  background: #e5e8d7;
  border-radius: 8px;
}
.care-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.care-stage-controls {
  padding: 16px 0;
}
.care-stage-controls > .lab-button {
  margin: 6px;
}
.access-visitors > .lab-button {
  flex: 1 1 140px;
}
.access-observation {
  font-size: 15px;
  padding: 10px 14px;
  border-left: 3px solid #a78144;
  background: #eae4d2;
}
.lab-cell.tile-steps {
  background: repeating-linear-gradient(
    0deg,
    #c5ad89 0px,
    #c5ad89 10px,
    #91795a 10px,
    #91795a 13px
  );
}
.lab-cell.tile-ramp {
  background: linear-gradient(
    150deg,
    #e4d9bd 0%,
    #c4b990 60%,
    #8f997d 61%,
    #d6d5b7 65%
  );
}
.tram-concepts > button,
.trial-role-tabs > button {
  flex: 1 1 145px;
}
.mechanism-observation {
  background: #e4ebdb;
  border-left: 3px solid #a98040;
  padding: 12px 16px;
  font-size: 17px;
}
.chain-discovery {
  padding: 12px 0;
}
.chain-discovery h3 {
  font:
    500 25px Georgia,
    serif;
}
.chain-discovery .lab-button {
  margin: 6px 8px 0 0;
}
.history-reading {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
}
.record-timeline {
  display: grid;
  align-content: start;
  border-left: 2px solid #d5c4a1;
  gap: 8px;
  padding-left: 16px;
}
.record-timeline .lab-button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 48px;
}
.historical-record {
  padding: 28px;
  background: #ebe3d0;
  border-radius: 10px;
  align-self: start;
}
.historical-record h3 {
  font:
    500 27px/1.3 Georgia,
    serif;
}
.historical-record p {
  line-height: 1.85;
  font-size: 17px;
}
.historical-record .record-context {
  font-size: 12px;
  color: #647565;
  margin-top: 30px;
}
.historical-record a {
  display: block;
  padding: 8px 0;
  color: #315c51;
}
.quiet-history {
  color: #687669;
  font-size: 13px;
  margin-top: 20px;
}
.court-floor {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 600 / 470;
  margin: auto;
}
.court-floor > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.court-seat {
  position: absolute;
  transform: translate(-50%, 0);
  display: grid;
  gap: 3px;
  background: #f5efdf;
  border: 1px solid #b4b59b;
  border-radius: 7px;
  padding: 8px;
  width: 29%;
  color: #294943;
  cursor: pointer;
  min-height: 74px;
  font-size: 12px;
}
.court-seat strong {
  font-size: 14px;
}
.court-seat small {
  font-size: 10px;
  color: #657064;
}
.court-seat span {
  font-size: 11px;
  color: #7c612e;
}
.court-seat.occupied {
  background: #dce7d7;
  border-color: #69816b;
}
.court-seat:focus-visible {
  outline: 3px solid #b68d4d;
  outline-offset: 2px;
}
.garden-evidence-scene {
  min-height: 130px;
  background: linear-gradient(#e8e6d1 30%, #b9c9a1 30%);
  display: grid;
  place-items: center;
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 14px;
}
.garden-evidence-scene > span {
  font-size: 10px;
  letter-spacing: 2px;
}
.garden-row {
  color: #71815a;
  font-size: 38px;
  letter-spacing: 15px;
  font-style: normal;
}
.broken-border {
  color: #8a7358;
  font-size: 22px;
  font-style: normal;
}
.garden-evidence-scene > small {
  text-align: center;
  font-size: 12px;
}
.trial-records {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.trial-records .lab-button {
  text-align: left;
  align-self: start;
}
.trial-records span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}
.trial-testimony {
  max-width: 880px;
  margin: auto;
  line-height: 1.7;
}
.trial-testimony blockquote {
  border-left: 3px solid #b99b64;
  padding: 14px 20px;
  margin: 18px 0;
  background: #eae5d5;
  font-size: 17px;
}
.trial-testimony blockquote small {
  display: block;
  margin-top: 10px;
  font-size: 11px;
}
.trial-objection {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #d3d6c4;
}
@media (max-width: 620px) {
  .care-options {
    grid-template-columns: 1fr;
  }
  .history-reading {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .record-timeline {
    display: flex;
    overflow-x: auto;
    padding: 0 0 8px;
    border-left: 0;
  }
  .record-timeline .lab-button {
    flex: 0 0 155px;
  }
  .historical-record {
    padding: 20px;
  }
  .trial-records {
    grid-template-columns: 1fr;
  }
  .court-floor {
    min-height: 440px;
    aspect-ratio: auto;
  }
  .court-seat {
    width: 34%;
    min-height: 75px;
    padding: 6px;
  }
  .court-seat small {
    display: none;
  }
  .court-seat strong {
    font-size: 12px;
  }
}
.panel.investigation-panel {
  width: min(1180px, 94vw);
  max-width: 1180px;
  background: #f5f0e4;
}
.investigation-panel .panel-body {
  padding: 20px 26px 26px;
}
.investigation {
  color: #294943;
}
.lab-heading {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.lab-heading h3 {
  font:
    500 25px/1.3 Georgia,
    serif;
  margin: 10px 0 0;
  max-width: 690px;
}
.lab-mode {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: #dce6d7;
  padding: 6px 10px;
  border-radius: 20px;
  display: inline-block;
}
.mode-history {
  background: #e8d7b6;
}
.mode-model {
  background: #dce5df;
}
.mode-experiment {
  background: #d9e6d2;
}
.lab-state {
  font-size: 11px;
  white-space: nowrap;
  color: #5c7568;
}
.lab-workspace {
  display: grid;
  gap: 24px;
}
.lab-workspace.with-tools {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.lab-stage {
  min-width: 0;
}
.lab-toolbox {
  border-left: 1px solid #d3d8c7;
  padding-left: 22px;
}
.lab-toolbox > p {
  font-size: 12px;
  line-height: 1.6;
}
.lab-column-title {
  display: block;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #637c69;
}
.lab-diagram {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  background: #e7ebdc;
  border-radius: 15px;
  margin: 0 0 16px;
  color: #315b4c;
}
.lab-diagram text {
  fill: currentColor;
  font-family: system-ui, sans-serif;
}
.lab-button {
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: #33544a;
  background: #f7f4e9;
  border: 1px solid #bdcbb7;
  border-radius: 8px;
  padding: 10px 13px;
  cursor: pointer;
  min-height: 42px;
  text-align: left;
  transition:
    background 0.16s,
    border-color 0.16s;
  box-shadow: none;
}
.lab-button:hover {
  background: #e8efdf;
  border-color: #8aab85;
}
.lab-button.selected {
  background: #365f4d;
  color: #fff9e8;
  border-color: #365f4d;
}
.lab-button small {
  display: block;
  line-height: 1.5;
  margin-top: 5px;
  font-size: 11px;
}
.lab-button:disabled {
  opacity: 0.55;
  cursor: default;
}
.investigation button:focus-visible,
.investigation input:focus-visible {
  outline: 3px solid #bf8e3c;
  outline-offset: 3px;
}
.lab-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.lab-controls > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.lab-controls > div > b {
  width: 100%;
  text-transform: capitalize;
}
.lab-controls .lab-range {
  width: 100%;
}
.lab-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.lab-palette .lab-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px;
}
.lab-palette .lab-button > span {
  font-size: 21px;
  min-width: 22px;
  text-align: center;
}
.lab-range {
  display: block;
  margin: 12px 0;
}
.lab-range > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 7px;
}
.lab-range output {
  font-variant-numeric: tabular-nums;
  background: #e3e9d8;
  padding: 1px 7px;
  border-radius: 6px;
}
.lab-range input {
  display: block;
  width: 100%;
  accent-color: #4f785b;
  min-height: 32px;
  cursor: ew-resize;
}
.lab-board-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1.8px;
  margin: 0 0 9px;
  color: #64806e;
}
.lab-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
  background: #cad4b8;
  border: 1px solid #b8c7a4;
  border-radius: 12px;
  overflow: hidden;
}
.lab-cell {
  position: relative;
  aspect-ratio: 1.18;
  border: 1px solid #b8c5a6;
  background: #dce3c8;
  min-width: 0;
  padding: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  color: #496a4d;
}
.lab-cell > span {
  font-size: 25px;
  line-height: 1;
}
.lab-cell > small {
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.lab-cell:hover {
  box-shadow: inset 0 0 0 2px #967a3d;
}
.lab-cell:disabled {
  cursor: default;
  color: #4d705b;
  opacity: 1;
}
.tile-path {
  background: #f3e6c7;
}
.tile-bridge {
  background: repeating-linear-gradient(
    90deg,
    #b59a70 0px,
    #b59a70 6px,
    #d1b684 6px,
    #d1b684 9px
  );
  color: #324e44;
}
.highway:not(.tile-bridge) {
  background: #7d8577;
  color: #f7e6ba;
}
.submerged:not(.tile-bridge) {
  background: #85b6b7;
  color: #244f5a;
}
.tile-shade {
  background: #99b186;
  color: #355a3c;
}
.tile-seat {
  background: #c8af84;
}
.tile-stage {
  background: #cbbea0;
}
.tile-bin {
  background: #a7b69a;
}
.tile-early,
.tile-late {
  background: #aabd8e;
}
.tile-cover {
  background: #98b180;
}
.blooming > span {
  color: #fff0b3;
  text-shadow: 0 1px #9f7144;
}
.flower-spark {
  position: absolute;
  right: 15%;
  top: 10%;
  font-size: 22px;
  color: #eebd74;
}
.dry.blooming > span {
  color: #d4ba82;
}
.on-route {
  box-shadow: inset 0 -3px #a4b079;
}
.visitor-trace {
  position: relative;
  background: #e4e8d8;
  color: #476349;
  font-size: 11px;
  padding: 9px 12px;
  margin: 9px 0;
  border-radius: 5px;
}
.visitor-trace > span {
  display: inline-block;
  color: #b78c44;
  animation: labWalk 4s ease-in-out infinite alternate;
  margin-right: 15px;
}
.hold-board {
  background: #ae9676;
  border-color: #897655;
}
.hold-board .lab-cell {
  background: #d6bd95;
  color: #634f38;
}
.hold-board .hold-aisle {
  background: repeating-linear-gradient(
    135deg,
    #ead1a2,
    #ead1a2 8px,
    #d7b97f 8px,
    #d7b97f 13px
  );
}
.hold-board .tile-stove {
  background: #77857e;
  color: #edf2e9;
}
.hold-board .tile-supplies,
.hold-board .tile-tools {
  background: #b58b5c;
  color: #fcf2d9;
}
.runoff {
  background: #adc9c4;
}
.runoff.tile-barrier {
  background: #c5a36d;
}
.lab-metrics {
  display: flex;
  gap: 12px;
  background: #e7ebdd;
  padding: 13px 15px;
  margin-top: 12px;
  border-radius: 9px;
}
.lab-metrics > span {
  flex: 1;
  font-size: 10px;
  color: #61795d;
}
.lab-metrics b {
  display: block;
  font-size: 18px;
  line-height: 1.5;
  color: #345745;
}
.lab-result {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #ebe3d0;
  border-left: 3px solid #b9995b;
  padding: 12px 16px;
  margin: 20px 0 12px;
  border-radius: 3px 8px 8px 3px;
}
.lab-result.success {
  background: #deead7;
  border-color: #618959;
}
.lab-result > span {
  font-size: 25px;
}
.lab-result p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.lab-footer {
  border-top: 1px solid #d4dcc9;
  padding-top: 3px;
}
.lab-caption {
  font-size: 11px !important;
  color: #687964;
  line-height: 1.6 !important;
}
.lab-caption a {
  color: #3c6652;
}
.lab-detail {
  border-top: 1px solid #d7dccd;
  margin: 14px 0 0;
  padding-top: 12px;
}
.lab-detail summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  min-height: 30px;
}
.lab-detail[open] > summary {
  margin-bottom: 12px;
}
.lab-detail .lab-diagram {
  max-height: 210px;
}
.lab-hint {
  padding: 12px;
  background: #fbf1d9;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.lab-history {
  padding-left: 20px;
  font-size: 12px;
}
.lab-history p {
  font-size: 12px;
  margin: 3px 0 12px;
}
.lab-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  margin: 14px 0;
}
.build-stage-list {
  display: flex;
  gap: 5px;
  margin-bottom: 12px;
}
.build-stage-list span {
  flex: 1;
  font-size: 10px;
  line-height: 1.4;
  border-bottom: 3px solid #d3d8c8;
  padding: 7px 5px;
  color: #7c8b75;
}
.build-stage-list .active {
  color: #334f3e;
  border-color: #c09853;
}
.build-stage-list .done {
  color: #4b7451;
  border-color: #83a171;
}
.evidence-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.evidence-workspace > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.evidence-workspace .lab-button {
  min-height: 96px;
  padding: 15px;
  flex: 1;
}
.evidence-workspace p {
  font-size: 12px;
  margin: 8px 0 0;
  line-height: 1.55;
}
.evidence-workspace small {
  font-size: 10px;
  color: #7b846d;
}
.source-slip {
  font-size: 11px;
  letter-spacing: 0.6px;
  font-weight: 600;
}
.attached-source {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.8;
}
.compare-choice {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.compare-choice button {
  flex: 1;
}
.comparison-findings {
  display: flex;
  gap: 8px;
}
.comparison-findings button {
  flex: 1;
}
.lab-success {
  padding: 10px;
  background: #e0ebd7;
}
.school-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #e7dbbf;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 12px 0 18px;
  font-size: 11px;
}
.school-strip small {
  width: 100%;
}
.exhibit-canvas {
  height: 240px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, #e7e3d4, #cdd9c9);
  overflow: hidden;
}
.exhibit-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.exhibit-controls {
  display: flex;
  gap: 20px;
}
.exhibit-controls > * {
  flex: 1;
}
.exhibit-inspection > small {
  display: block;
  font-size: 10px;
  color: #687961;
}
.exhibit-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr;
  gap: 18px;
  margin: 0;
}
.exhibit-media img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  border-radius: 9px;
  background: #e0dece;
}
.exhibit-media figcaption {
  font-size: 12px;
  align-self: center;
  line-height: 1.7;
}
.exhibit-media small {
  font-size: 10px;
}
.museum-catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.museum-object-card {
  text-align: left;
  background: #e7e9dc;
  color: #315648;
  border: 1px solid #c5cfb9;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  min-height: 175px;
}
.museum-object-card strong {
  display: block;
  font:
    24px Georgia,
    serif;
  margin: 12px 0;
}
.museum-object-card small {
  line-height: 1.6;
  display: block;
}
.museum-object-card:hover {
  background: #dce6d0;
}
.museum-object-card .eyebrow {
  font-size: 9px;
}
.lens-live {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
}
.lens-live canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.lens-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.lens-mark {
  pointer-events: auto;
  position: absolute;
  width: 4.6rem;
  height: 4.6rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.lens-mark i {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 auto;
  border: 3px solid #f4edd9;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #244e45, 0 4px 16px #153c3180;
  background: #ead6a5cc;
}
.lens-mark span {
  display: block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: #244e45e6;
  color: #fff8df;
  font: 600 10px/1.2 Georgia, serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 1px 2px #153c31;
}
.lens-mark.is-found i {
  background: #416856;
  border-color: #ead6a5;
}
.lens-mark.is-found span {
  background: #315e51;
}
.lens-prompt {
  font-size: 13px;
  margin: 4px 0 8px;
}
.lens-live .lens-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #efdfb7;
  left: 50%;
}
.lens-controls {
  pointer-events: auto;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(660px, 92vw);
  background: #f4efdfed;
  color: #345344;
  padding: 17px 20px;
  border: 1px solid #bacaad;
  border-radius: 14px;
  box-shadow: 0 10px 60px #18302d30;
  backdrop-filter: blur(12px);
}
.lens-controls .lab-range {
  margin: 8px 0;
}
.lens-controls p {
  font-size: 11px;
  margin: 5px 0;
}
.lens-labels {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff8df;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px #153c31;
}
.lens-labels span {
  background: #244e45bf;
  padding: 10px 14px;
  border-radius: 20px;
}
.lens-mode-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lens-mode-tabs button {
  font-size: 11px;
}
.lab-history-summary {
  border-left: 2px solid #a1b394;
  padding-left: 12px;
  margin-top: 10px;
}
.lab-history-summary p {
  font-size: 12px;
}
.pollinator.landed {
  animation: beeArrival 2s ease-out;
}
.water-flow {
  animation: flowDash 1s linear infinite;
}
@keyframes beeArrival {
  from {
    transform: translate(165px, 95px);
  }
  to {
    transform: translate(312px, 185px);
  }
}
@keyframes flowDash {
  to {
    stroke-dashoffset: -32;
  }
}
@keyframes labWalk {
  to {
    transform: translateX(12px);
  }
}
@media (max-width: 900px) {
  .lab-workspace.with-tools {
    grid-template-columns: minmax(0, 1fr) 235px;
  }
  .investigation-panel .panel-body {
    padding: 16px;
  }
  .lab-toolbox {
    padding-left: 14px;
  }
  .lab-cell > small {
    font-size: 7px;
  }
  .lab-state {
    white-space: normal;
  }
  .lab-heading h3 {
    font-size: 21px;
  }
  .lab-diagram {
    max-height: 250px;
  }
  .lab-palette .lab-button {
    font-size: 10px;
  }
  .museum-catalog {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .lab-workspace.with-tools,
  .evidence-workspace {
    grid-template-columns: 1fr;
  }
  .lab-toolbox {
    border-left: 0;
    border-top: 1px solid #d0d9c5;
    padding: 15px 0 0;
  }
  .lab-palette {
    grid-template-columns: repeat(3, 1fr);
  }
  .lab-cell {
    aspect-ratio: 1.3;
  }
  .lab-cell > small {
    font-size: 8px;
  }
  .lab-heading {
    align-items: start;
  }
  .lab-state {
    max-width: 90px;
    font-size: 10px;
  }
  .lab-heading h3 {
    font-size: 20px;
  }
  .build-stage-list span {
    font-size: 8px;
  }
  .exhibit-media {
    grid-template-columns: 1fr;
  }
  .comparison-findings {
    flex-direction: column;
  }
  .exhibit-canvas {
    height: 190px;
  }
  .museum-catalog {
    grid-template-columns: 1fr;
  }
  .lens-controls {
    bottom: 10px;
    padding: 10px;
  }
  .lens-labels {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .lens-labels span {
    max-width: 45%;
    letter-spacing: 0.5px;
  }
  .lab-controls .lab-button {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visitor-trace > span,
  .pollinator.landed,
  .water-flow {
    animation: none;
  }
}
.reduced-motion .visitor-trace > span,
.reduced-motion .pollinator.landed,
.reduced-motion .water-flow {
  animation: none;
}

.lab-diagram {
  stroke: none;
}
.lab-diagram text {
  stroke: none;
  font-weight: 400;
}
.lab-instruction {
  color: #687961;
}
#experiment-preview {
  z-index: 110;
  position: fixed;
}

.lab-board {
  max-width: 640px;
  margin-inline: auto;
}
.lab-cell {
  aspect-ratio: 1.55;
}
.scenario-preview #app > :not(#experiment-preview):not(#toast) {
  visibility: hidden;
}
.scenario-preview #experiment-preview {
  visibility: visible;
}
.lab-diagram {
  max-height: 290px;
}
.school-strip {
  row-gap: 5px;
}
.school-strip .quiet {
  min-height: 30px;
  padding: 3px 8px;
}
@media (max-height: 500px) {
  #experiment-preview {
    bottom: 10px;
    padding: 10px 16px;
  }
  #experiment-preview p {
    margin: 5px 0;
    font-size: 10px;
  }
  #experiment-preview .lab-controls {
    margin: 4px 0 0;
  }
  #experiment-preview button {
    min-height: 36px;
    padding: 6px 12px;
  }
}
@media (max-height: 760px) {
  .history-reading {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .record-timeline {
    display: flex;
    overflow: auto;
    max-height: 26vh;
    padding: 0 0 8px;
    border-left: 0;
  }
  .record-timeline .lab-button {
    flex: 0 0 170px;
  }
  .investigation-panel .panel-body {
    max-height: calc(100dvh - 110px);
  }
}


.landmark-live {
  position: fixed;
  z-index: 38;
  left: 50%;
  bottom: max(108px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(590px, calc(100vw - 32px));
  padding: 17px 21px;
  border: 1px solid #dfdbc8;
  border-radius: 14px;
  background: rgba(250, 247, 234, 0.96);
  box-shadow: 0 12px 45px #17382f30;
  color: #294a42;
  pointer-events: auto;
}
.landmark-live[hidden] {
  display: none;
}
.landmark-live h3 {
  margin: 5px 0 7px;
  font:
    24px Georgia,
    serif;
}
.landmark-live p {
  font-size: 13px;
  line-height: 1.5;
  margin: 5px 0 10px;
}
.landmark-live .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.landmark-live button {
  min-height: 36px;
  font-size: 12px;
  padding: 7px 12px;
}
.landmark-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.landmark-choices button {
  text-align: left;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.landmark-choices strong {
  font:
    21px Georgia,
    serif;
}
.landmark-choices small {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
}
.camera-active .landmark-live {
  left: 20px;
  top: 86px;
  bottom: auto;
  transform: none;
  width: min(340px, calc(100vw - 40px));
  padding: 12px 16px;
}
.camera-active .landmark-live h3 {
  font-size: 20px;
}
.tablet-open .landmark-live,
.cinematic .landmark-live {
  display: none;
}
@media (max-height: 520px) {
  .landmark-live {
    left: 16px;
    top: 74px;
    bottom: auto;
    transform: none;
    width: 310px;
    padding: 10px 14px;
  }
  .landmark-live h3 {
    font-size: 20px;
  }
  .landmark-live p {
    font-size: 12px;
    margin: 4px 0;
  }
  .landmark-live button {
    font-size: 11px;
    min-height: 32px;
  }
  .landmark-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .era-chip {
    top: 16px;
    right: 16px;
    left: auto;
    max-width: 180px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(40, 66, 58, 0.85);
    font-size: 11px;
  }
  .landmark-live button {
    min-height: 44px;
  }
  .landmark-choices {
    grid-template-columns: 1fr;
  }
  .landmark-live {
    bottom: 135px;
  }
}

.adventure-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-radius: 18px;
  background: #dfe9d5;
  padding: 27px 30px;
  border: 1px solid #b9cbb0;
  margin-bottom: 22px;
}
.adventure-feature h3 {
  font-size: 30px;
  margin: 9px 0;
}
.adventure-feature p {
  max-width: 590px;
  margin: 0 0 14px;
}
.adventure-feature > .secondary {
  flex-shrink: 0;
  max-width: 230px;
}
.adventure-intro {
  max-width: 720px;
}
.park-mission-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fbf7eb;
  border: 1px solid #c9d2bf;
  border-radius: 15px;
  overflow: hidden;
  padding: 0 21px 20px;
  color: var(--ink, #214b48);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.park-mission-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px #24494316;
}
.mission-art {
  margin: 0 -21px 19px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 70px;
  color: #456751;
  background:
    radial-gradient(ellipse at 25% 95%, #9cae7d 0 20%, transparent 21%),
    radial-gradient(ellipse at 80% 110%, #aabf8b 0 40%, transparent 41%),
    #e2e9d6;
}
.art-rain {
  color: #3d7c8c;
  background:
    radial-gradient(ellipse at 25% 95%, #99bdc4 0 20%, transparent 21%),
    radial-gradient(ellipse at 80% 110%, #b0ced2 0 40%, transparent 41%),
    #dcebef;
}
.art-wildlife {
  color: #ead1a0;
  background:
    radial-gradient(ellipse at 10% 100%, #506e69 0 40%, transparent 41%),
    linear-gradient(130deg, #3d555b, #718878);
}
.park-mission-card h3 {
  font-size: 24px;
  margin: 10px 0;
}
.park-mission-card p {
  flex: 1;
  margin: 0 0 20px;
}
.mission-location {
  font-size: 12px;
}
.is-complete {
  border-color: #708a68;
}
.adventure-shelf {
  border-top: 1px solid #c5cfbb;
  border-bottom: 1px solid #c5cfbb;
  margin: 22px 0;
  padding: 18px 0;
}
.adventure-shelf summary {
  cursor: pointer;
  font-size: 17px;
  color: #2f554c;
}
.adventure-shelf summary span {
  float: right;
  font-size: 12px;
}
.adventure-shelf[open] > .journey-grid,
.adventure-shelf[open] > .discovery-collection {
  margin-top: 22px;
}
.adventure-landmarks-title {
  margin-top: 30px !important;
}
.discovery-collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.discovery-stamp {
  position: relative;
  padding: 24px;
  border: 1px solid #c6cfb8;
  background: #f9f3df;
  border-radius: 14px;
}
.stamp-mark {
  float: right;
  font-size: 48px;
  color: #839d70;
  line-height: 1;
}
.discovery-stamp h3 {
  font-size: 24px;
  margin: 13px 0;
}
.discovery-stamp p {
  font-size: 14px;
}
.discovery-stamp a,
.atlas-entry a {
  font-size: 12px;
}
.atlas-tabs {
  gap: 8px;
}
.atlas-tabs button {
  flex: 1;
  min-height: 44px;
  font-size: 15px;
}
.atlas-entry {
  margin: 0 !important;
}
.atlas-entry h3 {
  font-size: 23px;
}
.atlas-entry p {
  font-size: 14px;
}
.atlas-entry details {
  margin: 14px 0;
}
.atlas-entry details p {
  white-space: pre-wrap;
}
#park-fieldwork {
  position: fixed;
  z-index: 24;
  right: 24px;
  bottom: 105px;
  width: 350px;
  max-height: calc(100dvh - 180px);
  overflow: auto;
  border-radius: 18px;
  padding: 22px;
  background: #faf7eaf5;
  border: 1px solid #d5d9c5;
  box-shadow: 0 15px 50px #143a392c;
  color: #2f544c;
  pointer-events: auto;
}
#park-fieldwork[hidden] {
  display: none;
}
#park-fieldwork h3 {
  font-size: 27px;
  line-height: 1.12;
  margin: 10px 0 15px;
}
#park-fieldwork p {
  font-size: 14px;
  line-height: 1.5;
}
.park-progress {
  color: #61765c;
  font-weight: 600;
  font-size: 12px !important;
}
.park-action-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.park-action-list button {
  min-height: 44px;
  text-align: left;
  background: #365f4d;
  color: #fff9ec;
  border-color: #365f4d;
}
.park-action-list button:hover {
  background: #244a3b;
}
.park-panel-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #cdd4c2;
}
.park-panel-footer button {
  font-size: 12px;
  padding: 9px;
}
.park-touch-hint {
  display: block;
  font-size: 11px;
  color: #67766b;
  margin-top: 12px;
}
.park-source {
  font-size: 11px;
  margin-top: 12px;
}
.park-source summary {
  cursor: pointer;
}
.park-source p {
  font-size: 11px !important;
}
.park-fieldwork-active #park-fieldwork {
  bottom: 24px;
  max-height: calc(100dvh - 48px);
}
.park-fieldwork-active .hud-top,
.park-fieldwork-active .mode,
.park-fieldwork-active #context,
.park-fieldwork-active .landmark-label,
.park-fieldwork-active .hint,
.park-fieldwork-active .touch-controls,
.park-fieldwork-active .compass,
.park-fieldwork-active .era-chip,
.park-fieldwork-active .wayfinder {
  visibility: hidden !important;
}
.park-fieldwork-active #world canvas {
  cursor: pointer;
}
.park-recommended {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 850px) {
  #park-fieldwork {
    right: 14px;
    width: 285px;
    padding: 17px;
    bottom: 92px;
  }
  .park-fieldwork-active #park-fieldwork {
    bottom: 14px;
  }
  .adventure-feature {
    padding: 22px;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .adventure-feature > .secondary {
    max-width: none;
  }
  .discovery-collection {
    grid-template-columns: 1fr;
  }
  .adventure-feature h3 {
    font-size: 26px;
  }
}
@media (max-width: 600px) {
  #park-fieldwork {
    right: 12px;
    bottom: 90px;
    width: min(310px, calc(100vw - 24px));
    max-height: 55dvh;
  }
  .park-fieldwork-active #park-fieldwork {
    bottom: 12px;
    max-height: 45dvh;
    width: calc(100vw - 24px);
  }
  #park-fieldwork h3 {
    font-size: 21px;
    margin: 7px 0;
  }
  .park-recommended {
    grid-template-columns: 1fr;
  }
  .adventure-shelf summary span {
    float: none;
    display: block;
    margin: 8px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .park-mission-card {
    transition: none;
  }
  .park-mission-card:hover {
    transform: none;
  }
}
.park-fieldwork-active.park-fieldwork-portrait #park-fieldwork {
  width: calc(100vw - 32px);
  right: 16px;
  bottom: 16px;
  max-height: 38dvh;
}

/* Shared play UI. Reading is optional; actions and feedback stay in view. */
:root {
  --ui-paper: #faf6e9;
  --ui-muted: #e5e9dc;
  --ui-line: #24444928;
  --ui-radius: 16px;
}
.panel,
.glass,
.landmark-live,
#park-fieldwork {
  color: var(--ink);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}
.panel-head,
.panel-body,
.landmark-live,
#park-fieldwork {
  background: var(--ui-paper);
}
.panel-head {
  padding: 18px 24px;
}
.panel-head h2 {
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.15;
}
.panel-body {
  padding: 20px 24px;
}
.panel p {
  line-height: 1.5;
}
.panel button,
.landmark-live button,
#park-fieldwork button,
.panel summary,
#park-fieldwork summary {
  min-height: 44px;
  touch-action: manipulation;
}
.panel summary,
#park-fieldwork summary {
  padding-block: 12px;
  cursor: pointer;
}
.panel button:not(.lab-cell),
.landmark-live button,
#park-fieldwork button {
  border-radius: 10px;
}
.panel .secondary,
.panel .lab-button,
.landmark-live .secondary {
  background: var(--ui-muted);
  color: var(--ink);
  border-color: var(--ui-line);
}
.panel .lab-button.selected,
.panel .primary,
.park-action-list button {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid #a7782b;
  outline-offset: 3px;
}
.panel .eyebrow,
#park-fieldwork .eyebrow {
  letter-spacing: 0.1em;
}
.adventure-feature {
  padding: 20px;
  gap: 16px;
  border-color: var(--ui-line);
}
.adventure-feature h3 {
  font-size: 26px;
  margin: 8px 0;
}
.adventure-feature p {
  margin: 0;
  max-width: 46ch;
}
.panel .adventure-feature > .secondary {
  background: var(--green);
  color: var(--cream);
}
#tutorial {
  background: var(--ui-paper);
  color: var(--ink);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
}
#tutorial .tour-story {
  border-top: 1px solid var(--ui-line);
  margin-top: 8px;
}
#tutorial .tour-story summary {
  min-height: 44px;
  padding: 12px 0;
  font-size: 13px;
  cursor: pointer;
}
#tutorial .tour-story p {
  display: block;
  font-size: 14px;
  line-height: 1.45;
}
#tutorial .tour-controls { font-size: calc(13px * var(--scale)); line-height: 1.4; }
#tutorial .tour-task { font-size: calc(15px * var(--scale)); line-height: 1.4; }
#tutorial .tour-top button { min-height: 44px; font-size: 12px; padding: 8px; }
.museum-object-card {
  background: var(--ui-paper);
  border-color: var(--ui-line);
  border-radius: 12px;
}
.museum-object-card summary {
  font-size: 13px;
}
.park-mission-card,
.journey-card,
.discovery-stamp,
.atlas-entry {
  border-color: var(--ui-line);
  border-radius: 12px;
  color: var(--ink);
}
.park-mission-card {
  padding: 16px;
}
.park-mission-card .mission-art {
  height: 56px;
  font-size: 38px;
  margin-bottom: 12px;
}
.park-mission-card h3,
.journey-card h3 {
  font-size: 22px;
  margin: 8px 0;
}
.discovery-stamp p,
.atlas-entry p {
  font-size: 15px;
}
.adventure-shelf {
  margin-block: 16px;
}
.adventure-shelf summary {
  color: var(--ink);
}
#park-fieldwork {
  padding: 16px;
  width: 320px;
}
.park-panel-heading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.park-panel-heading > div {
  flex: 1;
  min-width: 0;
}
.park-panel-heading {
  position: sticky;
  top: -12px;
  background: var(--ui-paper);
  z-index: 1;
}
#park-fieldwork h3 {
  margin: 6px 0 8px;
  font-size: 23px;
  line-height: 1.15;
}
#park-fieldwork .park-dismiss {
  flex: 0 0 44px;
  padding: 0;
  font-size: 26px;
}
#park-fieldwork .park-instruction {
  font-size: calc(15px * var(--scale));
  line-height: 1.4;
  margin: 4px 0 10px;
}
#park-fieldwork .park-progress {
  font-size: 12px;
  margin: 6px 0 12px;
}
.park-panel-footer {
  margin-top: 10px;
  padding-top: 6px;
  align-items: flex-start;
  flex-wrap: wrap;
  border-color: var(--ui-line);
}
.park-panel-footer button,
.park-source summary {
  font-size: 13px;
}
.park-source {
  margin: 0;
  flex: 1;
  min-width: 150px;
}
#park-fieldwork .park-source p {
  font-size: 14px !important;
}
body:has(#park-fieldwork:not([hidden])):not(.park-fieldwork-active) .hud-notes {
  display: none;
}
.landmark-live {
  padding: 14px 18px;
}
.landmark-live h3 {
  font-size: 22px;
}
.landmark-live p {
  font-size: 14px;
  line-height: 1.4;
}
.investigation .lab-heading {
  margin: 0 0 10px;
  padding: 0;
  align-items: center;
}
.investigation .lab-state {
  font-size: 12px;
}
.investigation .mission-coach {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ui-muted);
}
.investigation .mission-coach p {
  font-size: calc(16px * var(--scale));
  line-height: 1.4;
  margin: 3px 0;
}
.investigation .lab-footer {
  margin-top: 14px;
  padding-top: 12px;
}
.investigation .lab-detail {
  border-color: var(--ui-line);
}
.investigation .lab-instruction {
  font-size: 14px;
  line-height: 1.4;
}
.investigation .lab-toolbox {
  border-radius: 12px;
}
.investigation .lab-column-title {
  display: none;
}
.investigation .lab-caption {
  font-size: 14px;
}
@media (max-width: 600px) {
  .panel-head {
    padding: 14px 16px;
  }
  .panel-body {
    padding: 14px 16px;
  }
  .panel-head h2 {
    font-size: 23px;
  }
  .panel .eyebrow {
    font-size: 10px;
  }
  .adventure-feature {
    padding: 16px;
  }
  .adventure-feature h3 {
    font-size: 23px;
  }
  .park-recommended {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .park-mission-card {
    padding: 12px;
  }
  .park-mission-card h3 {
    font-size: 19px;
  }
  .park-mission-card .mission-location {
    font-size: 12px;
  }
  .park-mission-card .mission-art {
    height: 38px;
    font-size: 30px;
  }
  .park-fieldwork-active.park-fieldwork-portrait #park-fieldwork {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    padding: 12px;
    max-height: 42dvh;
  }
  #park-fieldwork h3 {
    font-size: 21px;
  }
  .park-action-list {
    gap: 6px;
  }
  .park-panel-footer {
    margin-top: 6px;
    padding-top: 2px;
  }
  .investigation .mission-coach {
    padding: 10px;
    gap: 10px;
  }
  .investigation .lab-workspace {
    gap: 12px;
  }
  .lab-footer > .lab-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lab-footer > .lab-controls > button {
    flex: 1 1 auto;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .investigation .lab-heading {
    margin-bottom: 6px;
  }
  .investigation .lab-heading .lab-mode {
    margin: 0;
    padding: 3px 8px;
  }
  .investigation .mission-coach {
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .investigation .mission-coach small {
    display: none;
  }
  .investigation .mission-coach p {
    font-size: 14px;
  }
  .investigation[data-kind="chain"] .lab-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px 18px;
  }
  .investigation[data-kind="chain"] .lab-diagram {
    grid-row: span 2;
    max-height: 130px;
    margin: 0;
  }
  .investigation[data-kind="chain"] .chain-discovery {
    grid-column: 1 / -1;
  }
  .park-fieldwork-active #park-fieldwork {
    bottom: 8px;
    max-height: calc(100dvh - 16px);
  }
}