:root {
  /* DESIGN typography tokens: IBM Plex Sans** in 500/600 with slightly tight tracking for engineered confidence. Roboto Mono** in 400/500 */
  --abyss: #101820;
  --fog: #D7DEE5;
  --pressure: #6F8291;
  --cyan: #39D6E8;
  --mint: #68F0C8;
  --glass: #EEF6F8;
  --violet: #8B7CFF;
  --font-body: "Noto Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --design-sans-token: "Sans**";
  --design-mono-token: "Mono**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fog);
  background: var(--abyss);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: repeating-linear-gradient(180deg, rgba(238,246,248,0.035) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.fixed-atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(57,214,232,0.18), transparent 36vw),
    radial-gradient(circle at 84% 72%, rgba(104,240,200,0.11), transparent 34vw),
    linear-gradient(180deg, #6F8291 0%, #2f4350 22%, #101820 73%);
}

.contour-field {
  position: absolute;
  inset: -12%;
  opacity: .34;
  background-image:
    radial-gradient(ellipse at 24% 30%, transparent 0 12%, rgba(215,222,229,.25) 12.4% 12.8%, transparent 13.2% 19%, rgba(57,214,232,.14) 19.3% 19.7%, transparent 20.2%),
    radial-gradient(ellipse at 76% 62%, transparent 0 10%, rgba(215,222,229,.18) 10.4% 10.7%, transparent 11.2% 17%, rgba(104,240,200,.13) 17.3% 17.7%, transparent 18.1%),
    linear-gradient(118deg, transparent 48%, rgba(238,246,248,.09) 49%, transparent 50%);
  filter: blur(.2px);
}

.drift-map {
  position: absolute;
  width: 112vw;
  height: 110vh;
  left: -6vw;
  top: -3vh;
  fill: none;
  stroke: rgba(215,222,229,.32);
  stroke-width: 1.2;
}

.caustic-band {
  position: absolute;
  width: 130vw;
  height: 18vh;
  left: -15vw;
  opacity: .14;
  background: linear-gradient(95deg, transparent, rgba(238,246,248,.46), transparent 62%);
  transform: skewY(-9deg);
  animation: currentShift 12s ease-in-out infinite alternate;
}

.caustic-a { top: 15vh; }
.caustic-b { top: 54vh; animation-duration: 16s; opacity: .1; }

.depth-gauge {
  position: fixed;
  left: clamp(18px, 2.6vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: stretch;
  font-family: var(--font-mono);
}

.gauge-label {
  writing-mode: vertical-rl;
  letter-spacing: .28em;
  color: var(--cyan);
  font-size: 11px;
}

.gauge-track {
  position: absolute;
  left: 39px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(215,222,229,.28);
}

#depthIndicator {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 34px;
  border-radius: 4px;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  transition: top .25s ease;
}

.gauge-tick {
  grid-column: 2;
  display: block;
  width: 74px;
  margin: 15px 0;
  padding: 0 0 0 22px;
  border: 0;
  border-left: 17px solid rgba(215,222,229,.42);
  background: transparent;
  color: rgba(215,222,229,.62);
  text-align: left;
  font: 500 11px var(--font-mono);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.gauge-tick.active {
  color: var(--glass);
  border-left-color: var(--mint);
  transform: translateX(5px);
}

.depth-readout {
  position: fixed;
  right: clamp(18px, 3vw, 52px);
  top: 28px;
  z-index: 20;
  padding: 10px 14px;
  border: 1px solid rgba(57,214,232,.42);
  background: rgba(16,24,32,.48);
  box-shadow: inset 0 0 24px rgba(57,214,232,.08);
  color: var(--glass);
  font: 500 12px var(--font-mono);
  letter-spacing: .08em;
}

main { position: relative; z-index: 2; }

.stratum {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) clamp(26px, 8vw, 120px);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.surface { background: linear-gradient(180deg, rgba(238,246,248,.18), rgba(111,130,145,.18) 50%, rgba(16,24,32,.08)); }
.midwater { background: linear-gradient(180deg, rgba(16,24,32,.06), rgba(16,24,32,.48)); }
.current { background: linear-gradient(180deg, rgba(16,24,32,.40), rgba(18,35,43,.76)); }
.archive { background: linear-gradient(180deg, rgba(16,24,32,.78), rgba(16,24,32,.93)); }
.signal { background: radial-gradient(circle at 50% 54%, rgba(104,240,200,.10), transparent 28vw), #101820; place-items: center; }

.waterline {
  position: absolute;
  left: 0;
  right: 0;
  top: 34vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--glass), transparent);
  box-shadow: 0 0 28px rgba(57,214,232,.42);
}

.surface-mark {
  width: min(780px, 78vw);
  margin-left: clamp(46px, 12vw, 170px);
  position: relative;
}

.mono-tag {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--mint);
  font: 500 12px var(--font-mono);
  letter-spacing: .12em;
}

.signal-title, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--glass);
}

.signal-title {
  font-size: clamp(72px, 14vw, 190px);
  line-height: .84;
  text-shadow: 0 0 28px rgba(57,214,232,.2);
}

.sonar-line {
  position: absolute;
  left: -5%;
  top: 49%;
  height: 2px;
  width: 112%;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--mint), transparent);
  box-shadow: 0 0 18px var(--cyan);
  animation: sonarSweep 4s ease-in-out infinite;
}

.intro-copy {
  width: min(560px, 74vw);
  margin: 34px 0 0 auto;
  color: var(--fog);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
}

.plaque, .glass-panel, .final-coordinate {
  border: 1px solid rgba(238,246,248,.22);
  background: linear-gradient(135deg, rgba(238,246,248,.15), rgba(111,130,145,.08));
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 34px rgba(238,246,248,.06), 0 22px 80px rgba(0,0,0,.22);
}

.surface-plaque {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  width: min(330px, 72vw);
  padding: 22px;
}

.plaque-index {
  color: var(--cyan);
  font: 500 11px var(--font-mono);
}

.surface-plaque p, .glass-panel p, .final-coordinate p {
  color: var(--fog);
  line-height: 1.65;
  margin: 10px 0 0;
}

.instrument, .current-net, .constellation {
  position: absolute;
  fill: none;
  stroke: rgba(104,240,200,.66);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 16px rgba(57,214,232,.16));
}

.buoy { width: 30vw; min-width: 270px; right: 5vw; top: 12vh; stroke: rgba(238,246,248,.7); }
.prism { width: 24vw; min-width: 220px; left: 11vw; bottom: 9vh; stroke: rgba(57,214,232,.55); animation: drift 9s ease-in-out infinite alternate; }
.shell { width: 43vw; min-width: 340px; left: 7vw; bottom: 11vh; stroke: rgba(57,214,232,.58); }
.tide { width: 24vw; min-width: 240px; right: 11vw; top: 16vh; stroke: rgba(215,222,229,.52); }

.glass-panel {
  position: relative;
  z-index: 4;
  width: min(560px, 76vw);
  padding: clamp(26px, 4vw, 54px);
}

.right-panel { justify-self: end; margin-right: 4vw; }
.left-panel { justify-self: start; margin-left: 8vw; }
.compact-panel { width: min(610px, 78vw); }

h2 { font-size: clamp(40px, 6vw, 82px); line-height: .98; }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 30px;
  background: rgba(215,222,229,.18);
  border: 1px solid rgba(215,222,229,.18);
}

.panel-grid span {
  padding: 13px;
  background: rgba(16,24,32,.34);
  color: var(--glass);
  font: 12px var(--font-mono);
}

.diagonal-rail {
  position: absolute;
  inset: -15vh auto -15vh 18vw;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(57,214,232,.72), transparent);
  transform: rotate(17deg);
}

.depth-ruler {
  position: absolute;
  left: 18vw;
  top: 18vh;
  bottom: 14vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 22px;
  border-left: 1px solid rgba(215,222,229,.36);
  color: rgba(215,222,229,.74);
  font: 12px var(--font-mono);
}

.depth-ruler span::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 1px;
  margin: 8px 0 0 -22px;
  background: rgba(215,222,229,.55);
}

.current-net { width: 78vw; height: 70vh; right: -6vw; top: 12vh; stroke: rgba(104,240,200,.5); }

.current-labels {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  display: grid;
  gap: 8px;
  color: var(--cyan);
  font: 12px var(--font-mono);
}

.current-labels span {
  border: 1px solid rgba(57,214,232,.24);
  background: rgba(16,24,32,.42);
  padding: 9px 12px;
}

.archive-slab {
  position: absolute;
  left: 9vw;
  right: 7vw;
  top: 16vh;
  bottom: 15vh;
  border: 1px solid rgba(111,130,145,.34);
  background:
    linear-gradient(90deg, rgba(215,222,229,.06) 1px, transparent 1px) 0 0 / 76px 76px,
    linear-gradient(180deg, rgba(215,222,229,.04) 1px, transparent 1px) 0 0 / 76px 76px,
    rgba(16,24,32,.35);
}

.archive-panel { margin-left: 8vw; width: min(640px, 76vw); }

.archive-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  color: var(--fog);
}

.archive-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(215,222,229,.16);
}

.archive-list span {
  color: var(--cyan);
  font-family: var(--font-mono);
  margin-right: 16px;
}

.ping-field span {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 14vw;
  height: 14vw;
  min-width: 150px;
  min-height: 150px;
  border: 1px solid rgba(104,240,200,.58);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ping 5s ease-out infinite;
}

.ping-field span:nth-child(2) { animation-delay: 1.6s; }
.ping-field span:nth-child(3) { animation-delay: 3.2s; }

.constellation {
  width: min(760px, 80vw);
  height: auto;
  position: relative;
  stroke: rgba(104,240,200,.7);
}

.final-coordinate {
  position: absolute;
  width: min(520px, 76vw);
  padding: 32px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.final-coordinate h2 { color: var(--glass); }

.glitch-title.is-glitching {
  animation: titleGlitch .42s steps(2, end);
}

.glitch-title.is-glitching::before,
.glitch-title.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
  pointer-events: none;
}

.glass-panel .glitch-title, .surface-mark .glitch-title { position: relative; }
.glitch-title.is-glitching::before { color: var(--cyan); transform: translate(3px, -1px); clip-path: inset(0 0 54% 0); }
.glitch-title.is-glitching::after { color: var(--violet); transform: translate(-3px, 2px); clip-path: inset(48% 0 0 0); }

.scramble.is-scrambling { color: var(--glass); text-shadow: 2px 0 var(--violet), -2px 0 var(--cyan); }

@keyframes sonarSweep {
  0%, 100% { transform: translateX(-8%) scaleX(.82); opacity: .34; }
  45% { transform: translateX(5%) scaleX(1); opacity: 1; }
}

@keyframes currentShift {
  from { transform: translateX(-3vw) skewY(-9deg); }
  to { transform: translateX(8vw) skewY(-7deg); }
}

@keyframes drift {
  from { transform: translate3d(0,0,0) rotate(-2deg); }
  to { transform: translate3d(18px,-22px,0) rotate(3deg); }
}

@keyframes ping {
  0% { opacity: .58; transform: translate(-50%, -50%) scale(.2); }
  70% { opacity: .08; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}

@keyframes titleGlitch {
  0% { transform: translate(0); filter: none; }
  25% { transform: translate(2px, -1px); filter: hue-rotate(20deg); }
  50% { transform: translate(-3px, 1px); }
  75% { transform: translate(1px, 2px); }
  100% { transform: translate(0); filter: none; }
}

@media (max-width: 760px) {
  .depth-gauge { left: 12px; transform: translateY(-50%) scale(.82); transform-origin: left center; }
  .depth-readout { right: 12px; top: 12px; font-size: 10px; }
  .surface-mark, .left-panel, .archive-panel { margin-left: 44px; }
  .right-panel { justify-self: start; margin-left: 44px; margin-right: 0; }
  .surface-plaque { right: 24px; bottom: 5vh; }
  .buoy { right: -18vw; opacity: .42; }
  .shell { left: 20vw; opacity: .34; }
  .tide { right: -10vw; opacity: .38; }
  .panel-grid { grid-template-columns: 1fr; }
}