/* robouse.ai design tokens: the one source for fonts, colour, type, spacing, radii, borders, elevation, motion and
   control sizes. Linked first on every page (tools/chrome.py LINK, enforced by `chrome.py check`); every other
   stylesheet (chrome, prose, surface, ui, filetree, site, hub, runs, docs, the article) uses only these values.
   Scales:
     controls --ctl-xs 24 · --ctl-sm 30 · --ctl 34 · --ctl-lg 40 · --ctl-xl 48 (hero search); --touch 44 is the minimum on touch screens
     spacing  --sp-N is N px, from one 2/4 px step scale: 2 4 6 8 10 12 14 16 20 24 28 32 36 40 48 56 64 72 88
     radius   --r-2xs 2 (data marks), --r-xs 4, --r-sm 6, --r-md 8, --r-lg 12, --r-xl 18, --r-pill
     type     --fs-micro 11 · caption 12 · meta 13 · small 14 · ui 15 · body 16 · h3 17 · lede 18 · h4 20 · h2 24 · h1 36
     motion   --t-fast .12s · --t .2s · --t-slow .32s, one easing; all zero under prefers-reduced-motion */

@font-face{font-family:"Commit Mono";font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/CommitMono-400.woff2) format("woff2")}
@font-face{font-family:"Commit Mono";font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/CommitMono-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:optional;src:url(/fonts/Inter.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:optional;src:url(/fonts/SourceSerif4.woff2) format("woff2")}

:root{
  /* families */
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Source Serif 4",Georgia,serif;
  --mono:"Commit Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* colour, light: neutral greys and one accent. Text tokens pass WCAG AA (4.5:1) on --paper and --panel:
     ink 17.6, ink2 11.2, muted 6.3, faint 4.6. --line and --line-strong are for hairlines only. */
  --paper:#f7f7f7;--panel:#fcfcfc;--sunk:#f0f0f0;
  --ink:#141414;--ink2:#3a3a3a;--muted:#5e5e5e;--faint:#6f6f6f;--ghost:#b4b4b4;
  --line:#e2e2e2;--line-strong:#cbcbcb;--link-line:#c4c4c4;
  --accent:#3552f2;--accent-ink:#fff;--accent-soft:rgb(53 82 242 / .09);
  --ok:#1d7a47;--no:#b3402d;--warn:#8a5c00;
  --btn:#141414;--btn-ink:#f7f7f7;--btn-hover:#000;
  --scrim:rgb(10 10 10 / .55);--media-ink:#fff;--backdrop:rgb(0 0 0 / .35);--media-bg:#000;
  --hover:rgb(20 20 20 / .035);--press:rgb(20 20 20 / .06);
  --focus:rgb(53 82 242 / .6);
  --sel-bg:rgb(53 82 242 / .18);--sel-ink:inherit;
  /* syntax (file previews): quiet, one hue per role, AA on --panel */
  --syn-kw:#2f45c7;--syn-str:#2c6b40;--syn-num:#8f5410;--syn-com:#6f6f6f;--syn-key:#141414;--syn-var:#7a3a91;--syn-fn:#141414;
  /* elevation */
  --shadow-1:0 1px 2px rgb(0 0 0 / .06);
  --shadow-2:0 12px 32px -18px rgb(0 0 0 / .35),0 2px 6px -2px rgb(0 0 0 / .08);
  --shadow-3:0 22px 60px -24px rgb(0 0 0 / .4);
  color-scheme:light;

  /* type scale */
  --fs-micro:11px;--fs-caption:12px;--fs-meta:13px;--fs-small:14px;--fs-ui:15px;--fs-body:16px;
  --fs-h3:17px;--fs-lede:18px;--fs-h4:20px;--fs-h2:24px;--fs-h1:36px;
  --lh-body:1.7;--fs-code:13px;

  /* spacing: --sp-N is N px */
  --sp-2:2px;--sp-4:4px;--sp-6:6px;--sp-8:8px;--sp-10:10px;--sp-12:12px;--sp-14:14px;--sp-16:16px;--sp-20:20px;
  --sp-24:24px;--sp-28:28px;--sp-32:32px;--sp-36:36px;--sp-40:40px;--sp-48:48px;--sp-56:56px;--sp-64:64px;--sp-72:72px;--sp-88:88px;

  /* radii */
  --r-2xs:2px;--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:18px;--r-pill:999px;

  /* borders: one hairline width, two strengths */
  --bw:1px;--hairline:1px solid var(--line);--border:1px solid var(--line-strong);

  /* controls: chips, inputs, selects and buttons share heights, radius and hairline */
  --ctl-xs:24px;--ctl-sm:30px;--ctl:34px;--ctl-lg:40px;--ctl-xl:48px;--ctl-r:var(--r-md);--touch:44px;
  /* a field with focus: accent border and a soft accent halo (inputs, Search, listbox triggers) */
  --focus-line:rgb(53 82 242 / .75);--ring:0 0 0 3px rgb(53 82 242 / .14);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);--t-fast:.12s;--t:.2s;--t-slow:.32s;

  /* grid: the header's container and the reading measure */
  --wide:1120px;--gutter:24px;--measure:680px;
  /* the space between the header and a page's title block, on every route */
  --page-top:72px;
}
html[data-theme="dark"]{
  --paper:#09090a;--panel:#111113;--sunk:#0d0d0e;
  --ink:#f2f2f2;--ink2:#d0d0d0;--muted:#9c9c9c;--faint:#828282;--ghost:#4a4a4c;
  --line:#242426;--line-strong:#3a3a3d;--link-line:#4d4d50;
  --accent:#7289ff;--accent-ink:#0b0b0c;--accent-soft:rgb(114 137 255 / .13);
  --ok:#62c98f;--no:#ef8471;--warn:#d6a547;
  --btn:#e6e6e6;--btn-ink:#0b0b0b;--btn-hover:#fff;
  --scrim:rgb(0 0 0 / .6);--backdrop:rgb(0 0 0 / .55);
  --hover:rgb(255 255 255 / .04);--press:rgb(255 255 255 / .07);
  --focus:rgb(114 137 255 / .7);
  --sel-bg:rgb(114 137 255 / .32);
  --focus-line:rgb(114 137 255 / .8);--ring:0 0 0 3px rgb(114 137 255 / .2);
  --syn-kw:#98a8ff;--syn-str:#86cf9f;--syn-num:#e2ad6c;--syn-com:#828282;--syn-key:#f2f2f2;--syn-var:#d09be3;--syn-fn:#f2f2f2;
  --shadow-1:0 1px 2px rgb(0 0 0 / .5);
  --shadow-2:0 16px 40px -16px rgb(0 0 0 / .8),0 0 0 1px rgb(255 255 255 / .04);
  --shadow-3:0 24px 64px -20px rgb(0 0 0 / .85),0 0 0 1px rgb(255 255 255 / .04);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){html:not([data-theme]){
  --paper:#09090a;--panel:#111113;--sunk:#0d0d0e;
  --ink:#f2f2f2;--ink2:#d0d0d0;--muted:#9c9c9c;--faint:#828282;--ghost:#4a4a4c;
  --line:#242426;--line-strong:#3a3a3d;--link-line:#4d4d50;
  --accent:#7289ff;--accent-ink:#0b0b0c;--accent-soft:rgb(114 137 255 / .13);
  --ok:#62c98f;--no:#ef8471;--warn:#d6a547;
  --btn:#e6e6e6;--btn-ink:#0b0b0b;--btn-hover:#fff;
  --scrim:rgb(0 0 0 / .6);--backdrop:rgb(0 0 0 / .55);
  --hover:rgb(255 255 255 / .04);--press:rgb(255 255 255 / .07);
  --focus:rgb(114 137 255 / .7);
  --sel-bg:rgb(114 137 255 / .32);
  --focus-line:rgb(114 137 255 / .8);--ring:0 0 0 3px rgb(114 137 255 / .2);
  --syn-kw:#98a8ff;--syn-str:#86cf9f;--syn-num:#e2ad6c;--syn-com:#828282;--syn-key:#f2f2f2;--syn-var:#d09be3;--syn-fn:#f2f2f2;
  --shadow-1:0 1px 2px rgb(0 0 0 / .5);
  --shadow-2:0 16px 40px -16px rgb(0 0 0 / .8),0 0 0 1px rgb(255 255 255 / .04);
  --shadow-3:0 24px 64px -20px rgb(0 0 0 / .85),0 0 0 1px rgb(255 255 255 / .04);
  color-scheme:dark;
}}
@media (max-width:640px){:root{--fs-h1:30px;--fs-h2:22px;--fs-lede:17px}}
@media (max-width:560px){:root{--page-top:40px}}
@media (prefers-reduced-motion: reduce){:root{--t-fast:0s;--t:0s;--t-slow:0s}}