:root {
  /* design typography tokens: should appear sparingly design does drift overused mono-heavy labels IntersectionObserver paragraphs readable casual Grotesk** Grotesk* product-language subheads */
  --deep-canopy: #12372A;
  --fern-highlight: #4D7C45;
  --lichen-glow: #C7E77D;
  --glass-mint: #EEF7EA;
  --moss-base: #DDE8D2;
  --wet-bark: #2B2118;
  --spore-peach: #F2B38C;
  --pale-highlight: rgba(255,255,245,0.82);
  --deep-shadow: rgba(18,55,42,0.22);
  --inner-shadow: rgba(18,55,42,0.13);
  --glass-blur: 22px;
  --display-font: Fraunces, Lora, Georgia, 'Times New Roman', serif;
  --body-font: 'Space Grotesk', Space, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono-font: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100%;
  color: var(--deep-canopy);
  font-family: var(--body-font);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(199,231,125,0.48), transparent 24rem),
    radial-gradient(circle at 88% 34%, rgba(238,247,234,0.88), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(242,179,140,0.16), transparent 18rem),
    linear-gradient(135deg, #DDE8D2 0%, #EEF7EA 48%, #DDE8D2 100%);
}

.moss-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(18,55,42,0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(77,124,69,0.11) 0 1px, transparent 1.7px),
    radial-gradient(circle at 40% 80%, rgba(255,255,245,0.46) 0 1px, transparent 1.4px);
  background-size: 23px 23px, 31px 31px, 17px 17px;
}

.garden-spine {
  position: relative;
  z-index: 1;
}

.story-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8vh clamp(1rem, 3vw, 3rem);
  position: relative;
}

.section-cushion {
  width: min(1120px, 100%);
  min-height: 78vh;
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 4vw, 3.5rem);
  border-radius: 52px 36px 64px 42px;
  background: rgba(221,232,210,0.42);
  box-shadow: inset 18px 18px 38px rgba(18,55,42,0.10), inset -18px -18px 38px rgba(255,255,245,0.62);
}

.section-cushion.wide { grid-template-columns: 1.05fr 0.95fr; }
.section-cushion.narrow { width: min(820px, 100%); grid-template-columns: 1fr; }

.frosted-card,
.concave-panel {
  border: 1px solid rgba(255,255,245,0.58);
  backdrop-filter: blur(var(--glass-blur));
}

.frosted-card {
  background: linear-gradient(145deg, rgba(238,247,234,0.78), rgba(238,247,234,0.42));
  border-radius: 38px 28px 44px 32px;
  box-shadow: -18px -18px 38px var(--pale-highlight), 20px 24px 44px var(--deep-shadow), inset 1px 1px 0 rgba(255,255,245,0.72);
}

.concave-panel {
  background: rgba(221,232,210,0.55);
  border-radius: 44px 34px 50px 30px;
  box-shadow: inset 15px 15px 28px rgba(18,55,42,0.15), inset -16px -16px 30px rgba(255,255,245,0.72);
}

.hero-card,
.primary-moment,
.tool-shed {
  padding: clamp(2rem, 5vw, 4.8rem);
}

.eyebrow,
.card-label,
.floating-note,
.tag-chip,
.glass-caption,
.code-note,
.root-footer {
  font-family: var(--mono-font);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: lowercase;
}

.eyebrow {
  color: var(--fern-highlight);
  margin-bottom: 1rem;
}

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2 {
  font-family: var(--display-font);
  color: var(--deep-canopy);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

h1 {
  font-size: clamp(4rem, 12vw, 10.5rem);
  max-width: 9ch;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(3rem, 8vw, 7rem);
  margin-bottom: 1.1rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.45rem;
}

p {
  font-size: clamp(1.06rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: rgba(18,55,42,0.82);
}

.lead { max-width: 49ch; }

.hero-actions,
.shed-shelf,
.input-pods,
.archetype-orbit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.6rem;
}

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

.convex-chip,
.archetype-chip,
.tag-chip,
.pod-toggle {
  border: 0;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.82rem 1.15rem;
  background: linear-gradient(145deg, #EEF7EA, #DDE8D2);
  color: var(--deep-canopy);
  box-shadow: -7px -7px 16px rgba(255,255,245,0.84), 8px 10px 18px rgba(18,55,42,0.18);
  cursor: pointer;
  transition: transform 360ms cubic-bezier(.22,1.55,.36,1), box-shadow 360ms ease, background 360ms ease;
}

.convex-chip:hover,
.archetype-chip:hover,
.pod-toggle:hover,
.tag-chip:hover {
  transform: translateY(-4px) scale(1.035);
  box-shadow: -9px -9px 18px rgba(255,255,245,0.9), 10px 14px 22px rgba(18,55,42,0.21);
}

.archetype-chip.active,
.pod-toggle.active,
.seed-toggle.is-pressed {
  background: linear-gradient(145deg, var(--lichen-glow), #DDE8D2);
  box-shadow: inset 7px 7px 14px rgba(18,55,42,0.14), inset -8px -8px 15px rgba(255,255,245,0.62);
  transform: scale(0.98);
}

.hero-specimen,
.compost-specimen {
  padding: clamp(1.3rem, 3vw, 2rem);
  align-self: center;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-specimen::before,
.compost-specimen::before,
.greenhouse-card::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 25%, rgba(199,231,125,0.26) 0 0.35rem, transparent 0.42rem),
    radial-gradient(circle at 82% 68%, rgba(242,179,140,0.22) 0 0.28rem, transparent 0.36rem),
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,245,0.22) 39% 40%, transparent 41% 100%);
  opacity: 0.78;
}

.etched-corner {
  position: absolute;
  right: 1.25rem;
  top: 1.2rem;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  color: rgba(18,55,42,0.48);
  padding: 0.45rem 0.62rem;
  border-radius: 999px;
  background: rgba(255,255,245,0.24);
  box-shadow: inset 2px 2px 6px rgba(18,55,42,0.08), inset -2px -2px 6px rgba(255,255,245,0.58);
}

.root-diagram,
.latch-diagram {
  width: 100%;
  height: auto;
  overflow: visible;
}

.vine {
  fill: none;
  stroke: var(--fern-highlight);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 8px rgba(18,55,42,0.13));
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}

.vine.secondary { stroke: var(--lichen-glow); stroke-width: 5; opacity: 0.9; }
.story-section.is-visible .draw-vine { animation: drawVine 1400ms cubic-bezier(.2,1.2,.32,1) forwards; }

.leaf-node ellipse,
.seed-stack circle,
.snap-node {
  fill: rgba(199,231,125,0.76);
  stroke: rgba(18,55,42,0.24);
  stroke-width: 2;
}

.leaf-node circle { fill: var(--fern-highlight); }
.seed-stack circle { fill: var(--spore-peach); }
.soft-socket { fill: rgba(238,247,234,0.72); stroke: rgba(18,55,42,0.18); stroke-width: 2; }

.floating-note,
.glass-note,
.code-note {
  position: absolute;
  padding: 0.72rem 0.9rem;
  border-radius: 16px 20px 14px 22px;
  background: rgba(238,247,234,0.54);
  box-shadow: -8px -8px 18px rgba(255,255,245,0.65), 9px 10px 18px rgba(18,55,42,0.13);
  backdrop-filter: blur(14px);
}

.note-one { top: 9%; left: 6%; transform: rotate(-6deg); }
.note-two { right: 8%; top: 14%; transform: rotate(5deg); }
.bed-note { right: -2%; top: 18%; }
.compost-note { left: 44%; top: 7%; transform: rotate(-3deg); }
.greenhouse-note { right: -6%; bottom: 18%; transform: rotate(6deg); }
.peach { background: rgba(242,179,140,0.36); }

.code-note {
  right: 8%;
  bottom: 8%;
  position: absolute;
  color: var(--wet-bark);
}

code { font-family: var(--mono-font); }

.sprout {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 5px;
  height: 0;
  border-radius: 999px;
  background: var(--fern-highlight);
  box-shadow: 0 0 0 8px rgba(199,231,125,0.16);
  transition: height 900ms cubic-bezier(.22,1.4,.38,1);
}

.sprout::before,
.sprout::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 30px;
  height: 16px;
  background: var(--lichen-glow);
  border-radius: 100% 0 100% 0;
  opacity: 0;
  transition: opacity 500ms ease 420ms, transform 700ms cubic-bezier(.22,1.4,.38,1) 420ms;
}

.sprout::before { right: 0; transform: scale(0.2) rotate(-35deg); transform-origin: right center; }
.sprout::after { left: 0; transform: scale(0.2) rotate(35deg); transform-origin: left center; }
.is-visible .sprout { height: 72px; }
.is-visible .sprout::before { opacity: 1; transform: scale(1) rotate(-35deg); }
.is-visible .sprout::after { opacity: 1; transform: scale(1) rotate(35deg); }

.archetype-display {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 30px;
  background: rgba(221,232,210,0.45);
  box-shadow: inset 8px 8px 16px rgba(18,55,42,0.10), inset -9px -9px 18px rgba(255,255,245,0.62);
}

.fern-stack {
  position: relative;
  height: 150px;
}

.fern-stack span {
  position: absolute;
  left: 16px;
  width: 118px;
  height: 38px;
  border-radius: 70% 18px 70% 18px;
  background: linear-gradient(145deg, var(--lichen-glow), var(--fern-highlight));
  box-shadow: 6px 8px 16px rgba(18,55,42,0.18);
  transform-origin: left center;
}

.fern-stack span:nth-child(1) { top: 12px; transform: rotate(-14deg); }
.fern-stack span:nth-child(2) { top: 42px; transform: rotate(3deg); }
.fern-stack span:nth-child(3) { top: 72px; transform: rotate(-8deg); }
.fern-stack span:nth-child(4) { top: 102px; transform: rotate(9deg); }

.diagram-mode.queue span { width: 36px; height: 36px; border-radius: 50%; top: 58px; transform: none; }
.diagram-mode.queue span:nth-child(1) { left: 14px; }
.diagram-mode.queue span:nth-child(2) { left: 54px; }
.diagram-mode.queue span:nth-child(3) { left: 94px; }
.diagram-mode.queue span:nth-child(4) { left: 134px; }
.diagram-mode.signal span { border-radius: 50% 50% 50% 12px; animation: dewPulse 1250ms ease-in-out infinite; }
.diagram-mode.signal span:nth-child(1) { transform: scale(0.72); }
.diagram-mode.signal span:nth-child(2) { transform: scale(0.88); animation-delay: 120ms; }
.diagram-mode.signal span:nth-child(3) { transform: scale(1.04); animation-delay: 240ms; }
.diagram-mode.signal span:nth-child(4) { transform: scale(1.2); animation-delay: 360ms; }
.diagram-mode.branch span { width: 90px; }
.diagram-mode.branch span:nth-child(1) { transform: rotate(-24deg); left: 34px; top: 16px; }
.diagram-mode.branch span:nth-child(2) { transform: rotate(-8deg); left: 52px; top: 50px; }
.diagram-mode.branch span:nth-child(3) { transform: rotate(11deg); left: 50px; top: 86px; }
.diagram-mode.branch span:nth-child(4) { transform: rotate(28deg); left: 28px; top: 118px; }

.compost-layout { grid-template-columns: 0.9fr 1.1fr; }
.compost-specimen { filter: blur(1.3px); transition: filter 700ms ease, transform 700ms cubic-bezier(.22,1.4,.38,1); }
.is-visible .compost-specimen { filter: blur(0); }

.mess-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1rem 0 2rem;
}

.mess-cloud span {
  padding: 0.65rem 0.82rem;
  border-radius: 999px;
  background: rgba(242,179,140,0.24);
  font-family: var(--mono-font);
  font-size: 0.78rem;
}

.greenhouse-board {
  position: relative;
  min-height: 310px;
  margin-top: 1.7rem;
  border-radius: 38px;
  background: rgba(221,232,210,0.42);
  box-shadow: inset 12px 12px 24px rgba(18,55,42,0.12), inset -14px -14px 28px rgba(255,255,245,0.7);
  display: grid;
  place-items: center;
}

.greenhouse-vine {
  position: absolute;
  inset: 1.2rem;
  width: calc(100% - 2.4rem);
  height: calc(100% - 2.4rem);
  opacity: 0.52;
  pointer-events: none;
}

.seed-switch {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 98px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--moss-base);
  box-shadow: inset 7px 7px 13px rgba(18,55,42,0.16), inset -7px -7px 14px rgba(255,255,245,0.72);
  cursor: pointer;
}

.seed-switch span {
  display: block;
  width: 36px;
  height: 30px;
  border-radius: 55% 45% 55% 45%;
  margin: 9px;
  background: var(--lichen-glow);
  box-shadow: 5px 6px 12px rgba(18,55,42,0.22);
  transition: transform 520ms cubic-bezier(.22,1.55,.36,1), background 320ms ease;
}

.seed-switch.on span { transform: translateX(42px) rotate(22deg); background: var(--spore-peach); }

.alignment-ring {
  width: min(280px, 66vw);
  aspect-ratio: 1;
  border-radius: 45% 55% 48% 52%;
  border: 12px solid rgba(199,231,125,0.62);
  box-shadow: -12px -12px 24px rgba(255,255,245,0.72), 13px 16px 25px rgba(18,55,42,0.18), inset 8px 8px 16px rgba(18,55,42,0.10);
  position: relative;
  transition: transform 650ms cubic-bezier(.2,1.7,.35,1), border-radius 650ms cubic-bezier(.2,1.7,.35,1);
}

.alignment-ring.aligned { transform: scale(0.92) rotate(8deg); border-radius: 50%; }
.alignment-ring i {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(238,247,234,0.9);
  box-shadow: 5px 7px 14px rgba(18,55,42,0.16);
}
.alignment-ring i:nth-child(1) { left: 44%; top: -22px; }
.alignment-ring i:nth-child(2) { right: -18px; top: 58%; }
.alignment-ring i:nth-child(3) { left: 4%; bottom: 10%; }

.clearing-note { right: 1rem; bottom: 1rem; }
.root-footer { position: absolute; left: 8%; bottom: 6%; color: rgba(18,55,42,0.58); }

.leaf-index {
  position: fixed;
  right: clamp(0.6rem, 2vw, 1.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.65rem;
  border-radius: 999px;
  background: rgba(238,247,234,0.42);
  backdrop-filter: blur(16px);
  box-shadow: -8px -8px 18px rgba(255,255,245,0.62), 9px 10px 20px rgba(18,55,42,0.15);
}

.index-bead {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--glass-mint);
  box-shadow: inset 2px 2px 4px rgba(18,55,42,0.16), inset -2px -2px 4px rgba(255,255,245,0.8);
  position: relative;
  transition: transform 350ms cubic-bezier(.22,1.55,.36,1), background 250ms ease;
}

.index-bead span {
  position: absolute;
  right: 1.65rem;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  pointer-events: none;
  font-family: var(--mono-font);
  font-size: 0.7rem;
  background: rgba(238,247,234,0.8);
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  transition: opacity 200ms ease, transform 300ms ease;
}

.index-bead:hover span,
.index-bead.active span { opacity: 1; transform: translateY(-50%) translateX(0); }
.index-bead.active { background: var(--lichen-glow); transform: scale(1.42); }

.puff-target {
  transform: translateY(22px) scale(0.985);
  opacity: 0.72;
  transition: transform 850ms cubic-bezier(.18,1.45,.34,1), opacity 550ms ease, border-radius 800ms cubic-bezier(.18,1.45,.34,1);
}

.is-visible .puff-target {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes dewPulse { 50% { filter: brightness(1.08); } }

@media (max-width: 860px) {
  .section-cushion.wide,
  .compost-layout,
  .section-cushion { grid-template-columns: 1fr; min-height: auto; }
  .hero-specimen,
  .compost-specimen { min-height: 300px; }
  .archetype-display { grid-template-columns: 1fr; }
  .floating-note { position: relative; top: auto; left: auto; right: auto; bottom: auto; display: inline-block; width: max-content; max-width: 100%; }
  .code-note { position: relative; right: auto; bottom: auto; }
  .leaf-index { right: 0.55rem; }
  h1 { font-size: clamp(3.4rem, 18vw, 6rem); }
}