:root { --ink: #f2f1e6; --mute: #c3ccba; --clump: #a9d8b0; --gold: #e5c18a; }
html, body { background: #111d1b; font-family: system-ui, sans-serif; }
canvas { touch-action: none; outline-offset: -5px; }
.ui { background: linear-gradient(180deg, #0b191cd4 0, #0b191c28 150px, transparent 30%); }
header { top: 26px; left: 32px; font-size: 10px; text-shadow: none; letter-spacing: .2em; }
.mark { top: 23px; right: 28px; border-color: #dcc29655; border-radius: 5px; padding: 7px 10px; background: #0a161c9c; font-size: 9px; letter-spacing: .1em; }
.copy { left: 32px; top: 59px; max-width: 360px; }
h1 { font: 400 clamp(28px, 2.7vw, 39px)/1.08 Georgia, serif; letter-spacing: -.035em; margin-bottom: 12px; }
h1 em { color: #d3dcb2; }
.copy p { font: 12px/1.6 system-ui, sans-serif; max-width: 290px; color: #d0d6c7; }
.scene-tools { position: absolute; top: 69px; right: 28px; display: flex; gap: 6px; }
.scene-tools button, .scene-tools select { border: 1px solid #d8dec339; background: #102220d9; color: var(--ink); font: 11px system-ui; border-radius: 6px; padding: 9px 11px; cursor: pointer; }
.scene-tools button[aria-pressed="true"] { border-color: var(--gold); }
.source-note { position: absolute; bottom: 174px; left: 32px; font: 10px/1.6 ui-monospace, monospace; color: #e2e4d5; max-width: calc(100% - 64px); text-shadow: 0 1px 5px #000; }
.source-note::before { content: ''; display: inline-block; height: 5px; width: 5px; background: var(--gold); border-radius: 50%; margin-right: 8px; }
.controls { position: absolute; bottom: 20px; left: 24px; right: 24px; background: #0b1c1deb; border: 1px solid #d2dec126; border-radius: 12px; box-shadow: 0 12px 45px #0005; backdrop-filter: blur(12px); padding: 15px 18px 12px; }
.year, html.embed .year { position: static; gap: 6px; }
.year-row { gap: 12px; }
.year .phase { min-width: 54px; font-size: 10px; }
.year input[type="range"] { min-width: 30px; cursor: ew-resize; accent-color: var(--gold); }
.year .marks { margin: 0 42px 4px 170px; font-size: 9px; opacity: .65; text-transform: uppercase; }
.hud { position: static; gap: 5px; border-top: 1px solid #d2dec120; padding-top: 10px; }
.hud button, .year button, .views button { font: 11px/1.3 system-ui, sans-serif; padding: 7px 10px; border: 1px solid transparent; box-shadow: none !important; background: #cfdec20a; font-weight: 500; }
.hud button[aria-pressed="true"] { background: #a6cda020; border-color: #b4d59a60; color: #e0edbf; }
.views { margin-left: 10px; padding-left: 12px; border-left: 1px solid #d2dec126; gap: 2px; }
.views button[aria-pressed="true"] { background: #e5c18a18; border-color: #e5c18a65; color: var(--gold); }
dl { font-size: 10px; gap: 12px; margin-right: 0; }
.hud a { font-size: 10px; }
.depth-legend { position: absolute; left: 30px; top: 49%; color: #e3dcc5; font: 10px/1.8 ui-monospace, monospace; border-left: 1px solid #e3dcc560; padding-left: 10px; text-shadow: 0 1px 5px #000; pointer-events: none; }
.depth-legend b { display: block; font-weight: 400; color: var(--gold); letter-spacing: .1em; font-size: 9px; text-transform: uppercase; }
.depth-legend span { color: #c2c6b6; font: 10px system-ui; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#webgl-fallback { position: absolute; inset: 20%; z-index: 5; padding: 24px; background: #102220; border: 1px solid #e5c18a55; border-radius: 12px; line-height: 1.6; }
[hidden] { display: none !important; }
html.embed header { max-width: none; }
html.embed .scene-tools { top: 62px; }
html.embed .depth-legend { top: 30%; }
@media(max-width: 1000px) {
  .controls { left: 12px; right: 12px; bottom: 12px; padding: 12px; }
  .hud dl { flex-basis: 100%; margin-top: 7px; }
  .source-note { bottom: 193px; left: 25px; font-size: 9px; }
  .copy { max-width: 245px; }
  .copy p { max-width: 220px; font-size: 11px; }
  .depth-legend { display: none; }
}
@media(max-width: 600px) {
  header { top: 18px; left: 16px; font-size: 8px; }
  .mark { top: 42px; left: 16px; right: auto; padding: 4px 6px; font-size: 7px; }
  .copy { top: 78px; left: 16px; }
  h1 { font-size: 27px; }
  .copy p { display: none; }
  .scene-tools, html.embed .scene-tools { top: 15px; right: 12px; gap: 4px; }
  .scene-tools button, .scene-tools select { padding: 7px; font-size: 9px; }
  .scene-tools #fullscreen { display: none; }
  .hud { gap: 4px; }
  .hud button, .views button { padding: 8px; font-size: 10px; }
  .views { flex-basis: 100%; border-left: 0; margin: 2px 0 0; padding: 0; }
  .year .marks { margin: 0 37px 4px 85px; font-size: 7px; }
  .year .phase { display: none; }
  .year button { padding: 8px; font-size: 10px; }
  .source-note { bottom: 224px; left: 18px; max-width: calc(100% - 36px); font-size: 8px; }
  dl { gap: 9px; font-size: 9px; }
  .hud a { display: none; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* The replay dock owns its space: never paint it over the soil cutaway.
   The camera is resized to the remaining viewport, including in an iframe. */
body { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.scene-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.scene-viewport:has(.ui[hidden]) + .controls { display: none; }
.controls {
  position: relative; inset: auto; min-width: 0; margin: 0;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-top: 1px solid #d2dec126; border-radius: 0;
  background: #0b1c1d; box-shadow: none; backdrop-filter: none;
}
.source-note {
  position: static; margin: 8px 0 0; max-width: none;
  font-size: 9px; text-shadow: none; overflow-wrap: anywhere;
}