/* Omni — ivory keycaps. Warm keyboard plastic, ink type and one pink legend colour; every
   section heading is a keycap with a corner legend, like Omni's own swipe characters.
   Display: Rubik. Text: Onest. Code: JetBrains Mono. */

:root {
  --page-bg: #f6f1e6; --page-text: #211c16; --page-muted: #6c6256; --page-line: #e2d8c6;
  --page-accent: #c8336f; --strong: #15110c; --surface: #fffaf1; --raise: #efe7d8;
  --code-bg: #2a2420; --code-text: #f6e7d6;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Rubik", "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --cap: #fffdf8; --cap-edge: #d7cbb5;
  --k-ink: #3a332b; --k-accent: #c8336f; --k-b: #2f6db5; --k-c: #8a5bc4; --k-ok: #2f8a55; --k-muted: #9c9182; --k-file: #6c6256;
  color-scheme: light;
}

.hero h1 { font: 800 clamp(64px, 10vw, 128px)/0.9 var(--display); letter-spacing: -0.04em; }
.part > h2 { font-family: var(--display); }

/* Keycaps: a raised cap with a dished top edge and a corner legend. */
kbd, .part > h2 > span {
  position: relative; display: inline-block; background: linear-gradient(180deg, #fff 0%, var(--cap) 55%, #f3ecdf 100%);
  border: 1px solid var(--cap-edge); border-bottom-width: 4px; border-radius: 12px;
  box-shadow: 0 1px 0 #fff inset, 0 6px 12px -8px rgba(60, 40, 10, 0.35);
}
.part > h2 > span { padding: 0.18em 0.6em 0.22em 0.5em; }
kbd[data-c]::after, .part > h2 > span[data-c]::after {
  content: attr(data-c); position: absolute; top: 4px; right: 7px; font: 600 11px/1 var(--mono); color: var(--page-accent);
}
.part > h2 > span[data-c]::after { font-size: 14px; top: 6px; right: 9px; }

.caps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.caps li { display: flex; align-items: center; gap: 12px; color: var(--page-muted); font-size: 15px; max-width: none; }
.caps kbd { min-width: 82px; text-align: center; padding: 10px 14px 8px; font: 700 14px/1 var(--display); color: var(--strong); letter-spacing: 0.02em; }

.devices { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.shot { margin: 0; }
.shot img { border-radius: 26px; border: 1px solid var(--cap-edge); box-shadow: 0 24px 48px -28px rgba(60, 40, 10, 0.55); background: var(--surface); }
.shot.phone img { width: min(240px, 42vw); }
.shot.watch img { width: min(170px, 32vw); border-radius: 34px; }
.shot.small { justify-self: center; align-self: start; }
.shot.phone.small img { width: min(220px, 60vw); }
.shot.watch.small img { width: min(170px, 50vw); }
.shot figcaption { text-align: center; font-size: 13px; }

.fig { padding: 16px; background: var(--surface); border: 1px solid var(--page-line); border-bottom-width: 3px; border-radius: 14px; }
.dg .node { fill: #fffdf8; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
pre.term { border-radius: 12px; border-bottom: 4px solid #120f0c; }
.term .p::before { content: none; }
table th[scope=row] { white-space: nowrap; }