/* Native Groovebox design tokens, mockup 2026-10.
   House style: flat, square, hairline. One accent (the LCD orange) that is also the only CTA colour.
   Type: IBM Plex Mono bold + thin for headings, labels and buttons; Barlow Condensed for body and printed
   instrument names; Silkscreen only on the LCD. All fonts bundled (SIL OFL 1.1, fonts/OFL-LICENSES.txt).
   Plex Mono 200/300/700 are Fontsource 5.1.1 latin subsets, the same package as the app's 400/500. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:block;src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:block;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:200;font-display:block;src:url("fonts/ibm-plex-mono-latin-200-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:300;font-display:block;src:url("fonts/ibm-plex-mono-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:block;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:block;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:700;font-display:block;src:url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Silkscreen";font-weight:400;font-display:block;src:url("fonts/silkscreen-latin-400-normal.woff2") format("woff2")}

/* ===== COLOUR: two independent settings, generated by gen-tokens.py =====
   PANEL = the surfaces: black (--dk-*, data-theme="dark", the default), grey (--gy-*, "grey": a LIGHT grey device body), white (--lt-*, "light").
   LCD   = the accent family, from real character-LCD types: blue STN (default, the brand; white ink), amber, orange, yellow-green STN,
           grey FSTN, VFD cyan (cyan ink on black). Each LCD defines panel, ink, label, dim, the accent fill (CTA, lit
           steps, lcd-fill keys), accent-text, accent ink, time and record, written once per panel. The accent FILL is the same
           colour on every panel; only accent-text, time and record are tuned for contrast on each ground.
   Old-WebKit safe (baseline Safari 15.4, JUCE WKWebView): no colour-mixing functions, no relative colours. Every derived value and
   every *-rgb triplet (used as rgba(var(--x-rgb),.4)) is written out. Switch with ?palette=<lcd> and ?mode=<panel> (palette.js).
   Not swapped on purpose: --shade/--glint (scrims), --hw-* and --host-* (a phone bezel and a DAW window are depicted hardware). Art and
   visualisers read the black panel group (--art-*), so a cover never changes with the panel. */
/* amber */
[data-palette="amber"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#FFB224; --dk-accent-text:#ffb224; --dk-time:#6fe3c1; --dk-accent-ink:#080501; --dk-record:#ff3b30;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#ffba3a; --dk-lcd:#FFB224; --dk-lcd-ink:#080501; --dk-lcd-label:#2b1d06; --dk-lcd-dim:#a97518; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#932821; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#bf861b; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#080501; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:255,178,36; --dk-accent-ink-rgb:8,5,1; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:8,5,1; --dk-lcd-rgb:255,178,36; --dk-lcd-dim-rgb:8,5,1; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#FFB224; --gy-accent-text:#7d5712; --gy-time:#336859; --gy-accent-ink:#080501; --gy-record:#b22922;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#ffba3a; --gy-lcd:#FFB224; --gy-lcd-ink:#080501; --gy-lcd-label:#2b1d06; --gy-lcd-dim:#a97518; --gy-seg-hot:#bf861b; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:255,178,36; --gy-accent-ink-rgb:8,5,1; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:8,5,1; --gy-lcd-rgb:255,178,36; --gy-lcd-dim-rgb:8,5,1;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#FFB224; --lt-accent-text:#8c6214; --lt-time:#3a7664; --lt-accent-ink:#080501; --lt-record:#d13027;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#ffba3a; --lt-lcd:#FFB224; --lt-lcd-ink:#080501; --lt-lcd-label:#2b1d06; --lt-lcd-dim:#a97518; --lt-seg-hot:#bf861b; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:255,178,36; --lt-accent-ink-rgb:8,5,1; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:8,5,1; --lt-lcd-rgb:255,178,36; --lt-lcd-dim-rgb:8,5,1;
  --pal-playhead:var(--time);
}
/* orange */
[data-palette="orange"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#ef5a39; --dk-accent-text:#ef5a39; --dk-time:#d2a54a; --dk-accent-ink:#070302; --dk-record:#ff3b2f;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#ff6e4b; --dk-lcd:#ef5a39; --dk-lcd-ink:#070302; --dk-lcd-label:#270f0a; --dk-lcd-dim:#9e3c26; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#932821; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#b3442b; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#070302; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:239,90,57; --dk-accent-ink-rgb:7,3,2; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:7,3,2; --dk-lcd-rgb:239,90,57; --dk-lcd-dim-rgb:7,3,2; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#ef5a39; --gy-accent-text:#a03c26; --gy-time:#745b29; --gy-accent-ink:#070302; --gy-record:#b22921;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#ff6e4b; --gy-lcd:#ef5a39; --gy-lcd-ink:#070302; --gy-lcd-label:#270f0a; --gy-lcd-dim:#9e3c26; --gy-seg-hot:#b3442b; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:239,90,57; --gy-accent-ink-rgb:7,3,2; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:7,3,2; --gy-lcd-rgb:239,90,57; --gy-lcd-dim-rgb:7,3,2;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#ef5a39; --lt-accent-text:#bd472d; --lt-time:#866a2f; --lt-accent-ink:#070302; --lt-record:#d13027;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#ff6e4b; --lt-lcd:#ef5a39; --lt-lcd-ink:#070302; --lt-lcd-label:#270f0a; --lt-lcd-dim:#9e3c26; --lt-seg-hot:#b3442b; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:239,90,57; --lt-accent-ink-rgb:7,3,2; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:7,3,2; --lt-lcd-rgb:239,90,57; --lt-lcd-dim-rgb:7,3,2;
  --pal-playhead:var(--record);
}
/* yellow-green */
[data-palette="yellow-green"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#C4DC3A; --dk-accent-text:#c4dc3a; --dk-time:#7fd6ff; --dk-accent-ink:#060702; --dk-record:#ff3b30;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#cae04e; --dk-lcd:#C4DC3A; --dk-lcd-ink:#060702; --dk-lcd-label:#21250a; --dk-lcd-dim:#829126; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#932821; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#93a52c; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#060702; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:196,220,58; --dk-accent-ink-rgb:6,7,2; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:6,7,2; --dk-lcd-rgb:196,220,58; --dk-lcd-dim-rgb:6,7,2; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#C4DC3A; --gy-accent-text:#545f19; --gy-time:#3a6275; --gy-accent-ink:#060702; --gy-record:#b22922;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#cae04e; --gy-lcd:#C4DC3A; --gy-lcd-ink:#060702; --gy-lcd-label:#21250a; --gy-lcd-dim:#829126; --gy-seg-hot:#93a52c; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:196,220,58; --gy-accent-ink-rgb:6,7,2; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:6,7,2; --gy-lcd-rgb:196,220,58; --gy-lcd-dim-rgb:6,7,2;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#C4DC3A; --lt-accent-text:#66721e; --lt-time:#426f85; --lt-accent-ink:#060702; --lt-record:#d13027;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#cae04e; --lt-lcd:#C4DC3A; --lt-lcd-ink:#060702; --lt-lcd-label:#21250a; --lt-lcd-dim:#829126; --lt-seg-hot:#93a52c; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:196,220,58; --lt-accent-ink-rgb:6,7,2; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:6,7,2; --lt-lcd-rgb:196,220,58; --lt-lcd-dim-rgb:6,7,2;
  --pal-playhead:var(--time);
}
/* blue */
:root:not([data-palette]),[data-palette="blue"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#3358E4; --dk-accent-text:#5876e9; --dk-time:#ffb224; --dk-accent-ink:#FFFFFF; --dk-record:#ff4d44;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#4769e7; --dk-lcd:#3358E4; --dk-lcd-ink:#FFFFFF; --dk-lcd-label:#e2e8fb; --dk-lcd-dim:#7a92ed; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#93322c; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#2642ab; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#FFFFFF; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:51,88,228; --dk-accent-ink-rgb:255,255,255; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:255,255,255; --dk-lcd-rgb:51,88,228; --dk-lcd-dim-rgb:255,255,255; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#3358E4; --gy-accent-text:#2e50cf; --gy-time:#7d5712; --gy-accent-ink:#FFFFFF; --gy-record:#ab342e;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#4769e7; --gy-lcd:#3358E4; --gy-lcd-ink:#FFFFFF; --gy-lcd-label:#e2e8fb; --gy-lcd-dim:#7a92ed; --gy-seg-hot:#2642ab; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:51,88,228; --gy-accent-ink-rgb:255,255,255; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:255,255,255; --gy-lcd-rgb:51,88,228; --gy-lcd-dim-rgb:255,255,255;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#3358E4; --lt-accent-text:#3358e4; --lt-time:#8c6214; --lt-accent-ink:#FFFFFF; --lt-record:#c23b34;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#4769e7; --lt-lcd:#3358E4; --lt-lcd-ink:#FFFFFF; --lt-lcd-label:#e2e8fb; --lt-lcd-dim:#7a92ed; --lt-seg-hot:#2642ab; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:51,88,228; --lt-accent-ink-rgb:255,255,255; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:255,255,255; --lt-lcd-rgb:51,88,228; --lt-lcd-dim-rgb:255,255,255;
  --pal-playhead:var(--time);
}
/* fstn */
[data-palette="fstn"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#C9CFBF; --dk-accent-text:#c9cfbf; --dk-time:#7fd6ff; --dk-accent-ink:#060606; --dk-record:#ff3b30;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#ced4c5; --dk-lcd:#C9CFBF; --dk-lcd-ink:#060606; --dk-lcd-label:#212220; --dk-lcd-dim:#85897e; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#932821; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#979b8f; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#060606; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:201,207,191; --dk-accent-ink-rgb:6,6,6; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:6,6,6; --dk-lcd-rgb:201,207,191; --dk-lcd-dim-rgb:6,6,6; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#C9CFBF; --gy-accent-text:#5c5f58; --gy-time:#3a6275; --gy-accent-ink:#060606; --gy-record:#b22922;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#ced4c5; --gy-lcd:#C9CFBF; --gy-lcd-ink:#060606; --gy-lcd-label:#212220; --gy-lcd-dim:#85897e; --gy-seg-hot:#979b8f; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:201,207,191; --gy-accent-ink-rgb:6,6,6; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:6,6,6; --gy-lcd-rgb:201,207,191; --gy-lcd-dim-rgb:6,6,6;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#C9CFBF; --lt-accent-text:#696c63; --lt-time:#426f85; --lt-accent-ink:#060606; --lt-record:#d13027;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#ced4c5; --lt-lcd:#C9CFBF; --lt-lcd-ink:#060606; --lt-lcd-label:#212220; --lt-lcd-dim:#85897e; --lt-seg-hot:#979b8f; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:201,207,191; --lt-accent-ink-rgb:6,6,6; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:6,6,6; --lt-lcd-rgb:201,207,191; --lt-lcd-dim-rgb:6,6,6;
  --pal-playhead:var(--time);
}
/* vfd */
[data-palette="vfd"]{
  --dk-ground:#0f100f; --dk-panel:#151615; --dk-line:#2a2b28; --dk-label:#8f8e88; --dk-text:#f1f0ea; --dk-accent:#2EE6D6; --dk-accent-text:#2ee6d6; --dk-time:#ffb224; --dk-accent-ink:#010706; --dk-record:#ff4d4d;
  --dk-plate-0:#090a09; --dk-plate-3:#1b1c1a; --dk-plate-4:#242523; --dk-plate-5:#2e2f2c; --dk-print-2:#c9c8c1; --dk-print-4:#5d5e59; --dk-rule-2:#3c3d39; --dk-accent-hi:#43e8da; --dk-lcd:#05100f; --dk-lcd-ink:#3FF0E2; --dk-lcd-label:#37d1c4; --dk-lcd-dim:#195e59; --dk-cream:#ece6d6; --dk-cream-ink:#1f1e1b; --dk-ok:#9dbb6c; --dk-sl-4:#5f8073; --dk-sl-5:#933231; --dk-sl-6:#2f4a5c; --dk-sl-7:#b9b3a2; --dk-seg-hot:#22aca0; --dk-vinyl-a:#0b0b0a; --dk-vinyl-b:#191918; --dk-hw-edge:#2a2a28; --dk-art-on-accent:#010706; --dk-dot:rgba(255,255,255,.055); --dk-stage:#0b0c0b;
  --dk-text-rgb:241,240,234; --dk-accent-rgb:46,230,214; --dk-accent-ink-rgb:1,7,6; --dk-ground-rgb:15,16,15; --dk-lcd-ink-rgb:63,240,226; --dk-lcd-rgb:5,16,15; --dk-lcd-dim-rgb:63,240,226; --dk-stage-rgb:11,12,11;
  --gy-ground:#d9d9d6; --gy-panel:#e6e6e3; --gy-line:#bdbdb8; --gy-label:#5d5d58; --gy-text:#111111; --gy-accent:#2EE6D6; --gy-accent-text:#156a62; --gy-time:#7d5712; --gy-accent-ink:#010706; --gy-record:#ab3434;
  --gy-plate-0:#cfcfcb; --gy-plate-4:#d0d0cc; --gy-plate-5:#c6c6c2; --gy-print-2:#3a3a38; --gy-print-4:#8f8f8a; --gy-rule-2:#a8a8a3; --gy-accent-hi:#43e8da; --gy-lcd:#05100f; --gy-lcd-ink:#3FF0E2; --gy-lcd-label:#37d1c4; --gy-lcd-dim:#195e59; --gy-seg-hot:#22aca0; --gy-dot:rgba(30,24,18,.075);
  --gy-text-rgb:17,17,17; --gy-accent-rgb:46,230,214; --gy-accent-ink-rgb:1,7,6; --gy-ground-rgb:217,217,214; --gy-lcd-ink-rgb:63,240,226; --gy-lcd-rgb:5,16,15; --gy-lcd-dim-rgb:63,240,226;
  --lt-ground:#f3f3f2; --lt-panel:#ffffff; --lt-line:#dcdcd9; --lt-label:#6f6e6a; --lt-text:#111111; --lt-accent:#2EE6D6; --lt-accent-text:#18786f; --lt-time:#8c6214; --lt-accent-ink:#010706; --lt-record:#c23b3b;
  --lt-plate-0:#e6e6e3; --lt-plate-4:#ececea; --lt-plate-5:#e2e2df; --lt-print-2:#3a3a38; --lt-print-4:#a6a5a0; --lt-rule-2:#bdbdb8; --lt-accent-hi:#43e8da; --lt-lcd:#05100f; --lt-lcd-ink:#3FF0E2; --lt-lcd-label:#37d1c4; --lt-lcd-dim:#195e59; --lt-seg-hot:#22aca0; --lt-dot:rgba(30,24,18,.075);
  --lt-text-rgb:17,17,17; --lt-accent-rgb:46,230,214; --lt-accent-ink-rgb:1,7,6; --lt-ground-rgb:243,243,242; --lt-lcd-ink-rgb:63,240,226; --lt-lcd-rgb:5,16,15; --lt-lcd-dim-rgb:63,240,226;
  --pal-playhead:var(--time);
}

/* Black is the instrument default (editor, plug-in, phone). */
:root,[data-theme="dark"]{
  color-scheme:dark;-webkit-font-smoothing:antialiased;   /* light text on dark reads cleaner and thinner */
  --ground:var(--dk-ground);--panel:var(--dk-panel);--line:var(--dk-line);--label:var(--dk-label);--text:var(--dk-text);--accent:var(--dk-accent);--time:var(--dk-time);--record:var(--dk-record);
  --print-rgb:var(--dk-text-rgb);--accent-rgb:var(--dk-accent-rgb);--accent-ink-rgb:var(--dk-accent-ink-rgb);--ground-rgb:var(--dk-ground-rgb);--lcd-ink-rgb:var(--dk-lcd-ink-rgb);--lcd-rgb:var(--dk-lcd-rgb);--lcd-dim-rgb:var(--dk-lcd-dim-rgb);
  --plate-0:var(--dk-plate-0);   /* wells: step lanes, meters, inputs */
  --plate-1:var(--ground);       /* page */
  --plate-2:var(--panel);        /* app plate */
  --plate-3:var(--dk-plate-3);   /* surfaces, tiles */
  --plate-4:var(--dk-plate-4);   /* keys, steps off */
  --plate-5:var(--dk-plate-5);   /* hover */
  --print:var(--text);           /* titles, steps on */
  --print-2:var(--dk-print-2);   /* body */
  --print-3:var(--label);        /* meta */
  --print-4:var(--dk-print-4);   /* disabled, ticks */
  --rule:var(--line);            /* hairlines */
  --rule-2:var(--dk-rule-2);     /* strong hairlines, outlines */
  --accent-hi:var(--dk-accent-hi);
  --accent-ink:var(--dk-accent-ink);/* ink on the accent */
  --lcd:var(--dk-lcd);--lcd-ink:var(--dk-lcd-ink);--lcd-label:var(--dk-lcd-label);--lcd-dim:var(--dk-lcd-dim);
  --led:var(--record);           /* record and clip */
  --cream:var(--dk-cream);       /* the instrument's ROLL key */
  --cream-ink:var(--dk-cream-ink);
  --bar:var(--print);            /* CTA edge bar: print colour on dark, black on light */
  --ok:var(--dk-ok);
  --sl-1:var(--accent);--sl-2:var(--cream);--sl-3:var(--time);--sl-4:var(--dk-sl-4);--sl-5:var(--dk-sl-5);--sl-6:var(--dk-sl-6);--sl-7:var(--dk-sl-7);--sl-8:var(--panel);
  --accent-text:var(--dk-accent-text);
  /* Sequencer trigs: a trig is the accent; states are marks */
  --trig-off:var(--plate-4);--trig-off-2:var(--plate-5);--trig-on:var(--accent);--trig-mark:var(--dk-accent-ink);--trig-sl:var(--cream);--trig-now:var(--time);
  --seg-off:rgba(var(--dk-text-rgb),.07);--seg-hot:var(--dk-seg-hot);
}
/* Grey: a light-grey hardware panel, between White and Black. */
[data-theme="grey"]{
  color-scheme:light;-webkit-font-smoothing:auto;
  --ground:var(--gy-ground);--panel:var(--gy-panel);--line:var(--gy-line);--label:var(--gy-label);--text:var(--gy-text);--accent:var(--gy-accent);--time:var(--gy-time);--record:var(--gy-record);
  --print-rgb:var(--gy-text-rgb);--accent-rgb:var(--gy-accent-rgb);--accent-ink-rgb:var(--gy-accent-ink-rgb);--ground-rgb:var(--gy-ground-rgb);--lcd-ink-rgb:var(--gy-lcd-ink-rgb);--lcd-rgb:var(--gy-lcd-rgb);--lcd-dim-rgb:var(--gy-lcd-dim-rgb);
  --plate-0:var(--gy-plate-0);--plate-1:var(--ground);--plate-2:var(--panel);--plate-3:var(--panel);--plate-4:var(--gy-plate-4);--plate-5:var(--gy-plate-5);
  --print:var(--text);--print-2:var(--gy-print-2);--print-3:var(--label);--print-4:var(--gy-print-4);--rule:var(--line);--rule-2:var(--gy-rule-2);
  --accent-hi:var(--gy-accent-hi);--accent-ink:var(--gy-accent-ink);--lcd:var(--gy-lcd);--lcd-ink:var(--gy-lcd-ink);--lcd-label:var(--gy-lcd-label);--lcd-dim:var(--gy-lcd-dim);
  --cream:var(--text);--cream-ink:var(--ground);--bar:var(--text);
  --accent-text:var(--gy-accent-text);--trig-mark:var(--gy-accent-ink);--trig-sl:var(--text);--trig-now:var(--time);
  --seg-off:rgba(var(--gy-text-rgb),.08);--seg-hot:var(--gy-seg-hot);
}
[data-theme="light"]{
  color-scheme:light;-webkit-font-smoothing:auto;
  --ground:var(--lt-ground);--panel:var(--lt-panel);--line:var(--lt-line);--label:var(--lt-label);--text:var(--lt-text);--accent:var(--lt-accent);--time:var(--lt-time);--record:var(--lt-record);
  --print-rgb:var(--lt-text-rgb);--accent-rgb:var(--lt-accent-rgb);--accent-ink-rgb:var(--lt-accent-ink-rgb);--ground-rgb:var(--lt-ground-rgb);--lcd-ink-rgb:var(--lt-lcd-ink-rgb);--lcd-rgb:var(--lt-lcd-rgb);--lcd-dim-rgb:var(--lt-lcd-dim-rgb);
  --plate-0:var(--lt-plate-0);--plate-1:var(--ground);--plate-2:var(--panel);--plate-3:var(--panel);--plate-4:var(--lt-plate-4);--plate-5:var(--lt-plate-5);
  --print:var(--text);--print-2:var(--lt-print-2);--print-3:var(--label);--print-4:var(--lt-print-4);--rule:var(--line);--rule-2:var(--lt-rule-2);
  --accent-hi:var(--lt-accent-hi);--accent-ink:var(--lt-accent-ink);--lcd:var(--lt-lcd);--lcd-ink:var(--lt-lcd-ink);--lcd-label:var(--lt-lcd-label);--lcd-dim:var(--lt-lcd-dim);
  --cream:var(--text);--cream-ink:var(--ground);--bar:var(--text);
  --accent-text:var(--lt-accent-text);--trig-mark:var(--lt-accent-ink);--trig-sl:var(--text);--trig-now:var(--time);
  --seg-off:rgba(var(--lt-text-rgb),.08);--seg-hot:var(--lt-seg-hot);
}
/* Mode-agnostic: fixed backdrops, device and host chrome, scrims, art. Declared on :root, so they read the html
   element's LCD and never follow a nested panel. */
:root{
  --hair:1px;                                       /* hairline: one device pixel, see the media query below */
  --shade:#000;--glint:#fff;--shade-rgb:0,0,0;--glint-rgb:255,255,255;   /* scrims, shadows, sheen: only ever with alpha */
  --stage:var(--dk-stage);--stage-rgb:var(--dk-stage-rgb);               /* hero and site stage behind the visualisers */
  --vinyl-a:var(--dk-vinyl-a);--vinyl-b:var(--dk-vinyl-b);
  --playhead:var(--pal-playhead);                   /* ruler "now": time (orange keeps its red LED) */
  --qr-bg:var(--dk-text);--qr-ink:var(--lt-text);
  --hw-bezel:#050505;--hw-edge:var(--dk-hw-edge);--hw-island:#000;                /* phone hardware */
  --host-0:#2b2b2b;--host-1:#3a3a3a;--host-dot:#5a5a5a;--host-text:#bdbdbd;--host-tab:#d0d0d0;    /* a DAW window, depicted */
  --dot-dark:var(--dk-dot);--dot-light:var(--lt-dot);
  --art-ground:var(--dk-ground);--art-ink:var(--dk-text);--art-hot:var(--dk-accent);--art-on-hot:var(--dk-accent-ink);
  --art-cream:var(--dk-cream);--art-panel:var(--dk-panel);--art-time:var(--dk-time);--art-slate:var(--dk-sl-6);
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--hair:.5px}}
:root{
  --sans:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pix:"Silkscreen",ui-monospace,monospace;
  /* Headings: one family, two weights. Bold title, thin line under or after it. */
  --t-hero:700 64px/68px var(--mono);
  --t-hero-thin:200 64px/68px var(--mono);
  --t-display:700 40px/44px var(--mono);
  --t-display-thin:200 40px/44px var(--mono);
  --t-h1:700 28px/32px var(--mono);
  --t-h2:700 20px/24px var(--mono);
  --t-h3:600 18px/20px var(--sans);       /* printed instrument names: DRUMS, KICK */
  --t-body:500 16px/24px var(--sans);
  --t-body-mono:400 14px/24px var(--mono);
  --t-small:500 14px/20px var(--sans);
  --t-label:500 11px/16px var(--mono);
  --t-meta:400 12px/16px var(--mono);
  --t-btn:500 13px/1 var(--mono);
  --t-lcd:400 16px/20px var(--pix);
  --t-lcd-s:400 10px/12px var(--pix);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-24:96px;
  /* Square: only round things (knobs, records, avatars) are round */
  --r:0;
  --hit:32px;--hit-touch:44px;--hit-compact:28px;
  --ease:cubic-bezier(.2,.7,.2,1);--t-fast:150ms;--t-med:240ms;--t-slow:300ms;
  /* motion (REVIEW 7.1): audio-critical surfaces use --t-0; everything leaves at 0.75 of its enter time */
  --t-0:0ms;--t-press:80ms;--t-exit:180ms;--t-exit-fast:112ms;--ease-exit:cubic-bezier(.4,0,1,1);--ease-move:cubic-bezier(.4,0,.2,1);
  --d-1:4px;--d-2:8px;--d-3:16px;--stagger:30ms;
}
/* reduced motion: every shift is 0, fades stay but are cut to 80 ms so a change is still seen */
@media (prefers-reduced-motion:reduce){:root{--d-1:0px;--d-2:0px;--d-3:0px;--t-fast:80ms;--t-med:80ms;--t-slow:80ms;--t-exit:80ms;--t-exit-fast:80ms;--stagger:0ms}}