:root {
  /* Typography compliance phrase: IBM Plex Mono** micro-labels for coordinates; Space Grotesk** for sharp lab-zine captions and scene titles. Body and annotation text: IBM Plex Sans** for readable specimen notes. */
  --night: #07110B;
  --acid: #B7FF2A;
  --magenta: #FF2FD6;
  --cyan: #16F4FF;
  --ultra: #6C2BFF;
  --orange: #FF7A1A;
  --gel: #E8FFE7;
  --display: "Anybody", "Arial Black", system-ui, sans-serif;
  --heading: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-snap-type: y mandatory; background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--gel);
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% 18%, rgba(108,43,255,.32), transparent 36rem),
    radial-gradient(circle at 12% 78%, rgba(255,47,214,.2), transparent 28rem),
    linear-gradient(180deg, #07110B 0%, #030805 100%);
}

.story-shell { position: relative; isolation: isolate; }

#pollen-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

.noise-film {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .13;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(232,255,231,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 62%, rgba(183,255,42,.48) 0 1px, transparent 1.8px);
  background-size: 37px 41px, 53px 47px;
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7vmin;
  scroll-snap-align: start;
  overflow: hidden;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 7vmin;
  border: 1px solid rgba(22,244,255,.2);
  border-radius: 48% 52% 44% 56% / 58% 39% 61% 42%;
  filter: drop-shadow(0 0 26px rgba(22,244,255,.18));
  animation: membrane 9s ease-in-out infinite alternate;
}

.ring-system, .ring { position: absolute; inset: 0; pointer-events: none; }

.ring {
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(232,255,231,.32);
  width: min(82vw, 82vh);
  height: min(82vw, 82vh);
  animation: spin 24s linear infinite;
}

.ring-two {
  width: min(62vw, 62vh);
  height: min(62vw, 62vh);
  border-color: rgba(255,47,214,.42);
  animation-direction: reverse;
  animation-duration: 17s;
}

.ring-three {
  width: min(42vw, 42vh);
  height: min(42vw, 42vh);
  border-style: solid;
  border-color: rgba(183,255,42,.36);
  animation-duration: 11s;
}

.specimen-chamber, .scene-core {
  position: relative;
  z-index: 2;
  width: min(780px, 92vw);
  min-height: 470px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgba(232,255,231,.18);
  border-radius: 42% 58% 49% 51% / 52% 43% 57% 48%;
  background:
    radial-gradient(circle at 40% 20%, rgba(22,244,255,.16), transparent 38%),
    radial-gradient(circle at 65% 70%, rgba(255,47,214,.14), transparent 42%),
    rgba(7,17,11,.62);
  box-shadow: 0 0 80px rgba(108,43,255,.34), inset 0 0 55px rgba(183,255,42,.08);
  transform: scale(var(--specimen-scale, 1)) rotateX(var(--specimen-tilt, 0deg));
  transition: transform .35s ease;
  animation: chamberPulse 5.8s ease-in-out infinite;
}

.gel-blob {
  position: absolute;
  z-index: -1;
  filter: blur(.2px);
  mix-blend-mode: screen;
  animation: blobMorph 7s ease-in-out infinite alternate;
}

.blob-ultra {
  width: 58%; height: 72%; left: 4%; top: 8%;
  background: radial-gradient(circle at 35% 30%, var(--magenta), var(--ultra) 48%, transparent 72%);
  opacity: .36;
  border-radius: 63% 37% 72% 28% / 48% 62% 38% 52%;
}

.blob-cyan {
  width: 46%; height: 48%; right: 6%; bottom: 4%;
  background: radial-gradient(circle at 40% 35%, var(--acid), var(--cyan) 46%, transparent 73%);
  opacity: .28;
  border-radius: 37% 63% 31% 69% / 61% 42% 58% 39%;
  animation-delay: -2s;
}

.wordmark {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .01em;
  font-family: var(--display);
  font-size: clamp(4.7rem, 16vw, 12rem);
  line-height: .78;
  color: var(--gel);
  text-shadow: 0 0 12px var(--cyan), 0 0 32px rgba(255,47,214,.7), 0 0 70px rgba(183,255,42,.35);
}

.wordmark span {
  display: inline-block;
  font-variation-settings: "wdth" var(--wide), "wght" 860;
  transform: translateY(-35vh) rotate(var(--tilt)) scale(.65);
  opacity: 0;
  animation: bounceEnter .96s cubic-bezier(.2,1.45,.25,1) forwards;
  animation-delay: var(--delay);
}

.wordmark .ai-spark {
  color: var(--cyan);
  font-size: .34em;
  margin-left: .06em;
  text-shadow: 0 0 15px var(--cyan), 0 0 35px var(--magenta);
}

.micro-label {
  margin: 0 0 1rem;
  font-family: var(--mono);
  color: var(--acid);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.top-label { position: absolute; top: 1.3rem; }

.scene-title, h2 {
  margin: 1.2rem 0 .5rem;
  font-family: var(--heading);
  color: var(--acid);
  font-size: clamp(1.7rem, 5vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: lowercase;
}

.specimen-copy, .scene-core p:not(.micro-label) {
  max-width: 560px;
  margin: .4rem auto 1.2rem;
  color: rgba(232,255,231,.82);
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.lab-tag, .seed-seal, .warning-strip {
  border: 1px solid var(--orange);
  background: linear-gradient(135deg, rgba(255,122,26,.18), rgba(255,47,214,.1));
  color: var(--orange);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .12em;
  padding: .82rem 1rem;
  border-radius: 999px 42px 999px 42px;
  box-shadow: 0 0 24px rgba(255,122,26,.22);
  cursor: pointer;
}

.lab-tag:hover { transform: rotate(-2deg) scale(1.06); color: var(--night); background: var(--orange); }

.orbit-notes {
  position: absolute;
  inset: 15vmin;
  pointer-events: none;
  animation: spin 28s linear infinite reverse;
}

.orbit-notes span {
  position: absolute;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .13em;
}

.orbit-notes span:nth-child(1) { left: 6%; top: 35%; }
.orbit-notes span:nth-child(2) { right: 4%; top: 18%; color: var(--magenta); }
.orbit-notes span:nth-child(3) { left: 39%; bottom: 1%; color: var(--acid); }

.botanical { position: absolute; z-index: 1; filter: drop-shadow(0 0 18px currentColor); }
.leaf-a, .leaf-b {
  width: 26vmin; height: 42vmin;
  color: var(--acid);
  border: 2px solid currentColor;
  background: linear-gradient(90deg, transparent 49%, currentColor 50% 51%, transparent 52%), rgba(183,255,42,.07);
  clip-path: polygon(50% 0, 78% 12%, 65% 24%, 88% 38%, 67% 48%, 82% 63%, 58% 68%, 50% 100%, 42% 68%, 18% 63%, 33% 48%, 12% 38%, 35% 24%, 22% 12%);
}
.leaf-a { left: 6vw; bottom: 5vh; transform: rotate(-28deg); }
.leaf-b { right: 5vw; top: 10vh; transform: rotate(29deg) scale(.8); color: var(--cyan); }
.pod-a {
  width: 18vmin; height: 18vmin; left: 13vw; top: 13vh;
  border: 2px solid var(--magenta);
  border-radius: 50% 44% 58% 42%;
  background: radial-gradient(circle, rgba(255,47,214,.45) 0 10%, transparent 11% 100%);
  background-size: 28px 28px;
}

.scene-mutation { background: radial-gradient(circle at 50% 50%, rgba(183,255,42,.12), transparent 48%); }
.scene-trellis { background: radial-gradient(circle at 50% 50%, rgba(255,122,26,.14), transparent 45%); }
.scene-bloom { background: radial-gradient(circle at 50% 50%, rgba(255,47,214,.17), transparent 48%); }

.flytrap {
  position: absolute;
  width: 270px; height: 150px;
  top: -62px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.flytrap span {
  border: 3px solid var(--acid);
  background: rgba(183,255,42,.09);
  filter: drop-shadow(0 0 18px var(--acid));
  transition: transform .28s cubic-bezier(.2,1.5,.3,1);
}
.flytrap span:first-child { border-radius: 100% 12% 12% 100%; transform-origin: right center; }
.flytrap span:last-child { border-radius: 12% 100% 100% 12%; transform-origin: left center; }
.flytrap.snap span:first-child { transform: rotate(22deg); }
.flytrap.snap span:last-child { transform: rotate(-22deg); }

.arc-board { width: min(540px, 82vw); height: 170px; position: relative; margin-top: 1rem; }
.arc-board i {
  position: absolute;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 20px var(--magenta);
  offset-path: path("M 10 140 C 120 -20, 240 -20, 350 140");
  animation: arcRun 2.4s ease-in-out infinite;
}
.arc-board i:nth-child(2) { animation-delay: -.35s; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.arc-board i:nth-child(3) { animation-delay: -.7s; background: var(--acid); box-shadow: 0 0 20px var(--acid); }
.arc-board i:nth-child(4) { animation-delay: -1.05s; background: var(--orange); box-shadow: 0 0 20px var(--orange); }
.arc-board i:nth-child(5) { animation-delay: -1.4s; }

.broken-trellis { position: absolute; inset: 12%; pointer-events: none; }
.broken-trellis b {
  position: absolute;
  width: 7px; height: 82%;
  background: linear-gradient(var(--cyan), var(--magenta));
  box-shadow: 0 0 18px var(--cyan);
  transform: rotate(var(--r));
}
.broken-trellis b:nth-child(1) { left: 22%; --r: -18deg; }
.broken-trellis b:nth-child(2) { left: 43%; --r: 12deg; }
.broken-trellis b:nth-child(3) { left: 62%; --r: -8deg; }
.broken-trellis b:nth-child(4) { left: 78%; --r: 24deg; }

.bloom-orb {
  position: absolute;
  width: min(430px, 70vw);
  height: min(430px, 70vw);
  border-radius: 50%;
  z-index: -1;
  background:
    conic-gradient(from 90deg, var(--acid), var(--cyan), var(--ultra), var(--magenta), var(--orange), var(--acid));
  filter: blur(1px) saturate(1.5);
  opacity: .46;
  clip-path: polygon(50% 0%, 61% 31%, 95% 15%, 72% 44%, 100% 50%, 72% 56%, 95% 85%, 61% 69%, 50% 100%, 39% 69%, 5% 85%, 28% 56%, 0 50%, 28% 44%, 5% 15%, 39% 31%);
  animation: bloomSpin 8s linear infinite;
}

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(-35vh) rotate(calc(var(--tilt) - 34deg)) scale(.58); filter: blur(14px); }
  58% { opacity: 1; transform: translateY(2.5vh) rotate(calc(var(--tilt) + 8deg)) scale(1.14); filter: blur(0); }
  78% { transform: translateY(-1.1vh) rotate(calc(var(--tilt) - 5deg)) scale(.96); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); filter: blur(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes membrane { to { border-radius: 57% 43% 62% 38% / 37% 61% 39% 63%; transform: rotate(3deg) scale(.97); } }
@keyframes chamberPulse { 50% { box-shadow: 0 0 105px rgba(255,47,214,.38), inset 0 0 80px rgba(22,244,255,.12); } }
@keyframes blobMorph { to { border-radius: 31% 69% 46% 54% / 65% 33% 67% 35%; transform: rotate(18deg) scale(1.08); } }
@keyframes arcRun { 0% { offset-distance: 0%; transform: scale(.7); } 50% { transform: scale(1.3); } 100% { offset-distance: 100%; transform: scale(.7); } }
@keyframes bloomSpin { to { transform: rotate(360deg) scale(1.06); } }

@media (max-width: 720px) {
  .scene { padding: 5vmin; }
  .wordmark { font-size: clamp(3.25rem, 17vw, 6rem); }
  .top-label { top: .85rem; }
  .specimen-chamber, .scene-core { min-height: 430px; padding: 3rem 1.1rem; }
  .orbit-notes { display: none; }
}