:root {
    --bg: #0c0c0f;
    --bg-2: #131317;
    --fg: #e8e6e1;
    --muted: #9a988f;
    --faint: #5f5d57;
    --rule: #25252b;
    --accent: #8b84ff;
    --ok: #7fd6a4;
    --warn: #e8b86a;
    --sans: ui-sans-serif, -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --wrap: 1040px;
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #faf9f6;
      --bg-2: #f0eee8;
      --fg: #1b1a18;
      --muted: #5f5d57;
      --faint: #9a988f;
      --rule: #dedbd3;
      --accent: #5249e0;
      --ok: #1f8a52;
      --warn: #9a6a12;
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  a:hover { color: var(--accent); text-decoration-color: currentColor; }
  code, pre, kbd { font-family: var(--mono); font-size: 0.86em; }
  :not(pre) > code { background: var(--bg-2); padding: 0.1em 0.35em; border-radius: 4px; }
  img { max-width: 100%; display: block; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

  /* Header */
  header.top { border-bottom: 1px solid var(--rule); }
  header.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; letter-spacing: -0.01em; }
  .brand img { width: 22px; height: 22px; }
  .brand .ver { font: 500 12px var(--mono); color: var(--muted); }
  header.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
  header.top nav a { text-decoration: none; color: var(--muted); }
  header.top nav a:hover { color: var(--fg); }

  /* Hero */
  .hero { padding: 88px 0 72px; }
  .hero .kicker { font: 500 13px var(--mono); color: var(--muted); margin: 0 0 22px; }
  .hero .kicker a { color: var(--accent); }
  .hero h1 {
    font-size: clamp(38px, 6.2vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    margin: 0 0 28px;
    max-width: 14ch;
  }
  .hero .lede { font-size: 20px; color: var(--muted); max-width: 40ch; margin: 0 0 36px; }
  .hero .lede strong { color: var(--fg); font-weight: 550; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 8px;
    font-size: 15px; font-weight: 550; text-decoration: none;
    border: 1px solid var(--rule); color: var(--fg); background: transparent;
  }
  .button:hover { border-color: var(--fg); color: var(--fg); }
  .button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .button.primary:hover { opacity: 0.88; color: var(--bg); }

  /* Transcript */
  .transcript {
    margin: 64px 0 0;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 22px 24px;
    font: 13.5px/1.9 var(--mono);
    overflow-x: auto;
    white-space: pre;
    color: var(--muted);
  }
  .transcript .you { color: var(--fg); }
  .transcript .you::before { content: "› "; color: var(--accent); }
  .transcript .ok { color: var(--ok); }
  .transcript .warn { color: var(--warn); }

  /* Sections */
  section { padding: 88px 0; border-top: 1px solid var(--rule); }
  .section-head { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-bottom: 44px; }
  .section-head .label { font: 500 13px var(--mono); color: var(--muted); padding-top: 10px; }
  .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 680; }
  .section-head p { margin: 0; color: var(--muted); max-width: 58ch; }
  .body-col { margin-left: 252px; }

  /* Changelog */
  .changes { list-style: none; margin: 0; padding: 0; }
  .changes li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .changes code { overflow-wrap: anywhere; }
  .changes li:last-child { border-bottom: 0; }
  .changes li.changes-divider { padding-top: 36px; }
  .changes li.changes-divider p { color: var(--muted); }
  .changes .kind { font: 500 12px/2 var(--mono); color: var(--muted); text-transform: lowercase; }
  .changes .kind.new { color: var(--ok); }
  .changes .kind.security { color: var(--warn); }
  .changes .kind.fix { color: var(--accent); }
  .changes p { margin: 0; }
  .changes p + p { margin-top: 4px; color: var(--muted); font-size: 15px; }

  /* SDK table */
  .sdk { width: 100%; border-collapse: collapse; }
  .sdk td { padding: 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .sdk tr:last-child td { border-bottom: 0; }
  .sdk td:first-child { width: 250px; padding-right: 24px; font: 500 14px/1.7 var(--mono); color: var(--accent); white-space: nowrap; }
  .sdk td:nth-child(2) { color: var(--fg); }
  .sdk td:last-child { width: 150px; text-align: right; font: 12px/2 var(--mono); color: var(--faint); }

  /* Figures */
  figure { margin: 0; }
  figure img { border: 1px solid var(--rule); border-radius: 10px; cursor: zoom-in; }
  figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 70ch; }
  .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }

  /* Steps */
  .steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
  .steps li { counter-increment: s; padding: 18px 0 18px 44px; position: relative; border-top: 1px solid var(--rule); }
  .steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 20px; font: 500 13px var(--mono); color: var(--faint); }
  .steps strong { display: block; font-weight: 600; margin-bottom: 2px; }
  .steps span { color: var(--muted); font-size: 15px; }

  /* Generic tables */
  table.plain { width: 100%; border-collapse: collapse; font-size: 15px; }
  table.plain th { text-align: left; font: 500 12px var(--mono); color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--rule); }
  table.plain td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  table.plain td.m { font-family: var(--mono); font-size: 13.5px; }
  table.plain a { color: var(--accent); }

  /* Roadmap */
  .roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .roadmap h3 { font: 500 13px var(--mono); color: var(--muted); margin: 0 0 12px; text-transform: lowercase; }
  .roadmap ul { margin: 0; padding: 0; list-style: none; }
  .roadmap li { padding: 7px 0; border-top: 1px solid var(--rule); font-size: 15px; }
  .roadmap .done li::before { content: "✓ "; color: var(--ok); }

  pre.block {
    background: var(--bg-2); border: 1px solid var(--rule); border-radius: 10px;
    padding: 18px 20px; overflow-x: auto; line-height: 1.75; margin: 0;
  }
  pre.block .c { color: var(--faint); }

  .note { font-size: 14px; color: var(--muted); margin-top: 20px; max-width: 72ch; }

  .values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
  .values li strong { display: block; margin-bottom: 4px; }
  .values li span { color: var(--muted); font-size: 15px; }

  footer { border-top: 1px solid var(--rule); padding: 36px 0 56px; font-size: 14px; color: var(--muted); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
  footer .tm { flex-basis: 100%; font-size: 13px; }

  .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 10; cursor: zoom-out; }
  .lightbox.open { display: flex; }
  .lightbox img { max-height: 100%; border-radius: 8px; }

  @media (max-width: 860px) {
    header.top nav a:not(.gh) { display: none; }
    .section-head { grid-template-columns: 1fr; gap: 8px; }
    .section-head .label { padding-top: 0; }
    .body-col { margin-left: 0; }
    .steps, .figs, .values { grid-template-columns: 1fr; }
    .roadmap { grid-template-columns: 1fr; gap: 28px; }
    .changes li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .sdk td:last-child { display: none; }
    .sdk td:first-child { width: auto; white-space: normal; }
    .sdk tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
    .sdk td { display: block; border: 0; padding: 0; }
    .hero { padding: 56px 0 48px; }
    section { padding: 64px 0; }
    .table-scroll { overflow-x: auto; }
  }