/* midi2hid — a piano. Warm white, black keys along the top, a record-light red; Bricolage
   Grotesque for headings and prose, Martian Mono for code. */
:root {
  --page-bg: #f6f3ee; --page-text: #151515; --page-muted: #5d5a55; --page-line: #d8d2c8; --page-accent: #d0342c;
  --strong: #000; --surface: #ffffff; --raise: #ebe6dd; --code-bg: #151515; --code-text: #f3efe7;
  --page-ui: "Bricolage Grotesque", system-ui, sans-serif; --display: var(--page-ui); --mono: "Martian Mono", ui-monospace, monospace;
  --k-ink: #151515; --k-accent: #d0342c; --k-a: #a35d1d; --k-b: #2d5d8a; --k-c: #6a4fa0; --k-d: #a8457a;
  --k-ok: #2f7d4a; --k-warn: #9a6b0c; --k-err: #b4321f; --k-muted: #8d8a84; --k-file: #5d5a55;
  color-scheme: light;
}
.keys { height: 34px; background:
  linear-gradient(90deg, transparent 0 14px, #151515 14px 22px, transparent 22px 36px, #151515 36px 44px, transparent 44px 70px,
    #151515 70px 78px, transparent 78px 92px, #151515 92px 100px, transparent 100px 114px, #151515 114px 122px, transparent 122px) 0 0 / 136px 22px repeat-x,
  repeating-linear-gradient(90deg, #fff 0 18.4px, #d8d2c8 18.4px 19.4px) 0 0 / 100% 34px; border-bottom: 2px solid #151515; }
h1 { font: 800 clamp(48px, 8vw, 92px)/0.95 var(--display); letter-spacing: -0.04em; }
h1::after { content: ""; display: inline-block; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--page-accent);
  margin-left: 0.12em; vertical-align: 0.55em; box-shadow: 0 0 14px #d0342c99; }
h2 { font: 750 clamp(26px, 3.2vw, 36px)/1.1 var(--display); letter-spacing: -0.02em; }
.lede { font-size: 20px; }
.fig { padding: 14px 10px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 10px; }
.dg .lab-bg { fill: var(--surface); } .dg .halo { stroke: var(--surface); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
figure.code { margin: 16px 0; } figure.code figcaption { font: 12px var(--mono); color: var(--page-muted); margin-bottom: 4px; }
figure.code figcaption code { background: none; color: inherit; padding: 0; }
figure.code pre { margin: 0; padding: 14px 16px; background: var(--code-bg); color: var(--code-text); border-radius: 10px; font: 12.5px/1.6 var(--mono); overflow-x: auto; }
:not(pre) > code { background: var(--raise); color: var(--page-text); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
td.no { color: #9a3b2f; }
.note { color: var(--page-muted); font-size: 15px; }