:root {
  /* Typography note: IBM Plex Mono** / Mono* used sparingly for node IDs. */
  --ink-plum: #2F2A35;
  --pale-wash: #DDE4C8;
  --rice-paper: #F6F0DF;
  --bamboo-mist: #B9C7A2;
  --matcha-circuit: #7F9365;
  --sage-shadow: #4E5F48;
  --oat-milk: #E7DCC4;
  --soft-copper: #C58F5B;
  --paper-shadow: 0 28px 90px rgba(78, 95, 72, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sage-shadow);
  font-family: "Nunito Sans", sans-serif;
  background: var(--rice-paper);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(78, 95, 72, 0.13) 0.8px, transparent 0.8px), radial-gradient(rgba(197, 143, 91, 0.08) 0.7px, transparent 0.7px);
  background-size: 24px 24px, 11px 11px;
  opacity: 0.45;
  z-index: 0;
}

.notebook { position: relative; z-index: 1; }

.page {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
}

.page::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(127, 147, 101, 0.24);
  border-radius: 36px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246, 240, 223, 0.62);
  z-index: -1;
}

h1, h2 {
  margin: 0;
  color: var(--ink-plum);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

h1 { font-size: clamp(4.2rem, 12vw, 12.5rem); max-width: 920px; }
h2 { font-size: clamp(3.1rem, 7vw, 7.8rem); max-width: 780px; }
p { font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.75; max-width: 520px; }

.mono-label, small, .stamp, .module-tag, .footer-stamp, .error-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.mono-label, .stamp { color: var(--matcha-circuit); }
.stamp {
  grid-column: 1 / 4;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(127, 147, 101, 0.32);
  border-radius: 999px;
  background: rgba(246, 240, 223, 0.72);
  transform: rotate(-2deg);
}

.paper-fold {
  position: absolute;
  right: 38px;
  top: 38px;
  width: 120px;
  height: 120px;
  border-radius: 0 30px 0 36px;
  background: linear-gradient(135deg, rgba(231, 220, 196, 0), var(--oat-milk));
  box-shadow: -12px 14px 30px rgba(78, 95, 72, 0.08);
}

.trace { position: absolute; pointer-events: none; overflow: visible; z-index: -1; }
.trace path, .module-circuit path {
  fill: none;
  stroke: var(--matcha-circuit);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--length, 1400);
  stroke-dashoffset: var(--length, 1400);
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.18, 1);
}
.trace .secondary { stroke: var(--bamboo-mist); stroke-width: 2.5; }
.trace .tertiary { stroke: var(--soft-copper); stroke-width: 2; }
.is-drawn path, .is-drawn .draw-path { stroke-dashoffset: 0; }
.solder { fill: var(--matcha-circuit); stroke: var(--rice-paper); stroke-width: 4; }
.solder.copper { fill: var(--soft-copper); }
.blink { animation: node-blink 2.2s ease-in-out infinite; }

.trace-hero { left: 0; top: 24%; width: 100%; height: 48vh; }
.hero-copy { grid-column: 2 / 11; align-self: center; margin-top: 7vh; }
.hero-copy p { margin-top: 30px; color: var(--sage-shadow); }

.matcha-node {
  position: absolute;
  right: 18vw;
  bottom: 18vh;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bamboo-mist);
  border: 1px solid var(--matcha-circuit);
  box-shadow: 0 0 0 12px rgba(185, 199, 162, 0.22);
  display: grid;
  place-items: center;
}
.matcha-node span { width: 13px; height: 13px; background: var(--matcha-circuit); border-radius: 50%; animation: node-blink 1.8s infinite; }

.page-spread { background: linear-gradient(135deg, #F6F0DF, #E7DCC4 60%, #DDE4C8); }
.spread-text { grid-column: 2 / 6; align-self: center; }
.icon-board {
  grid-column: 7 / 12;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 18px;
}
.pictogram, .node-card, .bashful-module, .sleep-card {
  border: 1px solid rgba(127, 147, 101, 0.34);
  background: rgba(246, 240, 223, 0.74);
  border-radius: 28px;
  box-shadow: var(--paper-shadow);
}
.pictogram {
  min-height: 142px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 260ms ease, background 260ms ease;
}
.pictogram:hover { transform: translateY(-5px) rotate(calc(var(--tilt, 0deg) + 2deg)); background: #F6F0DF; }
.pictogram:nth-child(1) { --tilt: -2deg; }
.pictogram:nth-child(2) { --tilt: 1.5deg; }
.pictogram:nth-child(3) { --tilt: 2deg; }
.pictogram:nth-child(4) { --tilt: -1deg; }
.icon { font-size: 2.5rem; color: var(--matcha-circuit); }
.pictogram b, .node-card b { color: var(--ink-plum); font-weight: 600; }
.pictogram small, .node-card small { color: var(--matcha-circuit); }
.trace-spread { left: 3%; bottom: 4%; width: 94%; height: 76%; }

.page-garden { background: var(--rice-paper); }
.garden-heading { grid-column: 2 / 8; align-self: start; margin-top: 5vh; }
.garden-map { position: relative; grid-column: 1 / 13; min-height: 64vh; }
.trace-garden { inset: 0; width: 100%; height: 100%; }
.node-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: min(220px, 40vw);
  min-height: 130px;
  padding: 18px;
  border-radius: 30px;
  display: grid;
  gap: 5px;
  color: var(--sage-shadow);
  text-align: left;
  font-family: "Nunito Sans", sans-serif;
  cursor: pointer;
  transition: transform 260ms ease, border-color 260ms ease;
}
.node-card span { font-size: 2.1rem; color: var(--soft-copper); }
.node-card:hover, .node-card.is-awake { transform: translateY(-8px) rotate(-1.5deg); border-color: var(--soft-copper); }

.page-shake { background: var(--oat-milk); }
.shake-copy { grid-column: 2 / 6; align-self: center; }
.bashful-module {
  position: relative;
  grid-column: 7 / 12;
  align-self: center;
  min-height: 440px;
  padding: 32px;
  background: rgba(246, 240, 223, 0.8);
  cursor: pointer;
  transition: transform 280ms ease;
}
.bashful-module:hover { transform: rotate(1deg); }
.bashful-module.is-shaking { animation: quiet-shake 520ms ease both; }
.module-tag { display: inline-block; padding: 8px 12px; border-radius: 999px; background: var(--bamboo-mist); color: var(--sage-shadow); transform: rotate(-3deg); }
.module-face { margin-top: 62px; font-family: "M PLUS Rounded 1c", sans-serif; font-size: clamp(4rem, 10vw, 8rem); color: var(--ink-plum); text-align: center; }
.module-circuit { position: absolute; inset: auto 24px 72px 24px; width: calc(100% - 48px); height: 150px; }
.error-label { position: absolute; left: 34px; bottom: 28px; color: var(--soft-copper); opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; }
.bashful-module.is-shaking .error-label, .bashful-module.is-reconnected .error-label { opacity: 1; transform: translateY(0); }
.bashful-module.is-reconnected .module-circuit path { stroke: var(--soft-copper); }

.page-sleep { background: var(--ink-plum); color: var(--oat-milk); }
.page-sleep::after { border-color: rgba(231, 220, 196, 0.18); }
.page-sleep h2 { color: var(--rice-paper); }
.sleep-card {
  grid-column: 3 / 9;
  align-self: center;
  padding: clamp(28px, 5vw, 58px);
  background: rgba(78, 95, 72, 0.2);
  border-color: rgba(185, 199, 162, 0.24);
}
.footer-stamp { margin-top: 34px; color: var(--bamboo-mist); }
.trace-sleep { left: 0; top: 14%; width: 100%; height: 70%; opacity: 0.78; }
.trace-sleep path { stroke: var(--oat-milk); stroke-width: 2; }

.wake-node { opacity: 0; transform: translateY(22px); transition: opacity 820ms ease, transform 820ms ease; }
.wake-node.is-visible { opacity: 1; transform: translateY(0); }

.signal-orb {
  position: fixed;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--soft-copper);
  box-shadow: 0 0 0 7px rgba(197, 143, 91, 0.18);
  transform: translate3d(12vw, 50vh, 0);
  pointer-events: none;
  z-index: 5;
}

@keyframes node-blink {
  0%, 100% { opacity: 0.35; transform: scale(0.84); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes quiet-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  18% { transform: translateX(-3px) rotate(-0.8deg); }
  36% { transform: translateX(4px) rotate(0.9deg); }
  54% { transform: translateX(-2px) rotate(-0.5deg); }
  72% { transform: translateX(3px) rotate(0.5deg); }
}

@media (max-width: 860px) {
  .page { min-height: auto; padding: 32px 20px; gap: 24px; }
  .page-hero { min-height: 100vh; }
  .hero-copy, .spread-text, .icon-board, .garden-heading, .garden-map, .shake-copy, .bashful-module, .sleep-card { grid-column: 1 / 13; }
  .icon-board { grid-template-columns: 1fr; }
  .garden-map { min-height: 760px; }
  .node-card { width: 180px; }
  .bashful-module { min-height: 380px; }
  .sleep-card { margin: 18vh 0; }
}