:root {
  --burnt-orange: #C94F1D;
  --deep-pier: #071316;
  --toxic-teal: #00D7C6;
  --uv-kelp: #5B2C83;
  --plankton-lime: #B6F23A;
  --salt-aqua: #B7FFF2;
  --coral-pink: #FF5C7A;
  --playfair: "Playfair Display", Playfair, Georgia, serif;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--deep-pier); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--salt-aqua);
  font-family: var(--space);
  background:
    radial-gradient(circle at 47% 18%, rgba(0, 215, 198, 0.22), transparent 29rem),
    radial-gradient(circle at 85% 7%, rgba(201, 79, 29, 0.28), transparent 21rem),
    radial-gradient(circle at 15% 78%, rgba(91, 44, 131, 0.55), transparent 30rem),
    linear-gradient(140deg, #071316 0%, #0b2426 46%, #120a1b 100%);
}

.design-lexicon { display: none; }

button { font: inherit; }

.noise-layer,
.plankton-field,
.glow-leak {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.noise-layer {
  z-index: 1;
  opacity: .25;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.08) 49%, transparent 51% 100%),
    radial-gradient(circle, rgba(183,255,242,.22) 1px, transparent 1.4px);
  background-size: 120px 80px, 21px 21px;
  mix-blend-mode: overlay;
}

.plankton-field {
  z-index: 2;
  background-image:
    radial-gradient(circle at 10% 20%, #B6F23A 0 1px, transparent 2px),
    radial-gradient(circle at 45% 70%, #00D7C6 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 80% 32%, #FF5C7A 0 1px, transparent 2px);
  background-size: 160px 190px, 230px 170px, 280px 240px;
  animation: planktonDrift 19s linear infinite;
}

.glow-leak {
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at var(--leak-x, 50%) var(--leak-y, 50%), rgba(182,242,58,.62), rgba(0,215,198,.28) 18%, transparent 42%);
  transition: opacity .75s ease;
  mix-blend-mode: screen;
}

.glow-leak.active { opacity: .85; }

.reef-console {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(220px, 18vw) 1fr minmax(260px, 23vw);
  grid-template-rows: minmax(600px, 78vh) auto;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(16px, 2.2vw, 34px);
}

.tide-rail,
.specimen-card,
.scene-card,
.reef-viewport {
  border: 1px solid rgba(183, 255, 242, .34);
  box-shadow: 0 0 30px rgba(0, 215, 198, .15), inset 0 0 28px rgba(183, 255, 242, .05);
  backdrop-filter: blur(18px) saturate(135%);
}

.tide-rail {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  padding: 18px;
  border-radius: 34px 18px 42px 22px;
  background: linear-gradient(170deg, rgba(7, 19, 22, .8), rgba(91, 44, 131, .25)), radial-gradient(circle at 30% 12%, rgba(0,215,198,.22), transparent 40%);
  overflow: hidden;
}

.rail-sticker {
  transform: rotate(-3deg);
  margin: 4px 0 18px -5px;
  padding: 8px 10px;
  width: max-content;
  max-width: 105%;
  color: var(--deep-pier);
  background: var(--burnt-orange);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  box-shadow: 7px 7px 0 rgba(255, 92, 122, .38);
}

.rail-header,
.card-label,
.kicker,
.readout span,
.scene-card span {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}

.rail-header { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--plankton-lime); box-shadow: 0 0 16px var(--plankton-lime); }

.scene-tabs { display: grid; gap: 10px; margin-bottom: 24px; }
.tab {
  border: 1px solid rgba(0, 215, 198, .38);
  border-radius: 999px 18px 999px 22px;
  color: var(--salt-aqua);
  background: rgba(0, 215, 198, .08);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2,1.55,.35,1), background .3s ease, color .3s ease;
}
.tab:hover, .tab.active { transform: translateX(7px) rotate(-1deg); color: var(--deep-pier); background: var(--toxic-teal); }

.tide-entry {
  margin: 16px 0;
  padding: 14px;
  border-radius: 24px 18px 28px 16px;
  background: rgba(183, 255, 242, .07);
  border-left: 3px solid var(--toxic-teal);
}
.tide-entry strong { display: block; margin: 6px 0; color: var(--plankton-lime); }
.tide-entry p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(183,255,242,.75); }
.mono { font-family: var(--mono); color: var(--coral-pink); font-size: 11px; }
.tilted-left { transform: rotate(-1.8deg); }
.tilted-right { transform: rotate(2.2deg); }

.fishbone-divider { height: 30px; margin: 24px 0; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--salt-aqua) 9px 11px, transparent 12px 20px); opacity: .55; clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%); }
.hazard-tape { margin-top: auto; padding: 12px; color: var(--deep-pier); background: repeating-linear-gradient(135deg, var(--burnt-orange) 0 13px, var(--coral-pink) 13px 20px); font-weight: 800; font-size: 12px; letter-spacing: .08em; }

.reef-viewport {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 56px 28px 70px 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 215, 198, .18), transparent 32%),
    linear-gradient(180deg, rgba(183,255,242,.09), rgba(7,19,22,.48));
  clip-path: polygon(2% 0, 97% 2%, 100% 83%, 93% 100%, 5% 97%, 0 12%);
}

.viewport-glass {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(183,255,242,.06) 0 2px, transparent 2px 11px), linear-gradient(95deg, transparent, rgba(255,255,255,.11), transparent);
  animation: wetScan 7s ease-in-out infinite alternate;
}

.blob {
  position: absolute;
  filter: blur(.2px) drop-shadow(0 0 28px rgba(0, 215, 198, .4));
  mix-blend-mode: screen;
  transition: transform .6s cubic-bezier(.2,1.7,.3,1), border-radius .6s ease;
}
.blob-a { width: 42%; height: 38%; left: 4%; top: 7%; border-radius: 56% 44% 68% 32% / 38% 54% 46% 62%; background: radial-gradient(circle at 30% 30%, #B7FFF2, rgba(0,215,198,.45) 44%, transparent 72%); animation: blobPulse 8s ease-in-out infinite; }
.blob-b { width: 36%; height: 46%; right: 9%; bottom: 6%; border-radius: 42% 58% 35% 65% / 60% 36% 64% 40%; background: radial-gradient(circle at 50% 40%, rgba(182,242,58,.75), rgba(91,44,131,.58) 52%, transparent 74%); animation: blobPulse 10s ease-in-out infinite reverse; }
.blob-c { width: 28%; height: 24%; left: 38%; bottom: 18%; border-radius: 67% 33% 47% 53% / 48% 70% 30% 52%; background: radial-gradient(circle, rgba(255,92,122,.75), rgba(201,79,29,.44), transparent 70%); animation: blobPulse 7s ease-in-out infinite; }

.coral-circuit {
  position: absolute;
  inset: 12% 10%;
  opacity: .22;
  background-image: linear-gradient(var(--toxic-teal) 1px, transparent 1px), linear-gradient(90deg, var(--toxic-teal) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 0 48%, transparent 72%);
}

.hero-copy { position: relative; z-index: 2; max-width: 860px; padding: clamp(36px, 7vw, 98px) clamp(24px, 5vw, 72px); }
.kicker { color: var(--plankton-lime); margin-bottom: 10px; }
h1 {
  margin: 0;
  max-width: 900px;
  font-family: var(--playfair);
  font-size: clamp(58px, 10.4vw, 154px);
  line-height: .78;
  letter-spacing: -.065em;
  background: linear-gradient(110deg, var(--salt-aqua) 0%, var(--toxic-teal) 34%, var(--plankton-lime) 52%, var(--burnt-orange) 78%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 36px rgba(0, 215, 198, .34), 9px 14px 0 rgba(91, 44, 131, .38);
  animation: titleWarp 5.8s ease-in-out infinite alternate;
}
.hero-copy p { max-width: 590px; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.55; color: rgba(183, 255, 242, .82); }

.readout-strip { position: absolute; z-index: 4; left: 5%; right: 5%; bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.readout { padding: 14px 16px; border-radius: 20px 16px 24px 14px; background: rgba(7,19,22,.68); border: 1px solid rgba(183,255,242,.24); }
.readout b { display: block; margin-top: 6px; font-family: var(--playfair); font-size: 28px; color: var(--toxic-teal); }
.readout.warning b { color: var(--plankton-lime); }
.readout.hot b { color: var(--burnt-orange); }

.annotation { position: absolute; z-index: 5; right: 8%; top: 32%; padding: 10px 14px; background: var(--coral-pink); color: var(--deep-pier); font-family: var(--mono); font-weight: 700; transform: rotate(3deg) scale(.92); opacity: 0; transition: opacity .3s ease, transform .45s cubic-bezier(.2,1.5,.3,1); }
.annotation.revealed { opacity: 1; transform: rotate(-2deg) scale(1); }

.specimen-stack { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.specimen-card {
  position: relative;
  padding: 22px;
  border-radius: 34px 20px 42px 24px;
  background: linear-gradient(145deg, rgba(183,255,242,.11), rgba(91,44,131,.28));
  transition: transform .55s cubic-bezier(.18,1.7,.25,1), box-shadow .35s ease;
}
.specimen-card:hover { transform: translateY(-8px) rotate(-1.2deg) scale(1.02); box-shadow: 0 0 45px rgba(182,242,58,.22), inset 0 0 30px rgba(0,215,198,.1); }
.specimen-card h2 { margin: 8px 0 10px; font-family: var(--playfair); font-size: clamp(28px, 2.5vw, 42px); line-height: .96; color: var(--salt-aqua); }
.specimen-card p { line-height: 1.48; color: rgba(183,255,242,.77); }
.card-label { display: inline-block; padding: 6px 9px; color: var(--deep-pier); background: var(--plankton-lime); border-radius: 999px; }
.membrane { clip-path: polygon(0 8%, 14% 0, 100% 4%, 96% 88%, 84% 100%, 5% 96%); }
.orange-card { background: linear-gradient(145deg, rgba(201,79,29,.38), rgba(7,19,22,.74)); border-color: rgba(201,79,29,.65); }
.code-card pre { margin: 12px 0 0; white-space: pre-wrap; color: var(--plankton-lime); font: 13px/1.6 var(--mono); }

.wobble-toggle { display: flex; align-items: center; gap: 10px; width: max-content; padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(7,19,22,.7); cursor: pointer; transition: transform .45s cubic-bezier(.2,1.7,.35,1); }
.wobble-toggle span { width: 28px; height: 28px; border-radius: 50%; background: var(--toxic-teal); box-shadow: 0 0 16px var(--toxic-teal); transition: transform .45s cubic-bezier(.2,1.9,.25,1); }
.wobble-toggle.on { transform: rotate(-2deg) scale(1.04); }
.wobble-toggle.on span { transform: translateX(20px); background: var(--burnt-orange); box-shadow: 0 0 18px var(--burnt-orange); }
.wobble-toggle em { font-style: normal; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.meter { height: 12px; padding: 3px; border: 1px solid rgba(183,255,242,.36); border-radius: 999px; background: rgba(7,19,22,.52); }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burnt-orange), var(--coral-pink), var(--plankton-lime)); animation: meterSurge 2.4s ease-in-out infinite alternate; }

.story-scenes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene-card { padding: 24px; border-radius: 34px 18px 36px 24px; background: rgba(7,19,22,.58); transform: translateY(0); transition: transform .5s cubic-bezier(.2,1.6,.25,1), background .35s ease; }
.scene-card.active { transform: translateY(-10px) rotate(-1deg); background: rgba(0,215,198,.14); }
.scene-card h3 { margin: 8px 0; font-family: var(--playfair); font-size: 34px; line-height: 1; color: var(--salt-aqua); }
.scene-card p { margin: 0; color: rgba(183,255,242,.72); line-height: 1.5; }

.glowfish { position: fixed; z-index: 20; left: 50vw; top: 50vh; width: 66px; height: 34px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 0 14px rgba(0,215,198,.9)); }
.glowfish span { position: absolute; display: block; }
.glowfish .trail { right: 38px; top: 12px; width: 86px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(0,215,198,.42), rgba(182,242,58,.18)); filter: blur(4px); }
.glowfish .body { right: 6px; top: 6px; width: 42px; height: 23px; border-radius: 68% 42% 52% 48%; background: linear-gradient(135deg, var(--salt-aqua), var(--toxic-teal) 45%, var(--uv-kelp)); }
.glowfish .tail { left: 0; top: 7px; width: 25px; height: 22px; background: rgba(255,92,122,.85); clip-path: polygon(100% 50%, 0 0, 18% 50%, 0 100%); }
.glowfish .fin { background: rgba(182,242,58,.72); width: 19px; height: 13px; clip-path: polygon(0 100%, 55% 0, 100% 100%); }
.glowfish .fin.top { left: 28px; top: -1px; transform: rotate(8deg); }
.glowfish .fin.bottom { left: 30px; bottom: -1px; transform: rotate(176deg); }
.glowfish .eye { right: 11px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--deep-pier); box-shadow: 0 0 0 2px var(--plankton-lime); }
.glowfish .stripe { top: 8px; width: 5px; height: 21px; background: var(--burnt-orange); transform: skewX(-18deg); border-radius: 6px; }
.glowfish .stripe.one { right: 29px; }
.glowfish .stripe.two { right: 20px; height: 18px; top: 9px; }

@keyframes planktonDrift { to { background-position: 160px 190px, -230px 170px, 280px -240px; } }
@keyframes wetScan { from { transform: translateX(-8%) skewX(-7deg); opacity: .55; } to { transform: translateX(8%) skewX(5deg); opacity: .9; } }
@keyframes blobPulse { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-10px) scale(1.08) rotate(5deg); } }
@keyframes titleWarp { from { filter: blur(0); transform: skewX(-1deg); } to { filter: blur(.45px); transform: skewX(1.2deg) translateY(5px); } }
@keyframes meterSurge { from { width: 42%; } to { width: 94%; } }

@media (max-width: 1050px) {
  body { overflow-x: hidden; }
  .reef-console { grid-template-columns: 1fr; grid-template-rows: auto; }
  .tide-rail { position: relative; top: 0; height: auto; }
  .specimen-stack, .story-scenes { grid-template-columns: 1fr; display: grid; }
  .readout-strip { position: relative; left: auto; right: auto; bottom: auto; padding: 0 20px 24px; grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .reef-console { padding: 10px; }
  .reef-viewport { min-height: 560px; clip-path: none; border-radius: 34px 20px 40px 18px; }
  .hero-copy { padding: 42px 22px; }
  .story-scenes { grid-template-columns: 1fr; }
}