:root {
  /* DESIGN typography tokens for compliance: Inter** concise explanations Grotesk** wordmark */
  --charcoal: #15120E;
  --walnut: #3B2818;
  --umber: #6F4B2A;
  --tea: #B58A58;
  --paper: #E7D6B3;
  --olive: #6F7A45;
  --parchment: #F6EBD0;
  --cyan: #77D7D0;
  --amber: #D89A3A;
  --space: "Space Grotesk", "Inter", system-ui, sans-serif;
  --inter: "Inter", system-ui, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--walnut);
  background:
    radial-gradient(circle at 18% 12%, rgba(246, 235, 208, .86), transparent 34rem),
    radial-gradient(circle at 74% 30%, rgba(181, 138, 88, .22), transparent 32rem),
    linear-gradient(135deg, #d7bd8c 0%, var(--paper) 38%, #cda977 100%);
  font-family: var(--inter);
  overflow-x: hidden;
}

body.booting { overflow: hidden; }

.paper-grain,
.boot-shadow,
.hud-frame { position: fixed; inset: 0; pointer-events: none; }

.paper-grain {
  z-index: 1;
  opacity: .45;
  background-image:
    repeating-linear-gradient(0deg, rgba(59, 40, 24, .035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(111, 75, 42, .025) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 20% 40%, rgba(59, 40, 24, .07) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

.boot-shadow {
  z-index: 20;
  background: var(--charcoal);
  animation: bootFade 2.4s ease forwards;
}

.hud-frame { z-index: 30; }

.corner {
  position: absolute;
  width: 84px;
  height: 84px;
  border-color: rgba(119, 215, 208, .82);
  filter: drop-shadow(0 0 10px rgba(119, 215, 208, .42));
}

.corner-tl { left: 22px; top: 22px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { right: 22px; top: 22px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { left: 22px; bottom: 22px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { right: 22px; bottom: 22px; border-bottom: 1px solid; border-right: 1px solid; }

.hud-topline,
.hud-side {
  position: absolute;
  font: 600 11px/1 var(--space);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(119, 215, 208, .86);
  text-shadow: 0 0 12px rgba(119, 215, 208, .45);
}

.hud-topline { top: 31px; left: 125px; right: 125px; display: flex; justify-content: space-between; }
.hud-side { left: -85px; top: 50%; transform: rotate(-90deg); }

.progress-rail {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  pointer-events: auto;
}

.progress-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 1px solid rgba(119, 215, 208, .7);
  background: rgba(21, 18, 14, .18);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.progress-dot span {
  position: absolute;
  right: 20px;
  top: -3px;
  font: 600 10px/1 var(--space);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(119, 215, 208, .75);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateX(5px);
}

.progress-dot.active { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.progress-dot.active span, .progress-dot:hover span { opacity: 1; transform: translateX(0); }

.scanner {
  position: fixed;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(119, 215, 208, .6);
  border-radius: 50%;
  left: 58%;
  top: 28%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(119, 215, 208, .16), transparent 60%);
  box-shadow: 0 0 35px rgba(119, 215, 208, .18), inset 0 0 24px rgba(119, 215, 208, .18);
  transition: left 1s ease, top 1s ease;
}

.scanner::after {
  content: "";
  position: absolute;
  inset: 50% -20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: scanLine 2.8s ease-in-out infinite;
}

.lesson-board { position: relative; z-index: 3; }

.chapter {
  min-height: 100vh;
  padding: 108px clamp(34px, 8vw, 128px) 84px;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.chapter::before {
  content: attr(data-step) " // " attr(data-label);
  position: absolute;
  top: 96px;
  left: clamp(32px, 7vw, 104px);
  font: 600 12px/1 var(--space);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(111, 75, 42, .7);
}

.hero { grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 28px; }

.micro-label,
.target,
.coordinate-strip,
.slide-label,
.field-caption {
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.micro-label { color: var(--umber); font-size: 12px; margin: 0 0 18px; }

h1, h2 { font-family: var(--space); margin: 0; letter-spacing: -.055em; line-height: .9; }
h1 { font-size: clamp(72px, 12vw, 176px); color: var(--walnut); text-shadow: 3px 4px 0 rgba(181, 138, 88, .35); }
h2 { font-size: clamp(46px, 8vw, 112px); color: var(--walnut); }

.lead {
  max-width: 560px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.35;
  color: var(--umber);
}

.sapling-stage { position: relative; min-height: 620px; }
.sapling { width: min(85vw, 560px); height: auto; filter: drop-shadow(7px 12px 0 rgba(111,75,42,.08)); }
.draw-path { fill: none; stroke: var(--walnut); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.leaf-path { fill: rgba(111, 122, 69, .16); stroke: var(--olive); }
.is-visible .draw-path { animation: drawIn 2.2s ease forwards; }
.is-visible .draw-path:nth-child(2) { animation-delay: .18s; }
.is-visible .draw-path:nth-child(3) { animation-delay: .32s; }
.is-visible .leaf-path { animation-delay: .7s; }

.target {
  position: absolute;
  color: var(--cyan);
  border: 1px solid rgba(119, 215, 208, .58);
  background: rgba(21, 18, 14, .18);
  padding: 9px 11px;
  font-size: 11px;
  box-shadow: 0 0 20px rgba(119, 215, 208, .12);
}
.target::before { content: ""; position: absolute; width: 44px; height: 1px; background: var(--cyan); opacity: .7; }
.target-texture { left: 3%; top: 44%; } .target-texture::before { left: 100%; top: 50%; }
.target-line { right: 18%; top: 22%; } .target-line::before { right: 100%; top: 50%; }
.target-rhythm { left: 12%; bottom: 20%; } .target-rhythm::before { left: 100%; top: 50%; }
.target-growth { right: 8%; bottom: 28%; } .target-growth::before { right: 100%; top: 50%; }

.mentor-note {
  font-family: var(--hand);
  color: var(--umber);
  font-size: clamp(22px, 3vw, 34px);
  transform: rotate(-4deg);
  position: absolute;
  left: 12%;
  bottom: 58px;
}

.collage { position: absolute; box-shadow: 0 18px 40px rgba(59, 40, 24, .16); }
.tape { width: 170px; height: 34px; background: rgba(216, 154, 58, .34); transform: rotate(-8deg); }
.tape-a { top: 22%; left: 41%; }
.graph { width: 260px; height: 180px; background-color: rgba(246, 235, 208, .42); background-image: linear-gradient(rgba(111,75,42,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(111,75,42,.15) 1px, transparent 1px); background-size: 18px 18px; }
.graph-a { right: 9%; bottom: 14%; transform: rotate(5deg); }

.lesson { align-items: center; gap: 30px; }
.unlock-tab {
  position: absolute;
  top: 160px;
  left: clamp(34px, 11vw, 150px);
  z-index: 5;
  font: 600 12px/1 var(--space);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--walnut);
  background: var(--parchment);
  border: 1px solid rgba(111, 75, 42, .45);
  padding: 14px 18px;
  box-shadow: 9px 9px 0 rgba(181, 138, 88, .24);
  cursor: pointer;
}
.unlock-tab.amber { background: rgba(216, 154, 58, .32); }

.paper-panel {
  width: min(680px, 82vw);
  padding: clamp(32px, 6vw, 68px);
  background: var(--parchment);
  border: 1px solid rgba(111, 75, 42, .38);
  box-shadow: 18px 22px 0 rgba(181, 138, 88, .18), 0 26px 80px rgba(59, 40, 24, .18);
  clip-path: polygon(1% 3%, 97% 0, 100% 96%, 4% 100%, 0 48%);
}
.paper-panel p { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; color: var(--umber); }
.tilted-left { transform: rotate(-2deg); margin-left: 9vw; }
.vellum { margin-left: auto; background: rgba(246, 235, 208, .72); backdrop-filter: blur(2px); transform: rotate(2deg); }

.root-scene { background: radial-gradient(circle at 76% 40%, rgba(119, 215, 208, .12), transparent 24rem); }
.root-diagram { height: 190px; position: relative; margin-top: 24px; }
.root-diagram span { position: absolute; top: 0; left: 48%; width: 2px; height: 160px; background: var(--umber); transform-origin: top; border-radius: 8px; }
.root-diagram span:nth-child(1) { transform: rotate(30deg); }
.root-diagram span:nth-child(2) { transform: rotate(14deg); height: 185px; }
.root-diagram span:nth-child(3) { transform: rotate(-6deg); height: 170px; }
.root-diagram span:nth-child(4) { transform: rotate(-25deg); }
.root-diagram span:nth-child(5) { transform: rotate(-42deg); height: 135px; }
.sample { position: absolute; right: 11vw; bottom: 14vh; width: 340px; min-height: 180px; padding: 22px; color: rgba(246,235,208,.85); background: repeating-linear-gradient(115deg, var(--umber) 0 7px, var(--walnut) 7px 14px); font: 22px/1.4 var(--hand); transform: rotate(5deg); }
.field-caption { position: absolute; right: 8vw; top: 26vh; max-width: 320px; font-size: 12px; color: var(--umber); }

.trunk-scene { background: linear-gradient(180deg, transparent, rgba(21,18,14,.08)); grid-template-columns: 1fr 1fr; }
.ring-meter { width: min(460px, 82vw); aspect-ratio: 1; position: relative; display: grid; place-items: center; margin-left: 5vw; }
.ring-meter .ring { position: absolute; border: 2px solid var(--umber); border-radius: 50%; opacity: .85; transform: scale(.2); }
.ring-meter .r1 { inset: 39%; } .ring-meter .r2 { inset: 29%; } .ring-meter .r3 { inset: 17%; } .ring-meter .r4 { inset: 5%; }
.ring-meter strong { font: 600 25px/1.05 var(--space); color: var(--walnut); max-width: 190px; text-align: center; }
.is-visible .ring { animation: ringGrow 1.2s ease forwards; }
.is-visible .r2 { animation-delay: .18s; } .is-visible .r3 { animation-delay: .36s; } .is-visible .r4 { animation-delay: .54s; }
.coordinate-strip { position: absolute; left: 9vw; bottom: 10vh; color: var(--cyan); background: rgba(21,18,14,.42); padding: 12px 18px; font-size: 11px; }

.branch-scene { padding-top: 130px; }
.branch-board { position: relative; width: min(900px, 84vw); margin: 0 auto; padding: 70px 40px; background: rgba(246, 235, 208, .46); border: 1px solid rgba(111, 75, 42, .3); transform: rotate(-1.5deg); }
.branch-map { width: 100%; overflow: visible; }
.branch-map .draw-path { stroke-width: 6; }
.slide-label { position: absolute; padding: 10px 13px; border: 1px solid rgba(119,215,208,.56); color: var(--cyan); background: rgba(21,18,14,.28); font-size: 11px; }
.l1 { left: 11%; top: 23%; } .l2 { left: 43%; top: 12%; } .l3 { right: 7%; bottom: 21%; }
.swatch-stack { position: absolute; right: 12vw; bottom: 10vh; display: flex; gap: 12px; transform: rotate(7deg); }
.swatch { width: 86px; height: 122px; box-shadow: 0 14px 28px rgba(59,40,24,.18); border: 8px solid rgba(246,235,208,.45); }
.swatch.olive { background: var(--olive); } .swatch.umber { background: var(--umber); } .swatch.cyan { background: rgba(119,215,208,.75); }

.leaf-scene { background: radial-gradient(circle at 50% 50%, rgba(111,122,69,.16), transparent 33rem); }
.leaf-collage { width: min(860px, 88vw); min-height: 560px; margin: 0 auto; position: relative; }
.leaf-silhouette { position: absolute; inset: 8% 24%; background: var(--olive); opacity: .78; clip-path: path("M260 0 C430 64 474 224 352 366 C238 496 74 420 20 286 C-37 144 82 25 260 0Z"); box-shadow: inset 0 0 0 2px rgba(59,40,24,.45); }
.leaf-silhouette::before { content: ""; position: absolute; inset: 12% 48%; background: var(--parchment); transform: rotate(18deg); opacity: .7; }
.leaf-silhouette::after { content: ""; position: absolute; inset: 18% 14%; background-image: linear-gradient(55deg, transparent 48%, rgba(246,235,208,.55) 49% 51%, transparent 52%), linear-gradient(125deg, transparent 48%, rgba(246,235,208,.4) 49% 51%, transparent 52%); background-size: 64px 64px; }
.reticle { position: absolute; width: 280px; height: 280px; left: 46%; top: 22%; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 30px rgba(119,215,208,.25); }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--cyan); opacity: .75; }
.reticle::before { height: 1px; left: -40px; right: -40px; top: 50%; }
.reticle::after { width: 1px; top: -40px; bottom: -40px; left: 50%; }
.small-note { position: absolute; left: 2%; bottom: 3%; width: min(420px, 70vw); padding: 32px; transform: rotate(-4deg); }
.small-note h2 { font-size: 58px; }
.leaf-note { right: 12%; left: auto; bottom: 12vh; }

.canopy-scene { background: radial-gradient(circle at 48% 44%, rgba(21,18,14,.72), rgba(21,18,14,.2) 30rem, transparent 48rem); color: var(--parchment); grid-template-columns: 1.1fr .9fr; }
.canopy-map { min-height: 620px; position: relative; }
.canopy-map::before { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(119,215,208,.35); border-radius: 48% 52% 46% 54%; background: repeating-radial-gradient(circle, transparent 0 26px, rgba(246,235,208,.18) 27px 29px); }
.canopy-stamp { position: absolute; left: 31%; top: 39%; font: 700 clamp(48px, 8vw, 100px)/.9 var(--space); letter-spacing: -.06em; color: var(--parchment); text-shadow: 0 0 24px rgba(119,215,208,.25); transform: rotate(-5deg); }
.canopy-lesson { position: absolute; color: var(--cyan); border: 1px solid rgba(119,215,208,.44); background: rgba(21,18,14,.44); padding: 12px 14px; font: 600 12px/1 var(--space); letter-spacing: .14em; text-transform: uppercase; }
.seed-tag { left: 17%; top: 18%; } .root-tag { left: 10%; bottom: 22%; } .trunk-tag { left: 42%; bottom: 10%; } .branch-tag { right: 15%; top: 25%; } .leaf-tag { right: 9%; bottom: 31%; }
.final-copy h2 { color: var(--parchment); font-size: clamp(48px, 7vw, 94px); }
.final-copy p { color: rgba(246,235,208,.82); font-size: 22px; line-height: 1.45; max-width: 480px; }

.reveal .hero-copy,
.reveal .sapling-stage,
.lesson .paper-panel,
.lesson .branch-board,
.lesson .leaf-collage,
.lesson .canopy-map,
.lesson .final-copy,
.lesson .sample,
.lesson .swatch-stack {
  opacity: 0;
  transform: translateY(36px) rotate(var(--angle, 0deg));
  clip-path: inset(0 0 100% 0);
  transition: opacity .8s ease, transform .9s ease, clip-path 1.1s cubic-bezier(.2,.8,.2,1);
}
.is-visible .hero-copy,
.is-visible .sapling-stage,
.is-visible.lesson .paper-panel,
.is-visible.lesson .branch-board,
.is-visible.lesson .leaf-collage,
.is-visible.lesson .canopy-map,
.is-visible.lesson .final-copy,
.is-visible.lesson .sample,
.is-visible.lesson .swatch-stack {
  opacity: 1;
  transform: translateY(0) rotate(var(--angle, 0deg));
  clip-path: inset(0 0 0 0);
}
.tilted-left { --angle: -2deg; }
.vellum { --angle: 2deg; }
.branch-board { --angle: -1.5deg; }

@keyframes bootFade { 0%, 18% { opacity: 1; } 68% { opacity: .42; } 100% { opacity: 0; visibility: hidden; } }
@keyframes scanLine { 0%, 100% { transform: translateY(-58px) rotate(0deg); opacity: .25; } 50% { transform: translateY(58px) rotate(12deg); opacity: .9; } }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes ringGrow { to { transform: scale(1); } }

@media (max-width: 860px) {
  .hero, .trunk-scene, .canopy-scene { grid-template-columns: 1fr; }
  .hud-side { display: none; }
  .progress-rail { right: 22px; gap: 13px; }
  .chapter { padding-inline: 28px; }
  .sapling-stage { min-height: 500px; }
  .sample, .field-caption, .swatch-stack { position: relative; right: auto; bottom: auto; top: auto; margin: 24px auto; }
  .leaf-silhouette { inset: 12% 8%; }
  .canopy-stamp { left: 18%; }
}