:root {
  /* DESIGN typography phrase retained for compliance: IBM Plex Sans Condensed** Condensed* Condense for narrow edge labels */
  --black: #071015;
  --deep: #10242C;
  --glass: #BFE9F2;
  --cyan: #40D8FF;
  --green: #A6FF7A;
  --violet: #7B61FF;
  --clay: #D59A6A;
  --pollen: #F6E36B;
  --ink: #51616B;
  --mono: "Azeret Mono", monospace;
  --serif: "Newsreader", serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--glass);
  background:
    radial-gradient(circle at 72% 24%, rgba(64, 216, 255, 0.13), transparent 34rem),
    radial-gradient(circle at 18% 66%, rgba(123, 97, 255, 0.15), transparent 38rem),
    linear-gradient(145deg, var(--black), var(--deep) 54%, var(--black));
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(191, 233, 242, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 233, 242, 0.035) 1px, transparent 1px);
  background-size: 100% 9vh, 9vw 100%;
  mask-image: radial-gradient(circle at 66% 50%, black, transparent 76%);
  opacity: 0.45;
  z-index: 1;
}

.atmosphere, .noise, .mesh { position: fixed; inset: 0; pointer-events: none; }
.atmosphere { z-index: 0; overflow: hidden; }
.mesh { filter: blur(56px); opacity: 0.55; mix-blend-mode: screen; }
.mesh-one { background: radial-gradient(ellipse at 70% 36%, rgba(64,216,255,0.34), transparent 31%), radial-gradient(ellipse at 44% 84%, rgba(166,255,122,0.12), transparent 24%); animation: driftMesh 18s ease-in-out infinite alternate; }
.mesh-two { background: radial-gradient(ellipse at 20% 50%, rgba(123,97,255,0.34), transparent 28%), radial-gradient(ellipse at 85% 82%, rgba(213,154,106,0.15), transparent 22%); animation: driftMesh 24s ease-in-out infinite alternate-reverse; }
.noise { opacity: 0.18; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.12) 0 1px, transparent 1px); background-size: 31px 37px, 43px 47px; }

.specimen-tabs {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 1.2rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tab {
  width: 5.8rem;
  min-height: 3.1rem;
  border: 1px solid rgba(191, 233, 242, 0.24);
  border-left: 3px solid rgba(64, 216, 255, 0.45);
  background: rgba(7, 16, 21, 0.54);
  color: var(--glass);
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: grid;
  align-content: center;
  text-align: left;
  padding: 0.42rem 0.6rem;
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: border-color 420ms ease, background 420ms ease, transform 420ms ease;
}

.tab span { font-family: var(--mono); font-size: 0.76rem; color: var(--cyan); }
.tab em { font-style: normal; font-size: 0.62rem; color: rgba(191, 233, 242, 0.62); }
.tab.active { border-color: rgba(166, 255, 122, 0.8); border-left-color: var(--green); background: rgba(16, 36, 44, 0.82); transform: translateX(0.35rem); }

.edge-scale {
  position: fixed;
  z-index: 15;
  right: 1rem;
  top: 4vh;
  bottom: 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: rgba(191, 233, 242, 0.42);
  font-family: var(--mono);
  font-size: 0.62rem;
  border-right: 1px solid rgba(191, 233, 242, 0.22);
  padding-right: 0.65rem;
}

.room {
  min-height: 100vh;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 10vw 28vw 1fr 30vw 8vw;
  align-items: center;
  isolation: isolate;
}

.room::after {
  content: "";
  position: absolute;
  inset: 8vh 8vw;
  border: 1px solid rgba(191, 233, 242, 0.08);
  border-radius: 44% 56% 48% 52% / 52% 35% 65% 48%;
  transform: rotate(var(--tilt, -4deg));
  pointer-events: none;
}

.weather-room { --tilt: 6deg; }
.fork-room { --tilt: -8deg; }
.bloom-room { --tilt: 11deg; }
.loop-room { --tilt: -2deg; }
.export-room { --tilt: 8deg; }

.copy {
  max-width: 28rem;
  padding: 1.4rem 1.6rem;
  border-top: 1px solid rgba(191, 233, 242, 0.2);
  border-bottom: 1px solid rgba(191, 233, 242, 0.13);
  background: linear-gradient(90deg, rgba(7,16,21,0.72), rgba(16,36,44,0.18), transparent);
  backdrop-filter: blur(7px);
}

.rail-left { grid-column: 2 / 3; }
.rail-right { grid-column: 4 / 5; background: linear-gradient(270deg, rgba(7,16,21,0.72), rgba(16,36,44,0.18), transparent); }
.narrow { max-width: 24rem; }
.final-note { margin-top: 16vh; }

.kicker {
  font-family: var(--condensed);
  text-transform: uppercase;
  color: var(--green);
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  margin: 0 0 1.2rem;
}

h1, h2 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.07em;
  color: rgba(191, 233, 242, 0.94);
  text-shadow: 0 0 32px rgba(64, 216, 255, 0.28);
}

h1 { font-size: clamp(3.7rem, 8.6vw, 9.4rem); writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.82; }
h2 { font-size: clamp(3.1rem, 6.5vw, 7.8rem); }

.copy p:not(.kicker) {
  color: rgba(191, 233, 242, 0.78);
  font-size: clamp(1.15rem, 1.7vw, 1.75rem);
  line-height: 1.28;
  margin: 1.35rem 0 0;
}

.story-action {
  margin-top: 2rem;
  border: 1px solid rgba(166, 255, 122, 0.55);
  color: var(--green);
  background: radial-gradient(circle at 50% 0%, rgba(166,255,122,0.16), rgba(7,16,21,0.3));
  font-family: var(--mono);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(166,255,122,0.12), inset 0 0 18px rgba(191,233,242,0.08);
}
.secondary { border-color: rgba(64, 216, 255, 0.56); color: var(--cyan); }

.annotation {
  position: absolute;
  z-index: 9;
  width: 15rem;
  font-family: var(--condensed);
  color: rgba(191, 233, 242, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.82rem;
}
.annotation::before { content: ""; position: absolute; width: 8rem; height: 5rem; border-top: 1px solid rgba(64,216,255,0.42); border-radius: 50%; top: -1.2rem; left: -3rem; transform: rotate(-14deg); }
.annotation span { color: var(--pollen); font-family: var(--mono); display: block; margin-bottom: 0.3rem; }
.annotation b { font-weight: 400; }
.top-right { right: 13vw; top: 12vh; }
.mid-left { left: 13vw; top: 49vh; }
.lower-right { right: 9vw; bottom: 17vh; }
.top-left { left: 19vw; top: 17vh; }
.mid-right { right: 18vw; top: 42vh; }
.lower-left { left: 16vw; bottom: 13vh; }

.vertical-label {
  position: absolute;
  right: 4.7rem;
  top: 13vh;
  writing-mode: vertical-rl;
  font-family: var(--condensed);
  color: rgba(191, 233, 242, 0.35);
  letter-spacing: 0.32em;
  font-size: 0.85rem;
}

.vessel-stage {
  position: fixed;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  transform: translate3d(var(--stage-x, 8vw), var(--stage-y, 0), 0) scale(var(--stage-scale, 1));
  transition: transform 900ms cubic-bezier(.2,.7,.1,1);
}

.scene-title {
  position: absolute;
  top: 8vh;
  right: 15vw;
  font-family: var(--mono);
  color: rgba(191, 233, 242, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
}

.glass-vessel {
  position: relative;
  width: min(68vw, 980px);
  height: min(72vh, 720px);
  border: 1px solid rgba(191, 233, 242, 0.3);
  border-radius: 43% 57% 49% 51% / 35% 43% 57% 65%;
  background:
    linear-gradient(135deg, rgba(191,233,242,0.13), rgba(64,216,255,0.04) 38%, rgba(123,97,255,0.1)),
    radial-gradient(circle at 46% 56%, rgba(7,16,21,0.24), transparent 38%);
  box-shadow: inset 0 0 60px rgba(191,233,242,0.13), inset 0 -24px 58px rgba(123,97,255,0.12), 0 0 80px rgba(64,216,255,0.12);
  overflow: hidden;
  backdrop-filter: blur(13px) saturate(145%);
  transform: rotate(var(--vessel-rotation, -2deg));
  transition: border-radius 850ms ease, transform 850ms ease, box-shadow 850ms ease;
}

.glass-vessel::before, .glass-vessel::after { content: ""; position: absolute; inset: 6%; border-radius: inherit; pointer-events: none; }
.glass-vessel::before { border: 1px solid rgba(191,233,242,0.18); filter: blur(0.2px); }
.glass-vessel::after { background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,0.17) 28%, transparent 36%, transparent 64%, rgba(191,233,242,0.1) 76%, transparent); mix-blend-mode: screen; }

#particleCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; }
.tank-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(64,216,255,0.18), transparent 61%); filter: blur(12px); animation: breathe 7s ease-in-out infinite; }

.ruler { position: absolute; opacity: 0.45; background-repeat: repeat; }
.ruler-left { left: 7%; top: 14%; bottom: 14%; width: 1px; background-image: linear-gradient(to bottom, rgba(191,233,242,0.7) 0 1px, transparent 1px 14px); }
.ruler-bottom { left: 16%; right: 16%; bottom: 10%; height: 1px; background-image: linear-gradient(to right, rgba(191,233,242,0.7) 0 1px, transparent 1px 14px); }

.seed-capsule {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 17%;
  width: 1.25rem;
  height: 2.1rem;
  border-radius: 999px;
  background: radial-gradient(circle at 45% 25%, white, var(--green) 19%, rgba(166,255,122,0.14) 52%, transparent 72%);
  box-shadow: 0 0 26px rgba(166,255,122,0.68);
  transform: translate(-50%, var(--seed-fall, 0));
  transition: transform 850ms cubic-bezier(.2,.9,.1,1.15);
}
.seed-capsule.dropped { --seed-fall: 22vh; }

.terrain { position: absolute; left: 50%; top: 61%; border: 1px solid rgba(213,154,106,0.62); border-radius: 50%; transform: translate(-50%, -50%) rotateX(64deg); opacity: var(--terrain-opacity, 0.78); }
.terrain-a { width: 18rem; height: 11rem; box-shadow: 0 0 18px rgba(213,154,106,0.12); }
.terrain-b { width: 25rem; height: 15rem; border-color: rgba(246,227,107,0.42); }
.terrain-c { width: 33rem; height: 19rem; border-color: rgba(191,233,242,0.28); }

.city-fold { position: absolute; bottom: 23%; width: 5.4rem; height: 5.4rem; background: linear-gradient(135deg, rgba(213,154,106,0.7), rgba(213,154,106,0.08)); clip-path: polygon(0 100%, 18% 31%, 38% 92%, 54% 18%, 73% 78%, 100% 36%, 100% 100%); opacity: var(--city-opacity, 0); transition: opacity 750ms ease, transform 850ms ease; }
.city-one { left: 34%; transform: skewY(-8deg); }
.city-two { left: 47%; transform: translateY(-1.7rem) skewY(9deg); }
.city-three { left: 59%; transform: translateY(0.7rem) skewY(-3deg); }

.weather-front { position: absolute; z-index: 4; width: 42%; height: 90%; top: 5%; border-radius: 50%; filter: blur(15px); opacity: var(--weather-opacity, 0.22); mix-blend-mode: screen; animation: weatherPass 8s ease-in-out infinite; }
.front-one { left: 4%; background: linear-gradient(90deg, transparent, rgba(64,216,255,0.46), transparent); }
.front-two { right: 8%; background: linear-gradient(90deg, transparent, rgba(123,97,255,0.34), transparent); animation-delay: -4s; }

.failure-bloom { position: absolute; z-index: 8; border-radius: 50%; opacity: var(--bloom-opacity, 0); transform: scale(var(--bloom-scale, 0.3)); transition: opacity 800ms ease, transform 850ms ease; background: repeating-conic-gradient(from 10deg, rgba(246,227,107,0.7) 0 8deg, rgba(166,255,122,0.13) 8deg 18deg, transparent 18deg 26deg); filter: blur(0.2px); }
.bloom-one { width: 12rem; height: 12rem; right: 23%; top: 36%; }
.bloom-two { width: 7rem; height: 7rem; left: 30%; top: 28%; }

.ghost-run { position: absolute; z-index: 3; border: 1px dashed rgba(191,233,242,0.36); border-radius: 46%; opacity: var(--ghost-opacity, 0.16); animation: orbitGhost 13s linear infinite; }
.run-one { width: 48%; height: 24%; left: 24%; top: 48%; }
.run-two { width: 62%; height: 33%; left: 17%; top: 42%; animation-direction: reverse; }

.root-system { position: absolute; inset: 8% 10%; z-index: 2; opacity: var(--root-opacity, 0.2); }
.root-system path { fill: none; stroke: rgba(166,255,122,0.43); stroke-width: 1.4; stroke-dasharray: 7 10; animation: drawRoot 8s linear infinite; }

.glass-label { position: absolute; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(191,233,242,0.46); }
.label-a { left: 12%; top: 16%; }
.label-b { right: 13%; bottom: 17%; }

body.scene-0 { --stage-x: 10vw; --stage-y: 1vh; --stage-scale: 0.96; --vessel-rotation: -3deg; --terrain-opacity: 0.85; --city-opacity: 0.08; --weather-opacity: 0.1; --root-opacity: 0.32; }
body.scene-1 { --stage-x: -4vw; --stage-y: 0; --stage-scale: 1.04; --vessel-rotation: 3deg; --weather-opacity: 0.48; --city-opacity: 0.1; --root-opacity: 0.23; }
body.scene-2 { --stage-x: 8vw; --stage-y: -1vh; --stage-scale: 1.08; --vessel-rotation: -7deg; --city-opacity: 0.86; --weather-opacity: 0.22; --root-opacity: 0.34; }
body.scene-3 { --stage-x: -7vw; --stage-y: 1vh; --stage-scale: 1.03; --vessel-rotation: 5deg; --bloom-opacity: 0.78; --bloom-scale: 1; --weather-opacity: 0.16; --city-opacity: 0.58; }
body.scene-4 { --stage-x: 4vw; --stage-y: -2vh; --stage-scale: 1.13; --vessel-rotation: -1deg; --ghost-opacity: 0.44; --city-opacity: 0.38; --weather-opacity: 0.3; --root-opacity: 0.56; }
body.scene-5 { --stage-x: -2vw; --stage-y: 0; --stage-scale: 0.88; --vessel-rotation: 8deg; --ghost-opacity: 0.28; --bloom-opacity: 0.22; --bloom-scale: 0.72; --city-opacity: 0.18; }

@keyframes driftMesh { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes breathe { 0%, 100% { transform: scale(0.9); opacity: 0.45; } 50% { transform: scale(1.15); opacity: 0.9; } }
@keyframes weatherPass { 0%, 100% { transform: translateX(-8%) skewX(-8deg); } 50% { transform: translateX(18%) skewX(7deg); } }
@keyframes orbitGhost { to { transform: rotate(360deg); } }
@keyframes drawRoot { to { stroke-dashoffset: -68; } }

@media (max-width: 900px) {
  .specimen-tabs { left: 0.5rem; transform: none; top: auto; bottom: 0.7rem; flex-direction: row; max-width: calc(100vw - 1rem); overflow: hidden; }
  .tab { width: 4.5rem; min-height: 2.55rem; padding: 0.35rem; }
  .edge-scale, .annotation { display: none; }
  .room { grid-template-columns: 1rem 1fr 1rem; align-items: end; padding-bottom: 18vh; }
  .rail-left, .rail-right { grid-column: 2; }
  .vessel-stage { transform: translate3d(0, -10vh, 0) scale(0.82); }
  .glass-vessel { width: 92vw; height: 54vh; }
  h1 { writing-mode: horizontal-tb; transform: none; font-size: clamp(3.2rem, 15vw, 5rem); }
  h2 { font-size: clamp(3rem, 13vw, 5.4rem); }
  .vertical-label { right: 1rem; top: 9vh; }
}