/*
 * Inline design system — documentation site
 * Paper canvas, Midnight ink, Butter Yellow marks.
 *
 * The site is set in the system it documents: flat in-flow surfaces with
 * hairline boundaries, square document planes, yellow reserved for marking
 * and selection, and no dependence on any external asset or script.
 */

/* ── Fonts ─────────────────────────────────────────────── */

@font-face {
  font-family: "Geist Inline";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono Inline";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Sora Inline";
  src: url("../fonts/Sora-Inline-750.woff2") format("woff2");
  font-style: normal;
  font-weight: 750;
  font-display: block;
}

/* ── Tokens ────────────────────────────────────────────── */

:root {
  --paper: #f6f6f3;
  --surface: #ffffff;
  --ink-950: #0c1224;
  --ink: #18213b;
  --ink-800: #26324d;
  --ink-700: #39465f;
  --ink-600: #536075;
  --ink-500: #707b8d;
  --ink-400: #929baa;
  --ink-300: #bac0cc;
  --ink-200: #d8dce3;
  --ink-100: #eceef1;
  --ink-a04: rgb(24 33 59 / 0.04);
  --ink-a08: rgb(24 33 59 / 0.08);
  --ink-a16: rgb(24 33 59 / 0.16);
  --ink-a32: rgb(24 33 59 / 0.32);
  --ink-a64: rgb(24 33 59 / 0.64);
  --brand-a52: rgb(233 203 98 / 0.52);
  --brand-strong-a64: rgb(201 168 63 / 0.64);
  --paper-a72: rgb(246 246 243 / 0.72);
  --paper-a88: rgb(246 246 243 / 0.88);
  --scrim: rgb(24 33 59 / 0.32);
  --chart-1: #3f529c;
  --chart-2: #8e7000;
  --chart-3: #008776;
  --chart-4: #90382d;
  --chart-5: #bac0cc;
  --chart-6: #90382d;
  --chart-emphasis: #e9cb62;
  --chart-neutral: #bac0cc;
  --chart-grid: #ecedea;
  --chart-axis-text: #707b8d;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-toast: 40;
  --z-backdrop: 50;
  --z-dialog: 60;
  --yellow-50: #fdfbf2;
  --yellow-100: #fbf5dc;
  --yellow-200: #f7eab4;
  --yellow-300: #f2dd8d;
  --yellow: #e9cb62;
  --yellow-600: #c9a83f;
  --yellow-700: #9d7e27;
  --yellow-800: #735a1e;
  --line: #dfe0e2;
  --line-soft: #ecedea;
  --success-100: #e9f4ee;
  --success-200: #c3e1d2;
  --success-600: #2d634b;
  --success-800: #00452e;
  --warn-100: #f7f0e7;
  --warn-200: #ead5be;
  --warn-600: #855715;
  --warn-800: #513100;
  --danger-100: #faedee;
  --danger-200: #f1cfd2;
  --danger-600: #992f45;
  --danger-800: #621d2b;
  --info-100: #e9f3fa;
  --info-200: #c3ddf0;
  --info-600: #345b76;
  --info-800: #063d5c;
  --feedback-argument: #515197;
  --feedback-evidence: #735900;
  --feedback-reasoning: #2f5a8f;
  --feedback-clarity: #016770;
  --feedback-strength: #416a33;
  --brainstorm-understand: #9b3f38;
  --brainstorm-explore: #704776;
  --brainstorm-focus: #955015;
  --brainstorm-gather: #4f5873;
  --brainstorm-connect: #2c6663;
  --brainstorm-challenge: #873e63;
  --brainstorm-next-step: #536931;

  --inline-space-0_5: 2px;
  --inline-space-1: 4px;
  --inline-space-1_5: 6px;
  --inline-space-2: 8px;
  --inline-space-3: 12px;
  --inline-space-4: 16px;
  --inline-space-5: 20px;
  --inline-space-6: 24px;
  --inline-space-8: 32px;
  --inline-space-10: 40px;
  --inline-space-12: 48px;
  --inline-space-16: 64px;
  --inline-space-20: 80px;
  --inline-space-24: 96px;
  --inline-space-32: 128px;
  --inline-space-40: 160px;

  --inline-space-inline-xs: var(--inline-space-1);
  --inline-space-inline-sm: var(--inline-space-2);
  --inline-space-inline-md: var(--inline-space-3);
  --inline-space-stack-xs: var(--inline-space-2);
  --inline-space-stack-sm: var(--inline-space-3);
  --inline-space-stack-md: var(--inline-space-4);
  --inline-space-stack-lg: var(--inline-space-6);
  --inline-space-inset-sm: var(--inline-space-4);
  --inline-space-inset-md: var(--inline-space-6);
  --inline-space-inset-lg: var(--inline-space-8);
  --inline-space-page-gutter-mobile: var(--inline-space-4);
  --inline-space-page-gutter-desktop: var(--inline-space-6);
  --inline-space-workspace-gap: var(--inline-space-6);

  --inline-control-height-sm: 32px;
  --inline-control-height-md: 40px;
  --inline-control-height-lg: 44px;
  --inline-control-target-min: 44px;
  --inline-toolbar-height-compact: 48px;
  --inline-toolbar-height-app: 64px;

  --inline-icon-size-xs: 12px;
  --inline-icon-size-sm: 16px;
  --inline-icon-size-md: 20px;
  --inline-icon-size-lg: 24px;
  --inline-avatar-size-xs: 16px;
  --inline-avatar-size-sm: 24px;
  --inline-avatar-size-md: 32px;
  --inline-avatar-size-lg: 40px;
  --inline-avatar-size-xl: 64px;
  --inline-chip-height-sm: 24px;

  --inline-workspace-min-height: 460px;
  --inline-workspace-question-rail-min: 320px;
  --inline-workspace-question-rail-max: 400px;
  --inline-workspace-draft-fr: 2fr;
  --inline-workspace-question-rail-fr: 1fr;

  --sans: "Geist Inline", Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono Inline", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --logo-font: "Sora Inline", Sora, sans-serif;

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-none: none;
  --shadow-raised: 0 1px 2px 0 rgb(24 33 59 / 0.06);
  --shadow-overlay:
    0 8px 24px -4px rgb(24 33 59 / 0.12),
    0 2px 6px 0 rgb(24 33 59 / 0.06);
  --shadow-dialog:
    0 24px 64px -12px rgb(12 18 36 / 0.18),
    0 6px 18px -4px rgb(12 18 36 / 0.08);

  --sidebar-w: 272px;
  --toc-w: 208px;
  --content-max: 832px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-xs: 80ms;
  --dur-sm: 160ms;
  --dur-md: 240ms;
  --dur-lg: 480ms;
  --dur-xl: 720ms;
}

/* ── Base ──────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: inherit;
  background: rgb(233 203 98 / 0.52);
  text-shadow: none;
}

mark {
  color: inherit;
  background: var(--yellow-100);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark::selection {
  background: rgb(201 168 63 / 0.64);
}

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

code {
  font-family: var(--mono);
  font-size: 0.8125em;
  background: var(--ink-100);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--yellow-700);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 60;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: top var(--dur-sm) var(--ease-out);
}

.skip-link:focus {
  top: 12px;
}

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

/* ── Type roles (specimens + site text) ────────────────── */

.role-display-xl { font-size: clamp(2.625rem, 1.95rem + 3vw, 4rem); line-height: 1.047; font-weight: 600; letter-spacing: -0.03em; }
.role-display-lg { font-size: clamp(2.375rem, 1.94rem + 1.95vw, 3.25rem); line-height: 1.077; font-weight: 600; letter-spacing: -0.025em; }
.role-display { font-size: clamp(2.125rem, 1.94rem + 0.83vw, 2.5rem); line-height: 1.125; font-weight: 600; letter-spacing: -0.02em; }
.role-h1 { font-size: 2rem; line-height: 1.188; font-weight: 600; letter-spacing: -0.02em; }
.role-h2 { font-size: 1.625rem; line-height: 1.269; font-weight: 600; letter-spacing: -0.015em; }
.role-h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.role-h4 { font-size: 1.0625rem; line-height: 1.412; font-weight: 500; }
.role-body-lg { font-size: 1.125rem; line-height: 1.667; font-weight: 400; }
.role-prose { font-size: 1.0625rem; line-height: 1.765; font-weight: 400; }
.role-body-md { font-size: 0.9375rem; line-height: 1.6; font-weight: 400; }
.role-body-sm { font-size: 0.8125rem; line-height: 1.538; font-weight: 400; }
.role-label { font-size: 0.8125rem; line-height: 1.231; font-weight: 500; }
.role-caption { font-size: 0.75rem; line-height: 1.417; font-weight: 400; }
.role-overline { font-size: 0.6875rem; line-height: 1.273; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.role-code { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.538; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── Brand lockup ──────────────────────────────────────── */
/* Ratios come from logo/logo.css: marker 0.4812×, gap 0.385×,
   optical lift 0.0241× of the wordmark size. */

.brand-lockup {
  --lockup-size: 22px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lockup-size) * 0.385);
  text-decoration: none;
  color: var(--ink);
}

.brand-marker {
  width: calc(var(--lockup-size) * 0.4812);
  height: calc(var(--lockup-size) * 0.4812);
  background: var(--yellow);
  flex: none;
  transform: translateY(calc(var(--lockup-size) * -0.0241));
}

.brand-wordmark {
  font-family: var(--logo-font);
  font-weight: 750;
  font-size: var(--lockup-size);
  letter-spacing: -0.055em;
  line-height: 0.818;
}

.brand-suffix {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-500);
  padding-left: calc(var(--lockup-size) * 0.385);
  border-left: 1px solid var(--line);
}

/* ── Sidebar ───────────────────────────────────────────── */

.docs-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.sidebar-brand {
  padding: 24px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 32px;
}

.nav-group {
  margin-top: 24px;
}

.nav-group-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0 12px;
  margin-bottom: 8px;
}

.side-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ink-700);
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}

.side-nav a:hover {
  background: var(--ink-a04);
  color: var(--ink);
}

.side-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

.side-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--yellow);
  transform: scaleY(0);
  opacity: 0;
  transition: transform var(--dur-sm) var(--ease-out), opacity var(--dur-sm) var(--ease-out);
}

.side-nav a[aria-current="page"]::before {
  transform: scaleY(1);
  opacity: 1;
}

/* ── Mobile top bar ────────────────────────────────────── */

.mobile-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 45;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

body.is-locked {
  overflow: hidden;
}

/* ── Layout ────────────────────────────────────────────── */

.docs-stage {
  margin-left: var(--sidebar-w);
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 0 40px;
}

.docs-main {
  width: 100%;
  max-width: var(--content-max);
  min-width: 0;
  padding: 64px 0 40px;
  counter-reset: doc-section;
}

/* On this page */

.page-toc {
  width: var(--toc-w);
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 72px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-toc-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 12px;
}

.page-toc a {
  position: relative;
  font-size: 0.8125rem;
  color: var(--ink-600);
  text-decoration: none;
  padding: 5px 0 5px 16px;
  border-left: 1px solid var(--line-soft);
  transition: color var(--dur-sm) var(--ease-out);
}

.page-toc a:hover {
  color: var(--ink);
}

.page-toc a.is-active {
  color: var(--ink);
  font-weight: 500;
}

.page-toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--yellow);
  transform: scaleY(0);
  opacity: 0;
  transition: transform var(--dur-sm) var(--ease-out), opacity var(--dur-sm) var(--ease-out);
}

.page-toc a.is-active::before {
  transform: scaleY(1);
  opacity: 1;
}

/* ── Page intro ────────────────────────────────────────── */

.page-intro {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--yellow);
}

.page-intro h1 {
  margin: 0 0 16px;
  font-size: clamp(2.125rem, 1.94rem + 0.83vw, 2.5rem);
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.page-intro .lede {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.667;
  color: var(--ink-600);
  max-width: 58ch;
}

/* One-time entrance for the intro only. Content is never hidden behind
   scripts or scroll position; reduced motion collapses this to a plain page. */

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-intro > * {
  animation: intro-rise var(--dur-lg) var(--ease-out) backwards;
}

.page-intro > :nth-child(2) {
  animation-delay: 60ms;
}

.page-intro > :nth-child(3) {
  animation-delay: 120ms;
}

/* ── Sections ──────────────────────────────────────────── */

.doc-section {
  margin-bottom: 96px;
}

.doc-section:last-of-type {
  margin-bottom: 48px;
}

.section-heading {
  position: relative;
  margin-bottom: 40px;
}

.section-heading h2 {
  margin: 0 0 12px;
  font-size: 1.625rem;
  line-height: 1.269;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.doc-section .section-heading h2::before {
  counter-increment: doc-section;
  content: counter(doc-section, decimal-leading-zero);
  position: absolute;
  left: -56px;
  top: 8px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.section-heading p {
  margin: 0;
  color: var(--ink-600);
  max-width: 62ch;
}

.doc-section h3 {
  font-size: 1.0625rem;
  line-height: 1.412;
  font-weight: 500;
  margin: 40px 0 16px;
}

.doc-copy {
  color: var(--ink-600);
  max-width: 66ch;
}

/* ── Grids, panels, specimens ──────────────────────────── */

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

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

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Structural specimen plane: square, hairline, document-like. */

.specimen {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.specimen-stage {
  padding: 48px 40px;
  min-height: 180px;
  display: grid;
  place-items: center;
}

.specimen-stage.is-paper {
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.specimen-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  color: var(--ink-500);
}

.specimen-caption strong {
  font-weight: 500;
  color: var(--ink-700);
  margin-right: 8px;
}

.specimen-caption code {
  background: none;
  padding: 0;
  color: var(--ink-500);
  white-space: nowrap;
}

/* Schematic manuscript lines used across diagrams. */

.manuscript-lines {
  display: flex;
  flex-direction: column;
  gap: var(--inline-space-stack-sm);
}

.manuscript-lines i {
  display: block;
  width: 100%;
  height: 6px;
  background: var(--ink-100);
}

.manuscript-lines i:nth-child(2n) {
  width: 88%;
}

.manuscript-lines i:nth-child(3n) {
  width: 72%;
}

.manuscript-lines i:nth-child(5n) {
  width: 94%;
}

.manuscript-lines i.is-highlight {
  background: var(--yellow-200);
  box-shadow: inset 0 -2px 0 var(--yellow-700);
}

/* ── Tables ────────────────────────────────────────────── */

.doc-table-wrap {
  border: 1px solid var(--line);
  overflow-x: auto;
  background: var(--surface);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.doc-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-500);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  white-space: nowrap;
}

.doc-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-700);
}

.doc-table tr:last-child td {
  border-bottom: 0;
}

.doc-table td {
  transition: background var(--dur-xs) var(--ease-out);
}

.doc-table tbody tr:hover td {
  background: var(--paper);
}

.doc-table .cell-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-xs);
  border: 1px solid rgb(24 33 59 / 0.12);
  vertical-align: -2px;
  margin-right: 8px;
}

/* ── Do / don't ────────────────────────────────────────── */

.do-dont {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
}

@supports (grid-template-rows: subgrid) {
  .do-dont > .guidance-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }

  .do-dont > .guidance-card > .guidance-note {
    margin-top: 0;
  }
}

.guidance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.guidance-example {
  flex: 1;
  padding: 36px 28px;
  min-height: 128px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-700);
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}

.guidance-note {
  position: relative;
  padding: 14px 18px 14px 36px;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
  margin-top: auto;
}

.guidance-note::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success-600);
}

.guidance-card.is-dont .guidance-note::before {
  background: var(--danger-600);
}

.guidance-note strong {
  font-weight: 500;
  color: var(--ink);
}

/* ── Callout — quiet left-accent note ──────────────────── */

.callout {
  border-left: 2px solid var(--yellow-600);
  background: var(--yellow-50);
  padding: 16px 22px;
  margin-top: 24px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.callout strong {
  font-weight: 500;
  color: var(--ink);
}

.callout p {
  margin: 4px 0 0;
}

/* ── Code blocks ───────────────────────────────────────── */

.code-block {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
}

.code-block .copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgb(246 246 243 / 0.1);
  color: var(--paper);
  border: 0;
}

.code-block .copy-button:hover {
  background: rgb(246 246 243 / 0.2);
}

.copy-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-600);
  background: var(--ink-100);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out);
}

.copy-button:hover {
  background: var(--ink-200);
}

@keyframes copy-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-copy] svg {
  animation: copy-pop var(--dur-sm) var(--ease-out);
}

/* ── Buttons and links (site chrome) ───────────────────── */

.button,
.button-secondary {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--inline-control-height-md);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-out), border-color var(--dur-sm) var(--ease-out);
}

.button {
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
}

.button:hover {
  background: var(--ink-800);
}

.button:active,
.button-secondary:active {
  transform: translateY(1px);
  transition-duration: 80ms;
}

.button-secondary {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-300);
}

.button-secondary:hover {
  border-color: var(--ink-500);
}

.text-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-sm) var(--ease-out);
}

.text-link:hover {
  text-decoration-color: var(--yellow-600);
}

/* ── Footer ────────────────────────────────────────────── */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 24px 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--ink-500);
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-weight: 500;
}

.site-footer .footer-brand::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--yellow);
}

.site-footer .footer-meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

/* ── Home page ─────────────────────────────────────────── */

.home-page {
  background: var(--paper);
}

.home-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 32px 0;
}

.home-bar-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.875rem;
}

.home-bar-links a {
  color: var(--ink-600);
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease-out);
}

.home-bar-links a:hover {
  color: var(--ink);
}

.home-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px 48px;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding: 96px 0;
}

.home-hero-copy {
  min-width: 0;
}

.home-hero-copy > * {
  animation: intro-rise var(--dur-lg) var(--ease-out) backwards;
}

.home-hero-copy > :nth-child(2) {
  animation-delay: 60ms;
}

.home-hero-copy > :nth-child(3) {
  animation-delay: 120ms;
}

.home-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.375rem, 1.94rem + 1.95vw, 3.25rem);
  line-height: 1.077;
  letter-spacing: -0.025em;
  font-weight: 600;
  max-width: 16ch;
}

.home-hero .lede {
  margin: 0 0 36px;
  font-size: 1.125rem;
  line-height: 1.667;
  color: var(--ink-600);
  max-width: 46ch;
}

.home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero vignette — the review workspace, flat as the product ships it. */

.hero-vignette {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--inline-space-workspace-gap);
  align-items: start;
  min-width: 0;
  animation: intro-rise var(--dur-lg) var(--ease-out) 180ms backwards;
}

.vignette-draft {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.vignette-draft::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--surface));
}

.vignette-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
  margin-bottom: 16px;
}

.vignette-draft p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.765;
  color: var(--ink-800);
}

.vignette-draft p + p {
  margin-top: 12px;
}

.vignette-margin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.workspace-rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-500);
}

.home-section {
  margin-bottom: 96px;
}

.home-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.home-section-heading h2 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.269;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.home-section-heading span {
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-md) var(--ease-out);
}

.feature-card:hover {
  border-color: var(--ink-400);
}

.feature-visual {
  height: 216px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.feature-body {
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feature-body h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-600);
}

.feature-cards.is-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-cards.is-six .feature-visual {
  height: 148px;
}

/* Home visual compositions */

.viz-color {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.viz-color span {
  width: 52px;
  display: block;
}

.viz-type {
  text-align: center;
}

.viz-type .viz-aa {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.viz-type .viz-sample {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.viz-space {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.viz-space span {
  display: block;
  height: 10px;
  background: var(--yellow);
}

.viz-size {
  display: flex;
  align-items: flex-end;
  gap: var(--inline-space-2);
}

.viz-size span {
  width: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-300);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-600);
}

.viz-size span:nth-child(1) { height: var(--inline-control-height-sm); }
.viz-size span:nth-child(2) { height: var(--inline-control-height-md); }
.viz-size span:nth-child(3) { height: var(--inline-control-height-lg); }

.viz-radius > span,
.viz-radius > span > span,
.viz-radius > span > span > span {
  display: grid;
  place-items: center;
}

.viz-radius > span {
  width: 112px;
  height: 80px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.viz-radius > span > span {
  width: 76px;
  height: 52px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.viz-radius > span > span > span {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--ink);
}

.viz-radius > span > span > span::after {
  content: "";
  width: var(--inline-space-2);
  height: var(--inline-space-2);
  border-radius: var(--radius-none);
  background: var(--yellow);
}

.viz-elevation {
  position: relative;
  width: 124px;
  height: 88px;
}

.viz-elevation span {
  position: absolute;
  display: block;
  width: 76px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.viz-elevation span:nth-child(1) {
  left: 0;
  bottom: 0;
}

.viz-elevation span:nth-child(2) {
  left: 24px;
  bottom: 18px;
  box-shadow: var(--shadow-raised);
}

.viz-elevation span:nth-child(3) {
  left: 48px;
  bottom: 36px;
  box-shadow: var(--shadow-overlay);
}

.viz-logo img {
  width: 150px;
}

.viz-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.viz-tools code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.75rem;
  color: var(--ink-600);
}

/* ── System index (home) ───────────────────────────────── */

.system-index {
  columns: 4;
  column-gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.system-index h3 {
  break-after: avoid;
}

.system-index a {
  break-inside: avoid;
}

.system-index h3 {
  margin: 20px 0 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.system-index h3:first-child {
  margin-top: 0;
}

.system-index a {
  display: block;
  padding: 6px 0;
  font-size: 0.875rem;
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur-sm) var(--ease-out);
}

.system-index a:hover {
  color: var(--ink);
}

/* ── Asset list ────────────────────────────────────────── */

.asset-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.asset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 15px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-sm) var(--ease-out);
}

.asset-card:hover {
  border-color: var(--ink-400);
}

.asset-card strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

.asset-card span.asset-path {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.asset-card .asset-kind {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}

/* ── Color page ────────────────────────────────────────── */

.anchor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.anchor-tile {
  min-height: 176px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
}

.anchor-tile.is-outlined {
  border: 1px solid var(--line);
}

.anchor-tile strong {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.anchor-tile span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  opacity: 0.8;
}

.anchor-tile em {
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.417;
  min-height: 2.834em;
  opacity: 0.7;
  margin-top: 5px;
}

/* Tonal ramps */

.ramp {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
}

.ramp-step {
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  background: var(--step);
  color: var(--step-text, var(--ink));
  min-height: 96px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.ramp-step {
  transition: box-shadow var(--dur-sm) var(--ease-out);
}

.ramp-step:hover {
  box-shadow: inset 0 0 0 2px rgb(24 33 59 / 0.16);
}

.ramp-step:focus-visible {
  outline-offset: -3px;
  outline-color: currentColor;
}

.ramp-step .step-name {
  font-size: 0.75rem;
  font-weight: 500;
}

.ramp-step .step-hex {
  font-family: var(--mono);
  font-size: 0.625rem;
  opacity: 0.75;
  letter-spacing: 0.01em;
}

.ramp-legend {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--ink-500);
}

.demo-active-mark {
  background: var(--yellow-200);
  box-shadow: inset 0 -2px 0 var(--yellow-700);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Feedback card demo — mirrors the shipped margin card */

.fb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-none);
  padding: 16px;
  text-align: left;
  transition: border-color var(--dur-sm) var(--ease-out), opacity var(--dur-sm) var(--ease-out);
}

.fb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.fb-type {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fb-ordinal {
  font-family: var(--mono);
  font-size: 0.625rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.fb-card p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-700);
}

.fb-card.is-compact {
  padding: 12px 16px;
}

.question-showcase {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
  padding-block: 32px;
  border-block: 1px solid var(--line);
}

.question-featured {
  width: 100%;
}

.fb-card.is-featured {
  width: 100%;
  max-width: 340px;
  padding: 16px 20px;
}

.fb-card.is-featured .fb-head {
  margin-bottom: 8px;
}

.fb-card.is-featured p {
  font-size: 15px;
  line-height: 24px;
}

.question-taxonomies {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.question-taxonomy-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.question-taxonomy-header h3 {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
}

.question-taxonomy-count {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  color: var(--ink-500);
}

.question-taxonomy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 8px;
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.question-taxonomy-name {
  min-width: 0;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}

.feedback-argument { color: var(--feedback-argument); }
.feedback-evidence { color: var(--feedback-evidence); }
.feedback-reasoning { color: var(--feedback-reasoning); }
.feedback-clarity { color: var(--feedback-clarity); }
.feedback-strength { color: var(--feedback-strength); }
.brainstorm-understand { color: var(--brainstorm-understand); }
.brainstorm-explore { color: var(--brainstorm-explore); }
.brainstorm-focus { color: var(--brainstorm-focus); }
.brainstorm-gather { color: var(--brainstorm-gather); }
.brainstorm-connect { color: var(--brainstorm-connect); }
.brainstorm-challenge { color: var(--brainstorm-challenge); }
.brainstorm-next-step { color: var(--brainstorm-next-step); }

/* Status — indicators + family ramps */

.status-demo {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--ink-700);
  line-height: 1.4;
}

.status-indicator .status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: none;
}

.status-indicator .status-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-width: 4.5rem;
}

.status-families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.status-family {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.status-family-head {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 58px;
}

.status-family-head strong {
  font-size: 0.875rem;
  font-weight: 500;
}

.status-family-head span {
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.status-family-ramp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 56px;
  margin-top: auto;
}

.status-family-ramp span {
  display: block;
}

.status-family-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 6px 12px;
  gap: 2px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  color: var(--ink-500);
  text-align: center;
}

/* ── Typography page ───────────────────────────────────── */

.family-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.family-sample {
  font-size: 3.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 10px 0 14px;
}

.family-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--ink-500);
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.type-scale-list {
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.type-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 168px;
  gap: 24px;
  align-items: baseline;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}

.type-row:last-child {
  border-bottom: 0;
}

.type-role {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-500);
}

.type-sample {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-metrics {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.type-playground {
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.playground-controls {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}

.playground-controls input[type="text"] {
  flex: 1;
  min-width: 0;
  height: var(--inline-control-height-md);
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 0 14px;
}

.playground-controls select {
  height: var(--inline-control-height-md);
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: 0 12px;
}

.playground-output {
  padding: 44px 40px;
  min-height: 200px;
  display: grid;
  align-items: center;
  overflow-wrap: break-word;
}

.workspace-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}

.workspace-draft {
  background: var(--surface);
  padding: 36px 38px;
  border-right: 1px solid var(--line-soft);
}

.workspace-margin {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.workspace-count {
  color: var(--ink-500);
  padding-left: 4px;
}

.role-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.role-map > div {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.role-map strong {
  font-size: 0.8125rem;
  font-weight: 500;
}

.role-map span {
  font-size: 0.6875rem;
  font-family: var(--mono);
  color: var(--ink-500);
}

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--line);
}

.rule-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.rule-list strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ── Numbered rule lists (shared by four pages) ────────── */

.spacing-rule-list,
.sizing-rule-list,
.radius-rule-list,
.elevation-rule-list,
.numbered-rules {
  list-style: none;
  counter-reset: spacing-rule;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.spacing-rule-list li,
.sizing-rule-list li,
.radius-rule-list li,
.elevation-rule-list li,
.numbered-rules li {
  counter-increment: spacing-rule;
  display: grid;
  grid-template-columns: var(--inline-space-8) minmax(0, 1fr);
  gap: var(--inline-space-inline-md);
  padding: var(--inline-space-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-600);
}

.spacing-rule-copy,
.sizing-rule-copy,
.radius-rule-copy,
.elevation-rule-copy,
.numbered-rule-copy {
  min-width: 0;
}

.spacing-rule-list li::before,
.sizing-rule-list li::before,
.radius-rule-list li::before,
.elevation-rule-list li::before,
.numbered-rules li::before {
  content: counter(spacing-rule, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.545;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.spacing-rule-list strong,
.sizing-rule-list strong,
.radius-rule-list strong,
.elevation-rule-list strong,
.numbered-rules strong {
  display: inline;
  color: var(--ink);
  font-weight: 500;
}

/* ── Spacing page ──────────────────────────────────────── */

.space-scale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--inline-space-4);
}

.space-scale-group {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

body[data-page="spacing"] .space-scale-group h3 {
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.space-row {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  background: var(--surface);
  font: inherit;
  text-align: left;
  width: 100%;
  min-height: var(--inline-control-target-min);
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--inline-space-24) var(--inline-space-12) minmax(0, 1fr);
  align-items: center;
  gap: var(--inline-space-3);
  padding: var(--inline-space-2) var(--inline-space-6);
}

.space-row:last-child {
  border-bottom: 0;
}

.space-row {
  transition: background var(--dur-xs) var(--ease-out);
}

.space-row:hover {
  background: var(--paper);
}

.space-row .space-token {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-600);
}

.space-row .space-px {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.space-row .space-bar {
  display: block;
  height: var(--inline-space-3);
  background: var(--yellow);
  max-width: 100%;
}

.anno {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.545;
  color: var(--ink-500);
}

.space-alias-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.alias-group {
  min-width: 0;
  padding: var(--inline-space-6);
}

.alias-group:nth-child(even) {
  border-left: 1px solid var(--line);
}

.alias-group:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

body[data-page="spacing"] .alias-group h3 {
  margin: 0 0 var(--inline-space-4);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.alias-list {
  margin: 0;
}

.alias-list > div {
  padding: var(--inline-space-3) 0;
  border-top: 1px solid var(--line-soft);
}

.alias-list dt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--inline-space-inline-sm);
}

.alias-list dt code {
  padding: 0;
  background: none;
  color: var(--ink-700);
}

.alias-list dt span {
  flex: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.alias-list dd {
  margin: var(--inline-space-1) 0 0;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.control-contract {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.control-specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-specimen {
  min-width: 0;
  padding: var(--inline-space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--inline-space-stack-sm);
}

.control-specimen + .control-specimen {
  border-left: 1px solid var(--line-soft);
}

.control-target {
  position: relative;
  display: inline-flex;
  min-width: var(--inline-control-target-min);
  min-height: var(--inline-control-target-min);
  align-items: center;
  justify-content: center;
}

.control-target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--inline-control-target-min));
  height: max(100%, var(--inline-control-target-min));
  transform: translate(-50%, -50%);
  border: 1px solid var(--ink-300);
  pointer-events: none;
}

.control-shape {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--inline-space-inset-sm);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-700);
}

.control-shape.is-sm {
  height: var(--inline-control-height-sm);
  padding-right: var(--inline-space-3);
  padding-left: var(--inline-space-3);
}

.control-shape.is-md {
  height: var(--inline-control-height-md);
  padding-right: var(--inline-space-4);
  padding-left: var(--inline-space-4);
}

.control-shape.is-lg {
  height: var(--inline-control-height-lg);
  padding-right: var(--inline-space-5);
  padding-left: var(--inline-space-5);
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.control-note {
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-600);
  font-size: 0.8125rem;
  line-height: 1.538;
}

.control-note strong {
  color: var(--ink);
  font-weight: 500;
}

.spacing-table-wrap {
  margin-top: var(--inline-space-6);
}

.spacing-table {
  min-width: 0;
}

.spacing-table th,
.spacing-table td {
  padding: var(--inline-space-3) var(--inline-space-4);
}

.contract-caption,
.container-note {
  margin: var(--inline-space-3) 0 0;
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-500);
}

.workflow-contract {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.diagram-note,
.workflow-note {
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-500);
}

.diagram-note {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
}

.workflow-note {
  border-top: 1px solid var(--line);
}

.workflow-note strong {
  color: var(--ink-700);
  font-weight: 500;
}

.workflow-scene {
  padding: var(--inline-space-6);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.workflow-scene + .workflow-scene {
  border-top: 1px solid var(--line);
}

.workflow-scene > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--inline-space-inline-md);
  margin-bottom: var(--inline-space-6);
}

.workflow-scene > header strong {
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.compose-diagram,
.review-diagram,
.mobile-flow-diagram {
  border: 1px solid var(--line);
  background: var(--paper);
}

.app-nav-block {
  height: var(--inline-space-16);
  padding: 0 var(--inline-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--inline-space-inline-sm);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-700);
}

.app-nav-block span,
.progress-block span,
.question-rail span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.545;
  color: var(--ink-500);
}

.compose-body {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: var(--inline-space-40);
}

.progress-block,
.question-rail,
.mobile-step,
.mobile-actions,
.mobile-questions {
  padding: var(--inline-space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--inline-space-stack-sm);
  color: var(--ink-600);
  font-size: 0.75rem;
  line-height: 1.417;
}

.progress-block {
  border-right: 1px solid var(--line);
}

.editor-block,
.review-draft,
.mobile-draft {
  position: relative;
  min-width: 0;
  padding: var(--inline-space-6);
  background: var(--surface);
}

.editor-block {
  padding-bottom: var(--inline-space-20);
}

.diagram-label {
  display: block;
  margin-bottom: var(--inline-space-6);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.retained-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--inline-toolbar-height-compact);
  padding: 0 var(--inline-space-6);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.review-diagram {
  display: grid;
  grid-template-columns: minmax(0, var(--inline-workspace-draft-fr)) minmax(0, var(--inline-workspace-question-rail-fr));
  column-gap: var(--inline-space-workspace-gap);
  min-height: 320px;
  padding: var(--inline-space-4);
}

.review-draft {
  border: 1px solid var(--line);
}

.question-rail {
  border: 1px solid var(--line);
  background: var(--surface);
}

.mobile-flow-diagram {
  width: min(100%, 400px);
}

.mobile-step,
.mobile-actions,
.mobile-questions {
  min-height: var(--inline-control-target-min);
  justify-content: center;
}

.mobile-step,
.mobile-draft,
.mobile-actions {
  border-bottom: 1px solid var(--line);
}

.mobile-draft {
  min-height: var(--inline-space-32);
}

.rhythm-contract {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.rhythm-column {
  min-width: 0;
  padding: var(--inline-space-6);
}

.rhythm-column + .rhythm-column {
  border-left: 1px solid var(--line);
}

body[data-page="spacing"] .rhythm-column h3 {
  margin: 0 0 var(--inline-space-6);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.hierarchy-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hierarchy-demo p {
  margin: 0;
  color: var(--ink-600);
}

.hierarchy-space {
  position: relative;
  display: block;
  width: 100%;
  border-left: var(--inline-space-0_5) solid var(--yellow);
}

.hierarchy-space.is-8 { height: var(--inline-space-2); }
.hierarchy-space.is-16 { height: var(--inline-space-4); }
.hierarchy-space.is-48 { height: var(--inline-space-12); }

.hierarchy-space b {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.545;
  font-weight: 400;
  color: var(--ink-500);
}

.content-rule {
  width: 100%;
  padding: var(--inline-space-4);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.scroll-list {
  margin: 0;
}

.scroll-list > div {
  padding: var(--inline-space-4) 0;
  border-top: 1px solid var(--line-soft);
}

.scroll-list dt {
  margin-bottom: var(--inline-space-1);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.scroll-list dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.prose-rhythm-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-500);
}

/* ── Sizing and density page ───────────────────────────── */

.size-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.size-family {
  min-width: 0;
  padding: var(--inline-space-6);
}

.size-family + .size-family {
  border-left: 1px solid var(--line);
}

.size-family h3 {
  margin: 0 0 var(--inline-space-6);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.icon-size-scale,
.avatar-size-scale {
  min-height: var(--inline-avatar-size-xl);
  display: flex;
  align-items: flex-end;
  gap: var(--inline-space-4);
}

.size-sample {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--inline-space-2);
}

.size-sample code {
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.icon-box {
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-300);
  color: var(--ink-600);
}

.icon-box svg {
  width: 70%;
  height: 70%;
}

.icon-box.is-xs { width: var(--inline-icon-size-xs); height: var(--inline-icon-size-xs); }
.icon-box.is-sm { width: var(--inline-icon-size-sm); height: var(--inline-icon-size-sm); }
.icon-box.is-md { width: var(--inline-icon-size-md); height: var(--inline-icon-size-md); }
.icon-box.is-lg { width: var(--inline-icon-size-lg); height: var(--inline-icon-size-lg); }

.avatar-sample {
  display: block;
  border-radius: var(--radius-full);
}

.avatar-sample.is-xs { width: var(--inline-avatar-size-xs); height: var(--inline-avatar-size-xs); }
.avatar-sample.is-sm { width: var(--inline-avatar-size-sm); height: var(--inline-avatar-size-sm); }
.avatar-sample.is-md { width: var(--inline-avatar-size-md); height: var(--inline-avatar-size-md); }
.avatar-sample.is-lg { width: var(--inline-avatar-size-lg); height: var(--inline-avatar-size-lg); }
.avatar-sample.is-xl { width: var(--inline-avatar-size-xl); height: var(--inline-avatar-size-xl); }

.workspace-sizing-contract {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.workspace-size-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.workspace-size-summary > div {
  min-width: 0;
  padding: var(--inline-space-4);
}

.workspace-size-summary > div + div {
  border-left: 1px solid var(--line-soft);
}

.workspace-size-summary strong,
.workspace-size-summary span {
  display: block;
}

.workspace-size-summary strong {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.workspace-size-summary span {
  margin-top: var(--inline-space-1);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-500);
}

.workspace-size-viewport {
  padding: var(--inline-space-6);
  overflow-x: auto;
  background: var(--paper);
}

.workspace-size-stage {
  min-width: 760px;
  height: 360px;
  display: grid;
  grid-template-columns: minmax(0, var(--inline-workspace-draft-fr)) minmax(220px, var(--inline-workspace-question-rail-fr));
  gap: var(--inline-space-workspace-gap);
}

.workspace-size-draft,
.workspace-size-rail {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.workspace-size-draft {
  padding: var(--inline-space-6);
}

.workspace-size-rail {
  padding: var(--inline-space-4);
}

.workspace-size-stage .diagram-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--inline-space-inline-md);
}

.workspace-size-stage .diagram-label code {
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.workspace-rail-card {
  height: 72px;
  margin-top: var(--inline-space-3);
  padding: var(--inline-space-3);
  border: 1px solid var(--line-soft);
  color: var(--ink-500);
  font-size: 0.75rem;
  line-height: 1.417;
}

.workspace-size-note {
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.workspace-size-note code {
  white-space: normal;
}

/* ── Border radius page ────────────────────────────────── */

.corner-progression {
  padding: var(--inline-space-6);
  border: 1px solid var(--line);
  background: var(--paper);
}

.corner-plane {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.corner-plane.is-lg {
  padding: var(--inline-space-8);
  border-radius: var(--radius-lg);
}

.corner-plane.is-md {
  padding: var(--inline-space-6);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.corner-value {
  display: block;
  margin-bottom: var(--inline-space-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.corner-manuscript {
  padding: var(--inline-space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-none);
  background: var(--surface);
}

.corner-manuscript-head {
  display: flex;
  align-items: center;
  gap: var(--inline-space-inline-sm);
  margin-bottom: var(--inline-space-6);
  font-size: 0.75rem;
  color: var(--ink-600);
}

.corner-marker {
  width: var(--inline-space-3);
  height: var(--inline-space-3);
  flex: none;
  border-radius: var(--radius-none);
  background: var(--yellow);
}

.corner-control {
  min-height: var(--inline-control-height-md);
  margin-top: var(--inline-space-6);
  padding: 0 var(--inline-space-4);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.radius-scale {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.radius-token {
  min-width: 0;
  padding: var(--inline-space-4);
}

.radius-token + .radius-token {
  border-left: 1px solid var(--line-soft);
}

.radius-swatch {
  width: var(--inline-space-16);
  height: var(--inline-space-16);
  display: block;
  margin-bottom: var(--inline-space-4);
  border: 1px solid var(--ink-300);
  background: var(--paper);
}

.radius-swatch.is-none { border-radius: var(--radius-none); }
.radius-swatch.is-xs { border-radius: var(--radius-xs); }
.radius-swatch.is-sm { border-radius: var(--radius-sm); }
.radius-swatch.is-md { border-radius: var(--radius-md); }
.radius-swatch.is-lg { border-radius: var(--radius-lg); }
.radius-swatch.is-full { border-radius: var(--radius-full); }

.radius-token strong,
.radius-token code,
.radius-token p {
  display: block;
}

.radius-token strong {
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.radius-token code {
  margin-top: var(--inline-space-1);
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.radius-token p {
  margin: var(--inline-space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.radius-nesting {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}

.radius-nesting-demo {
  padding: var(--inline-space-6);
  border-right: 1px solid var(--line);
  background: var(--paper);
}

.nesting-label {
  display: block;
  margin-bottom: var(--inline-space-4);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.nesting-card {
  padding: var(--inline-space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.nesting-field {
  min-height: var(--inline-control-height-md);
  padding: 0 var(--inline-space-4);
  display: flex;
  align-items: center;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-size: 0.8125rem;
}

.nesting-rule {
  display: flex;
  align-items: center;
  gap: var(--inline-space-inline-sm);
  margin-top: var(--inline-space-6);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.nesting-rule span:first-child {
  height: 1px;
  flex: 1;
  background: var(--ink-300);
}

.radius-nesting-list {
  margin: 0;
  padding: var(--inline-space-6);
}

.radius-nesting-list > div {
  padding: var(--inline-space-4) 0;
  border-top: 1px solid var(--line-soft);
}

.radius-nesting-list dt {
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.radius-nesting-list dd {
  margin: var(--inline-space-1) 0 0;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.radius-direction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--inline-space-4);
}

.radius-choice {
  min-width: 0;
  padding: var(--inline-space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.choice-label {
  display: block;
  margin-bottom: var(--inline-space-4);
  font-size: 0.75rem;
  line-height: 1.417;
  font-weight: 600;
}

.radius-choice.is-do .choice-label { color: var(--success-800); }
.radius-choice.is-dont .choice-label { color: var(--danger-800); }

.choice-stage {
  min-height: 144px;
  padding: var(--inline-space-4);
  display: grid;
  grid-template-columns: auto auto;
  align-content: start;
  align-items: center;
  justify-content: start;
  gap: var(--inline-space-3);
  border: 1px solid var(--line-soft);
  background: var(--paper);
}

.choice-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-300);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 0.75rem;
}

.choice-button {
  min-height: var(--inline-control-height-md);
  padding: 0 var(--inline-space-4);
}

.choice-document {
  grid-column: 1 / -1;
  width: 100%;
  height: var(--inline-space-16);
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
}

.is-do .choice-button { border-radius: var(--radius-sm); }
.is-do .choice-document { border-radius: var(--radius-none); }
.is-dont .choice-button { border-radius: var(--radius-full); }
.is-dont .choice-document { border-radius: 20px; }

.radius-choice p {
  margin: var(--inline-space-4) 0 0;
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

/* ── Elevation and shadow page ─────────────────────────── */

/* Scene: the review workspace as it ships — flat draft, flat margin
   questions — with one transient menu carrying the only shadow. */

.elevation-scene {
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

.scene-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--inline-space-workspace-gap);
  padding: var(--inline-space-8);
}

.scene-draft {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--inline-space-6);
}

.scene-rail {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--inline-space-3);
}

.scene-region-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--inline-space-3);
  margin-bottom: var(--inline-space-4);
  font-size: 0.75rem;
  color: var(--ink-600);
}

.scene-rail .scene-region-label {
  margin-bottom: var(--inline-space-1);
}

.scene-region-label code {
  padding: 0;
  background: none;
  color: var(--ink-500);
}

.scene-prose {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.765;
  color: var(--ink-800);
  max-width: 52ch;
}

.scene-prose + .scene-prose {
  margin-top: var(--inline-space-3);
}

.scene-prose.is-faded {
  color: var(--ink-400);
}

.scene-menu {
  position: absolute;
  right: calc(-1 * var(--inline-space-3));
  bottom: calc(-1 * var(--inline-space-3));
  z-index: 2;
  width: min(220px, 90%);
  padding: var(--inline-space-1_5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}

.scene-menu-item {
  display: block;
  padding: var(--inline-space-2) var(--inline-space-3);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--ink-700);
}

.scene-menu-item.is-active {
  background: var(--ink-100);
  color: var(--ink);
}

.scene-menu-label {
  display: block;
  padding: var(--inline-space-2) var(--inline-space-3) var(--inline-space-1);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--inline-space-1);
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.scene-menu-label code {
  padding: 0;
  background: none;
  color: var(--ink-500);
}

.scene-note {
  margin: 0;
  padding: var(--inline-space-4) var(--inline-space-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.scene-note strong {
  color: var(--ink);
  font-weight: 500;
}

.elevation-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--inline-space-4);
  padding: var(--inline-space-8);
  border: 1px solid var(--line);
  background: var(--paper);
}

.elevation-token {
  min-width: 0;
}

.elevation-swatch {
  width: 100%;
  height: 104px;
  display: block;
  margin-bottom: var(--inline-space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.elevation-token.is-raised .elevation-swatch { box-shadow: var(--shadow-raised); }
.elevation-token.is-overlay .elevation-swatch { box-shadow: var(--shadow-overlay); }
.elevation-token.is-dialog .elevation-swatch { box-shadow: var(--shadow-dialog); }

.elevation-token strong,
.elevation-token code,
.elevation-token p {
  display: block;
}

.elevation-token strong {
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.elevation-token code {
  margin-top: var(--inline-space-1);
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.elevation-token p {
  margin: var(--inline-space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.shadow-values {
  margin-top: var(--inline-space-4);
  border-top: 1px solid var(--line);
}

.shadow-values > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--inline-space-4);
  padding: var(--inline-space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-600);
}

.shadow-values code {
  padding: 0;
  background: none;
  color: var(--ink);
}

.elevation-recipes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--inline-space-4);
}

.elevation-recipe {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.recipe-stage {
  position: relative;
  height: 176px;
  padding: var(--inline-space-6);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}

.recipe-stage > * {
  position: relative;
  z-index: 1;
}

.recipe-stage > span {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
}

.recipe-stage i,
.state-lines i {
  height: 6px;
  display: block;
  background: var(--ink-100);
}

.recipe-stage i {
  width: 88%;
  margin-top: var(--inline-space-4);
}

.recipe-stage i:last-child { width: 62%; }

.recipe-stage.is-flat {
  margin: var(--inline-space-6);
  height: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.recipe-stage.is-overlay::before,
.recipe-stage.is-dialog::before {
  content: "";
  position: absolute;
  background: var(--surface);
}

.recipe-stage.is-overlay::before {
  inset: var(--inline-space-5) var(--inline-space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay);
}

.recipe-stage.is-overlay {
  margin: var(--inline-space-6);
  height: 128px;
  padding: var(--inline-space-6) var(--inline-space-5);
  overflow: visible;
  border-bottom: 0;
}

.recipe-stage.is-dialog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--inline-space-4);
  background: rgb(24 33 59 / 0.32);
}

.recipe-stage.is-dialog::before {
  inset: 30px var(--inline-space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}

.recipe-stage button {
  min-height: var(--inline-control-height-sm);
  padding: 0 var(--inline-space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font: 500 0.6875rem/1 var(--sans);
}

.elevation-recipe h3 {
  margin: var(--inline-space-4) var(--inline-space-4) var(--inline-space-1);
  font-size: 0.8125rem;
  line-height: 1.538;
  font-weight: 500;
}

.elevation-recipe > p {
  margin: 0 var(--inline-space-4) var(--inline-space-4);
  font-size: 0.75rem;
  line-height: 1.417;
  color: var(--ink-600);
}

.elevation-recipe > p code {
  padding: 0;
  background: none;
}

.elevation-state {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}

.elevation-state-panel {
  position: relative;
  min-width: 0;
  min-height: 220px;
  padding-top: var(--inline-space-12);
  background: var(--paper);
}

.elevation-state-panel + .elevation-state-panel {
  border-left: 1px solid var(--line);
}

.state-label {
  position: absolute;
  top: var(--inline-space-4);
  left: var(--inline-space-4);
  font: 400 0.6875rem/1.545 var(--mono);
  color: var(--ink-500);
}

.state-toolbar {
  position: relative;
  z-index: 2;
  height: var(--inline-toolbar-height-compact);
  padding: 0 var(--inline-space-4);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
  color: var(--ink-600);
}

.is-overlap .state-toolbar { box-shadow: var(--shadow-raised); }

.state-lines {
  padding: var(--inline-space-6) var(--inline-space-4);
}

.state-lines i + i { margin-top: var(--inline-space-3); }
.state-lines i:nth-child(2) { width: 84%; }
.state-lines i:nth-child(3) { width: 64%; }
.is-overlap .state-lines { transform: translateY(-16px); }

.elevation-motion-note {
  margin: var(--inline-space-4) 0 0;
  padding: var(--inline-space-4) var(--inline-space-6);
  border-left: 2px solid var(--yellow-600);
  background: var(--yellow-50);
  font-size: 0.8125rem;
  line-height: 1.538;
  color: var(--ink-600);
}

.elevation-motion-note strong {
  color: var(--ink);
  font-weight: 500;
}

/* ── Logo page ─────────────────────────────────────────── */

.logo-stage {
  display: grid;
  place-items: center;
  padding: 64px 32px;
}

.logo-stage img {
  width: min(300px, 70%);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.logo-cell {
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}

.logo-cell .logo-cell-stage {
  min-height: 148px;
  display: grid;
  place-items: center;
  padding: 28px;
}

.logo-cell .logo-cell-stage.is-ink {
  background: var(--ink);
}

.logo-cell .logo-cell-stage img {
  width: 132px;
}

.logo-cell .logo-cell-stage img.is-small {
  width: 44px;
}

.logo-cell .logo-cell-stage.tab-stage {
  min-height: 148px;
}

.tab-tile {
  width: 88px;
  height: 88px;
  display: block;
  overflow: hidden;
  border-radius: 0;
}

.tab-tile--midnight {
  background: var(--ink);
}

.tab-tile--paper {
  border: 1px solid var(--line);
  background: var(--paper);
}

.logo-cell .logo-cell-stage img.tab-tile {
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.logo-cell figcaption {
  border-top: 1px solid var(--line-soft);
  padding: 11px 16px;
  font-size: 0.75rem;
  color: var(--ink-500);
}

.logo-cell figcaption strong {
  color: var(--ink-700);
  font-weight: 500;
  margin-right: 6px;
}

.appicon-strip {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 40px 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow-x: auto;
}

.appicon-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.appicon-sample code {
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--ink-500);
}

.appicon-sample img.is-circle {
  border-radius: var(--radius-full);
}

/* Constructed lockup for incorrect-use demos */

.fake-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--logo-font);
  font-weight: 750;
  font-size: 1.5rem;
  letter-spacing: -0.055em;
  color: var(--ink);
}

.fake-logo .fake-marker {
  width: 15px;
  height: 15px;
  background: var(--yellow);
  flex: none;
  transform: translateY(1px);
}

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

@media (max-width: 1439px) {
  .doc-section .section-heading h2::before {
    position: static;
    display: block;
    margin-bottom: 8px;
  }
}

@media (max-width: 1359px) {
  .page-toc {
    display: none;
  }
}

@media (max-width: 1023px) {
  .docs-sidebar {
    transform: translateX(-100%);
    transition: transform var(--dur-md) var(--ease-out);
    box-shadow: var(--shadow-none);
  }

  .docs-sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-overlay);
  }

  .mobile-bar {
    display: flex;
  }

  .docs-stage {
    margin-left: 0;
    padding: 0 24px;
  }

  .docs-main {
    padding-top: 40px;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 0;
  }
}

@media (max-width: 1023px) and (min-width: 761px) {
  .anchor-grid,
  .status-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-cards.is-six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-demo {
    grid-template-columns: 1fr;
  }

  .workspace-draft {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
}

@media (max-width: 900px) {
  .home-bar-links {
    display: none;
  }
}

@media (max-width: 767px) {
  .space-scale-grid,
  .space-alias-sheet,
  .control-specimens,
  .rhythm-contract,
  .size-family-grid {
    grid-template-columns: 1fr;
  }

  .alias-group:nth-child(even),
  .rhythm-column + .rhythm-column {
    border-left: 0;
  }

  .alias-group + .alias-group,
  .rhythm-column + .rhythm-column,
  .size-family + .size-family {
    border-top: 1px solid var(--line);
  }

  .size-family + .size-family {
    border-left: 0;
  }

  .workspace-size-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-size-summary > div:nth-child(3) {
    border-left: 0;
  }

  .workspace-size-summary > div:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .radius-scale {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .radius-token:nth-child(4) {
    border-left: 0;
  }

  .radius-token:nth-child(n + 4) {
    border-top: 1px solid var(--line-soft);
  }

  .radius-nesting,
  .radius-direction {
    grid-template-columns: 1fr;
  }

  .radius-nesting-demo {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .elevation-scale,
  .elevation-recipes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elevation-state {
    grid-template-columns: 1fr;
  }

  .elevation-state-panel + .elevation-state-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .scene-canvas {
    grid-template-columns: 1fr;
    padding: var(--inline-space-4);
  }

  .scene-menu {
    right: var(--inline-space-2);
    bottom: calc(-1 * var(--inline-space-2));
  }

  .scene-note {
    padding: var(--inline-space-4);
  }

  .space-row {
    grid-template-columns: var(--inline-space-20) var(--inline-space-10) minmax(0, 1fr);
    gap: var(--inline-space-2);
    padding: var(--inline-space-2) var(--inline-space-4);
  }

  .control-specimen + .control-specimen {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .compose-diagram {
    min-width: 640px;
  }

  .review-diagram {
    min-width: 760px;
  }

  .spacing-table th,
  .spacing-table td {
    padding: var(--inline-space-2) var(--inline-space-3);
  }

  .spacing-table th {
    white-space: normal;
  }

  .prose-rhythm-note {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .do-dont,
  .asset-list,
  .feature-cards,
  .feature-cards.is-six,
  .anchor-grid,
  .workspace-demo,
  .rule-list,
  .logo-grid,
  .status-families,
  .hero-vignette {
    grid-template-columns: 1fr;
  }

  .rule-list {
    gap: 0;
  }

  .system-index {
    columns: 1;
  }

  .question-showcase {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 24px;
  }

  .fb-card.is-featured {
    max-width: none;
  }

  .role-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-draft {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 28px 24px;
  }

  .anchor-tile {
    min-height: 132px;
  }

  .type-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .type-metrics {
    text-align: left;
  }

  .ramp {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
  }

  .home-hero {
    padding: 56px 0 64px;
  }

  .playground-controls {
    flex-direction: column;
  }

  .docs-main {
    padding-bottom: 24px;
  }
}

@media (max-width: 639px) {
  .docs-stage {
    padding-right: var(--inline-space-page-gutter-mobile);
    padding-left: var(--inline-space-page-gutter-mobile);
  }

  .corner-progression,
  .corner-plane.is-lg,
  .corner-plane.is-md,
  .corner-manuscript {
    padding: var(--inline-space-4);
  }

  .elevation-scale,
  .elevation-recipes {
    grid-template-columns: 1fr;
  }

  .elevation-scale {
    padding: var(--inline-space-6);
    gap: var(--inline-space-6);
  }

  .shadow-values > div {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .vignette-draft {
    padding: 20px;
  }
}

@media (max-width: 420px) {
  .radius-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radius-token:nth-child(odd) {
    border-left: 0;
  }

  .radius-token:nth-child(even) {
    border-left: 1px solid var(--line-soft);
  }

  .radius-token:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
}

/* ── Reduced motion ────────────────────────────────────── */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}