:root {
  --bg: #05080a;
  --panel: #0a100a;
  --panel2: #0f1810;
  --text: #d5eadb;
  --muted: #79a184;
  --accent: #00e5ff;
  --good: #39ff14;
  --line: #1d3424;
  --hero: linear-gradient(135deg, #04140a 0%, #0a2a14 100%);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
:root[data-theme="claude"] {
  --bg: #f4ecd8;
  --panel: #fffaf0;
  --panel2: #ede0c4;
  --text: #2b2013;
  --muted: #725f43;
  --accent: #a95418;
  --good: #2f7a3d;
  --line: #d9c9a3;
  --hero: linear-gradient(135deg, #7a3b12 0%, #b5651d 100%);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="claude"] { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.85 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { width: min(920px, calc(100% - 36px)); margin: 0 auto; }
.topbar { background: var(--hero); border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.topbar .wrap { display: flex; gap: 18px; align-items: center; justify-content: space-between; min-height: 58px; }
.brand { color: #fff; font: 800 15px/1.2 var(--mono); letter-spacing: .08em; text-decoration: none; }
.topbar nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.topbar nav a { color: #fff; font: 700 13px/1.2 var(--mono); }
main { padding: 64px 0 80px; }
.eyebrow { color: var(--good); font: 800 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 16ch; margin: 14px 0 18px; font: 800 clamp(34px, 7vw, 58px)/1.15 var(--mono); text-wrap: balance; }
.lead { max-width: 68ch; color: var(--muted); font-size: clamp(18px, 2.4vw, 22px); }
.summary { margin: 38px 0; padding: 22px 24px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 10px; }
.summary strong { color: var(--good); }
article { max-width: 76ch; }
h2 { margin: 48px 0 14px; font: 800 clamp(24px, 4vw, 32px)/1.3 var(--mono); }
h3 { margin: 28px 0 8px; font: 800 20px/1.4 var(--mono); }
p, li { color: color-mix(in srgb, var(--text) 92%, var(--muted)); }
li + li { margin-top: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 24px 0; }
.metric { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.metric b { display: block; color: var(--accent); font: 800 15px/1.4 var(--mono); }
.metric span { display: block; margin-top: 7px; color: var(--muted); font-size: 15px; }
.next-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); }
.next-links a { padding: 9px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; }
footer { padding: 24px 0 44px; color: var(--muted); border-top: 1px solid var(--line); font: 13px/1.6 var(--mono); }
@media (max-width: 600px) {
  .topbar .wrap { align-items: flex-start; flex-direction: column; padding: 14px 0; }
  .topbar nav { justify-content: flex-start; }
  main { padding-top: 44px; }
}