/* fernworks.dev: Understory & Paper.
 * The design language lives in site/DESIGN.md, a repository document never
 * published; 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-press: #0b6236;
  --accent-tint: rgba(15, 122, 67, 0.09);
  --danger: #a3231c;
  --danger-tint: rgba(163, 35, 28, 0.09);
  --accent-mark: rgba(15, 122, 67, 0.2);
  --danger-mark: rgba(163, 35, 28, 0.16);
  --amber: #83540e;
  --amber-tint: rgba(176, 122, 32, 0.12);
  --claude: #8f3a1e;
  --codex: #1a4cb3;
  --you: #5f35b0;
  --o-1: #2f5d8a;
  --o-2: #7c4a1c;
  --o-3: #7a3d78;
  --o-4: #7a6212;
  --o-5: #5b4a9e;
  --o-6: var(--ink-3);
  --o-1-tint: rgba(47, 93, 138, 0.07);
  --o-2-tint: rgba(124, 74, 28, 0.07);
  --o-3-tint: rgba(122, 61, 120, 0.07);
  --o-4-tint: rgba(122, 98, 18, 0.07);
  --o-5-tint: rgba(91, 74, 158, 0.07);
  --o-6-tint: rgba(76, 92, 82, 0.05);
  --editor-bg: #f6f9f4;
  --editor-gutter: #eaf0e8;
  --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;
  --hair: 1px;
  --mark-w: 3px;
  --tone: var(--line-2);
  --notes-w: 220px;
  --seam: 2px;
  --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);
  --lh-tight: 1.1;
  --lh-head: 1.3;
  --lh-body: 1.55;
  --lh-mono: 1.7;
  --measure: 68ch;
  --measure-dek: 46ch;
  --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;
  --t-step: 60ms;
  --rail: 880px;
  --rail-wide: 1240px;
  --gutter: 24px;
  --topbar-h: 64px;
  --z-raised: 1;
  --z-nav: 30;
  --z-grain: 40;
  --z-skip: 50;
}

/* ---------- tokens: dark (system), kept 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-press: #5fe39b;
    --accent-tint: rgba(70, 211, 137, 0.12);
    --danger: #f0857b;
    --danger-tint: rgba(240, 133, 123, 0.13);
    --accent-mark: rgba(70, 211, 137, 0.24);
    --danger-mark: rgba(240, 133, 123, 0.22);
    --amber: #e0a94f;
    --amber-tint: rgba(224, 169, 79, 0.14);
    --claude: #d97757;
    --codex: #6ea8ff;
    --you: #b79bff;
    --o-1: #8fb4e0;
    --o-2: #d9a070;
    --o-3: #d39bd0;
    --o-4: #d8c070;
    --o-5: #a99be8;
    --o-6: var(--ink-3);
    --o-1-tint: rgba(143, 180, 224, 0.1);
    --o-2-tint: rgba(217, 160, 112, 0.1);
    --o-3-tint: rgba(211, 155, 208, 0.1);
    --o-4-tint: rgba(216, 192, 112, 0.1);
    --o-5-tint: rgba(169, 155, 232, 0.1);
    --o-6-tint: rgba(166, 184, 171, 0.07);
    --editor-bg: #0c120e;
    --editor-gutter: #070b09;
    --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), kept 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-press: #5fe39b;
  --accent-tint: rgba(70, 211, 137, 0.12);
  --danger: #f0857b;
  --danger-tint: rgba(240, 133, 123, 0.13);
  --accent-mark: rgba(70, 211, 137, 0.24);
  --danger-mark: rgba(240, 133, 123, 0.22);
  --amber: #e0a94f;
  --amber-tint: rgba(224, 169, 79, 0.14);
  --claude: #d97757;
  --codex: #6ea8ff;
  --you: #b79bff;
  --o-1: #8fb4e0;
  --o-2: #d9a070;
  --o-3: #d39bd0;
  --o-4: #d8c070;
  --o-5: #a99be8;
  --o-6: var(--ink-3);
  --o-1-tint: rgba(143, 180, 224, 0.1);
  --o-2-tint: rgba(217, 160, 112, 0.1);
  --o-3-tint: rgba(211, 155, 208, 0.1);
  --o-4-tint: rgba(216, 192, 112, 0.1);
  --o-5-tint: rgba(169, 155, 232, 0.1);
  --o-6-tint: rgba(166, 184, 171, 0.07);
  --editor-bg: #0c120e;
  --editor-gutter: #070b09;
  --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;
}
/* an element that ships hidden stays hidden whatever its class lays out;
 * the scripts that make it work unhide it (the theme and fern buttons,
 * the dial, the terminal's tabs) */
[hidden] {
  display: none !important;
}
html {
  scroll-padding-top: var(--sp-6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--line-2) transparent;
  scrollbar-gutter: stable;
}
*::-webkit-scrollbar {
  width: calc(var(--sp-2) + 2 * var(--hair));
  height: calc(var(--sp-2) + 2 * var(--hair));
}
*::-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: var(--lh-body);
  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: var(--lh-tight);
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: var(--lh-head);
}
h3 {
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: var(--lh-head);
}
p {
  margin: 0;
  max-width: var(--measure);
}
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);
}
/* the terminal stays sharp-edged under focus too (law 12); its body clips,
 * so its ring sits inside */
.term :focus-visible,
.term:focus-visible {
  border-radius: 0;
}
.term .body:focus-visible {
  outline-offset: calc(-2 * var(--hair) - 2px);
}
/* an in-page jump lands, and the target holds a wash that fades */
:target {
  animation: land var(--t-4) var(--e-exit) var(--t-3) backwards;
}
@keyframes land {
  from {
    background-color: var(--accent-tint);
  }
}
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: var(--hair);
  height: var(--hair);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  z-index: var(--z-skip);
  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;
}
/* below 480 chrome and content share one 16px edge (the content's half
 * is under "responsive", after the rules it narrows) */
@media (max-width: 480px) {
  .topbar .in {
    padding-inline: var(--sp-4);
  }
  .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 .in {
    gap: var(--sp-2);
  }
  .topbar .sep {
    display: none;
  }
  .topbar .chip {
    gap: var(--sp-2);
  }
  .topbar .chip a:not(.brand),
  .topbar .chip .cur:not(.brand) {
    padding-inline: 0;
  }
}
.topbar .chip {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1;
  height: var(--sp-7);
  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: var(--sp-7);
  height: var(--sp-7);
  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-2) var(--e-enter);
}
.theme-btn:hover {
  color: var(--ink-1);
}
.theme-btn:active,
.fern-btn:active {
  transform: scale(0.96);
  transition-duration: var(--t-0);
}
.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);
  transition:
    opacity var(--t-1) var(--e-exit),
    transform var(--t-1) var(--e-exit);
}
.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;
}
/* a long crumb (a skill's name) yields first: the chip shrinks and the
 * current page's name ends in an ellipsis, so the tools keep their row */
.topbar .chip {
  min-width: 0;
}
.topbar .chip .cur:not(.brand) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 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-enter);
}
/* 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;
  inset: 0 0 auto;
  height: 100lvh;
  opacity: var(--fern-op-dim);
  filter: blur(4px) saturate(0.9);
}
/* law 18: in light the ambient bed is masked away from the reading column */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) #fern.fernbg {
    mask-image: linear-gradient(
      90deg,
      black calc(50% - var(--rail) / 2 - var(--sp-7)),
      transparent calc(50% - var(--rail) / 2),
      transparent calc(50% + var(--rail) / 2),
      black calc(50% + var(--rail) / 2 + var(--sp-7))
    );
  }
}
html[data-theme="light"] #fern.fernbg {
  mask-image: linear-gradient(
    90deg,
    black calc(50% - var(--rail) / 2 - var(--sp-7)),
    transparent calc(50% - var(--rail) / 2),
    transparent calc(50% + var(--rail) / 2),
    black calc(50% + var(--rail) / 2 + var(--sp-7))
  );
}
.noferns #fern {
  opacity: 0;
  transition: opacity var(--t-3) var(--e-exit);
}
.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-3) var(--e-exit);
}
.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;
  transition: opacity var(--t-4) var(--e-enter);
}
@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: calc(var(--rail) - var(--sp-9) - var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-8);
  /* law 18's halo: inert over the cleared light column, the ground of the
   * stage text where dark fronds stand behind it */
  text-shadow:
    0 0 var(--sp-1) var(--bg),
    0 0 var(--sp-3) var(--bg);
}
.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: calc(var(--sp-9) * 6 - var(--sp-4));
  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);
  /* the stage's halo is the panel's text alone, never glass (law 18) */
  text-shadow: none;
  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;
  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-enter);
}
.tile b {
  display: block;
  color: var(--ink-1);
  font-size: var(--fs-3);
  font-weight: 600;
}
/* the tile's line of description; a span inside it (a claim's mark) stays inline */
.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: var(--lh-head);
  color: var(--ink-3);
  max-width: var(--measure-dek);
}
.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-2) var(--e-enter),
    border-color var(--t-1) var(--e-move),
    box-shadow var(--t-2) var(--e-enter);
}
.install:active {
  transform: scale(0.96);
  transition-duration: var(--t-0);
}
.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-exit);
}
.install .cp svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.install.ok .cp {
  color: var(--accent);
  transform: scale(1.15);
  transition:
    color var(--t-1) var(--e-move),
    transform var(--t-2) var(--e-pop);
}
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-2) var(--e-enter);
}
a.cta:hover {
  background: var(--accent-press);
  color: var(--s1);
}
a.cta:active {
  transform: scale(0.96);
  transition-duration: var(--t-0);
}
.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: var(--measure);
}
.questions .skillslink {
  font-size: var(--fs-1);
}

/* ---------- 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;
  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(-1 * var(--hair));
  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-3);
}
.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: var(--lh-mono);
  min-height: calc(var(--sp-9) * 2 + var(--sp-2));
  max-height: min(56vh, calc(var(--sp-9) * 4 + var(--sp-8) - var(--sp-2)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  transition: opacity var(--t-3) var(--e-enter);
}
.term .body.out-fade {
  opacity: 0;
  transition: opacity var(--t-2) var(--e-exit);
}
.term .ln {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink-3);
}
.term .ln .sig {
  color: var(--accent-press);
}
.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-press);
  font-weight: 600;
  background: none;
  padding: 0;
}
.term .caret {
  display: inline-block;
  width: var(--sp-2);
  background: var(--accent-press);
  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: var(--measure);
}
/* the id holds the first track; everything else the row carries reads in
 * the second, whatever the row's child count */
.rulingrow > :not(.rid) {
  grid-column: 2;
}
.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);
}
.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);
  min-height: var(--sp-7);
  padding: var(--sp-3) 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: var(--lh-mono);
  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-exit);
}
.copybtn:hover {
  color: var(--ink-1);
  border-color: var(--line-2);
}
.copybtn:active {
  transform: scale(0.96);
  transition-duration: var(--t-0);
  transition-timing-function: var(--e-enter);
}
.copybtn.ok {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
  transition:
    color var(--t-1) var(--e-move),
    border-color var(--t-1) var(--e-move),
    transform var(--t-2) var(--e-pop);
}
.copybtn svg {
  width: var(--sp-4);
  height: var(--sp-4);
}
.tablewrap {
  overflow-x: auto;
  margin: var(--sp-4) 0;
  /* the scroll cue: a shadow shows at whichever edge has more table,
   * covered by the ground at an edge already reached */
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left / var(--sp-6) 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right / var(--sp-6) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--line-2), transparent) left / var(--sp-3) 100%
      no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--line-2), transparent) right / var(--sp-3)
      100% no-repeat scroll;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-2);
}
table,
.measure,
.count {
  font-variant-numeric: tabular-nums;
}
/* a wide table of five columns or more (the mode table) stacks under 640:
 * one block per row, each cell labelled by its column */
@media (max-width: 640px) {
  table.stack thead {
    position: absolute;
    width: var(--hair);
    height: var(--hair);
    overflow: hidden;
    clip-path: inset(50%);
  }
  table.stack tr,
  table.stack td {
    display: block;
  }
  table.stack tr {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
  }
  table.stack td {
    padding: var(--sp-1) 0;
    border-bottom: 0;
  }
  table.stack td::before {
    content: attr(data-label) ": ";
    font-family: var(--font-mono);
    font-size: var(--fs-0);
    color: var(--ink-3);
  }
}
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;
}
.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);
}
/* 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: calc(var(--sp-8) * 10);
}
.snakepath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.snakepath .wire {
  fill: none;
  stroke: url(#snakeflow);
  stroke-width: 2;
  transition: stroke-dashoffset var(--t-3) var(--e-move);
}
.snake {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.snake > li {
  position: relative;
  min-height: calc(var(--sp-9) + var(--sp-4));
  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: calc(var(--sp-3) + 2 * var(--hair));
  height: calc(var(--sp-3) + 2 * var(--hair));
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 2px solid var(--accent);
}
.snake .side-r .node {
  left: calc(100% - var(--sp-2));
  transform: translateX(-50%);
}
.snake .side-l .node {
  left: var(--sp-2);
  transform: translateX(-50%);
}
.snake .gate .node::after {
  content: "";
  position: absolute;
  left: calc(var(--hair) - var(--sp-2));
  right: calc(var(--hair) - var(--sp-2));
  top: var(--sp-1);
  height: calc(2 * var(--hair));
  background: var(--accent);
}
.snake .stn {
  max-width: var(--measure-dek);
}
.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: var(--sp-3);
  height: var(--sp-3);
}
.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: var(--sp-3);
  height: var(--sp-3);
}
.snake .fin .stn {
  max-width: 52ch;
  margin: var(--sp-2) auto 0;
  text-align: center;
}
/* entrance (law 13): the wire draws per segment as each station comes
 * into view, and the station rises with it; line.js sets each station's
 * delay in --t-step beats. Nothing is pre-hidden under reduced motion. */
.snakewrap.pre .snake > li:not(.on) {
  opacity: 0;
  transform: translateY(var(--sp-2));
}

/* The line's stations (law 13, the plan's "The product page's new
 * sections"): each step carries its depth in every mode, one on at a
 * time and the others stacked in the same cell, so a swap is a fade on
 * --t-1 --e-move and never a reflow; a step the mode skips keeps its ring
 * at --line-2 with the word "skipped"; a trial step's ring is dashed. */
.snake .depths {
  display: grid;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.snake .side-r .depths {
  justify-items: end;
}
.snake .depth {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-1) var(--e-move),
    visibility var(--t-1) var(--e-move);
}
.snake .depth.on {
  opacity: 1;
  visibility: visible;
}
.snake .depth.d-none {
  color: var(--ink-4);
}
.snake .dn {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--ink-4);
}
.snake li.skipped .node {
  border-color: var(--line-2);
  transition: border-color var(--t-1) var(--e-move);
}
.snake .trial .node {
  border-style: dashed;
}
.snake .flag {
  font-size: var(--fs-0);
  font-weight: 400;
  color: var(--ink-4);
}
.snake .head b {
  font-family: var(--font-mono);
}
.snake .ret .rw {
  width: var(--sp-3);
  height: var(--sp-3);
  flex: none;
}
/* the depth glyphs: none a hollow ring in --ink-4, inline a ring, written
 * a filled ring, independent a ring with its centre, looped the rework arrow */
.dg {
  display: inline-block;
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: var(--r-pill);
  border: calc(2 * var(--hair)) solid currentColor;
  color: var(--accent);
}
svg.dg {
  border: 0;
  border-radius: 0;
}
.dg-none {
  color: var(--ink-4);
}
.dg-written {
  background: currentColor;
}
.dg-independent {
  background: radial-gradient(circle, currentColor 28%, transparent 34%);
}

/* the mode dial: a radiogroup of a control per mode (three in 0.1.0), the
 * checked one in the accent's border and wash; below 640 a tab per mode with
 * the checked mode's promise beneath them */
.line .dial {
  margin: var(--sp-5) 0 var(--sp-2);
}
.dial-l {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.modes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
.mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-height: var(--sp-7);
  padding: var(--sp-3);
  text-align: left;
  color: var(--ink-2);
  background: var(--s1);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-2);
  transition:
    border-color var(--t-1) var(--e-move),
    background-color var(--t-1) var(--e-move),
    opacity var(--t-0) var(--e-enter);
}
.mode b {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink-1);
}
.mode .dp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.mode .dc {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
}
.mode[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.mode:active {
  opacity: 0.7;
}
.dial .say {
  display: none;
}
.line.live .linetable {
  display: none;
}
.depthkey {
  margin-top: var(--sp-5);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.dk-h {
  margin: 0 0 var(--sp-2);
  font-weight: 500;
  color: var(--ink-2);
}
.depthkey dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30ch), 1fr));
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
}
.depthkey dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.depthkey dt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  color: var(--ink-2);
}
.depthkey dd {
  margin: 0;
}
.linetable caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .modes {
    gap: 0;
    border-bottom: var(--hair) solid var(--line);
  }
  .mode {
    align-items: center;
    justify-content: center;
    padding: var(--sp-2);
    border-radius: 0;
    border-color: transparent;
    background: none;
    margin-bottom: calc(-1 * var(--hair));
  }
  .mode[aria-checked="true"] {
    border-color: var(--line);
    border-bottom-color: var(--bg);
    background: var(--bg);
  }
  .mode .dp {
    display: none;
  }
  .dial .say.on {
    display: block;
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-1);
    color: var(--ink-3);
  }
  table.stack th[scope="row"] {
    display: block;
    padding: 0 0 var(--sp-1);
    border-bottom: 0;
  }
}

/* ---------- what a change leaves: the worked record ---------- */
.record {
  margin: var(--sp-6) 0 0;
}
.rec-sheet {
  background: var(--s1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e1);
  padding: var(--sp-5);
}
.rec-bar {
  margin: 0;
  padding-bottom: var(--sp-3);
  border-bottom: var(--hair) solid var(--line);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.rec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding-top: var(--sp-4);
}
.rec-fm {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-1);
  line-height: var(--lh-mono);
  color: var(--ink-2);
}
.rec-body p {
  margin: var(--sp-2) 0 0;
  max-width: var(--measure);
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.rec-h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--ink-1);
}
.rec-h .sig {
  color: var(--ink-4);
}
.rec-body .tablewrap {
  margin: var(--sp-2) 0 0;
}
.rec-body table {
  font-size: var(--fs-1);
}
.rec-note {
  margin: 0;
  padding-left: var(--sp-3);
  border-left: var(--hair) solid var(--accent);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
.record figcaption {
  margin-top: var(--sp-3);
  max-width: var(--measure);
  font-size: var(--fs-1);
  color: var(--ink-3);
}
@media (min-width: 860px) {
  .rec-row {
    grid-template-columns: minmax(0, 1fr) var(--notes-w);
    gap: var(--sp-6);
  }
  .rec-note {
    align-self: start;
  }
}

/* the docs as one text link beside the install line (G7) */
a.textlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-7);
  font-size: var(--fs-2);
}

/* the four promises under the home hero, a quiet row with no fine print */
.promises {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
.promises b {
  font-weight: 600;
  color: var(--ink-1);
}
@media (min-width: 640px) {
  .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the release notes: one section per version, newest first */
.release h2 {
  font-family: var(--font-mono);
}
.release h3 {
  margin-top: var(--sp-4);
}
.release ul {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.release li + li {
  margin-top: var(--sp-2);
}
.page .note {
  margin-top: var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-3);
  max-width: var(--measure);
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .stage .panel {
    padding-top: var(--sp-7);
  }
  .page > section {
    padding-top: var(--sp-7);
  }
}
/* below 480 the content takes the topbar's 16px edge */
@media (max-width: 480px) {
  .page > section,
  .layout,
  .stage .panel {
    padding-inline: var(--sp-4);
  }
}
@media (min-width: 1320px) {
  .sidenav[open] 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));
  }
  /* a press while hovered still presses: the lift yields to the scale */
  .tile:hover:active {
    transform: scale(0.98);
  }
  .tile:hover::before {
    filter: brightness(1.3);
  }
  .tile:hover .tarrow {
    transform: translateX(var(--sp-1));
  }
  .install:hover {
    border-color: var(--accent);
  }
}

/* ---------- entrance (home hero) ----------
 * The rise fills backwards from its keyframe and then lets go, so the
 * tiles' own hover lift and press apply once it has played. */
@media (prefers-reduced-motion: no-preference) {
  .rise-1,
  .rise-2,
  .rise-3,
  .rise-4,
  .rise-5 {
    animation: rise var(--t-3) var(--e-enter) backwards;
  }
  .rise-2 {
    animation-delay: var(--t-step);
  }
  .rise-3 {
    animation-delay: calc(var(--t-step) * 2);
  }
  .rise-4 {
    animation-delay: calc(var(--t-step) * 3);
  }
  .rise-5 {
    animation-delay: calc(var(--t-step) * 4);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--sp-2));
  }
}

/* ---------- theme flip ----------
 * theme.js marks the root for the flip's frames: the transitions are
 * suppressed so no colour races the reveal, and the UA's cross-fade is
 * replaced by the circle (motion allowed) or a root fade (reduced). */
.vt-flip *,
.vt-flip *::before,
.vt-flip *::after {
  transition: none !important;
}
.vt-flip::view-transition-old(root),
.vt-flip::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.vt-flip::view-transition-new(root) {
  z-index: var(--z-raised);
}
@media (prefers-reduced-motion: reduce) {
  .vt-flip::view-transition-old(root) {
    animation: vt-out var(--t-3) var(--e-move) both;
  }
  .vt-flip::view-transition-new(root) {
    animation: vt-in var(--t-3) var(--e-move) both;
  }
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
  }
}

/* ---------- reduced motion: fades stay, movement goes ---------- */
@media (hover: none) {
  a.hash {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::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,
  .copybtn.ok,
  .install.ok .cp {
    transform: none !important;
  }
  /* a press under reduced motion is an opacity change */
  .tile:active,
  .install:active,
  a.cta:active,
  .theme-btn:active,
  .fern-btn:active,
  .copybtn:active {
    opacity: 0.7;
  }
  /* the landing wash is a fade, and fades stay */
  :target {
    animation: land var(--t-4) var(--e-exit) var(--t-3) backwards !important;
  }
}

/* ---------- the footer (law 16): one on every page ---------- */
.foot {
  max-width: var(--rail);
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--sp-7);
  border-top: var(--hair) solid var(--line);
  font-size: var(--fs-1);
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
}
.foot li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-7);
}
.foot a:active {
  opacity: 0.7;
}
@media (max-width: 480px) {
  .foot {
    padding-inline: var(--sp-4);
  }
}
@media (min-width: 1320px) {
  .docs-page .foot,
  .edition-page .foot {
    max-width: var(--rail-wide);
  }
}