/* Omni — keycaps. Graphite case, pale caps with a sculpted bottom edge, Nord accents; Rubik for
   the caps and headings, IBM Plex Sans for prose, IBM Plex Mono for key values. */

:root {
  --page-bg: #20242c; --page-text: #e3e6ec; --page-muted: #a7aebb; --page-line: #353b47;
  --page-accent: #8fbcbb; --strong: #ffffff; --surface: #282d37; --raise: #303643;
  --code-bg: #1b1f26; --code-text: #d8dee9;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Rubik", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --k-ink: #e3e6ec; --k-accent: #8fbcbb; --k-b: #81a1c1; --k-c: #d08770; --k-ok: #a3be8c; --k-muted: #8a92a2; --k-file: #a7aebb;
  color-scheme: dark;
}
.hero h1 { display: flex; gap: 10px; margin: 6px 0 22px; }
.hero h1 span { display: grid; place-items: center; width: clamp(56px, 7vw, 86px); aspect-ratio: 1;
  font: 600 clamp(34px, 4.6vw, 56px)/1 var(--display); color: #2e3440;
  background: linear-gradient(#f2f4f8, #d9dee7); border-radius: 12px;
  box-shadow: inset 0 -7px 0 #b9c1ce, 0 3px 0 #10131a, 0 10px 18px -8px #000; }
.hero h1 span:first-child { background: linear-gradient(#a7d1d0, #8fbcbb); box-shadow: inset 0 -7px 0 #6f9e9d, 0 3px 0 #10131a, 0 10px 18px -8px #000; }
.part > h2 { font: 600 clamp(26px, 3vw, 36px)/1.1 var(--display); }
.part > h2::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 12px; border-radius: 5px;
  background: linear-gradient(#f2f4f8, #d9dee7); box-shadow: inset 0 -3px 0 #b9c1ce; vertical-align: 0; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--page-line); }
.shot.kb { max-width: 600px; margin-top: 22px; }
.shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.fig { padding: 16px 12px; background: var(--surface); border-radius: 12px; border: 1px solid var(--page-line); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
table td:first-child { white-space: nowrap; }