:root {
  /* IBM Plex Mono sparingly for specimen IDs */
  --aero-pool: #58D9FF;
  --pearl: #F7FFFB;
  --mint: #9DFFD0;
  --pink: #FF6FAE;
  --violet: #7B5CFF;
  --deep: #073A5A;
  --lemon: #EFFF5A;
  --logo-font: "Lexend Mega", "Trebuchet MS", system-ui, sans-serif;
  --body-font: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --maru-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", sans-serif;
}

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

.vessel-shell {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 10%, rgba(239,255,90,.5), transparent 18%), linear-gradient(135deg, #F7FFFB 0%, #58D9FF 42%, #9DFFD0 70%, #FF6FAE 100%);
}
.condensation { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .32; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 2px), radial-gradient(circle, rgba(7,58,90,.18) 0 1px, transparent 2px); background-size: 37px 41px, 71px 59px; mix-blend-mode: screen; }
.cursor-lens { position: fixed; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(247,255,251,.86); box-shadow: inset 12px 18px 30px rgba(255,255,255,.72), inset -16px -20px 32px rgba(88,217,255,.28), 0 14px 42px rgba(123,92,255,.2); background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.88), rgba(157,255,208,.22) 38%, rgba(88,217,255,.16) 70%, rgba(255,111,174,.1)); transform: translate(-50%, -50%) scale(.8); pointer-events: none; z-index: 6; backdrop-filter: blur(2px) saturate(1.3); }

.depth-gauge { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); width: 56px; height: 430px; border-radius: 999px; z-index: 10; background: linear-gradient(180deg, rgba(247,255,251,.58), rgba(88,217,255,.22)); border: 1px solid rgba(247,255,251,.72); box-shadow: inset 5px 8px 16px rgba(255,255,255,.72), inset -5px -10px 18px rgba(7,58,90,.12), 0 18px 40px rgba(7,58,90,.18); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.gauge-title { font-family: var(--mono-font); font-size: 8px; letter-spacing: .16em; text-align: center; color: rgba(7,58,90,.68); }
.gauge-bubble { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #fff, var(--mint) 42%, var(--aero-pool)); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 0 0 4px rgba(88,217,255,.16), inset -3px -5px 8px rgba(7,58,90,.16); position: relative; transition: transform .4s ease, background .4s ease; }
.gauge-bubble::after { content: attr(data-label); position: absolute; right: 28px; top: 2px; font: 9px var(--mono-font); color: var(--deep); opacity: .62; }
.gauge-bubble.active { transform: scale(1.35); background: radial-gradient(circle at 30% 24%, #fff, var(--lemon) 30%, var(--pink) 70%); }
.gauge-fill { position: absolute; left: 25px; top: 54px; width: 6px; height: var(--fill, 0%); max-height: 318px; border-radius: 999px; background: linear-gradient(var(--aero-pool), var(--pink), var(--lemon)); opacity: .7; z-index: -1; }

.chamber { min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; padding: 9vh 8vw; }
.chamber::before { content: ""; position: absolute; inset: -12%; z-index: -2; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.58), transparent 23%), radial-gradient(circle at 18% 78%, rgba(123,92,255,.24), transparent 31%), linear-gradient(135deg, var(--temp-a, #F7FFFB), var(--temp-b, #58D9FF)); filter: saturate(1.1); }
.chamber::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1px, transparent 1px 26px), radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.52), transparent 46%); mix-blend-mode: soft-light; }
.airlock { --temp-a: #F7FFFB; --temp-b: #58D9FF; display: grid; place-items: center; }
.hatch { width: min(82vw, 940px); height: min(68vh, 580px); border-radius: 50%; padding: 18px; background: linear-gradient(145deg, rgba(247,255,251,.86), rgba(88,217,255,.18), rgba(255,111,174,.16)); border: 2px solid rgba(255,255,255,.9); box-shadow: inset 16px 24px 40px rgba(255,255,255,.72), inset -24px -28px 60px rgba(7,58,90,.16), 0 30px 90px rgba(7,58,90,.2); transition: transform 1.2s cubic-bezier(.2,1.2,.2,1), border-radius 1.2s ease, opacity 1.2s ease; }
.hatch.open { transform: scale(1.18); border-radius: 38% 62% 45% 55%; opacity: .72; }
.hatch-glass { height: 100%; border-radius: inherit; display: grid; place-items: center; text-align: center; position: relative; background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.84), transparent 18%), radial-gradient(circle at 68% 78%, rgba(157,255,208,.38), transparent 22%), rgba(247,255,251,.18); backdrop-filter: blur(12px) saturate(1.5); overflow: hidden; }
.calibration-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(7,58,90,.35); animation: rotate 24s linear infinite; }
.calibration-ring::before, .calibration-ring::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 12px dotted rgba(239,255,90,.5); }
.calibration-ring::after { inset: 25%; border-color: rgba(255,111,174,.32); animation: rotate 16s linear infinite reverse; }
h1, .chamber-title { font-family: var(--logo-font); letter-spacing: -.08em; margin: 0; color: var(--deep); text-shadow: 2px 2px 0 rgba(255,255,255,.64), -2px 0 rgba(88,217,255,.32), 3px 0 rgba(255,111,174,.18); }
h1 { font-size: clamp(2.8rem, 9vw, 8.5rem); }
.specimen-id, .braid-meter, .instrument-note, .edge-note, .final-capsule { font-family: var(--mono-font); letter-spacing: .08em; text-transform: uppercase; }
.specimen-id { align-self: end; font-size: 11px; color: rgba(7,58,90,.68); }
.gel-button { align-self: start; border: 0; border-radius: 999px; padding: 16px 28px; color: var(--deep); font: 800 13px var(--mono-font); text-transform: uppercase; letter-spacing: .08em; background: linear-gradient(180deg, #fff, var(--mint) 48%, var(--aero-pool)); box-shadow: inset 0 4px 7px rgba(255,255,255,.9), inset 0 -8px 14px rgba(7,58,90,.18), 0 12px 26px rgba(7,58,90,.18); cursor: pointer; transition: transform .3s ease; }
.gel-button:hover { transform: translateY(-3px) scale(1.03); }
.tick-field { position: absolute; inset: 0; font: 10px var(--mono-font); color: rgba(7,58,90,.62); }
.tick-field span { position: absolute; }.tick-field span:nth-child(1){left:16%;top:22%;}.tick-field span:nth-child(2){right:12%;top:35%;}.tick-field span:nth-child(3){left:22%;bottom:18%;}.tick-field span:nth-child(4){right:23%;bottom:21%;font-family:var(--maru-font);}
.bubble-field i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; font: 700 18px var(--maru-font); color: rgba(7,58,90,.5); background: radial-gradient(circle at 32% 24%, #fff 0 9%, rgba(247,255,251,.4) 18%, rgba(88,217,255,.22) 62%, rgba(255,111,174,.18)); border: 1px solid rgba(255,255,255,.8); box-shadow: inset -8px -10px 20px rgba(7,58,90,.1), 0 10px 24px rgba(7,58,90,.12); animation: float 7s ease-in-out infinite; animation-delay: var(--d); }

.pulse { --temp-a: #073A5A; --temp-b: #58D9FF; color: var(--pearl); display: grid; place-items: center; }
.liquid-channel { width: min(88vw, 1180px); height: 46vh; border-radius: 999px; background: linear-gradient(90deg, rgba(247,255,251,.26), rgba(88,217,255,.36), rgba(157,255,208,.28)); border: 1px solid rgba(247,255,251,.62); box-shadow: inset 0 24px 38px rgba(255,255,255,.35), inset 0 -26px 44px rgba(7,58,90,.42), 0 28px 90px rgba(7,58,90,.28); position: relative; overflow: hidden; }
.liquid-channel::before { content: ""; position: absolute; inset: 8%; border-radius: inherit; background: repeating-radial-gradient(ellipse at 25% 45%, rgba(255,255,255,.16) 0 2px, transparent 3px 28px); animation: drift 14s linear infinite; }
.pulse-svg { position: absolute; inset: 8% 0; width: 100%; height: 84%; overflow: visible; }
.pulse-line { fill: none; stroke-width: 15; stroke-linecap: round; filter: drop-shadow(0 0 15px currentColor); stroke-dasharray: 1300; animation: drawPulse 5s ease-in-out infinite alternate; }
.pulse-line.blue { stroke: #58D9FF; color: #58D9FF; }.pulse-line.pink { stroke: #FF6FAE; color: #FF6FAE; animation-delay: -1s; }
.braid-meter { position: absolute; right: 10%; bottom: 18%; padding: 9px 15px; border-radius: 999px; background: rgba(247,255,251,.58); color: var(--deep); font-size: 11px; }
.lab-tab { position: absolute; max-width: 310px; padding: 18px 22px; border-radius: 26px 26px 26px 8px; background: rgba(247,255,251,.54); color: var(--deep); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.76); box-shadow: inset 5px 8px 20px rgba(255,255,255,.55), 0 16px 38px rgba(7,58,90,.22); }
.lab-tab b { display:block; font-family: var(--logo-font); font-size: 16px; letter-spacing: -.06em; margin-bottom: 8px; }.lab-tab span { line-height: 1.45; }
.tab-left { left: 7vw; top: 13vh; }.tab-right { right: 8vw; bottom: 12vh; border-radius: 26px 26px 8px 26px; }
.koi-signal { position:absolute; width:80px; height:32px; border-radius: 60% 40% 45% 55%; background: linear-gradient(90deg, var(--mint), var(--aero-pool)); filter: blur(.2px) drop-shadow(0 0 18px rgba(88,217,255,.9)); opacity: .72; animation: swim 12s ease-in-out infinite; }.koi-signal::after{content:"";position:absolute;right:-20px;top:7px;border-left:24px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent;color:rgba(157,255,208,.7)}.koi-a{left:20%;top:58%;}.koi-b{right:20%;top:32%;background:linear-gradient(90deg,var(--pink),var(--lemon));animation-delay:-5s;}

.lens-room { --temp-a: #F7FFFB; --temp-b: #FF6FAE; }
.magnifier { position: absolute; right: 10vw; top: 15vh; width: min(42vw, 470px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.9), rgba(157,255,208,.22) 35%, rgba(88,217,255,.16) 66%, rgba(123,92,255,.18)); border: 3px solid rgba(247,255,251,.92); box-shadow: inset 18px 25px 42px rgba(255,255,255,.7), inset -30px -32px 55px rgba(123,92,255,.22), 0 30px 80px rgba(7,58,90,.2); display:grid;place-items:center; font: 800 clamp(2rem,6vw,5rem) var(--maru-font); color: rgba(7,58,90,.52); backdrop-filter: blur(4px); transition: transform .2s ease; }
.magnifier::after { content:""; position:absolute; width: 32%; height: 9%; right: -20%; bottom: 8%; border-radius: 999px; transform: rotate(42deg); background: linear-gradient(180deg, #fff, #58D9FF); box-shadow: inset 0 -8px 15px rgba(7,58,90,.18); }
.diagonal { position:absolute; left:7vw; top:20vh; width:min-content; font-size: clamp(3.4rem, 11vw, 10rem); line-height:.82; transform: rotate(-10deg); }
.word-cloud { position:absolute; inset: 18vh 8vw; }.word-cloud span { position:absolute; padding: 10px 16px; border-radius:999px; background:rgba(247,255,251,.58); border:1px solid rgba(255,255,255,.75); box-shadow:0 10px 24px rgba(7,58,90,.12); font-family:var(--mono-font); color:var(--deep); transition: transform .4s ease; }.word-cloud span:nth-child(1){left:12%;top:58%;}.word-cloud span:nth-child(2){left:42%;top:21%;font-family:var(--maru-font);}.word-cloud span:nth-child(3){right:4%;top:54%;}.word-cloud span:nth-child(4){left:25%;bottom:4%;}.word-cloud span:nth-child(5){right:24%;bottom:18%;}.word-cloud span:nth-child(6){left:5%;top:28%;font-family:var(--maru-font);}
.edge-note { position:absolute; max-width:320px; font-size:12px; line-height:1.6; background:rgba(247,255,251,.5); border-radius:22px; padding:14px 18px; }.top-note{right:10vw;top:8vh;}.bottom-note{left:8vw;bottom:10vh;}

.weather { --temp-a: #58D9FF; --temp-b: #F7FFFB; display:grid;place-items:center; }
.rim-title { position:absolute; left:6vw; top:8vh; font-size:clamp(2.4rem,7vw,7rem); max-width:780px; line-height:.9; }
.barometer { width:min(54vh,480px); aspect-ratio:1; border-radius:50%; position:relative; background:radial-gradient(circle,#F7FFFB 0 28%, rgba(157,255,208,.5) 29% 42%, rgba(88,217,255,.42) 43% 62%, rgba(247,255,251,.42)); border:2px solid rgba(255,255,255,.86); box-shadow: inset 16px 20px 40px rgba(255,255,255,.8), inset -20px -28px 48px rgba(7,58,90,.16), 0 30px 80px rgba(7,58,90,.18); }
.pressure-rings,.pressure-rings::before,.pressure-rings::after{position:absolute;content:"";inset:10%;border-radius:50%;border:1px dashed rgba(7,58,90,.28);}.pressure-rings::before{inset:16%;}.pressure-rings::after{inset:31%;border-color:rgba(255,111,174,.45);}
.needle { position:absolute; left:50%; top:50%; width:42%; height:7px; border-radius:999px; background:linear-gradient(90deg,var(--pink),var(--lemon)); transform-origin:left center; transform: rotate(var(--needle, -25deg)); box-shadow:0 0 20px rgba(255,111,174,.5); }
.barometer-label { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:800 18px var(--mono-font); color:var(--deep); }
.orbit { position:absolute; width:72vw; height:55vh; border:1px dashed rgba(255,255,255,.45); border-radius:50%; animation:rotate 28s linear infinite; }.orbit-two{width:52vw;height:72vh;animation-duration:38s;animation-direction:reverse;}.cloud-heart,.sun-flare{position:absolute;left:8%;top:26%;width:100px;height:58px;border-radius:60px;background:rgba(247,255,251,.72);box-shadow:30px -12px 0 rgba(247,255,251,.58), 58px 6px 0 rgba(255,111,174,.22);}.sun-flare{background:var(--lemon);box-shadow:0 0 35px var(--lemon);border-radius:50%;width:58px;height:58px;left:78%;top:60%;}.weather-pill{position:absolute;right:8%;bottom:16%;padding:10px 18px;border-radius:999px;background:rgba(247,255,251,.7);font-family:var(--mono-font);font-size:12px;color:var(--deep);}
.instrument-note{position:absolute;font-size:11px;background:rgba(247,255,251,.5);padding:14px 16px;border-radius:20px;}.n1{left:8vw;bottom:18vh}.n2{right:9vw;top:18vh}.n3{right:12vw;bottom:12vh;max-width:240px;}

.equation { --temp-a:#073A5A; --temp-b:#7B5CFF; color:var(--pearl); }
.submerged { font-size:clamp(3rem,9vw,9rem); line-height:.86; max-width:980px; opacity:.9; }
.pool-surface { position:absolute; inset:0; background:linear-gradient(180deg,rgba(88,217,255,.12),rgba(7,58,90,.2)); filter:url(#none); overflow:hidden; }.pool-surface span{position:absolute;font:700 clamp(1rem,2.3vw,2.4rem) var(--mono-font); color:rgba(247,255,251,.55); text-shadow:0 0 18px rgba(88,217,255,.7); animation:float 8s ease-in-out infinite;}.pool-surface span:nth-child(1){left:9%;top:27%;}.pool-surface span:nth-child(2){right:12%;top:18%;animation-delay:-2s}.pool-surface span:nth-child(3){left:28%;bottom:20%;animation-delay:-4s}.pool-surface span:nth-child(4){right:18%;bottom:31%;animation-delay:-1s}.pool-surface span:nth-child(5){left:55%;top:53%;animation-delay:-3s}
.acrylic-tile { position:absolute; width:min(36vw,360px); padding:24px; border-radius:34px; background:rgba(247,255,251,.25); border:1px solid rgba(247,255,251,.55); backdrop-filter:blur(12px); box-shadow:inset 8px 12px 22px rgba(255,255,255,.28),0 24px 55px rgba(0,0,0,.16); color:var(--pearl); }.acrylic-tile b{font-family:var(--mono-font);text-transform:uppercase;color:var(--mint);}.acrylic-tile p{font-size:1.15rem;line-height:1.45}.tile-a{left:8vw;bottom:10vh;transform:rotate(4deg)}.tile-b{right:10vw;top:28vh;transform:rotate(-7deg)}
.ripple-grid{position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 50%, rgba(247,255,251,.16) 0 2px, transparent 3px 42px);animation:ripple 8s ease-in-out infinite;}

.garden { --temp-a:#F7FFFB; --temp-b:#9DFFD0; display:grid; align-content:center; }
.garden-title { font-size:clamp(4rem,12vw,12rem); line-height:.82; max-width:860px; color:var(--deep); }
.garden-copy { max-width:560px; font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.45; background:rgba(247,255,251,.5); border-radius:34px; padding:22px 28px; box-shadow:inset 8px 12px 22px rgba(255,255,255,.52); }
.vine-system span{position:absolute;bottom:-8vh;width:6px;height:70vh;border-radius:999px;background:linear-gradient(var(--mint),var(--aero-pool));transform-origin:bottom;box-shadow:0 0 22px rgba(157,255,208,.8);}.vine-system span:nth-child(1){right:22vw;transform:rotate(-18deg)}.vine-system span:nth-child(2){right:36vw;height:56vh;transform:rotate(10deg);background:linear-gradient(var(--pink),var(--mint))}.vine-system span:nth-child(3){right:12vw;height:45vh;transform:rotate(24deg)}
.petal-field i{position:absolute;width:42px;height:24px;border-radius:80% 20% 80% 20%;background:linear-gradient(135deg,rgba(255,255,255,.9),var(--pink));box-shadow:0 0 18px rgba(255,111,174,.34);animation:petal 9s ease-in-out infinite;}.petal-field i:nth-child(1){left:65%;top:18%;}.petal-field i:nth-child(2){left:78%;top:32%;animation-delay:-1s}.petal-field i:nth-child(3){left:52%;top:62%;animation-delay:-2s}.petal-field i:nth-child(4){left:84%;top:70%;animation-delay:-3s}.petal-field i:nth-child(5){left:38%;top:24%;animation-delay:-4s}.petal-field i:nth-child(6){left:70%;top:52%;animation-delay:-5s}.petal-field i:nth-child(7){left:92%;top:18%;animation-delay:-6s}.petal-field i:nth-child(8){left:58%;top:78%;animation-delay:-7s}.petal-field i:nth-child(9){left:46%;top:42%;animation-delay:-8s}.petal-field i:nth-child(10){left:86%;top:48%;animation-delay:-2.5s}
.final-capsule{display:inline-block;width:max-content;margin-top:24px;padding:15px 22px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--lemon));box-shadow:inset 0 -8px 14px rgba(7,58,90,.12),0 14px 30px rgba(7,58,90,.14);}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14px,-24px,0) scale(1.05); } }
@keyframes drift { to { transform: translateX(-160px); } }
@keyframes drawPulse { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
@keyframes swim { 0%,100%{ transform:translateX(-30px) rotate(-6deg)} 50%{ transform:translateX(120px) rotate(5deg)} }
@keyframes ripple { 50% { transform: scale(1.08); opacity:.72; } }
@keyframes petal { 0%,100%{ transform:translateY(0) rotate(0deg)} 50%{ transform:translateY(-35px) rotate(28deg)} }

@media (max-width: 780px) {
  .depth-gauge { right: 8px; transform: translateY(-50%) scale(.82); }
  .chamber { padding: 8vh 6vw 8vh 7vw; }
  .hatch { width: 88vw; height: 58vh; }
  .lab-tab, .instrument-note, .edge-note, .acrylic-tile { position: relative; inset: auto; margin: 16px 0; width: auto; max-width: 86vw; }
  .pulse, .weather { display: block; padding-top: 12vh; }
  .liquid-channel { height: 34vh; margin-top: 18vh; }
  .magnifier { width: 62vw; right: 4vw; top: 34vh; }
  .diagonal, .rim-title { position: relative; left: auto; top: auto; }
  .barometer { margin: 12vh auto 4vh; }
  .orbit { width: 86vw; }
  .submerged, .garden-title { font-size: clamp(3rem, 16vw, 6rem); }
}