:root {
  --deep: #07131A;
  --pool: #58DDF7;
  --mint: #B9FFE8;
  --lavender: #B8A4FF;
  --blush: #FF5D8F;
  --yolk: #FFE45E;
  --pearl: #F5FFF9;
  --violet: #5B3BD6;
  --glass: rgba(245, 255, 249, 0.14);
  --glass-heavy: rgba(245, 255, 249, 0.24);
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --aside: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--deep);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--pearl);
  font-family: var(--aside);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(88, 221, 247, 0.26), transparent 28rem),
    radial-gradient(circle at 80% 30%, rgba(184, 164, 255, 0.20), transparent 24rem),
    linear-gradient(135deg, #07131A 0%, #092431 44%, #07131A 100%);
}

button, input { font: inherit; }

.aquarium-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  --warmth: 0;
}

.aquarium-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(245, 255, 249, 0.08) 19%, transparent 25% 58%, rgba(255, 228, 94, 0.08) 60%, transparent 66%),
    repeating-linear-gradient(90deg, rgba(245, 255, 249, 0.03) 0 1px, transparent 1px 8vw);
  mix-blend-mode: screen;
}

.caustics {
  position: fixed;
  inset: -20%;
  z-index: -2;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(185, 255, 232, 0.18) 0 8%, transparent 18%),
    radial-gradient(ellipse at 70% 65%, rgba(88, 221, 247, 0.16) 0 6%, transparent 17%),
    repeating-radial-gradient(ellipse at center, rgba(245, 255, 249, 0.06) 0 2px, transparent 3px 32px);
  filter: blur(8px) saturate(1.5);
  animation: causticDrift 18s ease-in-out infinite alternate;
}

.refract {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .55;
  background: linear-gradient(135deg, var(--pool), var(--mint), var(--lavender));
}

.refract-one { width: 42vw; height: 12vh; top: 14vh; left: -10vw; transform: rotate(-18deg); }
.refract-two { width: 35vw; height: 14vh; bottom: 18vh; right: -7vw; transform: rotate(24deg); background: linear-gradient(135deg, var(--lavender), var(--blush)); }

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

.bubble {
  position: absolute;
  bottom: -8rem;
  width: var(--size);
  height: calc(var(--size) * 1.25);
  left: var(--x);
  border-radius: 50%;
  border: 1px solid rgba(245, 255, 249, .48);
  background: radial-gradient(circle at 30% 22%, rgba(245,255,249,.9) 0 7%, transparent 8%), radial-gradient(circle at 60% 65%, rgba(88,221,247,.2), transparent 60%);
  box-shadow: inset -8px -14px 24px rgba(91,59,214,.18), inset 8px 9px 18px rgba(245,255,249,.18);
  animation: bubbleRise var(--dur) linear infinite;
  animation-delay: var(--delay);
}

.cursor-droplet {
  position: fixed;
  z-index: 5;
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  border-radius: 44% 56% 51% 49%;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(245,255,249,.4);
  background: radial-gradient(circle at 28% 24%, rgba(245,255,249,.95), transparent 12%), rgba(88,221,247,.10);
  backdrop-filter: blur(3px) saturate(1.5);
  transition: opacity .25s ease;
}

.sample-tabs {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: grid;
  gap: .55rem;
}

.sample-tabs a {
  width: 7.8rem;
  padding: .52rem .7rem;
  color: rgba(245,255,249,.7);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(185,255,232,.25);
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, rgba(245,255,249,.12), rgba(88,221,247,.08));
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px rgba(245,255,249,.35), 0 10px 30px rgba(0,0,0,.18);
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}

.sample-tabs a span { color: var(--yolk); margin-right: .45rem; }
.sample-tabs a.active, .sample-tabs a:hover { transform: translateX(-.4rem); color: var(--pearl); border-color: var(--pool); }

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(5.8rem, 10vw, 9rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 6vw, 6rem);
  overflow: hidden;
}

.chamber::after {
  content: "";
  position: absolute;
  inset: 2rem clamp(5.2rem, 9vw, 8rem) 2rem 2rem;
  border: 1px solid rgba(185,255,232,.18);
  border-radius: 2.4rem;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(245,255,249,.06), transparent 35%, rgba(88,221,247,.05));
  box-shadow: inset 0 1px rgba(245,255,249,.22), inset 0 -1px rgba(88,221,247,.15);
}

h1, h2 {
  font-family: var(--display);
  letter-spacing: -.065em;
  line-height: .88;
  margin: 0;
}

h1 { font-size: clamp(4.2rem, 13vw, 12rem); text-shadow: 0 0 38px rgba(88,221,247,.35); }
h2 { font-size: clamp(3rem, 8.5vw, 7.8rem); }
p { font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.6; }

.sample-id {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--mint);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.aside-note, .jp-aside, .last-aside {
  color: var(--blush);
  font-family: var(--aside);
  transform: rotate(-2deg);
}

.glass-wall {
  position: relative;
  width: min(78rem, 88vw);
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 3rem;
  overflow: hidden;
  border: 1px solid rgba(245,255,249,.3);
  background: linear-gradient(145deg, rgba(245,255,249,.17), rgba(88,221,247,.08)), radial-gradient(circle at 50% 10%, rgba(185,255,232,.22), transparent 40%);
  box-shadow: inset 0 2px rgba(245,255,249,.5), inset 0 -24px 80px rgba(91,59,214,.16), 0 34px 90px rgba(0,0,0,.32);
  backdrop-filter: blur(16px) saturate(1.4);
}

.glass-wall.fogged::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 24% 28%, rgba(245,255,249,.85), transparent 4%),
    radial-gradient(circle at 62% 36%, rgba(245,255,249,.55), transparent 5%),
    repeating-linear-gradient(105deg, rgba(245,255,249,.20) 0 2px, transparent 2px 10px),
    rgba(245,255,249,.17);
  filter: blur(.5px);
  transition: opacity 1s ease, clip-path 1s ease;
}

.glass-wall.cleared::before { opacity: .08; clip-path: circle(18% at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
.wipe-streak { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at var(--wipe-x, 50%) var(--wipe-y, 50%), transparent 0 16%, rgba(245,255,249,.12) 17%, transparent 26%); opacity: 0; transition: opacity .6s ease; }
.cleared .wipe-streak { opacity: 1; }
.wordmark-trap { position: relative; z-index: 4; padding: 2rem; }
.diegetic-control, .instrument-button {
  position: absolute;
  z-index: 5;
  bottom: 2rem;
  right: 2rem;
  border: 1px solid rgba(255,228,94,.55);
  color: var(--deep);
  background: linear-gradient(135deg, var(--yolk), var(--mint));
  border-radius: 999px;
  padding: .9rem 1.25rem;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(245,255,249,.8), 0 12px 34px rgba(255,228,94,.18);
}

.sulking-beaker {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  width: 8rem;
  height: 11rem;
  border: 2px solid rgba(245,255,249,.55);
  border-top: 0;
  border-radius: .7rem .7rem 2rem 2rem;
  background: rgba(245,255,249,.08);
  z-index: 2;
  animation: specimenDrift 5s ease-in-out infinite;
}
.sulking-beaker::before { content: ""; position: absolute; top: 0; left: -1rem; right: -1rem; height: .8rem; border: 2px solid rgba(245,255,249,.6); border-radius: 50%; }
.beaker-liquid { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; height: 45%; border-radius: 0 0 1.45rem 1.45rem; background: linear-gradient(180deg, rgba(255,93,143,.6), rgba(88,221,247,.5)); animation: blushPulse 4s ease-in-out infinite; }
.beaker-face { position: absolute; inset: 45% 0 auto; text-align: center; font: .75rem var(--mono); color: var(--deep); }
.glass-label { position: absolute; top: 12vh; left: 8vw; font: .8rem var(--mono); color: var(--yolk); letter-spacing: .18em; }

.hex-route { width: min(78rem, 88vw); min-height: 72vh; position: relative; display: grid; place-items: center; }
.hex-cell {
  width: min(48rem, 75vw);
  padding: clamp(2rem, 5vw, 4rem);
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: linear-gradient(145deg, rgba(185,255,232,.22), rgba(88,221,247,.08) 50%, rgba(91,59,214,.16));
  border: 1px solid rgba(245,255,249,.3);
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.28));
}
.glass-note { position: absolute; top: 8%; left: 2%; width: 17rem; padding: 1rem; background: rgba(245,255,249,.82); color: var(--deep); border-radius: .6rem; font-family: var(--mono); transform: rotate(-7deg); box-shadow: 0 18px 36px rgba(0,0,0,.22); }
.red-corrected { text-decoration-color: var(--blush); }
.vial-row { position: absolute; right: 5%; bottom: 12%; display: flex; gap: .7rem; transform: rotate(5deg); }
.vial { width: 5rem; height: 8.5rem; border-radius: 2rem 2rem .8rem .8rem; border: 1px solid rgba(245,255,249,.45); color: var(--pearl); background: linear-gradient(180deg, rgba(245,255,249,.15) 0 35%, rgba(88,221,247,.28) 36% 100%); cursor: pointer; font: .68rem var(--mono); writing-mode: vertical-rl; text-transform: uppercase; }
.vial.active { background: linear-gradient(180deg, rgba(255,228,94,.25) 0 35%, rgba(255,93,143,.5) 36% 100%); }
.vial-caption { position: absolute; right: 3%; bottom: 2%; max-width: 24rem; color: var(--mint); font-family: var(--mono); font-size: .9rem; }

.blush { grid-template-columns: 1fr 1fr; gap: 3rem; }
.reaction-tank { position: relative; width: min(36rem, 80vw); height: 68vh; border: 1px solid rgba(245,255,249,.34); border-radius: 45% 55% 2rem 2rem; overflow: hidden; background: linear-gradient(180deg, rgba(245,255,249,.16), rgba(88,221,247,.10)); box-shadow: inset 0 2px rgba(245,255,249,.45), 0 30px 80px rgba(0,0,0,.28); }
.meniscus { position: absolute; left: -10%; right: -10%; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(184,164,255,.62), rgba(255,93,143,.78)); border-radius: 50% 50% 0 0; transition: height .4s ease; animation: meniscusSlosh 5s ease-in-out infinite; }
.heart-bloom { position: absolute; inset: 25% 20%; background: radial-gradient(circle at 50% 35%, var(--blush) 0 16%, transparent 17%), radial-gradient(circle at 36% 52%, var(--blush) 0 18%, transparent 19%), radial-gradient(circle at 64% 52%, var(--blush) 0 18%, transparent 19%); filter: blur(18px); opacity: .65; animation: bloom 4s ease-in-out infinite; }
.droplet-lens { position: absolute; top: 18%; right: 9%; width: 12rem; height: 14rem; border-radius: 48% 52% 56% 44%; display: grid; place-items: center; text-align: center; color: var(--deep); font: 1rem var(--mono); background: radial-gradient(circle at 30% 20%, var(--pearl), rgba(185,255,232,.62) 24%, rgba(88,221,247,.25)); border: 1px solid rgba(245,255,249,.7); box-shadow: inset -16px -18px 34px rgba(91,59,214,.18), 0 18px 42px rgba(0,0,0,.22); animation: specimenDrift 6s ease-in-out infinite reverse; }
.annotation-panel, .spectro-copy, .microcopy, .peer-copy, .final-card { position: relative; z-index: 2; max-width: 42rem; padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid rgba(245,255,249,.24); border-radius: 2rem; background: linear-gradient(145deg, rgba(245,255,249,.16), rgba(88,221,247,.07)); backdrop-filter: blur(18px); box-shadow: inset 0 1px rgba(245,255,249,.34), 0 24px 70px rgba(0,0,0,.24); }

.spectrometer { grid-template-columns: 1.25fr .75fr; gap: 3rem; }
.spectro-body { position: relative; width: min(48rem, 82vw); aspect-ratio: 1.55; border-radius: 3rem; background: linear-gradient(145deg, rgba(245,255,249,.20), rgba(91,59,214,.10)); border: 1px solid rgba(245,255,249,.34); box-shadow: inset 0 2px rgba(245,255,249,.42), 0 32px 80px rgba(0,0,0,.26); }
.spectro-scale { position: absolute; inset: 16% 10% auto; display: flex; justify-content: space-between; font: .8rem var(--mono); color: var(--mint); text-transform: uppercase; }
.spectro-scale::after { content: ""; position: absolute; left: 4%; right: 4%; top: 5.5rem; height: 2px; background: linear-gradient(90deg, var(--pool), var(--yolk), var(--blush)); box-shadow: 0 0 24px rgba(88,221,247,.65); }
.needle { position: absolute; left: 50%; bottom: 18%; width: .35rem; height: 47%; background: linear-gradient(180deg, var(--blush), var(--yolk)); border-radius: 999px; transform-origin: 50% 100%; transform: rotate(var(--needle-angle, -42deg)); transition: transform .7s cubic-bezier(.2,1.5,.25,1); box-shadow: 0 0 22px rgba(255,93,143,.5); }
.needle::after { content: ""; position: absolute; bottom: -1.2rem; left: 50%; width: 2.4rem; height: 2.4rem; margin-left: -1.2rem; border-radius: 50%; background: var(--pearl); box-shadow: inset -6px -6px 12px rgba(88,221,247,.3); }
.rainbow-slit { position: absolute; left: 12%; right: 12%; bottom: 12%; height: 1rem; border-radius: 999px; background: linear-gradient(90deg, var(--pool), var(--mint), var(--yolk), var(--blush), var(--lavender)); filter: blur(.2px); }
.instrument-button { position: static; margin-top: 1rem; }

.microscope { grid-template-columns: 1fr 1fr; gap: 3rem; }
.slide-stage { position: relative; width: min(39rem, 80vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,255,249,.20), rgba(88,221,247,.08) 50%, rgba(7,19,26,.2)); border: 1px solid rgba(245,255,249,.35); box-shadow: inset 0 0 0 2rem rgba(245,255,249,.04), inset 0 2px rgba(245,255,249,.45), 0 32px 80px rgba(0,0,0,.3); }
.crosshair, .focus-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(255,228,94,.55); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: rgba(255,228,94,.55); }
.crosshair::before { left: 50%; top: -8%; bottom: -8%; width: 1px; }
.crosshair::after { top: 50%; left: -8%; right: -8%; height: 1px; }
.focus-ring { inset: var(--focus-inset, 22%); border-color: rgba(255,93,143,.7); box-shadow: 0 0 24px rgba(255,93,143,.35); transition: inset .25s ease; }
.formula-fragments span { position: absolute; font: 1rem var(--mono); color: var(--pearl); padding: .45rem .7rem; border-radius: 999px; background: rgba(91,59,214,.22); }
.formula-fragments span:nth-child(1) { top: 28%; left: 18%; transform: rotate(-12deg); }
.formula-fragments span:nth-child(2) { top: 48%; right: 14%; transform: rotate(8deg); color: var(--blush); }
.formula-fragments span:nth-child(3) { bottom: 24%; left: 36%; transform: rotate(-4deg); color: var(--mint); }
.focus-slider { width: 100%; accent-color: var(--blush); }

.peer { grid-template-columns: 1fr 1fr; }
.peer-orbit { position: relative; width: min(42rem, 82vw); height: 70vh; }
.peer-bubble { position: absolute; width: 12rem; height: 9rem; display: grid; place-items: center; text-align: center; padding: 1rem; border-radius: 50%; border: 1px solid rgba(245,255,249,.42); background: radial-gradient(circle at 30% 20%, rgba(245,255,249,.75), rgba(88,221,247,.18) 55%, rgba(184,164,255,.12)); color: var(--deep); font: .9rem var(--mono); box-shadow: inset -12px -18px 30px rgba(91,59,214,.18), 0 18px 36px rgba(0,0,0,.2); animation: orbitFloat 7s ease-in-out infinite; }
.peer-bubble.one { top: 10%; left: 20%; }
.peer-bubble.two { top: 35%; right: 3%; animation-delay: -1.5s; }
.peer-bubble.three { bottom: 12%; left: 8%; animation-delay: -3s; }
.peer-bubble.four { bottom: 4%; right: 18%; animation-delay: -4.3s; background: radial-gradient(circle at 30% 20%, rgba(245,255,249,.8), rgba(255,93,143,.24)); }

.proof { text-align: center; }
.proof-bloom { position: absolute; width: min(78vw, 52rem); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,93,143,.72), rgba(255,228,94,.5), rgba(185,255,232,.68), rgba(88,221,247,.52), rgba(184,164,255,.6), rgba(255,93,143,.72)); filter: blur(22px); opacity: .54; animation: proofBloom 9s ease-in-out infinite; }
.final-card { max-width: 58rem; background: linear-gradient(145deg, rgba(245,255,249,.22), rgba(255,93,143,.10), rgba(88,221,247,.08)); }
.confession { font-family: var(--serif); font-size: clamp(1.45rem, 2.7vw, 2.5rem); color: var(--pearl); }
.last-aside { font-size: 1.25rem; }

@keyframes causticDrift { to { transform: translate3d(6%, -4%, 0) rotate(3deg) scale(1.04); } }
@keyframes bubbleRise { to { transform: translate3d(calc(var(--drift) * 1px), -125vh, 0) rotate(18deg); } }
@keyframes specimenDrift { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.1rem) rotate(2deg); } }
@keyframes blushPulse { 50% { background: linear-gradient(180deg, rgba(255,93,143,.9), rgba(184,164,255,.55)); } }
@keyframes meniscusSlosh { 0%,100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-.8rem); } }
@keyframes bloom { 0%,100% { transform: scale(.88) rotate(0deg); opacity: .46; } 50% { transform: scale(1.18) rotate(12deg); opacity: .78; } }
@keyframes orbitFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.4rem) scale(1.04); } }
@keyframes proofBloom { 0%,100% { transform: scale(.8) rotate(0deg); opacity: .42; } 50% { transform: scale(1.12) rotate(40deg); opacity: .62; } }

@media (max-width: 900px) {
  .sample-tabs { right: .4rem; }
  .sample-tabs a { width: 3rem; color: transparent; overflow: hidden; }
  .sample-tabs a span { color: var(--yolk); }
  .chamber, .blush, .spectrometer, .microscope, .peer { grid-template-columns: 1fr; padding-right: 4.6rem; }
  .chamber::after { right: 4rem; }
  .vial-row, .vial-caption, .glass-note { position: relative; inset: auto; margin-top: 1rem; }
  .hex-route { align-content: center; }
}