/* Snare Junkie themes (v0.7). Monochrome = the :root tokens in style.css (default, = v0.6.2).
   A theme overrides tokens only; canvas code reads them via getComputedStyle (app.js readTheme / tk).

   SCULPT: Damon's palette (design/theme-sculpt.css, 2026-10-17), same var names --step-1..7.
   Backgrounds stay near-black (cool tint); the palette is used as accents with fixed roles:
     selection / active buttons ........ --step-1 cyan        (black text on it)
     slot 01 / 02 / 03 accents ......... --step-1 cyan, --step-7 lime, --step-4 red  (knob arcs, LED, env + spectrum traces)
     master transient .................. --step-6 amber       (big knobs, gain curve, stage tint)
     armed (LEARN / REMAP / CC learn) .. --step-4 red blinking to --step-5
     meters ............................ lime -> amber -> red near 0 dBFS; gain reduction amber
     spectrum (master / single view) ... all seven steps by frequency, cyan (20 Hz) -> lime (20 kHz)
   Text stays neutral grey/white (contrast checked in scripts/contrast.mjs). */
:root[data-theme="sculpt"] {
  --step-1:#00BFFF; --step-2:#0072FF; --step-3:#0058FF; --step-4:#FF0040; --step-5:#FF2800; --step-6:#FFBF00; --step-7:#D7FF00;
  --bg:#000; --win:#0a0c10; --panel:#0f1217; --line:#222a36; --line2:#323d4e; --dim:#7f8a9b; --mid:#a9b3c1; --fg:#e8edf3; --hi:#fff;
  --on-bg:var(--step-1); --on-fg:#000; --face-back:#0c0e12; --foot:#525c6c; --hdr-bg:#07090c; --field-bg:#05070a; --logo:var(--hi);
  --led-off:#05070a; --led-on:var(--step-7); --led-glow:#d7ff0088; --thumb-bg:#070a0e; --well-bg:#05070a; --gr-fill:var(--step-6);
  --meter-fill:linear-gradient(to top, #D7FF00 0%, #D7FF00 66%, #FFBF00 80%, #FF2800 91%, #FF0040 100%);
  --canvas-bg:#06080b; --hit-bg:#080a0e; --hit-border:var(--step-1); --hit-flash:var(--step-1); --hit-flash-fg:#000; --hit-label:#fff;
  --ph:#fff; --ph-edge:#000; --dim2:#5f6979; --rear-a:#0b0d11; --rear-b:#0e1116; --screw-line:#3b4556; --screw-hi:#354052; --screw-lo:#0e1116; --screw-slot:#000;
  --zone-bg:#090b0f; --lcd-bg:#020304; --lcd-fg:var(--step-6); --dip-lever:var(--step-6); --dip-nc:#3b4556; --jack-ring:#5b6678; --jack-a:#000; --jack-b:#252d3a; --jack-c:#0e1116;
  --link:#8f99aa; --link-line:#5b6678; --scrim:rgba(0,0,0,.72); --cc-badge-bg:#05070a; --cc-badge-fg:var(--step-1); --cc-badge-line:#00799f; --mbox-bg:#0a0c10; --mbox-fg:#bec7d3; --cr-line:#3b4556; --cr-req:var(--step-1); --mbox-a:var(--step-1); --td-line:#182030; --td1:#dde3ea;
  --read-fg:#bec7d3; --padbar-bg:#06080b; --pad-bg:#0a0c10; --pad-sel-border:var(--step-1); --pad-sel-bg:#0b2230; --pad-sel-fg:#fff; --pad-hit:var(--step-7); --pad-flash:#1b3442;
  --armed-bg:var(--step-4); --armed-fg:#000; --armed-blink:var(--step-5); --vel-bg:#020304; --master-border:#7a5c00;
  --knob-track:#232b37; --knob-arc:var(--step-1); --knob-cap:#141820; --knob-cap-big:#181d26; --knob-ptr:#fff;
  --cv-grid:#161d28; --cv-text:#5f6979; --cv-zero:#3b4556; --cv-pt-fill:#000; --cv-pt-line:#dde3ea; --cv-combo:#8f99aa; --cv-adsr-mark:#fff; --cv-adsr-label:#7f8a9b;
  --cv-env-line-1:var(--step-1); --cv-env-line-2:var(--step-7); --cv-env-line-3:var(--step-4); --cv-env-line-m:var(--step-6);
  --cv-env-fill-1:rgba(0,191,255,0.10); --cv-env-fill-2:rgba(215,255,0,0.08); --cv-env-fill-3:rgba(255,0,64,0.10); --cv-env-fill-m:rgba(255,191,0,0.09);
  --cv-stage-1:#1f1a0c; --cv-stage-2:#16130b; --cv-stage-3:#0d0c09; --cv-stage-label:#b39a5a;
  --cv-mstage-1:#221c0b; --cv-mstage-2:#17140b; --cv-mstage-3:#0d0c09; --cv-mlabel:#c4a75e; --cv-mlabel-halo:#0d0c09; --cv-wave:#283f52; --cv-hint:#5f6979; --cv-mid:#2a3340; --cv-master-line:var(--step-6); --cv-axis:#7f8a9b; --cv-note:#8f99aa;
  --cv-spec-1:var(--step-1); --cv-spec-2:var(--step-7); --cv-spec-3:var(--step-4); --cv-spec-m:#fff; --cv-spec-hold:#1f2733; --cv-spec-legend:#a9b3c1; --cv-spec-fill:rgba(255,255,255,0.12);
  --cv-spec-hold1:#4b5566; --cv-spec-live:#fff;
  --cv-spec-grad:#00BFFF #0072FF #0058FF #FF0040 #FF2800 #FFBF00 #D7FF00;
  --cv-spec-grad-fill:rgba(0,191,255,0.22) rgba(0,114,255,0.22) rgba(0,88,255,0.22) rgba(255,0,64,0.2) rgba(255,40,0,0.2) rgba(255,191,0,0.18) rgba(215,255,0,0.16);
  --cv-thumb-text:#7f8a9b; --cv-thumb-line-1:var(--step-1); --cv-thumb-line-2:var(--step-7); --cv-thumb-line-3:var(--step-4);
  --cv-thumb-fill-1:rgba(0,191,255,0.12); --cv-thumb-fill-2:rgba(215,255,0,0.09); --cv-thumb-fill-3:rgba(255,0,64,0.12);
  --cv-vel-diag:#2a3340; --cv-vel-line:var(--step-1); --cv-vel-dot:var(--step-7);
}
/* per-slot accents: knob arcs + the row LED follow the slot colour; the master section is amber */
:root[data-theme="sculpt"] #row-1 { --knob-arc:var(--step-1); --led-on:var(--step-1); --led-glow:#00bfff88; }
:root[data-theme="sculpt"] #row-2 { --knob-arc:var(--step-7); --led-on:var(--step-7); --led-glow:#d7ff0088; }
:root[data-theme="sculpt"] #row-3 { --knob-arc:var(--step-4); --led-on:var(--step-4); --led-glow:#ff004088; }
:root[data-theme="sculpt"] .panel.master { --knob-arc:var(--step-6); }
:root[data-theme="sculpt"] .panel.master .ptitle { color:var(--step-6); }
/* logotype: the whole palette, once */
:root[data-theme="sculpt"] .logo { background:linear-gradient(90deg, var(--step-1), var(--step-2) 22%, var(--step-3) 34%, var(--step-4) 52%, var(--step-5) 66%, var(--step-6) 82%, var(--step-7));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-theme="sculpt"] :focus-visible { outline-color:var(--step-1); }
/* v0.10 PERF tiles: each tile flashes in its own step colour in Sculpt (Monochrome keeps --hit-flash). */
:root[data-theme="sculpt"] .ptile:nth-child(7n+1) { --hit-flash:var(--step-1); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+2) { --hit-flash:var(--step-2); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+3) { --hit-flash:var(--step-3); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+4) { --hit-flash:var(--step-4); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+5) { --hit-flash:var(--step-5); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+6) { --hit-flash:var(--step-6); }
:root[data-theme="sculpt"] .ptile:nth-child(7n+7) { --hit-flash:var(--step-7); }
:root[data-theme="sculpt"] .perfkitname { color:var(--step-1); }
:root[data-theme="sculpt"] .pgtab.on { color:var(--step-1); border-top-color:var(--step-1); }

/* KINO (v0.17.1): the KINO ROM cover palette (/workspace/alex-covers-gt/palette.css, GT40 refs).
   Base charcoal #1B1B1D / near-black #141517; powder blue = selection + slot 01 + main traces; orange = hits,
   REC (PERF key), master; roundel white = text; hedge green (lightened #86A374 for legibility) = slot 02 /
   secondary; flower purple (lightened #B596C0) = slot 03. Shadow blue + footer grey for lines / dim text.
   Coexists with the art-spike "remington" theme (different id). */
:root[data-theme="kino"] {
  --step-1:#8FB3C6; --step-2:#56809E; --step-3:#DC6E2E; --step-4:#E2DDCF; --step-5:#141517; --step-6:#46603F; --step-7:#8A6C95;
  --k-blue:#8FB3C6; --k-shadow:#56809E; --k-orange:#DC6E2E; --k-white:#E2DDCF; --k-black:#141517; --k-green:#46603F; --k-purple:#8A6C95; --k-foot:#B9B59C; --k-char:#1B1B1D;
  --k-green-l:#86A374; --k-purple-l:#B596C0; --k-orange-d:#8a4a22; --k-panic:#a8481a; --k-panic-line:#6e2f10;
  --bg:#141517; --win:#1B1B1D; --panel:#202124; --line:#33363b; --line2:#474b52; --dim:#9c9a88; --mid:#B9B59C; --fg:#E2DDCF; --hi:#f4f0e4;
  --on-bg:var(--step-1); --on-fg:#000; --face-back:#1a1b1e; --foot:#525c6c; --hdr-bg:#161719; --field-bg:#121315; --logo:var(--hi);
  --led-off:#121315; --led-on:var(--k-green-l); --led-glow:#86a37488; --thumb-bg:#151618; --well-bg:#121315; --gr-fill:var(--k-orange);
  --meter-fill:linear-gradient(to top, #8FB3C6 0%, #8FB3C6 66%, #E2DDCF 80%, #DC6E2E 91%, #DC6E2E 100%);
  --canvas-bg:#131416; --hit-bg:#171819; --hit-border:var(--step-1); --hit-flash:var(--k-orange); --hit-flash-fg:#141517; --hit-label:#fff;
  --ph:#fff; --ph-edge:#000; --dim2:#8a877a; --rear-a:#1a1b1d; --rear-b:#1d1e20; --screw-line:#4d5157; --screw-hi:#3a3d42; --screw-lo:#1d1e20; --screw-slot:#000;
  --zone-bg:#18191b; --lcd-bg:#0f1011; --lcd-fg:var(--k-blue); --dip-lever:var(--k-orange); --dip-nc:#4d5157; --jack-ring:#6b6f75; --jack-a:#000; --jack-b:#2e3034; --jack-c:#1d1e20;
  --link:#B9B59C; --link-line:#6b6f75; --scrim:rgba(0,0,0,.72); --cc-badge-bg:#121315; --cc-badge-fg:var(--step-1); --cc-badge-line:#56809E; --mbox-bg:#1d1e21; --mbox-fg:#d4cfc0; --cr-line:#4d5157; --cr-req:var(--step-1); --mbox-a:var(--step-1); --td-line:#2a2c30; --td1:#E2DDCF;
  --read-fg:#d4cfc0; --padbar-bg:#131416; --pad-bg:#1d1e21; --pad-sel-border:var(--step-1); --pad-sel-bg:#24323a; --pad-sel-fg:#fff; --pad-hit:var(--k-orange); --pad-flash:#3a2a20;
  --armed-bg:var(--k-purple-l); --armed-fg:#141517; --armed-blink:var(--k-shadow); --vel-bg:#0f1011; --master-border:#8a4a22;
  --knob-track:#3a3d42; --knob-arc:var(--step-1); --knob-cap:#26282c; --knob-cap-big:#2a2c30; --knob-ptr:#fff;
  --cv-grid:#2a2c30; --cv-text:#8a877a; --cv-zero:#4d5157; --cv-pt-fill:#000; --cv-pt-line:#E2DDCF; --cv-combo:#B9B59C; --cv-adsr-mark:#fff; --cv-adsr-label:#9c9a88;
  --cv-env-line-1:var(--step-1); --cv-env-line-2:var(--k-green-l); --cv-env-line-3:var(--k-purple-l); --cv-env-line-m:var(--k-orange);
  --cv-env-fill-1:rgba(143,179,198,0.10); --cv-env-fill-2:rgba(134,163,116,0.08); --cv-env-fill-3:rgba(181,150,192,0.10); --cv-env-fill-m:rgba(220,110,46,0.09);
  --cv-stage-1:#1f1a0c; --cv-stage-2:#16130b; --cv-stage-3:#0d0c09; --cv-stage-label:#b39a5a;
  --cv-mstage-1:#221c0b; --cv-mstage-2:#17140b; --cv-mstage-3:#0d0c09; --cv-mlabel:#c4a75e; --cv-mlabel-halo:#0d0c09; --cv-wave:#3c5566; --cv-hint:#8a877a; --cv-mid:#3a3d42; --cv-master-line:var(--k-orange); --cv-axis:#9c9a88; --cv-note:#B9B59C;
  --cv-spec-1:var(--step-1); --cv-spec-2:var(--k-green-l); --cv-spec-3:var(--k-purple-l); --cv-spec-m:#fff; --cv-spec-hold:#33363b; --cv-spec-legend:#B9B59C; --cv-spec-fill:rgba(255,255,255,0.12);
  --cv-spec-hold1:#5a5e64; --cv-spec-live:#fff;
  --cv-spec-grad:#8FB3C6 #56809E #46603F #86A374 #DC6E2E #B596C0 #8A6C95;
  --cv-spec-grad-fill:rgba(143,179,198,0.22) rgba(86,128,158,0.22) rgba(86,128,158,0.22) rgba(181,150,192,0.2) rgba(220,110,46,0.2) rgba(220,110,46,0.18) rgba(134,163,116,0.16);
  --cv-thumb-text:#9c9a88; --cv-thumb-line-1:var(--step-1); --cv-thumb-line-2:var(--k-green-l); --cv-thumb-line-3:var(--k-purple-l);
  --cv-thumb-fill-1:rgba(143,179,198,0.12); --cv-thumb-fill-2:rgba(134,163,116,0.09); --cv-thumb-fill-3:rgba(181,150,192,0.12);
  --cv-vel-diag:#3a3d42; --cv-vel-line:var(--step-1); --cv-vel-dot:var(--k-green-l);
}
/* per-slot accents: knob arcs + the row LED follow the slot colour; the master section is amber */
:root[data-theme="kino"] #row-1 { --knob-arc:var(--step-1); --led-on:var(--step-1); --led-glow:#8fb3c688; }
:root[data-theme="kino"] #row-2 { --knob-arc:var(--k-green-l); --led-on:var(--k-green-l); --led-glow:#86a37488; }
:root[data-theme="kino"] #row-3 { --knob-arc:var(--k-purple-l); --led-on:var(--k-purple-l); --led-glow:#b596c088; }
:root[data-theme="kino"] .panel.master { --knob-arc:var(--k-orange); }
:root[data-theme="kino"] .panel.master .ptitle { color:var(--k-orange); }
/* logotype: the whole palette, once */
:root[data-theme="kino"] :focus-visible { outline-color:var(--step-1); }
/* v0.10 PERF tiles: each tile flashes in its own step colour in Sculpt (Monochrome keeps --hit-flash). */
:root[data-theme="kino"] .perfkitname { color:var(--step-1); }
:root[data-theme="kino"] .pgtab.on { color:var(--step-1); border-top-color:var(--step-1); }

/* hits / REC in orange; logo in powder blue with an orange dot feel */
:root[data-theme="kino"] .logo { color:var(--k-blue); }
:root[data-theme="kino"] .ptile { --hit-flash:var(--k-orange); }
:root[data-theme="kino"] :is(#perfBtn.on, #perfExit) { background:var(--k-orange); color:var(--k-black); border-color:var(--k-orange-d); }
:root[data-theme="kino"] .perfkitname { color:var(--k-blue); }
:root[data-theme="kino"] .pgtab.on { color:var(--k-blue); border-top-color:var(--k-blue); }
:root[data-theme="kino"] .unitrow .themesel { color:var(--mid); } /* SETUP THEME label: readable (was --dim) */
:root[data-theme="kino"] .btn.panic { background:var(--k-panic); color:#fff; border-color:var(--k-panic-line); }
:root[data-theme="kino"] .btn.panic.fired { background:var(--k-orange); }

/* CASSETTE (v0.11.x): Damon's grey QFX classroom cassette recorder (design/refs/cassette-theme-ref.png).
   Light warm-grey plastic body, darker grey recessed fields, black piano-key buttons with white labels, a smoked
   window for every display (dark, with a thin red pinstripe like the window graphic), speaker-grille dots on the two
   big reserved zones (SOUND · SYNTH ENGINE, SETUP · OUTPUTS). Red (--rec, the REC key) is used for one kind of
   thing only: a HIT (HIT pad flash, the pad-strip hit bar, PERF hardest-hit flash, the PERF key while armed) plus
   the window pinstripe. Engaged/selected = a pressed cream key; armed (LEARN etc.) blinks cream/grey.
   Flat: no gradients or bevels beyond one 1 px key shadow. Contrast: scripts/contrast.mjs (AA for labels). */
:root[data-theme="cassette"] {
  --perf-hard:1; --rec:#c8102e; --rec-deep:#8e0b20; --key:#1d1d1f; --key-line:#000; --key-fg:#f1f0eb; --key-dim:#b4b2ac; --cream:#efede6;
  --smoke:#2f3034; --smoke-line:#45464c; --smoke-fg:#e6e4dd; --smoke-dim:#a8a7a2; --grille:#a9a7a1;
  --bg:#2a2927; --win:#c9c7c1; --panel:#bebcb6; --line:#a6a49e; --line2:#7f7d78; --dim:#46443f; --mid:#33322f; --fg:#151514; --hi:#000;
  --on-bg:var(--cream); --on-fg:#000; --face-back:#c9c7c1; --foot:#a3a19b; --hdr-bg:#bdbbb5; --field-bg:#a19f99; --logo:#000;
  --led-off:#a6a49e; --led-on:var(--key); --led-glow:transparent; --thumb-bg:var(--smoke); --well-bg:var(--smoke); --gr-fill:#9e9c96; --meter-fill:#e6e4dd;
  --canvas-bg:var(--smoke); --hit-bg:var(--key); --hit-border:var(--key-line); --hit-flash:var(--rec); --hit-flash-fg:#fff; --hit-label:var(--key-fg);
  --ph:#fff; --ph-edge:#000; --dim2:#4b4944; --rear-a:#c9c7c1; --rear-b:#c4c2bc; --screw-line:#85837e; --screw-hi:#d6d4ce; --screw-lo:#9e9c96; --screw-slot:#55534e;
  --zone-bg:var(--panel); --lcd-bg:var(--smoke); --lcd-fg:var(--smoke-fg); --dip-lever:var(--smoke-fg); --dip-nc:#6a6964; --jack-ring:#55534e; --jack-a:#000; --jack-b:#3a3a3a; --jack-c:#1d1d1f;
  --link:#d9d7d0; --link-line:#85837e; --scrim:rgba(20,20,19,.6); --cc-badge-bg:var(--key); --cc-badge-fg:var(--key-fg); --cc-badge-line:#000; --mbox-bg:#d1cfc9; --mbox-fg:#1d1d1c; --cr-line:#85837e; --cr-req:#000; --mbox-a:#000; --td-line:#b3b1ab; --td1:#000;
  --read-fg:#2a2927; --padbar-bg:#bdbbb5; --pad-bg:var(--key); --pad-sel-border:#000; --pad-sel-bg:var(--cream); --pad-sel-fg:#000; --pad-hit:var(--rec); --pad-flash:#4a4a4d;
  --armed-bg:var(--cream); --armed-fg:#000; --armed-blink:#8e8c87; --vel-bg:var(--smoke); --master-border:#33322f;
  --knob-track:#94928c; --knob-arc:#151514; --knob-cap:var(--key); --knob-cap-big:var(--key); --knob-ptr:#fff;
  --cv-grid:#3b3c41; --cv-text:#a8a7a2; --cv-zero:#55565c; --cv-pt-fill:var(--smoke); --cv-pt-line:var(--smoke-fg); --cv-combo:#a8a7a2; --cv-adsr-mark:#fff; --cv-adsr-label:#a8a7a2;
  --cv-env-line-1:#f1f0eb; --cv-env-line-2:#c4c2bc; --cv-env-line-3:#9a9893; --cv-env-line-m:#f1f0eb;
  --cv-env-fill-1:rgba(255,255,255,0.08); --cv-env-fill-2:rgba(255,255,255,0.06); --cv-env-fill-3:rgba(255,255,255,0.05); --cv-env-fill-m:rgba(255,255,255,0.08);
  --cv-stage-1:#3b3c41; --cv-stage-2:#36373b; --cv-stage-3:#313236; --cv-stage-label:#b4b3ad;
  --cv-mstage-1:#3d3e43; --cv-mstage-2:#37383c; --cv-mstage-3:#313236; --cv-mlabel:#bcbab4; --cv-mlabel-halo:#2f3034; --cv-wave:#5a5b61; --cv-hint:#8a8984; --cv-mid:#45464c; --cv-master-line:#f1f0eb; --cv-axis:#a8a7a2; --cv-note:#a8a7a2;
  --cv-spec-1:#f1f0eb; --cv-spec-2:#bdbbb5; --cv-spec-3:#8e8c87; --cv-spec-m:#fff; --cv-spec-hold:#4a4b50; --cv-spec-legend:#c9c7c1; --cv-spec-fill:rgba(255,255,255,0.10);
  --cv-spec-hold1:#77787d; --cv-spec-live:#fff;
  --cv-thumb-text:#a8a7a2; --cv-thumb-line-1:#f1f0eb; --cv-thumb-line-2:#c4c2bc; --cv-thumb-line-3:#9a9893;
  --cv-thumb-fill-1:rgba(255,255,255,0.10); --cv-thumb-fill-2:rgba(255,255,255,0.07); --cv-thumb-fill-3:rgba(255,255,255,0.06);
  --cv-vel-diag:#4a4b50; --cv-vel-line:#f1f0eb; --cv-vel-dot:#fff; --cv-pin:var(--rec);
}
/* transport keys: every button is a black key with a white label; engaged = pressed cream key */
:root[data-theme="cassette"] :is(.btn, .chip, .seg button, .tabs button) { background:var(--key); color:var(--key-fg); border-color:var(--key-line); box-shadow:inset 0 -2px 0 rgba(255,255,255,.07); }
:root[data-theme="cassette"] :is(.seg button, .tabs button, .chip.gate) { color:var(--key-dim); }
:root[data-theme="cassette"] :is(.btn.on, .chip.on, .seg button.on, .tabs button.on) { background:var(--on-bg); color:var(--on-fg); border-color:var(--key-line); box-shadow:inset 0 2px 0 rgba(0,0,0,.18); }
:root[data-theme="cassette"] :is(.btn.learn.on, .btn.armed, .btn#ccLearnBtn.armed) { border-color:var(--key-line); }
:root[data-theme="cassette"] .compbtn.byp { color:var(--key-dim); }
:root[data-theme="cassette"] :is(#perfBtn.on, #perfExit) { background:var(--rec); color:#fff; border-color:var(--rec-deep); } /* the REC key */
:root[data-theme="cassette"] .pad { color:var(--key-dim); border-color:var(--key-line); }
:root[data-theme="cassette"] .pad b { color:var(--key-fg); }
:root[data-theme="cassette"] :is(.pad small, .pad .ck) { color:var(--key-dim); }
:root[data-theme="cassette"] .pad.sel b { color:var(--pad-sel-fg); }
:root[data-theme="cassette"] .pad.sel :is(small, .ck) { color:#33322f; }
:root[data-theme="cassette"] .pad i { height:3px; }
:root[data-theme="cassette"] .hitpad .hitsub { color:var(--key-dim); }
/* the smoked window: displays get a thin red pinstripe inset like the cassette window graphic */
:root[data-theme="cassette"] :is(#envCanvas, #masterCanvas, #specCanvas, #velCanvas) { border-color:#1d1d1f; } /* + the red pinstripe drawn inside (--cv-pin) */
:root[data-theme="cassette"] .envthumb canvas { border-color:#55534e; }
:root[data-theme="cassette"] #vzRows canvas { border-color:#1d1d1f; } /* v0.13.1: VEL ZONES lanes are smoked windows too */
:root[data-theme="cassette"] .vzedit select { color:var(--fg); }
:root[data-theme="cassette"] .envthumb.sel canvas { border-color:#000; }
:root[data-theme="cassette"] :is(.meter, .gr, .pbt) { border-color:#1d1d1f; }
:root[data-theme="cassette"] .pbt b { background:var(--smoke-fg); }
:root[data-theme="cassette"] .stepper .lcd { border-color:#1d1d1f; }
:root[data-theme="cassette"] .dip .slot { border-color:#1d1d1f; }
:root[data-theme="cassette"] .logo { font-style:italic; letter-spacing:4px; }
:root[data-theme="cassette"] .ver { color:#33322f; }
:root[data-theme="cassette"] .pgtab.on { color:#000; border-top-color:#000; }
:root[data-theme="cassette"] :focus-visible { outline-color:#000; }
:root[data-theme="cassette"] .themesel select { color:var(--fg); }
/* speaker grille on the two big empty reserved zones only; the slots stay solid so their text reads */
:root[data-theme="cassette"] :is(.pg-sound, .pg-setup) .phzone { background:radial-gradient(circle, var(--grille) 1.3px, transparent 1.7px) 3px 3px / 8px 8px, var(--panel); border-color:var(--line2); }
:root[data-theme="cassette"] .phzone .ztitle { color:#33322f; }
:root[data-theme="cassette"] :is(.pg-sound, .pg-setup) .phzone .ztitle { align-self:flex-start; background:var(--panel); padding:0 6px 0 2px; margin:-2px 0 0 -2px; }
:root[data-theme="cassette"] .phslot { background:var(--win); border-color:var(--line2); }
/* PERF: tiles are grey plastic keys; a hit darkens the key (press), the hardest hits flash red (REC) */
:root[data-theme="cassette"] .perf { background:var(--win); }
:root[data-theme="cassette"] .ptile { --pad-bg:#d6d4ce; --hit-flash:#1d1d1f; border-color:#7f7d78; }
:root[data-theme="cassette"] .ptile .pfl { background:rgba(29,29,31,.78); }
:root[data-theme="cassette"] .ptile .pfh { background:var(--rec); display:block; will-change:opacity; }
:root[data-theme="cassette"] .ptile.sel { border-color:#000; box-shadow:inset 0 0 0 1px #000; }
:root[data-theme="cassette"] .phit { color:var(--key-fg); border-color:var(--key-line); }
:root[data-theme="cassette"] .phit:first-child { background:var(--cream); color:#000; border-color:#000; }
:root[data-theme="cassette"] .perfcover { border-color:#1d1d1f; }
:root[data-theme="cassette"] .perfcover span { color:var(--smoke-dim); }
:root[data-theme="cassette"] .perfkitname { font-style:italic; }
:root[data-theme="cassette"] .unitrow .themesel { color:var(--dim); }

/* v0.16.1 ALL OFF is red in Cassette (like a stop key) */
:root[data-theme="cassette"] .btn.panic { background:#b3261e; color:#fff; border-color:#7a1712; }
:root[data-theme="cassette"] .btn.panic.fired { background:#ff4a3d; }

/* v0.15.0-art.1 art spike: theme details for the touch-ups (Monochrome uses the plain tokens in style.css) */
:root[data-theme="sculpt"] .romcard .rckit { color:var(--step-1); }
:root[data-theme="sculpt"] .pgtab.on .k { border-color:var(--step-1); background:var(--step-1); color:#000; }
:root[data-theme="sculpt"] .hitpad.flash .hitvel { background:var(--step-7); }
/* Cassette: the ROM card is a smoked tape window (dark bezel + the red pinstripe, as the displays); tab numbers are
   black piano keys, the current page's key is pressed (cream); the HIT velocity bar is the one red thing */
:root[data-theme="cassette"] .romcard .rcwin { border:3px solid var(--smoke); outline:1px solid #1d1d1f; outline-offset:0; }
:root[data-theme="cassette"] .romcard .rcwin::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--rec); pointer-events:none; }
:root[data-theme="cassette"] .romcard .rcrom { color:#33322f; }
:root[data-theme="cassette"] .romcard .rckit { color:#000; font-style:italic; }
:root[data-theme="cassette"] .pgtab .k { background:var(--key); color:var(--key-fg); border-color:var(--key-line); box-shadow:0 1px 0 #000; }
:root[data-theme="cassette"] .pgtab.on .k { background:var(--cream); color:#000; border-color:#000; box-shadow:none; transform:translateY(1px); }
:root[data-theme="cassette"] .hitpad .hitvel, :root[data-theme="cassette"] .hitpad.flash .hitvel { background:#fff; }
:root[data-theme="cassette"] .zsimple .sknobs { background:var(--win); }
:root[data-theme="cassette"] .zsimple .skp { border-color:var(--key-line); color:var(--key-dim); }
:root[data-theme="cassette"] .zsimple .skp b { color:var(--key-fg); }
:root[data-theme="cassette"] .zsimple .skp.sel b, :root[data-theme="cassette"] .zsimple .skp.sel span { color:#000; }

/* REMINGTON (v0.15.0-art.1 spike): Damon's palette, same var names --step-1..7:
     #00FFFF cyan · #0089A6 teal · #00324D deep blue · #FF0080 magenta · #4D000B oxblood · #FF8000 orange · #4D4100 olive
   Roles: base = near-black tinted from #00324D (panels a step lighter); cyan = primary (selection, active buttons,
   slot 01); magenta = the HIT (HIT flash, pad hit bar, PERF flash) and slot 03; orange = warnings / armed / REC and
   the master transient; teal = lines and secondary; the two dark tints (#4D000B, #4D4100) only as stage washes.
   Text stays neutral cool grey/white so labels read. */
:root[data-theme="remington"] {
  --step-1:#00FFFF; --step-2:#0089A6; --step-3:#00324D; --step-4:#FF0080; --step-5:#4D000B; --step-6:#FF8000; --step-7:#4D4100;
  --bg:#000a10; --win:#001521; --panel:#001b2a; --line:#0b3448; --line2:#13506b; --dim:#7fa6b8; --mid:#b2ccd8; --fg:#e8f4f8; --hi:#fff;
  --on-bg:var(--step-1); --on-fg:#00141f; --face-back:#001521; --foot:#4f7487; --hdr-bg:#00101a; --field-bg:#000e17; --logo:var(--hi);
  --led-off:#000e17; --led-on:var(--step-1); --led-glow:#00ffff77; --thumb-bg:#000e17; --well-bg:#000e17; --gr-fill:var(--step-6);
  --meter-fill:linear-gradient(to top, #0089A6 0%, #00FFFF 66%, #FF8000 84%, #FF0080 100%);
  --canvas-bg:#000f18; --hit-bg:#00121d; --hit-border:var(--step-2); --hit-flash:var(--step-4); --hit-flash-fg:#fff; --hit-label:#fff;
  --ph:#fff; --ph-edge:#000; --dim2:#5d8396; --rear-a:#00131e; --rear-b:#001724; --screw-line:#2b5568; --screw-hi:#244b5e; --screw-lo:#001724; --screw-slot:#000;
  --zone-bg:#001722; --lcd-bg:#000a10; --lcd-fg:var(--step-6); --dip-lever:var(--step-6); --dip-nc:#2b5568; --jack-ring:#4f7487; --jack-a:#000; --jack-b:#0b3448; --jack-c:#001724;
  --link:#8fb3c3; --link-line:#4f7487; --scrim:rgba(0,8,13,.74); --cc-badge-bg:#000e17; --cc-badge-fg:var(--step-1); --cc-badge-line:#0089A6; --mbox-bg:#001521; --mbox-fg:#c3d9e2; --cr-line:#2b5568; --cr-req:var(--step-1); --mbox-a:var(--step-1); --td-line:#0b2c3c; --td1:#dcecf2;
  --read-fg:#c3d9e2; --padbar-bg:#000f18; --pad-bg:#001521; --pad-sel-border:var(--step-1); --pad-sel-bg:#003a4d; --pad-sel-fg:#fff; --pad-hit:var(--step-4); --pad-flash:#3d0a26;
  --armed-bg:var(--step-6); --armed-fg:#000; --armed-blink:#8a4600; --vel-bg:#000a10; --master-border:#7a3d00;
  --knob-track:#0f3c52; --knob-arc:var(--step-1); --knob-cap:#00202f; --knob-cap-big:#002436; --knob-ptr:#fff;
  --cv-grid:#062a3b; --cv-text:#5d8396; --cv-zero:#2b5568; --cv-pt-fill:#000; --cv-pt-line:#dcecf2; --cv-combo:#8fb3c3; --cv-adsr-mark:#fff; --cv-adsr-label:#7fa6b8;
  --cv-env-line-1:var(--step-1); --cv-env-line-2:var(--step-6); --cv-env-line-3:var(--step-4); --cv-env-line-m:var(--step-6);
  --cv-env-fill-1:rgba(0,255,255,0.09); --cv-env-fill-2:rgba(255,128,0,0.09); --cv-env-fill-3:rgba(255,0,128,0.10); --cv-env-fill-m:rgba(255,128,0,0.09);
  --cv-stage-1:#2a2400; --cv-stage-2:#1d1900; --cv-stage-3:#0f0d03; --cv-stage-label:#b8a24d;
  --cv-mstage-1:#33060f; --cv-mstage-2:#22050b; --cv-mstage-3:#120306; --cv-mlabel:#ff9a3d; --cv-mlabel-halo:#120306; --cv-wave:#0b4a63; --cv-hint:#5d8396; --cv-mid:#0f3c52; --cv-master-line:var(--step-6); --cv-axis:#7fa6b8; --cv-note:#8fb3c3;
  --cv-spec-1:var(--step-1); --cv-spec-2:var(--step-6); --cv-spec-3:var(--step-4); --cv-spec-m:#fff; --cv-spec-hold:#0b3448; --cv-spec-legend:#b2ccd8; --cv-spec-fill:rgba(255,255,255,0.12);
  --cv-spec-hold1:#3f6a7e; --cv-spec-live:#fff;
  --cv-spec-grad:#00FFFF #00C4D9 #0089A6 #FF0080 #FF0080 #FF8000 #FF8000;
  --cv-spec-grad-fill:rgba(0,255,255,0.2) rgba(0,196,217,0.2) rgba(0,137,166,0.2) rgba(255,0,128,0.2) rgba(255,0,128,0.18) rgba(255,128,0,0.18) rgba(255,128,0,0.16);
  --cv-thumb-text:#7fa6b8; --cv-thumb-line-1:var(--step-1); --cv-thumb-line-2:var(--step-6); --cv-thumb-line-3:var(--step-4);
  --cv-thumb-fill-1:rgba(0,255,255,0.12); --cv-thumb-fill-2:rgba(255,128,0,0.10); --cv-thumb-fill-3:rgba(255,0,128,0.12);
  --cv-vel-diag:#0f3c52; --cv-vel-line:var(--step-1); --cv-vel-dot:var(--step-4);
}
:root[data-theme="remington"] #row-1 { --knob-arc:var(--step-1); --led-on:var(--step-1); --led-glow:#00ffff77; }
:root[data-theme="remington"] #row-2 { --knob-arc:var(--step-6); --led-on:var(--step-6); --led-glow:#ff800077; }
:root[data-theme="remington"] #row-3 { --knob-arc:var(--step-4); --led-on:var(--step-4); --led-glow:#ff008077; }
:root[data-theme="remington"] .panel.master { --knob-arc:var(--step-6); }
:root[data-theme="remington"] .panel.master .ptitle { color:var(--step-6); }
:root[data-theme="remington"] .logo { color:var(--step-1); }
:root[data-theme="remington"] :focus-visible { outline-color:var(--step-1); }
:root[data-theme="remington"] .perfkitname { color:var(--step-1); }
:root[data-theme="remington"] .pgtab.on { color:var(--step-1); border-top-color:var(--step-1); }
:root[data-theme="remington"] .pgtab.on .k { border-color:var(--step-1); background:var(--step-1); color:#00141f; }
:root[data-theme="remington"] .romcard .rckit { color:var(--step-1); }
:root[data-theme="remington"] :is(#perfBtn.on, #perfExit) { background:var(--step-6); color:#000; border-color:var(--step-6); } /* REC = orange */
:root[data-theme="remington"] .ptile { --hit-flash:var(--step-4); }