:root {
  /* Typography compliance terms from DESIGN.md: IBM Plex Mono** for the logo; Space Mono** for larger specimen headings; JetBrains Mono** sparingly for code-like annotations. Interactions should reveal content gradually: hatch buttons slide open in short mechanical snaps. */
  --deep: #071019;
  --chrome: #DDE7EE;
  --steel: #8C9AA6;
  --cyan: #6FF6FF;
  --orange: #FF8A3D;
  --magenta: #FF4FD8;
  --lime: #B7FF4A;
  --glass: #D9F7FF;
  --plex: "IBM Plex Mono", "Space Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --space: "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --jet: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--glass);
  font-family: var(--plex);
  background:
    radial-gradient(circle at 18% 12%, rgba(111, 246, 255, .18), transparent 25rem),
    radial-gradient(circle at 82% 18%, rgba(255, 79, 216, .13), transparent 22rem),
    radial-gradient(circle at 50% 100%, rgba(183, 255, 74, .08), transparent 30rem),
    linear-gradient(180deg, #071019 0%, #081927 48%, #071019 100%);
}

.design-terms {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.grain-veil,
.scanline-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.grain-veil {
  opacity: .2;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(221,231,238,.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 40% 60%, rgba(111,246,255,.7) 0 1px, transparent 1.5px);
  background-size: 13px 17px, 19px 23px, 31px 29px;
  mix-blend-mode: screen;
  animation: grainDrift 1.4s steps(2) infinite;
}

.scanline-veil {
  opacity: .16;
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(217,247,255,.32) 5px, transparent 7px);
}

.chrome-reef { position: relative; isolation: isolate; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  background:
    repeating-linear-gradient(116deg, transparent 0 74px, rgba(111,246,255,.045) 75px 78px, transparent 79px 158px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(111,246,255,.14), transparent 19rem);
  transform: skewY(-2deg);
}

.broken-tile {
  border: 1px solid rgba(221, 231, 238, .54);
  border-radius: 26px 10px 34px 14px;
  color: var(--deep);
  background:
    linear-gradient(102deg, rgba(7,16,25,.2) 0 8%, transparent 9% 15%, rgba(255,255,255,.75) 16% 21%, rgba(140,154,166,.85) 22% 29%, var(--chrome) 30% 45%, rgba(217,247,255,.9) 46% 54%, rgba(113,126,137,.92) 55% 62%, var(--chrome) 63% 100%),
    repeating-linear-gradient(0deg, rgba(7,16,25,.14) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -18px 32px rgba(7,16,25,.18), 0 28px 70px rgba(0,0,0,.32);
}

.porthole-glint { position: relative; overflow: hidden; }
.porthole-glint::after {
  content: "";
  position: absolute;
  inset: -40% -90%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.88) 46%, rgba(111,246,255,.38) 50%, transparent 60%);
  transform: translateX(-45%) rotate(5deg);
  animation: chromeSweep 5.8s ease-in-out infinite;
}

.ice-label,
.section-stamp,
.coordinate,
.label-tape {
  font-family: var(--space);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reef-nav {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 30;
  display: flex;
  gap: .35rem;
  padding: .55rem;
  transform: rotate(1.5deg);
}

.reef-nav a {
  display: block;
  padding: .55rem .7rem;
  border: 1px solid rgba(7,16,25,.25);
  border-radius: 999px;
  color: var(--deep);
  font-size: .72rem;
  background: rgba(217,247,255,.5);
}

.scene-hero { padding-top: 7rem; }

.water-caustics {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    radial-gradient(ellipse at 20% 20%, transparent 0 19%, rgba(111,246,255,.13) 20% 21%, transparent 22% 100%),
    radial-gradient(ellipse at 66% 42%, transparent 0 22%, rgba(217,247,255,.12) 23% 24%, transparent 25% 100%);
  background-size: 420px 240px, 520px 310px;
  animation: causticSwim 12s ease-in-out infinite alternate;
}

.wordmark-plate {
  width: min(46rem, 80vw);
  padding: clamp(1.5rem, 4vw, 3rem);
  transform: skew(-8deg) rotate(-3deg);
  margin-left: 2vw;
}

.wordmark-plate > * { position: relative; z-index: 1; transform: skew(8deg); }
.wordmark-plate h1 {
  margin: .2rem 0 .7rem;
  font-family: var(--plex);
  font-size: clamp(3.8rem, 12vw, 10.5rem);
  line-height: .78;
  letter-spacing: -.1em;
  color: var(--deep);
  text-shadow: 2px 2px 0 var(--cyan), -2px -1px 0 rgba(255,79,216,.65);
}

.wordmark-plate p { max-width: 34rem; font-size: clamp(.9rem, 1.4vw, 1.15rem); }
.ice-label { display: inline-block; color: var(--deep); font-size: .7rem; padding: .25rem .5rem; background: var(--lime); border-radius: 2px 12px 2px 12px; }

.hero-labels {
  position: absolute;
  left: 10vw;
  bottom: 10vh;
  display: grid;
  gap: .7rem;
  transform: rotate(-4deg);
}

.ice-tab,
.module-tab,
.hatch-button,
.bubble-trigger,
.valve {
  cursor: pointer;
  border: 1px solid rgba(217,247,255,.6);
  color: var(--glass);
  background: linear-gradient(180deg, rgba(217,247,255,.14), rgba(7,16,25,.78));
  box-shadow: inset 0 0 16px rgba(111,246,255,.12), 0 8px 24px rgba(0,0,0,.24);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.ice-tab { padding: .7rem 1rem; border-radius: 0 18px 18px 0; text-align: left; font-family: var(--jet); }
.ice-tab.is-active, .module-tab.is-active { color: var(--deep); background: var(--lime); transform: translateX(8px); }

.tab-notes {
  position: absolute;
  right: 8vw;
  top: 36vh;
  width: min(24rem, 38vw);
  min-height: 12rem;
  padding: 1.2rem;
  transform: rotate(5deg);
}
.tab-note { display: none; position: relative; z-index: 1; }
.tab-note.is-visible { display: grid; gap: .65rem; animation: hatchSnap .28s ease both; }
.tab-note b { font-family: var(--space); font-size: 1.35rem; }

.reef-trace {
  position: absolute;
  inset: auto 3vw 15vh auto;
  width: min(58vw, 900px);
  height: auto;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-dasharray: 8 13;
  filter: drop-shadow(0 0 10px rgba(111,246,255,.8));
  opacity: .72;
}
.reef-trace path:nth-child(2) { stroke: var(--magenta); animation-delay: -2s; }
.reef-trace path { animation: traceFlow 9s linear infinite; }

.fish-field { position: absolute; inset: 0; pointer-events: none; }
.fish-vector, .mini-fish {
  position: absolute;
  width: 90px;
  height: 42px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.fish-vector::before, .mini-fish::before {
  content: "";
  position: absolute;
  inset: 5px 16px 5px 4px;
  border-radius: 60% 45% 50% 60%;
  background: var(--orange);
  border: 1px solid rgba(221,231,238,.75);
}
.fish-vector::after, .mini-fish::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 8px;
  width: 28px;
  height: 28px;
  clip-path: polygon(0 50%, 100% 0, 72% 50%, 100% 100%);
  background: var(--magenta);
}
.fish-vector span, .mini-fish span { position: absolute; z-index: 2; left: 32px; top: 12px; font: 700 .65rem var(--jet); color: var(--deep); }
.clownfish::before { background: repeating-linear-gradient(90deg, var(--orange) 0 18px, var(--chrome) 18px 25px, var(--deep) 25px 29px); }
.angelfish { clip-path: polygon(0 50%, 45% 0, 78% 22%, 100% 50%, 78% 78%, 45% 100%); }
.angelfish::before { background: var(--cyan); }
.tang::before { background: var(--lime); }
.goby { width: 70px; height: 26px; }
.goby::before { background: linear-gradient(90deg, var(--cyan), var(--magenta)); }
.goby::after { background: var(--lime); }

.fish-a { top: 30%; left: -120px; animation: swimRight 18s linear infinite; }
.fish-b { top: 18%; left: -140px; animation: swimRight 24s linear infinite 4s; }
.fish-c { top: 67%; left: -120px; animation: swimRight 21s linear infinite 2s; }
.fish-d { top: 52%; left: -100px; animation: swimRight 14s linear infinite 6s; }

.coordinate { position: absolute; color: var(--cyan); font-size: .7rem; opacity: .85; }
.coordinate-one { left: 58vw; top: 21vh; transform: rotate(8deg); }
.coordinate-two { right: 13vw; bottom: 9vh; transform: rotate(-3deg); color: var(--lime); }

.scene-entry { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7vw; align-items: center; }
.entrance-tile { padding: clamp(1.5rem, 4vw, 3.2rem); transform: rotate(2deg); }
.entrance-tile h2, .workbench-shell h2, .archive-map h2 { margin: .8rem 0; font: 700 clamp(2rem, 6vw, 5rem)/.9 var(--space); }
.entrance-tile p, .workbench-shell p, .archive-map p { font-size: clamp(.95rem, 1.4vw, 1.2rem); line-height: 1.65; }

.porthole { min-height: 28rem; padding: 2rem; display: grid; place-items: center; color: var(--glass); background: radial-gradient(circle, rgba(111,246,255,.2), rgba(7,16,25,.9) 58%, rgba(221,231,238,.85) 60% 66%, rgba(7,16,25,.96) 68%); transform: rotate(-5deg); }
.porthole-ring { position: absolute; inset: 12%; border-radius: 50%; border: 10px double var(--steel); box-shadow: inset 0 0 40px rgba(111,246,255,.25), 0 0 30px rgba(111,246,255,.18); }
.puffer { position: relative; width: 110px; height: 110px; transform: none; transition: transform .35s ease; }
.puffer::before { inset: 10px; border-radius: 50%; background: var(--lime); }
.puffer::after { top: 37px; right: 0; background: var(--orange); }
.porthole.is-open .puffer { transform: scale(1.22) rotate(7deg); }
.bubble-trigger { position: absolute; bottom: 2rem; padding: .75rem 1rem; border-radius: 999px; }
.bubble-note { position: absolute; right: -5%; top: 10%; width: 16rem; padding: 1rem; border-radius: 50% 44% 48% 42%; color: var(--deep); background: rgba(217,247,255,.92); opacity: 0; transform: scale(.4) translateY(30px); transition: .35s ease; }
.bubble-note.is-open { opacity: 1; transform: scale(1) translateY(0); }

.label-tape { position: absolute; padding: .45rem .8rem; color: var(--deep); background: var(--orange); font-size: .72rem; box-shadow: 0 10px 22px rgba(0,0,0,.26); }
.tape-one { left: 7vw; bottom: 12vh; transform: rotate(-9deg); }
.tape-two { right: 8vw; top: 14vh; transform: rotate(11deg); background: var(--magenta); }

.scene-specimens { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(8rem, auto); gap: 1.2rem; align-content: center; }
.section-stamp { color: var(--lime); font-size: .78rem; grid-column: 2 / 8; align-self: end; }
.specimen { position: relative; padding: 1rem; min-height: 17rem; transform: rotate(var(--tilt)); }
.specimen:nth-of-type(1) { grid-column: 2 / 6; grid-row: 2; }
.specimen:nth-of-type(2) { grid-column: 7 / 12; grid-row: 1 / 3; }
.specimen:nth-of-type(3) { grid-column: 1 / 5; grid-row: 3; }
.specimen:nth-of-type(4) { grid-column: 6 / 11; grid-row: 3; }
.hatch-button { width: 100%; padding: .8rem 1rem; border-radius: 18px 6px 18px 6px; text-align: left; color: var(--deep); background: linear-gradient(90deg, var(--chrome), var(--steel)); font-family: var(--jet); }
.hatch-panel { display: grid; gap: .8rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .2s ease, padding .3s ease; position: relative; z-index: 1; }
.hatch-disclosure.is-open .hatch-panel { max-height: 22rem; opacity: 1; padding-top: 1rem; animation: hatchSnap .25s ease both; }
.hatch-panel h3 { margin: 4rem 0 0; font: 700 1.5rem var(--space); }
.hatch-panel p { line-height: 1.55; }
.mini-fish { top: 4rem; left: 1.2rem; }

.scene-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); grid-template-rows: auto auto; gap: 2rem; align-content: center; }
.workbench-shell { padding: clamp(1.5rem, 4vw, 3rem); transform: rotate(-2deg); }
.module-tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.module-tab { padding: .75rem 1rem; border-radius: 999px; }
.code-ice { padding: 1.2rem; transform: rotate(3deg) translateY(3rem); background: linear-gradient(135deg, rgba(7,16,25,.95), rgba(10,33,47,.96)); color: var(--cyan); }
.module-code { display: none; margin: 0; white-space: pre-wrap; font: 500 clamp(.9rem, 2vw, 1.25rem)/1.6 var(--jet); }
.module-code.is-visible { display: block; animation: thawIn .3s ease both; }
.valve-panel { grid-column: 2; min-height: 18rem; padding: 1.5rem; position: relative; color: var(--glass); background: linear-gradient(180deg, rgba(7,16,25,.9), rgba(140,154,166,.55)); transform: rotate(-4deg); }
.valve { padding: .8rem 1rem; border-radius: 999px; }
.bubble-column { position: absolute; inset: 3rem 1rem 1rem; overflow: hidden; }
.loose-bubble { position: absolute; bottom: -2rem; width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid rgba(217,247,255,.75); background: radial-gradient(circle at 30% 28%, white, rgba(111,246,255,.2) 32%, transparent 65%); animation: riseBubble 2.8s ease-out forwards; left: var(--left); }

.scene-archive { display: grid; grid-template-columns: .85fr 1fr; gap: 2rem; align-items: center; }
.archive-map { padding: clamp(1.5rem, 4vw, 3rem); transform: rotate(3deg); }
.archive-drawer { padding: 1.2rem; transform: rotate(-2deg) translateY(5rem); }
.final-plate { position: absolute; right: 7vw; bottom: 7vh; padding: 1rem 1.3rem; border: 1px solid rgba(221,231,238,.6); border-radius: 20px 4px 20px 4px; color: var(--deep); background: var(--chrome); transform: rotate(7deg); box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.final-plate span { display: block; font: .7rem var(--jet); color: var(--orange); }
.final-plate strong { font: 700 1.6rem var(--space); }

@keyframes grainDrift { 0% { transform: translate(0,0); } 100% { transform: translate(2px,-3px); } }
@keyframes chromeSweep { 0%, 45% { transform: translateX(-45%) rotate(5deg); } 70%, 100% { transform: translateX(45%) rotate(5deg); } }
@keyframes causticSwim { to { background-position: 120px -70px, -90px 80px; } }
@keyframes swimRight { from { transform: translateX(-10vw) translateY(0); } 50% { transform: translateX(55vw) translateY(-32px); } to { transform: translateX(112vw) translateY(18px); } }
@keyframes traceFlow { to { stroke-dashoffset: -160; } }
@keyframes hatchSnap { 0% { transform: translateY(-8px) scaleY(.94); opacity: 0; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes thawIn { 0% { filter: blur(6px); opacity: .2; } 100% { filter: blur(0); opacity: 1; } }
@keyframes riseBubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-14rem) translateX(22px) scale(1.1); opacity: 0; } }

@media (max-width: 820px) {
  .reef-nav { position: absolute; left: 1rem; right: auto; flex-wrap: wrap; }
  .scene { padding: 6rem 1rem 3rem; }
  .wordmark-plate { width: 100%; margin: 0; }
  .hero-labels, .tab-notes, .reef-trace, .coordinate { position: relative; inset: auto; width: auto; margin-top: 1rem; }
  .scene-entry, .scene-workbench, .scene-archive { grid-template-columns: 1fr; }
  .scene-specimens { display: block; }
  .specimen { margin: 1rem 0; }
  .valve-panel { grid-column: auto; }
  .bubble-note { right: 1rem; }
}