/* Background drawing: a circular knitting machine that runs as the page scrolls. Sits behind everything. */
.machine { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Let the drawing show through the page cards. */
.leaf, .plate, .spec, .ladbox { background-color: color-mix(in oklab, var(--paper) 58%, transparent); }
/* Greyscale accents: grey in the light theme, light grey in the dark theme (no navy or sheet colours). */
html, html body, html [data-sheet-hue], html [data-sheet] { --hue: #6a6a6a !important; --sw: #6a6a6a !important; }
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] [data-sheet-hue], html[data-theme="dark"] [data-sheet] { --hue: #b8b8b8 !important; --sw: #b8b8b8 !important; }
/* The mark: larger, and outlined so the grey letters read against the grey page in both themes. */
.brandlock .brandlock-mark { width: 46px; height: auto; max-height: 40px; object-fit: contain; filter: contrast(1.35) brightness(.78) drop-shadow(0 0 .6px rgba(0,0,0,.9)); }
.brand-foot .brandlock-mark { width: 56px; max-height: none; }
html[data-theme="dark"] .brandlock .brandlock-mark { filter: contrast(1.2) brightness(1.05) drop-shadow(0 0 .6px rgba(255,255,255,.85)); }
/* Dark theme = the app's dark theme (neutral near-black, no blue cast). */
:root[data-theme="dark"] {
  --paper: #0c0c0e; --paper-2: #101012; --paper-3: #18181b;
  --ink: #f4f4f5; --ink-2: #d4d4d8; --graphite: #a1a1aa; --graphite-2: #8c8c94;
  --hair: #27272a; --hair-2: #1c1c1f;
  --plate: rgba(255,255,255,.03); --plate-edge: rgba(244,244,245,.10);
  --gl-paper: #0c0c0e; --gl-ink: #f4f4f5;
  color-scheme: dark;
}