/* fernworks.dev — Understory & Paper.
 * The design language lives in site/DESIGN.md (served at /design.md); the
 * build fails when this file and that one disagree. Documents on paper:
 * opaque surfaces, one hairline, one tinted shadow, mono for anything that
 * lives in a file. Structural tokens are theme-independent; the two dark
 * blocks are asserted byte-equivalent by the build. */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;
  --bg: #e9efe7;
  --s1: #fdfefc;
  --s2: #f2f6f0;
  --ink-1: #131f18;
  --ink-2: #2a382f;
  --ink-3: #4c5c52;
  --ink-4: #5d6d64;
  --line: #c9d3c5;
  --line-2: #78877d;
  --accent: #0f7a43;
  --accent-deep: #0a3d24;
  --accent-press: #0b6236;
  --accent-tint: rgba(15, 122, 67, 0.09);
  --danger: #a3231c;
  --danger-tint: rgba(163, 35, 28, 0.09);
  --amber: #83540e;
  --amber-tint: rgba(176, 122, 32, 0.12);
  --claude: #a8492a;
  --codex: #1e56c9;
  --you: #6d3fc4;
  --fern-deep: #06301c;
  --fern-tip: #0f7a43;
  --fern-op: 0.85;
  --fern-op-dim: 0.16;
  --aurora-a: rgba(15, 122, 67, 0.12);
  --aurora-b: rgba(70, 211, 137, 0.16);
  --grain-op: 0.05;
  --glass-bg: rgba(253, 254, 252, 0.55);
  --glass-bd: rgba(28, 46, 36, 0.24);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-sheen: rgba(255, 255, 255, 0.55);
  --glass-depth: rgba(15, 122, 67, 0.06);
  --term-bg: rgba(16, 58, 38, 0.08);
  --stage-glow: rgba(15, 122, 67, 0.12);
  --stage-vignette: rgba(24, 42, 32, 0.1);
  --e1: 0 1px 2px rgba(22, 42, 30, 0.08);
  --e2: 0 2px 6px rgba(22, 42, 30, 0.07), 0 12px 32px -18px rgba(22, 42, 30, 0.28);
}

/* ---------- tokens: structure (theme-independent) ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --chrome-gap: var(--sp-7);
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;
  --fs-0: 12px;
  --fs-1: 13px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 21px;
  --fs-5: 28px;
  --fs-d: clamp(34px, 4.6vw, 52px);
  --font-sans: "Geist", "GeistFB", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --e-enter: cubic-bezier(0.2, 0.7, 0.3, 1);
  --e-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --e-move: cubic-bezier(0.645, 0.045, 0.355, 1);
  --e-far: cubic-bezier(0.19, 1, 0.22, 1);
  --e-pop: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --e-amb: ease-in-out;
  --t-0: 80ms;
  --t-1: 120ms;
  --t-2: 180ms;
  --t-3: 300ms;
  --t-4: 520ms;
  --rail: 880px;
  --rail-wide: 1240px;
  --gutter: 24px;
  --topbar-h: 64px;
  --z-raised: 1;
  --z-nav: 30;
  --z-grain: 40;
}

/* ---------- tokens: dark (system) — keep identical to the block below ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0f0c;
    --s1: #101711;
    --s2: #151d16;
    --ink-1: #f2f6f2;
    --ink-2: #ccd7ce;
    --ink-3: #a6b8ab;
    --ink-4: #a0b2a5;
    --line: rgba(255, 255, 255, 0.11);
    --line-2: rgba(255, 255, 255, 0.34);
    --accent: #46d389;
    --accent-deep: #0f7a43;
    --accent-press: #5fe39b;
    --accent-tint: rgba(70, 211, 137, 0.12);
    --danger: #f0857b;
    --danger-tint: rgba(240, 133, 123, 0.13);
    --amber: #e0a94f;
    --amber-tint: rgba(224, 169, 79, 0.14);
    --claude: #d97757;
    --codex: #6ea8ff;
    --you: #b79bff;
    --fern-deep: #0d3a23;
    --fern-tip: #46d389;
    --fern-op: 0.68;
    --fern-op-dim: 0.3;
    --aurora-a: rgba(24, 92, 56, 0.4);
    --aurora-b: rgba(70, 211, 137, 0.1);
    --grain-op: 0.08;
    --glass-bg: rgba(21, 30, 24, 0.55);
    --glass-bd: rgba(255, 255, 255, 0.2);
    --glass-edge: rgba(255, 255, 255, 0.09);
    --glass-hi: rgba(255, 255, 255, 0.28);
    --glass-sheen: rgba(255, 255, 255, 0.05);
    --glass-depth: rgba(4, 26, 16, 0.45);
    --term-bg: rgba(9, 26, 17, 0.62);
    --stage-glow: rgba(24, 92, 56, 0.45);
    --stage-vignette: rgba(0, 0, 0, 0.5);
    --e1: 0 1px 2px rgba(0, 0, 0, 0.55);
    --e2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 36px -18px rgba(0, 0, 0, 0.75);
  }
}

/* ---------- tokens: dark (pinned) — keep identical to the block above ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f0c;
  --s1: #101711;
  --s2: #151d16;
  --ink-1: #f2f6f2;
  --ink-2: #ccd7ce;
  --ink-3: #a6b8ab;
  --ink-4: #a0b2a5;
  --line: rgba(255, 255, 255, 0.11);
  --line-2: rgba(255, 255, 255, 0.34);
  --accent: #46d389;
  --accent-deep: #0f7a43;
  --accent-press: #5fe39b;
  --accent-tint: rgba(70, 211, 137, 0.12);
  --danger: #f0857b;
  --danger-tint: rgba(240, 133, 123, 0.13);
  --amber: #e0a94f;
  --amber-tint: rgba(224, 169, 79, 0.14);
  --claude: #d97757;
  --codex: #6ea8ff;
  --you: #b79bff;
  --fern-deep: #0d3a23;
  --fern-tip: #46d389;
  --fern-op: 0.68;
  --fern-op-dim: 0.3;
  --aurora-a: rgba(24, 92, 56, 0.4);
  --aurora-b: rgba(70, 211, 137, 0.1);
  --grain-op: 0.08;
  --glass-bg: rgba(21, 30, 24, 0.55);
  --glass-bd: rgba(255, 255, 255, 0.2);
  --glass-edge: rgba(255, 255, 255, 0.09);
  --glass-hi: rgba(255, 255, 255, 0.28);
  --glass-sheen: rgba(255, 255, 255, 0.05);
  --glass-depth: rgba(4, 26, 16, 0.45);
  --term-bg: rgba(9, 26, 17, 0.62);
  --stage-glow: rgba(24, 92, 56, 0.45);
  --stage-vignette: rgba(0, 0, 0, 0.5);
  --e1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --e2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 36px -18px rgba(0, 0, 0, 0.75);
}

/* ---------- fonts ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/geist-var.28258d06.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/geist-mono-var.5bc6413e.woff2") format("woff2");
  font-weight: 100 900;
  font-display: optional;
}
@font-face {
  font-family: "GeistFB";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  font-weight: 100 900;
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-6);
  scrollbar-color: var(--line-2) transparent;
  scrollbar-gutter: stable;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: 1.55;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: var(--grain-op);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,
h2,
h3 {
  color: var(--ink-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: var(--fs-d);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.2;
}
h3 {
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.3;
}
p {
  margin: 0;
  max-width: 68ch;
}
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition:
    color var(--t-1) var(--e-move),
    text-decoration-color var(--t-1) var(--e-move);
}
a:hover {
  color: var(--accent-press);
  text-decoration-color: currentColor;
}
::selection {
  background: var(--accent-tint);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
code,
pre,
.mono {
  font-family: var(--font-mono);
}
code {
  font-size: var(--fs-1);
  background: var(--accent-tint);
  color: var(--ink-1);
  border-radius: var(--r-1);
  padding: 0 var(--sp-1);
}
code.cmd {
  color: var(--accent-press);
  white-space: nowrap;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: var(--z-nav);
  inset-inline-start: -100vw;
  top: var(--sp-3);
  background: var(--s1);
  color: var(--ink-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-2);
  box-shadow: var(--e2);
}
.skip:focus {
  inset-inline-start: var(--sp-3);
}
dfn {
  font-style: normal;
}
dfn > a,
a.def {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
}
dfn > a:hover,
a.def:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* ---------- topbar: viewport chrome, identical on every page ----------
 * The chrome belongs to the viewport, not to any page's reading column:
 * chip pinned to the left gutter, tools to the right, on every page and
 * at every width, so nothing shifts between landing, product and docs. */
.topbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-top: var(--sp-4);
}
.topbar .in {
  width: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.topbar .tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.wordmark-min {
  display: none;
}
@media (max-width: 480px) {
  .topbar .in {
    padding: 0 var(--sp-3);
  }
  .topbar .chip {
    font-size: var(--fs-0);
    padding: 0 var(--sp-2);
  }
}
/* on the smallest screens the wordmark compresses to its handle so the
 * chip and both tool squares always share one uncrowded row */
@media (max-width: 430px) {
  .wordmark {
    display: none;
  }
  .wordmark-min {
    display: inline;
  }
}
@media (max-width: 640px) {
  h1 br.wide {
    display: none;
  }
}
/* at the smallest widths the separators fold; spacing carries the crumb */
@media (max-width: 380px) {
  .topbar .sep {
    display: none;
  }
  .topbar .chip {
    gap: var(--sp-2);
  }
}
.topbar .chip {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1;
  height: 48px;
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-3);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--e1);
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar .chip,
  .theme-btn,
  .fern-btn {
    background: var(--s1);
  }
}
.theme-btn,
.fern-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  color: var(--ink-3);
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-3);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--e1);
  transition:
    color var(--t-1) var(--e-move),
    transform var(--t-0) var(--e-exit);
}
.theme-btn:hover {
  color: var(--ink-1);
}
.theme-btn:active,
.fern-btn:active {
  transform: scale(0.94);
}
.theme-btn svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
/* the brand mark lives here: the ON seat wears accent in color, border
 * and wash; the cleared seat goes ashen, dimmer and slightly smaller,
 * so the state reads in four channels, never hue alone (panel ruling) */
.fern-btn {
  color: var(--accent);
  border-color: var(--accent);
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--glass-bg);
}
.fern-btn svg {
  width: auto;
  height: var(--sp-5);
  transition:
    opacity var(--t-2) var(--e-enter),
    transform var(--t-2) var(--e-enter);
}
.fern-btn:hover {
  color: var(--accent-press);
}
.noferns .fern-btn {
  color: var(--ink-4);
  border-color: var(--glass-bd);
  background: var(--glass-bg);
}
.noferns .fern-btn svg {
  opacity: 0.55;
  transform: scale(0.86);
}
.noferns .fern-btn:hover {
  color: var(--ink-3);
}
.topbar a,
.topbar .cur {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-1);
  text-decoration: none;
  color: var(--ink-3);
  transition: color var(--t-1) var(--e-move);
}
.topbar a:hover {
  color: var(--ink-1);
}
.topbar .cur {
  color: var(--ink-1);
  font-weight: 600;
}
.topbar .sep {
  color: var(--line-2);
  padding: 0 var(--sp-1);
  user-select: none;
}

/* ---------- home stage ---------- */
.stage {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--topbar-h) + var(--chrome-gap));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 62% at 50% 0%, var(--stage-glow), transparent 78%),
    radial-gradient(130% 105% at 50% 42%, transparent 48%, var(--stage-vignette) 100%);
}
#fern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--fern-op);
  pointer-events: none;
  transition: opacity var(--t-4) var(--e-far);
}
/* the same organism as atmosphere on reading pages: fixed behind the
 * text, dimmed and softened, biased to the margins by composition */
#fern.fernbg {
  position: fixed;
  z-index: 0;
  opacity: var(--fern-op-dim);
  filter: blur(4px) saturate(0.9);
}
.noferns #fern {
  opacity: 0;
}
.page,
.layout {
  position: relative;
  z-index: var(--z-raised);
}
/* when the bed is cleared the stage still breathes: two slow drifts of
 * green, waves without water */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-4) var(--e-far);
}
.stage::before {
  background: radial-gradient(46% 36% at 26% 72%, var(--aurora-a), transparent 72%);
}
.stage::after {
  background: radial-gradient(38% 30% at 74% 58%, var(--aurora-b), transparent 70%);
}
.noferns .stage::before,
.noferns .stage::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .noferns .stage::before {
    animation: aurora-a 34s var(--e-amb) infinite alternate;
  }
  .noferns .stage::after {
    animation: aurora-b 47s var(--e-amb) infinite alternate;
  }
}
@keyframes aurora-a {
  from {
    transform: translate(-4%, 2%) scale(1);
  }
  to {
    transform: translate(5%, -4%) scale(1.18);
  }
}
@keyframes aurora-b {
  from {
    transform: translate(3%, -2%) scale(1.12);
  }
  to {
    transform: translate(-5%, 4%) scale(0.94);
  }
}
.stage .panel {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-8);
  text-shadow: 0 1px 24px var(--stage-vignette);
}
.stage .dek {
  margin-top: var(--sp-4);
  font-size: var(--fs-3);
  color: var(--ink-2);
  max-width: 54ch;
}
/* The home tile carries the full glass anatomy: a gradient ring that
 * catches light at the top, a specular sheen falling from the upper
 * left, a deep tint pooling at the bottom, and a film of grain so the
 * surface has tooth instead of plastic. All of it is tokens. */
.tile {
  position: relative;
  display: block;
  margin-top: var(--sp-6);
  max-width: 560px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-3);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--e2),
    0 32px 64px -36px var(--stage-vignette);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--ink-2);
  transition:
    transform var(--t-2) var(--e-enter),
    border-color var(--t-2) var(--e-enter),
    box-shadow var(--t-2) var(--e-enter);
}
@supports not (backdrop-filter: blur(1px)) {
  .tile {
    background: var(--s1);
  }
}
/* the gradient ring replaces the flat border where masks compose */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .tile {
    border-color: transparent;
    box-shadow:
      var(--e2),
      0 32px 64px -36px var(--stage-vignette);
  }
  .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(
        180deg,
        var(--glass-hi),
        var(--glass-bd) 34%,
        transparent 72%,
        var(--glass-bd)
      )
      border-box;
    -webkit-mask:
      linear-gradient(white, white) padding-box,
      linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(white, white) padding-box,
      linear-gradient(white, white);
    mask-composite: exclude;
    pointer-events: none;
    transition: filter var(--t-2) var(--e-enter);
  }
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(130% 90% at 16% 0%, var(--glass-sheen), transparent 52%),
    linear-gradient(180deg, transparent 58%, var(--glass-depth)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.tile > b,
.tile > span,
.tile > small {
  position: relative;
  z-index: var(--z-raised);
}
.tile:active {
  transform: scale(0.98);
  transition-duration: var(--t-0);
  transition-timing-function: var(--e-exit);
}
.tile b {
  display: block;
  color: var(--ink-1);
  font-size: var(--fs-3);
  font-weight: 600;
}
.tile span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.tile small {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--glass-bd), transparent 76%) 1;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--accent);
}
.tile .tarrow {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  transition: transform var(--t-2) var(--e-move);
}

/* ---------- product page shell ---------- */
.page {
  display: block;
  padding-top: calc(var(--topbar-h) + var(--chrome-gap));
}
.page > section:first-child {
  padding-top: 0;
}
.page > section {
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter) 0;
}
.page > section:last-of-type {
  padding-bottom: var(--sp-9);
}
.page .sub {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-3);
}

/* hero */
.hero .dek {
  margin-top: var(--sp-5);
  font-size: var(--fs-4);
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 46ch;
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.install {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--ink-1);
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--e1);
  transition:
    transform var(--t-0) var(--e-exit),
    border-color var(--t-1) var(--e-move),
    box-shadow var(--t-2) var(--e-enter);
}
.install:active {
  transform: scale(0.97);
}
.install .prompt {
  color: var(--accent);
}
.install .cp {
  display: inline-flex;
  color: var(--ink-4);
  transition:
    color var(--t-1) var(--e-move),
    transform var(--t-1) var(--e-pop);
}
.install .cp svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.install.ok .cp {
  color: var(--accent);
  transform: scale(1.15);
}
a.cta {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--s1);
  text-decoration: none;
  font-size: var(--fs-2);
  font-weight: 500;
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-5);
  transition:
    background-color var(--t-1) var(--e-move),
    transform var(--t-0) var(--e-exit);
}
a.cta:hover {
  background: var(--accent-press);
  color: var(--s1);
}
a.cta:active {
  transform: scale(0.97);
}
.gloss-line {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--ink-4);
}
.copyfail {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-1);
  color: var(--danger);
}
.questions h3 {
  margin: var(--sp-5) 0 var(--sp-1);
}
.questions p {
  font-size: var(--fs-2);
  color: var(--ink-2);
  max-width: 68ch;
}
.questions .skillslink {
  font-size: var(--fs-1);
}

/* ---------- the initiative on disk ---------- */
.disk {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  align-items: start;
}
.tree {
  position: sticky;
  top: var(--sp-5);
}
.tree pre {
  margin: 0;
  font-size: var(--fs-0);
  line-height: 1.7;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  overflow-x: auto;
}
.tree .dim {
  color: var(--ink-4);
}
.flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.art .stagelab {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--accent);
}
.sheet-doc {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e1);
  padding: var(--sp-5);
  min-width: 0;
}
.sheet-doc .fm {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-3);
}
.sheet-doc .fm b {
  color: var(--ink-2);
  font-weight: 500;
}
.sheet-doc pre {
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--ink-2);
  overflow-x: auto;
}
.sheet-doc pre .dim {
  color: var(--ink-4);
}
.sheet-doc pre .acc {
  color: var(--accent);
}
.art .gloss {
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 60ch;
}

/* ---------- terminal, undressed ---------- */
.demo-term {
  margin: var(--sp-6) 0 0;
}
.term {
  position: relative;
  background: var(--term-bg);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--line);
  overflow: hidden;
}
@supports not (backdrop-filter: blur(1px)) {
  .term {
    background: var(--s2);
  }
}
.term::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.term > * {
  position: relative;
  z-index: var(--z-raised);
}
.termhead {
  display: flex;
  align-items: flex-end;
  padding: var(--sp-2) var(--sp-3) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.termtitle {
  padding: var(--sp-2) var(--sp-2);
}
.termctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-left: auto;
  margin-bottom: var(--sp-1);
  width: var(--sp-6);
  height: var(--sp-6);
  color: var(--ink-4);
  border: 1px solid transparent;
  padding: 0;
  transition:
    color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move);
}
.termctl svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
/* invisible hit-area expansion: 32px visuals, 48px targets */
.termctl,
.termtab,
.copybtn {
  position: relative;
}
.termctl::after,
.termtab::after,
.copybtn::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--sp-2));
}
.termctl:hover {
  color: var(--ink-1);
  border-color: var(--line-2);
}
.termctl[data-paused="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.termtabs {
  display: flex;
  gap: var(--sp-1);
}
.termtab {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
  border: 1px solid transparent;
  border-bottom: 0;
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: calc(var(--sp-1) / -4);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--t-1) var(--e-move),
    background-color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move);
}
.termtab:hover {
  color: var(--ink-1);
}
.termtab[aria-selected="true"] {
  color: var(--ink-1);
  background: var(--term-bg);
  border-color: var(--line);
}
/* seat colors: You purple, Claude its classic coral, Codex blue; the
 * brand marks ride currentColor so each label and its icon agree */
.term .who {
  color: var(--you);
  margin-right: var(--sp-2);
}
.term .who.claude {
  color: var(--claude);
}
.term .who.codex {
  color: var(--codex);
}
.gl {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: var(--sp-1);
  vertical-align: -0.08em;
}
.termtab .ic-claude {
  color: var(--claude);
}
.termtab .ic-codex {
  color: var(--codex);
}
.term .ln.think {
  color: var(--ink-4);
}
.term .ln.think .spark {
  color: var(--claude);
}
.term .shim {
  position: relative;
  display: inline-block;
}
/* Codex's thinking idiom: a light sweep masked by the status text
 * itself (the clone exists so sub-pixel masking never thins the real
 * text). Browsers without text-clip masks just show the still text. */
.term .shim .sclone {
  position: absolute;
  inset: 0;
  overflow: clip;
  color: transparent;
  pointer-events: none;
}
@supports (-webkit-mask-clip: text) {
  .term .shim .sclone {
    mask-image: linear-gradient(white, white);
    -webkit-mask-clip: text;
  }
  .term .shim .sclone::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent calc(50% - 4ch),
      var(--ink-1) 50%,
      transparent calc(50% + 4ch)
    );
    will-change: transform;
    animation: shimmer 2.2s linear infinite;
  }
}
@keyframes shimmer {
  from {
    translate: -120% 0;
  }
  to {
    translate: 120% 0;
  }
}
.term .body {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  line-height: 1.7;
  min-height: 200px;
  max-height: min(56vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  transition: opacity var(--t-2) var(--e-exit);
}
.term .body.out-fade {
  opacity: 0;
}
.term .ln {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink-3);
}
.term .ln .sig {
  color: var(--accent);
}
.term .ln.user {
  color: var(--ink-1);
}
.term .ln.agent {
  color: var(--ink-2);
}
.term .ln.cmd {
  color: var(--ink-1);
}
.term .ln.path {
  color: var(--accent-press);
}
.term .ln.out .ok {
  color: var(--accent);
  font-weight: 600;
  background: none;
  padding: 0;
}
.term .caret {
  display: inline-block;
  width: var(--sp-2);
  background: var(--accent);
  color: transparent;
}
.term .caret.idle {
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.termcap {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-3);
  transition: opacity var(--t-3) var(--e-enter);
}

/* ---------- proof quotes, rulings, start ---------- */
.proofq {
  margin: var(--sp-6) 0 0;
  background: none;
  border-radius: 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 1px solid var(--line-2);
}
.proofq b {
  display: block;
  color: var(--ink-1);
  font-weight: 600;
}
.proofq p {
  margin-top: var(--sp-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
}
.honesty {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.rulingrow {
  display: grid;
  grid-template-columns: var(--sp-8) minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  max-width: 68ch;
}
.rulingrow:first-of-type {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.rulingrow .rid {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--accent);
}
.rulingrow .rid a {
  color: inherit;
  text-decoration: none;
}
.rulingrow .rid a:hover {
  text-decoration: underline;
}
.rulingrow p {
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.rulingrow .alt {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-1);
  color: var(--ink-4);
}
.rulingrow:target {
  background: var(--accent-tint);
}
.morerulings {
  margin-top: var(--sp-5);
}
.docslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--fs-2);
}

/* ---------- docs layout ---------- */
.layout {
  max-width: var(--rail);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + var(--chrome-gap)) var(--gutter) var(--sp-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
nav.side .eyebrow {
  margin-bottom: var(--sp-2);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.topbar a:active,
.sidenav a:active,
.sidenav summary:active,
.pagenav a:active,
aside.toc nav a:active,
.docslinks a:active,
.rulingrow .rid a:active,
.morerulings a:active,
a.hash:active,
a.def:active,
.termctl:active,
.termtab:active {
  opacity: 0.7;
}
.sidenav summary:hover {
  color: var(--accent-press);
}
.sidenav summary {
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink-1);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
}
/* the summary IS the label while it's visible; the eyebrow takes over
 * only on wide screens where the summary hides */
nav.side .eyebrow {
  display: none;
}
.sidenav a {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
  border-radius: var(--r-2);
  font-size: var(--fs-2);
  color: var(--ink-3);
  text-decoration: none;
  transition:
    color var(--t-1) var(--e-move),
    background-color var(--t-1) var(--e-move);
}
.sidenav a:hover {
  color: var(--ink-1);
}
.sidenav a.active {
  color: var(--accent-press);
  font-weight: 500;
  background: var(--accent-tint);
}
main.doc {
  min-width: 0;
}
main.doc h1 {
  font-size: var(--fs-5);
  margin-bottom: var(--sp-4);
}
main.doc h2 {
  font-size: var(--fs-4);
  margin: var(--sp-7) 0 var(--sp-3);
}
main.doc h3 {
  margin: var(--sp-5) 0 var(--sp-2);
}
main.doc p {
  margin: var(--sp-3) 0;
}
main.doc ul,
main.doc ol {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-5);
}
main.doc li {
  margin: var(--sp-2) 0;
}
a.hash {
  margin-left: var(--sp-2);
  color: var(--ink-4);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--t-1) var(--e-move);
}
h2:hover a.hash,
h3:hover a.hash,
a.hash:focus-visible {
  opacity: 1;
}
pre {
  position: relative;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--ink-2);
  margin: var(--sp-4) 0;
}
pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
pre .cmt {
  color: var(--ink-4);
}
.copybtn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-2);
  color: var(--ink-3);
  background: var(--s1);
  border: 1px solid var(--line);
  transition:
    color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move),
    transform var(--t-1) var(--e-pop);
}
.copybtn:hover {
  color: var(--ink-1);
  border-color: var(--line-2);
}
.copybtn:active {
  transform: scale(0.94);
}
.copybtn.ok {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.copybtn svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.tablewrap {
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-2);
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
td {
  vertical-align: top;
  padding: var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
table.ref .c-code {
  width: var(--sp-9);
}
table.ref td:nth-child(2) {
  min-width: 26ch;
}
a.code {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-decoration: none;
}
tr:target {
  background: var(--accent-tint);
}
.chip {
  display: inline-block;
  margin-left: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  line-height: 1;
}
.chip.warn {
  background: var(--amber-tint);
  color: var(--amber);
}
.chip.err {
  background: var(--danger-tint);
  color: var(--danger);
}
blockquote {
  margin: var(--sp-4) 0;
  background: var(--s2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-1);
  padding: var(--sp-4) var(--sp-5);
}
blockquote.warn {
  border-left-color: var(--amber);
}
blockquote .label {
  font-weight: 600;
  color: var(--ink-1);
  font-size: var(--fs-2);
  margin-bottom: var(--sp-1);
}
blockquote p {
  margin: 0;
  font-size: var(--fs-2);
}
.pagenav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2);
}
.pagenav a {
  text-decoration: none;
  font-weight: 500;
}
.pagenav a:hover {
  text-decoration: underline;
}
.pagenav .next {
  margin-left: auto;
}
aside.toc {
  display: none;
}
aside.toc nav a {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--t-1) var(--e-move);
}
aside.toc nav a:hover {
  color: var(--ink-1);
}
aside.toc nav a.on {
  color: var(--accent-press);
  font-weight: 500;
}

/* ---------- diagrams ---------- */
figure.band {
  margin: var(--sp-6) 0;
}
figure.band figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.gl-dia {
  width: 100%;
  height: auto;
  display: block;
}
.gl-dia text {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  fill: var(--ink-2);
}
.gl-dia text.mono,
.gl-dia .chip-text {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.gl-dia .gloss {
  font-size: var(--fs-1);
  fill: var(--ink-3);
}
.gl-dia .dim {
  fill: var(--ink-4);
}
.gl-dia .stn-label {
  font-weight: 600;
  fill: var(--ink-1);
  text-anchor: middle;
}
.gl-dia .rail {
  stroke: var(--line-2);
  stroke-width: 2;
  fill: none;
}
.gl-dia .refline {
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  fill: none;
}
.gl-dia .rework {
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  fill: none;
}
.gl-dia .flow-ac {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}
.gl-dia .flow-q {
  stroke: var(--line-2);
  stroke-width: 1.5;
  fill: none;
}
.gl-dia .arrow-ac {
  fill: var(--accent);
}
.dia-fallback {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: none;
}
.railv-fallback .dia-fallback.afb {
  display: block;
}
.dia-fallback li {
  padding: var(--sp-2) 0;
}
.dia-fallback b {
  color: var(--ink-1);
  font-weight: 600;
}
.dia-fallback span {
  display: block;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.gl-dia .arrow {
  fill: var(--ink-4);
}
.gl-dia .stn-dot {
  fill: var(--s1);
  stroke: var(--accent);
  stroke-width: 2;
}
.gl-dia .stn-core {
  fill: var(--accent);
}
.gl-dia .gate {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.gl-dia .chipr {
  fill: var(--accent-tint);
}
.gl-dia .chip-text {
  fill: var(--accent-press);
  text-anchor: middle;
}
.gl-dia .sheet {
  fill: var(--s1);
  stroke: var(--line);
}
.gl-dia .anchor {
  fill: var(--accent);
}
/* The pipeline rail (DESIGN.md law 13): the serpentine. One wire
 * winds down through seven stations and ends at the book; stations sit
 * where the curve runs vertical, content in the alternating pockets.
 * The path is drawn through measured node centers with vertical
 * tangents, so the curve is exact at every width. */
.snakewrap {
  position: relative;
  margin-top: var(--sp-5);
  max-width: 640px;
}
.snakepath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.snakepath .wire {
  fill: none;
  stroke: url(#snakeflow);
  stroke-width: 2;
}
.snake {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.snake > li {
  position: relative;
  min-height: 112px;
  padding: var(--sp-4) 0;
  transition:
    opacity var(--t-3) var(--e-enter),
    transform var(--t-3) var(--e-enter);
}
.snake .node {
  position: absolute;
  top: var(--sp-5);
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 2px solid var(--accent);
}
.snake .side-r .node {
  left: calc(100% - 8px);
  transform: translateX(-50%);
}
.snake .side-l .node {
  left: 8px;
  transform: translateX(-50%);
}
.snake .gate .node::after {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  top: 4px;
  height: 2px;
  background: var(--accent);
}
.snake .stn {
  max-width: 46ch;
}
.snake .side-r .stn {
  margin-left: auto;
  margin-right: var(--sp-7);
  text-align: right;
}
.snake .side-l .stn {
  margin-left: var(--sp-7);
  text-align: left;
}
.snake .head {
  margin: 0;
}
.snake b {
  color: var(--ink-1);
  font-weight: 600;
}
.snake .book {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
}
.snake .meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.snake .gw {
  color: var(--accent);
  white-space: nowrap;
}
.snake .what {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.snake .ret {
  min-height: 0;
  padding: var(--sp-2) 0;
  text-align: center;
}
.snake .ret .what {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--ink-4);
  background: var(--bg);
  padding: 0 var(--sp-3);
}
.snake .ret svg {
  width: 12px;
  height: 12px;
}
.snake .fin {
  text-align: center;
  min-height: 0;
}
.snake .fin .node {
  position: static;
  display: inline-block;
  border-radius: 0;
  background: var(--accent);
  border-color: var(--accent);
  width: 12px;
  height: 12px;
}
.snake .fin .stn {
  max-width: 52ch;
  margin: var(--sp-2) auto 0;
  text-align: center;
}
/* entrance: the wire draws itself, the stations rise, once */
.snakewrap .wire {
  transition: stroke-dashoffset 1.4s var(--e-enter);
}
.snakewrap.pre .snake > li {
  opacity: 0;
  transform: translateY(var(--sp-2));
}
.snakewrap.on .snake > li {
  opacity: 1;
  transform: translateY(0);
}
.snakewrap.on .snake > li:nth-child(2) {
  transition-delay: 100ms;
}
.snakewrap.on .snake > li:nth-child(3) {
  transition-delay: 200ms;
}
.snakewrap.on .snake > li:nth-child(4) {
  transition-delay: 300ms;
}
.snakewrap.on .snake > li:nth-child(5) {
  transition-delay: 400ms;
}
.snakewrap.on .snake > li:nth-child(6) {
  transition-delay: 500ms;
}
.snakewrap.on .snake > li:nth-child(7) {
  transition-delay: 600ms;
}
.snakewrap.on .snake > li:nth-child(8) {
  transition-delay: 700ms;
}
.snakewrap.on .snake > li:nth-child(9) {
  transition-delay: 820ms;
}
.railv-fallback {
  display: block;
}
.gl-dia.wide + .railv-fallback,
.gl-dia.wide + ol.railv,
.gl-dia.wide + .dia-fallback {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .disk {
    grid-template-columns: minmax(0, 1fr);
  }
  .tree {
    position: static;
  }
  .gl-dia.wide {
    display: none;
  }
  .gl-dia.wide + .railv-fallback,
  .gl-dia.wide + ol.railv,
  .gl-dia.wide + .dia-fallback {
    display: block;
  }
}
@media (max-width: 640px) {
  .stage .panel {
    padding-top: var(--sp-7);
  }
  .page > section {
    padding-top: var(--sp-7);
  }
}
@media (min-width: 1320px) {
  .sidenav summary {
    display: none;
  }
  nav.side .eyebrow {
    display: block;
  }
}
@media (min-width: 1320px) {
  .layout {
    max-width: var(--rail-wide);
    grid-template-columns: 200px minmax(0, 1fr) 200px;
  }
  aside.toc {
    display: block;
  }
  aside.toc > div,
  nav.side > details {
    position: sticky;
    top: var(--sp-5);
  }
  .layout main.doc {
    padding: 0;
  }
}

/* ---------- hover gating ---------- */
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translateY(calc(var(--sp-1) * -0.5));
  }
  .tile:hover::before {
    filter: brightness(1.3);
  }
  .tile:hover .tarrow {
    transform: translateX(var(--sp-1));
  }
  .install:hover {
    border-color: var(--accent);
  }
}

/* ---------- entrance (home hero) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise-1,
  .rise-2,
  .rise-3 {
    opacity: 0;
    transform: translateY(var(--sp-2));
    animation: rise var(--t-3) var(--e-enter) forwards;
  }
  .rise-2 {
    animation-delay: 100ms;
  }
  .rise-3 {
    animation-delay: 200ms;
  }
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- theme flip ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  z-index: var(--z-raised);
}

/* ---------- reduced motion: fades stay, movement goes ---------- */
@media (hover: none) {
  a.hash {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity !important;
  }
  .tile:hover,
  .tile:active,
  .tile:hover .tarrow,
  .install:active,
  a.cta:active,
  .theme-btn:active,
  .fern-btn:active,
  .noferns .fern-btn svg,
  .copybtn:active {
    transform: none !important;
  }
}