:root {
  /* Compliance tokens from DESIGN.md: IBM Plex Sans Sanss Sans* Sans** paragraphs explanatory Roboto Mono Monoo Mono* Mono** coordinates Space Grotesk Groteskk Grotesk* Grotesk** dashboard controls */
  --abyss: #06151F;
  --deep: #073B4C;
  --turquoise: #00F5D4;
  --coral: #FF4F8B;
  --acid: #F9F871;
  --violet: #7A4DFF;
  --foam: #E9FFF9;
  --kelp: #416D58;
  --zoom: 0;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--abyss); color: var(--foam); overflow-x: hidden; }

body {
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  background: radial-gradient(circle at 72% 18%, rgba(122,77,255,.32), transparent 30%), linear-gradient(135deg, var(--abyss), var(--deep) 58%, var(--abyss));
}

button { font: inherit; color: inherit; }

.deck { position: relative; min-height: 560vh; isolation: isolate; overflow: hidden; }

.pressure-field {
  position: fixed; inset: 0; z-index: -5;
  background:
    radial-gradient(circle at calc(30% + var(--zoom) * 7%) calc(30% + var(--zoom) * 4%), rgba(0,245,212,.22), transparent 28%),
    radial-gradient(circle at 80% 68%, rgba(255,79,139,.16), transparent 24%),
    repeating-linear-gradient(115deg, rgba(233,255,249,.035) 0 1px, transparent 1px 42px);
  filter: saturate(1.25);
}

.foam { position: fixed; width: 34vmin; height: 22vmin; border-radius: 48% 52% 61% 39%; background: rgba(233,255,249,.055); filter: blur(1px); z-index: -3; animation: drift 12s ease-in-out infinite alternate; }
.foam-one { top: 9%; left: 5%; }
.foam-two { right: 7%; bottom: 18%; animation-duration: 16s; }

.top-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; gap: 2rem; padding: 16px 24px; font-family: "Space Grotesk", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.65rem, 1vw, .84rem); color: var(--acid); pointer-events: none; }
.signal-id { color: var(--turquoise); text-shadow: 0 0 18px var(--turquoise); }
.ticker { display: flex; gap: 1rem; color: var(--foam); opacity: .75; }
.ticker span { border-bottom: 1px solid var(--coral); }

.reef-map { position: fixed; left: 0; right: 0; bottom: -4vh; width: 100%; height: 34vh; opacity: .74; z-index: -1; }
.reef-line { fill: none; stroke: var(--turquoise); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 12px var(--turquoise)); stroke-dasharray: 18 20; animation: shimmer 7s linear infinite; }
.reef-line-two { stroke: var(--violet); stroke-width: 3; animation-direction: reverse; opacity: .8; }
.nodes circle { fill: var(--acid); filter: drop-shadow(0 0 12px var(--acid)); animation: pulse 2.6s ease-in-out infinite; }

.instrument { min-height: 100vh; position: relative; display: grid; place-items: center; padding: clamp(2rem, 5vw, 6rem); transition: transform .7s ease, filter .7s ease, opacity .7s ease; }
.instrument:not(.active) { filter: blur(.6px) saturate(.8); opacity: .86; }

.hero { grid-template-columns: minmax(0, 1fr) 180px; align-items: center; padding-top: 5rem; }
.sonar-lens { position: relative; width: min(68vw, 720px); aspect-ratio: 1; margin-left: 5vw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(0,245,212,.22), rgba(6,21,31,.58) 42%, rgba(122,77,255,.16) 64%, rgba(0,245,212,.08)); border: 2px solid rgba(0,245,212,.8); box-shadow: 0 0 60px rgba(0,245,212,.35), inset 0 0 80px rgba(0,245,212,.16); overflow: hidden; transform: translateX(-4vw) rotate(-3deg); }
.sonar-lens h1 { margin: 0; font-family: "Anybody", "Arial Black", system-ui, sans-serif; font-size: clamp(3.4rem, 11vw, 9.8rem); font-variation-settings: "wdth" calc(122 - var(--zoom) * 8), "wght" 790; line-height: .8; letter-spacing: -.08em; color: var(--foam); text-shadow: 0 0 16px var(--turquoise), 10px 0 0 rgba(255,79,139,.58); animation: snap 1.2s cubic-bezier(.2,.9,.1,1) both; }
.sonar-lens p { position: absolute; bottom: 24%; max-width: 420px; margin: 0; text-align: center; color: var(--acid); font-family: "Roboto Mono", monospace; text-transform: uppercase; font-size: clamp(.68rem, 1.4vw, .9rem); }
.sonar-sweep { position: absolute; width: 52%; height: 52%; transform-origin: 100% 100%; left: 0; top: 0; background: conic-gradient(from 80deg, transparent, rgba(0,245,212,.34), transparent 38%); animation: sweep 4.8s linear infinite; }
.lens-ring { position: absolute; border: 1px solid rgba(0,245,212,.65); border-radius: 50%; inset: 14%; }
.ring-b { inset: 28%; border-color: rgba(249,248,113,.5); }
.ring-c { inset: 42%; border-style: dashed; border-color: rgba(255,79,139,.66); }

.buoy-strip { justify-self: end; display: grid; gap: 1rem; transform: skewY(-7deg); }
.buoy { width: 150px; min-height: 86px; border: 1px solid rgba(233,255,249,.38); background: linear-gradient(145deg, rgba(65,109,88,.45), rgba(6,21,31,.78)); clip-path: polygon(10% 0, 92% 8%, 100% 78%, 75% 100%, 0 88%); font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .08em; cursor: pointer; box-shadow: inset 0 0 22px rgba(0,245,212,.12); transition: transform .24s ease, border-color .24s ease, color .24s ease; }
.buoy:hover, .buoy.is-hot { transform: translateX(-12px) scale(1.05); border-color: var(--coral); color: var(--acid); box-shadow: 0 0 26px rgba(255,79,139,.32), inset 0 0 26px rgba(0,245,212,.18); }
.inspect-card { position: absolute; left: 8vw; bottom: 8vh; width: min(350px, 82vw); padding: 1.1rem; background: rgba(6,21,31,.64); border: 1px solid rgba(0,245,212,.38); border-radius: 34px 12px 30px 18px; backdrop-filter: blur(10px); transform: rotate(2deg); }
.inspect-card span, .micro { display: block; font-family: "Roboto Mono", monospace; color: var(--acid); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }
.inspect-card strong { display: block; font-family: "Anybody", sans-serif; font-size: clamp(1.8rem, 4vw, 3.4rem); font-variation-settings: "wdth" 118, "wght" 800; color: var(--turquoise); }

.module { grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.module h2, .signal-aftertaste span { margin: .2rem 0; font-family: "Anybody", sans-serif; font-size: clamp(3rem, 9vw, 8.4rem); line-height: .82; letter-spacing: -.06em; font-variation-settings: "wdth" 106, "wght" 840; color: var(--foam); text-shadow: 0 0 24px rgba(0,245,212,.55); }
.module p, .signal-aftertaste p { font-size: clamp(1rem, 2.1vw, 1.55rem); line-height: 1.35; max-width: 680px; color: rgba(233,255,249,.86); }
.module-shell, .module-copy, .layer-stack, .faction-orbit, .breach-node { position: relative; z-index: 2; }
.module-shell { grid-column: 2 / span 6; min-height: 420px; padding: clamp(1.5rem, 4vw, 3.5rem); background: linear-gradient(135deg, rgba(0,245,212,.13), rgba(122,77,255,.13)), rgba(6,21,31,.68); border: 1px solid rgba(0,245,212,.42); box-shadow: 0 0 70px rgba(0,245,212,.12), inset 0 0 70px rgba(233,255,249,.04); }
.clipped { clip-path: polygon(0 8%, 85% 0, 100% 22%, 94% 100%, 12% 94%); }
.headline-reef { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.headline-reef b { font-family: "Space Grotesk", sans-serif; padding: .75rem 1rem; border: 1px solid var(--coral); color: var(--acid); transform: rotate(var(--r, -3deg)); background: rgba(255,79,139,.12); }
.headline-reef b:nth-child(even) { --r: 4deg; border-color: var(--turquoise); color: var(--turquoise); }

.module-undertow .layer-stack { grid-column: 2 / span 5; display: grid; gap: -1rem; perspective: 900px; }
.glass-layer { min-height: 120px; margin-bottom: -20px; padding: 1.2rem; border: 1px solid rgba(233,255,249,.3); background: rgba(0,245,212,.1); border-radius: 42px 14px 36px 10px; transform: rotateX(54deg) rotateZ(-6deg); box-shadow: 0 26px 45px rgba(0,0,0,.28); font-family: "Space Grotesk", sans-serif; }
.glass-layer strong { display: block; color: var(--coral); font-size: 1.8rem; }
.module-copy { grid-column: 7 / span 5; background: rgba(6,21,31,.6); border: 1px solid rgba(65,109,88,.8); border-radius: 22px 60px 18px 42px; padding: clamp(1.4rem, 3vw, 2.6rem); backdrop-filter: blur(10px); }
.tilted { transform: rotate(-4deg); }

.faction-orbit { grid-column: 2 / span 5; min-height: 520px; }
.mini-sonar { position: absolute; inset: 14%; border-radius: 50%; border: 2px solid var(--turquoise); background: repeating-radial-gradient(circle, transparent 0 44px, rgba(0,245,212,.18) 45px 47px); box-shadow: 0 0 45px rgba(0,245,212,.28); }
.float-buoy { position: absolute; width: 104px; height: 104px; display: grid; place-items: center; text-align: center; border-radius: 50% 42% 55% 39%; background: linear-gradient(145deg, var(--coral), rgba(122,77,255,.72)); font-family: "Roboto Mono", monospace; text-transform: uppercase; box-shadow: 0 0 30px rgba(255,79,139,.42); animation: bob 4s ease-in-out infinite; }
.float-buoy b { color: var(--acid); font-size: 1.5rem; }
.b1 { left: 5%; top: 14%; }.b2 { right: 10%; top: 4%; animation-delay: -.8s; }.b3 { left: 12%; bottom: 10%; animation-delay: -1.5s; }.b4 { right: 0; bottom: 18%; animation-delay: -2.2s; }

.breach-node { grid-column: 2 / span 5; width: min(520px, 90vw); aspect-ratio: 1; border-radius: 50% 44% 50% 38%; background: radial-gradient(circle, rgba(249,248,113,.25), rgba(255,79,139,.19) 38%, rgba(0,245,212,.1) 70%); border: 2px solid var(--acid); display: grid; place-items: center; box-shadow: 0 0 80px rgba(249,248,113,.28); }
.breach-node svg { width: 92%; height: 92%; fill: none; stroke: var(--turquoise); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 10px var(--turquoise)); animation: spark 3s steps(4) infinite; }
.shell-core { position: absolute; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: var(--abyss); font: 900 4rem "Anybody"; box-shadow: 0 0 36px var(--coral); }
.breach-copy { border-color: rgba(255,79,139,.7); }

.signal-aftertaste { min-height: 78vh; text-align: center; }
.signal-aftertaste span { display: block; color: var(--acid); }
.signal-aftertaste p { margin-inline: auto; }

.depth-nav { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: flex; gap: .4rem; padding: .45rem; border: 1px solid rgba(0,245,212,.45); border-radius: 999px; background: rgba(6,21,31,.7); backdrop-filter: blur(10px); }
.depth-nav button { border: 0; border-radius: 999px; padding: .65rem .85rem; background: transparent; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; cursor: pointer; }
.depth-nav button.selected { background: var(--turquoise); color: var(--abyss); }

.zooming .instrument:not(.active) { transform: scale(.94); filter: blur(5px) saturate(.65); opacity: .34; }
.instrument.active { transform: scale(1.015); }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes shimmer { to { stroke-dashoffset: -180; } }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .55; } }
@keyframes drift { to { transform: translate(8vw, 4vh) rotate(18deg); } }
@keyframes bob { 50% { transform: translateY(-18px) rotate(7deg); } }
@keyframes spark { 50% { stroke: var(--acid); filter: drop-shadow(0 0 14px var(--acid)); } }
@keyframes snap { 0% { transform: scaleX(.52) translateY(20px); opacity: 0; } 70% { transform: scaleX(1.18); } 100% { transform: scaleX(1); opacity: 1; } }

@media (max-width: 850px) {
  .hero, .module { grid-template-columns: 1fr; }
  .sonar-lens { width: 92vw; margin: 0; transform: rotate(-3deg); }
  .buoy-strip { position: relative; grid-template-columns: repeat(2, minmax(120px, 1fr)); justify-self: stretch; }
  .buoy { width: auto; }
  .inspect-card { position: relative; left: auto; bottom: auto; margin-top: 1rem; }
  .module-shell, .module-undertow .layer-stack, .module-copy, .faction-orbit, .breach-node { grid-column: auto; }
  .top-strip { position: absolute; flex-direction: column; gap: .4rem; }
  .ticker { flex-wrap: wrap; }
  .depth-nav { left: 12px; right: 12px; justify-content: center; flex-wrap: wrap; border-radius: 22px; }
}