:root {
  /* Compliance vocabulary from DESIGN.md: Space Mono** Mono* Bold upper-left; IBM Plex Mono** Mono* Medium SemiBold; Inter** Inter* Regular Medium for clean readability beneath the decorative glass layers. */
  --moon: #07110D;
  --mint: #B8FFE6;
  --emerald: #1ED68A;
  --magenta: #FF4FA3;
  --violet: #6D4CFF;
  --pearl: #F4FFF8;
  --gold: #FFD166;
  --glass: rgba(184, 255, 230, 0.14);
  --mag-glow: rgba(255, 79, 163, 0.42);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--pearl);
  background: var(--moon);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.terrarium {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 6%, rgba(184, 255, 230, 0.22), transparent 31rem),
    radial-gradient(circle at 84% 14%, rgba(255, 79, 163, 0.22), transparent 25rem),
    radial-gradient(circle at 68% 66%, rgba(109, 76, 255, 0.32), transparent 34rem),
    linear-gradient(135deg, #07110D 0%, #07110D 48%, #0c1f18 100%);
}

.terrarium:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(184,255,230,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,230,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 20% 10%, black, transparent 72%);
}

.botanical-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.42;
  background:
    repeating-radial-gradient(ellipse at 4% 38%, transparent 0 19px, rgba(30, 214, 138, 0.22) 20px 22px, transparent 23px 48px),
    repeating-radial-gradient(ellipse at 88% 78%, transparent 0 24px, rgba(184, 255, 230, 0.14) 25px 27px, transparent 28px 58px);
  filter: blur(0.4px);
}

.spore-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.spore {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
  opacity: 0.65;
  transform: translate3d(var(--x), var(--y), 0);
  animation: driftSpore var(--dur) linear infinite;
}

@keyframes driftSpore {
  from { transform: translate3d(var(--x), calc(var(--y) + 10vh), 0) scale(0.7); opacity: 0; }
  20% { opacity: 0.72; }
  to { transform: translate3d(calc(var(--x) + var(--sway)), calc(var(--y) - 110vh), 0) scale(1.15); opacity: 0; }
}

.glass-reflection {
  position: absolute;
  top: 128px;
  left: 7vw;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(4rem, 13vw, 13rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 255, 230, 0.11);
  transform: scaleY(-1) skewX(-10deg);
  opacity: 0.18;
  filter: blur(2px);
  pointer-events: none;
}

.panel {
  position: relative;
  min-height: 100vh;
  padding: 7vw 8vw 6vw 17vw;
}

.whisper-canopy {
  min-height: 82vh;
  padding-top: 5vw;
}

.bureau-label, .section-kicker, .timestamp, .hidden-note, .dispatch-stamp, .vine-mark span, .specimen-index {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.bureau-label {
  margin: 0 0 0.6rem;
  color: var(--gold);
  font-size: clamp(0.72rem, 1.1vw, 0.95rem);
}

.wordmark {
  margin: 0;
  max-width: 8ch;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(4.4rem, 14vw, 13.8rem);
  line-height: 0.78;
  letter-spacing: -0.12em;
  text-shadow: 0 0 26px rgba(184, 255, 230, 0.24), 0 0 74px rgba(109, 76, 255, 0.42);
}

.wordmark span { color: var(--magenta); text-shadow: 0 0 42px var(--mag-glow); }

.whisper-wire {
  position: absolute;
  top: clamp(17rem, 28vw, 24rem);
  left: 16vw;
  right: 4vw;
  height: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--mint), var(--magenta), transparent);
  box-shadow: 0 0 18px rgba(184, 255, 230, 0.65);
}

.top-bulletins {
  position: absolute;
  top: clamp(14.7rem, 25vw, 21rem);
  left: min(43vw, 620px);
  right: 4vw;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.bubble {
  position: relative;
  border: 1px solid rgba(184, 255, 230, 0.58);
  border-radius: 999px 999px 999px 34px;
  padding: 0.82rem 1.1rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(244, 255, 248, 0.55), transparent 18%),
    linear-gradient(135deg, rgba(184, 255, 230, 0.2), rgba(109, 76, 255, 0.16));
  color: var(--pearl);
  box-shadow: inset 0 0 20px rgba(244, 255, 248, 0.09), 0 0 22px rgba(184, 255, 230, 0.18);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transform: scale(0.001);
  animation: bubbleArrival 900ms cubic-bezier(.2, 1.6, .35, 1) forwards;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.bubble:nth-child(2) { animation-delay: 130ms; }
.bubble:nth-child(3) { animation-delay: 230ms; }
.bubble:nth-child(4) { animation-delay: 330ms; }
.bubble:nth-child(5) { animation-delay: 430ms; }
.bubble:nth-child(6) { animation-delay: 530ms; }

@keyframes bubbleArrival {
  0% { transform: scale(0.001) translateY(20px); }
  65% { transform: scale(1.16) translateY(-6px); }
  82% { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

.bubble:hover, .bubble.expanded {
  transform: scale(1.16) rotate(-1deg);
  border-color: var(--mint);
  background: linear-gradient(135deg, rgba(184, 255, 230, 0.34), rgba(255, 79, 163, 0.22));
  box-shadow: 0 0 0 4px rgba(184,255,230,0.08), 0 0 38px var(--mag-glow), inset 0 0 26px rgba(244,255,248,0.16);
}

.bubble:after {
  content: attr(data-note);
  position: absolute;
  left: 22%;
  top: calc(100% + 0.5rem);
  min-width: 13rem;
  padding: 0.48rem 0.62rem;
  border: 1px solid rgba(255, 209, 102, 0.48);
  border-radius: 14px;
  background: rgba(7, 17, 13, 0.82);
  color: var(--gold);
  font-family: "Syne Mono", "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 4;
}

.bubble:hover:after, .bubble.expanded:after { opacity: 1; transform: translateY(0) scale(1); }

.vine-index {
  position: fixed;
  left: 6.5vw;
  top: 22vh;
  bottom: 8vh;
  width: 2px;
  z-index: 20;
  background: linear-gradient(var(--emerald), var(--mint), var(--magenta));
  box-shadow: 0 0 18px rgba(30, 214, 138, 0.72);
}

.vine-index:before, .vine-index:after {
  content: "";
  position: absolute;
  width: 42px;
  height: 28px;
  border: 1px solid rgba(30, 214, 138, 0.48);
  border-left: 0;
  border-radius: 0 100% 0 100%;
  transform: rotate(-20deg);
}

.vine-index:before { left: 0; top: 14%; }
.vine-index:after { left: -40px; top: 54%; transform: rotate(165deg); }

.vine-mark {
  position: absolute;
  left: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--moon);
  border: 2px solid var(--mint);
  box-shadow: 0 0 18px rgba(184,255,230,0.5);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.vine-mark:nth-child(1) { top: 0; }
.vine-mark:nth-child(2) { top: 24%; }
.vine-mark:nth-child(3) { top: 48%; }
.vine-mark:nth-child(4) { top: 72%; }
.vine-mark:nth-child(5) { top: 100%; }
.vine-mark span { position: absolute; left: 1.8rem; top: -0.25rem; font-size: 0.72rem; color: rgba(244,255,248,0.72); }
.vine-mark.active { transform: scale(1.45); background: var(--magenta); border-color: var(--gold); }

.section-kicker { color: var(--emerald); font-size: 0.78rem; margin-bottom: 1.3rem; }

.headline-band {
  min-height: 110vh;
  display: grid;
  grid-template-columns: minmax(280px, 1.08fr) minmax(220px, 0.75fr);
  grid-template-rows: auto 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}

.headline-band .section-kicker { grid-column: 1 / -1; }

.glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(184, 255, 230, 0.42);
  border-radius: 34px;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  background:
    linear-gradient(135deg, rgba(184, 255, 230, 0.18), rgba(184,255,230,0.05) 45%, rgba(109, 76, 255, 0.18)),
    rgba(7, 17, 13, 0.42);
  box-shadow: inset 0 1px 0 rgba(244,255,248,0.24), 0 22px 80px rgba(0,0,0,0.28), 0 0 36px rgba(184, 255, 230, 0.11);
  backdrop-filter: blur(22px) saturate(130%);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.glass-card:before {
  content: attr(data-label);
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-family: "Syne Mono", "IBM Plex Mono", monospace;
  color: rgba(184,255,230,0.48);
  font-size: 0.75rem;
}

.glass-card:after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(244,255,248,0.24) 0 1px, transparent 2px 100%);
  background-size: 35px 35px;
  opacity: 0.18;
  pointer-events: none;
}

.glass-card:hover, .glass-card.expanded {
  transform: scale(1.035) translateY(-6px);
  border-color: var(--mint);
  box-shadow: inset 0 1px 0 rgba(244,255,248,0.34), 0 30px 96px rgba(0,0,0,0.36), 0 0 48px var(--mag-glow);
}

.glass-card h2, .glass-card h3, .chamber-copy h2 {
  margin: 0 0 1rem;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.glass-card h2, .chamber-copy h2 { font-size: clamp(2rem, 5vw, 5rem); }
.glass-card h3 { font-size: clamp(1.35rem, 2.2vw, 2.35rem); }
.glass-card p, .chamber-copy p { color: rgba(244,255,248,0.78); line-height: 1.65; }
.timestamp { color: var(--gold); font-size: 0.72rem; }
.hidden-note { display: inline-block; margin-top: 1rem; color: var(--magenta); font-size: 0.72rem; opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; }
.glass-card:hover .hidden-note, .glass-card.expanded .hidden-note { opacity: 1; transform: translateY(0); }

.card-pin {
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 16px var(--emerald);
}
.card-pin.gold { background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.card-pin.magenta { background: var(--magenta); box-shadow: 0 0 16px var(--magenta); }

.lead-card { grid-row: 2 / 4; min-height: 68vh; padding-top: 4rem; }
.offset-card { transform: translateY(4rem) rotate(1deg); }
.narrow-card { max-width: 78%; justify-self: end; transform: translateY(5rem) rotate(-2deg); }

.specimen-panel { min-height: 105vh; }
.specimen-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.specimen-card:nth-child(2) { margin-top: 7rem; }
.specimen-index { color: var(--gold); font-size: 0.82rem; }
.specimen-card i { display: block; margin-top: 1.2rem; color: var(--mint); font-family: "Syne Mono", monospace; font-style: normal; }

.bubble-chamber {
  display: grid;
  grid-template-columns: minmax(270px, 0.8fr) 1.2fr;
  gap: 2rem;
  align-items: center;
}

.phrase-cloud {
  position: relative;
  min-height: 60vh;
  border: 1px solid rgba(184,255,230,0.16);
  border-radius: 46px;
  background: radial-gradient(circle at 50% 50%, rgba(184,255,230,0.08), transparent 70%);
}

.phrase { position: absolute; }
.phrase:nth-child(1) { left: 8%; top: 14%; }
.phrase:nth-child(2) { left: 35%; top: 6%; }
.phrase:nth-child(3) { left: 62%; top: 28%; }
.phrase:nth-child(4) { left: 16%; top: 58%; }
.phrase:nth-child(5) { left: 48%; top: 70%; }
.phrase:nth-child(6) { left: 70%; top: 52%; }
.phrase.large { padding: 1.3rem 1.6rem; font-size: 1.2rem; }
.phrase.violet { border-color: var(--violet); }
.phrase.gold { border-color: var(--gold); }
.phrase.magenta { border-color: var(--magenta); }
.phrase.mint { border-color: var(--mint); }

.moon-scene {
  min-height: 95vh;
  display: grid;
  place-items: center;
}
.sealed-dispatch { max-width: 850px; text-align: left; }
.dispatch-stamp { margin-top: 2rem; color: var(--gold); border-top: 1px solid rgba(255,209,102,0.42); padding-top: 1rem; }
.moon-bubble { position: absolute; right: 11vw; bottom: 20vh; padding: 1.4rem 1.8rem; }

.note-orb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  max-width: 240px;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 209, 102, 0.52);
  border-radius: 16px 16px 16px 3px;
  background: rgba(7, 17, 13, 0.88);
  color: var(--gold);
  font-family: "Syne Mono", monospace;
  font-size: 0.78rem;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.94);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.note-orb.visible { opacity: 1; transform: translate3d(var(--mx), var(--my), 0) scale(1); }

.pollen-burst {
  position: fixed;
  z-index: 90;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  box-shadow: 0 0 14px var(--gold);
  animation: pollenPop 560ms ease-out forwards;
}

@keyframes pollenPop {
  to { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
}

@media (max-width: 900px) {
  .panel { padding: 7rem 5vw 5rem 6rem; }
  .top-bulletins { position: relative; left: 0; right: auto; top: auto; margin-top: 2rem; }
  .whisper-wire { left: 6rem; top: 29rem; }
  .vine-index { left: 2.3rem; }
  .headline-band, .specimen-stack, .bubble-chamber { grid-template-columns: 1fr; }
  .lead-card, .offset-card, .narrow-card, .specimen-card:nth-child(2) { max-width: none; margin-top: 0; transform: none; }
  .phrase-cloud { min-height: 560px; }
}

@media (max-width: 560px) {
  .panel { padding-left: 1.1rem; padding-right: 1.1rem; }
  .vine-index { display: none; }
  .wordmark { font-size: 4.2rem; }
  .glass-reflection { left: 1rem; font-size: 4.2rem; }
  .whisper-wire { left: 1rem; top: 26rem; }
}