:root {
  /* Compliance tokens from DESIGN.md parser: Interpret simulation** simulation* */
  --compliance-font-token: "simulation** simulation*";
  --lagoon-glass: #63D7E8;
  --aero-sky: #B9F3FF;
  --gel-green: #7CFF9B;
  --pearl-shell: #F7FFF4;
  --deep-aquarium: #073B63;
  --chrome-lavender: #B8B6FF;
  --candy-coral: #FF6F91;
  --sunlit-lime: #D8FF4F;
  --outfit: Outfit, Avenir Next, Inter, system-ui, sans-serif;
  --rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --mono: "Chivo Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--deep-aquarium);
  font-family: var(--rounded);
  background:
    radial-gradient(circle at 72% 12%, rgba(216, 255, 79, 0.65), transparent 18rem),
    radial-gradient(circle at 18% 20%, rgba(184, 182, 255, 0.68), transparent 22rem),
    linear-gradient(145deg, var(--pearl-shell) 0%, var(--aero-sky) 38%, var(--lagoon-glass) 74%, #2c8ec0 100%);
}

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

.aqua-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    repeating-linear-gradient(90deg, rgba(247, 255, 244, 0.12) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(7, 59, 99, 0.07) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 74%);
}

.caustics {
  position: fixed;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.48;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(247, 255, 244, 0.7) 0 2%, transparent 9%),
    radial-gradient(ellipse at 50% 54%, rgba(216, 255, 79, 0.18) 0 3%, transparent 12%),
    radial-gradient(ellipse at 80% 26%, rgba(255, 255, 255, 0.55) 0 2%, transparent 10%);
  filter: blur(12px) url(#none);
  animation: causticDrift 14s ease-in-out infinite alternate;
}

.waterline {
  position: fixed;
  left: 0;
  top: 15vh;
  width: 100%;
  height: 7rem;
  pointer-events: none;
  z-index: 7;
  background:
    linear-gradient(to bottom, rgba(247, 255, 244, 0.72), rgba(185, 243, 255, 0.1) 48%, transparent),
    repeating-radial-gradient(ellipse at 50% 0%, rgba(99, 215, 232, 0.65) 0 2px, transparent 3px 18px);
  border-top: 1px solid rgba(247, 255, 244, 0.95);
  box-shadow: 0 13px 40px rgba(99, 215, 232, 0.4);
  transform: translateY(var(--water-shift, 0px));
}

.simulation-scroll { position: relative; z-index: 2; }

.pane {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 3rem);
  display: grid;
  align-items: center;
}

.pane::after {
  content: "";
  position: absolute;
  inset: 7% 5%;
  border: 1px solid rgba(247, 255, 244, 0.35);
  border-radius: 3.5rem;
  box-shadow: inset 0 0 36px rgba(247, 255, 244, 0.24), 0 25px 80px rgba(7, 59, 99, 0.12);
  pointer-events: none;
}

.boot-pond { background: radial-gradient(circle at 70% 35%, rgba(216,255,79,0.25), transparent 23rem); }
.nursery { background: radial-gradient(circle at 40% 48%, rgba(124,255,155,0.42), transparent 30rem); }
.weather { background: linear-gradient(180deg, rgba(185,243,255,0.18), rgba(247,255,244,0.55)); }
.shrine { background: radial-gradient(circle at 80% 50%, rgba(255,111,145,0.2), transparent 20rem); }
.future { background: radial-gradient(circle at 50% 50%, rgba(7,59,99,0.82), rgba(99,215,232,0.44), rgba(247,255,244,0.86)); }

.acrylic-window, .acrylic-card, .sky-widget, .final-lens {
  background: linear-gradient(145deg, rgba(247,255,244,0.45), rgba(185,243,255,0.22));
  border: 1px solid rgba(247,255,244,0.76);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.95),
    inset -18px -22px 45px rgba(7,59,99,0.08),
    0 25px 90px rgba(7,59,99,0.18);
  backdrop-filter: blur(22px) saturate(1.35);
}

.hero-lens {
  width: min(78vw, 920px);
  height: min(70vh, 620px);
  margin-left: 9vw;
  border-radius: 48% 52% 43% 57% / 54% 43% 57% 46%;
  display: grid;
  place-items: center;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}

.pond-surface {
  position: absolute;
  inset: 20% -6% auto -6%;
  height: 18%;
  background: linear-gradient(180deg, rgba(247,255,244,0.85), rgba(99,215,232,0.18));
  border-radius: 50%;
  filter: blur(1px);
  animation: ripple 5s ease-in-out infinite;
}

.wordmark {
  font-family: var(--outfit);
  font-size: clamp(4.5rem, 13vw, 13rem);
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--pearl-shell);
  text-shadow: 0 2px 0 var(--aero-sky), 0 8px 28px rgba(7,59,99,0.28), 0 0 42px rgba(216,255,79,0.38);
  filter: url(#none);
  animation: bootRise 2.6s cubic-bezier(.2,.9,.18,1) both;
}

.wordmark i { color: var(--candy-coral); font-style: normal; }
.wordmark strong { color: var(--sunlit-lime); font-weight: 800; }

.one-bubble {
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 8.2rem;
  height: 8.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  color: var(--deep-aquarium);
  background: radial-gradient(circle at 32% 28%, white, var(--sunlit-lime) 36%, rgba(99,215,232,0.6));
  box-shadow: inset -16px -19px 32px rgba(7,59,99,0.13), 0 0 36px rgba(216,255,79,0.7);
  animation: buoy 4s ease-in-out infinite;
}

.scene-copy, .weather-caption p, .shrine-copy, .final-lens p, .nursery-note p {
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  line-height: 1.7;
}

.scene-copy {
  position: absolute;
  left: 13%;
  bottom: 15%;
  color: var(--deep-aquarium);
}

.mono-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: rgba(247,255,244,0.55);
  border: 1px solid rgba(7,59,99,0.13);
}

.boot-chip { position: absolute; top: 14vh; right: 8vw; }
.folder-tab, .memory-tab {
  position: absolute;
  right: 13vw;
  bottom: 13vh;
  padding: 0.8rem 2.3rem 1rem;
  border-radius: 1.2rem 1.2rem 2rem 2rem;
  background: linear-gradient(180deg, var(--chrome-lavender), rgba(247,255,244,0.5));
  color: var(--deep-aquarium);
  box-shadow: 0 16px 34px rgba(7,59,99,0.13);
}

.jp-label {
  font-family: var(--rounded);
  color: var(--deep-aquarium);
  background: rgba(247,255,244,0.52);
  border: 1px solid rgba(247,255,244,0.72);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.8);
}

.vertical { writing-mode: vertical-rl; }
.hero-lens .vertical { position: absolute; left: 7%; top: 17%; }
.side-left { position: absolute; left: 4vw; top: 18vh; writing-mode: vertical-rl; }
.shrine-label { position: absolute; right: 12vw; top: 18vh; }

.capsule-orbit {
  width: min(92vw, 1020px);
  height: 62vh;
  margin-left: 4vw;
  position: relative;
  border-radius: 50%;
  border: 1px dashed rgba(247,255,244,0.78);
  transform: translate3d(calc(var(--mx, 0px) * -0.4), calc(var(--my, 0px) * 0.3), 0);
}

.sister-pod {
  position: absolute;
  top: 50%;
  width: clamp(12rem, 22vw, 19rem);
  height: clamp(15rem, 28vw, 23rem);
  transform: translateY(-50%);
  border-radius: 48% 52% 46% 54% / 58% 43% 57% 42%;
  background: radial-gradient(circle at 34% 22%, rgba(255,255,255,0.95), rgba(185,243,255,0.48) 32%, rgba(124,255,155,0.25));
  border: 1px solid rgba(247,255,244,0.82);
  box-shadow: inset -20px -25px 44px rgba(7,59,99,0.12), 0 24px 60px rgba(7,59,99,0.16);
  display: grid;
  place-items: center;
  animation: podPulse 3.4s ease-in-out infinite;
}
.pod-left { left: 7%; }
.pod-right { right: 7%; animation-delay: -1.7s; }
.pod-core { width: 42%; height: 42%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, white, var(--gel-green), var(--lagoon-glass)); box-shadow: 0 0 42px rgba(124,255,155,0.85); }
.sister-pod small { position: absolute; bottom: 16%; font-family: var(--mono); letter-spacing: 0.4em; }

.droplet-lane { position: absolute; inset: 0; }
.memory-drop {
  position: absolute;
  left: 49%; top: 50%;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50% 50% 48% 52%;
  background: radial-gradient(circle at 30% 25%, white, var(--sunlit-lime) 42%, var(--gel-green));
  box-shadow: 0 0 20px rgba(216,255,79,0.75);
  animation: exchange 4.5s ease-in-out infinite;
}
.d2 { animation-delay: -1.5s; width: 1.1rem; height: 1.1rem; }
.d3 { animation-delay: -3s; width: 2rem; height: 2rem; }

.nursery-note {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  width: min(34rem, 70vw);
  border-radius: 2.2rem;
  padding: 1.5rem 2rem;
}

h2 {
  font-family: var(--outfit);
  font-size: clamp(2.5rem, 7vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: 0.04em;
  margin: 0.45rem 0;
}

.sky-widget {
  width: min(82vw, 980px);
  height: 68vh;
  margin-left: auto;
  margin-right: 4vw;
  border-radius: 4rem 10rem 5rem 12rem;
  position: relative;
  overflow: hidden;
  transform: translate3d(calc(var(--mx, 0px) * 0.35), calc(var(--my, 0px) * -0.25), 0);
}
.weather-sun { position: absolute; right: 12%; top: 12%; width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; font: 800 5rem var(--outfit); background: radial-gradient(circle at 30% 28%, white, var(--sunlit-lime)); box-shadow: 0 0 60px rgba(216,255,79,0.8); }
.cloud { position: absolute; width: 15rem; height: 5rem; border-radius: 999px; background: rgba(247,255,244,0.78); box-shadow: 3rem -2rem 0 rgba(247,255,244,0.62), 6rem 0 0 rgba(247,255,244,0.5), inset 0 -12px 25px rgba(99,215,232,0.16); animation: cloudFloat 9s ease-in-out infinite; }
.cloud-one { left: 12%; top: 22%; }
.cloud-two { right: 24%; bottom: 24%; transform: scale(0.8); animation-delay: -4s; }
.calendar-tile { position: absolute; left: 11%; bottom: 15%; width: 15rem; padding: 1.2rem; border-radius: 1.8rem; background: linear-gradient(180deg, rgba(255,111,145,0.68), rgba(247,255,244,0.58)); box-shadow: 0 20px 42px rgba(7,59,99,0.16); }
.calendar-tile b, .calendar-tile span { display: block; }
.waveform { position: absolute; inset: auto 6% 12% 6%; width: 88%; height: 30%; fill: none; stroke-linecap: round; }
.waveform path { stroke: var(--deep-aquarium); stroke-width: 5; opacity: 0.38; stroke-dasharray: 900; animation: drawWave 8s linear infinite; }
.waveform path + path { stroke: var(--candy-coral); animation-delay: -3s; }
.weather-caption { position: absolute; left: 8vw; top: 15vh; width: min(34rem, 72vw); }

.control-shrine {
  width: min(68vw, 760px);
  min-height: 58vh;
  margin-left: 12vw;
  border-radius: 5rem;
  padding: clamp(1.6rem, 4vw, 4rem);
  transform: rotate(-2deg) translate3d(calc(var(--mx, 0px) * -0.2), calc(var(--my, 0px) * 0.2), 0);
}
.gel-controls { display: grid; gap: 1rem; margin: 2rem 0; }
.gel-toggle { font: 700 1rem var(--rounded); color: var(--deep-aquarium); border: 1px solid rgba(247,255,244,0.9); border-radius: 999px; padding: 1rem 1.2rem; background: linear-gradient(180deg, rgba(247,255,244,0.85), rgba(99,215,232,0.28)); box-shadow: inset 0 2px 4px white, 0 14px 26px rgba(7,59,99,0.12); cursor: pointer; text-align: left; transition: transform .25s ease, background .25s ease; }
.gel-toggle span { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: 0.75rem; border-radius: 50%; background: var(--chrome-lavender); box-shadow: inset 0 1px 2px white; vertical-align: -0.18rem; }
.gel-toggle.active { background: linear-gradient(180deg, rgba(216,255,79,0.85), rgba(124,255,155,0.45)); }
.gel-toggle.active span { background: var(--candy-coral); box-shadow: 0 0 16px rgba(255,111,145,0.75); }
.gel-toggle:hover { transform: translateY(-3px) scale(1.01); }
.chrome-screw { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; background: radial-gradient(circle at 32% 24%, white, var(--chrome-lavender) 45%, #6c9ec8); box-shadow: inset -8px -9px 15px rgba(7,59,99,0.22), 0 10px 24px rgba(7,59,99,0.16); }
.chrome-screw::after { content: ""; position: absolute; inset: 47% 18%; background: rgba(7,59,99,0.32); border-radius: 99px; transform: rotate(35deg); }
.s1 { left: 7vw; top: 13vh; } .s2 { right: 18vw; bottom: 18vh; } .s3 { right: 8vw; top: 24vh; }

.final-lens {
  width: min(82vmin, 780px);
  height: min(82vmin, 780px);
  margin: auto;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--pearl-shell);
  background: radial-gradient(circle at 42% 36%, rgba(247,255,244,0.35), rgba(99,215,232,0.3) 34%, rgba(7,59,99,0.7));
}
.final-lens h2 { text-shadow: 0 0 34px rgba(216,255,79,0.55); z-index: 2; }
.final-lens p { width: 68%; z-index: 2; color: var(--pearl-shell); }
.mini-pods, .mini-weather, .mini-gravel { position: absolute; inset: 0; }
.mini-pods { background: radial-gradient(circle at 28% 54%, var(--gel-green) 0 6%, transparent 7%), radial-gradient(circle at 72% 42%, var(--candy-coral) 0 5%, transparent 6%); animation: orbit 12s linear infinite; }
.mini-weather { background: radial-gradient(circle at 66% 18%, var(--sunlit-lime) 0 8%, transparent 9%), radial-gradient(ellipse at 30% 22%, rgba(247,255,244,0.8) 0 12%, transparent 13%); animation: orbit 18s linear infinite reverse; }
.mini-gravel { background: radial-gradient(circle at 20% 88%, var(--chrome-lavender) 0 .45rem, transparent .5rem), radial-gradient(circle at 35% 91%, var(--sunlit-lime) 0 .35rem, transparent .4rem), radial-gradient(circle at 58% 87%, var(--candy-coral) 0 .4rem, transparent .45rem), radial-gradient(circle at 80% 90%, var(--aero-sky) 0 .5rem, transparent .55rem); }
.closing-stamp { position: absolute; bottom: 12vh; right: 12vw; color: var(--deep-aquarium); }

.tank-rail { position: fixed; left: 1rem; top: 50%; z-index: 10; transform: translateY(-50%); display: grid; gap: .7rem; }
.tank-rail span { writing-mode: vertical-rl; font-family: var(--rounded); padding: .55rem .35rem; border-radius: 999px; background: rgba(247,255,244,0.48); border: 1px solid rgba(247,255,244,0.72); }

.bubble-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(185,243,255,0.28) 38%, rgba(99,215,232,0.1)); border: 1px solid rgba(247,255,244,0.65); box-shadow: inset -6px -7px 14px rgba(7,59,99,0.08); transform: translate3d(0,0,0); }
.cursor-fish { position: fixed; z-index: 8; width: 2.8rem; height: 1.3rem; border-radius: 60% 45% 45% 60%; pointer-events: none; background: linear-gradient(90deg, var(--candy-coral), var(--sunlit-lime)); box-shadow: 0 0 20px rgba(216,255,79,0.65); transform: translate(-50%, -50%); }
.cursor-fish::after { content: ""; position: absolute; right: -0.7rem; top: 0.18rem; border-left: .9rem solid var(--candy-coral); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; }
.fish-b { background: linear-gradient(90deg, var(--chrome-lavender), var(--gel-green)); transform: translate(-50%, -50%) scale(.78); }
.fish-b::after { border-left-color: var(--chrome-lavender); }
.trail-svg { position: absolute; inset: 18% 12%; width: 76%; height: 64%; fill: none; pointer-events: none; }
.trail-svg path { stroke: rgba(247,255,244,0.82); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 760; animation: trailDraw 5.5s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(216,255,79,0.55)); }

@keyframes bootRise { 0% { opacity: 0; transform: translateY(24vh) scaleY(1.35); filter: blur(8px); } 58% { opacity: 1; transform: translateY(-1.5vh) scaleY(.86); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); } }
@keyframes ripple { 0%,100% { transform: translateX(-2%) scaleY(.7); } 50% { transform: translateX(2%) scaleY(1.08); } }
@keyframes buoy { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes podPulse { 0%,100% { transform: translateY(-50%) scale(.98); } 50% { transform: translateY(-50%) scale(1.04); } }
@keyframes exchange { 0% { transform: translate(-18rem, -1rem) scale(.75); opacity: .2; } 45% { opacity: 1; } 50% { transform: translate(0, -5rem) scale(1.25); } 100% { transform: translate(18rem, 1rem) scale(.75); opacity: .2; } }
@keyframes cloudFloat { 0%,100% { translate: 0 0; } 50% { translate: 2rem -1rem; } }
@keyframes drawWave { 0% { stroke-dashoffset: 900; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -900; } }
@keyframes trailDraw { 0%,100% { stroke-dashoffset: 760; } 50% { stroke-dashoffset: 0; } }
@keyframes causticDrift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .tank-rail { display: none; }
  .hero-lens, .sky-widget, .control-shrine { width: 92vw; margin-left: auto; margin-right: auto; }
  .capsule-orbit { height: 70vh; }
  .sister-pod { width: 11rem; height: 14rem; }
  .pod-left { left: 0; } .pod-right { right: 0; }
  @keyframes exchange { 0% { transform: translate(-8rem, -1rem); opacity: .2; } 50% { transform: translate(0, -4rem); opacity: 1; } 100% { transform: translate(8rem, 1rem); opacity: .2; } }
}