/* Flotilla — Nord at midnight, like the app. Frost blues on polar night, panes that tile;
   Bricolage Grotesque for headings, Instrument Sans for prose, JetBrains Mono for keys. */

:root {
  --page-bg: #1b2130; --page-text: #e5e9f0; --page-muted: #a3adbf; --page-line: #2e3648;
  --page-accent: #88c0d0; --strong: #eceff4; --surface: #222a3a; --raise: #2a3345;
  --code-bg: #1f2635; --code-text: #d8dee9;
  --page-ui: "Instrument Sans", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --k-ink: #e5e9f0; --k-accent: #88c0d0; --k-b: #81a1c1; --k-c: #b48ead; --k-ok: #a3be8c; --k-muted: #7b869b; --k-file: #a3adbf;
  color-scheme: dark;
}
.hero h1 { font: 750 clamp(52px, 7.5vw, 96px)/0.95 var(--display); letter-spacing: -0.035em; }
.hero h1::after { content: ""; display: block; width: 132px; height: 40px; margin-top: 18px;
  background:
    linear-gradient(var(--page-accent), var(--page-accent)) 0 0 / 62px 40px no-repeat,
    linear-gradient(#81a1c1, #81a1c1) 68px 0 / 64px 22px no-repeat,
    linear-gradient(#a3be8c, #a3be8c) 68px 26px / 64px 14px no-repeat;
  border-radius: 3px; opacity: 0.9; }
.hero .shot { margin: 26px 0 0; max-width: 980px; }
.part > h2 { font: 700 clamp(28px, 3.2vw, 38px)/1.1 var(--display); letter-spacing: -0.02em; }
.shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--page-line); }
.shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--page-muted); }
.fig { padding: 16px 12px; background: var(--surface); border-radius: 10px; border: 1px solid var(--page-line); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
ul.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
ul.cards li { margin: 0; padding: 12px 14px; background: var(--surface); border-radius: 8px; border-left: 3px solid var(--page-accent); }
kbd { font: 500 12.5px/1 var(--mono); padding: 2px 6px; border-radius: 4px; background: var(--raise); border: 1px solid #3b4558; border-bottom-width: 2px; color: var(--strong); white-space: nowrap; }