@font-face { font-family: "Instrument Serif"; src: url(vendor/fonts/instrument-serif-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(vendor/fonts/instrument-serif-400-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Condensed"; font-weight: 400; src: url(vendor/fonts/plex-condensed-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Condensed"; font-weight: 600; src: url(vendor/fonts/plex-condensed-600.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(vendor/fonts/plex-mono-400.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #02070d;
  --trench: #040d1b;
  --deep: #081a33;
  --glass: rgba(5, 15, 29, .68);
  --glass-strong: rgba(4, 12, 24, .88);
  --hair: rgba(170, 215, 240, .15);
  --hair-strong: rgba(170, 215, 240, .32);
  --text: #e8f4f7;
  --soft: #a7c2cf;
  --dim: #7c9aab;
  --glow: #5ef2d6;
  --coral: #ff9d76;
  --violet: #b693ff;
  --hidden: #ff8fb4;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Plex Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 15px/1.45 var(--sans);
  letter-spacing: .01em;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(33, 62, 138, .28), transparent 70%),
    radial-gradient(70% 50% at 5% 30%, rgba(18, 112, 128, .16), transparent 70%),
    linear-gradient(180deg, var(--deep), var(--trench) 40%, var(--ink));
  background-attachment: fixed;
  padding-bottom: 74px;
}

h1, h2, h3, p, figure { margin: 0; }

select, button { font: inherit; color: var(--text); }

select {
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%23a7c2cf'/%3E%3C/svg%3E") no-repeat right 2px center;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  padding: 2px 16px 2px 0;
  cursor: pointer;
}
select option { background: #07162a; color: var(--text); }

button { cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .35; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.ghost {
  padding: 6px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: rgba(8, 26, 51, .35);
  transition: border-color .2s, background .2s;
}
.ghost:hover:not(:disabled) { border-color: var(--glow); background: rgba(94, 242, 214, .08); }

.primary {
  padding: 11px 28px;
  border-radius: 999px;
  color: #02131a;
  font-weight: 600;
  background: linear-gradient(100deg, #5ef2d6, #6bc7ff 70%, #a79bff);
  box-shadow: 0 0 34px rgba(94, 242, 214, .32);
  transition: box-shadow .25s, transform .25s;
}
.primary:hover { box-shadow: 0 0 52px rgba(94, 242, 214, .55); transform: translateY(-1px); }

.eyebrow { font: 12px var(--mono); color: var(--glow); letter-spacing: .08em; text-transform: uppercase; }

/* Top bar */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--hair);
  z-index: 6;
  transition: opacity .6s;
}
.brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.brand h1 { font: italic 400 30px/1 var(--serif); letter-spacing: .01em; }
.brand span { font: 11px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }

.field { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; }
.field select { color: var(--text); font-size: 14px; max-width: 220px; }

.layers { display: flex; gap: 2px; margin: 0; padding: 0; border: 0; }
.layers legend { position: absolute; clip-path: inset(50%); }
.layers input { position: absolute; opacity: 0; }
.layers span {
  display: block;
  padding: 3px 9px;
  font-size: 14px;
  color: var(--soft);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.layers span:hover { color: var(--text); }
.layers input:checked + span { color: var(--glow); border-bottom-color: var(--glow); }
.layers input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 1px; }
.layers input:disabled + span { color: #4e6677; cursor: not-allowed; }


.notice { margin: 10px 22px 0; padding: 7px 12px; border-left: 2px solid var(--violet); background: var(--glass); font-size: 14px; }
.notice.error { border-left-color: var(--hidden); }
/* In 3D the notice floats, because in the page flow it would push the full-screen stage down. */
.view-3d .notice { position: absolute; top: 96px; left: 86px; right: min(330px, 26vw); margin: 0; padding: 4px 10px; font-size: 12px; z-index: 7; }
.pre-dive.view-3d .notice { top: 14px; left: 22px; right: 22px; }
.diving .notice { opacity: 0; }
.mode-badge { align-self: center; padding: 1px 7px; border: 1px solid var(--hair-strong); border-radius: 999px; white-space: nowrap; }
.brand span.mode-badge { display: inline-block; font: 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--soft); }
.brand span.mode-badge.real { border-color: var(--glow); color: var(--glow); }

/* Console */

main { padding: 16px 22px; max-width: 1560px; margin: 0 auto; }

.stage { position: relative; background: #010509; overflow: hidden; }
.stage[hidden], .stage-note[hidden] { display: none; }
#stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#stage-canvas:active { cursor: grabbing; }

.gauge, .inset, .stage-foot, .panes, .caption, .summary, .tour, .topbar { transition: opacity .7s; }

.gauge { position: absolute; left: 22px; top: 84px; bottom: 96px; width: 10px; border-radius: 6px; background: linear-gradient(180deg, #8fe3e8 0%, #2a84a8 18%, #1a3c86 48%, #151a57 74%, #05060f 100%); box-shadow: 0 0 0 1px var(--hair); }
.gauge .mark { position: absolute; left: 16px; font: 11px var(--mono); color: var(--dim); transform: translateY(-50%); white-space: nowrap; }
.gauge .mark::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; border-top: 1px solid rgba(255, 255, 255, .4); }
.gauge .bot { position: absolute; left: -5px; width: 20px; height: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); transform: translateY(-1px); }
.gauge .bot b { position: absolute; left: 24px; top: -8px; font: 12px var(--mono); color: var(--c); white-space: nowrap; font-weight: 400; text-shadow: 0 0 6px #000; }

.inset { position: absolute; left: 110px; bottom: 96px; width: clamp(190px, 17vw, 260px); padding: 6px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(8px); }
#inset-chart { width: 100%; aspect-ratio: 1; display: block; }
#inset-caption { margin-top: 4px; font: 10px var(--mono); color: var(--dim); }

.stage-foot { position: absolute; left: calc(110px + clamp(190px, 17vw, 260px) + 16px); bottom: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 42%; }
.stage-foot .field { color: var(--soft); }
#stage-legend { padding: 3px 7px; background: var(--glass); font: 11px/1.5 var(--mono); color: #cfe2ea; display: flex; flex-wrap: wrap; }

.caption {
  position: absolute;
  left: 50%;
  top: 11%;
  width: min(760px, 56%);
  transform: translateX(-50%);
  font: 400 clamp(21px, 2.1vw, 30px)/1.2 var(--serif);
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .95), 0 0 4px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.skip { position: absolute; right: 26px; bottom: 96px; }

.tour {
  position: absolute;
  left: 50%;
  top: 74px;
  width: min(780px, 58%);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--glass-strong);
  border: 1px solid var(--hair);
  z-index: 4;
}
.tour[hidden] { display: none; }
.tour-text { flex: 1; min-width: 0; }
.tour-text strong { font: 400 20px var(--serif); }
.tour-text p { font-size: 14px; color: #cfe2ea; }
.tour-actions { display: flex; gap: 6px; flex: none; }
.tour-actions .ghost { padding: 4px 11px; }

/* Title and summary */

.intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7vw;
  background: linear-gradient(90deg, rgba(1, 6, 12, .86) 0%, rgba(1, 6, 12, .45) 48%, transparent 76%);
  transition: opacity .8s;
  z-index: 5;
}
.intro.leaving { opacity: 0; pointer-events: none; }
.intro-title { margin: 6px 0 2px -.04em; padding-bottom: .2em; font: italic 400 clamp(84px, 13vw, 210px)/1 var(--serif); background: linear-gradient(175deg, #effdfb 18%, #76dfe6 55%, #4f6fd8 95%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }
.intro-line { font: 400 clamp(21px, 2.3vw, 34px)/1.2 var(--serif); max-width: 22em; color: #dcebef; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.intro-note { margin-top: 18px; font: 12px var(--mono); color: var(--dim); }

.summary {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 90%);
  transform: translate(-50%, -50%);
  padding: 24px 28px;
  background: linear-gradient(160deg, rgba(10, 30, 58, .92), rgba(3, 9, 19, .94));
  border: 1px solid var(--hair-strong);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  z-index: 4;
}
.summary[hidden] { display: none; }
.summary h2 { margin: 3px 0 12px; font: 400 34px/1.1 var(--serif); }
.summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 14px; padding: 8px 0; border-top: 1px solid var(--hair); }
.summary-row .who { font-weight: 600; color: var(--c); }
.summary-row .count { font: 400 36px/1 var(--serif); color: var(--c); }
.summary-row .count small { font: 12px var(--mono); color: var(--dim); }
.summary-row .detail { grid-column: 1 / -1; font: 12px var(--mono); color: var(--soft); }
.summary-note { margin-top: 12px; color: var(--soft); font-size: 14px; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.summary .primary { padding: 7px 18px; }

/* Robot panels */

.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.pane { --pane-glow: color-mix(in srgb, var(--pane-color) 30%, transparent); position: relative; min-width: 0; padding: 12px 14px; background: linear-gradient(165deg, rgba(10, 29, 56, .62), rgba(3, 10, 21, .72)); border-top: 1px solid var(--pane-color); box-shadow: 0 -14px 26px -24px var(--pane-color); }
.pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--pane-color); box-shadow: 0 0 10px var(--pane-color); flex: none; }
.planner { min-width: 0; flex: 0 1 auto; font-weight: 600; font-size: 16px; border-bottom-color: transparent; color: var(--pane-color) !important; }
.status { margin-left: auto; font: 11px var(--mono); color: var(--soft); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }

.map-wrap { width: min(100%, 62vh); margin: 0 auto; aspect-ratio: 1; }
.map { width: 100%; height: 100%; display: block; cursor: crosshair; }
.readout, .legend { margin-top: 6px; font: 11px/1.4 var(--mono); color: var(--dim); min-height: 1.4em; overflow-wrap: anywhere; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px 10px; margin: 8px 0; }
.stats dt { color: var(--dim); font-size: 12px; line-height: 1.15; }
.stats dd { margin: 1px 0 0; font: 15px/1.2 var(--mono); }
.stat-main { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stat-main dd { font: 400 44px/.95 var(--serif); color: var(--pane-color); text-shadow: 0 0 22px var(--pane-glow); }
.stat-main small { font: 13px var(--mono); color: var(--dim); }

.energy { position: relative; height: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.energy i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255, 255, 255, .35), var(--pane-color)); }
.energy b { position: absolute; top: 0; bottom: 0; left: 0; background: var(--hidden); }

.hud { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--hair); }
.hud h3 { font: 11px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.hud p { margin-top: 2px; font-size: 13px; }
.hud .hud-meta, .hud .hud-note { font: 11px var(--mono); color: var(--soft); }
.hud img { display: block; width: 100%; max-height: 136px; margin: 5px 0; object-fit: cover; filter: saturate(1.05); box-shadow: inset 0 0 0 1px var(--hair); }
.observation-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; }
.observation-photos figure { min-width: 0; margin: 0; }
.observation-photos img { height: 100px; object-fit: contain; }
.observation-photos figcaption { font: 10px/1.3 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
#observation-inspector { position: fixed; z-index: 30; right: 10px; top: 65px; bottom: 76px; width: min(430px, 42vw); overflow: auto; padding: 20px; background: rgba(5,21,35,.98); border: 1px solid #3b8d98; box-shadow: 0 8px 40px #0008; }
#observation-inspector[hidden] { display:none; }
#observation-inspector h2, #observation-inspector h3 { margin:12px 0; }
#observation-inspector p, #observation-inspector li { font-size:14px; line-height:1.5; margin:9px 0; }
#observation-inspector img { width:100%; object-fit:contain; max-height:220px; }
#observation-inspector pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
#observation-inspector button { padding:7px 10px; margin:4px; border:1px solid #3b8d98; }
#observation-inspector dt { font-size:12px; opacity:.8; } #observation-inspector dd { margin:0 0 7px; }
.inspector-close { float:right; } .inspector-references { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.inspector-references figure { margin:0; } .inspector-references figcaption { font-size:12px; overflow-wrap:anywhere; }
.inspector-open.view-3d .panes { opacity:0; pointer-events:none; }
.inspector-open.view-3d .pane { pointer-events:none; }
@media(max-width:760px) { #observation-inspector { top:15vh; bottom:0; right:0; width:100%; box-sizing:border-box; } .inspector-open.view-3d .panes { right:auto; } }

.story { margin-top: 10px; padding: 10px 12px 12px; background: rgba(160, 210, 235, .06); border-left: 2px solid var(--pane-color); border-radius: 2px; }
.story.fresh { animation: story-in .9s ease-out; }
@keyframes story-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.story p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--text); }
.story .story-kicker { margin: 0; font: 11px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.story .story-headline { margin-top: 2px; font: 400 21px/1.2 var(--serif); color: var(--text); }
.story .story-headline.new { color: var(--pane-color); }
.story .story-label { margin-top: 10px; font: 11px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .story.fresh { animation: none; } }
.why { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--hair); font: 11px/1.5 var(--mono); color: var(--soft); }
.why summary { cursor: pointer; color: var(--dim); letter-spacing: .04em; }
.why div { display: flex; justify-content: space-between; gap: 12px; }

.chip { display: inline-block; margin: 2px 4px 0 0; padding: 0 6px; font: 11px/1.6 var(--mono); background: rgba(160, 210, 235, .12); border-radius: 2px; }
.chip.new { background: var(--pane-color); color: #03121a; }
.chip.unknown { background: rgba(182, 147, 255, .24); color: #e4d7ff; }
.chip.habitat { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft); }
.chip.habitat-new { background: #cfe9ff; color: #03121a; }
.habitat-key { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; white-space: nowrap; }
.habitat-key i { width: 10px; height: 10px; flex: none; }

/* 3D layout: the ocean fills the screen and instruments float over it */

.view-3d { padding-bottom: 0; }
.view-3d .topbar { position: absolute; inset: 0 0 auto 0; border-bottom: 0; background: linear-gradient(180deg, rgba(1, 6, 12, .82), transparent); padding-bottom: 26px; }
.view-3d main { max-width: none; padding: 0; }
.view-3d .console { position: relative; height: 100vh; min-height: 560px; }
.view-3d .stage { position: absolute; inset: 0; }
.view-3d .map-wrap, .view-3d .readout, .view-3d .legend { display: none; }
.view-3d .panes {
  position: absolute;
  top: 70px;
  bottom: 84px;
  right: 18px;
  width: clamp(232px, 20vw, 300px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  pointer-events: none;
}
/* Each robot gets half the column and scrolls inside it, so neither panel is ever off-screen. */
.view-3d .pane { flex: 0 1 50%; min-height: 0; overflow-y: auto; scrollbar-width: thin; pointer-events: auto; background: var(--glass); backdrop-filter: blur(9px); padding: 9px 12px; }
.view-3d .stage-note, .view-3d .lower, .view-3d .bench, .view-3d .provenance { margin-left: 22px; margin-right: 22px; }

.view-3d .stage-note { margin-top: 12px; color: var(--dim); font-size: 12px; }

/* Hide the instruments during the title and the descent */
.pre-dive .topbar, .pre-dive .panes, .pre-dive .transport, .pre-dive .gauge, .pre-dive .inset, .pre-dive .stage-foot,
.diving .topbar, .diving .panes, .diving .inset, .diving .stage-foot, .diving .transport { opacity: 0; pointer-events: none; }
/* Each panel turns clicks back on for itself, so switch them off too, or the invisible
   panels sit on top of Skip descent and swallow the click. */
.pre-dive .pane, .diving .pane { pointer-events: none; }
.diving .skip { z-index: 9; }
.pre-dive.view-3d, .diving.view-3d { overflow: hidden; height: 100vh; }

/* Evidence below */

.lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; scroll-margin-top: 80px; }
.chart-card figcaption { font: 400 22px/1.2 var(--serif); margin-bottom: 8px; }
#chart { width: 100%; height: 250px; display: block; }
.feeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.feed { min-width: 0; display: flex; flex-direction: column; height: 292px; border-top: 1px solid var(--pane-color); padding-top: 7px; }
.feed h2 { margin-bottom: 4px; font: 11px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.feed ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.feed li { padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.feed .meta { display: block; font: 11px var(--mono); color: var(--dim); }
.feed .none { color: var(--dim); }
.feed img { display: block; max-width: 100%; max-height: 120px; margin-top: 4px; }

.bench { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair-strong); scroll-margin-top: 80px; }
.bench[hidden] { display: none; }
.bench-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.bench-head h2 { margin-right: auto; font: 400 36px/1.1 var(--serif); }
.bench-note { color: var(--soft); font-size: 14px; margin: 8px 0; }

.forest { display: grid; gap: 1px; margin: 12px 0 18px; }
.forest-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(120px, 2fr) minmax(240px, 1.2fr); align-items: center; gap: 12px; padding: 4px 0; font-size: 14px; }
.forest-track { position: relative; height: 16px; }
.forest-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--hair-strong); }
.forest-ci { position: absolute; top: 7px; height: 2px; background: var(--ci); box-shadow: 0 0 8px var(--ci); }
.forest-dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ci); box-shadow: 0 0 10px var(--ci); }
.forest-value { font: 12px var(--mono); }
.forest-value b { font: 600 13px var(--sans); color: var(--ci); }
.ci-higher { --ci: #5ef2d6; }
.ci-lower { --ci: #ff8fb4; }
.ci-unclear { --ci: #8fa6b7; }

.table-wrap { overflow-x: auto; }
#bench-table { border-collapse: collapse; width: 100%; font: 13px var(--mono); }
#bench-table th, #bench-table td { padding: 5px 9px; border-top: 1px solid var(--hair); text-align: right; white-space: nowrap; }
#bench-table th { color: var(--dim); font: 400 13px var(--sans); }
#bench-table th:first-child, #bench-table td:first-child { text-align: left; font-family: var(--sans); }
#bench-table td { color: var(--soft); }
#bench-table .abyss-col { color: var(--glow); }
#bench-table td.best { color: var(--text); font-weight: 700; box-shadow: inset 0 -1px 0 var(--glow); }

.provenance { color: var(--dim); font-size: 12px; margin-top: 18px; padding-bottom: 90px; }

/* Transport */

.transport {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 14px;
  background: linear-gradient(0deg, rgba(1, 6, 12, .92) 45%, transparent);
  z-index: 6;
  transition: opacity .6s;
}
.icon { padding: 5px; font-size: 11px; color: var(--soft); letter-spacing: -.1em; }
.icon:hover { color: var(--glow); }
.play { min-width: 66px; padding: 6px 14px; border-radius: 999px; font-weight: 600; background: rgba(94, 242, 214, .12); box-shadow: inset 0 0 0 1px var(--glow); color: var(--glow); }
.timeline { position: relative; flex: 1; min-width: 60px; height: 26px; display: flex; align-items: center; }
.ticks { position: absolute; inset: 0; pointer-events: none; }
.ticks i { position: absolute; width: 1px; background: var(--c); opacity: .85; }
.ticks i.top { top: 2px; height: 7px; }
.ticks i.bottom { bottom: 2px; height: 7px; }
#scrub { appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; position: relative; }
#scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #8fe3e8, #2a84a8 30%, #33439a 70%, #38245e); }
#scrub::-moz-range-track { height: 2px; background: linear-gradient(90deg, #8fe3e8, #2a84a8 30%, #33439a 70%, #38245e); }
#scrub::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -5.5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 12px var(--glow); }
#scrub::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 12px var(--glow); }
#clock { font: 12px var(--mono); color: var(--soft); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 1340px) {
  .brand span { display: none; }
  .topbar { gap: 8px 12px; }
  .field select { max-width: 170px; }
  .layers span { padding: 3px 6px; }
  .topbar .ghost { padding: 4px 10px; font-size: 14px; }
}

@media (max-width: 1050px) {
  .view-3d .topbar .field { display: none; }
  .lower { grid-template-columns: minmax(0, 1fr); }
  .tour { width: 74%; }
  .caption { width: 76%; }
  .stage-foot { display: none; }
}

@media (max-width: 760px) {
  body, .view-3d { padding-bottom: 118px; }
  .pre-dive.view-3d, .diving.view-3d { padding-bottom: 0; }
  .topbar, .view-3d .topbar { position: static; background: none; padding: 10px 14px; }
  .brand { width: 100%; }
  .layers { flex-wrap: wrap; }
  .view-3d .console { height: auto; min-height: 0; }
  .view-3d .stage { position: relative; height: 66vh; min-height: 380px; }
  .pre-dive.view-3d .console, .diving.view-3d .console { height: 100vh; }
  .pre-dive.view-3d .stage, .diving.view-3d .stage { position: absolute; height: 100%; }
  .view-3d .panes { position: static; width: auto; margin: 10px 14px 0; overflow: visible; }
  .panes { grid-template-columns: minmax(0, 1fr); }
  .gauge { left: 12px; top: 18px; bottom: 18px; }
  .inset { width: 118px; left: auto; right: 8px; bottom: 8px; }
  #inset-caption { display: none; }
  .tour { position: static; transform: none; width: auto; margin: 8px 14px; flex-direction: column; align-items: stretch; }
  .caption { top: 7%; width: 86%; }
  .skip { right: 12px; bottom: 14px; }
  .forest-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0; }
  .feeds { grid-template-columns: minmax(0, 1fr); }
  .feed { height: 220px; }
  .transport { flex-wrap: wrap; padding: 8px 14px 12px; }
  .timeline { order: 5; flex-basis: 100%; }
  .speed { margin-left: auto; }
  .summary { position: fixed; z-index: 8; max-height: 88vh; overflow: auto; }
  .intro { padding: 0 22px; }
}

.new-ocean { padding: 4px 10px; font: 12px var(--mono); background: rgba(160, 210, 235, .1); border: 1px solid var(--hair); border-radius: 999px; cursor: pointer; }
.new-ocean:hover { background: rgba(160, 210, 235, .2); }

/* Mission workspace: a single observation scroll and persistent instruments. */
:root { --dim: #a0bdca; --sidebar-width: 390px; }
body { font-family: system-ui, sans-serif; font-size: 15px; }
[hidden], .pane[hidden] { display: none !important; }
button, select, summary { touch-action: manipulation; }
summary { cursor: pointer; }
.topbar { flex-wrap: wrap; gap: 8px 16px; }
.layers { align-items: center; border-left: 1px solid var(--hair-strong); padding-left: 10px; }
.layers legend { position: static; clip-path: none; float: left; padding: 0 6px; font-size: 12px; color: var(--soft); }
.layers span { border-radius: 5px; }
.layers input:checked + span { background: #5ef2d622; box-shadow: inset 0 0 0 1px #5ef2d655; }
.mission-sidebar { min-width: 0; background: #061722f2; border: 1px solid var(--hair); }
.sidebar-head { position: sticky; top: 0; z-index: 3; background: #071923; padding: 16px 18px 0; border-bottom: 1px solid var(--hair); }
.replay-label { font-size: 12px; color: var(--soft); margin-bottom: 10px; }
#comparison table { border-collapse: collapse; width: 100%; font-size: 13px; }
#comparison th { text-align: left; font-weight: 500; padding: 6px 0; }
#comparison th:not(:first-child), #comparison td { text-align: right; }
#comparison td { font: 14px var(--mono); padding: 6px 0 6px 10px; }
#comparison tbody tr { border-top: 1px solid var(--hair); }
#robot-tabs { display: flex; gap: 6px; margin-top: 12px; }
#robot-tabs button { flex: 1; padding: 12px; color: var(--robot-color); border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
#robot-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--robot-color) 12%, transparent); border-color: var(--robot-color); }
.panes { display: block; margin: 0; }
.pane { padding: 18px; box-shadow: none; border: 0; }
.pane .stat-main, .pane .stats > div:has(.surveys), .pane .stats > div:has(.left) { display: none; }
.pane-head { margin-bottom: 16px; }
.pane .status { font-size: 11px; }
.story p, .hud p { font: 14px/1.6 system-ui, sans-serif; }
.story .story-headline { font: 24px/1.2 var(--serif); }
.story details { margin-top: 12px; }
.story summary { color: var(--glow); font-size: 14px; }
.why { font-size: 12px; }
.hud { margin-top: 20px; }
.hud h3 { font-size: 12px; color: var(--soft); }
.observation-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: none; overflow: visible; margin: 12px 0; }
.observation-photos img { height: 130px; max-height: none; border: 1px solid var(--hair); background: #020d16; border-radius: 6px; }
.observation-photos figcaption { font: 13px/1.5 system-ui, sans-serif; }
.hud .hud-meta, .hud .hud-note { font: 12px/1.5 system-ui, sans-serif; color: var(--soft); }
.chip { font-size: 12px; padding: 2px 6px; }
.camera-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-foot { max-width: 65%; }
#stage-legend { font-size: 12px; }
.evidence-drawer { background: #06131ff5; border-top: 1px solid var(--hair-strong); }
.evidence-drawer > summary { padding: 12px 20px; color: var(--glow); font-size: 15px; }
.evidence-drawer > summary span { color: var(--soft); font-size: 12px; margin-left: 12px; }
.evidence-body { padding: 0 20px 20px; }
.evidence-body .lower { margin: 12px 0; }
.evidence-body .stage-note, .evidence-body .provenance { margin: 12px 0; padding: 0; font-size: 13px; line-height: 1.6; }
.evidence-body .method { padding: 16px 0; border-top: 1px solid var(--hair); }
.feed h2 { font-size: 13px; }
.feed ol { overflow: visible; }
.feed { height: auto; }
.feed li { font-size: 14px; }
.feeds { align-items: start; }
.transport { min-height: 78px; background: #04121bf5; border-top: 1px solid var(--hair); gap: 12px; }
.transport button { min-height: 40px; }
#mission-report { border: 1px solid var(--glow); border-radius: 7px; padding: 8px 12px; color: var(--glow); }
.report-hint { font-size: 11px; color: var(--soft); max-width: 90px; }
.timeline, #scrub { height: 48px; }
#scrub::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
#scrub::-webkit-slider-runnable-track { height: 4px; }
#scrub::-moz-range-thumb { width: 18px; height: 18px; }
#scrub::-moz-range-track { height: 4px; }
.ticks { z-index: 2; }
.ticks button { pointer-events: auto; position: absolute; width: 10px; min-height: 12px; height: 12px; padding: 0; transform: translateX(-50%); background: var(--c); border: 2px solid #061722; border-radius: 3px; }
.ticks button.top { top: 0; }
.ticks button.bottom { bottom: 0; }
.ticks button:focus-visible, .ticks button:hover { z-index: 3; outline: 2px solid white; }
.inspector-open.view-3d .panes { opacity: 1; }
@media (min-width: 901px) {
  body { height: 100dvh; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
  .topbar, .view-3d .topbar { position: relative; inset: auto; flex: none; min-height: 68px; padding: 10px 18px; background: #04141df5; border-bottom: 1px solid var(--hair); }
  main, .view-3d main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
  .console, .view-3d .console { flex: 1; height: auto; min-height: 0; position: relative; display: flex; }
  .view-3d .stage { position: relative; inset: auto; flex: 1; min-width: 0; }
  .mission-sidebar { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
  .view-3d .mission-sidebar { width: var(--sidebar-width); flex: none; }
  .view-3d .panes { position: static; width: auto; margin: 0; display: block; overflow: visible; pointer-events: auto; }
  .view-3d .pane { overflow: visible; height: auto; min-height: auto; padding: 18px; background: transparent; backdrop-filter: none; }
  body:not(.view-3d) .mission-sidebar { width: 100%; }
  body:not(.view-3d) .pane { max-width: 1100px; margin: auto; }
  body:not(.view-3d) .map-wrap { width: min(55vh, 100%); float: left; margin-right: 24px; }
  .transport { position: relative; inset: auto; flex: none; }
  .evidence-drawer { flex: none; z-index: 8; }
  .evidence-drawer[open] .evidence-body { max-height: 36vh; overflow-y: auto; overscroll-behavior: contain; }
  .view-3d .lower, .view-3d .bench { margin: 12px 0; }
  .inset { width: 150px; left: 60px; bottom: 20px; }
  .stage-foot { left: 226px; bottom: 20px; display: flex; }
  .gauge { left: 12px; top: 30px; bottom: 200px; }
  .view-3d .notice { top: 8px; left: 70px; right: 410px; z-index: 4; }
  .pre-dive .mission-sidebar, .diving .mission-sidebar { display: none; }
  .pre-dive .evidence-drawer, .diving .evidence-drawer { display: none; }
  .pre-dive .topbar, .pre-dive .transport { display: none; }
  .caption, .tour { width: 80%; }
}
@media (max-width: 1100px) and (min-width: 901px) { :root { --sidebar-width: 350px; } .report-hint { display: none; } .topbar .brand { width: auto; } }
@media (max-width: 900px) {
  body, .view-3d { height: auto; overflow: auto; padding-bottom: 150px; }
  main, .view-3d main { padding: 0; }
  .topbar, .view-3d .topbar { position: static; background: #04141d; padding: 12px; }
  .brand { width: 100%; }
  .view-3d .topbar .field { display: inline-flex; }
  .view-3d .console { height: auto; min-height: 0; }
  .view-3d .stage { position: relative; height: 55vh; min-height: 350px; }
  .mission-sidebar { margin: 0; max-height: 65vh; overflow-y: auto; overscroll-behavior: contain; }
  .view-3d .panes { position: static; width: auto; display: block; margin: 0; overflow: visible; pointer-events: auto; }
  .view-3d .pane { overflow: visible; padding: 18px; }
  .sidebar-head { top: 0; }
  .stage-foot { display: flex; left: 16px; bottom: 16px; max-width: 65%; }
  .stage-foot > .field, #stage-legend { display: none; }
  .camera-actions .ghost { padding: 6px 9px; font-size: 12px; }
  .transport { position: fixed; flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .transport .timeline { order: 5; flex-basis: 100%; }
  #clock { font-size: 10px; }
  .report-hint { display: none; }
  .transport .speed { margin-left: auto; }
  .transport button { font-size: 13px; }
  .lower { display: block; }
  .feeds { margin-top: 20px; }
  #observation-inspector { top: 3vh; bottom: 150px; width: min(100%, 460px); right: 0; }
  .pre-dive .mission-sidebar, .pre-dive .evidence-drawer, .diving .mission-sidebar { display: none; }
  .pre-dive .stage-foot { display: none; }
  .view-3d .notice { position: static; margin: 8px; }
}
/* Notices belong to the scene, so dataset terms never collide with the toolbar. */
.view-3d .console > .notice { position: absolute; top: 8px; left: 70px; right: calc(var(--sidebar-width) + 16px); max-height: 90px; overflow-y: auto; background: #071923f5; z-index: 6; }
.story .decision-lead { color: #cce3e8; }
@media (max-width: 900px) { .view-3d .console > .notice { position: relative; top: auto; left: auto; right: auto; margin: 8px; font-size: 12px; } }
/* Keep decisions readable throughout the update animation. */
@keyframes story-in { from { opacity: .8; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.transport { background: #04121b; }

/* Phone layout: the 3D view stays pinned while the mission panel scrolls beneath it. */
@media (max-width: 760px) {
  :root { --stage-h: 46svh; }
  html { -webkit-text-size-adjust: 100%; }
  body, .view-3d { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .topbar, .view-3d .topbar { gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .brand { display: flex; align-items: center; gap: 10px; width: 100%; }
  .brand h1 { font-size: 30px; }
  .topbar .field { display: flex; flex: 1 1 0; min-width: 0; gap: 8px; align-items: center; }
  .topbar .field select { width: 100%; max-width: none; min-width: 0; min-height: 36px; }
  .new-ocean { min-height: 36px; white-space: nowrap; }
  .topbar .layers { flex-wrap: nowrap; overflow-x: auto; width: 100%; min-width: 0; box-sizing: border-box; position: relative; border-left: 0; padding: 0; margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topbar .layers::-webkit-scrollbar { display: none; }
  .topbar .layers label, .layers legend { flex: none; }
  .layers span { display: inline-block; padding: 7px 10px; }
  #tour-start { min-height: 36px; }
  body.view-3d:not(.pre-dive):not(.diving) .stage { position: sticky; top: 0; z-index: 6; height: var(--stage-h); min-height: 250px; box-shadow: 0 8px 18px #000a; }
  .gauge { top: 12px; bottom: 56px; width: 6px; }
  .gauge .mark { font-size: 10px; left: 12px; }
  .gauge .bot b { font-size: 11px; left: 18px; }
  .inset { width: 104px; right: 8px; bottom: 8px; padding: 4px; }
  .stage-foot { left: 10px; bottom: 10px; max-width: calc(100% - 128px); }
  .camera-actions .ghost { padding: 6px 8px; font-size: 12px; }
  .mission-sidebar { max-height: none; overflow: visible; border-left: 0; border-right: 0; }
  .sidebar-head { position: static; padding: 14px 14px 0; }
  .view-3d .pane, .pane { padding: 16px 14px; }
  .story .story-headline { font-size: 22px; }
  .observation-photos img { height: 110px; }
  .evidence-drawer > summary { padding: 14px; }
  .evidence-body { padding: 0 14px 18px; }
  .evidence-drawer > summary span { display: block; margin: 4px 0 0; }
  .transport { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 2px 8px; min-height: 0; }
  .transport button { min-height: 40px; }
  .transport .icon { min-width: 40px; }
  .transport .ticks button { min-height: 10px; height: 10px; min-width: 0; }
  #mission-report { padding: 6px 10px; font-size: 12px; }
  .transport .timeline, .transport #scrub { height: 40px; }
  #clock { order: 6; font-size: 11px; }
  .transport .speed { order: 7; margin-left: auto; font-size: 12px; }
  .summary { inset: auto 8px calc(120px + env(safe-area-inset-bottom)) 8px; width: auto; max-height: calc(100svh - 140px); transform: none; padding: 18px; z-index: 12; }
  .summary-actions { flex-direction: column; align-items: stretch; }
  #observation-inspector { top: 12svh; bottom: 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }
  .pre-dive .topbar, .diving .topbar { display: none; }
  body.pre-dive, body.diving { padding-bottom: 0; }
  .pre-dive .evidence-drawer, .diving .evidence-drawer, .diving .mission-sidebar { display: none; }
  .pre-dive.view-3d .console, .diving.view-3d .console { height: 100svh; }
  .diving .skip { bottom: calc(18px + env(safe-area-inset-bottom)); }
}