:root {
  /* Design typography trace: IBM Plex Mono micro-data accent, fade in one by one. Use micro-interactions as the main storytelling device: hover over a particle to make nearby labels brighten. IBM Plex Mono for an eclectic hybrid voice that feels poetic. IBM Plex Mono** for timestamps. Interface and body: **Space Grotesk** for readings. */
  --violet-night: #190B2F;
  --forest-glass: #0F3D2E;
  --murasaki: #8E44FF;
  --fern: #47C978;
  --mist: #DCCBFF;
  --pollen: #F6D36B;
  --ink-moss: #06130D;
  --fraunces: "Fraunces", Georgia, serif;
  --space: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--violet-night); overflow-x: hidden; }

body { color: var(--mist); font-family: var(--space); }

button { font: inherit; color: inherit; }

.grove-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 64% 50%, rgba(142, 68, 255, .26), transparent 23rem),
    radial-gradient(circle at 16% 86%, rgba(71, 201, 120, .12), transparent 24rem),
    linear-gradient(135deg, var(--ink-moss), var(--violet-night) 42%, #10071f 100%);
}

.grid-veil {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(71, 201, 120, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 201, 120, .09) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 58% 52%, black, transparent 78%);
  z-index: -5;
}

.halo { position: absolute; border-radius: 999px; filter: blur(34px); pointer-events: none; z-index: -4; }
.halo-violet { width: 35vw; height: 35vw; left: 48%; top: 22%; background: rgba(142, 68, 255, .16); }
.halo-fern { width: 22vw; height: 22vw; left: 8%; bottom: 1%; background: rgba(71, 201, 120, .12); }
.particle-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.glass-panel {
  border: 1px solid rgba(220, 203, 255, .18);
  background: linear-gradient(135deg, rgba(15, 61, 46, .48), rgba(25, 11, 47, .38));
  box-shadow: 0 24px 80px rgba(6, 19, 13, .42), inset 0 1px 0 rgba(220, 203, 255, .12);
  backdrop-filter: blur(18px);
}

.identity-panel {
  position: absolute;
  left: clamp(24px, 6vw, 88px);
  top: clamp(28px, 7vh, 82px);
  width: min(520px, 44vw);
  padding: 28px 30px 30px;
  border-radius: 30px 30px 46px 20px;
}

.micro-label, .ribbon-title, .float-note, .readout span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(220, 203, 255, .68);
}

h1 {
  margin: 8px 0 10px;
  font-family: var(--fraunces);
  font-size: clamp(56px, 8vw, 126px);
  line-height: .78;
  font-weight: 700;
  letter-spacing: -.065em;
  color: var(--mist);
  text-shadow: 0 0 34px rgba(142, 68, 255, .4);
}

.state-copy { max-width: 30rem; color: rgba(220, 203, 255, .78); line-height: 1.55; font-size: 15px; }
.state-switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 999px; background: rgba(6, 19, 13, .54); color: var(--fern); font-family: var(--mono); font-size: 12px; }
.state-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fern); box-shadow: 0 0 18px var(--fern); }

.left-ribbon { position: absolute; left: 28px; top: 45%; transform: translateY(-32%); width: 176px; padding: 18px; border-radius: 28px; }
.sample { margin-top: 18px; padding-left: 12px; border-left: 1px solid rgba(71, 201, 120, .3); }
.sample span { display: block; color: rgba(220, 203, 255, .62); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.sample b { display: block; margin-top: 5px; color: var(--fern); font-family: var(--mono); font-weight: 500; }
.sample.active b { color: var(--pollen); }
.specimen-bars { display: flex; align-items: end; gap: 8px; height: 86px; margin-top: 22px; }
.specimen-bars i { flex: 1; height: var(--h); border-radius: 12px 12px 4px 4px; background: linear-gradient(var(--murasaki), var(--fern)); opacity: .72; }

.bloom-stage { position: absolute; inset: 12vh 10vw 12vh 22vw; display: grid; place-items: center; }
.connector-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .86; }
.thread { fill: none; stroke: rgba(71, 201, 120, .34); stroke-width: 1; stroke-dasharray: 8 13; filter: drop-shadow(0 0 5px rgba(71, 201, 120, .25)); }
.thread-two { stroke: rgba(142, 68, 255, .36); }
.thread-three { stroke: rgba(246, 211, 107, .25); }

.bloom-map {
  position: relative;
  width: clamp(280px, 34vw, 510px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, rgba(220, 203, 255, .1), rgba(142, 68, 255, .07) 30%, rgba(6, 19, 13, .58) 56%, transparent 68%);
  box-shadow: inset 0 0 80px rgba(142, 68, 255, .17), 0 0 90px rgba(142, 68, 255, .14);
}
.ring { position: absolute; inset: var(--inset); border: 1px solid rgba(220, 203, 255, .22); border-radius: 50%; transform: scale(.7); opacity: .22; transition: transform 900ms ease, opacity 900ms ease; }
.ring-a { --inset: 5%; border-top-color: var(--murasaki); }
.ring-b { --inset: 17%; border-right-color: var(--fern); }
.ring-c { --inset: 29%; border-bottom-color: var(--pollen); }
.petals { position: absolute; inset: 18%; animation: slowTurn 28s linear infinite; }
.petals i { position: absolute; left: 45%; top: 4%; width: 11%; height: 42%; border-radius: 60% 60% 52% 52%; transform-origin: 50% 110%; background: radial-gradient(circle at 50% 18%, var(--mist), var(--murasaki) 45%, rgba(142, 68, 255, .04) 72%); opacity: .55; filter: blur(.2px) drop-shadow(0 0 16px rgba(142, 68, 255, .55)); }
.petals i:nth-child(2) { transform: rotate(45deg); }.petals i:nth-child(3) { transform: rotate(90deg); }.petals i:nth-child(4) { transform: rotate(135deg); }.petals i:nth-child(5) { transform: rotate(180deg); }.petals i:nth-child(6) { transform: rotate(225deg); }.petals i:nth-child(7) { transform: rotate(270deg); }.petals i:nth-child(8) { transform: rotate(315deg); }
.core { position: absolute; inset: 43%; border-radius: 50%; background: var(--fern); box-shadow: 0 0 28px var(--fern), 0 0 64px var(--murasaki); }
.bloom-label { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); white-space: nowrap; color: var(--mist); font-family: var(--fraunces); font-size: 24px; }

.float-note { position: absolute; padding: 8px 10px; border: 1px solid rgba(220, 203, 255, .16); border-radius: 999px; background: rgba(6, 19, 13, .48); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease, color .25s ease; }
.note-a { left: 18%; top: 30%; }.note-b { right: 13%; top: 38%; }.note-c { left: 45%; bottom: 12%; }

.gauge-panel { position: absolute; right: clamp(22px, 5vw, 76px); top: clamp(34px, 12vh, 120px); width: min(310px, 27vw); padding: 24px; border-radius: 26px 46px 26px 26px; }
.gauge { width: 172px; display: block; margin: 0 auto 4px; }
.gauge-base { fill: none; stroke: rgba(220, 203, 255, .13); stroke-width: 8; }
.gauge-live { fill: none; stroke: var(--fern); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 310 440; transform: rotate(130deg); transform-origin: center; filter: drop-shadow(0 0 10px rgba(71, 201, 120, .6)); }
.stem-line { fill: none; stroke: var(--murasaki); stroke-width: 3; stroke-linecap: round; }
.dew { fill: var(--pollen); filter: drop-shadow(0 0 8px var(--pollen)); }
.gauge-panel h2 { margin: 6px 0 8px; font-family: var(--fraunces); font-size: 34px; line-height: 1; color: var(--mist); }
.gauge-panel p:not(.micro-label) { color: rgba(220, 203, 255, .72); line-height: 1.5; font-size: 14px; }

.bottom-ribbon { position: absolute; left: 18vw; right: 8vw; bottom: 28px; min-height: 90px; border-radius: 34px 18px 34px 34px; display: grid; grid-template-columns: repeat(3, 1fr) 90px; align-items: center; gap: 14px; padding: 16px 22px; }
.readout b { display: block; margin-top: 4px; font-family: var(--fraunces); font-size: 28px; font-weight: 600; color: var(--fern); }
.dial { width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(220, 203, 255, .24); position: relative; background: radial-gradient(circle, rgba(142, 68, 255, .16), transparent 62%); }
.dial i { position: absolute; left: 50%; top: 8px; width: 2px; height: 26px; background: var(--pollen); transform-origin: 50% 26px; transform: translateX(-50%) rotate(var(--dial, 0deg)); box-shadow: 0 0 10px var(--pollen); }
.seal { position: absolute; display: grid; place-items: center; border: 1px solid rgba(246, 211, 107, .28); color: var(--pollen); font-family: var(--fraunces); border-radius: 50%; opacity: .6; }
.seal-one { right: 28%; top: 16%; width: 46px; height: 46px; }.seal-two { left: 14%; bottom: 22%; width: 54px; height: 54px; font-size: 13px; }

.grove-shell.awake .ring { transform: scale(1); opacity: .9; }
.grove-shell.awake .float-note { opacity: 1; transform: translateY(0); }
.grove-shell.uplink .gauge-live { stroke: var(--pollen); stroke-dasharray: 390 440; }
.grove-shell.flower-burst .petals i { animation: petalPulse 800ms ease both; }
.glass-panel:hover { border-color: rgba(71, 201, 120, .42); box-shadow: 0 28px 90px rgba(6, 19, 13, .48), inset 0 0 36px rgba(220, 203, 255, .06); }
.float-note.bright, .bloom-map:hover + .float-note { color: var(--pollen); }

@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes petalPulse { 50% { filter: drop-shadow(0 0 30px var(--murasaki)); opacity: .98; transform: rotate(var(--burst-rot, 0deg)) scale(1.18); } }

@media (max-width: 900px) {
  .identity-panel, .gauge-panel, .left-ribbon, .bottom-ribbon { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; margin: 18px; }
  .grove-shell { min-height: 1200px; padding-top: 1px; }
  .bloom-stage { position: relative; inset: auto; height: 470px; margin: 30px 0; }
  .bottom-ribbon { grid-template-columns: 1fr 1fr; }
}