/* MEK design system · tokens
   The single source of truth. Every other file reads these; projects should too.
   Colour: a 100→1000 ink scale. 100 is the ground (page background), 1000 the strongest ink, plus accent
   and 500-accent (the quiet accent). Theme values mirror the mektxt-system Figma file's web-colour variables. */

/* ---------- Version ----------
   The release this file belongs to (CHANGELOG.md). Projects can show it: .x::after { content: var(--mek-version); } */
:root { --mek-version: "1.16.1"; }

/* ---------- Fonts ---------- */
@font-face { font-family: "Dosage Humanist"; src: url("../fonts/Dosage-Humanist.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Dosage Mono";     src: url("../fonts/Dosage-Mono.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Dosage Tall";     src: url("../fonts/Dosage-Tall.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Dosage Mono Tall"; src: url("../fonts/Dosage-MonoTall.woff2") format("woff2"); font-display: block; }
/* MEKZANTINE: the blackletter display face. Drawn on an 18px em: sharp only at 18, 36, 54, 72… */
@font-face { font-family: "MEKZANTINE";      src: url("../fonts/MEKZANTINE-Regular.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEKZANTINE Mono"; src: url("../fonts/MEKZANTINE-Mono.woff2") format("woff2"); font-display: block; }
/* The other faces. A browser only downloads a face a page uses, so these cost nothing until a font set
   (data-font, css/type.css) or a project picks them. MEKMODE: a 10px em, sharp at 10, 20, 30, 40. MEK Sans: a 15px em,
   sharp at 15, 30, 45, 60. MonoMEK: a 12px em like Dosage, sharp at 12, 24, 36. Dings: pictures on the keyboard's keys. */
@font-face { font-family: "MEKMODE";       src: url("../fonts/MEKMODE-Text.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEKMODE Dings"; src: url("../fonts/MEKMODE-Dings.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEK Sans"; font-style: normal; src: url("../fonts/MEKSans-Regular.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MEK Sans"; font-style: italic; src: url("../fonts/MEKSans-Italic.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MonoMEK";       src: url("../fonts/MonoMEK-Text.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "MonoMEK Dings"; src: url("../fonts/MonoMEK-Dings.woff2") format("woff2"); font-display: block; }

/* ---------- Themes ----------
   From the web-colour variables in the mektxt-system Figma file: every step is set, exactly as Figma has it.
   Dark, PICO-8 and Byzantine aren't in Figma; they set 100, 400, 700, 800, 900, 1000 and accent, and derive the rest. */
:root, [data-theme="light"] {
  --100: #ffffff; --200: #f7f7f7; --400: #d5d8de; --500: #c7c7c7; --600: #b6b6b6;
  --700: #999999; --800: #565656; --900: #222222; --1000: #111111; --accent: #3737ff; --500-accent: #7676d1;
  color-scheme: light;
}
[data-theme="dark"]        { --100: #111111; --400: #333333; --700: #8d8d8d; --800: #b6b6b6; --900: #e6e6e6; --1000: #f7f7f7; --accent: #3ccf55; }
[data-theme="bw"]          { --100: #0f0f0f; --200: #1a1a1a; --400: #2e2e2e; --500: #898989; --600: #767676; --700: #8d8d8d; --800: #e0e0e0; --900: #ffffff; --1000: #ffffff; --accent: #ffffff; --500-accent: #808080; }
[data-theme="miner"]       { --100: #000000; --200: #1b1b1b; --400: #383432; --500: #594b47; --600: #4b453d; --700: #7e7568; --800: #a99f91; --900: #d3c8b9; --1000: #ece5dd; --accent: #ffc982; --500-accent: #a7804c; }
[data-theme="amber"]       { --100: #110500; --200: #1f0a02; --400: #56331d; --500: #ffa46c; --600: #ff7825; --700: #ff7825; --800: #ffa46c; --900: #ffc6a3; --1000: #ffc6a3; --accent: #ffe1cf; --500-accent: #ffa46c; }
[data-theme="gameboy"]     { --100: #181818; --200: #181818; --400: #4a5138; --500: #4a5138; --600: #4a5138; --700: #8c926b; --800: #c5caa4; --900: #c5caa4; --1000: #c5caa4; --accent: #dcff7d; --500-accent: #8c926b; }
[data-theme="dos-age"]     { --100: #071324; --200: #0c1e37; --400: #253a56; --500: #306082; --600: #304a6c; --700: #847e87; --800: #9badb7; --900: #cbdbfc; --1000: #cbdbfc; --accent: #99e57e; --500-accent: #37946e; }
[data-theme="lilac"]       { --100: #150c21; --200: #1e142b; --400: #33334d; --500: #474759; --600: #3d3d4b; --700: #68687e; --800: #d3c8b9; --900: #d3c8b9; --1000: #ece5dd; --accent: #9782ff; --500-accent: #715fc8; }
[data-theme="zx-spectrum"] { --100: #000000; --200: #000000; --400: #0000d7; --500: #0000ff; --600: #0000ff; --700: #ff00ff; --800: #d7d7d7; --900: #ffffff; --1000: #ffffff; --accent: #ffff00; --500-accent: #00ff00; }
[data-theme="pico8"]       { --100: #000000; --400: #1d2b53; --700: #83769c; --800: #c2c3c7; --900: #c2c3c7; --1000: #fff1e8; --accent: #ff77a8; }
[data-theme="byzantine"]   { --100: #170612; --400: #4c2144; --700: #957d8c; --800: #c9b48f; --900: #e6d8b8; --1000: #f8efd9; --accent: #f2c75c; }
/* All but Light are dark. */
[data-theme]:not([data-theme="light"]) { color-scheme: dark; }
/* Steps the three non-Figma themes don't set. */
:is([data-theme="dark"], [data-theme="pico8"], [data-theme="byzantine"]) {
  --200: color-mix(in srgb, var(--400) 30%, var(--100));
  --500: color-mix(in srgb, var(--400) 50%, var(--800));
  --600: color-mix(in srgb, var(--400) 50%, var(--700));
  --500-accent: color-mix(in srgb, var(--accent) 50%, var(--100));
}

:root, [data-theme] {
  --ground-80: color-mix(in srgb, var(--100) 80%, transparent); /* Figma 100-80%: primary button fill */
  --overlay: var(--ground-80);   /* dialog backdrop: the page washed to ground */
  --accent-10: color-mix(in srgb, var(--accent) 10%, transparent); /* Figma accent-10%: selected primary button fill */
  /* Shared looks a faithful theme draws its own way (see "Faithful palettes" below): here, every other theme's. */
  --faithful: 0;                 /* 1 in a faithful theme: a switch for the few places that need one (the heat cells) */
  --overlay-dither: none;        /* a faithful theme dithers the backdrop instead of washing it */
  --lift-fill: color-mix(in srgb, var(--line) 25%, var(--bg));            /* a hovered cell's fill: a quarter of the way to the line */
  --lift-edge: color-mix(in srgb, var(--line) 50%, var(--text-muted));    /* its edge: halfway from 400 to 700 */
  --fade: 0.5;                   /* half-there: the torch's edge on a map, the middle frame of a pop */
  --memory-ink: color-mix(in srgb, var(--text-strong) 35%, var(--bg));    /* what's remembered but not seen: a faint ink */
  --scanlines: repeating-linear-gradient(to bottom, transparent 0 2px, color-mix(in srgb, var(--100) 35%, transparent) 2px 4px);

  /* ---------- Semantic aliases (use these in components) ---------- */
  --bg: var(--100);          /* page */
  --surface: var(--200);     /* rows, wells, code blocks */
  --line: var(--400);        /* default box edge, rules, field borders */
  --line-hover: var(--600);  /* edge on hover; placeholder text */
  --text-muted: var(--700);  /* labels, captions, metadata */
  --text-soft: var(--800);   /* secondary controls, menu items; active edge */
  --text: var(--900);        /* body copy */
  --text-strong: var(--1000);/* headings, hovered/selected controls */
  --scrollbar-ink: var(--text-muted);  /* the scrollbar's checkerboard and, on hover, its solid bar */
  --key: var(--500-accent);            /* a shortcut key hint, [Q], on an idle control: the quiet accent */
  --key-on: var(--text-soft);          /* the key on a chosen or selected control: 800 */

  /* ---------- Switch (Figma: switch) ----------
     A tray of buttons that picks one. Idle buttons are plain .btn (edge 400, label 900). */
  --switch-track: var(--surface);      /* the tray: fill and edge, so it reads as one flat well */
  --switch-gap: 6px;                   /* between buttons, and from the tray's edge (plus its 1px line) */
  --switch-edge-on: var(--text-muted); /* the chosen button's edge: 700 */
  --switch-key: var(--key);            /* the [1] key on an idle button */
  --switch-key-on: var(--key-on);      /* the key on the chosen one: 800 */

  /* ---------- Check (checkbox and radio) ---------- */
  --check-size: 14px;                  /* the box or ring, line included */
  --check-gap: 6px;                    /* from the box to the label */
  --check-edge: var(--line);           /* idle line: 400 */
  --check-edge-hover: var(--line-hover); /* hovered line: 600 */
  --check-edge-on: var(--text-soft);   /* checked line: 800 */
  --check-ink-on: var(--accent);       /* the tick, bar or dot */

  /* ---------- Range (slider) ---------- */
  --range-handle-w: 8px;               /* the handle: a block with stepped corners */
  --range-handle-h: 16px;
  --range-track-h: 4px;
  --range-handle: var(--text-soft);    /* the handle at rest: 800 */
  --range-handle-hover: var(--text-strong); /* hovered: 1000 */
  --range-fill: var(--accent);         /* the track up to the handle, and the held handle */
  --range-empty: var(--line);          /* the dither of the track after it */

  /* ---------- Alert and toast ---------- */
  --alert-edge: var(--text-muted);     /* a note's edge: 700 (.good / .warn / .bad use their status colour) */
  --alert-icon: var(--text-soft);      /* a note's icon and title: 800 */
  --toast-width: 360px;                /* the toast stack, on a wide screen */
  --toast-time: 4000ms;                /* how long a toast stays (.bad stays until closed) */

  /* ---------- Progress and meter ---------- */
  --meter-cell: 4px;                   /* one cell */
  --meter-gap: 1px;                    /* between cells */
  --meter-h: 8px;
  --meter-fill: var(--accent);         /* lit cells (a meter with low/high uses --good / --warn / --bad) */
  --meter-empty: var(--line);          /* the dither of the unlit ones: 400 */

  /* ---------- Tabs ---------- */
  --tab-rule: var(--line);             /* the rule under the row: 400 */
  --tab-on: var(--accent);             /* the chosen tab's stretch of it */

  /* ---------- Icons in buttons ----------
     A button's icon is 1.5× (22.5px): each of its pixels is 3 screen pixels on a 2× (Retina) screen, so it stays
     crisp there; on a 1× screen some come out a pixel wider. Everything around it is in half pixels for the same
     reason: the icon always starts on a whole screen pixel of a 2× screen. An icon-only button (it has an
     aria-label) is a 36px square with the icon set 7px in and 6.5px down (on its face, over the 2px bottom edge).
     Beside a label the icon takes no more height than the words (pulled 1.5px up and 1px down into the padding),
     and sits as close to the edge and the words as the 2× one did (its drawing has 4.5px clear each side). */
  --btn-icon: 22.5px;
  --btn-icon-box: 36px;               /* an icon-only button, square */
  --btn-icon-pad: 6.5px 0 0 7px;      /* where its icon sits */
  --btn-icon-pad-pushed: 7.5px 0 0 7px; /* pushed, the icon drops 1px with the face */
  --btn-icon-pull: -1.5px -1px;       /* beside a label: into the padding, top and bottom */
  --btn-icon-edge: -2.5px;            /* ...towards the button's edge */
  --btn-icon-in: -1.5px;              /* ...towards the words */

  /* ---------- Tooltip ---------- */
  --tip-delay: 500ms;                  /* hover this long before a tip shows (keyboard focus: at once) */
  --tip-warm: 300ms;                   /* after a tip goes, the next shows at once for this long */
  --tip-width: 240px;                  /* the widest a tip gets before it wraps */
  --tip-edge: var(--line);             /* its edge: 400 */

  /* ---------- Tag ---------- */
  --tag-corner: 1px;                   /* the pixel stepped off each corner: a 2px radius, drawn in pixels */
  --tag-glint: 4s;                     /* how often the dither glint passes (it takes 1.6s of it) */

  /* ---------- Breadcrumb and pagination ---------- */
  --crumbs-sep: var(--line);           /* the / between crumbs: 400 */
  --pages-on: var(--accent);           /* the rule under the current page */

  /* ---------- Command palette ---------- */
  --palette-width: 480px;
  --palette-rows: 8;                   /* the list is always this many rows tall */
  --palette-edge: var(--line);         /* its edge: 400 */

  /* ---------- Empty and loading ---------- */
  --spinner-ink: var(--accent);        /* the spinner's pixel */
  --skeleton-ink: var(--line);         /* a skeleton bar's dither: 400 */

  /* ---------- Menubar ---------- */
  --menu-edge: var(--line);            /* a menu's edge: 400 */

  /* ---------- Avatar ---------- */
  --avatar-ground: var(--surface);     /* behind initials, a picture or an identicon: 200 */
  --avatar-ink: var(--text-soft);      /* an identicon's pixels: 800 (.accent: the accent) */

  /* ---------- Code block ---------- */
  --code-ground: var(--surface);       /* behind code: 200, as a well */

  /* ---------- Disclosure ---------- */
  --disclose-rule: var(--line);        /* the rules of an accordion: 400 */

  /* ---------- Tree ---------- */
  --tree-line: var(--line);            /* the line its rows hang off, and their ticks: 400 */
  --tree-sign: var(--500-accent);      /* a group's [-] and [+]: the quiet accent, as a key */
  --tree-head: var(--text-muted);      /* a group's name: 700, hover dissolves to 1000 */

  /* ---------- Charts (status colours are per theme, below) ---------- */
  --chart-1: var(--accent);      /* the main series */
  --chart-2: var(--text-soft);   /* the second, compared with it */
  --chart-3: var(--500-accent);  /* time, or a third */

  /* ---------- Type ---------- */
  /* Dosage's four styles by name; the roles below point at them. */
  --font-dosage: "Dosage Humanist", monospace;
  --font-dosage-tall: "Dosage Tall", monospace;
  --font-dosage-mono: "Dosage Mono", monospace;
  --font-dosage-mono-tall: "Dosage Mono Tall", monospace;
  --font-ui: var(--font-dosage);             /* default for everything */
  --font-mono: var(--font-dosage-mono);      /* numbers, code, key/value, tables */
  --font-display: var(--font-dosage-tall);   /* titles */
  --font-heading: var(--font-ui);            /* section headings (.t-heading): the body face unless a project picks one */
  --font-display-mono: var(--font-dosage-mono-tall);
  --font-blackletter: "MEKZANTINE", "Dosage Tall", monospace;  /* titles, wordmarks, display only: never UI or body */
  --font-blackletter-mono: "MEKZANTINE Mono", "Dosage Mono Tall", monospace;
  /* The other faces, by name. Roles above stay Dosage unless a font set (data-font, css/type.css) swaps them. */
  --font-mekmode: "MEKMODE", "Dosage Mono", monospace;
  --font-meksans: "MEK Sans", "Dosage Humanist", monospace;
  --font-monomek: "MonoMEK", "Dosage Mono", monospace;
  --font-mekmode-dings: "MEKMODE Dings", monospace;
  --font-monomek-dings: "MonoMEK Dings", monospace;

  /* Sizes. Pixel fonts are only crisp on their grid: Dosage on multiples of 12, MEKZANTINE on 18.
     Off-grid sizes (11, 14, 16) are allowed for small UI text, and are smoothed. */
  --text-2xs: 14px;  /* field labels, tags: the smallest text there is */
  --text-xs: 14px;   /* footnotes, captions, notes */
  --text-sm: 16px;   /* UI: buttons, menus, nav, labels */
  --text-crisp: 14px;/* the small Mono labels: keys, counts, the game kit's (HUD, XP, streak…). 14, so off Dosage's grid
                        and smoothed; 12 in the compact scale */
  --text-md: 16px;   /* body */
  --text-lg: 24px;   /* crisp: section headings, h1 */
  --text-xl: 36px;   /* crisp: samples, hero numbers */
  --text-2xl: 48px;  /* crisp */
  --text-3xl: 72px;  /* crisp: big type, .t-huge */
  --text-4xl: 96px;  /* crisp: big type, .t-mega */
  --leading: normal;
  --leading-tall: 1.6;  /* for Tall styles */
  --leading-display: 1.25;  /* big Tall titles over one line: room for ascenders and descenders, 120px at 96 */
  --leading-blackletter: 1.34;  /* MEKZANTINE: about 24px at 18, on its 18px em */

  /* ---------- Space (4px base) ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-18: 72px;
  --page-max: 1200px;
  --page-gutter: 32px;  /* 16px at --bp-phone and under */

  /* ---------- Focus ----------
     Where the keyboard is. A ring only for keyboard focus (:focus-visible), never on a click. See docs/focus.html. */
  --focus-ring: var(--text-soft);   /* the ring: 1px dashed in 800 */
  --focus-offset: 2px;              /* outside the element, so it never covers the edge */
  --scroll-pad: 0px;                /* a page with a sticky bar sets this to the bar's height and a little more, so
                                       what takes focus (or a #link) never lands under it */

  /* ---------- Breakpoints ----------
     Each is the widest a range goes, "at or under": @media (max-width: 640px) is the phone. CSS can't read a custom
     property inside @media, so a query writes the number and names its token in a comment; js/mek.js reads these
     (mek.bp(), <html data-bp>). Phones are designed at 390 wide. */
  --bp-phone: 640px;      /* phone: 640 and under. The page gutter halves, big type steps down */
  --bp-tablet: 900px;     /* tablet: 641–900. Sidebars become panels, two columns become one */
  --bp-desktop: 1200px;   /* desktop: 901–1200 (the page's widest, --page-max). Over it: wide */

  /* ---------- Shape ---------- */
  --radius: 4px;   /* fields and surface rows only; boxes use the stepped px-box corner, never border-radius */
  --stroke: 1px;   /* every line is one pixel */

  /* ---------- Motion ----------
     Pixel things move in whole frames, not tweens. One frame = 1/12 s.
     Use steps() for anything drawn in pixels; linear only for fades of overlays. No springs, no ease-out curves. */
  --frame: 83ms;
  --dur-instant: 0ms;     /* focus, selected, pushed: immediate */
  --dur-tick: 83ms;       /* 1 frame: nudges, press */
  --dur-beat: 167ms;      /* 2 frames: menus, toggles */
  --dur-bar: 333ms;       /* 4 frames: dialogs, reveals */
  --dur-loop: 800ms;      /* idle loops: bop, blink */
  --dur-type: 40ms;       /* per character, typewriter */
  --dur-dissolve: 333ms;  /* hover dissolve: 25 → 50 → 75 → 100% of pixels, one frame each */
  --dur-theme: 667ms;     /* theme change: dither wipe out of the control you used, at display frame rate (js/mek.js) */
  --ease-step: steps(1, end);
  --ease-frames-2: steps(2, end);
  --ease-frames-4: steps(4, end);
  --ease-fade: linear;
  --ease-dissolve: steps(4, jump-start);  /* first dither frame shows at once, so hover still feels instant */
  --px-frame: 16ms;       /* slides: one whole pixel per display frame (60 fps) */

  /* ---------- Sound ----------
     Off until the person turns it on (js/sound.js). Square-wave notes, set in semitones from the root, each a whole
     number of steps long: one step is a 24fps frame, so a sound keeps time with the film-rate shimmer. */
  --sound-volume: .05;    /* every cue's loudness, 0 to 1: quiet, under the person's own audio */
  --sound-root: 523.25;   /* the root note, in Hz: C5. Cues are semitones from it */
  --sound-step: 42ms;     /* a note's unit length: one 24fps frame */
  --sound-wave: square;   /* the oscillator: square (8-bit), or triangle, sawtooth, sine */
  --sound-ambience: .03;  /* a place's background (js/ambience.js): under the cues */

  /* ---------- Layers ---------- */
  --z-menu: 5; --z-sticky: 10; --z-dialog: 100;
  --z-tip: 150;     /* a tooltip, where there's no popover */
  --z-toast: 200;   /* the toast stack, where the browser has no popover (top layer) for it */
  --z-fx: 250;      /* a screen effect over the whole page (css/parts/fx.css): over the toasts */
}

/* ---------- Status ----------
   Green for good (up, healthy, done), orange for a warning (slower, close to a limit), red for bad (down, failed,
   wrong). Each theme picks its own from its palette, all at least 4.5:1 on its ground. Where the accent is green
   (Dark, Gameboy, DOS Age), good is the accent. Amber's text is orange, so its warning is yellow; the Spectrum has no
   orange, so its warning is its normal yellow (D7), apart from the bright yellow accent. Use them only for status, never
   as decoration. */
:root, [data-theme="light"] { --good: #12883a; --warn: #c45a00; --bad: #d42638; }
[data-theme="dark"]        { --good: var(--accent); --warn: #ff9a3c; --bad: #ff5a64; }
[data-theme="bw"]          { --good: #9ad4a6; --warn: #e8b47e; --bad: #ef8f8f; }
[data-theme="miner"]       { --good: #a3c77e; --warn: #e8873f; --bad: #e0614f; }
[data-theme="amber"]       { --good: #d6e07a; --warn: #ffd23f; --bad: #ff4b3e; }
[data-theme="gameboy"]     { --good: var(--accent); --warn: #e2b55c; --bad: #e0705c; }
[data-theme="dos-age"]     { --good: var(--accent); --warn: #df7126; --bad: #d95763; }
[data-theme="lilac"]       { --good: #7fdba6; --warn: #ffa65e; --bad: #ff6b8b; }
[data-theme="zx-spectrum"] { --good: #00ff00; --warn: #d7d700; --bad: #ff0000; }
[data-theme="pico8"]       { --good: #00e436; --warn: #ffa300; --bad: #ff004d; }
[data-theme="byzantine"]   { --good: #93c47d; --warn: #ea8a3a; --bad: #e8505b; }

/* ---------- Faithful palettes ----------
   The themes that stand for a real machine or screen keep to its colours, and only its colours: every token, every
   state, every colour drawn. --palette lists them (a string, read by docs/palette-check.html, which checks the
   tokens against it and every page's drawn colours against it). Hardware only: status, hover and effects too.
   ZX Spectrum: its 15 colours, normal at D7 and bright at FF. Gameboy: the 4 shades of its screen. Amber: one
   phosphor at its intensities. B/W: black and white; anything between is dither. PICO-8: its 16 colours. */
[data-theme="zx-spectrum"] { --palette: "#000000 #0000d7 #d70000 #d700d7 #00d700 #00d7d7 #d7d700 #d7d7d7 #0000ff #ff0000 #ff00ff #00ff00 #00ffff #ffff00 #ffffff"; }
[data-theme="gameboy"]     { --palette: "#181818 #4a5138 #8c926b #c5caa4"; }
[data-theme="amber"]       { --palette: "#110500 #1f0a02 #56331d #ff7825 #ffa46c #ffc6a3 #ffe1cf"; }
[data-theme="bw"]          { --palette: "#000000 #ffffff"; }
[data-theme="pico8"]       { --palette: "#000000 #1d2b53 #7e2553 #008751 #ab5236 #5f574f #c2c3c7 #fff1e8 #ff004d #ffa300 #ffec27 #00e436 #29adff #83769c #ff77a8 #ffccaa"; }
/* What they draw their own way: nothing see-through, nothing mixed. Where another theme blends, a faithful one steps
   to another token or dithers between two (2×2, the hover dissolve's pattern). The list of faithful themes lives
   here and only here; components read these tokens. */
:is([data-theme="zx-spectrum"], [data-theme="gameboy"], [data-theme="amber"], [data-theme="bw"], [data-theme="pico8"]) {
  --faithful: 1;
  --ground-80: var(--100);                 /* the primary button's fill: the solid ground */
  --overlay: transparent;                  /* the dialog backdrop: the ground over the page, 3 pixels in 4 */
  --overlay-dither: conic-gradient(var(--100) 0 75%, transparent 0);
  --accent-10: var(--100);                 /* the chosen primary button: the ground, with the line in a checkerboard */
  --accent-10-dots: var(--400);
  --lift-fill: var(--100);                 /* a hovered cell: the ground, the line one pixel in four; the edge a step up */
  --lift-dots: var(--400);
  --lift-edge: var(--600);
  --fade: 1;                               /* nothing half-there: a quieter step instead */
  --fade-ink: var(--800);
  --memory-ink: var(--700);
  --scanlines: repeating-linear-gradient(to bottom, transparent 0 3px, var(--100) 3px 4px);   /* a ground row every 4px */
  --white: var(--1000);                    /* the shine on extruded type: the theme's brightest */
}

/* ---------- Fixed ink ----------
   The same in every theme but the faithful ones (they use their 1000). Only for highlights drawn over a theme's own
   colours (the extruded type's shine). :where, so the faithful block above outranks it. */
:where(:root) { --white: #ffffff; }

/* ---------- Page dials ----------
   --display-size for page titles, --rhythm between sections, --grid-gap between the items of a grid (cards, panels,
   tiles). A project changes them in its own CSS; the generator's Space picks set them (dense, balanced, airy). */
:root {
  --display-size: var(--text-2xl);   /* 48 */
  --rhythm: var(--space-12);         /* 48px */
  --grid-gap: var(--space-4);        /* 16px */
}

/* ---------- Scale ----------
   The default type and button icons are a step up (text 14, 14, 16, nothing under 14; icons in buttons 1.5×). <html data-scale="compact">,
   or data-scale="compact" on any area, puts back the smaller set: text 11, 12, 14, the small Mono labels at a crisp 12, and 15px (1×) icons in buttons,
   which take their padding like words. */
[data-scale="compact"] {
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-crisp: 12px;
  --btn-icon: 15px; --btn-icon-box: auto; --btn-icon-pad: var(--space-2) 9px 9px; --btn-icon-pad-pushed: 9px 9px 8px;   /* (padded like words) */
  --btn-icon-pull: 0; --btn-icon-edge: -3px; --btn-icon-in: -3px;
}