:root {
  --abyss: #071B3A;
  --cyan: #00E5FF;
  --mint: #62FFB8;
  --coral: #FF5CBA;
  --lemon: #FFF05A;
  --paper: #D9FFF6;
  --violet: #7A4DFF;
  --kelp: #032826;
  --space: "Space Mono", "Courier New", monospace;
  --plex: "IBM Plex Mono", "Courier New", monospace;
  --inter: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--inter);
}

.design-keywords {
  display: none;
}

.aquarium {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 8% 20%, rgba(0, 229, 255, .22), transparent 26%),
    radial-gradient(circle at 80% 72%, rgba(122, 77, 255, .23), transparent 30%),
    linear-gradient(115deg, #071B3A 0%, #08254D 44%, #032826 100%);
}

.track {
  position: relative;
  display: flex;
  width: 500vw;
  min-width: 500vw;
  height: 100vh;
  z-index: 2;
}

.room {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  padding: clamp(28px, 5vw, 74px);
  overflow: hidden;
  scroll-snap-align: start;
  filter: blur(4px) saturate(.72);
  opacity: .7;
  transform: scale(.985);
  transition: filter .75s ease, opacity .75s ease, transform .75s ease;
}

.room.active {
  filter: blur(0) saturate(1.18);
  opacity: 1;
  transform: scale(1);
}

.room::before,
.room::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.room::before {
  inset: 2.5rem;
  border: 1px solid rgba(217, 255, 246, .18);
  border-radius: 34px;
  box-shadow: inset 0 0 42px rgba(0, 229, 255, .08), 0 0 30px rgba(0, 229, 255, .06);
}

.room::after {
  inset: 0;
  background-image:
    linear-gradient(rgba(217,255,246,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,255,246,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 74%);
}

.ambient,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient { z-index: 0; filter: blur(26px); opacity: .7; }
.ambient-cyan { background: radial-gradient(circle at 18% 34%, rgba(0, 229, 255, .25), transparent 30%); animation: breathe 12s ease-in-out infinite; }
.ambient-coral { background: radial-gradient(circle at 76% 62%, rgba(255, 92, 186, .2), transparent 33%); animation: breathe 15s ease-in-out infinite reverse; }

.scanlines {
  z-index: 5;
  background: repeating-linear-gradient(180deg, rgba(217, 255, 246, .035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: .28;
}

.watercolor {
  position: absolute;
  width: 60vw;
  height: 58vh;
  border-radius: 48% 52% 44% 56%;
  filter: blur(18px);
  opacity: .58;
  animation: tideMorph 13s ease-in-out infinite;
  pointer-events: none;
}

.wash-a { left: -10vw; top: 12vh; background: radial-gradient(circle, rgba(0,229,255,.5), rgba(98,255,184,.18) 44%, transparent 72%); }
.wash-b { left: 19vw; top: 8vh; background: radial-gradient(circle, rgba(255,92,186,.42), rgba(122,77,255,.23) 46%, transparent 73%); animation-delay: -2s; }
.wash-c { left: 36vw; top: 22vh; background: radial-gradient(circle, rgba(255,240,90,.36), rgba(0,229,255,.18) 48%, transparent 75%); animation-delay: -5s; }
.wash-d { left: 4vw; top: 7vh; background: radial-gradient(circle, rgba(122,77,255,.42), rgba(0,229,255,.2) 45%, transparent 76%); animation-delay: -3s; }
.wash-e { right: -6vw; top: 15vh; background: radial-gradient(circle, rgba(98,255,184,.42), rgba(255,92,186,.22) 50%, transparent 74%); animation-delay: -6s; }

.hud-label {
  position: absolute;
  top: clamp(22px, 4vh, 42px);
  left: clamp(24px, 5vw, 72px);
  z-index: 4;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--space);
  text-transform: lowercase;
  letter-spacing: .13em;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0,229,255,.5);
}

.hud-label span {
  color: var(--lemon);
}

.hud-label em {
  padding: 7px 12px;
  border: 1px solid rgba(0,229,255,.45);
  border-radius: 999px;
  font-style: normal;
  color: var(--paper);
  background: rgba(3, 40, 38, .28);
}

.wordmark-wrap {
  position: absolute;
  left: -3.2vw;
  top: 20vh;
  z-index: 3;
  max-width: 92vw;
}

.wordmark {
  position: relative;
  margin: 0;
  font-family: var(--space);
  font-size: clamp(64px, 13vw, 188px);
  line-height: .85;
  letter-spacing: -.08em;
  color: var(--paper);
  text-shadow: 0 0 24px rgba(0, 229, 255, .38), 0 16px 0 rgba(0, 229, 255, .08);
}

.wordmark::after {
  content: attr(data-ghost);
  position: absolute;
  left: .035em;
  top: .085em;
  color: transparent;
  -webkit-text-stroke: 1px var(--coral);
  opacity: .55;
  z-index: -1;
}

.subline {
  margin: 28px 0 0 9vw;
  max-width: 520px;
  font-family: var(--plex);
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--mint);
}

.chat,
.bubble {
  position: absolute;
  z-index: 4;
  font-family: var(--plex);
  font-weight: 600;
  line-height: 1.35;
}

.bubble {
  padding: 18px 24px;
  border: 1px solid rgba(217,255,246,.42);
  border-radius: 28px 28px 28px 8px;
  background: rgba(217, 255, 246, .12);
  box-shadow: 0 0 30px rgba(0, 229, 255, .15), inset 0 0 22px rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}

.main-bubble { right: 15vw; top: 30vh; color: var(--lemon); transform: rotate(-5deg); }
.soft-bubble { right: 8vw; bottom: 24vh; color: var(--coral); transform: rotate(4deg); opacity: .86; }
.closing-chat { right: 13vw; top: 22vh; color: var(--lemon); transform: rotate(5deg); }

.shell-mic {
  position: absolute;
  left: 21vw;
  bottom: 13vh;
  width: 110px;
  height: 78px;
  border-radius: 65% 38% 50% 50%;
  background: linear-gradient(135deg, var(--coral), var(--violet));
  box-shadow: 0 0 26px rgba(255,92,186,.44);
  transform: rotate(-9deg);
}

.shell-mic i,
.shell-mic b {
  position: absolute;
  content: "";
  display: block;
}

.shell-mic i {
  inset: 16px 20px;
  border-top: 3px solid rgba(217,255,246,.8);
  border-radius: 50%;
}

.shell-mic b {
  width: 13px;
  height: 70px;
  left: 50px;
  top: 60px;
  border-radius: 12px;
  background: var(--cyan);
}

.reef-shelf,
.ledger-glass,
.debrief-copy,
.tide-pass {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(217,255,246,.32);
  background: linear-gradient(135deg, rgba(217,255,246,.12), rgba(0,229,255,.06));
  box-shadow: 0 0 46px rgba(0,229,255,.14), inset 0 0 30px rgba(217,255,246,.055);
  backdrop-filter: blur(18px);
}

.reef-shelf {
  left: 9vw;
  top: 22vh;
  width: min(520px, 45vw);
  padding: 34px;
  border-radius: 42px 42px 18px 42px;
}

.panel-id {
  margin: 0 0 18px;
  font-family: var(--space);
  color: var(--lemon);
  letter-spacing: .1em;
  text-transform: lowercase;
  font-size: 12px;
}

h2 {
  margin: 0 0 18px;
  font-family: var(--plex);
  font-size: clamp(34px, 5vw, 76px);
  line-height: .96;
  letter-spacing: -.055em;
  color: var(--paper);
}

.reef-shelf p:not(.panel-id),
.debrief-copy p:not(.panel-id) {
  margin: 0;
  color: rgba(217,255,246,.82);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.65;
}

.pearl-field span {
  position: absolute;
  left: var(--x);
  bottom: -8vh;
  z-index: 4;
  width: calc(72px * var(--s));
  height: calc(72px * var(--s));
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(217,255,246,.58);
  background: radial-gradient(circle at 35% 28%, white, var(--paper) 18%, rgba(0,229,255,.28) 55%, rgba(98,255,184,.13));
  color: var(--kelp);
  font-family: var(--space);
  font-size: 10px;
  text-align: center;
  animation: pearlRise 9s ease-in-out infinite;
  animation-delay: var(--d);
}

.jelly {
  position: absolute;
  z-index: 4;
  width: 260px;
  padding: 22px 24px 36px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 45% 20%, rgba(217,255,246,.36), rgba(255,92,186,.18) 48%, rgba(122,77,255,.2));
  border: 1px solid rgba(255,92,186,.38);
  box-shadow: 0 0 32px rgba(255,92,186,.2);
  font-family: var(--plex);
  color: var(--paper);
  animation: jellyPulse 5.5s ease-in-out infinite;
}

.jelly::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -32px;
  height: 44px;
  background: repeating-linear-gradient(90deg, rgba(0,229,255,.55) 0 2px, transparent 2px 18px);
  filter: blur(.5px);
}

.jelly strong { display: block; font-size: 17px; color: var(--lemon); }
.jelly small { display: block; margin-top: 8px; color: var(--mint); }
.jelly-one { right: 12vw; top: 18vh; }
.swarm-a { left: 10vw; top: 22vh; }
.swarm-b { left: 41vw; top: 38vh; animation-delay: -1.5s; }
.swarm-c { right: 9vw; top: 17vh; animation-delay: -3s; }

.ledger-glass {
  left: 18vw;
  top: 17vh;
  width: min(660px, 58vw);
  padding: 38px;
  border-radius: 12px 54px 12px 54px;
}

.idea-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
}

.idea-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(3,40,38,.38);
  color: rgba(217,255,246,.88);
  font-family: var(--plex);
}

.idea-list b { color: var(--coral); font-family: var(--space); }

.bracket {
  position: absolute;
  width: 46px;
  height: 46px;
  border-color: var(--cyan);
  opacity: .9;
}
.top-left { left: -12px; top: -12px; border-left: 3px solid; border-top: 3px solid; }
.top-right { right: -12px; top: -12px; border-right: 3px solid; border-top: 3px solid; }

.tiny-podium {
  position: absolute;
  right: 17vw;
  bottom: 17vh;
  z-index: 4;
  display: flex;
  align-items: end;
  gap: 8px;
}

.tiny-podium span {
  width: 52px;
  background: linear-gradient(180deg, var(--coral), var(--violet));
  border-radius: 18px 18px 6px 6px;
  box-shadow: 0 0 24px rgba(122,77,255,.42);
}
.tiny-podium span:nth-child(1) { height: 58px; }
.tiny-podium span:nth-child(2) { height: 92px; background: linear-gradient(180deg, var(--lemon), var(--coral)); }
.tiny-podium span:nth-child(3) { height: 44px; }

.debrief-copy {
  left: 8vw;
  bottom: 14vh;
  width: min(580px, 50vw);
  padding: 36px;
  border-radius: 32px;
}

.tide-pass {
  left: 16vw;
  top: 20vh;
  width: min(610px, 55vw);
  padding: 38px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(217,255,246,.88), rgba(98,255,184,.74) 44%, rgba(0,229,255,.55));
  color: var(--kelp);
  transform: rotate(-3deg);
  box-shadow: 0 0 55px rgba(98,255,184,.35), inset 0 0 25px rgba(255,255,255,.35);
  transition: box-shadow .3s ease, transform .3s ease;
}

.tide-pass.pass-glow {
  transform: rotate(-1deg) translateY(-6px);
  box-shadow: 0 0 76px rgba(98,255,184,.58), 0 0 34px rgba(255,240,90,.36), inset 0 0 30px rgba(255,255,255,.45);
}

.tide-pass p,
.pass-code,
.stamp {
  font-family: var(--space);
  letter-spacing: .1em;
  text-transform: lowercase;
}

.tide-pass h2 { color: var(--kelp); }
.pass-code { color: var(--violet); }
.stamp {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 14px;
  border: 2px solid var(--coral);
  border-radius: 999px;
  color: var(--coral);
  transform: rotate(4deg);
}

.sonar {
  position: absolute;
  z-index: 3;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(0,229,255,.55);
  border-radius: 50%;
  animation: sonarPulse 3.6s ease-out infinite;
}
.sonar span,
.sonar::before,
.sonar::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: 1px solid rgba(98,255,184,.48);
  border-radius: 50%;
}
.sonar::before { inset: 10%; }
.sonar::after { inset: 38%; background: rgba(255,240,90,.5); box-shadow: 0 0 18px var(--lemon); }
.topic-one { right: 19vw; bottom: 30vh; }
.topic-two { right: 10vw; top: 20vh; }

.current-line {
  position: fixed;
  left: 0;
  top: calc(50vh - 50px);
  width: 500vw;
  height: 210px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(calc(var(--scroll-progress, 0) * -400vw));
}

.current-line path {
  fill: none;
  stroke: url(#none);
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 18 24;
  filter: drop-shadow(0 0 12px rgba(0,229,255,.75));
  animation: dashSwim 2.7s linear infinite;
  opacity: .8;
}

.current-node {
  position: absolute;
  z-index: 4;
  bottom: 22vh;
  left: 50%;
  padding: 7px 12px;
  border: 1px solid rgba(255,240,90,.5);
  border-radius: 999px;
  font-family: var(--space);
  font-size: 12px;
  color: var(--lemon);
  background: rgba(7,27,58,.58);
}

.reef-map {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 8;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(217,255,246,.26);
  border-radius: 999px;
  background: rgba(3, 40, 38, .62);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 28px rgba(0,229,255,.12);
}

.map-dot {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: transparent;
  color: rgba(217,255,246,.72);
  font-family: var(--space);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: lowercase;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

.map-dot span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: rgba(0,229,255,.16);
  box-shadow: 0 0 12px rgba(0,229,255,.28);
}

.map-dot.active {
  color: var(--kelp);
  background: var(--lemon);
  transform: translateY(-3px);
}

.map-dot.active span {
  border-color: var(--kelp);
  background: var(--coral);
}

@keyframes breathe {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2vw,-2vh,0) scale(1.08); }
}

@keyframes tideMorph {
  0%, 100% { transform: rotate(0deg) scale(1); border-radius: 48% 52% 44% 56%; }
  50% { transform: rotate(8deg) scale(1.08); border-radius: 58% 42% 60% 40%; }
}

@keyframes dashSwim { to { stroke-dashoffset: -84; } }

@keyframes sonarPulse {
  0% { transform: scale(.9); opacity: .42; }
  50% { opacity: .9; }
  100% { transform: scale(1.18); opacity: .35; }
}

@keyframes pearlRise {
  0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translate3d(18px, -94vh, 0) scale(1.05); opacity: 0; }
}

@keyframes jellyPulse {
  0%, 100% { transform: translateY(0) scale(1); border-radius: 50% 50% 42% 42%; }
  50% { transform: translateY(-16px) scale(1.045, .97); border-radius: 46% 54% 48% 40%; }
}

@media (max-width: 760px) {
  .room { padding: 24px; }
  .reef-shelf,
  .ledger-glass,
  .debrief-copy,
  .tide-pass { width: calc(100vw - 48px); left: 24px; }
  .jelly { width: 210px; }
  .jelly-one, .swarm-c { right: 7vw; }
  .swarm-b { left: 25vw; }
  .reef-map { width: calc(100vw - 28px); overflow-x: auto; justify-content: flex-start; }
  .map-dot { white-space: nowrap; }
}

/* Design compliance terms: Space Mono** in Bold for the wordmark; IBM Plex Mono** in SemiBold for speech fragments; Inter** for short explanatory passages and readable conversational notes. Start with `polytical.club` cropped across the left edge. A watercolor cyan wash should drift behind it while HUD brackets label the scene as `room_00 / tide lobby`. As the user scrolls horizontally. */