:root {
  color-scheme: dark;
  background: #050505;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #050505;
}

.hero {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  cursor: default;
  user-select: none;
}

html.insect-cursor-ready .hero {
  cursor: none;
}

.insect-cursor {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 152px;
  height: 152px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: left, top;
  transition: opacity 140ms ease, transform 180ms ease;
}

.danger-feedback {
  --danger: 0;
  position: fixed;
  inset: 0;
  z-index: 8;
  box-shadow: inset 0 0 150px 35px rgb(120 20 14 / 48%);
  opacity: var(--danger);
  pointer-events: none;
  transition: opacity 100ms linear, box-shadow 180ms ease;
}

.attack-reticle,
.attack-pulse {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 13;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.attack-reticle {
  --charge: 0deg;
  width: 94px;
  height: 94px;
  border: 1px solid rgb(255 238 221 / 78%);
  background: conic-gradient(rgb(188 49 30 / 88%) var(--charge), transparent 0);
  box-shadow: 0 0 0 1px rgb(115 24 17 / 22%), 0 0 22px rgb(133 26 18 / 28%);
  opacity: 0;
  transition: opacity 120ms ease, width 680ms linear, height 680ms linear;
  mask: radial-gradient(circle, transparent 42px, #000 43px);
}

.attack-reticle.is-visible {
  width: 76px;
  height: 76px;
  opacity: 1;
}

.attack-pulse {
  width: 30px;
  height: 30px;
  border: 3px solid rgb(218 59 37 / 90%);
  opacity: 0;
}

.attack-pulse.is-active {
  animation: attack-pulse 260ms ease-out;
}

.gecko-mouth {
  --mouth-angle: 0deg;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
  width: 62px;
  height: 23px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 51% 72%, rgb(224 98 94 / 82%) 0 15%, transparent 17%),
    radial-gradient(ellipse at 50% 45%, #741f1b 0 28%, #35100d 58%, rgb(18 5 5 / 96%) 74%);
  border: 2px solid rgb(107 72 51 / 72%);
  box-shadow: inset 0 -4px 5px rgb(226 91 77 / 42%), inset 0 3px 3px rgb(0 0 0 / 44%), 0 1px 2px rgb(0 0 0 / 38%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(0.18, 0.08);
  transform-origin: center;
  transition: opacity 100ms ease, transform 120ms ease;
}

.gecko-mouth::before,
.gecko-mouth::after {
  content: "";
  position: absolute;
  left: 4%;
  width: 92%;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #d09a76 18% 82%, transparent);
  opacity: 0.72;
}

.gecko-mouth::before { top: -3px; }
.gecko-mouth::after { bottom: -3px; opacity: 0.46; }

html[data-gecko-state="preparing"] .gecko-mouth,
html[data-gecko-state="attack"] .gecko-mouth {
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(1, 0.68);
}

html[data-gecko-state="attack"] .gecko-mouth {
  animation: mouth-bite 480ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes mouth-bite {
  0% { transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(0.88, 0.5); }
  28% { transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(1.12, 1.18); }
  58% { transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(1.06, 0.92); }
  100% { transform: translate(-50%, -50%) rotate(var(--mouth-angle)) scale(0.9, 0.18); }
}

.tongue-layer {
  position: fixed;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tongue {
  fill: none;
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tongue-shadow {
  stroke: rgb(55 10 16 / 48%);
  stroke-width: 15;
}

.tongue-main {
  stroke: #d35b70;
  stroke-width: 11;
}

.tongue-highlight {
  stroke: rgb(255 183 191 / 72%);
  stroke-width: 3;
}

.tongue-layer.is-striking .tongue {
  animation: tongue-strike 360ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

html.game-caught .insect-cursor,
html.game-caught .insect-cursor-fallback {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.12);
}

html.game-escaped .danger-feedback {
  box-shadow: inset 0 0 130px 25px rgb(39 153 132 / 32%);
  opacity: 0.32;
}

@keyframes attack-pulse {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }

  100% {
    width: 170px;
    height: 170px;
    opacity: 0;
  }
}

@keyframes tongue-strike {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  8% {
    opacity: 1;
  }

  34% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  48% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -1;
  }
}

.insect-cursor-fallback {
  --load-progress: 0deg;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
  font-size: 28px;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 35%));
  will-change: transform;
}

.insect-cursor-fallback::before {
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(rgb(27 91 87 / 75%) var(--load-progress), transparent 0);
  content: "";
  opacity: 0.7;
}

html.insect-cursor-ready .insect-cursor-fallback {
  display: none;
}

.insect-stamina {
  --stamina: 360deg;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 12;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: conic-gradient(rgb(36 126 114 / 85%) var(--stamina), rgb(255 255 255 / 16%) 0);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
  will-change: left, top;
  mask: radial-gradient(circle, transparent 47px, #000 48px);
}

.insect-stamina.is-active {
  opacity: 0.78;
}

.insect-trail {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(54 160 146 / 65%);
  box-shadow: 0 0 10px rgb(80 213 194 / 45%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
  will-change: left, top, opacity;
}

.insect-trail.is-active {
  opacity: var(--trail-opacity);
}

.hero__media {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
}

.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__video {
  object-fit: contain;
}

.hero__watermark-mask {
  position: absolute;
  right: 1%;
  bottom: 1.2%;
  z-index: 3;
  width: 11.5%;
  height: 6.5%;
  background: linear-gradient(90deg, #b7d2d4 0%, #accbd0 100%);
  box-shadow: 0 0 8px 5px rgb(181 209 212 / 65%);
  pointer-events: none;
  transition: opacity 100ms ease;
}

/* Phase 3: exploration layer */
.exploration-ui {
  position: fixed;
  inset: 0;
  z-index: 20;
  color: #e8f1e9;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  pointer-events: none;
}

.exploration-hud {
  position: absolute;
  top: clamp(16px, 2.6vw, 34px);
  left: clamp(16px, 2.6vw, 34px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.return-entry,
.discovery-counter,
.ending-actions button {
  border: 1px solid rgb(225 239 230 / 26%);
  background: rgb(8 18 16 / 62%);
  color: #edf5ef;
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%);
  backdrop-filter: blur(10px);
}

.return-entry {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.return-entry:hover {
  border-color: rgb(178 224 198 / 62%);
  background: rgb(14 40 32 / 78%);
  transform: translateY(-1px);
}

.return-entry span { margin-right: 6px; }

.discovery-counter {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discovery-counter b { color: rgb(216 235 220 / 62%); font-weight: 500; }
.discovery-counter span { color: #bce1ca; font-variant-numeric: tabular-nums; }

.safe-zone {
  position: absolute;
  border: 1px solid rgb(115 212 176 / 0%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(63 171 134 / 4%), transparent 68%);
  box-shadow: inset 0 0 30px rgb(80 199 155 / 0%);
  opacity: 0.3;
  transition: opacity 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.safe-zone span {
  position: absolute;
  color: rgb(173 232 207 / 68%);
  font-size: 9px;
  letter-spacing: 0.28em;
  opacity: 0;
  transition: opacity 200ms ease;
}

.safe-zone--left { left: -2%; bottom: -6%; width: 24vw; height: 24vw; }
.safe-zone--left span { left: 35%; top: 30%; }
.safe-zone--upper { top: -6%; right: -2%; width: 20vw; height: 20vw; }
.safe-zone--upper span { left: 30%; bottom: 28%; }

html.exploration-safe .safe-zone {
  border-color: rgb(115 212 176 / 28%);
  box-shadow: inset 0 0 55px rgb(80 199 155 / 12%), 0 0 45px rgb(54 159 122 / 8%);
  opacity: 1;
}

html.exploration-safe .safe-zone span { opacity: 1; }
html.in-safe-zone .danger-feedback { opacity: 0 !important; }

.hotspot-layer { position: absolute; inset: 0; }

.exploration-hotspot {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid rgb(221 239 222 / 13%);
  border-radius: 50%;
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.exploration-hotspot::before,
.exploration-hotspot::after {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgb(205 234 215 / 18%);
  border-radius: 50%;
  content: "";
  animation: hotspot-orbit 9s linear infinite;
}

.exploration-hotspot::after { inset: 17px; border-style: solid; animation-direction: reverse; }
.exploration-hotspot span { position: absolute; top: 18px; left: 18px; color: rgb(223 240 225 / 38%); font: 9px/1 monospace; }
.exploration-hotspot.is-found { border-color: rgb(111 211 170 / 42%); opacity: 0.8; transform: translate(-50%, -50%) scale(0.42); }
.exploration-hotspot.is-found::before { border-color: rgb(111 211 170 / 48%); }

.exploration-toast {
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 4vw, 48px);
  width: min(350px, calc(100vw - 36px));
  padding: 16px 18px;
  border: 1px solid rgb(207 232 215 / 22%);
  border-radius: 14px;
  background: rgb(7 18 15 / 82%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 28%);
  opacity: 0;
  transform: translateY(12px);
  backdrop-filter: blur(14px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.exploration-toast.is-visible { opacity: 1; transform: translateY(0); }
.exploration-toast b { display: block; margin-bottom: 6px; color: #c8ead5; font-size: 13px; letter-spacing: 0.08em; }
.exploration-toast span { display: block; color: rgb(231 241 234 / 66%); font-size: 12px; line-height: 1.65; }

.ending-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(2 8 7 / 0%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, background 280ms ease, visibility 280ms;
}

.ending-panel.is-visible {
  background: rgb(2 8 7 / 58%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ending-card {
  width: min(440px, calc(100vw - 36px));
  padding: 28px;
  border: 1px solid rgb(205 233 215 / 25%);
  border-radius: 20px;
  background: linear-gradient(145deg, rgb(16 33 27 / 95%), rgb(6 14 12 / 96%));
  box-shadow: 0 28px 90px rgb(0 0 0 / 45%);
  transform: translateY(18px) scale(0.97);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.ending-panel.is-visible .ending-card { transform: translateY(0) scale(1); }
.ending-card small { color: #7fc5a5; font: 10px/1 monospace; letter-spacing: 0.18em; }
.ending-card h2 { margin: 13px 0 9px; color: #ecf6ef; font-size: 25px; font-weight: 500; }
.ending-card p { margin: 0; color: rgb(230 241 233 / 67%); font-size: 14px; line-height: 1.75; }
.ending-actions { display: flex; gap: 10px; margin-top: 24px; }
.ending-actions button { flex: 1; min-height: 42px; border-radius: 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ending-actions button:hover { border-color: rgb(139 211 175 / 60%); background: rgb(25 62 48 / 82%); }

@keyframes hotspot-orbit { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .discovery-counter b { display: none; }
  .safe-zone--left { width: 38vw; height: 38vw; }
  .safe-zone--upper { width: 32vw; height: 32vw; }
  .exploration-hotspot { width: 42px; height: 42px; }
  .exploration-hotspot span { top: 13px; left: 13px; }
}

/* Phase 4: local analytics and feedback */
.analytics-ui {
  position: fixed;
  inset: 0;
  z-index: 40;
  color: #eaf4ed;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  pointer-events: none;
}

.analytics-launchers {
  position: absolute;
  top: clamp(16px, 2.6vw, 34px);
  right: clamp(16px, 2.6vw, 34px);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.analytics-launchers button,
.analytics-tabs button,
.analytics-actions button,
.feedback-submit button,
.analytics-drawer [data-close],
.feedback-panel [data-close] {
  border: 1px solid rgb(225 239 230 / 24%);
  background: rgb(8 18 16 / 66%);
  color: #edf5ef;
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.analytics-launchers button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.analytics-launchers button:hover { border-color: rgb(144 215 181 / 55%); background: rgb(14 40 32 / 82%); }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #78d2a5; box-shadow: 0 0 8px #78d2a5; animation: live-pulse 2s ease-in-out infinite; }

.analytics-drawer,
.feedback-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100%;
  padding: 28px;
  overflow-y: auto;
  border-left: 1px solid rgb(204 232 214 / 18%);
  background: linear-gradient(160deg, rgb(12 29 23 / 97%), rgb(5 12 10 / 98%));
  box-shadow: -24px 0 70px rgb(0 0 0 / 35%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(104%);
  transition: opacity 260ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.analytics-drawer.is-visible,
.feedback-panel.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.analytics-drawer header,
.feedback-panel header { display: flex; align-items: flex-start; justify-content: space-between; }
.analytics-drawer small,
.feedback-panel small { color: #79c29f; font: 10px/1 monospace; letter-spacing: 0.18em; }
.analytics-drawer h2,
.feedback-panel h2 { margin: 9px 0 0; font-size: 25px; font-weight: 500; }
.analytics-drawer [data-close],
.feedback-panel [data-close] { width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; }
.privacy-note { margin: 22px 0; padding: 11px 13px; border: 1px solid rgb(121 194 159 / 18%); border-radius: 9px; color: rgb(218 237 225 / 58%); background: rgb(80 147 113 / 7%); font-size: 11px; }

.analytics-tabs { display: flex; padding: 3px; border-radius: 10px; background: rgb(255 255 255 / 5%); }
.analytics-tabs button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; color: rgb(231 241 234 / 52%); background: transparent; font-size: 12px; }
.analytics-tabs button.is-active { color: #eaf5ed; background: rgb(107 190 150 / 16%); }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.metric { min-height: 76px; padding: 13px; border: 1px solid rgb(219 238 225 / 10%); border-radius: 11px; background: rgb(255 255 255 / 3%); }
.metric span { display: block; color: rgb(225 238 229 / 45%); font-size: 10px; letter-spacing: 0.05em; }
.metric strong { display: block; margin-top: 11px; color: #c8ead5; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.analytics-actions { display: flex; gap: 9px; margin-top: 17px; }
.analytics-actions button { flex: 1; min-height: 39px; border-radius: 9px; font-size: 11px; }
.analytics-actions button:last-child { color: rgb(238 171 162 / 76%); }

.feedback-panel form { margin-top: 28px; }
.feedback-panel fieldset { margin: 0 0 24px; padding: 0; border: 0; }
.feedback-panel legend,
.feedback-copy { display: block; margin-bottom: 11px; color: rgb(231 242 234 / 66%); font-size: 12px; }
.rating-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rating-row input,
.feedback-tags input { position: absolute; opacity: 0; pointer-events: none; }
.rating-row span,
.feedback-tags span { display: grid; min-height: 42px; place-items: center; border: 1px solid rgb(221 238 226 / 14%); border-radius: 9px; color: rgb(231 242 234 / 60%); background: rgb(255 255 255 / 3%); cursor: pointer; transition: 150ms ease; }
.rating-row input:checked + span,
.feedback-tags input:checked + span { border-color: rgb(114 207 163 / 55%); color: #d9f1e2; background: rgb(88 175 133 / 17%); }
.feedback-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feedback-tags span { padding: 0 8px; font-size: 11px; }
.feedback-copy textarea { display: block; width: 100%; min-height: 112px; margin-top: 10px; padding: 12px; resize: vertical; border: 1px solid rgb(221 238 226 / 14%); border-radius: 10px; outline: 0; color: #eaf4ed; background: rgb(255 255 255 / 4%); font: inherit; font-size: 12px; line-height: 1.6; }
.feedback-copy textarea:focus { border-color: rgb(114 207 163 / 55%); }
.feedback-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.feedback-submit span { color: #8fd3b0; font-size: 11px; }
.feedback-submit button { min-width: 118px; min-height: 42px; border-radius: 9px; }

@keyframes live-pulse { 50% { opacity: 0.45; transform: scale(0.78); } }

@media (max-width: 620px) {
  .analytics-launchers { top: auto; right: 14px; bottom: 14px; }
  .analytics-drawer, .feedback-panel { padding: 22px; }
}

/* Phase 5A: forest museum shell */
:root {
  --forest-950: #050a07;
  --forest-900: #09110c;
  --forest-850: #0d1811;
  --forest-800: #122219;
  --moss: #91b59a;
  --moss-bright: #c7dfc5;
  --bone: #edf0e8;
  --muted: #8d9b91;
  --line: rgb(222 235 222 / 14%);
}

html { scroll-behavior: smooth; background: var(--forest-950); }
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body { color: var(--bone); background: var(--forest-950); font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
body::before { position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(circle at 18% 12%, rgb(80 113 76 / 10%), transparent 26%), radial-gradient(circle at 82% 60%, rgb(48 91 64 / 8%), transparent 32%); content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.section-pad { padding: clamp(90px, 11vw, 170px) max(24px, calc((100vw - 1320px) / 2)); }

.museum-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  min-height: 72px;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 48px);
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, min-height 220ms ease;
}
.museum-nav.is-scrolled { min-height: 60px; border-color: var(--line); background: rgb(5 10 7 / 86%); backdrop-filter: blur(18px); }
.museum-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font: 700 11px/0.9 Arial, sans-serif; letter-spacing: -0.04em; }
.museum-brand i { width: 20px; height: 24px; border-radius: 2px 10px 2px 10px; background: var(--bone); transform: rotate(12deg); }
.museum-brand span { display: inline-block; }
.museum-nav > nav { display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 42px); }
.museum-nav > nav a { position: relative; color: rgb(237 240 232 / 68%); font-size: 11px; letter-spacing: 0.08em; }
.museum-nav > nav a::after { position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: var(--moss-bright); content: ""; transform: scaleX(0); transition: transform 180ms ease; }
.museum-nav > nav a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; justify-content: flex-end; gap: 8px; }
.nav-actions button { border: 0; background: transparent; font: 10px/1 sans-serif; letter-spacing: 0.11em; cursor: pointer; }
.nav-actions button:first-child { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; }
.nav-menu { display: none; }

.museum-hero { position: relative; display: grid; width: 100%; height: 100svh; min-height: 680px; overflow: hidden; place-items: center; background: #050806; }
.museum-hero .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0.78; }
.museum-hero .hero__video { object-fit: cover; }
.hero-curtain { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgb(3 7 5 / 78%) 0, rgb(3 7 5 / 12%) 44%, rgb(3 7 5 / 35%) 100%), linear-gradient(0deg, rgb(3 7 5 / 70%), transparent 48%); pointer-events: none; }
.hero-museum-copy { position: absolute; top: 25%; left: clamp(24px, 7vw, 110px); z-index: 5; max-width: 670px; pointer-events: none; }
.hero-museum-copy > p { display: flex; gap: 11px; align-items: center; margin: 0 0 28px; color: rgb(237 240 232 / 55%); font: 10px/1 monospace; letter-spacing: 0.16em; }
.hero-museum-copy > p span { padding: 7px 9px; color: #dceadd; border: 1px solid rgb(192 222 197 / 28%); border-radius: 999px; }
.hero-museum-copy h1 { margin: 0; max-width: 720px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(48px, 7.8vw, 118px); font-weight: 400; line-height: 0.94; letter-spacing: -0.065em; text-shadow: 0 8px 40px rgb(0 0 0 / 22%); }
.hero-instruction { display: flex; gap: 16px; align-items: center; margin-top: 42px; }
.hero-instruction b { padding: 9px 13px; border-radius: 999px; color: #102017; background: var(--moss-bright); font-size: 11px; letter-spacing: 0.08em; }
.hero-instruction span { color: rgb(237 240 232 / 64%); font-size: 12px; }
.hero-index { position: absolute; right: clamp(24px, 4vw, 66px); bottom: 44px; z-index: 5; display: flex; gap: 18px; align-items: flex-end; color: rgb(237 240 232 / 52%); }
.hero-index span { font: 300 clamp(48px, 7vw, 90px)/0.8 Georgia, serif; }
.hero-index small { font: 8px/1.5 monospace; letter-spacing: 0.14em; }
.scroll-cue { position: absolute; bottom: 42px; left: 50%; z-index: 6; display: flex; flex-direction: column; gap: 10px; align-items: center; color: rgb(237 240 232 / 52%); font-size: 9px; letter-spacing: 0.18em; transform: translateX(-50%); }
.scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--bone), transparent); animation: scroll-line 2s ease-in-out infinite; }

.section-kicker { display: flex; gap: 18px; align-items: center; margin-bottom: clamp(48px, 7vw, 100px); }
.section-kicker span { color: var(--moss); font: 12px/1 monospace; }
.section-kicker p { margin: 0; color: var(--muted); font: 9px/1 monospace; letter-spacing: 0.2em; }
.section-kicker::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.museum-intro { background: var(--forest-950); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 9vw; align-items: end; }
.intro-grid h2 { margin: 0; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(46px, 7vw, 100px); font-weight: 400; line-height: 0.98; letter-spacing: -0.055em; }
.intro-grid h2 em { color: var(--moss); font-weight: 400; }
.intro-copy p { color: rgb(222 231 222 / 64%); font-size: 14px; line-height: 1.95; }
.intro-copy a { display: inline-flex; gap: 24px; margin-top: 24px; padding-bottom: 9px; border-bottom: 1px solid var(--moss); color: var(--moss-bright); font-size: 12px; }
.forest-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(70px, 10vw, 140px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.forest-stats div { padding: 34px 22px; border-right: 1px solid var(--line); }
.forest-stats div:last-child { border-right: 0; }
.forest-stats strong { display: block; font: 400 clamp(28px, 3.4vw, 52px)/1 Georgia, serif; }
.forest-stats span { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; }

.featured-species { background: #070c08; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 0.46fr); gap: 8vw; align-items: end; margin-bottom: 60px; }
.section-heading small, .lab-heading small, .coexist-grid small { color: var(--moss); font: 9px/1 monospace; letter-spacing: 0.17em; }
.section-heading h2 { margin: 12px 0 0; font: 400 clamp(48px, 6vw, 84px)/1 Georgia, "Noto Serif SC", serif; letter-spacing: -0.05em; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.feature-stage { position: relative; min-height: min(660px, 72vw); overflow: hidden; background: #020403; }
.feature-stage::before { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 16.6%, rgb(255 255 255 / 3%) 16.6% 16.75%); content: ""; }
.stage-number { position: absolute; top: 30px; left: 34px; color: rgb(237 240 232 / 62%); font: 32px/1 Georgia, serif; }
.stage-year { position: absolute; top: 30px; right: 34px; color: rgb(237 240 232 / 56%); font: 9px/1.4 monospace; text-align: right; }
.specimen-polaroid { position: absolute; top: 50%; left: 50%; z-index: 2; width: clamp(230px, 28vw, 390px); padding: 14px 14px 40px; color: #1a1b18; background: #ecebe2; box-shadow: 0 30px 80px rgb(0 0 0 / 48%); transform: translate(-50%, -50%) rotate(-4deg); }
.specimen-art { position: relative; height: clamp(260px, 32vw, 430px); overflow: hidden; background: radial-gradient(circle at 38% 36%, #6d8b7d, #20372a 45%, #0c1710); }
.specimen-art picture, .specimen-art img { display: block; width: 100%; height: 100%; }
.specimen-art img { object-fit: cover; filter: saturate(.78) contrast(1.04); }
.specimen-art::before, .specimen-art::after { position: absolute; border-radius: 50%; background: rgb(179 202 171 / 22%); content: ""; filter: blur(1px); }
.specimen-art::before { top: -12%; right: -5%; width: 70%; height: 60%; }
.specimen-art::after { bottom: -8%; left: -10%; width: 78%; height: 54%; }
.specimen-art > i { position: absolute; top: 25%; left: 22%; z-index: 2; width: 58%; height: 34%; border-radius: 60% 38% 48% 58%; background: radial-gradient(circle at 68% 30%, #dca94d 0 3%, #101811 4% 7%, transparent 8%), radial-gradient(circle at 35% 40%, #d46d48 0 3%, transparent 4%), radial-gradient(circle at 55% 60%, #69a69a 0 4%, transparent 5%), linear-gradient(145deg, #b85f3d, #d48c55 45%, #447d75 78%); box-shadow: 70px 34px 0 -22px #7aa09a; transform: rotate(-12deg); }
.specimen-art > i::before { position: absolute; top: 35%; right: -42%; width: 58%; height: 22%; border-radius: 50%; background: #638c82; content: ""; transform: rotate(18deg); transform-origin: left; }
.polaroid-caption { display: flex; justify-content: space-between; align-items: end; padding: 15px 4px 0; }
.polaroid-caption b { font: 700 16px/1 sans-serif; }
.polaroid-caption span { font: 7px/1 monospace; letter-spacing: 0.08em; }
.feature-title { position: absolute; top: 30%; left: 7%; z-index: 3; max-width: 330px; }
.feature-title small { color: rgb(237 240 232 / 46%); font: 9px/1 monospace; }
.feature-title h3 { margin: 13px 0 26px; font: 400 clamp(34px, 4.4vw, 66px)/0.98 Georgia, "Noto Serif SC", serif; letter-spacing: -0.05em; }
.feature-title button { padding: 11px 16px; border: 1px solid rgb(237 240 232 / 28%); border-radius: 999px; background: transparent; font-size: 10px; cursor: pointer; }
.stage-facts { position: absolute; right: 4%; bottom: 36px; display: grid; gap: 8px; color: rgb(237 240 232 / 48%); font: 8px/1 monospace; text-align: right; }

.collection-section { background: var(--forest-900); }
.collection-toolbar { display: flex; gap: 8px; margin-bottom: 32px; overflow-x: auto; scrollbar-width: none; }
.collection-toolbar button { flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.collection-toolbar button.is-active { color: #102017; border-color: var(--moss-bright); background: var(--moss-bright); }
.species-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 18px; }
.species-card { min-width: 0; cursor: pointer; transition: transform 220ms ease, opacity 220ms ease; }
.species-card:hover { transform: translateY(-6px); }
.species-card[hidden] { display: none; }
.species-visual { position: relative; height: clamp(250px, 30vw, 410px); overflow: hidden; margin-bottom: 18px; background: #19251c; }
.species-visual::before { position: absolute; inset: 0; background: linear-gradient(145deg, transparent, rgb(0 0 0 / 30%)); content: ""; }
.species-visual picture, .species-visual img { display: block; width: 100%; height: 100%; }
.species-visual img { object-fit: cover; filter: saturate(.74) contrast(1.04); transition: filter 300ms ease, transform 600ms cubic-bezier(.2,.8,.25,1); }
.species-card:hover .species-visual img { filter: saturate(1) contrast(1.02); transform: scale(1.035); }
.species-visual > span { position: absolute; top: 16px; left: 17px; z-index: 2; color: rgb(255 255 255 / 45%); font: 10px/1 monospace; }
.visual-sand { background: radial-gradient(circle at 72% 24%, #aa8b5e, #493e2c 52%, #171912); }
.visual-moss { background: radial-gradient(circle at 28% 30%, #648360, #263d2a 50%, #0b130d); }
.visual-earth { background: radial-gradient(circle at 68% 64%, #77573e, #3b3025 47%, #15130f); }
.visual-tide { background: radial-gradient(circle at 32% 22%, #718c88, #283b3a 48%, #0a1111); }
.visual-canopy { background: radial-gradient(circle at 72% 22%, #77964f, #29432a 48%, #10160d); }
.visual-volcanic { background: radial-gradient(circle at 40% 68%, #6e5945, #302923 43%, #100e0c); }
.lizard-mark { position: absolute; top: 42%; left: 50%; width: 52%; height: 22%; border-radius: 70% 34% 55% 48%; background: #b69867; box-shadow: 95px 24px 0 -24px currentcolor; transform: translate(-50%, -50%) rotate(-12deg); }
.lizard-mark::after { position: absolute; top: 45%; right: -62%; width: 75%; height: 18%; border-radius: 50%; background: currentcolor; content: ""; transform: rotate(22deg); transform-origin: left; }
.mark-spotted { color: #b69867; background: radial-gradient(circle, #3f3021 0 10%, transparent 12%) 0 0/20px 20px, #c4a66f; }
.mark-crested { color: #8b9a68; background: #a5aa72; }
.mark-blue { color: #6e796f; background: #8c8067; }
.mark-marine { color: #4b5552; background: #5a625b; }
.mark-color { color: #689455; background: linear-gradient(90deg, #ca8b48, #7a9e4b, #4e8e80); }
.mark-giant { width: 62%; color: #6b5b48; background: #78664f; }
.species-card > small { color: var(--moss); font: 8px/1 monospace; letter-spacing: 0.11em; }
.species-card h3 { margin: 9px 0; font: 400 24px/1.15 Georgia, "Noto Serif SC", serif; }
.species-card p { min-height: 42px; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.species-card > b { color: rgb(220 231 221 / 46%); font-size: 9px; font-weight: 400; }
.collection-empty { color: var(--muted); text-align: center; }

.anatomy-section { background: #071009; }
.anatomy-carousel { display: grid; grid-auto-columns: minmax(250px, 1fr); grid-auto-flow: column; gap: 12px; overflow-x: auto; padding: 16px 0 28px; scroll-snap-type: x mandatory; scrollbar-color: var(--moss) transparent; }
.anatomy-card { position: relative; min-height: 490px; padding: 22px; overflow: hidden; border: 1px solid var(--line); color: var(--bone); background: #0d1710; text-align: left; cursor: pointer; scroll-snap-align: start; transition: background 220ms ease, transform 220ms ease; }
.anatomy-card:hover, .anatomy-card.is-featured { background: #15271b; transform: translateY(-6px); }
.anatomy-card > span { color: var(--muted); font: 10px/1 monospace; }
.anatomy-card > small { position: absolute; bottom: 95px; left: 22px; color: var(--moss); font: 8px/1 monospace; letter-spacing: 0.12em; }
.anatomy-card h3 { position: absolute; bottom: 44px; left: 22px; margin: 0; font: 400 28px/1 Georgia, "Noto Serif SC", serif; }
.anatomy-card p { position: absolute; bottom: 16px; left: 22px; margin: 0; color: var(--muted); font-size: 10px; }
.anatomy-photo { position: absolute; inset: 42px 14px 126px; overflow: hidden; }
.anatomy-photo::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(13 23 16 / 78%), transparent 55%); content: ""; }
.anatomy-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.18) saturate(.7) contrast(1.06); transition: filter 300ms ease, transform 600ms ease; }
.anatomy-card:hover .anatomy-photo img { filter: grayscale(0) saturate(1); transform: scale(1.04); }
.anatomy-symbol { position: absolute; top: 30%; left: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%); }
.toe-symbol { display: flex; gap: 7px; align-items: flex-end; transform: translate(-50%, -50%) rotate(-20deg); }
.toe-symbol i { width: 22px; height: 105px; border: 1px solid var(--moss); border-radius: 60% 60% 20% 20%; background: repeating-linear-gradient(0deg, transparent 0 5px, rgb(146 184 153 / 32%) 6px 7px); }
.toe-symbol i:nth-child(2) { height: 125px; }.toe-symbol i:nth-child(3) { height: 115px; }.toe-symbol i:nth-child(4) { height: 86px; }
.tail-symbol { width: 145px; height: 70px; border: 15px solid var(--moss); border-left-color: transparent; border-radius: 50%; transform: translate(-50%, -50%) rotate(25deg); }
.eye-symbol { border: 1px solid var(--moss); border-radius: 70% 0 70% 0; transform: translate(-50%, -50%) rotate(45deg); }
.eye-symbol::before { position: absolute; inset: 35px; border-radius: 50%; background: radial-gradient(ellipse, #050805 0 13%, #b9d790 15% 48%, #283d29 50%); content: ""; transform: rotate(-45deg); }
.scale-symbol { background: repeating-radial-gradient(circle at 0 50%, transparent 0 13px, rgb(145 181 154 / 42%) 14px 15px); }
.tongue-symbol { height: 8px; border-radius: 50%; background: #c56c78; box-shadow: 0 0 18px rgb(197 108 120 / 32%); transform: translate(-50%, -50%) rotate(-16deg); }

.lab-section { background: #d9ddd1; color: #142018; }
.lab-section .section-kicker::after { background: rgb(20 32 24 / 18%); }
.lab-section .section-kicker p { color: #536158; }
.lab-heading { display: grid; grid-template-columns: 1fr minmax(260px, .4fr); gap: 8vw; align-items: end; margin-bottom: 70px; }
.lab-heading h2 { margin: 12px 0 0; font: 400 clamp(52px, 7vw, 100px)/0.95 Georgia, "Noto Serif SC", serif; letter-spacing: -0.06em; }
.lab-heading h2 em { color: #587561; font-weight: 400; }
.lab-heading p { color: #59675e; font-size: 13px; line-height: 1.9; }
.lab-list { border-top: 1px solid rgb(20 32 24 / 20%); }
.lab-row { display: grid; grid-template-columns: 60px minmax(210px, .7fr) 1fr 110px; width: 100%; min-height: 130px; align-items: center; gap: 25px; padding: 20px 8px; border: 0; border-bottom: 1px solid rgb(20 32 24 / 20%); color: #18231b; background: transparent; text-align: left; cursor: pointer; transition: padding 180ms ease, background 180ms ease; }
.lab-row:hover { padding-right: 18px; padding-left: 18px; background: rgb(255 255 255 / 24%); }
.lab-row > span { font: 12px/1 monospace; }
.lab-row small { color: #66806d; font: 8px/1 monospace; letter-spacing: 0.12em; }
.lab-row h3 { margin: 10px 0 0; font: 400 30px/1 Georgia, "Noto Serif SC", serif; }
.lab-row p { color: #59675e; font-size: 12px; line-height: 1.7; }
.lab-row > b { font-size: 10px; font-weight: 500; text-align: right; }
.lab-row.is-live > b { color: #426a50; }

.habitat-section { background: #0a120d; }
.habitat-map { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 330px; border: 1px solid var(--line); }
.habitat-map button { position: relative; overflow: hidden; padding: 22px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }
.habitat-map button:last-child { border-right: 0; }
.habitat-map button::before { position: absolute; inset: 0; background: radial-gradient(circle at 50% 72%, rgb(95 145 100 / 28%), transparent 55%); content: ""; opacity: 0; transition: opacity 220ms ease; }
.habitat-map picture { position: absolute; inset: 0; }
.habitat-map picture::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(5 12 8 / 88%), rgb(5 12 8 / 28%)); content: ""; }
.habitat-map img { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.25) saturate(.7); transition: opacity 240ms ease, filter 240ms ease, transform 650ms ease; }
.habitat-map button:hover img, .habitat-map button.is-active img { opacity: .72; filter: grayscale(0) saturate(.9); transform: scale(1.04); }
.habitat-map button.is-active::before, .habitat-map button:hover::before { opacity: 1; }
.habitat-map i { position: absolute; top: 30%; left: 50%; width: 54px; height: 92px; border: 1px solid rgb(180 210 183 / 26%); border-radius: 50% 50% 30% 30%; transform: translate(-50%, -50%); }
.habitat-map span { position: absolute; bottom: 42px; left: 22px; z-index: 2; font: 400 18px/1 Georgia, "Noto Serif SC", serif; }
.habitat-map small { position: absolute; bottom: 20px; left: 22px; z-index: 2; color: var(--muted); font: 8px/1 monospace; }
.habitat-readout { display: grid; grid-template-columns: 80px minmax(230px, .75fr) 1fr; gap: 40px; align-items: start; padding: 40px 0; border-bottom: 1px solid var(--line); }
.habitat-readout > span { color: var(--moss); font: 10px/1 monospace; }
.habitat-readout small { color: var(--muted); font: 8px/1 monospace; letter-spacing: .15em; }
.habitat-readout h3 { margin: 10px 0 0; font: 400 27px/1.15 Georgia, "Noto Serif SC", serif; }
.habitat-readout p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

.coexist-section { background: #101d15; }
.coexist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }
.coexist-grid h2 { margin: 16px 0 0; font: 400 clamp(48px, 6.4vw, 92px)/.98 Georgia, "Noto Serif SC", serif; letter-spacing: -.06em; }
.myth-stack { border-top: 1px solid var(--line); }
.myth-stack article { padding: 30px 0; border-bottom: 1px solid var(--line); }
.myth-stack span { color: var(--moss); font: 8px/1 monospace; letter-spacing: .12em; }
.myth-stack h3 { margin: 12px 0 9px; font: 400 22px/1.2 Georgia, "Noto Serif SC", serif; }
.myth-stack p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }

.museum-cta { text-align: center; background: #d9ddd1; color: #132018; }
.museum-cta > small { color: #5d7464; font: 9px/1 monospace; letter-spacing: .17em; }
.museum-cta h2 { margin: 26px auto 40px; font: 400 clamp(46px, 7vw, 100px)/.98 Georgia, "Noto Serif SC", serif; letter-spacing: -.055em; }
.museum-cta > div { display: flex; justify-content: center; gap: 10px; }
.museum-cta a, .museum-cta button { padding: 13px 18px; border: 1px solid #304b39; border-radius: 999px; background: transparent; color: #183022; font-size: 10px; cursor: pointer; }
.museum-cta a { color: #e9f0e9; background: #193323; }
.museum-footer { display: grid; grid-template-columns: .6fr 1fr 1fr auto; gap: 40px; align-items: start; padding: 60px clamp(24px, 5vw, 78px); border-top: 1px solid var(--line); background: #050905; }
.museum-footer p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.museum-footer p small { font: 7px/1 monospace; letter-spacing: .12em; }
.museum-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: rgb(237 240 232 / 62%); font-size: 10px; }
.museum-footer > button { border: 0; color: var(--moss); background: transparent; font-size: 10px; cursor: pointer; }

.search-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgb(4 9 6 / 96%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 220ms; }
.search-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.search-overlay > button { position: absolute; top: 30px; right: 38px; border: 0; color: var(--bone); background: transparent; font-size: 30px; cursor: pointer; }
.search-overlay > div { width: min(800px, 100%); }
.search-overlay small { color: var(--moss); font: 9px/1 monospace; letter-spacing: .18em; }
.search-overlay label { display: block; margin-top: 26px; font: 400 clamp(32px, 5vw, 64px)/1.1 Georgia, "Noto Serif SC", serif; }
.search-overlay input { display: block; width: 100%; margin-top: 22px; padding: 16px 0; border: 0; border-bottom: 1px solid rgb(237 240 232 / 32%); outline: 0; color: var(--bone); background: transparent; font: 300 clamp(18px, 3vw, 32px)/1 sans-serif; }
.search-results { display: grid; gap: 8px; margin-top: 20px; }
.search-results button { display: flex; justify-content: space-between; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; cursor: pointer; }

.archive-dialog { position: fixed; top: 50%; left: 50%; z-index: 110; width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 0; color: var(--bone); background: #0c1710; box-shadow: 0 40px 120px rgb(0 0 0 / 55%); transform: translate(-50%, -50%); }
.archive-dialog::backdrop { background: rgb(2 7 4 / 78%); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: 18px; right: 20px; z-index: 2; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--bone); background: rgb(6 12 8 / 70%); font-size: 20px; cursor: pointer; }
.dialog-index { min-height: 230px; background: radial-gradient(circle at 62% 38%, #59735d, #203326 38%, #09120c 70%); }
.dialog-body { padding: 32px; }
.dialog-body > small { color: var(--moss); font: 8px/1 monospace; letter-spacing: .14em; }
.dialog-body h2 { margin: 12px 0 16px; font: 400 clamp(36px, 6vw, 60px)/1 Georgia, "Noto Serif SC", serif; }
.dialog-body > p { color: var(--muted); font-size: 13px; line-height: 1.85; }
.dialog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dialog-meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: rgb(225 235 226 / 64%); font-size: 9px; }
.dialog-note { padding-top: 18px; border-top: 1px solid var(--line); color: rgb(216 228 218 / 42%) !important; font-size: 10px !important; }

html:not(.hero-visible) .exploration-ui .safe-zone,
html:not(.hero-visible) .exploration-ui .hotspot-layer,
html:not(.hero-visible) .exploration-ui .exploration-hud,
html:not(.hero-visible) .danger-feedback,
html:not(.hero-visible) .attack-reticle,
html:not(.hero-visible) .gecko-mouth,
html:not(.hero-visible) .tongue-layer { opacity: 0 !important; visibility: hidden; }
.museum-mode .exploration-hud { top: 84px; }
.museum-mode .analytics-launchers { top: 84px; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.25,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes scroll-line { 50% { opacity: .28; transform: scaleY(.6); transform-origin: top; } }

@media (max-width: 900px) {
  .museum-nav { grid-template-columns: 1fr auto; }
  .museum-nav > nav { position: fixed; top: 60px; right: 14px; left: 14px; display: none; padding: 24px; border: 1px solid var(--line); background: rgb(7 14 9 / 96%); flex-direction: column; }
  .museum-nav.menu-open > nav { display: flex; }
  .nav-menu { display: inline-block; }
  .intro-grid, .section-heading, .lab-heading, .coexist-grid { grid-template-columns: 1fr; }
  .forest-stats { grid-template-columns: 1fr 1fr; }
  .forest-stats div:nth-child(2) { border-right: 0; }
  .species-grid { grid-template-columns: 1fr 1fr; }
  .feature-title { top: auto; bottom: 50px; left: 5%; }
  .feature-title h3 { max-width: 250px; }
  .stage-facts { display: none; }
  .lab-row { grid-template-columns: 42px 1fr auto; }
  .lab-row p { display: none; }
  .habitat-map { grid-template-columns: 1fr; min-height: 0; }
  .habitat-map button { min-height: 90px; border-right: 0; border-bottom: 1px solid var(--line); }
  .habitat-map i { top: 50%; left: auto; right: 28px; width: 34px; height: 50px; }
  .habitat-readout { grid-template-columns: 55px 1fr; }
  .habitat-readout > p { grid-column: 2; }
  .museum-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .section-pad { padding: 88px 20px; }
  .museum-nav { min-height: 58px; padding: 0 16px; background: linear-gradient(rgb(5 10 7 / 72%), transparent); }
  .nav-actions button:first-child { display: none; }
  .museum-hero { min-height: 620px; }
  .hero-museum-copy { top: 22%; left: 20px; right: 20px; }
  .hero-museum-copy h1 { font-size: clamp(44px, 14.5vw, 66px); line-height: 1; }
  .hero-instruction { align-items: flex-start; flex-direction: column; }
  .hero-index { right: 18px; bottom: 30px; }
  .scroll-cue { display: none; }
  .forest-stats, .species-grid { grid-template-columns: 1fr; }
  .forest-stats div { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-heading { margin-bottom: 36px; }
  .feature-stage { min-height: 620px; }
  .specimen-polaroid { top: 38%; width: 230px; }
  .specimen-art { height: 270px; }
  .feature-title { bottom: 32px; }
  .feature-title h3 { font-size: 36px; }
  .species-visual { height: 350px; }
  .anatomy-carousel { grid-auto-columns: 82vw; }
  .lab-row { min-height: 110px; gap: 12px; }
  .lab-row h3 { font-size: 23px; }
  .habitat-readout { display: block; }
  .habitat-readout > * { margin-bottom: 18px; }
  .museum-cta > div { flex-direction: column; }
  .museum-footer { grid-template-columns: 1fr; }
  .museum-mode .exploration-hud { top: 68px; transform: scale(.86); transform-origin: left top; }
}

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

/* Phase 5B: image attribution register */
.credits-page { background: #071009; }
.credits-nav { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); }
.credits-nav > a:last-child { color: var(--moss); font-size: 10px; letter-spacing: .08em; }
.credits-hero { display: grid; min-height: 65vh; align-content: center; padding: 100px max(24px, calc((100vw - 1320px) / 2)); background: radial-gradient(circle at 75% 35%, rgb(79 121 83 / 20%), transparent 30%); }
.credits-hero small, .credits-policy small { color: var(--moss); font: 9px/1 monospace; letter-spacing: .18em; }
.credits-hero h1 { margin: 20px 0 26px; font: 400 clamp(68px, 11vw, 150px)/.86 Georgia, "Noto Serif SC", serif; letter-spacing: -.075em; }
.credits-hero p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.credits-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 max(24px, calc((100vw - 1320px) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credits-summary div { padding: 32px; border-right: 1px solid var(--line); }
.credits-summary div:last-child { border-right: 0; }
.credits-summary strong { display: block; font: 400 38px/1 Georgia, serif; }
.credits-summary span { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.credits-register { padding: 110px max(24px, calc((100vw - 1320px) / 2)); }
.credits-register > header, .credit-row { display: grid; grid-template-columns: 50px minmax(280px, 1.2fr) minmax(150px, .55fr) minmax(260px, .85fr); gap: 24px; align-items: center; }
.credits-register > header { padding: 0 12px 14px; color: var(--muted); border-bottom: 1px solid var(--line); font: 8px/1 monospace; letter-spacing: .12em; }
.credit-row { min-height: 150px; padding: 18px 12px; border-bottom: 1px solid var(--line); }
.credit-row > span { color: var(--moss); font: 10px/1 monospace; }
.credit-subject { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; min-width: 0; }
.credit-subject img { width: 128px; height: 94px; object-fit: cover; filter: saturate(.72); }
.credit-subject b, .credit-subject small { display: block; }
.credit-subject b { margin-bottom: 8px; font: 400 18px/1.2 Georgia, serif; }
.credit-subject small { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.4; text-overflow: ellipsis; }
.credit-author { color: rgb(228 238 229 / 66%); font-size: 10px; line-height: 1.6; }
.credit-license { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.credit-license b { width: 100%; color: var(--moss-bright); font-size: 10px; }
.credit-license a { color: var(--moss); font-size: 9px; }
.credit-license small { width: 100%; color: rgb(220 232 222 / 38%); font-size: 8px; line-height: 1.5; }
.credits-policy { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 100px max(24px, calc((100vw - 1320px) / 2)); background: #d9ddd1; color: #142018; }
.credits-policy h2 { margin: 14px 0 0; font: 400 clamp(48px, 6vw, 84px)/.98 Georgia, "Noto Serif SC", serif; letter-spacing: -.055em; }
.credits-policy p { color: #4f5e54; font-size: 12px; line-height: 1.9; }
.credits-footer { display: flex; justify-content: space-between; padding: 44px clamp(24px, 5vw, 76px); color: var(--muted); font-size: 10px; }
.credits-footer a { color: var(--moss); }

@media (max-width: 760px) {
  .credits-summary { grid-template-columns: 1fr; }
  .credits-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .credits-register > header { display: none; }
  .credit-row { grid-template-columns: 30px 1fr; align-items: start; }
  .credit-author, .credit-license { grid-column: 2; }
  .credit-subject { grid-template-columns: 92px 1fr; }
  .credit-subject img { width: 92px; height: 76px; }
  .credits-policy { grid-template-columns: 1fr; }
  .credits-footer { gap: 24px; flex-direction: column; }
}

/* Phase 5C: behavior laboratory */
.lab-page { background: #071009; }
.lab-nav { position: sticky; top: 0; z-index: 70; display: grid; grid-template-columns: 160px 1fr 160px; min-height: 66px; align-items: center; padding: 0 clamp(18px, 3vw, 48px); border-bottom: 1px solid var(--line); background: rgb(5 11 7 / 88%); backdrop-filter: blur(16px); }
.lab-nav nav { display: flex; justify-content: center; gap: 32px; }
.lab-nav nav a, .lab-nav > a:last-child { color: rgb(233 241 234 / 62%); font-size: 10px; letter-spacing: .07em; }
.lab-nav > a:last-child { color: var(--moss); text-align: right; }
.lab-hero { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, .38fr); min-height: 78vh; align-items: center; gap: 7vw; padding: 100px max(24px, calc((100vw - 1320px) / 2)); overflow: hidden; }
.lab-hero::before { position: absolute; top: 5%; right: 7%; width: 420px; height: 420px; border: 1px solid rgb(137 185 145 / 12%); border-radius: 50%; box-shadow: 0 0 0 70px rgb(137 185 145 / 3%), 0 0 0 140px rgb(137 185 145 / 2%); content: ""; }
.lab-hero small { color: var(--moss); font: 9px/1 monospace; letter-spacing: .18em; }
.lab-hero h1 { position: relative; margin: 22px 0 0; font: 400 clamp(58px, 8.3vw, 120px)/.88 Georgia, "Noto Serif SC", serif; letter-spacing: -.068em; }
.lab-hero h1 em { color: var(--moss); font-weight: 400; }
.lab-hero > p { position: relative; color: var(--muted); font-size: 13px; line-height: 2; }
.lab-hero-index { position: absolute; right: 4vw; bottom: 30px; color: rgb(232 241 233 / 38%); font: 400 62px/1 Georgia, serif; text-align: right; }
.lab-hero-index small { font-size: 7px; }
.model-notice { display: flex; gap: 24px; margin: 0 max(24px, calc((100vw - 1320px) / 2)); padding: 18px 20px; border: 1px solid rgb(157 201 166 / 18%); color: rgb(224 235 226 / 58%); background: rgb(106 161 115 / 6%); font-size: 11px; }
.model-notice b { flex: 0 0 auto; color: var(--moss-bright); }
.experiment-section { padding: clamp(100px, 12vw, 170px) max(24px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid var(--line); }
.experiment-heading { display: grid; grid-template-columns: 70px 1fr minmax(280px, .45fr); gap: 30px; align-items: end; margin-bottom: 66px; }
.experiment-heading > span { color: var(--moss); font: 10px/1 monospace; }
.experiment-heading small { color: var(--muted); font: 8px/1 monospace; letter-spacing: .14em; }
.experiment-heading h2 { margin: 12px 0 0; font: 400 clamp(48px, 6vw, 82px)/1 Georgia, "Noto Serif SC", serif; letter-spacing: -.055em; }
.experiment-heading > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }

.predation-section { background: #0a140e; }
.predation-protocol { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.protocol-visual { position: relative; min-height: 520px; grid-row: span 2; overflow: hidden; }
.protocol-visual::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(5 12 8 / 72%), transparent 52%); content: ""; }
.protocol-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.05); }
.protocol-visual span { position: absolute; bottom: 24px; left: 24px; z-index: 2; color: var(--moss-bright); font: 8px/1.5 monospace; letter-spacing: .14em; }
.predation-protocol ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.predation-protocol li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.predation-protocol li > b { color: var(--moss); font: 9px/1 monospace; }
.predation-protocol strong { font: 400 20px/1 Georgia, "Noto Serif SC", serif; }
.predation-protocol li p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.protocol-launch { padding: 24px; border: 1px solid var(--line); background: rgb(255 255 255 / 2%); }
.protocol-launch small { color: var(--moss); font: 8px/1 monospace; }
.protocol-launch p { color: var(--muted); font-size: 10px; }
.protocol-launch a { display: inline-block; margin-top: 14px; padding: 12px 16px; border-radius: 999px; color: #142019; background: var(--moss-bright); font-size: 10px; }

.adhesion-section { color: #142019; background: #d9ddd1; }
.adhesion-section .experiment-heading > span, .adhesion-section .experiment-heading small { color: #587561; }
.adhesion-section .experiment-heading > p { color: #58665d; }
.adhesion-workbench { display: grid; grid-template-columns: 1.4fr .6fr; min-height: 620px; border: 1px solid rgb(20 32 24 / 18%); }
.adhesion-stage { position: relative; display: grid; overflow: hidden; place-items: center; background: #bfc8bc; }
.surface-plane { --plane-angle: 0deg; --slip: 0px; position: relative; width: 70%; height: 64%; border: 1px solid rgb(20 32 24 / 24%); background: linear-gradient(135deg, rgb(255 255 255 / 45%), rgb(126 146 132 / 22%)); box-shadow: 0 26px 70px rgb(33 52 39 / 12%); transform: rotate(var(--plane-angle)); transition: transform 400ms ease, background 300ms ease; }
.surface-plane[data-surface="bark"] { background: repeating-linear-gradient(80deg, #715a42 0 9px, #4c3d2d 10px 15px, #8a7051 16px 20px); }
.surface-plane[data-surface="leaf"] { background: linear-gradient(130deg, #78906c, #344f37); }
.surface-plane[data-surface="ptfe"] { background: linear-gradient(135deg, #dadcd8, #8e9891); }
.surface-plane.is-wet::after { position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 30% 30%, rgb(220 240 241 / 40%) 0 4px, transparent 5px 44px); content: ""; backdrop-filter: blur(1px); }
.lab-gecko { position: absolute; top: 44%; left: 52%; z-index: 2; width: 150px; height: 54px; border-radius: 60% 32% 50% 55%; background: #a46241; box-shadow: 80px 22px 0 -20px #7b4e37; transform: translate(-50%, calc(-50% + var(--slip))) rotate(-10deg); transition: transform 500ms cubic-bezier(.2,.8,.25,1); }
.lab-gecko::after { position: absolute; top: 35%; right: -68%; width: 78%; height: 16%; border-radius: 50%; background: #7b4e37; content: ""; transform: rotate(22deg); transform-origin: left; }
.lab-gecko i { position: absolute; width: 42px; height: 7px; border-radius: 50%; background: #bf8059; }
.lab-gecko i:nth-child(1) { top: -10px; left: 28px; transform: rotate(-35deg); }.lab-gecko i:nth-child(2) { right: 28px; bottom: -10px; transform: rotate(30deg); }.lab-gecko i:nth-child(3) { bottom: -12px; left: 28px; transform: rotate(35deg); }.lab-gecko i:nth-child(4) { top: -8px; right: 30px; transform: rotate(-30deg); }
.force-arrow { position: absolute; top: 20px; right: 20px; color: rgb(20 32 24 / 60%); font: 8px/1 monospace; }
.force-arrow::after { display: block; width: 1px; height: 42px; margin: 7px auto 0; background: #37493c; content: ""; }
.adhesion-status { position: absolute; right: 28px; bottom: 24px; left: 28px; display: flex; align-items: end; gap: 16px; }
.adhesion-status span { color: #5a6b60; font-size: 9px; }.adhesion-status strong { font: 400 48px/1 Georgia, serif; }.adhesion-status b { margin-left: auto; color: #49624f; font-size: 11px; }.adhesion-status b[data-state="slip"] { color: #9a4638; }
.adhesion-controls { display: grid; align-content: center; gap: 26px; padding: 36px; border-left: 1px solid rgb(20 32 24 / 18%); background: rgb(255 255 255 / 20%); }
.adhesion-controls label { display: grid; gap: 9px; color: #526057; font-size: 10px; }
.adhesion-controls select { padding: 11px; border: 1px solid rgb(20 32 24 / 22%); background: transparent; color: #142019; }
.adhesion-controls input[type="range"] { width: 100%; accent-color: #486a51; }
.adhesion-controls output { justify-self: end; margin-top: -18px; font: 11px/1 monospace; }
.toggle-control { grid-template-columns: 1fr auto !important; align-items: center; }
.toggle-control input { position: absolute; opacity: 0; }
.toggle-control i { width: 42px; height: 22px; padding: 3px; border-radius: 999px; background: #9da99f; }
.toggle-control i::after { display: block; width: 16px; height: 16px; border-radius: 50%; background: white; content: ""; transition: transform 180ms ease; }
.toggle-control input:checked + i { background: #4e7659; }.toggle-control input:checked + i::after { transform: translateX(20px); }
.adhesion-controls button { min-height: 43px; border: 0; border-radius: 999px; color: #edf3ed; background: #1b3423; cursor: pointer; }
.adhesion-controls > p { margin: -14px 0 0; color: #68766c; font-size: 9px; text-align: center; }
.trial-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 1px solid rgb(20 32 24 / 18%); border-bottom: 1px solid rgb(20 32 24 / 18%); border-left: 1px solid rgb(20 32 24 / 18%); }
.trial-strip > span { display: grid; min-height: 78px; place-content: center; border-right: 1px solid rgb(20 32 24 / 18%); color: #778178; font: 9px/1 monospace; text-align: center; }
.trial-strip > span:last-child { border-right: 0; }.trial-strip .is-recorded { color: #23422d; background: rgb(79 119 88 / 8%); }.trial-strip b, .trial-strip small { display: block; }.trial-strip b { font-size: 20px; }.trial-strip small { margin-top: 7px; font-size: 8px; }
.experiment-result { margin-top: 20px; padding: 25px; border: 1px solid rgb(20 32 24 / 18%); }.experiment-result small { color: #587561; font: 8px/1 monospace; }.experiment-result h3 { margin: 10px 0; font: 400 28px/1.2 Georgia, serif; }.experiment-result p { color: #59675e; font-size: 11px; }

.camouflage-section { background: #08110b; }
.camouflage-workbench { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
.camouflage-stage { position: relative; min-height: 650px; overflow: hidden; background: linear-gradient(#1f3526, #0c1710); background-position: center; background-size: cover; cursor: crosshair; }
.camouflage-stage::after { position: absolute; inset: 0; border: 1px solid rgb(231 241 233 / 10%); content: ""; pointer-events: none; }
.camouflage-intro { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; padding: 30px; background: rgb(5 12 8 / 72%); text-align: center; backdrop-filter: blur(5px); }
.camouflage-intro[hidden] { display: none; }
.camouflage-intro small, .camouflage-guide small, [data-camouflage-result] small { color: var(--moss); font: 8px/1 monospace; letter-spacing: .14em; }
.camouflage-intro h3 { margin: 14px 0; font: 400 38px/1 Georgia, "Noto Serif SC", serif; }.camouflage-intro p { max-width: 430px; color: var(--muted); font-size: 11px; line-height: 1.8; }.camouflage-intro button { margin-top: 18px; padding: 12px 18px; border: 0; border-radius: 999px; color: #142019; background: var(--moss-bright); cursor: pointer; }
.camouflage-target { position: absolute; z-index: 3; display: none; width: 132px; height: 94px; border: 0; background-position: center; background-size: cover; clip-path: polygon(3% 42%, 15% 21%, 43% 14%, 76% 27%, 99% 54%, 72% 65%, 45% 92%, 19% 72%); opacity: .68; filter: saturate(.45) contrast(.78); transform: translate(-50%, -50%) rotate(-8deg); cursor: crosshair; }
.camouflage-target.is-visible { display: block; }
.camouflage-hud { position: absolute; top: 18px; right: 18px; left: 18px; z-index: 5; display: flex; justify-content: space-between; padding: 11px 13px; border: 1px solid rgb(231 241 233 / 16%); color: rgb(237 242 237 / 70%); background: rgb(4 10 6 / 55%); font: 9px/1 monospace; pointer-events: none; }
.camouflage-guide { padding: 38px; border: 1px solid var(--line); background: rgb(255 255 255 / 2%); }
.camouflage-guide h3 { margin: 16px 0; font: 400 30px/1.15 Georgia, "Noto Serif SC", serif; }.camouflage-guide p { color: var(--muted); font-size: 11px; line-height: 1.9; }
[data-camouflage-result] { margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--line); }[data-camouflage-result] h4 { margin: 12px 0 0; font: 400 50px/1 Georgia, serif; }

.records-section { background: #0d1911; }
.lab-records { border-top: 1px solid var(--line); }
.lab-records article { display: grid; grid-template-columns: 60px 1fr auto; gap: 25px; align-items: center; min-height: 110px; border-bottom: 1px solid var(--line); }
.lab-records article > span { color: var(--moss); font: 9px/1 monospace; }.lab-records small { color: var(--muted); font: 8px/1 monospace; }.lab-records h3 { margin: 8px 0 0; font: 400 22px/1 Georgia, serif; }.lab-records article > b { color: rgb(232 241 233 / 62%); font-size: 10px; font-weight: 400; }.lab-records > p { color: var(--muted); }
.records-section > button { margin-top: 22px; padding: 10px 14px; border: 1px solid var(--line); color: rgb(235 176 164 / 70%); background: transparent; cursor: pointer; }
.lab-references { display: grid; grid-template-columns: .6fr 1fr; gap: 9vw; padding: 100px max(24px, calc((100vw - 1320px) / 2)); color: #142019; background: #d9ddd1; }.lab-references small { color: #587561; font: 8px/1 monospace; }.lab-references h2 { margin: 14px 0; font: 400 58px/1 Georgia, "Noto Serif SC", serif; }.lab-references ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(20 32 24 / 18%); }.lab-references li { padding: 20px 0; border-bottom: 1px solid rgb(20 32 24 / 18%); color: #48594e; font-size: 11px; }

.predation-lab-panel { position: fixed; bottom: 26px; left: 26px; z-index: 80; width: min(390px, calc(100vw - 52px)); border: 1px solid rgb(203 231 211 / 24%); color: var(--bone); background: rgb(6 15 10 / 92%); box-shadow: 0 24px 80px rgb(0 0 0 / 42%); backdrop-filter: blur(16px); }
.predation-lab-panel header { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }.predation-lab-panel header small { color: var(--moss); font: 8px/1 monospace; }.predation-lab-panel header b { font-size: 11px; }.predation-lab-panel header button { margin-left: auto; border: 0; color: var(--bone); background: transparent; cursor: pointer; }
.predation-lab-body { padding: 17px; }.predation-lab-body > p { margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.7; }.predation-lab-body > div { display: flex; gap: 18px; }.predation-lab-body span { color: var(--muted); font-size: 9px; }.predation-lab-body span b { color: var(--moss-bright); }.predation-lab-body > button { width: 100%; min-height: 38px; margin-top: 16px; border: 0; border-radius: 999px; color: #142019; background: var(--moss-bright); cursor: pointer; }
.predation-lab-result { padding: 17px; border-top: 1px solid var(--line); }.predation-lab-result small { color: var(--moss); font: 8px/1 monospace; }.predation-lab-result h3 { margin: 10px 0; font: 400 26px/1 Georgia, serif; }.predation-lab-result p { color: var(--muted); font-size: 10px; line-height: 1.6; }.predation-lab-result a { color: var(--moss); font-size: 9px; }

@media (max-width: 820px) {
  .lab-nav { grid-template-columns: 1fr auto; }.lab-nav nav { display: none; }
  .lab-hero, .experiment-heading, .predation-protocol, .adhesion-workbench, .camouflage-workbench, .lab-references { grid-template-columns: 1fr; }
  .lab-hero { min-height: 72vh; }.lab-hero-index { display: none; }
  .experiment-heading { gap: 14px; }.experiment-heading > p { margin-left: 0; }
  .protocol-visual { min-height: 420px; grid-row: auto; }
  .adhesion-stage { min-height: 520px; }.adhesion-controls { border-top: 1px solid rgb(20 32 24 / 18%); border-left: 0; }
  .camouflage-stage { min-height: 540px; }.lab-records article { grid-template-columns: 40px 1fr; }.lab-records article > b { grid-column: 2; padding-bottom: 18px; }
}

@media (max-width: 540px) {
  .lab-nav { padding: 0 15px; }.lab-nav > a:last-child { font-size: 8px; }
  .lab-hero, .experiment-section, .lab-references { padding: 84px 18px; }
  .model-notice { margin: 0 18px; flex-direction: column; }
  .lab-hero h1 { font-size: 52px; }
  .experiment-heading h2 { font-size: 44px; }
  .adhesion-stage { min-height: 430px; }.surface-plane { width: 82%; height: 58%; }.lab-gecko { transform: translate(-50%, calc(-50% + var(--slip))) rotate(-10deg) scale(.76); }
  .adhesion-status strong { font-size: 36px; }.adhesion-status b { font-size: 9px; }
  .camouflage-stage { min-height: 460px; }.camouflage-target { width: 104px; height: 76px; }
  .predation-lab-panel { bottom: 14px; left: 14px; width: calc(100vw - 28px); }
}

/* Phase 6A: production 404 */
.error-page { min-height: 100%; background: #061009; }
.error-page body { min-height: 100vh; }
.error-main { position: relative; display: grid; min-height: calc(100vh - 68px); place-items: center; overflow: hidden; padding: 80px 24px; background: radial-gradient(circle at 72% 34%, rgb(91 142 99 / 16%), transparent 31%), linear-gradient(135deg, #07120b, #030805); }
.error-code { position: absolute; color: rgb(138 179 145 / 5%); font: 400 min(44vw, 650px)/.75 Georgia, serif; letter-spacing: -.11em; user-select: none; }
.error-copy { position: relative; z-index: 1; width: min(820px, 100%); text-align: center; }
.error-copy small { color: var(--moss); font: 8px/1 monospace; letter-spacing: .18em; }
.error-copy h1 { margin: 28px 0; font: 400 clamp(52px, 8vw, 112px)/.95 Georgia, "Noto Serif SC", serif; letter-spacing: -.06em; }
.error-copy p { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 2; }
.error-copy > div { display: flex; justify-content: center; gap: 10px; margin-top: 38px; }
.error-copy a { padding: 13px 18px; border: 1px solid var(--line); color: var(--bone); font-size: 9px; }
.error-copy a:first-child { border-color: var(--moss-bright); color: #132019; background: var(--moss-bright); }
@media (max-width: 540px) { .error-copy h1 { font-size: 52px; }.error-copy > div { align-items: stretch; flex-direction: column; }.error-main { padding-right: 18px; padding-left: 18px; } }

/* Phase 5D: focus species dossiers */
.dialog-deep-link { display: inline-block; margin-top: 25px; padding: 12px 17px; border-radius: 999px; color: #142019; background: var(--moss-bright); font-size: 9px; }.dialog-deep-link[hidden] { display: none; }
.dossier-page { background: #071009; scroll-behavior: smooth; }
.dossier-nav { position: sticky; top: 0; z-index: 60; display: grid; min-height: 68px; grid-template-columns: 170px 1fr 170px; align-items: center; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgb(5 12 8 / 91%); backdrop-filter: blur(18px); }
.dossier-nav nav { display: flex; justify-content: center; gap: 34px; }.dossier-nav nav a, .dossier-nav > a:last-child { color: var(--muted); font-size: 9px; }.dossier-nav nav a.is-active { color: var(--moss-bright); }.dossier-nav > a:last-child { text-align: right; }
.dossier-hero { position: relative; min-height: calc(100vh - 68px); overflow: hidden; background: #020503; }.dossier-hero picture, .dossier-hero img { position: absolute; inset: 0; width: 100%; height: 100%; }.dossier-hero img { object-fit: cover; filter: saturate(.62) contrast(1.08); }.dossier-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(2 7 4 / 82%) 0 32%, transparent 69%), linear-gradient(0deg, rgb(3 8 5 / 75%), transparent 48%); }
.dossier-count { position: absolute; top: 5vw; right: 5vw; color: rgb(235 241 235 / 45%); font: 9px/1 monospace; }.dossier-title { position: absolute; bottom: 9vw; left: max(24px, calc((100vw - 1260px) / 2)); }.dossier-title small { color: var(--moss-bright); font: 8px/1 monospace; letter-spacing: .16em; }.dossier-title h1 { margin: 23px 0 10px; font: 400 clamp(88px, 14vw, 200px)/.75 Georgia, "Noto Serif SC", serif; letter-spacing: -.08em; }.dossier-title p { color: rgb(236 242 236 / 62%); font: 10px/1 monospace; letter-spacing: .08em; }
.dossier-status { position: absolute; right: max(24px, calc((100vw - 1260px) / 2)); bottom: 7vw; width: 260px; padding: 22px; border-top: 1px solid rgb(235 242 235 / 30%); background: rgb(2 8 4 / 40%); backdrop-filter: blur(10px); }.dossier-status small { color: var(--moss); font: 7px/1 monospace; }.dossier-status strong { display: block; margin-top: 14px; font: 400 31px/1 Georgia, serif; }.dossier-status span { display: block; margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.dossier-pad { padding: clamp(95px, 11vw, 155px) max(24px, calc((100vw - 1260px) / 2)); }.dossier-index, .dossier-heading small { color: var(--moss); font: 8px/1 monospace; letter-spacing: .14em; }
.dossier-intro { display: grid; grid-template-columns: 120px 1fr; gap: 5vw; background: #0b1710; }.dossier-intro blockquote { max-width: 900px; margin: 0; font: 400 clamp(36px, 5.6vw, 76px)/1.12 Georgia, "Noto Serif SC", serif; letter-spacing: -.045em; }.dossier-facts { display: grid; grid-column: 2; grid-template-columns: repeat(4, 1fr); margin-top: 65px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.dossier-facts article { display: grid; min-height: 120px; align-content: space-between; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.dossier-facts small { color: var(--muted); font-size: 8px; }.dossier-facts strong { font: 400 18px/1.25 Georgia, "Noto Serif SC", serif; }
.dossier-map-section { color: #17231b; background: #d7dbd1; }.dossier-heading { display: grid; grid-template-columns: .7fr 1fr; gap: 10vw; align-items: end; margin-bottom: 64px; }.dossier-heading h2 { margin: 15px 0 0; font: 400 clamp(48px, 6.4vw, 86px)/.95 Georgia, "Noto Serif SC", serif; letter-spacing: -.06em; }.dossier-heading > p { margin: 0; color: #59665d; font-size: 12px; line-height: 1.9; }.dossier-map-layout { display: grid; grid-template-columns: 1fr 300px; border: 1px solid rgb(20 32 24 / 18%); }.species-map { min-height: 590px; background: #c8cfc2; }.species-map svg { width: 100%; height: 100%; }.map-grid path { fill: none; stroke: rgb(31 58 40 / 10%); stroke-width: 1; }.map-land path, .map-islands path { fill: #607463; stroke: #425647; stroke-width: 2; }.map-range { fill: rgb(193 121 73 / 68%); stroke: #a4623b; stroke-width: 3; }.map-points circle { fill: #f1d894; stroke: #6e442b; stroke-width: 3; }.map-rings circle, .map-rings path { fill: rgb(198 123 70 / 33%); stroke: #a65f36; stroke-width: 4; stroke-dasharray: 9 7; }.map-labels text, .map-ocean-label text { fill: #304637; font: 10px monospace; letter-spacing: .08em; }.map-ocean-label text { fill: #66776a; }.dossier-map-layout aside { display: grid; align-content: center; padding: 35px; border-left: 1px solid rgb(20 32 24 / 18%); }.dossier-map-layout aside small { color: #617663; font: 8px/1 monospace; }.dossier-map-layout aside h3 { margin: 25px 0 15px; font: 400 28px/1.2 Georgia, "Noto Serif SC", serif; }.dossier-map-layout aside p { color: #5d685f; font-size: 10px; line-height: 1.8; }.map-legend { display: flex; align-items: center; gap: 12px; margin: 30px 0; font-size: 9px; }.map-legend i { width: 32px; height: 12px; border: 2px dashed #a65f36; background: rgb(198 123 70 / 28%); }.dossier-map-layout aside b { color: #7a817b; font-size: 8px; font-weight: 400; line-height: 1.6; }
.dossier-story { background: #071009; }.dossier-story .dossier-heading > p { color: var(--muted); }.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.story-grid article { min-height: 330px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.story-grid span { color: var(--moss); font: 8px/1 monospace; }.story-grid h3 { margin: 120px 0 18px; font: 400 31px/1 Georgia, "Noto Serif SC", serif; }.story-grid p { color: var(--muted); font-size: 11px; line-height: 1.9; }
.dossier-ecology { display: grid; grid-template-columns: 120px 1fr; gap: 5vw; background: #101e15; }.dossier-ecology > div:nth-child(2) h2 { max-width: 850px; margin: 0; font: 400 clamp(43px, 6vw, 78px)/1.05 Georgia, "Noto Serif SC", serif; letter-spacing: -.055em; }.dossier-ecology > div:nth-child(2) p { max-width: 750px; margin-top: 35px; color: var(--muted); font-size: 12px; line-height: 2; }.ecology-chain { display: grid; grid-column: 2; grid-template-columns: repeat(4, 1fr); margin-top: 55px; }.ecology-chain span { position: relative; min-height: 110px; padding: 24px 18px; border: 1px solid var(--line); color: rgb(230 238 231 / 75%); font: 400 16px/1.3 Georgia, "Noto Serif SC", serif; }.ecology-chain span:not(:last-child)::after { position: absolute; top: 50%; right: -8px; z-index: 2; content: "→"; color: var(--moss); }.ecology-chain i { display: block; margin-bottom: 28px; color: var(--moss); font: normal 8px/1 monospace; }
.dossier-conservation { color: #17231b; background: #d5d0c3; }.dossier-conservation .dossier-heading small { color: #7a694e; }.threat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(20 32 24 / 18%); border-left: 1px solid rgb(20 32 24 / 18%); }.threat-grid article { min-height: 290px; padding: 28px; border-right: 1px solid rgb(20 32 24 / 18%); border-bottom: 1px solid rgb(20 32 24 / 18%); }.threat-grid small { color: #886b46; font: 8px/1 monospace; }.threat-grid h3 { margin: 85px 0 18px; font: 400 29px/1 Georgia, "Noto Serif SC", serif; }.threat-grid p { color: #60675f; font-size: 11px; line-height: 1.9; }
.dossier-sources { display: grid; grid-template-columns: .7fr 1fr; gap: 10vw; background: #08110b; }.dossier-sources small { color: var(--moss); font: 8px/1 monospace; }.dossier-sources h2 { margin: 18px 0; font: 400 clamp(46px, 6vw, 76px)/1 Georgia, "Noto Serif SC", serif; }.dossier-sources p { color: var(--muted); font-size: 10px; line-height: 1.8; }.dossier-sources ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.dossier-sources li { border-bottom: 1px solid var(--line); }.dossier-sources a { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; color: rgb(229 239 231 / 72%); font-size: 10px; line-height: 1.6; }.dossier-sources a span { color: var(--moss); }
.dossier-next { text-align: center; background: radial-gradient(circle at center, rgb(103 148 108 / 16%), transparent 45%), #071009; }.dossier-next small { color: var(--moss); font: 8px/1 monospace; }.dossier-next h2 { margin: 25px auto 35px; font: 400 clamp(48px, 7vw, 94px)/1 Georgia, "Noto Serif SC", serif; }.dossier-next a { display: inline-block; padding: 13px 19px; border-radius: 999px; color: #17231b; background: var(--moss-bright); font-size: 10px; }.dossier-page .credits-footer div { display: flex; gap: 22px; }.dossier-page .credits-footer a { font-size: 9px; }
@media (max-width: 820px) {
  .dossier-nav { grid-template-columns: 1fr auto; }.dossier-nav nav { display: none; }
  .dossier-status { bottom: 24px; left: 24px; width: calc(100% - 48px); }.dossier-title { bottom: 180px; }.dossier-title h1 { font-size: 106px; }
  .dossier-intro, .dossier-ecology, .dossier-heading, .dossier-sources { grid-template-columns: 1fr; }.dossier-facts, .ecology-chain { grid-column: 1; grid-template-columns: 1fr 1fr; }.dossier-map-layout { grid-template-columns: 1fr; }.dossier-map-layout aside { border-top: 1px solid rgb(20 32 24 / 18%); border-left: 0; }.story-grid, .threat-grid { grid-template-columns: 1fr; }.story-grid article, .threat-grid article { min-height: 230px; }.story-grid h3, .threat-grid h3 { margin-top: 55px; }
}
@media (max-width: 540px) {
  .dossier-nav { padding: 0 15px; }.dossier-nav > a:last-child { font-size: 8px; }.dossier-pad { padding: 82px 18px; }.dossier-hero { min-height: 780px; }.dossier-title { left: 18px; }.dossier-title h1 { font-size: 82px; }.dossier-status { right: 18px; left: 18px; width: auto; }.dossier-intro blockquote { font-size: 38px; }.dossier-facts, .ecology-chain { grid-template-columns: 1fr; }.species-map { min-height: 410px; }.dossier-map-layout aside { padding: 26px; }.dossier-page .credits-footer div { flex-wrap: wrap; }
}

/* Completion pass: thermoregulation, archive sources and project story */
.dialog-sources { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.dialog-sources > small { color: var(--moss); font: 8px/1 monospace; letter-spacing: .14em; }
.dialog-sources > div { display: grid; gap: 8px; margin-top: 14px; }
.dialog-sources a { color: rgb(218 235 222 / 68%); font-size: 10px; line-height: 1.55; }
.search-results a { display: grid; width: 100%; padding: 17px 0; border-bottom: 1px solid var(--line); color: inherit; }
.search-results a span { font: 400 20px/1.2 Georgia, "Noto Serif SC", serif; }
.search-results a small { margin-top: 7px; color: var(--muted); font: 8px/1.4 monospace; }
.coexist-lead { max-width: 420px; margin-top: 30px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.myth-stack article a { display: inline-block; margin-top: 14px; color: var(--moss); font-size: 9px; }

.thermo-section { color: #142019; background: #d5d3c5; }
.thermo-section .experiment-heading > span, .thermo-section .experiment-heading small { color: #61705c; }
.thermo-section .experiment-heading > p { color: #5f675e; }
.thermo-workbench { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 650px; border: 1px solid rgb(20 32 24 / 18%); }
.thermo-stage { --sun-strength: .7; position: relative; min-height: 650px; overflow: hidden; background: linear-gradient(90deg, #273a31 0 44%, #879576 72%, #d5b875 100%); }
.thermo-stage::before { position: absolute; inset: 0; background: radial-gradient(circle at 88% 15%, rgb(255 231 157 / var(--sun-strength)) 0 8%, transparent 31%), repeating-linear-gradient(115deg, transparent 0 90px, rgb(16 32 22 / 11%) 92px 115px); content: ""; transition: opacity 300ms; }
.thermo-shade { position: absolute; inset: 0 55% 0 0; background: linear-gradient(90deg, rgb(8 19 13 / 58%), transparent); }
.thermo-sun { position: absolute; top: 8%; right: 8%; width: 72px; height: 72px; border-radius: 50%; background: #f1d48c; box-shadow: 0 0 70px 22px rgb(241 212 140 / 42%); }
.thermo-gecko { position: absolute; bottom: 28%; left: 37%; z-index: 2; width: 138px; height: 48px; border-radius: 58% 35% 48% 58%; background: #9c633f; box-shadow: 70px 18px 0 -18px #765039; transform: translateX(-50%) rotate(-4deg); transition: left 260ms cubic-bezier(.2,.8,.2,1); }
.thermo-gecko::after { position: absolute; top: 35%; right: -70%; width: 82%; height: 15%; border-radius: 50%; background: #765039; content: ""; transform: rotate(18deg); transform-origin: left; }
.thermo-gecko i { position: absolute; width: 38px; height: 7px; border-radius: 999px; background: #b17a53; }
.thermo-gecko i:nth-child(1) { top: -9px; left: 24px; transform: rotate(-34deg); }.thermo-gecko i:nth-child(2) { top: -8px; right: 20px; transform: rotate(-28deg); }.thermo-gecko i:nth-child(3) { bottom: -10px; left: 30px; transform: rotate(36deg); }.thermo-gecko i:nth-child(4) { right: 18px; bottom: -9px; transform: rotate(29deg); }
.thermo-scale { position: absolute; right: 26px; bottom: 22px; left: 26px; display: flex; justify-content: space-between; color: rgb(240 241 227 / 70%); font: 8px/1 monospace; }
.thermo-readout { position: absolute; top: 25px; left: 25px; z-index: 2; display: grid; gap: 8px; padding: 18px; border: 1px solid rgb(238 241 225 / 22%); color: white; background: rgb(8 18 12 / 52%); backdrop-filter: blur(12px); }
.thermo-readout small { color: rgb(227 238 222 / 64%); font: 7px/1 monospace; }.thermo-readout strong { font: 400 42px/1 Georgia, serif; }.thermo-readout span { color: #d8dbca; font-size: 10px; }.thermo-readout span[data-state="stable"] { color: #b8e2ae; }.thermo-readout span[data-state="hot"] { color: #f0b58e; }.thermo-readout span[data-state="cool"] { color: #a9ced4; }
.thermo-controls { display: grid; align-content: center; gap: 28px; padding: 40px; border-left: 1px solid rgb(20 32 24 / 18%); background: rgb(255 255 255 / 22%); }
.thermo-challenge { padding-bottom: 22px; border-bottom: 1px solid rgb(20 32 24 / 15%); }.thermo-challenge small { color: #61705c; font: 8px/1 monospace; }.thermo-challenge h3 { margin: 12px 0; font: 400 28px/1.1 Georgia, "Noto Serif SC", serif; }.thermo-challenge p { margin: 0; color: #657069; font-size: 9px; line-height: 1.7; }
.thermo-controls label { display: grid; gap: 10px; color: #536056; font-size: 10px; }.thermo-controls output { justify-self: end; margin-top: -20px; font: 10px/1 monospace; }.thermo-controls input { width: 100%; accent-color: #82663d; }
.thermo-progress span { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: rgb(20 32 24 / 12%); }.thermo-progress i { display: block; width: 0; height: 100%; background: #63835f; transition: width 120ms linear; }.thermo-progress b { display: block; margin-top: 9px; color: #677168; font: 9px/1 monospace; }
.thermo-controls button { min-height: 44px; border: 0; border-radius: 999px; color: #eef1e9; background: #22392a; cursor: pointer; }.thermo-result { color: #142019; }

.about-page { background: #071009; }
.about-nav { position: sticky; top: 0; z-index: 30; display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgb(6 14 9 / 90%); backdrop-filter: blur(15px); }
.about-nav > a:last-child { color: var(--moss); font-size: 10px; }
.about-hero { display: grid; min-height: 78vh; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr); align-items: center; gap: clamp(60px, 8vw, 140px); padding: clamp(120px, 13vh, 170px) max(32px, calc((100vw - 1480px) / 2)); background: radial-gradient(circle at 78% 22%, rgb(99 145 105 / 17%), transparent 32%); }
.about-hero small, .about-kicker { color: var(--moss); font: 8px/1 monospace; letter-spacing: .16em; }
.about-hero h1 { max-width: 1020px; margin: 30px 0 0; font: 400 clamp(58px, 6.6vw, 108px)/.98 Georgia, "Noto Serif SC", serif; letter-spacing: -.045em; }
.about-hero h1 span, .about-hero h1 em { display: block; white-space: nowrap; }
.about-hero h1 span:nth-child(2) { margin-top: .08em; }
.about-hero h1 em { margin-top: .04em; color: var(--moss); font-weight: 400; }
.about-hero > p { max-width: 440px; align-self: end; margin: 0 0 5vh; padding-top: 28px; border-top: 1px solid rgb(137 185 145 / 18%); color: var(--muted); font-size: 13px; line-height: 2.05; }
.about-section { padding: clamp(90px, 11vw, 150px) max(24px, calc((100vw - 1260px) / 2)); border-top: 1px solid var(--line); }
.about-heading { display: grid; grid-template-columns: .7fr 1fr; gap: 9vw; margin-bottom: 64px; }.about-heading h2 { margin: 14px 0 0; font: 400 clamp(46px, 6vw, 78px)/.95 Georgia, "Noto Serif SC", serif; letter-spacing: -.055em; }.about-heading p { align-self: end; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.about-grid article { min-height: 240px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.about-grid span { color: var(--moss); font: 8px/1 monospace; }.about-grid h3 { margin: 42px 0 13px; font: 400 26px/1.1 Georgia, "Noto Serif SC", serif; }.about-grid p, .about-grid li { color: var(--muted); font-size: 10px; line-height: 1.8; }.about-grid ul { margin: 0; padding-left: 16px; }
.architecture-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.architecture-flow article { min-height: 180px; padding: 24px; border: 1px solid var(--line); background: rgb(255 255 255 / 2%); }.architecture-flow small { color: var(--moss); font: 8px/1 monospace; }.architecture-flow h3 { margin: 30px 0 12px; font: 400 22px/1.1 Georgia, serif; }.architecture-flow p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.about-light { color: #17231b; background: #d8dcd1; }.about-light .about-kicker { color: #587561; }.about-light .about-heading p, .about-light .about-grid p, .about-light .about-grid li { color: #5f6b63; }.about-light .about-grid { border-color: rgb(20 32 24 / 18%); }.about-light .about-grid article { border-color: rgb(20 32 24 / 18%); }.about-light .about-grid span { color: #587561; }
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 70px max(24px, calc((100vw - 1260px) / 2)); }.about-cta h2 { margin: 0; font: 400 clamp(36px, 5vw, 64px)/1 Georgia, "Noto Serif SC", serif; }.about-cta div { display: flex; gap: 10px; }.about-cta a { padding: 13px 18px; border: 1px solid var(--line); color: var(--bone); font-size: 10px; }.about-cta a:first-child { color: #142019; background: var(--moss-bright); }

@media (max-width: 820px) {
  .thermo-workbench, .about-hero, .about-heading { grid-template-columns: 1fr; }
  .thermo-controls { border-top: 1px solid rgb(20 32 24 / 18%); border-left: 0; }
  .about-grid { grid-template-columns: 1fr 1fr; }.architecture-flow { grid-template-columns: 1fr 1fr; }.about-cta { align-items: flex-start; flex-direction: column; }
  .about-hero { gap: 58px; align-content: center; }.about-hero > p { align-self: auto; margin: 0; }
}
@media (max-width: 540px) {
  .thermo-stage { min-height: 500px; }.thermo-controls { padding: 28px; }
  .about-hero, .about-section { padding: 84px 18px; }.about-hero { min-height: auto; }.about-hero > * { min-width: 0; }.about-hero h1 { width: 100%; margin-top: 24px; font-size: clamp(41px, 11.2vw, 52px); line-height: 1.06; letter-spacing: -.04em; }.about-hero h1 span, .about-hero h1 em { white-space: normal; }.about-hero > p { overflow-wrap: anywhere; }.about-grid, .architecture-flow { grid-template-columns: 1fr; }.about-cta { padding: 58px 18px; }.about-cta div { width: 100%; flex-direction: column; text-align: center; }
  .museum-nav .nav-actions button:first-child { display: inline-block; padding: 9px 10px; font-size: 8px; }
}