:root {
  /* Compliance tokens from DESIGN.md: #000 #FFF (Google Interaction (4% frequency IntersectionObserver `threshold: 0.3` trigger animations */
  --void: #0a0a0f;
  --surface: #12121e;
  --magenta: #FF2E97;
  --lime: #39FF14;
  --cyan: #00F0FF;
  --gold: #FFD700;
  --text: #E8E8F0;
  --secondary: #7878A0;
  --body: #B8B8C8;
  --neon-current: #FF2E97;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--body);
  font-family: "Roboto Slab", Roboto, serif;
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

.garden { background: var(--void); }

.story-section {
  min-height: 100vh;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 4rem) clamp(3rem, 5vw, 6rem) clamp(2rem, 5vw, 6rem);
  position: relative;
  isolation: isolate;
}

.seed-section { --neon-current: var(--magenta); }
.sprout-section { --neon-current: var(--lime); }
.bloom-section { --neon-current: var(--cyan); }
.fruit-section { --neon-current: var(--gold); }

.section-marker,
.card-label {
  font-family: "Zilla Slab", "Roboto Slab", serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--neon-current) 60%, transparent);
}

.section-marker { margin: 0 0 1.2rem; }

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 3px;
  position: relative;
}

.seed-grid::before,
.mosaic-grid::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 28% 35%, color-mix(in srgb, var(--neon-current) 3%, transparent), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.card {
  background: var(--surface);
  border: 2px solid var(--neon-current);
  color: var(--body);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--neon-current) 5%, transparent), 0 0 8px color-mix(in srgb, var(--neon-current) 30%, transparent);
}

.keystone {
  grid-column: span 2;
  grid-row: span 2;
  border-image: linear-gradient(135deg, var(--neon-current), var(--cyan)) 1;
}

h1, h2 {
  font-family: "Zilla Slab", "Roboto Slab", serif;
  color: var(--neon-current);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin: 0.3em 0;
  text-shadow: 0 0 20px color-mix(in srgb, var(--neon-current) 24%, transparent);
}

h1 { font-size: clamp(4rem, 12vw, 10rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.8rem); }
p { font-size: clamp(0.95rem, 1.8vw, 1.15rem); margin: 0.8rem 0 0; max-width: 62ch; }
code { font-family: "IBM Plex Mono", monospace; color: #A0A0B8; background: rgba(255,255,255,0.04); padding: 0 3px; font-size: 0.85em; }

.seed-hero {
  min-height: min(80vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.botanical,
.tiny-flora,
.corner-fern {
  color: var(--neon-current);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px currentColor);
}

.botanical-peony {
  position: absolute;
  inset: 3% 4% auto auto;
  width: min(72%, 700px);
  height: auto;
  opacity: 0.72;
  z-index: -1;
}

.mini-card { min-height: 170px; display: flex; align-items: flex-end; justify-content: space-between; }
.sprig { font-size: clamp(1.4rem, 3vw, 2.8rem); color: var(--text); font-family: "Roboto Slab", serif; }
.tiny-flora { width: 72px; height: 72px; opacity: .9; }

.puzzle-divider {
  height: 110px;
  display: grid;
  place-items: center;
  background: var(--void);
  overflow: hidden;
}
.puzzle-divider svg { width: 60vw; min-width: 320px; animation: nudge 8s ease-in-out infinite alternate; }
.puzzle-divider path { fill: none; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px currentColor); }
.magenta-lime path { stroke: url(#none); color: var(--magenta); stroke: #FF2E97; }
.lime-cyan path { stroke: #39FF14; }
.cyan-gold path { stroke: #00F0FF; }

.sprout-grid .wide { grid-column: span 2; }
.flip-card { padding: 0; perspective: 1200px; overflow: visible; background: transparent; border: 0; box-shadow: none; min-height: 285px; }
.flip-inner { position: relative; width: 100%; min-height: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.flip-card:hover .flip-inner,
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; min-height: 100%; backface-visibility: hidden; background: var(--surface); border: 2px solid var(--neon-current); padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; box-shadow: inset 0 0 30px color-mix(in srgb, var(--neon-current) 5%, transparent), 0 0 8px color-mix(in srgb, var(--neon-current) 30%, transparent); }
.front h2 { font-size: clamp(1.55rem, 2.8vw, 3rem); }
.back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; }
.back::before { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 70% 35%, var(--neon-current), transparent 22%), repeating-linear-gradient(125deg, transparent 0 18px, color-mix(in srgb, var(--neon-current) 18%, transparent) 19px, transparent 20px); }
.back > * { position: relative; }
.back code { color: var(--neon-current); font-size: clamp(1rem, 2vw, 1.7rem); }
.corner-fern { position: absolute; right: 14px; top: 12px; width: 120px; height: 120px; opacity: .48; }
.large-fern { width: 100%; max-height: 180px; margin-top: .5rem; }

.bloom-grid { grid-template-columns: 1.2fr 1fr; }
.bloom-card { border-width: 3px; box-shadow: inset 0 0 42px rgba(0,240,255,0.08), 0 0 14px color-mix(in srgb, var(--neon-current) 32%, transparent); min-height: 320px; }
.bloom-card h2 { font-size: clamp(2rem, 4vw, 4rem); }
.lotus { width: 100%; max-height: 320px; }
.bouquet { position: absolute; right: 1rem; bottom: 1rem; width: 54%; opacity: .75; }

.fruit-section { min-height: 100vh; display: flex; flex-direction: column; }
.fruit-card { flex: 1; width: 100%; min-height: 78vh; display: grid; place-items: center; border-image: linear-gradient(135deg, var(--gold), var(--magenta)) 1; }
.domain-pattern { position: absolute; inset: -10%; font-family: "Zilla Slab", serif; font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); line-height: .95; color: var(--text); opacity: .03; transform: rotate(-5deg); text-transform: uppercase; }
.dandelion { position: absolute; width: min(62vw, 640px); height: auto; opacity: .8; }
.dandelion * { fill: none; stroke: currentColor; stroke-width: 2; }
.dandelion circle { fill: currentColor; stroke: none; }
.fruit-statement { position: relative; text-align: left; max-width: 900px; }
.fruit-statement h2 { color: var(--gold); }
.floating-seeds circle { animation: floatSeed 6s ease-in-out infinite; animation-delay: var(--d); }

.draw-scope path,
.draw-scope circle,
.draw-line {
  transition: stroke-dashoffset 1.8s ease-in-out, opacity .4s ease;
}
.draw-scope:not(.is-drawn) path,
.draw-scope:not(.is-drawn) circle { opacity: .25; }

@keyframes nudge { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes floatSeed { 0%, 18% { transform: translate(0,0); opacity: .15; } 55% { transform: translate(var(--x), -145px); opacity: 1; } 100% { transform: translate(calc(var(--x) * .65), -255px); opacity: 0; } }

@media (max-width: 820px) {
  .story-section { padding-left: 1rem; padding-right: 1rem; }
  .keystone, .sprout-grid .wide { grid-column: span 1; }
  .seed-hero { min-height: 66vh; }
  .bloom-grid { grid-template-columns: 1fr; }
  .flip-card { min-height: 350px; }
  .puzzle-divider svg { width: 86vw; }
}