:root {
  /* Typography tokens for compliance: IBM Plex Mono* Mono** from Google Fonts Inter* Inter** from Google Fonts Space Grotesk* Grotesk** from Google Fonts */
  --frost: #F5FBFF;
  --mist: #D7F0F5;
  --aqua: #9DE7E2;
  --lagoon: #0B1C2A;
  --reef: #123E46;
  --lavender: #D8D2FF;
  --coral: #FF9B8E;
  --gold: #F7D77A;
  --glass-line: rgba(245, 251, 255, 0.32);
  --x: 50vw;
  --y: 50vh;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 500vh;
  overflow-x: hidden;
  color: var(--frost);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--lagoon);
  cursor: none;
}

.font-compliance {
  position: fixed;
  left: -100vw;
  top: -100vh;
  opacity: 0;
  pointer-events: none;
}

button { font: inherit; cursor: none; }

.fixed-water {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(157, 231, 226, 0.22), transparent 26%),
    radial-gradient(circle at 76% 18%, rgba(216, 210, 255, 0.18), transparent 28%),
    linear-gradient(115deg, #0B1C2A 0%, #123E46 58%, #0B1C2A 100%);
}

.mesh {
  position: absolute;
  width: 58vw;
  height: 58vw;
  border-radius: 44% 56% 52% 48%;
  filter: blur(58px);
  opacity: 0.45;
  animation: meshDrift 24s ease-in-out infinite alternate;
}

.mesh-one { left: -12vw; top: 10vh; background: #9DE7E2; }
.mesh-two { right: -18vw; top: -12vh; background: #D8D2FF; animation-delay: -7s; }
.mesh-three { left: 36vw; bottom: -22vw; background: #D7F0F5; opacity: 0.28; animation-delay: -14s; }

.pearl-grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(245, 251, 255, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(216, 210, 255, 0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 44%, rgba(157, 231, 226, 0.2) 0 1px, transparent 2px);
  background-size: 92px 92px, 137px 137px, 61px 61px;
}

.top-rail {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--glass-line);
  background: rgba(11, 28, 42, 0.24);
  backdrop-filter: blur(18px);
}

.domain-mark, .section-label, .specimen-number, .scale-dot {
  font-family: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}

.domain-mark { color: rgba(245, 251, 255, 0.76); }

.scale-nav { display: flex; gap: 12px; align-items: center; }

.scale-dot {
  border: 1px solid rgba(245, 251, 255, 0.2);
  color: rgba(245, 251, 255, 0.44);
  background: rgba(245, 251, 255, 0.04);
  border-radius: 999px;
  padding: 6px 10px;
  transition: color 500ms ease, border-color 500ms ease, background 500ms ease;
}

.scale-dot.active {
  color: #0B1C2A;
  border-color: rgba(157, 231, 226, 0.8);
  background: rgba(157, 231, 226, 0.78);
}

.aquarium {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  width: 500vw;
  height: 100vh;
  will-change: transform;
}

.tank {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(245, 251, 255, 0.12);
}

.tank::before {
  content: "";
  position: absolute;
  inset: 8vh 4vw 9vh;
  border: 1px solid var(--glass-line);
  border-radius: 34px;
  background: linear-gradient(120deg, rgba(245, 251, 255, 0.12), rgba(245, 251, 255, 0.025));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 72px rgba(245, 251, 255, 0.06);
  pointer-events: none;
}

.tank::after {
  content: attr(data-tank);
  position: absolute;
  right: 5.6vw;
  bottom: 11vh;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(245, 251, 255, 0.42);
}

.depth-word {
  position: absolute;
  z-index: -1;
  font-family: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  font-size: clamp(116px, 18vw, 270px);
  line-height: 0.78;
  letter-spacing: -0.075em;
  font-weight: 700;
  color: rgba(11, 28, 42, 0.42);
  text-shadow: 0 0 28px rgba(245, 251, 255, 0.08);
  filter: blur(2.5px);
  white-space: nowrap;
}

.entrance-word { left: -5vw; top: 18vh; font-size: clamp(132px, 20vw, 310px); color: rgba(245, 251, 255, 0.13); }
.lagoon-word { left: 16vw; bottom: 7vh; color: rgba(216, 210, 255, 0.16); }
.library-word { left: -2vw; top: 14vh; color: rgba(157, 231, 226, 0.12); }
.engine-word { right: -7vw; top: 12vh; color: rgba(247, 215, 122, 0.12); }
.surface-word { left: 12vw; top: 21vh; color: rgba(11, 28, 42, 0.18); }

.glass-pane, .specimen-slide, .fish-index, .engine-core, .surface-card {
  position: absolute;
  border: 1px solid var(--glass-line);
  background: linear-gradient(140deg, rgba(245, 251, 255, 0.19), rgba(215, 240, 245, 0.06));
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 24px 90px rgba(11, 28, 42, 0.26), inset 0 1px 0 rgba(245, 251, 255, 0.28);
}

.focusable-copy {
  filter: blur(0.35px);
  transition: filter 650ms ease, transform 650ms ease, border-color 650ms ease;
}

.focusable-copy.in-focus {
  filter: blur(0);
  transform: translate3d(0, -5px, 0) scale(1.018);
  border-color: rgba(157, 231, 226, 0.7);
}

.entrance-pane {
  left: 9vw;
  top: 25vh;
  width: min(620px, 58vw);
  padding: 36px;
  border-radius: 30px;
}

h1, h2 {
  margin: 0;
  font-family: "Space Grotesk", "Space", "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
}

h1 { font-size: clamp(44px, 6vw, 94px); line-height: 0.88; max-width: 9ch; }
h2 { font-size: clamp(25px, 3.1vw, 54px); line-height: 0.94; }
p { margin: 16px 0 0; font-weight: 300; line-height: 1.65; color: rgba(245, 251, 255, 0.76); max-width: 48ch; }
.specimen-number { display: block; margin-bottom: 18px; color: #9DE7E2; }

.lens-ring, .cursor-lens {
  position: fixed;
  z-index: 50;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(245, 251, 255, 0.55);
  background: radial-gradient(circle, rgba(245, 251, 255, 0.18), rgba(157, 231, 226, 0.05) 56%, transparent 70%);
  box-shadow: 0 0 42px rgba(157, 231, 226, 0.15), inset 0 0 25px rgba(245, 251, 255, 0.15);
  backdrop-filter: blur(1px) contrast(1.15) saturate(1.2);
  mix-blend-mode: screen;
}

.cursor-lens { left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0.72); opacity: 0.72; }
.entrance-lens { position: absolute; left: 58vw; top: 32vh; animation: lensFloat 13s ease-in-out infinite; opacity: 0.5; }

.fish {
  position: absolute;
  z-index: 8;
  width: 144px;
  height: 66px;
  filter: drop-shadow(0 18px 24px rgba(11, 28, 42, 0.34));
}

.fish .body {
  position: absolute;
  left: 34px;
  top: 17px;
  width: 70px;
  height: 32px;
  border-radius: 56% 44% 48% 52%;
  background: linear-gradient(90deg, rgba(245, 251, 255, 0.78), currentColor);
  opacity: 0.9;
}

.fish .tail, .fish .fin {
  position: absolute;
  background: currentColor;
  opacity: 0.46;
  transform-origin: left center;
  animation: finFlicker 2.6s ease-in-out infinite;
}

.fish .tail { right: 6px; top: 10px; width: 54px; height: 48px; border-radius: 8% 82% 14% 88%; clip-path: polygon(0 48%, 100% 0, 76% 50%, 100% 100%); }
.fish .fin-top { left: 52px; top: 0; width: 70px; height: 24px; border-radius: 85% 15% 70% 30%; transform: rotate(-12deg); }
.fish .eye { position: absolute; left: 46px; top: 26px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #0B1C2A; border-left-color: transparent; }
.fish-coral { color: #FF9B8E; }
.fish-aqua { color: #9DE7E2; }
.fish-lavender { color: #D8D2FF; }
.fish-gold { color: #F7D77A; }
.fish-hero { left: -14vw; top: 39vh; animation: swimHero 22s cubic-bezier(0.42, 0, 0.25, 1) infinite; }
.fish-small { right: 14vw; bottom: 18vh; transform: scale(0.7); animation: idleFish 11s ease-in-out infinite alternate; }
.fish-library-guide { left: 62vw; top: 23vh; transform: scale(0.86); animation: librarySwim 19s ease-in-out infinite; }
.fish-engine { left: 18vw; bottom: 20vh; transform: scale(0.78); animation: idleFish 13s ease-in-out infinite alternate-reverse; }
.fish-exit { right: 17vw; top: 52vh; transform: scale(0.72); animation: exitSwim 15s ease-in-out infinite; }

.frost-streak { position: absolute; background: linear-gradient(180deg, transparent, rgba(245, 251, 255, 0.34), transparent); width: 1px; height: 60vh; top: 14vh; opacity: 0.45; }
.streak-a { left: 72vw; transform: rotate(9deg); }
.bubble { position: absolute; border: 1px solid rgba(245, 251, 255, 0.24); background: rgba(245, 251, 255, 0.08); border-radius: 50%; color: rgba(245, 251, 255, 0.46); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; }
.cluster-a { width: 54px; height: 54px; left: 78vw; top: 21vh; animation: bubbleRise 8s ease-in-out infinite alternate; }

.section-label { position: absolute; left: 8vw; top: 17vh; color: rgba(245, 251, 255, 0.58); }
.specimen-slide { width: min(440px, 35vw); padding: 26px; border-radius: 25px; }
.slide-one { left: 19vw; top: 28vh; }
.slide-two { right: 13vw; bottom: 18vh; }
.refraction-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(216, 210, 255, 0.28); box-shadow: inset 0 0 38px rgba(245, 251, 255, 0.08); }
.ring-one { width: 320px; height: 320px; left: 12vw; bottom: 12vh; }
.ring-two { width: 190px; height: 190px; right: 25vw; top: 18vh; }
.artifact.board-artifact { position: absolute; left: 48vw; top: 31vh; width: 190px; height: 190px; border: 1px solid rgba(247, 215, 122, 0.28); border-radius: 38%; transform: rotate(21deg); background: rgba(247, 215, 122, 0.04); }
.board-artifact span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(247, 215, 122, 0.72); }
.board-artifact span:nth-child(1) { left: 28px; top: 34px; }
.board-artifact span:nth-child(2) { left: 86px; top: 70px; background: rgba(255, 155, 142, 0.72); }
.board-artifact span:nth-child(3) { right: 28px; top: 110px; background: rgba(157, 231, 226, 0.72); }
.board-artifact span:nth-child(4) { left: 58px; bottom: 28px; background: rgba(216, 210, 255, 0.72); }

.library-orbit { position: absolute; inset: 18vh 8vw 14vh; }
.fish-index { width: 310px; min-height: 210px; padding: 24px; border-radius: 28px; }
.index-one { left: 2vw; top: 28vh; }
.index-two { left: 36vw; top: 13vh; }
.index-three { right: 2vw; bottom: 2vh; }
.mini-fish { width: 70px; height: 28px; border-radius: 58% 42% 50% 50%; margin-bottom: 18px; background: linear-gradient(90deg, rgba(245, 251, 255, 0.76), currentColor); position: relative; }
.mini-fish::after { content: ""; position: absolute; right: -30px; top: -4px; width: 36px; height: 36px; background: currentColor; opacity: 0.48; clip-path: polygon(0 50%, 100% 0, 72% 50%, 100% 100%); }
.mini-fish.coral { color: #FF9B8E; }
.mini-fish.lavender { color: #D8D2FF; }
.mini-fish.gold { color: #F7D77A; }

.engine-core { left: 9vw; top: 22vh; width: min(560px, 44vw); padding: 34px; border-radius: 34px; }
.game-board { position: absolute; right: 17vw; top: 27vh; width: 360px; height: 360px; border-radius: 34% 66% 44% 56%; border: 1px solid rgba(157, 231, 226, 0.35); background: radial-gradient(circle, rgba(157, 231, 226, 0.12), transparent 62%); transform: rotate(-8deg); }
.game-board i { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #F5FBFF; opacity: 0.74; box-shadow: 0 0 28px currentColor; color: #9DE7E2; }
.game-board i:nth-child(1) { left: 46px; top: 62px; }
.game-board i:nth-child(2) { left: 116px; top: 104px; color: #D8D2FF; }
.game-board i:nth-child(3) { left: 198px; top: 88px; color: #FF9B8E; }
.game-board i:nth-child(4) { right: 64px; top: 168px; color: #F7D77A; }
.game-board i:nth-child(5) { left: 152px; bottom: 94px; }
.game-board i:nth-child(6) { left: 68px; bottom: 72px; color: #D8D2FF; }
.game-board i:nth-child(7) { right: 78px; bottom: 52px; color: #FF9B8E; }
.current { position: absolute; border-radius: 50%; border: 1px solid rgba(245, 251, 255, 0.16); filter: blur(0.3px); animation: currentTurn 18s linear infinite; }
.current-one { width: 520px; height: 180px; right: 10vw; top: 33vh; }
.current-two { width: 420px; height: 140px; right: 20vw; top: 47vh; animation-direction: reverse; }

.tank-surface { background: linear-gradient(110deg, rgba(215, 240, 245, 0.34), rgba(216, 210, 255, 0.18), rgba(245, 251, 255, 0.2)); color: #123E46; }
.tank-surface::before { background: rgba(245, 251, 255, 0.24); }
.tank-surface p { color: rgba(18, 62, 70, 0.72); }
.surface-card { left: 14vw; top: 32vh; width: min(620px, 48vw); padding: 38px; border-radius: 36px; color: #123E46; background: rgba(245, 251, 255, 0.42); }
.surface-card .specimen-number { color: #123E46; }
.ripple-marks { position: absolute; right: 14vw; bottom: 22vh; display: flex; gap: 15px; }
.ripple-marks span { width: 58px; height: 12px; border-radius: 50%; border: 1px solid rgba(18, 62, 70, 0.28); }

.bottom-rail { position: fixed; z-index: 30; left: 28px; right: 28px; bottom: 24px; height: 3px; background: rgba(245, 251, 255, 0.15); border-radius: 999px; overflow: hidden; }
.water-progress { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9DE7E2, #D8D2FF, #FF9B8E, #F7D77A); box-shadow: 0 0 20px rgba(157, 231, 226, 0.45); transition: width 120ms linear; }

@keyframes meshDrift { to { transform: translate3d(8vw, -5vh, 0) rotate(18deg) scale(1.12); } }
@keyframes swimHero { 0% { transform: translate3d(0, 0, 0) scale(1); } 48% { transform: translate3d(68vw, -5vh, 0) scale(1.04); } 100% { transform: translate3d(126vw, 4vh, 0) scale(1); } }
@keyframes idleFish { to { margin-left: 7vw; margin-top: -4vh; } }
@keyframes librarySwim { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.86); } 50% { transform: translate3d(-22vw, 39vh, 0) scale(0.9); } }
@keyframes exitSwim { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.72); } 50% { transform: translate3d(-34vw, -10vh, 0) scale(0.76); } }
@keyframes finFlicker { 50% { transform: rotate(-4deg) scaleX(0.84); opacity: 0.64; } }
@keyframes lensFloat { 50% { transform: translate3d(-13vw, 8vh, 0) scale(1.1); } }
@keyframes bubbleRise { to { transform: translateY(-10vh); opacity: 0.7; } }
@keyframes currentTurn { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .top-rail { padding: 0 16px; }
  .scale-nav { gap: 5px; }
  .scale-dot { padding: 5px 7px; font-size: 9px; }
  .entrance-pane, .engine-core, .surface-card { left: 8vw; width: 84vw; }
  .specimen-slide, .fish-index { width: 76vw; }
  .slide-one, .index-one { left: 9vw; top: 25vh; }
  .slide-two, .index-two, .index-three { left: 17vw; right: auto; top: 56vh; bottom: auto; }
  .game-board { right: -16vw; opacity: 0.5; }
  .cursor-lens { display: none; }
  body, button { cursor: auto; }
}