/* ABYSS — ocean gradient synced to depth, lume green only for meter/callouts/glow */
:root {
  --bg: #0E3A5C; /* start depth; app.js interpolates body background */
  --ink: #E9EDEA;
  --accent: #B8FF9E;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "IBM Plex Mono", monospace;
}

body { background: #0E3A5C; transition: none; }
#loader { background: #0E3A5C; }

#depth-meter {
  position: fixed; top: 2rem; right: 2rem; z-index: 50;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.25em;
  color: var(--accent); opacity: 0; transition: opacity 0.6s ease;
}
#depth-meter.on { opacity: 0.9; }

.callout strong { color: var(--accent); }
.on-black { background: #000; }
footer { background: #000; }