:root {
  color-scheme: light dark;
  --color-ink: #202124;
  --color-muted: #5f6368;
  --color-canvas: #f8fafd;
  --color-surface: #ffffff;
  --color-line: #dadce0;
  --color-accent: #1a73e8;
  --color-accent-deep: #174ea6;
  --color-accent-soft: #e8f0fe;
  --color-success: #188038;
  --color-warning: #f9ab00;
  --color-danger: #d93025;
  --shadow-panel: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.08);
  --shadow-soft: 0 1px 2px rgba(60, 64, 67, 0.10);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.58;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-accent-deep);
}

:focus-visible {
  outline: 3px solid rgba(26, 115, 232, 0.32);
  outline-offset: 3px;
}

.shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-7) 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: var(--space-5);
  align-items: end;
  margin-bottom: var(--space-6);
}

.hero__content {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(220, 227, 238, 0.9);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}

.kicker {
  margin: 0 0 var(--space-3);
  color: var(--color-accent);
  font-size: 0.95rem;
  font-weight: 700;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  line-height: 1.08;
}

h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -0.035em;
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

.lead {
  max-width: 68ch;
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero-actions {
  margin-top: var(--space-5);
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: span 12;
}

.panel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}

.panel--quiet {
  box-shadow: none;
}

.panel__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.button:hover {
  background: var(--color-accent-deep);
  color: #ffffff;
}

.button--secondary {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: none;
}

.button--secondary:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.badge--success {
  border-color: rgba(20, 125, 100, 0.22);
  background: rgba(20, 125, 100, 0.08);
  color: var(--color-success);
}

.badge--warning {
  border-color: rgba(161, 92, 0, 0.22);
  background: rgba(161, 92, 0, 0.08);
  color: var(--color-warning);
}

.badge--danger {
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.08);
  color: var(--color-danger);
}

.meta-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.meta-list div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.meta-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.meta-list dt {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.meta-list dd {
  margin: 0;
  font-weight: 600;
}

.note {
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  padding: var(--space-4);
  color: var(--color-accent-deep);
}

code {
  border: 1px solid rgba(26, 115, 232, 0.18);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.64);
  padding: 0.08rem 0.32rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

.experiment-card {
  display: grid;
  gap: var(--space-4);
  height: 100%;
}

.experiment-card p {
  color: var(--color-muted);
}

.experiment-card__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-top: auto;
}

.muted {
  color: var(--color-muted);
}

.divider {
  height: 1px;
  margin: var(--space-6) 0;
  background: var(--color-line);
}

.section {
  margin-top: var(--space-6);
}

.style-section {
  display: grid;
  gap: var(--space-4);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.swatch {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.swatch__color {
  height: 96px;
  background: var(--swatch-color);
}

.swatch__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}

.type-specimen {
  display: grid;
  gap: var(--space-4);
}

.type-display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.type-body {
  max-width: 64ch;
  color: var(--color-muted);
  font-size: 1.1rem;
}

.shape-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

.shape-sample {
  min-height: 120px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}

.shape-sample--sm {
  border-radius: var(--radius-sm);
}

.shape-sample--md {
  border-radius: var(--radius-md);
}

.shape-sample--lg {
  border-radius: var(--radius-lg);
}

.shape-sample--pill {
  min-height: auto;
  border-radius: var(--radius-pill);
}

.component-preview {
  display: grid;
  gap: var(--space-4);
}

.layout-frame {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-3);
  min-height: 220px;
}

.layout-block {
  border: 1px dashed rgba(26, 115, 232, 0.34);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  padding: var(--space-4);
  color: var(--color-accent-deep);
  font-weight: 700;
}

.layout-block--wide {
  grid-column: 1 / -1;
}

.docs-body {
  background: var(--color-canvas);
}

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--color-line);
  background: #ffffff;
}

.docs-topbar__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0.9rem 0;
}

.docs-brand {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}

.docs-brand__mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: none;
}

.docs-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.docs-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-7);
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-6) 0 var(--space-8);
}

.docs-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.docs-sidebar p {
  margin-bottom: var(--space-3);
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.docs-nav {
  display: grid;
  gap: var(--space-1);
}

.docs-nav a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  color: var(--color-muted);
  font-weight: 700;
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

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

.docs-hero {
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.docs-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(3.25rem, 9vw, 7.5rem);
}

.docs-hero .lead {
  max-width: 760px;
}

.docs-section {
  scroll-margin-top: 96px;
  margin-top: var(--space-7);
}

.docs-section__header {
  max-width: 760px;
  margin-bottom: var(--space-4);
}

.docs-section__header p {
  color: var(--color-muted);
}

.docs-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.docs-card__body {
  padding: var(--space-5);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.docs-table th,
.docs-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.docs-table th {
  background: #fbfcff;
  color: var(--color-muted);
  font-size: 0.9rem;
}

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

.docs-token {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.docs-token::before {
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--token-color);
  content: "";
}

.code-block {
  overflow: auto;
  margin: 0;
  border: 1px solid #cfd8ea;
  border-radius: var(--radius-md);
  background: #111827;
  color: #e5e7eb;
  padding: var(--space-5);
  font-size: 0.92rem;
  line-height: 1.7;
}

.code-block code {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.preview-frame {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(220, 227, 238, 0.45) 1px, transparent 1px),
    linear-gradient(rgba(220, 227, 238, 0.45) 1px, transparent 1px),
    #ffffff;
  background-size: 28px 28px;
}

.docs-callout {
  border: 1px solid rgba(26, 115, 232, 0.18);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  padding: var(--space-4);
  color: var(--color-accent-deep);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.palette-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.palette-card__swatch {
  height: 108px;
  background: var(--palette-color);
}

.palette-card__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}

.palette-card__body strong {
  letter-spacing: -0.02em;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-3);
}

.icon-card {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  text-align: center;
}

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: currentColor;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-card .icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
}

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

.font-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.font-card--display .font-sample {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.font-card--body .font-sample {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: 1.08rem;
}

.scale-list {
  display: grid;
  gap: var(--space-3);
}

.scale-row {
  display: grid;
  grid-template-columns: 7rem 1fr 6rem;
  gap: var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

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

.scale-row strong {
  color: var(--color-muted);
}

.scale-row span {
  font-weight: 700;
}

.scale-row code {
  justify-self: end;
}

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

.component-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-height: 220px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.component-card__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}

.component-card__header p {
  color: var(--color-muted);
}

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

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

.ui-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.ui-card--outlined {
  box-shadow: none;
}

.ui-card--dashed {
  border-style: dashed;
}

.ui-card--accent {
  border-left: 4px solid var(--color-accent);
}

.ui-card--success {
  border-left: 4px solid var(--color-success);
}

.ui-card--warning {
  border-left: 4px solid var(--color-warning);
}

.ui-card--interactive {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ui-card--interactive:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-panel);
  transform: translateY(-1px);
}

.ui-card--compact {
  gap: var(--space-2);
  padding: var(--space-3);
}

.ui-card--horizontal {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: stretch;
}

.ui-card--media {
  overflow: hidden;
  padding: 0;
}

.ui-card--media .ui-card__body {
  padding: var(--space-4);
}

.ui-card__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}

.ui-card__body {
  display: grid;
  gap: var(--space-3);
}

.ui-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.media-thumb {
  min-height: 140px;
  background:
    linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(52, 168, 83, 0.18)),
    linear-gradient(45deg, #f1f3f4 25%, transparent 25%),
    #ffffff;
  background-size: auto, 18px 18px, auto;
}

.media-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}

.media-thumb--photo {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(26, 115, 232, 0.78), rgba(52, 168, 83, 0.58)),
    linear-gradient(25deg, transparent 50%, rgba(255, 255, 255, 0.55) 51% 58%, transparent 59%),
    linear-gradient(155deg, transparent 42%, rgba(32, 33, 36, 0.28) 43% 58%, transparent 59%),
    #e8f0fe;
}

.project-preview {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.project-preview iframe {
  width: 140%;
  height: 140%;
  border: 0;
  pointer-events: none;
  transform: scale(0.72);
  transform-origin: top left;
}

.file-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.file-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-accent);
}

.button--ghost:hover {
  background: var(--color-accent-soft);
}

.button--danger {
  background: var(--color-danger);
}

.button--success {
  background: var(--color-success);
}

.button--small {
  min-height: 32px;
  padding: 0.35rem 0.7rem;
  font-size: 0.875rem;
}

.button--large {
  min-height: 48px;
  padding: 0.75rem 1.15rem;
}

.button-group {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.button-group .button {
  border: 0;
  border-radius: 0;
}

.alert--info {
  border-left-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.alert--compact {
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.alert--banner {
  border-radius: 0;
  border-right: 0;
  border-left-width: 4px;
}

.progress-stack {
  display: grid;
  gap: var(--space-3);
}

.progress-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 3rem;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.progress--success .progress__bar {
  background: var(--color-success);
}

.progress--warning .progress__bar {
  background: var(--color-warning);
}

.progress--danger .progress__bar {
  background: var(--color-danger);
}

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

.stat--accent {
  border-top: 3px solid var(--color-accent);
}

.stat--success {
  border-top: 3px solid var(--color-success);
}

.stat--warning {
  border-top: 3px solid var(--color-warning);
}

.stat--danger {
  border-top: 3px solid var(--color-danger);
}

.gradient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.gradient-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gradient-card__swatch {
  height: 84px;
  background: var(--gradient);
}

.gradient-card__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.font-size-grid {
  display: grid;
  gap: var(--space-2);
}

.font-size-row {
  display: grid;
  grid-template-columns: 8rem 1fr 6rem;
  gap: var(--space-3);
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-2) 0;
}

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

.avatar {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  font-weight: 700;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.82rem;
}

.avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar + .avatar {
  margin-left: -0.65rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.pill--accent {
  border-color: rgba(26, 115, 232, 0.18);
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.pill--success {
  border-color: rgba(20, 125, 100, 0.22);
  background: rgba(20, 125, 100, 0.08);
  color: var(--color-success);
}

.alert {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.alert p {
  color: var(--color-muted);
}

.alert--success {
  border-left-color: var(--color-success);
  background: rgba(20, 125, 100, 0.06);
}

.alert--warning {
  border-left-color: var(--color-warning);
  background: rgba(161, 92, 0, 0.06);
}

.alert--danger {
  border-left-color: var(--color-danger);
  background: rgba(180, 35, 24, 0.06);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  color: var(--color-ink);
  font-weight: 700;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  padding: 0.75rem 0.9rem;
}

.field small {
  color: var(--color-muted);
}

.tabs {
  display: inline-flex;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: #fbfcff;
  padding: 0.25rem;
}

.tab {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.45rem 0.8rem;
}

.tab[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumb span::before {
  margin-right: var(--space-2);
  color: #98a2b3;
  content: "/";
}

.progress {
  overflow: hidden;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

.progress__bar {
  width: var(--progress, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-deep));
}

.empty-state {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  border: 1px dashed rgba(26, 115, 232, 0.34);
  border-radius: var(--radius-md);
  background: rgba(238, 241, 255, 0.58);
  padding: var(--space-6);
  text-align: center;
}

.empty-state p {
  max-width: 42ch;
  color: var(--color-muted);
}

.stat {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.stat strong {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat span {
  color: var(--color-muted);
}

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

.do-dont ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  color: var(--color-muted);
}

.docs-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
}

/* Compact docs pass: less showcase, more reference manual. */
.docs-body {
  background: var(--color-canvas);
}

.docs-topbar__inner {
  padding: 0.65rem 0;
}

.docs-brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: none;
}

.docs-actions {
  gap: var(--space-2);
  font-size: 0.92rem;
}

.docs-layout {
  gap: var(--space-5);
  padding: var(--space-5) 0 var(--space-7);
}

.docs-sidebar {
  top: 72px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.docs-sidebar p {
  margin-bottom: var(--space-2);
  font-size: 0.82rem;
}

.docs-nav {
  gap: 0;
}

.docs-nav a {
  padding: 0.42rem 0.55rem;
  border-radius: 0.55rem;
  font-size: 0.92rem;
}

.docs-hero {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface);
  box-shadow: none;
}

.docs-hero h1 {
  max-width: 22ch;
  font-family: var(--font-body);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  letter-spacing: -0.04em;
}

.docs-hero .lead,
.lead {
  margin-top: var(--space-3);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.docs-section {
  margin-top: var(--space-6);
}

.docs-section__header {
  margin-bottom: var(--space-3);
}

.docs-section__header h2,
.docs-card__body h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.docs-card__body,
.component-card,
.preview-frame {
  padding: var(--space-4);
}

.preview-frame {
  background: #ffffff;
  background-size: auto;
}

.component-grid {
  gap: var(--space-3);
}

.component-card {
  gap: var(--space-3);
  min-height: 0;
  box-shadow: none;
}

.component-card__header {
  gap: var(--space-2);
}

.palette-grid,
.icon-grid {
  gap: var(--space-3);
}

.palette-card,
.icon-card,
.font-card,
.docs-card,
.swatch {
  box-shadow: none;
}

.palette-card__swatch {
  height: 72px;
}

.palette-card__body,
.swatch__body {
  padding: var(--space-3);
}

.icon-card {
  gap: var(--space-1);
  padding: var(--space-3);
}

.icon-card .icon {
  width: 24px;
  height: 24px;
}

.font-card {
  padding: var(--space-4);
}

.font-card--display .font-sample {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.button {
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  box-shadow: none;
}

.badge,
.pill {
  min-height: 28px;
  padding: 0.2rem 0.6rem;
  font-size: 0.84rem;
}

.code-block {
  padding: var(--space-4);
  font-size: 0.85rem;
}

.layout-frame {
  min-height: 160px;
}

@media (max-width: 860px) {
  .shell {
    width: min(100% - 24px, 720px);
    padding: var(--space-5) 0;
  }

  .hero,
  .grid {
    grid-template-columns: 1fr;
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8,
  .span-12 {
    grid-column: auto;
  }

  .panel__header {
    display: grid;
  }

  .meta-list div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .layout-frame {
    grid-template-columns: 1fr;
  }

  .layout-block--wide {
    grid-column: auto;
  }

  .docs-topbar__inner {
    align-items: flex-start;
  }

  .docs-actions {
    display: none;
  }

  .docs-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .docs-sidebar {
    position: static;
    max-height: none;
  }

  .docs-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .do-dont {
    grid-template-columns: 1fr;
  }

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

  .showcase-grid,
  .showcase-grid--three,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .ui-card--horizontal,
  .progress-row,
  .font-size-row {
    grid-template-columns: 1fr;
  }

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

  .scale-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .scale-row code {
    justify-self: start;
  }

  .docs-table {
    display: block;
    overflow-x: auto;
  }
}

@media (min-width: 721px) and (max-width: 860px) {
  .docs-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-5);
  }

  .docs-sidebar {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
  }

  .docs-hero h1 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Experiment kit
   Components for documenting experiments: data, charts, logs, LLM
   transcripts, verdicts, timelines, disclosure, form controls, media.
   Everything below uses the tokens above. Demo + snippets: style/index.html.
   ========================================================================== */

:root {
  --color-success-soft: #e6f4ea;
  --color-warning-soft: #fef7e0;
  --color-warning-ink: #b06000;
  --color-danger-soft: #fce8e6;
  --color-neutral-soft: #f1f3f4;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  /* Categorical series for charts. Use in this order. */
  --series-1: #1a73e8;
  --series-2: #12b5cb;
  --series-3: #e8710a;
  --series-4: #9334e6;
  --series-5: #188038;
}

/* Cards in an equal-height grid: keep content at the top, not stretched. */
.ui-card {
  align-content: start;
}

/* ---------- Inline text ---------- */

kbd {
  display: inline-block;
  min-width: 1.6em;
  border: 1px solid var(--color-line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: 0 0.35em;
  font-family: var(--font-mono);
  font-size: 0.82em;
  text-align: center;
}

mark {
  border-radius: 2px;
  background: #fef7e0;
  color: inherit;
  padding: 0 0.15em;
  box-shadow: inset 0 -2px 0 rgba(249, 171, 0, 0.45);
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning-ink); }
.text-danger { color: var(--color-danger); }
.text-small { font-size: 0.875rem; }

/* ---------- Prose: long-form write-up text ---------- */

.prose {
  max-width: 72ch;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose ul,
.prose ol {
  padding-left: 1.4rem;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose blockquote,
.quote {
  margin: 0;
  border-left: 3px solid var(--color-line);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  color: var(--color-muted);
}

.quote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

.prose hr {
  height: 1px;
  border: 0;
  background: var(--color-line);
}

.footnote {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.footnote sup,
sup.ref {
  color: var(--color-accent);
  font-weight: 700;
}

/* ---------- Status dot, delta, key-value ---------- */

.status-dot {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 0.92rem;
  font-weight: 500;
}

.status-dot::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-muted);
  content: "";
}

.status-dot--success::before { background: var(--color-success); }
.status-dot--warning::before { background: var(--color-warning); }
.status-dot--danger::before { background: var(--color-danger); }
.status-dot--accent::before { background: var(--color-accent); }

.status-dot--live::before {
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5);
  animation: status-pulse 1.6s infinite;
}

@keyframes status-pulse {
  70% { box-shadow: 0 0 0 6px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

.delta {
  display: inline-flex;
  gap: 0.2em;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.35rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.delta--up { background: var(--color-success-soft); color: var(--color-success); }
.delta--down { background: var(--color-danger-soft); color: var(--color-danger); }
.delta--flat { background: var(--color-neutral-soft); color: var(--color-muted); }
.delta--up::before { content: "\2191"; }
.delta--down::before { content: "\2193"; }
.delta--flat::before { content: "\2192"; }

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-line);
  gap: 1px;
}

.kv-grid div {
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}

.kv-grid dt {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.kv-grid dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- Metric card: number + delta + sparkline ---------- */

.metric {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.metric__label {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.metric__value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.metric__value small {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.sparkline {
  display: block;
  width: 100%;
  height: 36px;
  overflow: visible;
  fill: none;
  stroke: var(--series-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline--success { stroke: var(--color-success); }
.sparkline--danger { stroke: var(--color-danger); }

/* ---------- Table variants (extend .docs-table) ---------- */

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

.table-wrap > .docs-table {
  border: 0;
  border-radius: 0;
}

.docs-table caption {
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: left;
  caption-side: bottom;
  border-top: 1px solid var(--color-line);
}

.docs-table--compact th,
.docs-table--compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
}

.docs-table--striped tbody tr:nth-child(even) td {
  background: #fbfcff;
}

.docs-table--hover tbody tr:hover td {
  background: var(--color-accent-soft);
}

.docs-table th.num,
.docs-table td.num {
  text-align: right;
}

.docs-table tr.is-best td {
  background: var(--color-success-soft);
}

.docs-table tr.is-best td:first-child {
  box-shadow: inset 3px 0 0 var(--color-success);
}

.docs-table tr.is-baseline td {
  color: var(--color-muted);
}

.docs-table tr.is-failed td {
  background: var(--color-danger-soft);
}

.docs-table td.is-best {
  color: var(--color-success);
  font-weight: 700;
}

/* ---------- Charts (pure CSS; set values with --value: 0-100) ---------- */

.chart {
  display: grid;
  gap: var(--space-3);
}

.chart__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.chart__caption {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Horizontal bars */
.bar-chart {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-chart li {
  display: grid;
  grid-template-columns: minmax(80px, 9rem) minmax(0, 1fr) 4.5rem;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.92rem;
}

.bar-chart__track {
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-soft);
}

.bar-chart__bar {
  width: calc(var(--value, 0) * 1%);
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--bar-color, var(--series-1));
}

.bar-chart__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.bar-chart li.is-best .bar-chart__bar { background: var(--color-success); }
.bar-chart li.is-muted .bar-chart__bar { background: #bdc1c6; }

/* Vertical columns */
.column-chart {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  height: 200px;
  margin: 0;
  padding: 0 0 var(--space-1);
  border-bottom: 1px solid var(--color-line);
  list-style: none;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(218, 220, 224, 0.6) calc(25% - 1px),
    rgba(218, 220, 224, 0.6) 25%
  );
}

.column-chart li {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.column-chart__bar {
  position: relative;
  width: min(48px, 100%);
  height: calc(var(--value, 0) * 1%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--bar-color, var(--series-1));
}

.column-chart__bar span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.column-chart__labels {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.column-chart__labels li {
  flex: 1;
  min-width: 0;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Stacked 100% bar */
.stacked-bar {
  display: flex;
  overflow: hidden;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-soft);
  gap: 2px;
}

.stacked-bar span {
  width: calc(var(--value, 0) * 1%);
  background: var(--bar-color, var(--series-1));
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  list-style: none;
}

.legend li {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.legend li::before {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--bar-color, var(--series-1));
  content: "";
}

/* Donut / ring meter */
.ring {
  --size: 112px;
  --ring-color: var(--series-1);
  display: grid;
  width: var(--size);
  height: var(--size);
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--color-surface) 76%, transparent 77%),
    conic-gradient(var(--ring-color) calc(var(--value, 0) * 1%), var(--color-neutral-soft) 0);
}

.ring strong {
  font-size: calc(var(--size) / 4.6);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.ring--success { --ring-color: var(--color-success); }
.ring--warning { --ring-color: var(--color-warning); }
.ring--danger { --ring-color: var(--color-danger); }

/* Heatmap: set --intensity 0-1 per cell */
.heatmap {
  display: grid;
  grid-template-columns: auto repeat(var(--cols, 5), minmax(36px, 1fr));
  gap: 3px;
  font-size: 0.8rem;
}

.heatmap__cell {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(26, 115, 232, calc(0.08 + var(--intensity, 0) * 0.92));
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.heatmap__cell.is-dark {
  color: #ffffff;
}

.heatmap__label {
  display: grid;
  align-items: center;
  padding: 0 var(--space-2);
  color: var(--color-muted);
  white-space: nowrap;
}

.heatmap__label--col {
  justify-items: center;
  padding: 0;
}

/* Confusion matrix (uses heatmap cells) */
.matrix {
  display: inline-grid;
  grid-template-columns: auto repeat(var(--cols, 2), 72px);
  gap: 3px;
  font-size: 0.85rem;
}

.matrix .heatmap__cell {
  min-height: 56px;
  font-size: 1rem;
}

.matrix .heatmap__cell.is-correct {
  background: rgba(24, 128, 56, calc(0.12 + var(--intensity, 0) * 0.88));
}

/* ---------- Experiment narrative ---------- */

.hypothesis {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
}

.hypothesis__label {
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.hypothesis__claim {
  font-size: 1.05rem;
  font-weight: 500;
}

.hypothesis__verdict {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  color: var(--color-muted);
}

.verdict {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.verdict--supported { background: var(--color-success-soft); color: var(--color-success); }
.verdict--rejected { background: var(--color-danger-soft); color: var(--color-danger); }
.verdict--inconclusive { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.verdict--supported::before { content: "\2713"; }
.verdict--rejected::before { content: "\2717"; }
.verdict--inconclusive::before { content: "?"; }

.hypothesis--supported { border-left: 4px solid var(--color-success); }
.hypothesis--rejected { border-left: 4px solid var(--color-danger); }
.hypothesis--inconclusive { border-left: 4px solid var(--color-warning); }

/* TL;DR / key findings */
.tldr {
  display: grid;
  gap: var(--space-3);
  border: 1px solid rgba(26, 115, 232, 0.2);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  padding: var(--space-4) var(--space-5);
}

.tldr__label {
  color: var(--color-accent-deep);
  font-size: 0.8rem;
  font-weight: 700;
}

.findings {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: finding;
}

.findings li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  align-items: start;
  counter-increment: finding;
}

.findings li::before {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
  content: counter(finding);
  font-size: 0.85rem;
  font-weight: 700;
}

/* A vs B comparison */
.compare {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--space-3);
}

.compare__item {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.compare__item.is-winner {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success);
}

.compare__item.is-winner::after {
  position: absolute;
  top: -11px;
  right: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-success);
  color: #ffffff;
  content: "Winner";
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.55rem;
}

.compare__item header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
}

.compare__item h4 {
  margin: 0;
  font-size: 1rem;
}

.compare__vs {
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-weight: 700;
}

/* Timeline: run history / changelog */
.timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: 0 0 var(--space-5) var(--space-6);
}

.timeline li::before {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--dot, var(--color-accent));
  box-shadow: 0 0 0 1px var(--dot, var(--color-accent));
  content: "";
}

.timeline li::after {
  position: absolute;
  top: 22px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--color-line);
  content: "";
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li:last-child::after {
  display: none;
}

.timeline time {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.timeline .is-success { --dot: var(--color-success); }
.timeline .is-warning { --dot: var(--color-warning); }
.timeline .is-danger { --dot: var(--color-danger); }
.timeline .is-pending { --dot: #bdc1c6; }

/* Numbered procedure */
.steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
  counter-increment: step;
}

.steps > li::before {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  content: counter(step);
  font-weight: 700;
}

.steps > li > div {
  display: grid;
  gap: var(--space-2);
  padding-top: 0.25rem;
  min-width: 0;
}

/* Checklist: next steps / acceptance criteria */
.checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.checklist li::before {
  display: grid;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  place-items: center;
  border: 2px solid #9aa0a6;
  border-radius: var(--radius-sm);
  content: "";
  font-size: 0.75rem;
  font-weight: 700;
}

.checklist li.is-done {
  color: var(--color-muted);
  text-decoration: line-through;
}

.checklist li.is-done::before {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #ffffff;
  content: "\2713";
}

.checklist li.is-blocked::before {
  border-color: var(--color-danger);
  color: var(--color-danger);
  content: "!";
}

/* ---------- LLM transcripts ---------- */

.chat {
  display: grid;
  gap: var(--space-3);
}

.chat__msg {
  display: grid;
  gap: var(--space-2);
  max-width: 88%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}

.chat__msg header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.chat__msg header .chat__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
}

.chat__msg > p,
.chat__msg > div {
  white-space: pre-wrap;
}

.chat__msg--system {
  max-width: 100%;
  border-style: dashed;
  background: var(--color-neutral-soft);
  color: var(--color-muted);
  font-size: 0.92rem;
}

.chat__msg--user {
  justify-self: end;
  border-color: rgba(26, 115, 232, 0.25);
  background: var(--color-accent-soft);
}

.chat__msg--assistant {
  justify-self: start;
}

.chat__msg--tool {
  max-width: 100%;
  border-left: 3px solid var(--series-4);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Prompt -> output pair with run metadata */
.prompt-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.prompt-card__section {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.prompt-card__section + .prompt-card__section {
  border-top: 1px solid var(--color-line);
}

.prompt-card__label {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.prompt-card__body {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.prompt-card__footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-line);
  background: #fbfcff;
  padding: var(--space-2) var(--space-4);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ---------- Code window, logs, diff ---------- */

.code-window {
  overflow: hidden;
  border: 1px solid #2d3748;
  border-radius: var(--radius-md);
  background: #111827;
}

.code-window__bar {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2d3748;
  background: #1f2937;
  padding: 0.45rem var(--space-4);
  color: #9ca3af;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.code-window .code-block {
  border: 0;
  border-radius: 0;
}

.code-block .c-comment { color: #6b7280; }
.code-block .c-key { color: #93c5fd; }
.code-block .c-string { color: #86efac; }
.code-block .c-number { color: #fcd34d; }
.code-block .c-fn { color: #c4b5fd; }

/* Log viewer: one .log-line per line */
.log {
  overflow: auto;
  max-height: 360px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fbfcff;
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  counter-reset: log;
}

.log-line {
  display: grid;
  grid-template-columns: 3rem auto auto 1fr;
  gap: var(--space-3);
  padding: 0 var(--space-4) 0 0;
  white-space: pre-wrap;
  counter-increment: log;
}

.log-line::before {
  color: #9aa0a6;
  content: counter(log);
  text-align: right;
  user-select: none;
}

.log-line time {
  color: var(--color-muted);
}

.log-line__level {
  min-width: 3.2rem;
  font-weight: 700;
}

.log-line--debug .log-line__level { color: #9aa0a6; }
.log-line--info .log-line__level { color: var(--color-accent); }
.log-line--warn { background: var(--color-warning-soft); }
.log-line--warn .log-line__level { color: var(--color-warning-ink); }
.log-line--error { background: var(--color-danger-soft); }
.log-line--error .log-line__level { color: var(--color-danger); }
.log-line.is-highlight { box-shadow: inset 3px 0 0 var(--color-accent); background: var(--color-accent-soft); }

/* Diff */
.diff {
  overflow: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
}

.diff__file {
  border-bottom: 1px solid var(--color-line);
  background: #fbfcff;
  padding: 0.45rem var(--space-4);
  color: var(--color-muted);
  font-weight: 700;
}

.diff__line {
  display: block;
  padding: 0 var(--space-4) 0 var(--space-6);
  text-indent: calc(var(--space-4) * -1);
  white-space: pre-wrap;
}

.diff__line::before {
  display: inline-block;
  width: var(--space-4);
  color: #9aa0a6;
  content: " ";
  text-indent: 0;
}

.diff__line--add { background: var(--color-success-soft); }
.diff__line--add::before { color: var(--color-success); content: "+"; }
.diff__line--del { background: var(--color-danger-soft); }
.diff__line--del::before { color: var(--color-danger); content: "-"; }
.diff__line--hunk { background: var(--color-accent-soft); color: var(--color-accent-deep); }

/* ---------- Disclosure ---------- */

.accordion {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.accordion details + details {
  border-top: 1px solid var(--color-line);
}

.accordion summary,
details.disclosure > summary {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.accordion summary::-webkit-details-marker,
details.disclosure > summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after,
details.disclosure > summary::after {
  color: var(--color-muted);
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
}

.accordion details[open] > summary::after,
details.disclosure[open] > summary::after {
  content: "\2212";
}

.accordion summary:hover,
details.disclosure > summary:hover {
  background: #fbfcff;
}

.accordion details > :not(summary) {
  margin: 0 var(--space-4) var(--space-4);
}

details.disclosure {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

details.disclosure > :not(summary) {
  margin: 0 var(--space-4) var(--space-4);
}

/* Tooltip: <span class="tooltip" data-tip="...">term</span> */
.tooltip {
  position: relative;
  border-bottom: 1px dotted var(--color-muted);
  cursor: help;
}

.tooltip::after {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: 260px;
  border-radius: var(--radius-sm);
  background: #3c4043;
  color: #ffffff;
  content: attr(data-tip);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  padding: 0.35rem 0.55rem;
  pointer-events: none;
  transform: translateX(-50%) translateY(2px);
  transition: opacity 120ms, transform 120ms;
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%);
}

/* ---------- Page navigation ---------- */

.toc {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}

.toc__title {
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.toc ol {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: 1.2rem;
}

.toc a {
  color: var(--color-ink);
  text-decoration: none;
}

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

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

.pager a {
  display: grid;
  gap: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}

.pager a:hover {
  border-color: var(--color-accent);
}

.pager small {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.pager__next {
  grid-column: 2;
  text-align: right;
}

/* ---------- Form controls ---------- */

.search-field {
  position: relative;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 18px;
  height: 18px;
  color: var(--color-muted);
  transform: translateY(-50%);
}

.search-field input {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: inherit;
  padding: 0.6rem 1rem 0.6rem 2.4rem;
}

.search-field input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}

.check {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
}

.switch {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  cursor: pointer;
}

.switch input {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: #bdc1c6;
  cursor: pointer;
  appearance: none;
  transition: background 120ms;
}

.switch input::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  content: "";
  transition: transform 120ms;
}

.switch input:checked {
  background: var(--color-accent);
}

.switch input:checked::before {
  transform: translateX(16px);
}

.segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.segmented label {
  cursor: pointer;
}

.segmented label + label span {
  border-left: 1px solid var(--color-line);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: block;
  padding: 0.4rem 0.9rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.segmented input:checked + span {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
}

.segmented input:focus-visible + span {
  outline: 3px solid rgba(26, 115, 232, 0.32);
  outline-offset: -3px;
}

input[type="range"].range {
  width: 100%;
  accent-color: var(--color-accent);
}

/* ---------- Media ---------- */

.figure {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.figure img,
.figure svg,
.figure video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.figure figcaption {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.figure figcaption strong {
  color: var(--color-ink);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.browser-frame {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.browser-frame__bar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-neutral-soft);
  padding: 0.5rem var(--space-3);
}

.browser-frame__bar::before {
  width: 42px;
  height: 10px;
  background:
    radial-gradient(circle, #ea4335 4px, transparent 4.5px) 0 50% / 14px 10px no-repeat,
    radial-gradient(circle, #fbbc04 4px, transparent 4.5px) 14px 50% / 14px 10px no-repeat,
    radial-gradient(circle, #34a853 4px, transparent 4.5px) 28px 50% / 14px 10px no-repeat;
  content: "";
  flex: none;
}

.browser-frame__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: 0.15rem 0.75rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder for missing images / charts */
.placeholder {
  display: grid;
  min-height: 160px;
  place-items: center;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(218, 220, 224, 0.5) 10px 11px),
    var(--color-neutral-soft);
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Skeleton loading line */
.skeleton {
  height: 0.9em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #eceff1 25%, #f6f7f8 50%, #eceff1 75%) 0 0 / 200% 100%;
  animation: skeleton 1.4s infinite;
}

@keyframes skeleton {
  to { background-position: -200% 0; }
}

/* ---------- Experiment kit responsive ---------- */

@media (max-width: 720px) {
  .compare,
  .pager {
    grid-template-columns: 1fr;
  }

  .pager__next {
    grid-column: auto;
  }

  .bar-chart li {
    grid-template-columns: 1fr 3.5rem;
  }

  .bar-chart__track {
    grid-column: 1 / -1;
    order: 3;
  }

  .chat__msg {
    max-width: 100%;
  }

  .log-line {
    grid-template-columns: 2rem 1fr;
  }

  .log-line > * {
    grid-column: 2;
  }

  .heatmap,
  .matrix {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot--live::before,
  .skeleton {
    animation: none;
  }
}

/* Docs-page helpers (style/index.html only) */
.docs-nav p {
  margin-top: var(--space-3);
}

.demo-source {
  margin-top: var(--space-3);
  font-size: 0.85rem;
}

.demo-source > summary {
  color: var(--color-muted);
}

.demo-source .code-block {
  max-height: 420px;
  padding: var(--space-4);
  font-size: 0.8rem;
}

/* Inline-sized components must not stretch inside grid parents (.ui-card, .chart). */
.segmented,
.tabs,
.matrix,
.ring {
  justify-self: start;
}

.hypothesis {
  grid-template-rows: auto 1fr auto;
}

@media (max-width: 860px) {
  /* Let the wrapper scroll; keep the table intact instead of squashing columns. */
  .table-wrap > .docs-table {
    display: table;
    min-width: 560px;
  }
}

/* ==========================================================================
   Tone system + style variants (cards, buttons, alerts, badges, pills)
   Formula:  component  +  style modifier  +  tone--<color>
   e.g.  <article class="ui-card ui-card--filled tone--success">
         <a class="button button--outline tone--danger">
         <div class="alert alert--dashed tone--warning">
   Without a tone class the component uses accent (blue).
   ========================================================================== */

.ui-card,
.alert,
.button,
.badge,
.pill,
.tone--accent {
  --tone: var(--color-accent);
  --tone-soft: var(--color-accent-soft);
  --tone-ink: var(--color-accent-deep);
  --tone-on: #ffffff;
}

.tone--success { --tone: #188038; --tone-soft: #e6f4ea; --tone-ink: #137333; --tone-on: #ffffff; }
.tone--warning { --tone: #f9ab00; --tone-soft: #fef7e0; --tone-ink: #b06000; --tone-on: #202124; }
.tone--danger  { --tone: #d93025; --tone-soft: #fce8e6; --tone-ink: #a50e0e; --tone-on: #ffffff; }
.tone--neutral { --tone: #5f6368; --tone-soft: #f1f3f4; --tone-ink: #3c4043; --tone-on: #ffffff; }
.tone--purple  { --tone: #9334e6; --tone-soft: #f3e8fd; --tone-ink: #681da8; --tone-on: #ffffff; }
.tone--teal    { --tone: #12b5cb; --tone-soft: #e4f7fb; --tone-ink: #007b83; --tone-on: #202124; }
.tone--orange  { --tone: #e8710a; --tone-soft: #feefe3; --tone-ink: #b0530a; --tone-on: #ffffff; }

/* Legacy semantic modifiers also set the tone, so they combine with
   the new anatomy (alert__icon, ui-card__bar, badge--dot, ...). */
.alert--success, .badge--success, .pill--success, .button--success, .ui-card--success,
.alert--warning, .badge--warning, .ui-card--warning,
.alert--danger, .badge--danger, .button--danger {
  --tone-on: #ffffff;
}
.alert--success, .badge--success, .pill--success, .button--success, .ui-card--success { --tone: #188038; --tone-soft: #e6f4ea; --tone-ink: #137333; }
.alert--warning, .badge--warning, .ui-card--warning { --tone: #f9ab00; --tone-soft: #fef7e0; --tone-ink: #b06000; --tone-on: #202124; }
.alert--danger, .badge--danger, .button--danger { --tone: #d93025; --tone-soft: #fce8e6; --tone-ink: #a50e0e; }

/* ---------- Card styles ---------- */

.ui-card--filled {
  border-color: transparent;
  background: var(--tone-soft);
}

.ui-card--bordered {
  border-color: var(--tone);
}

.ui-card--dashed {
  border-style: dashed;
}

.ui-card--dashed[class*="tone--"] {
  border-color: var(--tone);
}

.ui-card--dashed.ui-card--filled {
  border-color: var(--tone);
}

.ui-card--dotted {
  border: 2px dotted var(--tone);
}

.ui-card--left {
  border-left: 4px solid var(--tone);
}

.ui-card--top {
  border-top: 4px solid var(--tone);
}

.ui-card--solid {
  border-color: transparent;
  background: var(--tone);
  color: var(--tone-on);
}

.ui-card--solid h3,
.ui-card--solid .muted,
.ui-card--solid p {
  color: inherit;
}

.ui-card--solid .muted {
  opacity: 0.85;
}

.ui-card--gradient {
  border-color: color-mix(in srgb, var(--tone) 22%, transparent);
  background: linear-gradient(135deg, var(--tone-soft), var(--color-surface) 70%);
}

.ui-card--elevated {
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16), 0 4px 12px rgba(60, 64, 67, 0.1);
}

.ui-card--flat {
  border-color: transparent;
  background: var(--color-neutral-soft);
}

.ui-card--ghost {
  border-color: transparent;
  background: transparent;
  padding-inline: 0;
}

.ui-card--hatched {
  border-color: var(--tone);
  background:
    repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--tone) 10%, transparent) 8px 9px),
    var(--color-surface);
}

.ui-card--selected,
.ui-card[aria-selected="true"],
.ui-card[aria-current="true"] {
  border-color: var(--tone);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 30%, transparent);
}

.ui-card--disabled,
.ui-card[aria-disabled="true"] {
  opacity: 0.55;
  filter: grayscale(0.6);
  pointer-events: none;
}

/* Card anatomy extras */
.ui-card__bar {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--tone-soft);
  padding: var(--space-2) var(--space-4);
  color: var(--tone-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.ui-card__bar--solid {
  border-bottom: 0;
  background: var(--tone);
  color: var(--tone-on);
}

.ui-card__icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.ui-card__icon .icon {
  width: 22px;
  height: 22px;
}

.ui-card--solid .ui-card__icon {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.ui-card {
  position: relative;
}

.ui-card__ribbon {
  position: absolute;
  top: 12px;
  right: -1px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--tone);
  color: var(--tone-on);
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.ui-card__media-top {
  height: 6px;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 40%, #ffffff));
}

.ui-card__divider {
  height: 1px;
  margin: 0 calc(var(--space-4) * -1);
  background: var(--color-line);
}

/* ---------- Button styles ---------- */

.button {
  gap: var(--space-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}

.button .icon {
  width: 18px;
  height: 18px;
}

.button--solid {
  border-color: transparent;
  background: var(--tone);
  color: var(--tone-on);
}

.button--solid:hover {
  background: var(--tone-ink);
  color: #ffffff;
}

.button--tonal {
  border-color: transparent;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.button--tonal:hover {
  background: color-mix(in srgb, var(--tone) 18%, #ffffff);
  color: var(--tone-ink);
}

.button--outline {
  border-color: var(--tone);
  background: var(--color-surface);
  color: var(--tone-ink);
}

.button--outline:hover {
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.button--dashed {
  border: 1px dashed var(--tone);
  background: var(--color-surface);
  color: var(--tone-ink);
}

.button--dashed:hover {
  border-style: solid;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.button--text {
  border-color: transparent;
  background: transparent;
  color: var(--tone-ink);
  padding-inline: 0.5rem;
}

.button--text:hover {
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.button--link {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--tone-ink);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.button--link:hover {
  background: transparent;
  color: var(--tone);
}

.button--elevated {
  border-color: transparent;
  background: var(--color-surface);
  color: var(--tone-ink);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2), 0 1px 3px 1px rgba(60, 64, 67, 0.1);
}

.button--elevated:hover {
  background: var(--tone-soft);
  color: var(--tone-ink);
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.24), 0 4px 8px 3px rgba(60, 64, 67, 0.12);
}

/* Shape and size */
.button--pill { border-radius: var(--radius-pill); }
.button--square { border-radius: 0; }
.button--xs { min-height: 26px; padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.button--block { display: flex; width: 100%; }

.button--icon {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.button--icon.button--small { width: 32px; min-width: 32px; }
.button--icon.button--large { width: 48px; min-width: 48px; }
.button--icon.button--pill { border-radius: 50%; }

.button__count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.25);
  padding: 0 0.35rem;
  font-size: 0.75rem;
}

.button--outline .button__count,
.button--tonal .button__count,
.button--dashed .button__count,
.button--text .button__count,
.button--secondary .button__count {
  background: var(--tone-soft);
  color: var(--tone-ink);
}

/* States */
.button:disabled,
.button.is-disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.button.is-active,
.button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--tone);
}

.button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.button.is-loading::after {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid currentColor;
  border-color: var(--tone-on) var(--tone-on) transparent transparent;
  border-radius: 50%;
  content: "";
  animation: button-spin 0.7s linear infinite;
}

.button--outline.is-loading::after,
.button--tonal.is-loading::after,
.button--dashed.is-loading::after,
.button--secondary.is-loading::after,
.button--text.is-loading::after {
  border-color: var(--tone) var(--tone) transparent transparent;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* Groups and toolbars */
.button-group .button + .button {
  border-left: 1px solid var(--color-line);
}

.button-group--pill {
  border-radius: var(--radius-pill);
}

.button-group .button.is-active,
.button-group .button[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  box-shadow: none;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2);
}

.toolbar__spacer {
  flex: 1;
}

.toolbar__sep {
  width: 1px;
  align-self: stretch;
  background: var(--color-line);
}

/* ---------- Alert styles ---------- */

.alert--soft {
  border-color: transparent;
  border-left-color: var(--tone);
  background: var(--tone-soft);
}

.alert--outline {
  border: 1px solid var(--tone);
  background: var(--color-surface);
}

.alert--dashed {
  border: 1px dashed var(--tone);
  background: var(--color-surface);
}

.alert--dashed.alert--soft {
  background: var(--tone-soft);
}

.alert--solid {
  border-color: transparent;
  background: var(--tone);
  color: var(--tone-on);
}

.alert--solid p,
.alert--solid strong {
  color: inherit;
}

.alert--solid p {
  opacity: 0.9;
}

.alert--top {
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--tone);
}

.alert--plain {
  border: 0;
  background: var(--tone-soft);
}

.alert--dotted {
  border: 2px dotted var(--tone);
  background: var(--color-surface);
}

.alert[class*="tone--"]:not(.alert--solid) strong {
  color: var(--tone-ink);
}

/* Alert anatomy: icon + body + actions + close */
.alert--icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.alert__icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.alert__icon .icon {
  width: 18px;
  height: 18px;
}

.alert--soft .alert__icon,
.alert--plain .alert__icon {
  background: var(--color-surface);
}

.alert--solid .alert__icon {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.alert__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.alert__body ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.2rem;
  color: var(--color-muted);
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.alert__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
}

.alert__close:hover {
  background: rgba(60, 64, 67, 0.08);
  opacity: 1;
}

.alert--inline {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  border-width: 1px;
  border-left-width: 1px;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  font-size: 0.875rem;
}

.alert--inline .icon {
  width: 16px;
  height: 16px;
  color: var(--tone);
}

/* ---------- Badge and pill styles ---------- */

.badge--soft,
.pill--soft {
  border-color: transparent;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.badge--solid,
.pill--solid {
  border-color: transparent;
  background: var(--tone);
  color: var(--tone-on);
}

.badge--outline,
.pill--outline {
  border-color: var(--tone);
  background: var(--color-surface);
  color: var(--tone-ink);
}

.badge--dashed,
.pill--dashed {
  border: 1px dashed var(--tone);
  background: transparent;
  color: var(--tone-ink);
}

.badge--dot::before,
.pill--dot::before {
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--tone);
  content: "";
}

.badge--square { border-radius: var(--radius-sm); }

/* ---------- Docs helper: combination matrix (style/index.html) ---------- */

.combo {
  display: grid;
  gap: var(--space-2);
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
}

.combo__row {
  display: grid;
  grid-template-columns: 6.5rem repeat(var(--cols, 8), minmax(84px, 1fr));
  gap: var(--space-2);
  align-items: stretch;
  min-width: max-content;
}

.combo__row > * {
  min-width: 0;
}

.combo__head {
  display: grid;
  align-items: center;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.combo__head--col {
  justify-items: center;
}

.combo .ui-card {
  gap: var(--space-1);
  min-height: 78px;
  padding: var(--space-3);
  font-size: 0.8rem;
}

.combo .ui-card h3 {
  margin: 0;
  font-size: 0.85rem;
}

.combo .alert {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
}

.combo .button {
  width: 100%;
}

/* ==========================================================================
   Color scales: 13 hues x 10 steps (50 lightest -> 900 darkest).
   Use as var(--blue-600), var(--teal-100), ... Demo: style/index.html#scales
   ========================================================================== */

:root {
  --blue-50: #e8f0fe; --blue-100: #d2e3fc; --blue-200: #aecbfa; --blue-300: #8ab4f8; --blue-400: #669df6; --blue-500: #4285f4; --blue-600: #1a73e8; --blue-700: #1967d2; --blue-800: #185abc; --blue-900: #174ea6;
  --indigo-50: #e8eaf6; --indigo-100: #c5cae9; --indigo-200: #9fa8da; --indigo-300: #7986cb; --indigo-400: #5c6bc0; --indigo-500: #3f51b5; --indigo-600: #3949ab; --indigo-700: #303f9f; --indigo-800: #283593; --indigo-900: #1a237e;
  --purple-50: #f3e8fd; --purple-100: #e9d2fd; --purple-200: #d7aefb; --purple-300: #c58af9; --purple-400: #af5cf7; --purple-500: #a142f4; --purple-600: #9334e6; --purple-700: #8430ce; --purple-800: #7627bb; --purple-900: #681da8;
  --pink-50: #fde7f3; --pink-100: #fdcfe8; --pink-200: #fba9d6; --pink-300: #ff8bcb; --pink-400: #ff63b8; --pink-500: #f538a0; --pink-600: #e52592; --pink-700: #d01884; --pink-800: #b80672; --pink-900: #9c166b;
  --red-50: #fce8e6; --red-100: #fad2cf; --red-200: #f6aea9; --red-300: #f28b82; --red-400: #ee675c; --red-500: #ea4335; --red-600: #d93025; --red-700: #c5221f; --red-800: #b31412; --red-900: #a50e0e;
  --orange-50: #feefe3; --orange-100: #fedfc8; --orange-200: #fdc69c; --orange-300: #fcad70; --orange-400: #fa903e; --orange-500: #fa7b17; --orange-600: #e8710a; --orange-700: #d56e0c; --orange-800: #c26401; --orange-900: #b06000;
  --yellow-50: #fef7e0; --yellow-100: #feefc3; --yellow-200: #fde293; --yellow-300: #fdd663; --yellow-400: #fcc934; --yellow-500: #fbbc04; --yellow-600: #f9ab00; --yellow-700: #f29900; --yellow-800: #ea8600; --yellow-900: #e37400;
  --lime-50: #f9fbe7; --lime-100: #f0f4c3; --lime-200: #e6ee9c; --lime-300: #dce775; --lime-400: #d4e157; --lime-500: #cddc39; --lime-600: #c0ca33; --lime-700: #afb42b; --lime-800: #9e9d24; --lime-900: #827717;
  --green-50: #e6f4ea; --green-100: #ceead6; --green-200: #a8dab5; --green-300: #81c995; --green-400: #5bb974; --green-500: #34a853; --green-600: #1e8e3e; --green-700: #188038; --green-800: #137333; --green-900: #0d652d;
  --teal-50: #e0f2f1; --teal-100: #b2dfdb; --teal-200: #80cbc4; --teal-300: #4db6ac; --teal-400: #26a69a; --teal-500: #009688; --teal-600: #00897b; --teal-700: #00796b; --teal-800: #00695c; --teal-900: #004d40;
  --cyan-50: #e4f7fb; --cyan-100: #cbf0f8; --cyan-200: #a1e4f2; --cyan-300: #78d9ec; --cyan-400: #4ecde6; --cyan-500: #24c1e0; --cyan-600: #12b5cb; --cyan-700: #129eaf; --cyan-800: #098591; --cyan-900: #007b83;
  --brown-50: #efebe9; --brown-100: #d7ccc8; --brown-200: #bcaaa4; --brown-300: #a1887f; --brown-400: #8d6e63; --brown-500: #795548; --brown-600: #6d4c41; --brown-700: #5d4037; --brown-800: #4e342e; --brown-900: #3e2723;
  --grey-50: #f8f9fa; --grey-100: #f1f3f4; --grey-200: #e8eaed; --grey-300: #dadce0; --grey-400: #bdc1c6; --grey-500: #9aa0a6; --grey-600: #80868b; --grey-700: #5f6368; --grey-800: #3c4043; --grey-900: #202124;
}

/* ==========================================================================
   Typography system: fixed px scale (no fluid ranges).
   Desktop values below; one mobile step at <=720px redefines the tokens.
   ========================================================================== */

:root {
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-mono: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-serif: "Roboto Serif", Georgia, "Times New Roman", serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", sans-serif;

  /* size / line-height pairs */
  --text-display-xl: 64px;  --lh-display-xl: 72px;
  --text-display-lg: 56px;  --lh-display-lg: 64px;
  --text-display: 48px;     --lh-display: 56px;
  --text-heading-xl: 40px;  --lh-heading-xl: 48px;
  --text-heading-lg: 32px;  --lh-heading-lg: 40px;
  --text-heading: 24px;     --lh-heading: 32px;
  --text-title-lg: 20px;    --lh-title-lg: 28px;
  --text-title: 18px;       --lh-title: 26px;
  --text-title-sm: 16px;    --lh-title-sm: 24px;
  --text-body-lg: 18px;     --lh-body-lg: 28px;
  --text-body: 16px;        --lh-body: 26px;
  --text-body-sm: 14px;     --lh-body-sm: 22px;
  --text-caption: 12px;     --lh-caption: 18px;
  --text-micro: 11px;       --lh-micro: 16px;
}

@media (max-width: 720px) {
  :root {
    --text-display-xl: 44px;  --lh-display-xl: 52px;
    --text-display-lg: 40px;  --lh-display-lg: 48px;
    --text-display: 36px;     --lh-display: 44px;
    --text-heading-xl: 32px;  --lh-heading-xl: 40px;
    --text-heading-lg: 26px;  --lh-heading-lg: 34px;
    --text-heading: 22px;     --lh-heading: 30px;
  }
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
}

h1 {
  font-size: var(--text-heading-xl);
  line-height: var(--lh-heading-xl);
  letter-spacing: -0.03em;
}

h2,
.docs-section__header h2,
.docs-card__body h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--text-title);
  line-height: var(--lh-title);
}

.docs-hero h1 {
  max-width: 24ch;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
}

.lead,
.docs-hero .lead {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

/* Type scale classes: apply to any element */
.text-display-xl { font-size: var(--text-display-xl); line-height: var(--lh-display-xl); font-weight: 700; letter-spacing: -0.04em; }
.text-display-lg { font-size: var(--text-display-lg); line-height: var(--lh-display-lg); font-weight: 700; letter-spacing: -0.04em; }
.text-display    { font-size: var(--text-display);    line-height: var(--lh-display);    font-weight: 700; letter-spacing: -0.035em; }
.text-heading-xl { font-size: var(--text-heading-xl); line-height: var(--lh-heading-xl); font-weight: 700; letter-spacing: -0.03em; }
.text-heading-lg { font-size: var(--text-heading-lg); line-height: var(--lh-heading-lg); font-weight: 700; letter-spacing: -0.025em; }
.text-heading    { font-size: var(--text-heading);    line-height: var(--lh-heading);    font-weight: 700; letter-spacing: -0.02em; }
.text-title-lg   { font-size: var(--text-title-lg);   line-height: var(--lh-title-lg);   font-weight: 700; letter-spacing: -0.01em; }
.text-title      { font-size: var(--text-title);      line-height: var(--lh-title);      font-weight: 700; }
.text-title-sm   { font-size: var(--text-title-sm);   line-height: var(--lh-title-sm);   font-weight: 500; }
.text-body-lg    { font-size: var(--text-body-lg);    line-height: var(--lh-body-lg);    font-weight: 400; }
.text-body       { font-size: var(--text-body);       line-height: var(--lh-body);       font-weight: 400; }
.text-body-sm    { font-size: var(--text-body-sm);    line-height: var(--lh-body-sm);    font-weight: 400; }
.text-caption    { font-size: var(--text-caption);    line-height: var(--lh-caption);    font-weight: 400; }
.text-micro      { font-size: var(--text-micro);      line-height: var(--lh-micro);      font-weight: 500; letter-spacing: 0.02em; }
.text-overline   { font-size: var(--text-caption);    line-height: var(--lh-caption);    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }
.font-serif { font-family: var(--font-serif); }
.font-condensed { font-family: var(--font-condensed); }
.italic { font-style: italic; }

/* ==========================================================================
   Wider layout
   ========================================================================== */

.shell {
  width: min(1320px, calc(100% - 48px));
}

.docs-topbar__inner,
.docs-layout {
  width: min(1680px, calc(100% - 48px));
}

@media (max-width: 860px) {
  .shell,
  .docs-topbar__inner,
  .docs-layout {
    width: calc(100% - 32px);
  }
}

.docs-section__header {
  max-width: 880px;
}

/* ==========================================================================
   Fixes: legacy semantic colors use the soft/ink tokens (better contrast)
   ========================================================================== */

.badge--success, .pill--success,
.badge--warning,
.badge--danger {
  border-color: transparent;
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.alert--success,
.alert--warning,
.alert--danger {
  background: var(--tone-soft);
}

.alert--info {
  --tone: var(--color-accent);
  --tone-soft: var(--color-accent-soft);
  --tone-ink: var(--color-accent-deep);
}

/* ==========================================================================
   Docs helpers: tokens, color scales, type scale, icon library
   ========================================================================== */

/* Color scale ramp */
.scale-ramp {
  display: grid;
  grid-template-columns: 7rem repeat(10, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.scale-ramp__name {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--space-3);
  font-weight: 700;
}

.scale-ramp__name small {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 400;
}

.scale-ramp__step {
  display: grid;
  align-content: end;
  gap: 1px;
  min-height: 84px;
  padding: var(--space-2);
  background: var(--c);
  color: var(--on, #202124);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.3;
}

.scale-ramp__step b {
  font-family: var(--font-body);
  font-size: var(--text-caption);
}

.scale-stack {
  display: grid;
  gap: var(--space-2);
}

/* Tonal pair sample */
.tonal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.tonal-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.tonal-card > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  font-weight: 500;
}

.tonal-card code {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--text-micro);
  opacity: 0.85;
}

/* Spacing / radius / shadow token visuals */
.token-bar {
  height: 12px;
  border-radius: 2px;
  background: var(--blue-300);
}

.token-radius {
  width: 64px;
  height: 48px;
  border: 2px solid var(--color-accent);
  background: var(--color-accent-soft);
}

.token-shadow {
  display: grid;
  min-height: 88px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-body-sm);
}

/* Type scale table */
.type-scale {
  min-width: 1000px;
  table-layout: fixed;
}

.type-scale th:nth-child(1) { width: 15%; }
.type-scale th:nth-child(2) { width: 33%; }
.type-scale th:nth-child(3),
.type-scale th:nth-child(4) { width: 12%; }
.type-scale th:nth-child(5),
.type-scale th:nth-child(6) { width: 8%; }

.type-scale td:nth-child(2) > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-scale code {
  white-space: nowrap;
}

.font-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.font-family-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
}

.font-family-card__aa {
  font-size: 72px;
  line-height: 1;
}

.font-family-card__glyphs {
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.weight-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3) 0;
}

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

.weight-row span:last-child {
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
}

/* Icon library */
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 40px; height: 40px; }
.icon--thin { stroke-width: 1.5; }

.icon-chip {
  --tone: var(--color-accent);
  --tone-soft: var(--color-accent-soft);
  --tone-ink: var(--color-accent-deep);
  --tone-on: #ffffff;
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--tone-soft);
  color: var(--tone-ink);
}

.icon-chip .icon { width: 20px; height: 20px; }
.icon-chip--round { border-radius: 50%; }
.icon-chip--solid { background: var(--tone); color: var(--tone-on); }
.icon-chip--outline { border: 1px solid var(--tone); background: var(--color-surface); }
.icon-chip--sm { width: 28px; height: 28px; }
.icon-chip--sm .icon { width: 16px; height: 16px; }
.icon-chip--lg { width: 56px; height: 56px; }
.icon-chip--lg .icon { width: 28px; height: 28px; }

.icon-library {
  display: grid;
  gap: var(--space-5);
}

.icon-library h3 {
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-body-sm);
}

.icon-library .icon-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2);
}

.icon-library .icon-card {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
  font: inherit;
  transition: border-color 120ms, background 120ms;
}

.icon-library .icon-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.icon-library .icon-card .icon {
  width: 24px;
  height: 24px;
  color: var(--color-ink);
}

.icon-library .icon-card span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

.icon-library .icon-card.is-copied {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

@media (max-width: 720px) {
  .scale-ramp {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .scale-ramp__name {
    grid-column: 1 / -1;
  }
}

.icon-library [hidden] {
  display: none;
}

/* Fix: list items with inline markup (code, strong, links) must stay one text
   flow. Marker is absolutely positioned instead of being a grid column. */
.checklist li,
.findings li {
  position: relative;
  display: block;
}

.checklist li {
  padding-left: 30px;
}

.checklist li::before {
  position: absolute;
  top: 0;
  left: 0;
}

.findings li {
  min-height: 28px;
  padding-left: 40px;
  padding-top: 2px;
}

.findings li::before {
  position: absolute;
  top: 0;
  left: 0;
}

/* Mobile docs sidebar: one horizontal scroll row instead of a full-screen list. */
@media (max-width: 860px) {
  .docs-sidebar {
    padding: var(--space-2);
  }

  .docs-sidebar > p,
  .docs-nav p {
    display: none;
  }

  .docs-nav {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .docs-nav a {
    flex: none;
    white-space: nowrap;
  }
}

/* Badges/pills never wrap mid-label. */
.badge,
.pill {
  white-space: nowrap;
}

/* Segmented control scrolls instead of overflowing on narrow screens. */
.segmented {
  max-width: 100%;
  overflow-x: auto;
}

/* Fix: inline labels inside grid list items keep their natural width. */
.timeline li > .badge,
.timeline li > .pill,
.timeline li > .verdict,
.timeline li > .delta {
  justify-self: start;
}

/* Bar chart: labels truncate on one line; label width adjustable per chart
   with style="--label-width: 14rem". */
.bar-chart li {
  grid-template-columns: minmax(80px, var(--label-width, 9rem)) minmax(0, 1fr) 4.5rem;
}

.bar-chart li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .bar-chart li {
    grid-template-columns: 1fr 4.5rem;
  }
}

/* No line-length caps: text runs the full width of its container. */
h1,
h2,
h3,
.lead,
.docs-hero h1,
.docs-hero .lead,
.docs-section__header,
.prose,
.type-body,
.font-card--body .font-sample,
.empty-state p {
  max-width: none;
}


/* ==========================================================================
   Theme-aware colors. Light values here; dark values below.
   Dark mode: automatic via prefers-color-scheme, or force with
   <html data-theme="dark"> / <html data-theme="light">.
   ========================================================================== */

:root {
  --color-surface-2: #fbfcff;
  --color-muted-fill: #bdc1c6;
  --color-on-accent: #ffffff;
  --code-bg: #111827;
  --code-bar: #1f2937;
  --code-border: #2d3748;
}

.hero__content { background: color-mix(in srgb, var(--color-surface) 82%, transparent); }
.button, .button:hover { color: var(--color-on-accent); }
.button--solid, .button--solid:hover { color: var(--tone-on); }
.button--secondary, .button--secondary:hover, .button--ghost, .button--ghost:hover { color: var(--color-accent-deep); }
.button--secondary:hover { background: var(--color-accent-soft); }
.button--tonal, .button--tonal:hover, .button--outline, .button--outline:hover,
.button--dashed, .button--dashed:hover, .button--text, .button--text:hover,
.button--elevated, .button--elevated:hover, .button--link { color: var(--tone-ink); }
.button--success, .button--danger { color: var(--tone-on); }
code { background: color-mix(in srgb, var(--color-surface) 64%, transparent); border-color: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.docs-topbar, .docs-sidebar { background: var(--color-surface); }
.docs-brand__mark { color: var(--color-on-accent); }
.docs-table th, .docs-table--striped tbody tr:nth-child(even) td, .tabs,
.prompt-card__footer, .log, .diff__file, details.disclosure > summary:hover,
.accordion summary:hover { background: var(--color-surface-2); }
.code-block { border-color: var(--code-border); background: var(--code-bg); }
.code-window { border-color: var(--code-border); background: var(--code-bg); }
.code-window__bar { border-bottom-color: var(--code-border); background: var(--code-bar); }
.preview-frame {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-line) 45%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-line) 45%, transparent) 1px, transparent 1px),
    var(--color-surface);
  background-size: 28px 28px;
}
.media-thumb {
  background:
    linear-gradient(135deg, rgba(26, 115, 232, 0.18), rgba(52, 168, 83, 0.18)),
    linear-gradient(45deg, var(--color-neutral-soft) 25%, transparent 25%),
    var(--color-surface);
  background-size: auto, 18px 18px, auto;
}
.empty-state { background: color-mix(in srgb, var(--color-accent-soft) 58%, transparent); }
.bar-chart li.is-muted .bar-chart__bar, .switch input { background: var(--color-muted-fill); }
.timeline .is-pending { --dot: var(--color-muted-fill); }
.checklist li::before { border-color: var(--color-muted); }
.checklist li.is-done::before { border-color: var(--color-success); }
.findings li::before { color: var(--color-on-accent); }
.compare__item.is-winner::after, .checklist li.is-done::before { color: var(--color-on-accent); }
.column-chart {
  background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px),
    color-mix(in srgb, var(--color-line) 70%, transparent) calc(25% - 1px),
    color-mix(in srgb, var(--color-line) 70%, transparent) 25%);
}
.placeholder {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--color-line) 60%, transparent) 10px 11px),
    var(--color-neutral-soft);
}
.skeleton {
  background: linear-gradient(90deg, var(--color-neutral-soft) 25%, var(--color-surface-2) 50%, var(--color-neutral-soft) 75%) 0 0 / 200% 100%;
}
mark { background: var(--color-warning-soft); }
.alert__close:hover { background: color-mix(in srgb, var(--color-ink) 8%, transparent); }
.legend li[style*="#bdc1c6"]::before { background: var(--color-muted-fill); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ink: #e8eaed;
    --color-muted: #9aa0a6;
    --color-canvas: #111318;
    --color-surface: #1b1d22;
    --color-surface-2: #22252b;
    --color-line: #3c4043;
    --color-muted-fill: #5f6368;
    --color-accent: #8ab4f8;
    --color-accent-deep: #aecbfa;
    --color-accent-soft: #1f2b40;
    --color-on-accent: #202124;
    --color-success: #81c995;
    --color-success-soft: #1c3324;
    --color-warning: #fdd663;
    --color-warning-soft: #3a3120;
    --color-warning-ink: #fdd663;
    --color-danger: #f28b82;
    --color-danger-soft: #3d2422;
    --color-neutral-soft: #2a2d33;
    --code-bg: #0b0d12;
    --code-bar: #161a22;
    --code-border: #3c4043;
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45);
    --series-1: #8ab4f8;
    --series-2: #78d9ec;
    --series-3: #fcad70;
    --series-4: #c58af9;
    --series-5: #81c995;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --color-ink: #e8eaed;
    --color-muted: #9aa0a6;
    --color-canvas: #111318;
    --color-surface: #1b1d22;
    --color-surface-2: #22252b;
    --color-line: #3c4043;
    --color-muted-fill: #5f6368;
    --color-accent: #8ab4f8;
    --color-accent-deep: #aecbfa;
    --color-accent-soft: #1f2b40;
    --color-on-accent: #202124;
    --color-success: #81c995;
    --color-success-soft: #1c3324;
    --color-warning: #fdd663;
    --color-warning-soft: #3a3120;
    --color-warning-ink: #fdd663;
    --color-danger: #f28b82;
    --color-danger-soft: #3d2422;
    --color-neutral-soft: #2a2d33;
    --code-bg: #0b0d12;
    --code-bar: #161a22;
    --code-border: #3c4043;
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45);
    --series-1: #8ab4f8;
    --series-2: #78d9ec;
    --series-3: #fcad70;
    --series-4: #c58af9;
    --series-5: #81c995;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-card, :root:not([data-theme="light"]) .alert, :root:not([data-theme="light"]) .button, :root:not([data-theme="light"]) .badge, :root:not([data-theme="light"]) .pill, :root:not([data-theme="light"]) .icon-chip, :root:not([data-theme="light"]) .tone--accent { --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--success, :root:not([data-theme="light"]) .alert--success, :root:not([data-theme="light"]) .badge--success, :root:not([data-theme="light"]) .pill--success, :root:not([data-theme="light"]) .button--success, :root:not([data-theme="light"]) .ui-card--success { --tone: #81c995; --tone-soft: #1c3324; --tone-ink: #a8dab5; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--warning, :root:not([data-theme="light"]) .alert--warning, :root:not([data-theme="light"]) .badge--warning, :root:not([data-theme="light"]) .ui-card--warning { --tone: #fdd663; --tone-soft: #3a3120; --tone-ink: #fde293; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--danger, :root:not([data-theme="light"]) .alert--danger, :root:not([data-theme="light"]) .badge--danger, :root:not([data-theme="light"]) .button--danger { --tone: #f28b82; --tone-soft: #3d2422; --tone-ink: #f6aea9; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--neutral { --tone: #9aa0a6; --tone-soft: #2a2d33; --tone-ink: #dadce0; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--purple { --tone: #c58af9; --tone-soft: #2e2240; --tone-ink: #d7aefb; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--teal { --tone: #78d9ec; --tone-soft: #17323a; --tone-ink: #a1e4f2; --tone-on: #202124; }
  :root:not([data-theme="light"]) .tone--orange { --tone: #fcad70; --tone-soft: #3b2a1c; --tone-ink: #fdc69c; --tone-on: #202124; }
  :root:not([data-theme="light"]) .heatmap__cell { background: rgba(138, 180, 248, calc(0.08 + var(--intensity, 0) * 0.8)); }
  :root:not([data-theme="light"]) .heatmap__cell.is-dark { color: #202124; }
  :root:not([data-theme="light"]) .matrix .heatmap__cell.is-correct { background: rgba(129, 201, 149, calc(0.12 + var(--intensity, 0) * 0.8)); }
  :root:not([data-theme="light"]) .tooltip::after { background: #e8eaed; color: #202124; }
  :root:not([data-theme="light"]) .media-thumb--photo { filter: brightness(0.85); }
  :root:not([data-theme="light"]) img { color-scheme: normal; }
}

:root[data-theme="dark"] .ui-card, :root[data-theme="dark"] .alert, :root[data-theme="dark"] .button, :root[data-theme="dark"] .badge, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .icon-chip, :root[data-theme="dark"] .tone--accent { --tone-on: #202124; }
:root[data-theme="dark"] .tone--success, :root[data-theme="dark"] .alert--success, :root[data-theme="dark"] .badge--success, :root[data-theme="dark"] .pill--success, :root[data-theme="dark"] .button--success, :root[data-theme="dark"] .ui-card--success { --tone: #81c995; --tone-soft: #1c3324; --tone-ink: #a8dab5; --tone-on: #202124; }
:root[data-theme="dark"] .tone--warning, :root[data-theme="dark"] .alert--warning, :root[data-theme="dark"] .badge--warning, :root[data-theme="dark"] .ui-card--warning { --tone: #fdd663; --tone-soft: #3a3120; --tone-ink: #fde293; --tone-on: #202124; }
:root[data-theme="dark"] .tone--danger, :root[data-theme="dark"] .alert--danger, :root[data-theme="dark"] .badge--danger, :root[data-theme="dark"] .button--danger { --tone: #f28b82; --tone-soft: #3d2422; --tone-ink: #f6aea9; --tone-on: #202124; }
:root[data-theme="dark"] .tone--neutral { --tone: #9aa0a6; --tone-soft: #2a2d33; --tone-ink: #dadce0; --tone-on: #202124; }
:root[data-theme="dark"] .tone--purple { --tone: #c58af9; --tone-soft: #2e2240; --tone-ink: #d7aefb; --tone-on: #202124; }
:root[data-theme="dark"] .tone--teal { --tone: #78d9ec; --tone-soft: #17323a; --tone-ink: #a1e4f2; --tone-on: #202124; }
:root[data-theme="dark"] .tone--orange { --tone: #fcad70; --tone-soft: #3b2a1c; --tone-ink: #fdc69c; --tone-on: #202124; }
:root[data-theme="dark"] .heatmap__cell { background: rgba(138, 180, 248, calc(0.08 + var(--intensity, 0) * 0.8)); }
:root[data-theme="dark"] .heatmap__cell.is-dark { color: #202124; }
:root[data-theme="dark"] .matrix .heatmap__cell.is-correct { background: rgba(129, 201, 149, calc(0.12 + var(--intensity, 0) * 0.8)); }
:root[data-theme="dark"] .tooltip::after { background: #e8eaed; color: #202124; }
:root[data-theme="dark"] .media-thumb--photo { filter: brightness(0.85); }
:root[data-theme="dark"] img { color-scheme: normal; }

/* Theme toggle button (style/index.html) */
.theme-toggle .icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: inline-block; }