:root {
  --understory: #07100c;
  --wet-bark: #102219;
  --moss: #536b54;
  --leaf: #93a486;
  --lichen: #e3e9dd;
  --pulse: #e2be67;
  --muted: rgba(227, 233, 221, 0.66);
  --line: rgba(147, 164, 134, 0.2);
  --line-strong: rgba(147, 164, 134, 0.42);
  --clearing-about: #0a1912;
  --clearing-agent: #0e2017;
  --clearing-node: #0b1c14;
  --clearing-how: #0d1f16;
  --display: Optima, Candara, "Noto Sans", "Avenir Next", sans-serif;
  --serif: Optima, Candara, "Noto Sans", "Avenir Next", sans-serif;
  --sans: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --page: min(74rem, calc(100vw - 3rem));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: var(--lichen);
  background: var(--understory);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(circle at 78% 18%, rgba(83, 107, 84, 0.1), transparent 29rem),
    var(--understory);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  color: var(--understory);
  background: var(--pulse);
}

:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: var(--understory);
  background: var(--lichen);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* site-nav:start
   The primary nav, complete in this block: scripts/build-stake-site.mjs copies it into the research
   article, which does not load this stylesheet. Every rule that draws the nav belongs between the
   two markers, so that no page can draw it differently. */
.site-nav {
  position: relative;
  z-index: 12;
  display: flex;
  width: var(--page);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
}

.wordmark {
  display: inline-flex;
  flex-shrink: 0;
  min-height: 2.75rem;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tree-mark {
  position: relative;
  display: inline-flex;
  width: 1.65rem;
  height: 1.3rem;
  align-items: flex-end;
}

.tree-mark i {
  position: absolute;
  bottom: 0.37rem;
  width: 0.68rem;
  height: 0.68rem;
  background: var(--leaf);
  border-radius: 50% 42% 48% 44%;
}

.tree-mark i::after {
  position: absolute;
  top: 0.54rem;
  left: 50%;
  width: 1px;
  height: 0.5rem;
  content: "";
  background: var(--pulse);
}

.tree-mark i:nth-child(1) { left: 0; transform: scale(0.78); }
.tree-mark i:nth-child(2) { bottom: 0.5rem; left: 0.48rem; }
.tree-mark i:nth-child(3) { right: 0; transform: scale(0.68); }

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.nav-links a {
  display: inline-flex;
  flex: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav-links a:hover {
  color: var(--pulse);
}

/* A phone gets one row: the wordmark stays put and the six links scroll sideways under a fading
   edge. The scroller's padding is the room a focus ring needs; its trailing spacer lets the last
   link clear the fade. */
@media (max-width: 600px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    padding-top: 1.15rem;
  }

  .wordmark {
    gap: 0.4rem;
    font-size: 0.72rem;
  }

  .tree-mark {
    width: 1.4rem;
    transform: scale(0.84);
    transform-origin: left center;
  }

  /* All links fit on screen: the row wraps instead of scrolling, so Source is never off the edge. */
  .nav-links {
    min-width: 0;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    justify-content: flex-start;
    font-size: 0.72rem;
  }
}
/* site-nav:end */

/* The landing page lays the same nav over its hero art. */
.home-hero .site-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-bottom-color: rgba(227, 233, 221, 0.12);
}

.site-footer a,
.role-link {
  transition: color 160ms ease;
}

.site-footer a:hover,
.role-link:hover {
  color: var(--pulse);
}

.home-hero {
  position: relative;
  min-height: clamp(43rem, 92svh, 56rem);
  overflow: hidden;
  isolation: isolate;
  background: #101d16;
}

.home-hero::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 16, 12, 0.93) 0%, rgba(7, 16, 12, 0.7) 29%, rgba(7, 16, 12, 0.18) 52%, transparent 72%),
    linear-gradient(0deg, var(--understory) 0%, transparent 28%),
    radial-gradient(circle at 73% 48%, transparent 0 28%, rgba(7, 16, 12, 0.1) 72%);
}

.grove-stage {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 47%, rgba(83, 107, 84, 0.26), transparent 32%),
    linear-gradient(135deg, #17271c, #07100c 78%);
}

.grove-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.grove-stage.is-live canvas { opacity: 1; }

.forest-fallback {
  position: absolute;
  inset: 5% -3% 0 36%;
  opacity: 0;
  transition: opacity 500ms ease;
}

.forest-fallback::before {
  position: absolute;
  inset: 12% 2% 3% 6%;
  content: "";
  background: radial-gradient(ellipse at center, rgba(3, 9, 6, 0.68), rgba(7, 16, 12, 0.42) 44%, rgba(7, 16, 12, 0.14) 72%, transparent 100%);
  transform: rotate(-8deg);
}

.forest-fallback::after {
  position: absolute;
  right: 8%;
  bottom: 26%;
  left: -18%;
  height: 4px;
  content: "";
  background: repeating-linear-gradient(90deg, var(--pulse) 0 9px, transparent 9px 17px);
  filter: drop-shadow(0 0 8px rgba(226, 190, 103, 0.42));
  opacity: 0.72;
  transform: rotate(-17deg);
  transform-origin: right;
}

.grove-stage.use-fallback .forest-fallback { opacity: 0.84; }

.forest-fallback i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  aspect-ratio: 1.14;
  background:
    radial-gradient(circle at 34% 25%, rgba(147, 164, 134, 0.86), transparent 22%),
    radial-gradient(circle at 54% 55%, #436247 0 42%, #263f30 73%);
  border-radius: 52% 40% 55% 42%;
  filter: drop-shadow(1.2rem 1.6rem 1rem rgba(0, 0, 0, 0.42));
  transform: rotate(var(--r));
}

.forest-fallback i::after {
  position: absolute;
  right: -18%;
  bottom: -8%;
  width: 62%;
  aspect-ratio: 1;
  content: "";
  background: #36523c;
  border-radius: 48% 55% 42% 56%;
}

.forest-fallback i:nth-child(1) { --x: 4%; --y: 11%; --s: 16%; --r: -8deg; }
.forest-fallback i:nth-child(2) { --x: 20%; --y: 3%; --s: 19%; --r: 12deg; }
.forest-fallback i:nth-child(3) { --x: 42%; --y: 9%; --s: 15%; --r: -4deg; }
.forest-fallback i:nth-child(4) { --x: 62%; --y: 2%; --s: 21%; --r: 8deg; }
.forest-fallback i:nth-child(5) { --x: 82%; --y: 17%; --s: 16%; --r: -14deg; }
.forest-fallback i:nth-child(6) { --x: 3%; --y: 35%; --s: 19%; --r: 7deg; }
.forest-fallback i:nth-child(7) { --x: 29%; --y: 29%; --s: 17%; --r: -9deg; }
.forest-fallback i:nth-child(8) { --x: 51%; --y: 34%; --s: 22%; --r: 4deg; }
.forest-fallback i:nth-child(9) { --x: 76%; --y: 41%; --s: 17%; --r: 14deg; }
.forest-fallback i:nth-child(10) { --x: 12%; --y: 61%; --s: 17%; --r: -6deg; }
.forest-fallback i:nth-child(11) { --x: 34%; --y: 59%; --s: 21%; --r: 10deg; }
.forest-fallback i:nth-child(12) { --x: 61%; --y: 66%; --s: 18%; --r: -13deg; }
.forest-fallback i:nth-child(13) { --x: 82%; --y: 69%; --s: 15%; --r: 5deg; }
.forest-fallback i:nth-child(14) { --x: 48%; --y: 80%; --s: 15%; --r: -4deg; }

.home-copy {
  position: absolute;
  z-index: 5;
  top: 49%;
  left: max(1.5rem, calc((100vw - 74rem) / 2));
  width: min(37rem, 46vw);
  transform: translateY(-38%);
}

.preview-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--lichen);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 2.5rem;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease;
}

@media (max-width: 600px) {
  .preview-flag {
    flex-wrap: wrap;
    white-space: normal;
    border-radius: 14px;
  }
}

.preview-flag-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pulse);
  box-shadow: 0 0 10px 1px rgba(226, 190, 103, 0.55);
}

.preview-flag-more { color: var(--muted); }

.preview-flag:hover,
.preview-flag:focus-visible {
  color: var(--pulse);
  border-color: var(--pulse);
}

.preview-flag:hover .preview-flag-more,
.preview-flag:focus-visible .preview-flag-more { color: var(--pulse); }

.home-copy h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.2rem, 6.5vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.home-copy h1 span { display: block; }

.home-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
  margin-top: 2.6rem;
}

.home-hero .hero-actions a {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.05rem 0.55rem;
  color: var(--lichen);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.86rem;
  font-weight: 620;
  min-height: 2.75rem;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.home-hero .hero-actions a:nth-child(n + 2) { color: var(--muted); }

.home-hero .hero-actions a:hover {
  color: var(--pulse);
  border-color: var(--pulse);
  transform: translateY(-2px);
}

.home-main {
  width: 100%;
  --section-gutter: max(1.5rem, calc((100% - 74rem) / 2));
}

.about-panel {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--section-gutter);
  background: var(--clearing-about);
  border-top: 1px solid var(--line);
}

.about-panel h2 {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-panel p {
  max-width: 22ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.about-panel a {
  color: var(--lichen);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.16em;
  white-space: nowrap;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.about-panel .about-more {
  max-width: 40rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1.6;
}

.about-panel a:hover {
  color: var(--pulse);
  text-decoration-color: var(--pulse);
}

.role-trails { margin-top: 0; }

.role {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--section-gutter);
  border-top: 1px solid var(--line);
  scroll-margin-top: 2rem;
}

.role:first-child { background: var(--clearing-agent); }
.role:last-child { background: var(--clearing-node); }
.role:last-child { border-bottom: 1px solid var(--line); }

.role-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.role h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.3vw, 3.15rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.role-link {
  display: inline-flex;
  min-height: 2.75rem;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.role-tools {
  display: grid;
  min-width: 0;
  gap: 1.2rem;
  align-content: start;
}

.tool-label {
  margin: 0 0 -0.75rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.command {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  color: var(--leaf);
  background: rgba(16, 34, 25, 0.72);
  border-left: 2px solid rgba(226, 190, 103, 0.72);
  font-family: var(--mono);
}

.command code {
  min-width: 0;
  padding: 1rem 1.1rem;
  font-size: 0.78rem;
  line-height: 1.7;
  /* Long multi-part guide commands wrap at their spaces and `&&`; break-word (not anywhere)
     splits a token only when it cannot fit, so a hyphenated name is not broken by choice. */
  overflow-wrap: break-word;
  white-space: normal;
}

/* The one-line release install never wraps (a flag like --proto-redir must not break at its
   hyphen); it scrolls instead. A right-edge shadow, shown only while there is more to the right
   (a local cover riding over a pinned shadow), cues that it continues past the copy button. */
.agent-install code {
  overflow-x: auto;
  white-space: nowrap;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background:
    linear-gradient(90deg, transparent calc(100% - 1.6rem), rgba(16, 34, 25, 0.72)) right center / 1.6rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(226, 190, 103, 0.45), transparent) right center / 0.55rem 100% no-repeat;
  background-attachment: local, scroll;
}

.agent-install code::-webkit-scrollbar {
  display: none;
}

.copy-command {
  min-width: 7.6rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  color: var(--lichen);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  transition: color 160ms ease, background 160ms ease;
}

.copy-command:hover {
  color: var(--pulse);
  background: rgba(226, 190, 103, 0.05);
}

.handoff {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  justify-content: center;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  background: rgba(226, 190, 103, 0.045);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.handoff-copy {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.handoff strong {
  color: var(--lichen);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 620;
}

.handoff span {
  color: var(--muted);
  font-size: 0.82rem;
}

.handoff .task-copy {
  flex: 0 0 auto;
  color: var(--understory);
  background: var(--pulse);
  border: 1px solid var(--pulse);
  font-family: var(--sans);
  font-weight: 680;
}

.handoff .task-copy:hover {
  color: var(--lichen);
  background: transparent;
}

.copy-fallback {
  display: block;
  width: 100%;
  padding: 1rem;
  color: var(--muted);
  background: rgba(16, 34, 25, 0.54);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.copy-fallback[hidden] { display: none; }

.how-panel {
  margin: 0;
  padding: clamp(4.5rem, 8vw, 7rem) var(--section-gutter) clamp(3.5rem, 6vw, 5rem);
  background: var(--clearing-how);
}

.how-panel > h2 {
  margin: 0 0 clamp(2.5rem, 4.5vw, 4rem);
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.how-lede {
  max-width: 52rem;
  margin: calc(-1 * clamp(1.25rem, 2.5vw, 2.25rem)) 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

/* dappled canopy light drifts behind the section; the flat bg is the fallback */
.how-panel {
  position: relative;
  overflow: hidden;
}

.how-panel .shade-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.how-panel > :not(.shade-canvas) {
  position: relative;
}

.how-figure {
  max-width: 68rem;
  margin: clamp(2.25rem, 4.5vw, 3.75rem) 0 0;
}

.how-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.how-lede a {
  color: var(--lichen);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.how-lede a:hover {
  color: var(--pulse);
  text-decoration-color: var(--pulse);
}

.solid-action,
.line-action {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.05rem;
  border: 1px solid var(--line-strong);
  font-size: 0.82rem;
  font-weight: 650;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.solid-action {
  color: var(--understory);
  background: var(--lichen);
  border-color: var(--lichen);
}

.solid-action:hover { color: var(--lichen); background: transparent; }
.line-action:hover { color: var(--pulse); border-color: var(--pulse); }

.guide-main {
  width: min(66rem, calc(100vw - 3rem));
  margin: clamp(3rem, 8vw, 7rem) auto;
}

.guide-intro {
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.guide-intro h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.guide-intro p {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.guide-intro .guide-status {
  max-width: 46rem;
  padding: 1rem 1.1rem;
  color: var(--muted);
  background: rgba(16, 34, 25, 0.6);
  border-left: 2px solid var(--pulse);
  font-size: 0.9rem;
}

.guide-status strong {
  color: var(--lichen);
  font-weight: 650;
}

.guide-steps { border-top: 1px solid var(--line); }

.guide-step {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: rgba(16, 34, 25, 0.67);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.guide-step h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.guide-step p,
.guide-step li {
  max-width: 48rem;
  color: var(--muted);
}

.guide-step a:not(.solid-action, .line-action) {
  color: var(--lichen);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.guide-step ul { padding-left: 1.2rem; }
.guide-step .command { margin: 1.4rem 0; }
.guide-note { border-left: 2px solid var(--pulse); }

.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.site-footer {
  display: flex;
  width: var(--page);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.6rem 0 2.5rem;
  color: rgba(227, 233, 221, 0.5);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}

.footer-signature {
  display: grid;
  gap: 0.45rem;
}

.footer-signature span {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.site-footer a {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  :root { --page: min(100% - 2rem, 46rem); }

  .home-main { --section-gutter: 1rem; }

  .home-hero { min-height: 44rem; }

  .home-hero::after {
    background:
      linear-gradient(180deg, rgba(7, 16, 12, 0.9) 0%, rgba(7, 16, 12, 0.6) 36%, rgba(7, 16, 12, 0.05) 58%, rgba(7, 16, 12, 0.9) 100%),
      linear-gradient(0deg, var(--understory), transparent 28%);
  }

  .forest-fallback { inset: 52% -8% -6% 7%; }

  .home-copy {
    top: 8.7rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    transform: none;
  }

  .home-copy h1 { font-size: clamp(3.8rem, 11vw, 5.2rem); }
  .home-hero .hero-actions { margin-top: 1.8rem; }

  .role { grid-template-columns: 1fr; }

  .about-panel { grid-template-columns: 1fr; }

  .role { gap: 2rem; }

  .role-intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .role-link {
    flex: 0 0 auto;
    margin: 0 0 0.35rem 1rem;
  }

}

@media (max-width: 600px) {
  .home-hero { min-height: 43rem; }
  .grove-stage canvas,
  .forest-fallback { transform: translateY(1.25rem); }
  .home-copy { top: 7.5rem; }

  .home-copy h1 {
    font-size: clamp(3.2rem, 14vw, 4.1rem);
    letter-spacing: -0.06em;
  }

  .home-hero .hero-actions {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    margin-top: 1.45rem;
  }

  .home-hero .hero-actions a { padding-block: 0.65rem; }

  .about-panel {
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-block: 2.5rem;
  }

  .role {
    gap: 1.5rem;
    padding-block: 2.5rem;
  }

  .role-intro {
    flex-direction: column;
    align-items: flex-start;
  }

  .role-link { margin: 0.8rem 0 0; }
  .command { grid-template-columns: 1fr; }

  .command code {
    padding: 0.9rem;
    font-size: 0.74rem;
  }

  .copy-command {
    min-height: 2.9rem;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .handoff {
    align-items: stretch;
    flex-direction: column;
  }

  .handoff .task-copy { width: 100%; }

  .how-panel {
    padding-block: 5rem 3.5rem;
  }

  .how-panel > h2 {
    margin-bottom: 2.75rem;
  }

  .how-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .how-figure img { min-width: 640px; }

  .guide-main {
    width: min(100% - 1rem, 46rem);
    margin: 2.5rem auto;
  }

  .guide-step { padding: 1.7rem 1rem; }

  .site-footer {
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer nav {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}