/* ── Papaya website ──────────────────────────────────────────────
   Two materials, and the design is the contrast between them:

   *Paper* — a warm light canvas, editorial serif, generous measure.
   That is the marketing voice.

   *Panel* — a dark terminal surface holding the product's real
   interface, in monospace, at the exact glyphs the TUI prints.
   That is the product speaking for itself.

   Everything decorative was removed. The product artifacts are the
   decoration; a page about a tool that shows no tool is a brochure.

   The palette is lifted from the product's own web view
   (packages/web/src/app.css) so the site and the app read as one
   thing, contrast ratios included. */

:root {
  color-scheme: light;

  /* Paper */
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #f1efea;
  --surface-3: #e8e4dc;
  --hairline: rgba(28, 22, 14, 0.1);
  --hairline-strong: rgba(28, 22, 14, 0.18);
  --ink: #1c1a16;
  --ink-2: #57524a;
  --ink-3: #6b665f;      /* 5.2:1 on --bg, 5.0:1 on --surface-2. The product's
                            #76716a clears 4.5:1 on white but only 4.4:1 on
                            this page ground, and the labels using it are 10px. */

  /* Accent — the product's, with its measured contrast */
  --accent: #cf5514;     /* white on this is 4.6:1 */
  --accent-ink: #ffffff;
  --accent-soft: rgba(207, 85, 20, 0.09);
  --accent-line: rgba(207, 85, 20, 0.3);
  --forest: #2f5741;
  --ok: #2e7d51;
  --err: #c0392b;

  /* Panel — a terminal is dark in both themes, because a terminal is */
  --terminal-bg: #17140f;
  --terminal-raised: #201c16;
  --terminal-ink: #f4efe6;
  --terminal-muted: #a49a8c;
  --terminal-dim: #8d8378;   /* 4.9:1 on the light-theme panel, 5.4:1 on the dark one; #7d746a was 4.0:1 */
  --terminal-line: rgba(255, 244, 226, 0.12);
  --terminal-accent: #f2803f;
  --terminal-cyan: #6fc0dd;   /* USER_COLOR = 'cyan' */
  --terminal-ok: #63c391;
  --terminal-err: #ef7b6d;

  --shadow-sm: 0 1px 2px rgba(28, 22, 14, 0.05);
  --shadow-md: 0 6px 22px -10px rgba(28, 22, 14, 0.3);
  --shadow-lg: 0 30px 70px -28px rgba(28, 22, 14, 0.42);

  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: ui-sans-serif, system-ui, "Segoe UI", Inter, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  --max: 1140px;
  --header: 68px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e10;
  --surface: #17171a;
  --surface-2: #1e1e22;
  --surface-3: #26262b;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --ink: #eceae6;
  --ink-2: #a7a39c;
  --ink-3: #8a867f;
  --accent: #f2803f;
  --accent-ink: #1a0f07;
  --accent-soft: rgba(242, 128, 63, 0.13);
  --accent-line: rgba(242, 128, 63, 0.34);
  --forest: #3f6b52;
  --ok: #63c391;
  --err: #ef7b6d;
  --terminal-bg: #08080a;
  --terminal-raised: #131317;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 22px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -26px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
code, pre { font-family: var(--mono); }
::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

[data-lang="vi"] { display: none; }
html[data-language="vi"] [data-lang="en"] { display: none !important; }
html[data-language="vi"] [data-lang="vi"] { display: revert; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  transition: transform 160ms ease;
}

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

.shell {
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: border-color 200ms ease;
}

.site-header[data-stuck="true"] { border-bottom-color: var(--hairline); }

.nav-wrap {
  min-height: var(--header);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.brand img { width: 28px; height: 28px; }

.brand small {
  margin-left: 3px;
  padding: 3px 7px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.site-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
  transition: background 140ms ease, color 140ms ease;
}

.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.nav-controls { display: flex; align-items: center; gap: 8px; }

.language-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-2);
}

.language-switch button,
.icon-button,
.menu-button,
.copy-button,
.docs-toggle,
.replay-button {
  border: 0;
  cursor: pointer;
}

.language-switch button {
  min-width: 32px;
  padding: 5px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: 650 11px/1 var(--mono);
  transition: background 140ms ease, color 140ms ease;
}

.language-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.icon-button,
.menu-button,
.docs-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  transition: background 140ms ease, color 140ms ease;
}

.icon-button:hover, .menu-button:hover, .docs-toggle:hover { background: var(--surface-3); color: var(--ink); }
.icon-button::before { content: "☀"; font-size: 15px; line-height: 1; }
:root[data-theme="dark"] .icon-button::before { content: "☾"; }
.menu-button { display: none; }
.menu-button::before { content: "≡"; font: 600 19px/1 var(--body); }

/* ── Shared pieces ──────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: var(--ink-3);
  font: 650 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button.primary { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.button .arrow { font-size: 15px; transition: transform 150ms ease; }
.button:hover .arrow { transform: translateX(3px); }

.section { padding-block: clamp(64px, 8vw, 108px); }
.section + .section { border-top: 1px solid var(--hairline); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: clamp(24px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.section-number {
  color: var(--accent);
  font: 650 11px/1 var(--mono);
  letter-spacing: 0.08em;
}

.section h2,
.docs-hero h1 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-intro {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  max-width: 52ch;
}

.caption {
  margin: 14px 0 0;
  color: var(--ink-3);
  font: 12px/1.6 var(--mono);
}

.caption b { color: var(--ink-2); font-weight: 650; }

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(56px, 8vw, 100px) clamp(36px, 5vw, 56px);
  text-align: center;
}

.hero-message { margin-inline: auto; }
.hero .eyebrow { justify-content: center; }

/* The measure is set in em so it tracks the headline, not the root:
   at 80px this is three balanced lines, at 44px it is still three. */
.hero h1 {
  max-width: 11em;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(44px, 6.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero h1 em { color: var(--accent); font-style: italic; font-weight: 500; }

.hero-copy {
  max-width: 58ch;
  margin: 22px auto 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

/* The install command is a control, not a code sample: it sits in the
   hero as the primary action, and copying it is one click. */
.install-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 6px 0 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.install-inline code {
  color: var(--ink);
  font-size: 13.5px;
  white-space: nowrap;
}

.install-inline code::before { content: "$ "; color: var(--accent); }

.install-inline .copy-button {
  min-width: 66px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
}

.install-inline .copy-button:hover { background: var(--accent-soft); color: var(--accent); }

.hero .copy-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--ink-3);
  font: 12px/1.4 var(--mono);
}

/* What happens after the install line, so the first run is not a
   question the reader has to open the docs to answer. */
.hero-next { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.hero-next code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Proof, the way an individual-facing open-source tool proves itself:
   facts a reader can check, not logos. */
.proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.proof li {
  padding: 6px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 11.5px/1.5 var(--mono);
}

.proof li b { color: var(--ink); font-weight: 700; }

/* ── The terminal panel ─────────────────────────────────────── */

/* A terminal surface keeps its own ink tokens. It must never inherit
   the page's --ink, or the panel inverts with the page theme and the
   thing that is supposed to look like a terminal stops looking like
   one in exactly one of the two themes. */
.command-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  box-shadow: var(--shadow-lg);
}

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  box-shadow: var(--shadow-lg);
}

/* One command, and the button that copies it. */
.command-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.command-line code {
  overflow-x: auto;
  color: var(--terminal-ink);
  font-size: 13.5px;
  white-space: nowrap;
}

.command-line code::before { content: "$ "; color: var(--terminal-accent); }

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--terminal-line);
  background: var(--terminal-raised);
  color: var(--terminal-dim);
  font: 600 11px/1 var(--mono);
}

.terminal-bar i { width: 8px; height: 8px; border-radius: 50%; background: #4c443c; }
.terminal-bar i:first-child { background: var(--terminal-accent); }
.terminal-bar span { margin-left: auto; letter-spacing: 0.04em; }

.terminal-body {
  padding: 22px 20px;
  overflow-x: auto;
  font: 13px/1.7 var(--mono);
}

/* The wordmark the TUI actually draws, in half blocks. Line-height 1
   is load-bearing: the rows have to tile or the letters break apart. */
.wordmark {
  margin: 0;
  color: var(--terminal-accent);
  font: 12px/1 var(--mono);
  letter-spacing: 0;
  white-space: pre;
}

.panel-tagline {
  margin: 10px 0 0;
  color: var(--terminal-muted);
  font: 12px/1.6 var(--mono);
}

.panel-rule { height: 1px; margin: 18px 0; background: var(--terminal-line); }

/* The two-column start panel: identity on the left, what it can do
   here on the right — the shape the product prints. */
.panel-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 40px;
  font: 12.5px/1.75 var(--mono);
}

.panel-identity { margin: 0; color: var(--terminal-muted); }
.panel-identity b { display: block; color: var(--terminal-ink); font-weight: 500; }

.panel-inventory { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; margin: 0; }
.panel-inventory dt { color: var(--terminal-dim); white-space: nowrap; }
.panel-inventory dd { margin: 0; color: var(--terminal-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-inventory dt.is-error { color: var(--terminal-err); }
.panel-inventory .more { color: var(--terminal-dim); }

.panel-summary {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--terminal-line);
  color: var(--terminal-dim);
  font: 12px/1.6 var(--mono);
}

/* ── Replay: one turn, in the product's own glyphs ───────────── */

.replay-shell { position: relative; }

/* Sized to the finished transcript, so playing it does not push the
   page around underneath the reader. */
.replay-body {
  min-height: 480px;
  padding: 20px;
  overflow-x: auto;
  font: 12.5px/1.75 var(--mono);
}

.replay-step { display: none; }
.replay-step[data-shown="true"] { display: block; }
.enhanced .replay-step[data-shown="true"] { animation: step-in 260ms ease both; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* Every colour here is the one the interface uses, taken from
   packages/cli/src/tui/views.ts: a user line is cyan and marked with
   `›`; a tool name is bold *gray*, its summary gray, its clock dim;
   the completion mark is green. Painting the tool name white would be
   prettier and would make the claim above this panel false. */
.replay-line { white-space: pre-wrap; margin: 0; }
.replay-gap { height: 12px; }
.line-prompt { color: var(--terminal-cyan); }
.line-prompt::before { content: "› "; }
.line-tool { color: var(--terminal-muted); }
.line-tool .mark-ok { color: var(--terminal-ok); }
.line-tool .mark-run { color: var(--terminal-muted); }
.line-tool .tool-name { color: var(--terminal-muted); font-weight: 700; }
.line-tool .tool-time { color: var(--terminal-dim); }
.line-detail { color: var(--terminal-dim); padding-left: 2ch; }
.line-add { color: var(--terminal-ok); padding-left: 2ch; }
.line-del { color: var(--terminal-err); padding-left: 2ch; }
.line-answer { color: var(--terminal-ink); }

/* The permission request: a bordered box below the transcript, never a
   floating overlay — the same rule the TUI follows, for the same
   reason (a terminal has no z-order). */
.replay-modal {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #c9a227;
  border-radius: var(--r-md);
}

.replay-modal .modal-title { color: #e8c15a; font-weight: 700; }
.replay-modal .modal-reason { color: var(--terminal-dim); padding-left: 2ch; }

/* The highlight rides on an inner span so moving the selection never
   shifts the column — the cursor keeps its cell whether or not the row
   is the selected one, the way it does in a terminal. */
.replay-modal .modal-choice { padding-left: 2ch; color: var(--terminal-muted); }
.replay-modal .modal-choice .pick { border-radius: 2px; }
.replay-modal .modal-choice .cursor { visibility: hidden; }
.replay-modal .modal-choice[data-active="true"] .cursor { visibility: visible; }
.replay-modal .modal-choice[data-active="true"] .pick { background: var(--terminal-cyan); color: #0b0f11; }

/* Once the person has answered, the choices they did not take step back
   and the key hint stops applying. */
.replay-modal[data-answered="true"] .modal-choice:not([data-active="true"]),
.replay-modal[data-answered="true"] .modal-keys { opacity: 0.42; }

.replay-modal .modal-keys { color: var(--terminal-dim); padding-left: 2ch; margin-top: 6px; }

.replay-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--terminal-line);
  background: var(--terminal-raised);
}

.replay-button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--terminal-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--terminal-ink);
  font: 650 11.5px/1 var(--mono);
  transition: background 140ms ease;
}

.replay-button:hover { background: rgba(255, 255, 255, 0.13); }

.replay-progress { display: flex; gap: 5px; margin-left: auto; }
.replay-progress i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--terminal-line);
  transition: background 200ms ease;
}
.replay-progress i[data-done="true"] { background: var(--terminal-accent); }

.replay-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  margin-top: 34px;
}

.replay-note { padding-top: 14px; border-top: 1px solid var(--hairline-strong); }
.replay-note h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.replay-note p { margin: 0; color: var(--ink-2); font-size: 14px; }
.replay-note .tag { color: var(--accent); font: 650 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Principles ─────────────────────────────────────────────── */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* min-width: 0 on every grid child that holds a nowrap/pre block.
   Without it the track refuses to shrink below the code's min-content
   width and the whole page scrolls sideways on a phone. */
.principle {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.principle:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.principle-index { color: var(--accent); font: 650 10.5px/1 var(--mono); letter-spacing: 0.08em; }
.principle h3 { margin: 0; font-family: var(--display); font-size: 25px; line-height: 1.1; letter-spacing: -0.025em; }
.principle p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* Each card carries a real fragment of the product, so it is an
   example and not an empty box with a sentence in it. */
.principle-figure {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--terminal-bg);
  color: var(--terminal-muted);
  font: 11.5px/1.75 var(--mono);
  white-space: pre;
  overflow-x: auto;
}

.principle-figure .k { color: var(--terminal-accent); }
.principle-figure .g { color: var(--terminal-ok); }
.principle-figure .d { color: var(--terminal-dim); }

/* ── Surfaces ───────────────────────────────────────────────── */

.surfaces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.surface-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.surface-card h3 { margin: 0; font-size: 16px; font-weight: 650; }
.surface-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* Pushed to the bottom so the command bars line up across a row,
   whatever length the sentence above them turned out to be. */
.surface-card code {
  display: block;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 12.5px;
  overflow-x: auto;
  white-space: nowrap;
}

.surface-card code::before { content: "$ "; color: var(--accent); }

/* ── Honest boundary ────────────────────────────────────────── */

.honest-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 5vw, 64px);
  padding: clamp(30px, 4.5vw, 60px);
  border-radius: var(--r-lg);
  background: var(--forest);
  color: #f2f5ef;
}

/* Written as a paragraph, not a heading — the section already has its
   h2, and this is the claim that heading introduces. It still needs
   to beat the card's own paragraph rule below it. */
.honest-card .honest-claim {
  margin: 0;
  color: #ffffff;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.honest-card p { margin: 0 0 14px; color: #d7e2d6; font-size: 16.5px; }
.honest-card strong { color: #fff; }

.guard-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.guard-list li {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font: 13px/1.5 var(--mono);
  color: #e6ede4;
}

/* ── Closing + footer ───────────────────────────────────────── */

.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding-block: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--hairline);
}

.closing h2 {
  max-width: 22ch;
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.site-footer { border-top: 1px solid var(--hairline); padding: 26px 0 40px; color: var(--ink-3); font-size: 13px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.footer-grid p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* ── Documentation ──────────────────────────────────────────── */

.docs-hero { padding-block: clamp(48px, 6vw, 72px) clamp(28px, 3vw, 40px); }
.docs-hero p { max-width: 62ch; margin: 18px 0 0; color: var(--ink-2); font-size: 17px; }

.docs-install-strip {
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.docs-install-strip .command-line code { display: block; }
.mini-command p { min-height: 1.2em; margin: 8px 0 0; color: var(--terminal-dim); font: 11px/1.4 var(--mono); }

.docs-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  padding-block: 36px 88px;
  border-top: 1px solid var(--hairline);
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--header) + 20px);
  max-height: calc(100svh - var(--header) - 40px);
  overflow: auto;
  padding-right: 10px;
}

.docs-search-wrap { position: relative; margin-bottom: 16px; }
.docs-search-wrap::before { content: "⌕"; position: absolute; left: 12px; top: 9px; color: var(--ink-3); }

.docs-search {
  width: 100%;
  padding: 10px 12px 10px 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.search-count { margin: 8px 2px 0; color: var(--ink-3); font: 11px/1.4 var(--mono); }
.docs-sidebar nav { display: grid; gap: 1px; }

.docs-sidebar nav a {
  padding: 7px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.docs-sidebar nav a:hover { background: var(--surface-2); color: var(--ink); }
.docs-sidebar nav a[data-current="true"] { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.docs-sidebar .nav-group { margin: 18px 8px 6px; color: var(--ink-3); font: 650 10px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.docs-toggle { display: none; width: auto; padding: 0 13px; border-radius: 999px; font-size: 13px; }

.docs-content { min-width: 0; }

.doc-section {
  padding: 8px 0 56px;
  scroll-margin-top: calc(var(--header) + 24px);
}

.doc-section + .doc-section { padding-top: 48px; border-top: 1px solid var(--hairline); }
.doc-section h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.06; }
.doc-section h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 650; }
.doc-section p, .doc-section li { color: var(--ink-2); }
.doc-section code:not(pre code) { padding: 1px 5px; border-radius: 5px; background: var(--surface-3); color: var(--ink); font-size: 0.9em; }
.doc-section ul, .doc-section ol { padding-left: 20px; }
.doc-section li + li { margin-top: 6px; }

.doc-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  box-shadow: var(--shadow-sm);
}

.doc-command pre { margin: 0; overflow-x: auto; white-space: pre; color: var(--terminal-ink); font-size: 12.5px; line-height: 1.8; }
.doc-command .copy-status { grid-column: 1 / -1; margin: -6px 0 0; color: var(--terminal-dim); font: 11px/1.4 var(--mono); }

.copy-button {
  min-width: 72px;
  padding: 8px 12px;
  border: 1px solid var(--terminal-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--terminal-ink);
  font: 650 11px/1 var(--mono);
  transition: background 140ms ease;
}

.copy-button:hover { background: rgba(255, 255, 255, 0.15); }
.copy-button[data-copied="true"] { background: var(--terminal-ok); color: #06110b; }

.copy-status { min-height: 1.4em; margin: 8px 0 0; color: var(--terminal-dim); font: 12px/1.5 var(--mono); }

.callout {
  margin: 20px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
}

.callout strong { color: var(--ink); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout.honest { border-color: var(--forest); background: color-mix(in srgb, var(--forest) 12%, var(--surface)); }

.search-empty { padding: 60px 24px; border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); text-align: center; color: var(--ink-2); }

.clipboard-fallback { position: fixed; left: -10000px; top: 0; }

.enhanced [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.enhanced [data-reveal][data-visible="true"] { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .replay-notes { grid-template-columns: 1fr; gap: 16px; }
  .principles { grid-template-columns: 1fr; }
  .honest-card { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; gap: 18px; }
  .docs-shell { grid-template-columns: 1fr; gap: 20px; }
  .docs-toggle { display: inline-flex; align-items: center; }
  html:not(.enhanced) .docs-toggle { display: none; }
  html:not(.enhanced) .docs-sidebar { position: static; max-height: none; padding-right: 0; }
  .enhanced .docs-sidebar {
    position: fixed;
    z-index: 70;
    top: var(--header);
    left: 0;
    bottom: 0;
    width: min(320px, 88vw);
    max-height: none;
    padding: 22px;
    transform: translateX(-104%);
    border-right: 1px solid var(--hairline);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transition: transform 200ms ease;
  }
  .enhanced.docs-nav-open .docs-sidebar { transform: translateX(0); }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, var(--max)); }
  .nav-wrap { gap: 12px; }
  .brand small { display: none; }
  .enhanced .menu-button { display: grid; }
  html:not(.enhanced) .menu-button { display: none; }
  html:not(.enhanced) .nav-wrap { flex-wrap: wrap; padding-block: 10px; }
  html:not(.enhanced) .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .enhanced .site-nav {
    position: fixed;
    top: var(--header);
    left: 16px;
    right: 16px;
    display: none;
    padding: 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
  }
  .enhanced.nav-open .site-nav { display: grid; }
  .site-nav a { padding: 12px 14px; }
  .nav-controls { margin-left: auto; }
  .section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .surfaces { grid-template-columns: 1fr; }
  .guard-list { grid-template-columns: 1fr; }
  .closing { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { align-items: flex-start; flex-direction: column; gap: 14px; }
  .doc-command { grid-template-columns: 1fr; }
  .doc-command .copy-button { justify-self: start; }
  .doc-command .copy-status { grid-column: 1; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .nav-wrap { gap: 8px; }
  .nav-controls { gap: 5px; }
  .brand { gap: 7px; font-size: 19px; }
  .brand img { width: 26px; height: 26px; }
  .language-switch button { min-width: 29px; padding-inline: 6px; }
  .docs-toggle { padding-inline: 10px; font-size: 12px; }
  .icon-button { width: 34px; height: 34px; }
  .menu-button { width: 34px; height: 34px; }
  .hero h1 { font-size: clamp(36px, 11vw, 50px); }
  /* The install command has to fit beside its button on a 360px
     phone rather than scrolling under it: it is the primary action. */
  .install-inline { width: 100%; justify-content: space-between; padding-left: 14px; }
  .install-inline code, .command-line code { font-size: 12px; }
  .copy-button, .install-inline .copy-button { min-width: 58px; padding-inline: 9px; }
  .docs-install-strip { padding: 14px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .terminal-body, .replay-body { padding: 16px 14px; font-size: 11.5px; }
  .wordmark { font-size: 10px; }
  .replay-body { min-height: 400px; }
  .principle { padding: 20px; }
  .honest-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.01ms !important; }
  .enhanced [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .skip-link, .copy-button, .docs-sidebar, .docs-toggle, .replay-controls { display: none !important; }
  body { background: white; color: black; }
  .docs-shell { display: block; }
  .doc-section { break-inside: avoid; }
}