/* Self-hosted fonts (SIL Open Font License, see fonts/) */
  @font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 200 500; font-display: swap; src: url(/fonts/azeret-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Azeret Mono'; font-style: normal; font-weight: 200 500; font-display: swap; src: url(/fonts/azeret-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  :root {
    color-scheme: light;
    --bg: #F4F3F1;
    --bg-elev: #FFFFFF;
    --bg-sunk: #E9E8E5;
    --line: rgba(27, 28, 32, .10);
    --line-strong: rgba(27, 28, 32, .22);
    --text: #1B1C20;
    --text-2: #5C606A;
    --text-3: #8E919B;
    --tick: rgba(27, 28, 32, .13);
    --focus: #CF3F26;
    --short: #15806A;
    --long: #4A5AD1;
    --on-accent: #FFFFFF;
    --accent: var(--focus);
    --glow-alpha: .16;
    --shadow-sm: 0 1px 2px rgba(27, 28, 32, .08), 0 2px 6px rgba(27, 28, 32, .06);
    --shadow-lg: 0 24px 60px -24px rgba(27, 28, 32, .35);
    --scrim: rgba(27, 28, 32, .28);
    --dial: clamp(260px, 62vmin, 380px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0E1015;
      --bg-elev: #161920;
      --bg-sunk: #0A0C10;
      --line: rgba(236, 234, 228, .08);
      --line-strong: rgba(236, 234, 228, .18);
      --text: #ECEAE4;
      --text-2: #9DA1AB;
      --text-3: #6B6F7A;
      --tick: rgba(236, 234, 228, .14);
      --focus: #F4644A;
      --short: #45CBA6;
      --long: #8290F7;
      --on-accent: #0E1015;
      --glow-alpha: .22;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
      --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
      --scrim: rgba(0, 0, 0, .5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0E1015;
    --bg-elev: #161920;
    --bg-sunk: #0A0C10;
    --line: rgba(236, 234, 228, .08);
    --line-strong: rgba(236, 234, 228, .18);
    --text: #ECEAE4;
    --text-2: #9DA1AB;
    --text-3: #6B6F7A;
    --tick: rgba(236, 234, 228, .14);
    --focus: #F4644A;
    --short: #45CBA6;
    --long: #8290F7;
    --on-accent: #0E1015;
    --glow-alpha: .22;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
    --scrim: rgba(0, 0, 0, .5);
  }


  * { box-sizing: border-box; }
  html { height: 100%; scroll-behavior: smooth; }
  body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
  a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  a:hover { text-decoration-color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
  .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-decoration: none; font-size: 15px; }
  .mark { width: 20px; height: 20px; }
  .mark-body { fill: var(--focus); }
  .mark-leaf { fill: none; stroke: var(--short); stroke-width: 1.9; stroke-linecap: round; }
  .nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .nav a { color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 7px 11px; border-radius: 8px; }
  .nav a:hover { color: var(--text); background: color-mix(in oklab, var(--text) 6%, transparent); }
  .nav a.cta { color: var(--on-accent); background: var(--accent); }
  .nav a.cta:hover { color: var(--on-accent); background: var(--accent); opacity: .92; }
  article { padding: 28px 0 56px; }
  .crumbs { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
  .crumbs a { color: var(--text-3); }
  h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin: 0 0 14px; text-wrap: balance; }
  .lede { font-size: 19px; color: var(--text-2); line-height: 1.55; margin: 0 0 8px; text-wrap: pretty; }
  .meta { font-size: 13px; color: var(--text-3); margin: 0 0 30px; }
  h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; margin: 44px 0 12px; text-wrap: balance; }
  h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; margin: 28px 0 8px; }
  p { margin: 0 0 16px; text-wrap: pretty; }
  ul, ol { margin: 0 0 16px; padding-left: 24px; }
  li { margin: 6px 0; }
  li::marker { color: var(--text-3); }
  strong { font-weight: 600; }
  blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--text-2); font-style: italic; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
  table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 20px; }
  th, td { text-align: left; padding: 10px 10px 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
  th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; border-top: 0; }
  .table-wrap { overflow-x: auto; }
  code, kbd { font-family: 'Azeret Mono', ui-monospace, monospace; font-size: .88em; }
  kbd { padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--bg-sunk); color: var(--text); white-space: nowrap; }
  .toc { margin: 0 0 8px; padding: 16px 20px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
  .toc h2 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
  .toc ol { margin: 0; padding-left: 20px; column-count: 2; column-gap: 24px; font-size: 15px; }
  .toc li { margin: 3px 0; break-inside: avoid; }
  .toc a { color: var(--text-2); text-decoration: none; }
  .toc a:hover { color: var(--text); }
  .callout { margin: 28px 0; padding: 20px 22px; border-radius: 16px; background: color-mix(in oklab, var(--accent) 8%, var(--bg-elev)); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); }
  .callout p { margin: 0 0 12px; }
  .callout p:last-child { margin: 0; }
  .btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 14.5px; text-decoration: none; }
  .btn:hover { opacity: .92; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .pill { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
  .pill:hover { border-color: var(--accent); color: var(--accent); }
  .faq dt { font-weight: 600; margin-top: 18px; }
  .faq dd { margin: 4px 0 0; color: var(--text-2); }
  .log { list-style: none; padding: 0; }
  .log li { padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
  .log time { display: block; font-family: 'Azeret Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--text-3); margin-bottom: 4px; }
  footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13px; color: var(--text-3); }
  footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
  footer a { color: var(--text-2); text-decoration: none; }
  footer a:hover { color: var(--text); text-decoration: underline; }
  @media (max-width: 640px) { .wrap { padding: 0 18px; } h1 { font-size: 28px; } .lede { font-size: 17px; } .toc ol { column-count: 1; } body { font-size: 16px; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }