@font-face{
  font-family:"Commit Mono";
  src:url("../fonts/CommitMono-VF.woff2") format("woff2-variations"),
      url("../fonts/CommitMono-VF.woff2") format("woff2");
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

/* The wordmark display face, self-hosted (latin subset) so the hero does not
   depend on a third-party font fetch at first paint. The tool still loads
   Google Fonts specimens at runtime by design (site/js/fonts.js). */
@font-face{
  font-family:"Archivo Black";
  src:url("../fonts/ArchivoBlack-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-mono:"Commit Mono","Berkeley Mono","JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  --space-1:0.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem;
  --max-width:62rem;
  --nav-height:2.75rem;
  --hud-height:2.75rem;
  --radius:3px; /* keycaps only: buttons, inputs, and panels stay square */

  /* light */
  --bg:#f4f4f2;
  --fg:#111111;
  --fg-muted:#6b6b6b;
  --fg-faint:#9a9a95;
  --border:#d8d8d4;

  /* Brand hues, kept for the brand assets (the lockup SVG and favicon use the
     pink). The page itself is greyscale, so no rule consumes these; the gold's
     softness on paper is the user's explicit call ("the gold was fine"), do
     not darken it again. */
  --accent:#e62660;
  --accent-gold:#ffb834;

  /* Annotation hairline opacity. The color is the greyscale --fg-muted
     (hero.css); only the density is per-theme, because a mid grey needs more
     alpha to survive on paper than on the dark surface. */
  --anno-al:0.85;
  --anno-label-al:0.92;
}

/* The alternate theme: the stock house dark set, so this site reads like the
   other fuzzyporpoise sites (the old specimen navy is retired). */
[data-theme="dark"]{
  --bg:#0d0d0d;
  --fg:#ededed;
  --fg-muted:#888888;
  --fg-faint:#5f5f5f;
  --border:#2a2a2a;
  --anno-al:0.5;
  --anno-label-al:0.7;
}

[data-contrast="high"]{--border:currentColor;}
[data-theme="light"][data-contrast="high"]{
  --bg:#ffffff; --fg:#000000; --fg-muted:#333333; --fg-faint:#555555;
}
[data-theme="dark"][data-contrast="high"]{
  --bg:#000000; --fg:#ffffff; --fg-muted:#cfcfcf; --fg-faint:#9a9a9a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* The annotation labels and the clamp()-floored wordmark overflow narrow
   viewports by design, as on the shipped page; clip rather than scroll
   sideways. The clip must live on html (a body-only one does not reach the
   viewport here). */
html{overflow-x:hidden;}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-mono); font-size:15px; font-weight:450; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Clearance for the fixed key legend, which only exists while it is shown. */
  padding-bottom:calc(var(--hud-height) + var(--space-2));
  transition:background-color .15s ease,color .15s ease;
}
[data-hud="hidden"] body{padding-bottom:var(--space-3);}
h1,p{margin:0;font-weight:450;}
/* Square surfaces: buttons, inputs, and panels take no radius. `--radius` is
   for keycaps only (house style, `polydocs/docs/styleme/lisa_barry.md`). */
button,input,textarea,select{border-radius:0;}
kbd{
  display:inline-block;min-width:1.4em;text-align:center;padding:0.1em 0.4em;
  border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:11px;color:var(--fg);
}
.wrap{max-width:var(--max-width);margin:0;padding:0 var(--space-3);width:100%;}

/* Focus is a color inversion, like a terminal selection. */
button:focus-visible{background:var(--fg);color:var(--bg);outline:none;}
input:focus-visible{background:var(--fg);color:var(--bg);outline:none;}