:root {
    --aqua: #8FFFEA;
    --cyan: #38BDF8;
    --tank: #061A33;
    --lime: #B8FF5C;
    --violet: #A78BFA;
    --gloss: #F7FCFF;
    --coral: #FF6B8A;
    --chrome: #7C8FA8;
    --font-display: "Audiowide", cursive;
    --font-body: "Nunito Sans", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--tank); }
body {
    margin: 0;
    color: var(--gloss);
    font-family: var(--font-body);
    background: var(--tank);
    overflow-x: hidden;
}

.aquarium {
    position: relative;
    min-height: 900vh;
    background:
        radial-gradient(circle at 18% 8%, rgba(143,255,234,.34), transparent 26vw),
        radial-gradient(circle at 82% 28%, rgba(167,139,250,.24), transparent 28vw),
        linear-gradient(180deg, #061A33 0%, #08264B 42%, #061A33 100%);
    isolation: isolate;
}

.caustics, .condensation, .refracted-grid { position: fixed; inset: 0; pointer-events: none; }
.caustics {
    opacity: .52;
    background:
        radial-gradient(ellipse at 25% 20%, rgba(247,252,255,.20) 0 1%, transparent 12%),
        radial-gradient(ellipse at 70% 62%, rgba(56,189,248,.20), transparent 22%),
        repeating-linear-gradient(115deg, transparent 0 36px, rgba(143,255,234,.07) 38px 42px, transparent 46px 82px);
    filter: blur(1px) saturate(1.4);
    animation: causticDrift 12s ease-in-out infinite alternate;
    z-index: -3;
}
.condensation {
    z-index: 10;
    mix-blend-mode: screen;
    opacity: .34;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(247,252,255,.5) 0 1px, transparent 3px),
        radial-gradient(circle at 73% 12%, rgba(143,255,234,.55) 0 1px, transparent 4px),
        radial-gradient(circle at 44% 62%, rgba(247,252,255,.35) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(56,189,248,.4) 0 1px, transparent 4px);
    background-size: 120px 160px, 190px 150px, 150px 210px, 230px 190px;
}
.refracted-grid {
    z-index: -2;
    opacity: .25;
    background-image: linear-gradient(rgba(143,255,234,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(143,255,234,.13) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: perspective(600px) rotateX(62deg) translateY(-18vh);
    transform-origin: top;
}

.droplet {
    position: fixed;
    top: -16vh;
    left: 50%;
    width: 116px;
    height: 150px;
    border-radius: 58% 42% 64% 36% / 62% 48% 52% 38%;
    display: grid;
    place-items: center;
    z-index: 15;
    font-family: var(--font-display);
    color: var(--tank);
    background: radial-gradient(circle at 34% 18%, #F7FCFF 0 10%, rgba(247,252,255,.45) 11% 18%, transparent 19%), linear-gradient(145deg, rgba(247,252,255,.74), rgba(143,255,234,.34) 38%, rgba(56,189,248,.45));
    border: 1px solid rgba(247,252,255,.82);
    box-shadow: inset 16px 20px 30px rgba(247,252,255,.45), inset -18px -20px 36px rgba(6,26,51,.26), 0 24px 80px rgba(143,255,234,.32);
    backdrop-filter: blur(10px) saturate(1.7);
    transform: translate(-50%, var(--dropY, 0px)) rotate(var(--dropR, -8deg));
}
.droplet span { filter: blur(.1px); opacity: .78; }

.tube {
    position: fixed;
    height: 2px;
    width: 70vw;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(143,255,234,.65), rgba(247,252,255,.8), transparent);
    box-shadow: 0 0 18px rgba(56,189,248,.35), 0 8px 0 rgba(124,143,168,.12);
    opacity: .55;
    z-index: -1;
}
.tube-a { top: 30vh; left: -12vw; transform: rotate(-18deg); }
.tube-b { top: 58vh; right: -18vw; transform: rotate(24deg); }
.tube-c { top: 82vh; left: 20vw; transform: rotate(-8deg); }

.operation-selector {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, 36px);
    gap: 8px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(247,252,255,.20), rgba(56,189,248,.10));
    border: 1px solid rgba(247,252,255,.42);
    box-shadow: inset 0 1px 18px rgba(247,252,255,.22), 0 18px 55px rgba(0,0,0,.25);
    backdrop-filter: blur(18px) saturate(1.5);
}
.selector-title { grid-column: 1 / -1; font: 600 10px/1 var(--font-mono); letter-spacing: .16em; color: var(--aqua); text-transform: uppercase; }
.selector-dot {
    width: 36px; height: 26px; border: 0; border-radius: 999px; cursor: pointer;
    font: 600 10px var(--font-mono); color: rgba(247,252,255,.7);
    background: linear-gradient(180deg, rgba(124,143,168,.36), rgba(6,26,51,.54));
    box-shadow: inset 0 1px 4px rgba(247,252,255,.5), 0 0 0 1px rgba(247,252,255,.14);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.selector-dot.is-active { color: var(--tank); background: linear-gradient(180deg, var(--gloss), var(--aqua) 58%, var(--lime)); transform: translateY(-2px); }

.spiral { position: relative; z-index: 2; }
.chamber {
    min-height: 100vh;
    position: relative;
    display: block;
}
.specimen-ring {
    position: sticky;
    top: 9vh;
    left: var(--x);
    width: min(52vw, 560px);
    height: min(52vw, 560px);
    min-width: 330px;
    min-height: 330px;
    margin-left: var(--x);
    transform: translateY(var(--float, 0px)) rotate(var(--tilt)) scale(.86);
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: .42;
    transition: opacity .7s ease, transform .9s cubic-bezier(.2,.9,.2,1);
    background:
        conic-gradient(from var(--ring, 0deg), rgba(247,252,255,.78), var(--hue), rgba(124,143,168,.38), rgba(247,252,255,.72), var(--hue)),
        radial-gradient(circle, rgba(247,252,255,.18), rgba(56,189,248,.05) 55%, transparent 56%);
    box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 0 0 12px rgba(247,252,255,.10), inset 0 0 0 22px rgba(124,143,168,.12);
}
.chamber.is-active .specimen-ring { opacity: 1; transform: translateY(var(--float, 0px)) rotate(calc(var(--tilt) + 2deg)) scale(1); }
.operation-bubble {
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    border-radius: 50%;
    position: relative;
    padding: 22% 15% 14%;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 18%, rgba(247,252,255,.95) 0 5%, rgba(247,252,255,.44) 6% 13%, transparent 14%),
        radial-gradient(circle at 65% 72%, color-mix(in srgb, var(--hue) 45%, transparent), transparent 28%),
        linear-gradient(145deg, rgba(247,252,255,.34), rgba(143,255,234,.12) 36%, rgba(6,26,51,.28));
    border: 1px solid rgba(247,252,255,.72);
    backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: inset 24px 22px 44px rgba(247,252,255,.24), inset -28px -24px 48px rgba(6,26,51,.35), 0 0 60px color-mix(in srgb, var(--hue) 40%, transparent);
}
.operation-bubble:before {
    content: "";
    position: absolute; inset: 10%; border-radius: 50%;
    background-image: linear-gradient(rgba(247,252,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(247,252,255,.09) 1px, transparent 1px);
    background-size: 26px 26px;
    transform: rotate(-12deg) scale(1.2);
    opacity: .5;
}
.operation-bubble:after {
    content: "; ; ; .rs ; ;";
    position: absolute;
    inset: auto 10% 12% auto;
    font: 600 12px var(--font-mono);
    letter-spacing: .6em;
    color: rgba(143,255,234,.5);
    animation: tokenSwim 8s linear infinite;
}
.op-number, .glyph, h1, h2, p { position: relative; z-index: 2; }
.op-number {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 82px);
    color: var(--gloss);
    text-shadow: 0 0 18px var(--hue), 0 3px 0 rgba(6,26,51,.24);
    letter-spacing: -.04em;
}
.glyph {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 4px 0 22px;
    padding: 7px 12px;
    border-radius: 999px;
    font: 600 12px var(--font-mono);
    color: var(--tank);
    background: linear-gradient(180deg, rgba(247,252,255,.86), color-mix(in srgb, var(--hue) 75%, #F7FCFF));
    box-shadow: inset 0 1px 6px rgba(247,252,255,.8), 0 8px 20px rgba(6,26,51,.2);
}
h1, h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(25px, 3.2vw, 48px); font-weight: 400; }
p { margin: 0; max-width: 28ch; color: rgba(247,252,255,.88); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.35; }

.crab, .eel, .memory, .reef, .current, .valve, .panic-pearl, .hatch, .pearl { position: absolute; z-index: 1; display: block; }
.crab { right: 19%; bottom: 24%; width: 62px; height: 32px; border: 3px solid var(--coral); border-top: 0; border-radius: 0 0 32px 32px; }
.crab:before, .crab:after { content: ""; position: absolute; top: -18px; width: 22px; height: 22px; border: 3px solid var(--coral); border-bottom: 0; border-radius: 50%; }
.crab:before { left: -14px; transform: rotate(-28deg); } .crab:after { right: -14px; transform: rotate(28deg); }
.eel { right: 12%; bottom: 25%; width: 130px; height: 38px; border-top: 5px solid var(--lime); border-radius: 50%; animation: eel 4s ease-in-out infinite; }
.memory { right: 18%; bottom: 22%; width: 148px; height: 18px; background: radial-gradient(circle, var(--lime) 0 7px, transparent 8px) 0 0/28px 18px repeat-x; }
.reef { right: 20%; bottom: 20%; width: 120px; height: 90px; background: radial-gradient(circle at 20% 90%, var(--violet) 0 9px, transparent 10px), radial-gradient(circle at 52% 70%, var(--aqua) 0 8px, transparent 9px), radial-gradient(circle at 78% 84%, var(--cyan) 0 10px, transparent 11px); border-bottom: 4px solid rgba(247,252,255,.55); }
.current { right: 15%; bottom: 24%; width: 150px; height: 70px; border-top: 3px solid var(--aqua); border-bottom: 3px solid var(--cyan); border-radius: 50%; animation: current 3s ease-in-out infinite; }
.valve { right: 19%; bottom: 22%; width: 88px; height: 88px; border: 10px solid var(--chrome); border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(56,189,248,.35); }
.valve:after { content:""; position:absolute; left: 8px; right: 8px; top: 50%; height: 8px; margin-top: -4px; border-radius: 8px; background: var(--aqua); }
.panic-pearl { right: 20%; bottom: 22%; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 32% 24%, var(--gloss), var(--coral) 36%, #061A33 100%); animation: pearlPulse 1.6s ease-in-out infinite; }
.hatch { right: 18%; bottom: 23%; width: 124px; height: 70px; border-radius: 70px 70px 8px 8px; border: 5px solid var(--lime); border-bottom: 0; transform-origin: bottom left; animation: hatch 3s ease-in-out infinite; }
.pearl { width: 16px; height: 16px; right: 16%; top: 24%; border-radius: 50%; background: var(--gloss); box-shadow: 0 0 18px var(--hue); }
.warning { filter: drop-shadow(0 0 22px rgba(255,107,138,.35)); }
.final-capsule { position: absolute; left: 18%; right: 18%; bottom: 20%; height: 86px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(28px,4vw,54px); color: var(--tank); background: linear-gradient(90deg, var(--aqua), var(--gloss), var(--lime)); box-shadow: inset 0 4px 16px rgba(247,252,255,.85), 0 0 44px rgba(184,255,92,.45); transform: scaleX(.55); opacity: .55; transition: transform 1s ease, opacity 1s ease; }
.chamber.is-active .final-capsule { transform: scaleX(1); opacity: 1; }

.plankton-field span { position: fixed; z-index: 1; font: 600 14px var(--font-mono); color: rgba(143,255,234,.55); pointer-events: none; animation: planktonFloat var(--dur) linear infinite; left: var(--left); top: var(--top); }
.ripple { position: fixed; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 1px solid rgba(143,255,234,.9); pointer-events: none; z-index: 30; animation: ripple .8s ease-out forwards; }

@keyframes causticDrift { to { transform: translate3d(-3vw, 2vh, 0) scale(1.05); filter: blur(2px) hue-rotate(14deg); } }
@keyframes tokenSwim { from { transform: translateX(0); } to { transform: translateX(-70px); } }
@keyframes eel { 50% { transform: translateX(-18px) rotate(-8deg); } }
@keyframes current { 50% { transform: skewX(-12deg) translateX(18px); } }
@keyframes pearlPulse { 50% { transform: scale(1.15); box-shadow: 0 0 46px var(--coral); } }
@keyframes hatch { 50% { transform: rotate(-14deg); } }
@keyframes planktonFloat { from { transform: translateY(110vh) rotate(0deg); } to { transform: translateY(-20vh) rotate(180deg); } }
@keyframes ripple { to { transform: scale(12); opacity: 0; } }

@media (max-width: 760px) {
    .specimen-ring { margin-left: 6vw; width: 88vw; height: 88vw; min-width: 0; min-height: 0; }
    .operation-selector { right: 10px; bottom: 10px; transform: scale(.86); transform-origin: bottom right; }
    .operation-bubble { padding: 24% 12% 12%; }
    .glyph { font-size: 10px; }
}