/* Metric Grid: graph-paper background, grotesk headings, mono numbers, teal and orange data colors. */
:root {
  --bg: #f6f7f4;
  --surface: #ffffff;
  --ink: #0f1c19;
  --muted: #5c6a66;
  --line: #d3d9d5;
  --accent: #0f7c6e;
  --accent-ink: #ffffff;
  --accent-2: #e3692b;
  --ok: #0f7c6e;
  --bad: #d04a2a;
  --font-display: "Deck Grotesk", var(--cjk), system-ui, sans-serif;
  --font-body: "Deck Sans", var(--cjk), system-ui, sans-serif;
  --radius: 10px;
  --pad: 130px;
  --chart-colors: #0f7c6e, #e3692b, #5b6b73, #d6a21a, #7aa89f;
  --outer: #0b1412;
}
.deck-stage > section {
  background-color: var(--bg);
  background-image: linear-gradient(rgb(15 28 25 / 0.055) 1px, transparent 1px), linear-gradient(90deg, rgb(15 28 25 / 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}
section h1, section h2 { font-weight: 600; letter-spacing: -0.03em; }
section h1 { font-size: 128px; }
section h2 { font-size: 84px; }
section .kicker { color: var(--accent); }
section em { color: var(--accent-2); font-style: normal; }
.stat { border-top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 38px; }
.stat b { font-family: var(--font-mono); font-weight: 600; font-size: 128px; letter-spacing: -0.05em; color: var(--accent); }
section[data-layout="bullets"] li::before { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-2); top: 0.5em; }
section[data-layout="chart"] .chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
section .source { font-family: var(--font-mono); font-size: 20px; }
.match .item { background: var(--accent); }