:root {
  /* compliance token: AI”**—a AI*—a AI—a AI”*—a AI””*—a */
  --ai-token: "AI”**—a";
  --pearl: #F4FBF2;
  --deep: #063A4A;
  --coral: #FF7D6E;
  --algae: #8FE388;
  --cyan: #58DDEB;
  --violet: #8D7CFF;
  --bubble: #D8FFF8;
  --ink: #10202B;
  --lexend: Lexend, Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(216, 255, 248, .95), transparent 26rem),
    radial-gradient(circle at 84% 22%, rgba(143, 227, 136, .58), transparent 22rem),
    linear-gradient(180deg, var(--pearl) 0%, #bdf6ed 21%, #72dfeb 45%, #2b91a4 72%, var(--deep) 100%);
  font-family: var(--lexend);
}

.aqua-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.caustics {
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    repeating-radial-gradient(ellipse at 28% 18%, rgba(244, 251, 242, .35) 0 2px, transparent 3px 26px),
    repeating-linear-gradient(118deg, transparent 0 28px, rgba(216, 255, 248, .16) 30px 33px, transparent 35px 72px);
  filter: blur(1px) saturate(1.2);
  animation: causticDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.depth-meter {
  position: fixed;
  z-index: 20;
  left: 1.2rem;
  top: 50%;
  width: 3.4rem;
  transform: translateY(-50%);
  padding: .8rem .45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(216,255,248,.58), rgba(88,221,235,.24));
  border: 2px solid rgba(244,251,242,.72);
  box-shadow: inset 0 0 22px rgba(255,255,255,.42), 0 18px 42px rgba(6,58,74,.22);
  display: grid;
  place-items: center;
  gap: .65rem;
  backdrop-filter: blur(12px);
}

.meter-label {
  writing-mode: vertical-rl;
  font: 700 .56rem/1 var(--mono);
  letter-spacing: .13em;
  color: var(--deep);
}

.meter-track {
  position: relative;
  width: .42rem;
  height: 9rem;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(6,58,74,.18);
  border: 1px solid rgba(244,251,242,.65);
}

.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0%;
  border-radius: inherit;
  background: linear-gradient(var(--coral), var(--violet), var(--cyan));
}

.depth-meter a {
  color: var(--deep);
  text-decoration: none;
  font: 700 .62rem/1 var(--mono);
}

.cursor-lens {
  position: fixed;
  z-index: 18;
  width: 8.8rem;
  height: 8.8rem;
  margin: -4.4rem 0 0 -4.4rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.72);
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,.7), rgba(216,255,248,.25) 34%, rgba(88,221,235,.12) 58%, rgba(6,58,74,.09));
  border: 2px solid rgba(244,251,242,.75);
  box-shadow: inset -18px -22px 34px rgba(6,58,74,.13), inset 12px 12px 20px rgba(255,255,255,.62), 0 18px 36px rgba(6,58,74,.18);
  backdrop-filter: blur(1px) saturate(1.65) contrast(1.08);
  transition: opacity .25s, transform .25s;
}

.cursor-lens.active { opacity: 1; transform: scale(1); }

.bubble-field {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.bubble-field span {
  --x: 50vw;
  --s: 3rem;
  position: absolute;
  left: var(--x);
  bottom: -9rem;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(16,32,43,.68);
  font: 700 calc(var(--s) * .22)/1 var(--mono);
  background: radial-gradient(circle at 30% 24%, white 0 8%, rgba(216,255,248,.88) 9% 22%, rgba(88,221,235,.34) 45%, rgba(244,251,242,.1) 70%);
  border: 1px solid rgba(244,251,242,.65);
  box-shadow: inset 8px 9px 14px rgba(255,255,255,.55), inset -10px -12px 22px rgba(6,58,74,.14);
  animation: bubbleRise var(--d, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
  transform: translate3d(var(--pushX, 0px), var(--pushY, 0px), 0);
}

.bubble-field span::after { content: attr(data-glyph); }
.bubble-field span:nth-child(1) { --x: 49vw; --s: 3rem; --d: 15s; --delay: -2s; }
.bubble-field span:nth-child(2) { --x: 58vw; --s: 1.8rem; --d: 12s; --delay: -7s; }
.bubble-field span:nth-child(3) { --x: 42vw; --s: 4.6rem; --d: 22s; --delay: -12s; }
.bubble-field span:nth-child(4) { --x: 72vw; --s: 2.2rem; --d: 18s; --delay: -4s; }
.bubble-field span:nth-child(5) { --x: 24vw; --s: 3.7rem; --d: 20s; --delay: -11s; }
.bubble-field span:nth-child(6) { --x: 66vw; --s: 2.6rem; --d: 14s; --delay: -8s; }
.bubble-field span:nth-child(7) { --x: 35vw; --s: 3.2rem; --d: 19s; --delay: -3s; }
.bubble-field span:nth-child(8) { --x: 82vw; --s: 1.7rem; --d: 13s; --delay: -9s; }
.bubble-field span:nth-child(9) { --x: 15vw; --s: 4rem; --d: 23s; --delay: -15s; }
.bubble-field span:nth-child(10) { --x: 52vw; --s: 2.1rem; --d: 16s; --delay: -13s; }
.bubble-field span:nth-child(11) { --x: 76vw; --s: 2.9rem; --d: 21s; --delay: -17s; }
.bubble-field span:nth-child(12) { --x: 30vw; --s: 1.9rem; --d: 11s; --delay: -5s; }
.bubble-field span:nth-child(13) { --x: 62vw; --s: 3.8rem; --d: 25s; --delay: -19s; }
.bubble-field span:nth-child(14) { --x: 88vw; --s: 2rem; --d: 17s; --delay: -6s; }
.bubble-field span:nth-child(15) { --x: 19vw; --s: 2.7rem; --d: 14s; --delay: -1s; }
.bubble-field span:nth-child(16) { --x: 46vw; --s: 2.3rem; --d: 18s; --delay: -10s; }

.mediation-column { position: relative; z-index: 1; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 6vw, 7rem);
  display: grid;
  align-items: center;
  overflow: clip;
}

.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: 2rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep);
  background: rgba(216,255,248,.48);
  border: 1px solid rgba(244,251,242,.7);
  box-shadow: inset 0 0 18px rgba(255,255,255,.42);
}

.tank-glass {
  position: relative;
  min-height: 78vh;
  border-radius: 5rem 5rem 8rem 8rem / 4rem 4rem 9rem 9rem;
  border: 3px solid rgba(244,251,242,.74);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.55), transparent 20%),
    radial-gradient(ellipse at 72% 70%, rgba(141,124,255,.22), transparent 35%),
    linear-gradient(145deg, rgba(216,255,248,.54), rgba(88,221,235,.25) 42%, rgba(143,227,136,.22));
  box-shadow: inset 0 0 80px rgba(255,255,255,.35), inset 0 -60px 110px rgba(6,58,74,.16), 0 30px 80px rgba(6,58,74,.2);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.tank-glass::after, .glass-tab::after, .context-sieve::after, .porthole::after {
  content: "";
  position: absolute;
  inset: 1rem auto auto 9%;
  width: 42%;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  filter: blur(.4px);
  transform: rotate(-8deg);
}

.waterline {
  position: absolute;
  inset: 22% -5% auto;
  height: 5.5rem;
  background: linear-gradient(180deg, rgba(244,251,242,.14), rgba(216,255,248,.58), rgba(88,221,235,.1));
  clip-path: polygon(0 35%, 12% 50%, 24% 38%, 36% 55%, 50% 34%, 64% 49%, 80% 33%, 100% 53%, 100% 100%, 0 100%);
  animation: waterFlex 7s ease-in-out infinite alternate;
}

.brand-behind {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  font: 900 clamp(4.2rem, 13vw, 13rem)/.82 var(--lexend);
  letter-spacing: -.09em;
  color: rgba(6,58,74,.46);
  text-shadow: 0 2px rgba(255,255,255,.5), 0 18px 30px rgba(88,221,235,.28);
  filter: url(#none) blur(.2px);
  animation: titleRipple 5s ease-in-out infinite;
  white-space: nowrap;
}

.elevator-capsule {
  position: absolute;
  right: 10%;
  top: 17%;
  width: 8rem;
  height: 23rem;
  border-radius: 999px;
  border: 2px solid rgba(244,251,242,.78);
  background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(88,221,235,.2), rgba(216,255,248,.34));
  box-shadow: inset 16px 0 18px rgba(255,255,255,.42), inset -18px -8px 30px rgba(6,58,74,.12), 0 24px 42px rgba(6,58,74,.18);
  animation: buoy 6s ease-in-out infinite;
}

.capsule-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font: 800 1.1rem/1 var(--mono);
  letter-spacing: .25em;
  color: var(--deep);
}

.capsule-glow {
  position: absolute;
  left: 18%;
  top: 8%;
  width: 23%;
  height: 72%;
  border-radius: 999px;
  background: rgba(255,255,255,.48);
}

.glass-tab {
  position: relative;
  max-width: 38rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 2.2rem 4rem 2.2rem 4.8rem;
  border: 2px solid rgba(244,251,242,.72);
  background: linear-gradient(135deg, rgba(244,251,242,.68), rgba(216,255,248,.34) 50%, rgba(88,221,235,.24));
  box-shadow: inset 0 0 34px rgba(255,255,255,.45), 0 24px 56px rgba(6,58,74,.19);
  backdrop-filter: blur(18px) saturate(1.3);
}

.hero-tab { position: absolute; left: 8%; bottom: 8%; }
.side-tab { margin-left: auto; margin-right: 7vw; transform: rotate(-2deg); }
.nursery-tab { margin-left: 12vw; transform: rotate(2deg); }
.lock-tab { margin-left: auto; margin-right: 12vw; }
.release-tab { margin-left: 8vw; }

.calibration {
  display: block;
  margin-bottom: .8rem;
  font: 700 .69rem/1.45 var(--mono);
  letter-spacing: .12em;
  color: rgba(6,58,74,.76);
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--deep);
  text-wrap: balance;
}

h1 { font-size: clamp(3.1rem, 8vw, 7.5rem); line-height: .84; letter-spacing: -.045em; }
h2 { font-size: clamp(2.7rem, 6vw, 6.2rem); line-height: .88; letter-spacing: -.035em; }

p {
  margin: 1.1rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
  line-height: 1.65;
  color: rgba(16,32,43,.84);
}

.oval-control {
  margin-top: 1.4rem;
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.45rem;
  background: radial-gradient(circle at 30% 20%, white, var(--bubble) 30%, var(--cyan));
  color: var(--deep);
  font: 900 .82rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: inset 0 6px 10px rgba(255,255,255,.72), inset 0 -8px 18px rgba(6,58,74,.16), 0 14px 28px rgba(6,58,74,.22);
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
}

.oval-control:hover { transform: translateY(-3px) scale(1.03); filter: saturate(1.18); }
.oval-control.coral { background: radial-gradient(circle at 30% 20%, white, #ffd1ca 35%, var(--coral)); }

.porthole {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 8px solid rgba(216,255,248,.42);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.84), rgba(88,221,235,.32) 40%, rgba(6,58,74,.18));
  box-shadow: inset 18px 18px 32px rgba(255,255,255,.36), inset -18px -20px 36px rgba(6,58,74,.17), 0 22px 48px rgba(6,58,74,.2);
  backdrop-filter: blur(10px) saturate(1.4);
}

.phrase-porthole { right: 22%; bottom: 9%; width: 16rem; height: 16rem; }
.phrase-porthole span { font: 700 2.4rem/.9 var(--serif); color: var(--deep); text-align: center; transform: rotate(-9deg); }

.sieve-chamber { background: linear-gradient(180deg, rgba(88,221,235,.05), rgba(216,255,248,.18)); }
.pressure-ring {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: 48vw;
  height: 48vw;
  min-width: 32rem;
  min-height: 32rem;
  border-radius: 50%;
  border: 2.2rem solid rgba(216,255,248,.26);
  box-shadow: inset 0 0 0 1px rgba(244,251,242,.75), inset 0 0 70px rgba(6,58,74,.14), 0 28px 70px rgba(6,58,74,.17);
}

.membrane {
  position: absolute;
  left: 4vw;
  right: 4vw;
  top: 48%;
  height: 4rem;
  background: linear-gradient(90deg, transparent, rgba(216,255,248,.55), rgba(143,227,136,.3), transparent);
  filter: blur(.2px);
  clip-path: polygon(0 36%, 10% 58%, 22% 39%, 34% 61%, 48% 42%, 61% 60%, 76% 35%, 88% 56%, 100% 38%, 100% 100%, 0 100%);
  animation: membraneFlex 5s ease-in-out infinite alternate;
}

.context-sieve {
  position: absolute;
  left: 15vw;
  top: 24vh;
  width: 27rem;
  height: 27rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.8rem solid rgba(244,251,242,.56);
  background:
    repeating-conic-gradient(from 12deg, rgba(6,58,74,.2) 0 4deg, transparent 4deg 18deg),
    radial-gradient(circle, rgba(216,255,248,.52), rgba(88,221,235,.16) 60%, rgba(6,58,74,.12));
  box-shadow: inset 0 0 45px rgba(255,255,255,.4), 0 26px 60px rgba(6,58,74,.24);
  animation: slowSpin 24s linear infinite;
}

.context-sieve span {
  position: absolute;
  font: 900 1.2rem/1 var(--mono);
  color: var(--deep);
  background: rgba(244,251,242,.58);
  padding: .45rem .55rem;
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(255,255,255,.5);
}
.context-sieve span:nth-child(1) { transform: translate(-5rem, -8rem); }
.context-sieve span:nth-child(2) { transform: translate(3rem, -7rem); color: var(--coral); }
.context-sieve span:nth-child(3) { transform: translate(7rem, -2rem); }
.context-sieve span:nth-child(4) { transform: translate(5rem, 6rem); }
.context-sieve span:nth-child(5) { transform: translate(-1rem, 8rem); color: var(--violet); }
.context-sieve span:nth-child(6) { transform: translate(-8rem, 4rem); }
.context-sieve span:nth-child(7) { transform: translate(-9rem, -2rem); color: var(--coral); }
.context-sieve span:nth-child(8) { transform: translate(0, 0); }
.context-sieve span:nth-child(9) { transform: translate(9rem, 3rem); }

.curved-rail {
  position: absolute;
  left: 7vw;
  bottom: 8vh;
  width: 42rem;
  height: 11rem;
  border-radius: 50%;
  border-top: 2px solid rgba(244,251,242,.8);
  display: grid;
  place-items: start center;
  padding-top: 1rem;
  font: 700 clamp(2.2rem, 5vw, 5rem)/.9 var(--serif);
  color: rgba(6,58,74,.6);
  transform: rotate(7deg);
}

.tube {
  position: absolute;
  left: 6vw;
  top: 12vh;
  width: 8rem;
  height: 74vh;
  border-radius: 999px;
  border: 2px solid rgba(244,251,242,.66);
  background: linear-gradient(90deg, rgba(255,255,255,.38), rgba(88,221,235,.18), rgba(143,227,136,.14));
  box-shadow: inset 16px 0 24px rgba(255,255,255,.38), inset -18px 0 34px rgba(6,58,74,.1);
  overflow: hidden;
}
.tube span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(216,255,248,.55);
  font: 700 .72rem/1 var(--mono);
  color: var(--deep);
  animation: tubeFloat 9s linear infinite;
}
.tube span:nth-child(2) { animation-delay: -3s; }
.tube span:nth-child(3) { animation-delay: -6s; }

.jelly-prompt {
  position: absolute;
  right: 12vw;
  top: 16vh;
  width: 26rem;
  height: 26rem;
  border-radius: 45% 55% 50% 50%;
  background: radial-gradient(circle at 37% 24%, rgba(255,255,255,.84), rgba(216,255,248,.52) 28%, rgba(141,124,255,.18) 62%, transparent 70%);
  border: 2px solid rgba(244,251,242,.58);
  box-shadow: inset 0 0 54px rgba(255,255,255,.32), 0 22px 55px rgba(6,58,74,.18);
  animation: jelly 6s ease-in-out infinite;
}
.jelly-prompt::before {
  content: "prompt cluster";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  font: 800 .82rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--deep);
}
.jelly-prompt i {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 2px;
  height: 12rem;
  transform-origin: top;
  background: linear-gradient(var(--cyan), transparent);
  border-radius: 99px;
}
.jelly-prompt i:nth-child(1) { transform: rotate(-38deg); }
.jelly-prompt i:nth-child(2) { transform: rotate(-23deg); }
.jelly-prompt i:nth-child(3) { transform: rotate(-7deg); }
.jelly-prompt i:nth-child(4) { transform: rotate(10deg); }
.jelly-prompt i:nth-child(5) { transform: rotate(27deg); }
.jelly-prompt i:nth-child(6) { transform: rotate(43deg); }

.specimen-row {
  position: absolute;
  right: 9vw;
  bottom: 9vh;
  display: flex;
  gap: .8rem;
  transform: rotate(-3deg);
}
.specimen-row span {
  padding: 1.1rem .9rem;
  border-radius: 1rem 1rem 2rem 2rem;
  min-width: 4.6rem;
  text-align: center;
  background: linear-gradient(rgba(244,251,242,.62), rgba(88,221,235,.22));
  border: 1px solid rgba(244,251,242,.75);
  font: 800 .72rem/1 var(--mono);
  color: var(--deep);
}

.rubber-seals {
  position: absolute;
  left: 7vw;
  top: 22vh;
  width: min(47rem, 72vw);
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 8rem;
  background: linear-gradient(90deg, rgba(6,58,74,.1), rgba(216,255,248,.35), rgba(6,58,74,.08));
  border: 2px solid rgba(244,251,242,.58);
  box-shadow: inset 0 0 48px rgba(255,255,255,.3), 0 28px 65px rgba(6,58,74,.18);
}
.rubber-seals span {
  width: 15%;
  height: 82%;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 23%, var(--bubble), var(--cyan) 36%, var(--deep));
  box-shadow: inset 10px 12px 18px rgba(255,255,255,.35), inset -10px -14px 20px rgba(6,58,74,.2);
  transform: rotate(var(--seal, 0deg)) scaleX(var(--open, 1));
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.rubber-seals.open span:nth-child(odd) { --seal: 18deg; --open: .58; }
.rubber-seals.open span:nth-child(even) { --seal: -18deg; --open: .58; }

.gauge {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(244,251,242,.62), rgba(88,221,235,.25));
  border: 1.3rem solid rgba(216,255,248,.36);
  box-shadow: inset 0 0 30px rgba(255,255,255,.4), 0 16px 40px rgba(6,58,74,.2);
}
.gauge b {
  width: 42%;
  height: 4px;
  background: var(--coral);
  border-radius: 99px;
  transform-origin: right;
  transform: rotate(var(--needle, -35deg));
  transition: transform .5s ease;
}
.gauge span { position: absolute; bottom: 2.4rem; font: 800 .67rem/1 var(--mono); color: var(--deep); }

.release-pool {
  position: absolute;
  inset: 23vh 7vw auto auto;
  width: min(42rem, 76vw);
  min-height: 28rem;
  border-radius: 45% 55% 38% 62% / 58% 42% 58% 42%;
  padding: 6rem 3rem;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.72), rgba(216,255,248,.45) 32%, rgba(143,227,136,.26) 62%, rgba(88,221,235,.2));
  border: 3px solid rgba(244,251,242,.72);
  box-shadow: inset 0 0 70px rgba(255,255,255,.36), 0 28px 70px rgba(6,58,74,.26);
  animation: poolMorph 9s ease-in-out infinite alternate;
}
.release-pool p {
  margin: .75rem 0;
  padding: .85rem 1rem;
  border-radius: 999px;
  text-align: center;
  background: rgba(244,251,242,.55);
  font: 800 clamp(1rem, 2vw, 1.6rem)/1.1 var(--lexend);
  color: var(--deep);
  transform: translateX(var(--sentenceShift, 0px));
  transition: transform .35s ease;
}
.final-mark {
  position: absolute;
  right: 8vw;
  bottom: 5vh;
  font: 900 clamp(3rem, 10vw, 9rem)/1 var(--lexend);
  letter-spacing: -.08em;
  color: rgba(216,255,248,.34);
  text-shadow: 0 2px rgba(255,255,255,.25);
}

@keyframes bubbleRise {
  0% { transform: translate3d(var(--pushX, 0px), 8rem, 0) scale(.82); opacity: 0; }
  12% { opacity: .92; }
  50% { transform: translate3d(calc(var(--pushX, 0px) + 2.5rem), -52vh, 0) scale(1); }
  100% { transform: translate3d(calc(var(--pushX, 0px) - 2rem), -116vh, 0) scale(.72); opacity: 0; }
}

@keyframes causticDrift { to { transform: translate3d(-4%, 3%, 0) rotate(2deg) scale(1.04); } }
@keyframes waterFlex { to { transform: translateX(3%); clip-path: polygon(0 50%, 12% 34%, 24% 55%, 36% 38%, 50% 58%, 64% 35%, 80% 55%, 100% 35%, 100% 100%, 0 100%); } }
@keyframes titleRipple { 0%,100% { letter-spacing: -.09em; transform: translate(-50%, -50%) skewX(-2deg); } 50% { letter-spacing: -.065em; transform: translate(-50%, -50%) skewX(3deg) scaleY(.95); } }
@keyframes buoy { 50% { transform: translateY(1rem) rotate(1deg); } }
@keyframes membraneFlex { to { transform: translateY(1.3rem) scaleY(1.25); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes tubeFloat { from { top: 105%; } to { top: -10%; } }
@keyframes jelly { 50% { transform: translateY(1rem) scaleX(1.04) scaleY(.97); border-radius: 55% 45% 46% 54%; } }
@keyframes poolMorph { to { border-radius: 58% 42% 54% 46% / 44% 56% 44% 56%; transform: translateY(.8rem); } }

@media (max-width: 820px) {
  .depth-meter { left: .4rem; transform: translateY(-50%) scale(.82); transform-origin: left center; }
  .chamber { padding-left: 4.3rem; }
  .brand-behind { font-size: 4.2rem; white-space: normal; text-align: center; }
  .hero-tab, .phrase-porthole, .elevator-capsule, .context-sieve, .jelly-prompt, .release-pool, .rubber-seals, .gauge { position: relative; inset: auto; right: auto; left: auto; top: auto; bottom: auto; margin: 1rem 0; }
  .tank-glass { padding: 8rem 1rem 2rem; display: grid; gap: 1rem; }
  .phrase-porthole { width: 12rem; height: 12rem; }
  .pressure-ring, .curved-rail, .tube { display: none; }
  .context-sieve { width: 18rem; height: 18rem; }
  .jelly-prompt { width: 18rem; height: 18rem; margin-left: auto; }
  .rubber-seals { width: 100%; height: 12rem; }
  .release-pool { width: 100%; min-height: 20rem; padding: 3rem 1rem; }
  .side-tab, .nursery-tab, .lock-tab, .release-tab { margin: 1rem 0; }
}