:root {
  /* Space Grotesk** for etched acrylic labels */
  --aqua: #74DFF2;
  --pool: #1268D6;
  --white: #F6FFFB;
  --green: #B8F23C;
  --coral: #FF6B8A;
  --violet: #7B5CFF;
  --graphite: #15313A;
  --frost: #C8F7FF;
  --display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
  --label: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--graphite);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(246, 255, 251, .95), transparent 18rem),
    radial-gradient(circle at 84% 24%, rgba(200, 247, 255, .72), transparent 20rem),
    linear-gradient(180deg, var(--aqua), var(--frost) 34%, var(--white) 70%, var(--aqua));
}

.font-compliance-token { position: fixed; inset: auto auto 100% 100%; width: 1px; height: 1px; overflow: hidden; }
.liquid-story { position: relative; isolation: isolate; }
.liquid-story::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.44) 0 8%, transparent 24%),
    radial-gradient(ellipse at 75% 18%, rgba(184,242,60,.18), transparent 20%),
    repeating-radial-gradient(circle at 40% 20%, rgba(246,255,251,.22) 0 2px, transparent 2px 16px);
  filter: blur(.2px);
}

.tilt-room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 56px);
  perspective: 1200px;
}

.aero-slab {
  position: relative;
  width: min(1180px, 92vw);
  min-height: min(760px, 84vh);
  border: 2px solid rgba(246, 255, 251, .86);
  border-radius: 64px 42px 72px 48px / 48px 68px 46px 76px;
  background:
    linear-gradient(135deg, rgba(246,255,251,.66), rgba(200,247,255,.28) 28%, rgba(116,223,242,.16) 52%, rgba(246,255,251,.56)),
    radial-gradient(circle at 22% 18%, rgba(246,255,251,.82), transparent 10rem),
    rgba(200,247,255,.3);
  box-shadow:
    inset 0 0 28px rgba(246,255,251,.82),
    inset 22px 22px 46px rgba(255,255,255,.35),
    inset -24px -34px 58px rgba(18,104,214,.16),
    0 30px 84px rgba(18,104,214,.26),
    0 8px 0 rgba(246,255,251,.5);
  backdrop-filter: blur(15px) saturate(1.55);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
  transition: transform .4s ease-out, border-radius 1.2s ease;
}

.aero-slab::before,
.aero-slab::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.aero-slab::before { inset: 16px; border: 1px solid rgba(21,49,58,.14); box-shadow: inset 0 0 0 8px rgba(246,255,251,.16); }
.aero-slab::after { inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.62) 0 8%, transparent 9% 38%, rgba(255,255,255,.24) 39% 44%, transparent 45%); mix-blend-mode: screen; }

.caustic-light {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    repeating-linear-gradient(116deg, transparent 0 38px, rgba(246,255,251,.32) 40px 43px, transparent 46px 88px),
    repeating-linear-gradient(62deg, transparent 0 54px, rgba(116,223,242,.26) 56px 59px, transparent 62px 120px);
  filter: blur(8px);
  animation: causticDrift 14s linear infinite;
  opacity: .68;
}

.edge-nav { position: fixed; z-index: 50; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.frost-label {
  font: 800 12px/1 var(--label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(21,49,58,.82);
  text-decoration: none;
  border: 1px solid rgba(246,255,251,.78);
  background: rgba(246,255,251,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 24px rgba(18,104,214,.14);
  backdrop-filter: blur(9px);
}
.edge-nav .frost-label { padding: 12px 12px 12px 18px; border-radius: 20px 0 0 20px; }
.edge-nav .active { color: var(--pool); background: rgba(184,242,60,.58); }
.chamber-code { position: absolute; z-index: 10; top: 26px; left: 32px; padding: 12px 16px; border-radius: 18px; }

.slab-screw { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--white), var(--frost) 42%, rgba(18,104,214,.2)); border: 1px solid rgba(21,49,58,.18); box-shadow: inset -4px -5px 9px rgba(18,104,214,.18); }
.screw-a { left: 30px; top: 32px; } .screw-b { right: 34px; top: 34px; } .screw-c { left: 38px; bottom: 34px; } .screw-d { right: 42px; bottom: 38px; }

.route-map { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; pointer-events: none; }
.route-map path { fill: none; stroke: rgba(18,104,214,.42); stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 10px 12px rgba(18,104,214,.18)); stroke-dasharray: 2600; stroke-dashoffset: 2600; }
.is-visible .route-map path { animation: drawPath 3.2s ease forwards; }

.gel-channel { position: absolute; border: 2px solid rgba(246,255,251,.78); background: linear-gradient(135deg, rgba(246,255,251,.3), rgba(116,223,242,.25)); box-shadow: inset 0 0 22px rgba(246,255,251,.72), inset -12px -12px 24px rgba(18,104,214,.18), 0 18px 38px rgba(18,104,214,.12); }
.basin-channel { width: 32%; height: 20%; left: 33%; bottom: 12%; border-radius: 20px 20px 180px 180px; }
.pressure-gate { position: absolute; z-index: 8; display: grid; place-items: center; width: 102px; height: 54px; border-radius: 28px; background: var(--coral); border: 2px solid rgba(246,255,251,.7); box-shadow: inset 0 8px 12px rgba(255,255,255,.45), 0 18px 26px rgba(255,107,138,.24); color: var(--white); transition: border-radius .6s ease, transform .6s cubic-bezier(.18,1.6,.44,1); }
.pressure-gate span { font: 900 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.gate-one { left: 19%; top: 36%; transform: rotate(-8deg); } .gate-two { right: 20%; top: 28%; transform: rotate(9deg); background: var(--green); color: var(--graphite); }
.is-visible .pressure-gate { border-radius: 42px 12px 42px 12px; transform: rotate(0deg) scale(1.04); }

.letter-tray { position: absolute; inset: 0; z-index: 5; }
.letter-capsule {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(104px, 13vw, 174px);
  height: clamp(128px, 16vw, 218px);
  border: 2px solid rgba(246,255,251,.82);
  border-radius: 46% 54% 48% 52% / 60% 44% 56% 40%;
  background: linear-gradient(145deg, rgba(246,255,251,.64), rgba(116,223,242,.24) 42%, rgba(123,92,255,.14));
  box-shadow: inset 0 16px 20px rgba(246,255,251,.62), inset -18px -24px 34px rgba(18,104,214,.22), 0 20px 36px rgba(18,104,214,.22);
  color: var(--pool);
  animation: floatCapsule 4.8s ease-in-out infinite alternate;
  transition: transform .7s cubic-bezier(.18,1.6,.44,1), filter .4s;
}
.letter-capsule::before { content: ""; position: absolute; left: 18%; top: 12%; width: 52%; height: 18%; border-radius: 50%; background: rgba(246,255,251,.72); filter: blur(1px); transform: rotate(-12deg); }
.letter-capsule span { font: 900 clamp(92px, 13vw, 182px)/.78 var(--display); text-shadow: 0 3px 0 rgba(246,255,251,.88), 5px 8px 0 rgba(123,92,255,.14); }
.pump-p::after { content: ""; position: absolute; top: -18px; width: 42px; height: 30px; border-radius: 20px 20px 8px 8px; background: var(--coral); box-shadow: inset 0 5px 8px rgba(255,255,255,.44); }
.basin-u::after { content: ""; position: absolute; bottom: 22px; width: 54%; height: 22%; border-radius: 0 0 50px 50px; background: rgba(18,104,214,.2); }
.zig-z { clip-path: polygon(8% 8%, 92% 8%, 74% 34%, 92% 34%, 56% 92%, 8% 92%, 30% 60%, 8% 60%); }
.latch-l::after { content: ""; position: absolute; right: -22px; bottom: 22px; width: 64px; height: 24px; border-radius: 16px; background: var(--green); transform-origin: left center; box-shadow: inset 0 5px 10px rgba(255,255,255,.5); }
.capsule-p1 { left: 11%; top: 23%; transform: rotate(-11deg); }
.capsule-p2 { left: 27%; top: 10%; transform: rotate(8deg); animation-delay: -.8s; }
.capsule-u { left: 45%; top: 32%; color: var(--violet); animation-delay: -1.4s; }
.capsule-z1 { left: 60%; top: 13%; color: var(--coral); animation-delay: -2s; }
.capsule-z2 { left: 58%; top: 54%; color: var(--green); animation-delay: -2.8s; }
.capsule-l { right: 8%; top: 35%; color: var(--pool); animation-delay: -3.4s; }

.bubble-bead { position: absolute; z-index: 7; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--white) 0 14%, rgba(246,255,251,.56) 16% 34%, rgba(116,223,242,.32) 60%, rgba(18,104,214,.18)); border: 1px solid rgba(246,255,251,.78); box-shadow: inset -4px -5px 10px rgba(18,104,214,.12), 0 8px 16px rgba(18,104,214,.12); animation: bubbleRise 5s ease-in-out infinite; }
.bead-a { left: 14%; bottom: 16%; } .bead-b { left: 27%; bottom: 8%; animation-delay: -.7s; } .bead-c { left: 39%; bottom: 20%; animation-delay: -1.4s; } .bead-d { left: 54%; bottom: 12%; animation-delay: -2.1s; } .bead-e { left: 70%; bottom: 23%; animation-delay: -2.8s; } .bead-f { left: 84%; bottom: 15%; animation-delay: -3.5s; } .bead-g { left: 48%; bottom: 48%; animation-delay: -1.1s; } .bead-h { left: 76%; bottom: 50%; animation-delay: -2.2s; }

.waterproof-note { position: absolute; z-index: 12; max-width: 360px; padding: 20px 22px; border: 1px solid rgba(246,255,251,.78); border-radius: 26px; background: rgba(246,255,251,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 36px rgba(18,104,214,.16); backdrop-filter: blur(12px); }
.intro-note { right: 52px; bottom: 50px; }
.waterproof-note b { display: block; font: 900 54px/.85 var(--display); letter-spacing: -.05em; color: var(--pool); }
.waterproof-note p, .waterproof-note strong { margin: 8px 0 0; font-size: 17px; line-height: 1.35; }

.tilt-chapter { background: radial-gradient(circle at 15% 82%, rgba(123,92,255,.18), transparent 22rem); }
.tilt-slab { min-height: 72vh; transform: rotateZ(-3deg); }
.gravity-arrow { position: absolute; z-index: 4; font: 900 clamp(90px, 13vw, 176px)/1 var(--display); color: rgba(18,104,214,.18); text-shadow: 0 2px rgba(246,255,251,.82); }
.arrow-one { left: 12%; top: 22%; } .arrow-two { right: 18%; top: 18%; } .arrow-three { left: 42%; bottom: 16%; }
.tilt-meter { position: absolute; left: 9%; bottom: 9%; width: 300px; height: 26px; border-radius: 20px; background: rgba(246,255,251,.36); border: 1px solid rgba(246,255,251,.8); box-shadow: inset 0 0 12px rgba(18,104,214,.15); }
.tilt-meter span { display: block; width: 32%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--aqua)); transform: translateX(var(--meter, 0%)); transition: transform .2s; }
.tilt-channel { height: 86px; border-radius: 60px; }
.channel-a { left: 12%; top: 28%; width: 58%; transform: rotate(-10deg); }
.channel-b { right: 11%; top: 48%; width: 48%; transform: rotate(13deg); }
.channel-c { left: 24%; bottom: 21%; width: 52%; transform: rotate(-4deg); }
.roll-one, .roll-two, .roll-three { left: var(--roll, 8%); top: 27px; transition: left .2s ease-out; }
.clue-chip { right: 8%; bottom: 12%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.18,1.6,.44,1); }
.clue-chip span { display: block; margin-bottom: 8px; font: 900 12px/1 var(--label); letter-spacing: .14em; color: var(--violet); text-transform: uppercase; }
.tilt-chapter.is-visible .clue-chip { transform: rotateY(360deg) rotate(-2deg); }

.channel-room { min-height: 170vh; align-items: start; padding: 0; }
.horizontal-tube { position: sticky; top: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.tube-slab { width: 1780px; min-width: 1780px; min-height: 620px; margin-left: var(--tube-x, 2vw); border-radius: 72px; }
.z-route { inset: 13% 4%; width: 92%; height: 74%; }
.z-route path { stroke-width: 42; stroke: rgba(116,223,242,.58); }
.tube-title { position: absolute; z-index: 6; left: 120px; bottom: 72px; font: 900 78px/.85 var(--display); color: var(--pool); letter-spacing: -.06em; text-shadow: 0 4px 0 rgba(246,255,251,.8); }
.gasket { position: absolute; width: 92px; height: 92px; border-radius: 50%; border: 16px solid var(--green); background: rgba(246,255,251,.38); box-shadow: inset 0 0 18px rgba(18,104,214,.18), 0 14px 28px rgba(18,104,214,.12); }
.gasket-one { left: 360px; top: 150px; } .gasket-two { left: 900px; bottom: 100px; border-color: var(--coral); } .gasket-three { right: 220px; top: 226px; border-color: var(--violet); }
.long-gate { left: 1060px; top: 136px; width: 150px; background: var(--green); color: var(--graphite); }
.tube-bead { top: 214px; left: var(--bead-x, 120px); width: 36px; height: 36px; animation: none; transition: left .18s linear, top .18s linear; }
.bead-two { top: 360px; } .bead-three { top: 116px; }

.lock-slab { display: grid; place-items: center; }
.socket-board, .lock-word { position: absolute; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 14px); width: 90%; }
.molded-socket { width: clamp(82px, 12vw, 152px); height: clamp(112px, 15vw, 202px); border-radius: 42% 58% 52% 48%; border: 3px dashed rgba(21,49,58,.32); background: rgba(18,104,214,.08); box-shadow: inset 0 12px 26px rgba(18,104,214,.12); }
.lock-word { z-index: 7; }
.lock-letter { position: relative; display: grid; place-items: center; width: clamp(82px, 12vw, 152px); height: clamp(112px, 15vw, 202px); border-radius: 42% 58% 52% 48%; background: linear-gradient(145deg, rgba(246,255,251,.76), rgba(116,223,242,.3)); box-shadow: inset 0 16px 20px rgba(255,255,255,.7), inset -16px -20px 30px rgba(18,104,214,.18), 0 18px 32px rgba(18,104,214,.16); color: var(--pool); font: 900 clamp(84px, 13vw, 168px)/.8 var(--display); transition: transform .9s cubic-bezier(.18,1.6,.44,1); }
.lock-letter:nth-child(1) { transform: translate(-42vw, -8vh) rotate(-28deg); }
.lock-letter:nth-child(2) { transform: translate(-24vw, 18vh) rotate(18deg); }
.lock-letter:nth-child(3) { transform: translate(-4vw, -24vh) rotate(-12deg); color: var(--violet); }
.lock-letter:nth-child(4) { transform: translate(16vw, 20vh) rotate(24deg); color: var(--coral); }
.lock-letter:nth-child(5) { transform: translate(32vw, -18vh) rotate(-20deg); color: var(--green); }
.lock-letter:nth-child(6) { transform: translate(46vw, 14vh) rotate(36deg); }
.lock-room.is-snapped .lock-letter { transform: translate(0,0) rotate(0); }
.lock-room.is-snapped .lever-letter { animation: leverClick .95s .55s cubic-bezier(.18,1.6,.44,1) both; }
.release-ripple { position: absolute; width: 260px; height: 260px; border: 3px solid rgba(184,242,60,.5); border-radius: 50%; opacity: 0; transform: scale(.2); }
.lock-room.is-snapped .release-ripple { animation: rippleOut 1.4s .5s ease-out forwards; }
.lock-note { left: 50%; bottom: 8%; transform: translateX(-50%); text-align: center; }

.surface-room { background: linear-gradient(180deg, rgba(18,104,214,.16), rgba(246,255,251,.4)); }
.lagoon-slab { min-height: 78vh; display: grid; place-items: center; border-radius: 50% 42% 46% 54% / 38% 56% 44% 62%; overflow: hidden; }
.surface-word { position: relative; z-index: 9; display: flex; gap: 0; color: var(--pool); filter: drop-shadow(0 18px 22px rgba(18,104,214,.18)); animation: liquidWobble 5s ease-in-out infinite; }
.surface-word span { font: 900 clamp(76px, 17vw, 224px)/.78 var(--display); letter-spacing: -.08em; text-shadow: 0 4px 0 var(--white), 9px 13px 0 rgba(123,92,255,.12); }
.surface-word span:nth-child(3) { color: var(--violet); } .surface-word span:nth-child(4) { color: var(--coral); } .surface-word span:nth-child(5) { color: var(--green); }
.final-route path { stroke: rgba(184,242,60,.7); stroke-width: 10; }
.surface-rings span { position: absolute; left: 50%; top: 50%; width: 260px; height: 120px; border-radius: 50%; border: 2px solid rgba(246,255,251,.5); transform: translate(-50%,-50%) scale(1); animation: surfaceRing 3.8s ease-out infinite; }
.surface-rings span:nth-child(2) { animation-delay: -1.25s; } .surface-rings span:nth-child(3) { animation-delay: -2.5s; }
.surface-bubbles i { position: absolute; bottom: -40px; width: 24px; height: 24px; border-radius: 50%; background: rgba(246,255,251,.66); box-shadow: inset -4px -4px 8px rgba(18,104,214,.14); animation: bubbleRise 6s ease-in infinite; }
.surface-bubbles i:nth-child(1) { left: 18%; } .surface-bubbles i:nth-child(2) { left: 31%; animation-delay: -1s; } .surface-bubbles i:nth-child(3) { left: 48%; animation-delay: -2s; } .surface-bubbles i:nth-child(4) { left: 62%; animation-delay: -3s; } .surface-bubbles i:nth-child(5) { left: 76%; animation-delay: -4s; } .surface-bubbles i:nth-child(6) { left: 87%; animation-delay: -5s; }
.final-note { left: 50%; bottom: 8%; transform: translateX(-50%); text-align: center; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes causticDrift { to { transform: translate3d(90px, 40px, 0); } }
@keyframes floatCapsule { 0% { translate: 0 0; border-radius: 46% 54% 48% 52% / 60% 44% 56% 40%; } 100% { translate: 10px -18px; border-radius: 58% 42% 54% 46% / 42% 62% 38% 58%; } }
@keyframes bubbleRise { 0% { transform: translateY(0) scale(.8); opacity: .15; } 20%, 80% { opacity: .9; } 100% { transform: translateY(-52vh) scale(1.15); opacity: 0; } }
@keyframes leverClick { 0% { rotate: 0deg; } 45% { rotate: 22deg; } 100% { rotate: 0deg; } }
@keyframes rippleOut { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.8); } }
@keyframes liquidWobble { 0%, 100% { transform: skewX(0deg) translateY(0); } 35% { transform: skewX(-2deg) translateY(-8px); } 68% { transform: skewX(1.4deg) translateY(4px); } }
@keyframes surfaceRing { 0% { opacity: .8; transform: translate(-50%,-50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); } }

@media (max-width: 820px) {
  .edge-nav { display: none; }
  .tilt-room { padding: 14px; }
  .aero-slab { width: 96vw; min-height: 86vh; border-radius: 36px; }
  .chamber-code { left: 18px; top: 18px; font-size: 10px; }
  .letter-capsule { width: 94px; height: 124px; }
  .letter-capsule span { font-size: 92px; }
  .capsule-p1 { left: 6%; top: 22%; } .capsule-p2 { left: 35%; top: 12%; } .capsule-u { left: 58%; top: 28%; } .capsule-z1 { left: 12%; top: 52%; } .capsule-z2 { left: 42%; top: 61%; } .capsule-l { right: 7%; top: 52%; }
  .intro-note, .clue-chip, .lock-note, .final-note { left: 50%; right: auto; bottom: 24px; width: 86vw; transform: translateX(-50%); }
  .tube-slab { min-width: 1280px; width: 1280px; }
  .tube-title { font-size: 48px; left: 70px; }
  .socket-board, .lock-word { transform: scale(.72); width: 130%; }
  .surface-word { transform: scale(.9); }
}