/* =====================================================================
   PATRICK v2 · design tokens · DESIGHNUS · 18 Oct 2026
   Chrome Grotesk type · jet black + functional rainbow · square · 8px grid
   Scope: the PATRICK v2 synth only (not benventions.com).
   Proposal only: nothing here is wired into the live app.
   Contrast ratios are WCAG 2.x against #000.
   ===================================================================== */

/* ---------- fonts: the PATRICK type family (BENVENTIONS, our own outlines; see src/fonts/README.md) ---------- */
@font-face{font-family:"Patrick Turbo";src:url(../fonts/patrick-turbo.woff2?v=06f219dffa) format("woff2");font-weight:600 900;font-display:swap}
/* Panel: the hinted static weights (clean at 11-13 px UI sizes); 400-500 -> Regular, 600 and up -> Bold */
@font-face{font-family:"Patrick Panel";src:url(../fonts/patrick-panel-regular.woff2?v=5b705050f3) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Patrick Panel";src:url(../fonts/patrick-panel-bold.woff2?v=6d1ea515f1) format("woff2");font-weight:700;font-display:swap}
/* Segment: an upright 14-segment-style LED face that draws its own letters and punctuation. Ghost (the unlit
   segments, same metrics) is declared for layering under a readout; nothing uses it yet */
@font-face{font-family:"Patrick Segment";src:url(../fonts/patrick-segment.woff2?v=36d111701a) format("woff2");font-display:swap}
@font-face{font-family:"Patrick Segment Ghost";src:url(../fonts/patrick-segment-ghost.woff2?v=c534292410) format("woff2");font-display:swap}
/* Strike: the angular chisel-nib script (v0.2, from the v0.2.1 family build). ui-batch1: the Library's patch names */
@font-face{font-family:"Patrick Strike";src:url(../fonts/patrick-strike.woff2?v=8c5743c7ac) format("woff2");font-display:swap}

:root{
  color-scheme:dark;

  /* ---------- families ---------- */
  --font-head:"Patrick Turbo","Patrick Panel",system-ui,sans-serif;   /* wide display, 600-900, UPPERCASE */
  --font-body:"Patrick Panel",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-label:var(--font-body);                              /* caps + .12em */
  --font-seg7:"Patrick Segment","Patrick Panel",monospace;     /* numbers: BPM, values, CPU */
  --font-seg14:"Patrick Segment","Patrick Panel",monospace;    /* alphanumeric: patch name, ticker */
  --font-script:"Patrick Strike","Patrick Panel",cursive;      /* ui-batch1: the Library's patch names (mixed case) */
  --head-wdth:125;

  /* ---------- neutrals (text ratios on #000) ---------- */
  --black:#000000;      /* ground */
  --panel:#000000;      /* cells stay black. Depth comes from outlines, not fills */
  --ink:#F4F1EA;        /* 18.6:1  primary text, values */
  --ink-2:#C9C4D6;      /* 12.4:1  labels */
  --ink-3:#9A94A8;      /*  7.2:1  hints, secondary captions (the FLOOR for any text) */
  --line:#4A4458;       /*  2.3:1  idle outlines/grid only, NEVER text */
  --line-2:#6E677E;     /*  3.9:1  inactive control outlines (meets 3:1 non-text, WCAG 1.4.11) */
  --track:#1E1A26;      /*  unlit segments / meter troughs, never text */

  /* ---------- functional colours ---------- */
  --playhead:#FFFFFF;   /* 21:1   white = playhead / "now" ONLY */
  --rec:#FF2D2D;        /* 5.7:1  red = record / clip / arm ONLY */
  --value:var(--ink);   /* values are bright ink. Colour comes from the module */
  --focus:#FFFFFF;      /* focus ring = white + 2px offset (same family as playhead: "you are here") */
  --meter-ok:#50EC59;  --meter-hot:#FBE448;  --meter-warn:#F78E34;  --meter-clip:var(--rec);

  /* ---------- module colours = identity (V2 chain order, spectrum minus red) ---------- */
  --m-presets:#F78F3E;  /*  8.9:1  orange   glyph: 2x2 grid         */
  --m-player:#FBE448;   /* 16.4:1  yellow   glyph: square play/step */
  --m-arp:#A5FC55;      /* 16.8:1  lime     glyph: staircase        */
  --m-mod:#47E5D6;      /* 13.5:1  cyan     glyph: square wave      */
  --m-voices:#4C9CF4;   /*  7.3:1  blue     glyph: 3 stacked bars   */
  --m-pedals:#AF72F3;   /*  6.4:1  violet   glyph: stompbox         */
  --m-master:#F65DAE;   /*  7.0:1  magenta  glyph: twin VU bars     */
  /* Voices sub-modules inherit --m-voices and are told apart by glyph + label:
     Mixer (3 faders) · Analog (sawtooth) · Model (ADSR polyline) · Singers (open-mouth bracket) */

  /* brightness = state. Apply to the module colour with color-mix. Graphics only.
     Dimmed tints fall under 4.5:1, so they never carry text. */
  --lvl-off:25%;    /* unlit LED, bypassed outline (~1.4:1) */
  --lvl-idle:55%;   /* available, not selected (~2.5-5:1). Outline only */
  --lvl-on:100%;    /* active / selected: full colour, black text on fill */
  /* usage: border-color:color-mix(in srgb,var(--mc) var(--lvl-idle),#000) */

  /* brand accents (outside the module system) */
  --pink:#F66AA2;  --gold:#F3B845;   /* script gradient 7.4:1 → 11.7:1 */
  --rainbow:linear-gradient(90deg in oklch,#F57837 0%,#F79137 8.33%,#F4B43B 16.67%,#F6CF42 25%,#D5E244 33.33%,#A9ED43 41.67%,#79EE5A 50%,#53E8B8 58.33%,#43D0EC 66.67%,#45A7EF 75%,#566CEC 83.33%,#7539DF 91.67%,#9836B8 100%); /* smooth blend, never stepped (Benjamin) */
  --rainbow-fallback:linear-gradient(90deg,#F57837,#F79137,#F4B43B,#F6CF42,#D5E244,#A9ED43,#79EE5A,#53E8B8,#43D0EC,#45A7EF,#566CEC,#7539DF,#9836B8);

  --spectrum-y:linear-gradient(180deg,#F57837 0%,#F79137 8.33%,#F4B43B 16.67%,#F6CF42 25%,#D5E244 33.33%,#A9ED43 41.67%,#79EE5A 50%,#53E8B8 58.33%,#43D0EC 66.67%,#45A7EF 75%,#566CEC 83.33%,#7539DF 91.67%,#9836B8 100%);   /* the logo's 13 stops, top to bottom (main site's --spectrum-y): the scroll-progress lines */
  --spectrum-up:linear-gradient(0deg,#F57837 0%,#F79137 8.33%,#F4B43B 16.67%,#F6CF42 25%,#D5E244 33.33%,#A9ED43 41.67%,#79EE5A 50%,#53E8B8 58.33%,#43D0EC 66.67%,#45A7EF 75%,#566CEC 83.33%,#7539DF 91.67%,#9836B8 100%);   /* the same stops reversed: violet at the top, orange at the bottom. The scroll lines run on from the header line's violet right end (Benjamin) */
  --progress-w:3px;     /* the scroll-progress line (site.css .progress) */

  /* ---------- 4c-5 colour (Benjamin's Obsidian Spectacular sheet v4): tab colours, then every cell's own sub-theme of its
     tab colour (oklch hue steps in a per-tab window of up to -30..+32 deg plus lightness/chroma steps, every pair in a view >= .08 deltaE OK apart;
     each >= 4.6:1 on #000), generated by checks/s4c5/tools/subthemes.py; then the preset types ---------- */
  --tab-patrick:#F57837; --tab-mix:#C383F5; --tab-play:#F6CF42; --tab-voices:#79EE5A; --tab-mod:#43D0EC; --tab-life:#C9F256; --tab-fx:#45A7EF; --tab-master:#AC57E0;
  /* colour pass (10-22): the six tabs run the coin's rainbow in order, PATRICK orange, PLAY yellow, VOICES green, MOD
     cyan, FX blue, MASTER violet. Each family was re-picked inside its tab's hue band (greens / blues / violets), every
     colour >= 4.5:1 on black and neighbours in one view >= .077 dE OK apart. MIX's engine strips (on MASTER) wear their
     VOICES sub-tab colours, so an engine is one colour everywhere. */
  /* VOICES sub-tabs */ --sub-analog:#79EE5A; --sub-super:#53E8B8; --sub-model:#3EBB52; --sub-singers:#D5E244;
  /* Syn Rise S7b: the PULSAR sub-tab (D3), the band's pale spring green (oklch L .859 C .147 h 140): 14.30:1 on #000, dE OK
     .079 super, .092 singers, .095 analog, .170 model (fallback #3BC5A1). checks/sr7b/tools/plcol.py */ --sub-pulsar:#A2E693;
  /* UPGRADE: the DELUXE sub-tab and its cells (the coin: tangerine, ember, sun, amber, lime, sky) */ --sub-deluxe:#F79137; --cell-pmd:#F57837; --cell-uni:#F6CF42; --cell-brs:#F4B43B; --cell-rel:#A9ED43; --cell-rib:#45A7EF;
  /* PAN: the sub-tab (plum, lifted) and its cells (sun, mint, cyan, cobalt, ember) */ --sub-pan:#AB4BCB; --cell-pfg:#F6CF42; --cell-pvp:#53E8B8; --cell-pap:#43D0EC; --cell-pcp:#566CEC; --cell-pop:#F57837;
  /* GOLDCHAIN (docs/stages/goldchain.md): MOD › GOLDCHAIN's five cells, the coin's gold band (amber, sun, tangerine) running into the rainbow */ --cell-gch:#F4B43B; --cell-gce:#F6CF42; --cell-gcd:#F79137; --cell-gcs:#F4B43B; --cell-gct:#F6CF42; --gc-gold:#F4B43B;
  /* patrick */ --cell-lib:#F57837;
  /* Syn Rise S6b: the Macros' PAT mirror, the band's pale gold (oklch L .881 C .131 h 85): 14.58:1 on #000, dE OK .213 from the
     Library (the view's one other cell), .114 from the AMBER its knobs wear. checks/sr6b/tools/maccol.py */ --cell-pmac:#FBD27B;
  /* mix */ --cell-eng:#C383F5; --cell-mxa:#79EE5A; --cell-mxm:#3EBB52; --cell-mxs:#D5E244;   /* colour pass: eng is MASTER's; the strips are the engines' VOICES sub-tab colours */
  /* play */ --cell-arp:#EDD64A; --cell-blk:#F6AE3C; --cell-seq:#B5CB3B;
  /* analog */ --cell-osc:#79EE5A; --cell-mix:#53E8B8; --cell-flt:#A2D145; --cell-env:#41BDA6; --cell-gld:#34A553; --cell-xm:#BDFDB7;
  /* Syn Rise S2: Pulse width, the band's pure green between Oscillators and Glide: 9.49:1 on #000, dE OK >= .105 from every
     ANALOG cell (flt .105, gld .111, osc .122, env .153, mix .159, life .194, xm .233) */ --cell-pwm:#3DC73D;
  /* Syn Rise S4: Shape env, the band's mid green between Pulse width and Contours: 10.77:1 on #000, dE OK >= .085 from every
     ANALOG cell (mix .085, flt .088, env .088, pwm .093, osc .120, gld .131, life .166, xm .168). checks/sr4/tools/jenvcol.py */ --cell-jenv:#6ACD83;
  /* Syn Rise S7b: the PULSAR view's own three, VOICES' green band (oklch hue 122..178, L >= .72, >= .09 from every code colour),
     each the largest smallest dE OK from every cell in that view, mirrors included (ppwm = pwm, pshp = jenv, plf2 = lfo2, and
     the sub-tab colour): DCO chartreuse (L .929 C .220 h 122) 17.75:1, dE sub .116, pdc2 .123, pflt .183, pshp .193, ppwm .218,
     plf2 .332; DCO 2 pale lime (L .961 C .101 h 123) 19.15:1, dE pflt .111, sub .118, pdco .123, pshp .208; Filter pale aqua (L .920
     C .119 h 178) 17.37:1, dE sub .110, pdc2 .111, pshp .169, pdco .183, plf2 .207. The view's closest pair stays the mirrors'
     own (ppwm-pshp .093, as on ANALOG). checks/sr7b/tools/plcol.py */ --cell-pdco:#D2FB51; --cell-pdc2:#E6FDBA; --cell-pflt:#91FCE5;
  /* super */ --cell-star:#53E8B8; --cell-sco:#82BC3B;
  /* model */ --cell-mdl:#3EBB52; --cell-mvis:#AFF752; --cell-menv:#69FBDE;
  /* singers */ --cell-sng:#D5E244; --cell-fac:#43BB39; --cell-vow:#69FBDE; --cell-stg:#3EB49E;
  /* mod (ui-batch1, Benjamin: Modulation and LFO read alike, both cyan): the window widened across the coin's green-cyan-blue-violet
     run, oklch hue 120..292 (was 170..228); every cell >= 5.9:1 on #000, min pair dE OK .102 (was .086), mod-lfo 95 deg apart
     (was 3). checks/ui-batch1/tools/modcols.py */
  /* mod */ --cell-mod:#5DD9DA; --cell-lfo:#69A7F5; --cell-wh:#9C82F3; --cell-cyc:#AFF7FB; --cell-joy:#7FE866; --cell-mvel:#53CB97; --cell-mmpe:#2D92B9; --cell-bnd:#D9F862;
  /* Syn Rise S3: LFO 2, the band's cyan between Modulation and LFO 1: 9.16:1 on #000, dE OK >= .092 from every MOD cell
     (lfo .092, mod .099, mmpe .114, mvel .135, wh .201, cyc .208, joy .254, bnd .321). checks/sr3/tools/lfo2col.py */ --cell-lfo2:#3AB9D7;
  /* Syn Rise S5: the Matrix, the band's deep green (oklch L .610 C .200 h 141): 5.97:1 on #000, dE OK >= .170 from every MOD
     cell (mvel .170, mmpe .229, joy .230, lfo2 .243, mod .264, lfo .313, bnd .328, cyc .364, wh .377) and >= .220 from the
     code colours its Amount knobs take. checks/sr5/tools/mtxcol.py */ --cell-mtx:#389C27;
  /* Syn Rise S6b: the Macros, the band's pale lavender end (oklch L .76 C .13 h 291): 9.48:1 on #000, dE OK >= .097 from every
     MOD cell (lfo .097, wh .097, lfo2 .159, mmpe .192, mod .196, cyc .229, mvel .253, joy .347, mtx .353, bnd .369) and >= .151 from
     every code colour (BLUE .151, AMBER .280: its knobs). The search's
     best (#94AF31, .123) is the band's olive, turned down as S4 / S5 did. checks/sr6b/tools/maccol.py */ --cell-mac:#B2A4F5;
  /* life */ --cell-life:#C9F256; --cell-lf1:#3AC47B; --cell-lf2:#94B835; --cell-lf3:#6DFBA9;
  /* fx */ --cell-sv:#45A7EF; --cell-sw:#45C7C8; --cell-rig:#7987EF; --cell-str:#6FC4F5; --cell-fx:#95A2F3; --cell-spr:#37A2B1; --cell-crs:#BCC6F8;   /* (CRUSH: the family's pale periwinkle end) */ --cell-room:#57F3F4;   /* (11b ROOM: the family's cool, airy end) */
  /* MASTER OUT (11a): on FX's rack, but master's family */ --cell-mo:#AC57E0;
  /* ---- MAGICATION (MG-S5b) ---- FX's blue band, against every cell on the FX view and each other (dE OK; contrast on #000).
     mg #2989E2 5.75:1: rig .086, mgs .087, sv .087, spr .130, fx .141, str .180, sw .204, mo .211, crs .242, room .306;
     mgs #6983B9 5.52:1: mg .087, rig .093, spr .111, sv .117, fx .130, mo .179, str .185, sw .197, crs .225, room .309.
     checks/mg5/tools/mgcol.py --floor 5.5 */ --cell-mg:#2989E2; --cell-mgs:#6983B9;
  /* ---- end MAGICATION (MG-S5b) ---- */
  /* master */ --cell-mon:#9764F2; --cell-out:#F65FD2; --cell-sys:#EFAAF9;
  /* ui-batch1 (Benjamin 10-21): the preset types run the logo coin's spectrum in Library order, like V1's ROYGBIV: Bass the
     coin's warmest stop (red-orange), then orange, yellow, green, cyan-green, cyan, blue, and Arp a violet just short of pink.
     Every one >= 5.1:1 on #000 (none needed lifting; inkOn() in ui.js lifts any that would in OKLCH), adjacent pairs
     >= .106 dE OK apart. checks/ui-batch1/tools/catcols.py */
  --cat-0:#F09246; --cat-1:#F57837; --cat-2:#F8A43B; --cat-3:#F6CF42; --cat-4:#95E848; --cat-5:#53E8B8; --cat-6:#43D0EC; --cat-7:#5788EE; --cat-8:#AC57E0;   /* -, Bass Lead Brass Pad Keys Pluck FX Arp */

  /* ---------- type scale (fluid, rem + frame width so zoom works; 4c-6: --fw/--fh = the frame, set on <html> by Frame.fit) ---------- */
  --t-micro:0.6875rem;                               /* 11px  floor for caps labels. Nothing smaller */
  --t-label:clamp(0.6875rem,0.65rem + 0.0015 * var(--fw, 100vw),0.8125rem);  /* 11→13 caps labels, +.12em */
  --t-body:clamp(0.8125rem,0.76rem + 0.002 * var(--fw, 100vw),1rem);    /* 13→16 notes, help copy (sentence case) */
  --t-value:clamp(0.8125rem,0.75rem + 0.0025 * var(--fw, 100vw),1rem);  /* 13→16 knob values (Segment, or Panel 700 tnum) */
  --t-h3:clamp(0.875rem,0.8rem + 0.003 * var(--fw, 100vw),1.125rem);    /* 14→18 cell titles (Turbo 800) */
  --t-h2:clamp(1.125rem,0.95rem + 0.006 * var(--fw, 100vw),1.5rem);     /* 18→24 page/overlay titles */
  --t-readout:clamp(1.5rem,1.1rem + 0.016 * var(--fw, 100vw),2.5rem);   /* 24→40 patch name / BPM hero readout */
  --t-script:clamp(1.5rem,1.2rem + 0.012 * var(--fw, 100vw),2.25rem);   /* 24→36 the one script accent */
  --lh-tight:1;  --lh-ui:1.25;  --lh-body:1.5;
  --track-caps:.12em;  --track-head:.02em;  --track-seg:.04em;  --track-script:0;
  --w-body:400; --w-label:600; --w-strong:700; --w-head:800;

  /* ---------- spacing: 8px grid, 4px half-step for type/insets only ---------- */
  --s-0:0; --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px;
  --cell-pad:var(--s-2);          /* 16px inside every cell */
  --cell-gap:var(--s-2);          /* 16px between cells */
  --ctl-gap:var(--s-1);           /* 8px between controls in a row */
  --page-gutter:clamp(8px,0.016 * var(--fw, 100vw),32px);

  /* ---------- sizes: touch-first (ROG Flow Z13 is a touch screen too) ---------- */
  --hit:48px;              /* minimum hit area for EVERY control, all breakpoints */
  --hit-dense:48px;        /* 48px everywhere incl. landscape (plan decision) */
  --ctl-h:40px;            /* visual button height; pad the hit area to --hit with ::before */
  --knob:40px;  --knob-lg:56px;  --knob-hero:96px;
  --key-min-w:40px;  --key-h:clamp(96px,0.14 * var(--fh, 100vh),168px);
  --led:8px;               /* square LEDs */
  --tab-h:40px;

  /* ---------- borders & corners ---------- */
  --radius:0;              /* everywhere, no exceptions in UI chrome */
  --bw-hair:1px;           /* grid lines inside graphs */
  --bw:2px;                /* default outline: controls, cells, keys */
  --bw-bold:3px;           /* selected cell / active tab / rainbow horizon */
  --focus-ring:2px solid var(--focus);  --focus-offset:2px;

  /* ---------- motion ---------- */
  --dur-tap:60ms;          /* LED/press response (feels instant, like hardware) */
  --dur-fast:120ms;        /* hover, toggle, value flash */
  --dur-med:240ms;         /* page change, cell select */
  --dur-slow:480ms;        /* overlays, help */
  --dur-glint:600ms;       /* the BENVENTIONS Star glint */
  --dur-boot:2400ms;       /* boot sequence total, skippable */
  --ease-out:cubic-bezier(.2,.8,.2,1);     /* default: things arrive */
  --ease-in:cubic-bezier(.6,0,.8,.2);      /* things leave */
  --ease-snap:cubic-bezier(.3,1.4,.5,1);   /* tiny overshoot: buttons, glint bloom (max 1 per view) */
  --step:steps(2,jump-none);               /* blink: rec, clip, armed */
  --blink:1000ms;

  /* ---------- layers ---------- */
  --z-sky:0; --z-ui:10; --z-glint:30; --z-pop:40; --z-overlay:50; --z-tip:60;

  /* ---------- safe area ---------- */
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
}

/* ---------- per-breakpoint token values (reflow itself is UXOXO's call) ----------
   Test sizes: 430x932 phone portrait · 932x430 phone landscape · 1440x900 · 1920x1080
   · ROG Flow Z13 2560x1600 (16:10, touch, 150-200% OS scaling ≈ 1280-1707 CSS px). */
@container frame (max-width:599px){                        /* phone portrait (430x932) */
  #frame > *{ --cell-pad:var(--s-2); --cell-gap:var(--s-1); --ctl-gap:var(--s-1);
         --knob:40px; --tab-h:44px; --key-h:96px; --page-gutter:8px; }
}
@container frame (max-height:500px) and (orientation:landscape){   /* phone landscape (932x430) */
  #frame > *{ --cell-pad:var(--s-1); --cell-gap:var(--s-1); --ctl-gap:var(--s-1);
         --knob:32px; --ctl-h:32px; --tab-h:32px; --hit:var(--hit-dense); --key-h:104px;
         --t-readout:1.5rem; --t-h3:0.875rem; }
}
@container frame (min-width:600px) and (max-width:1279px) and (min-height:501px){   /* tablet / iPad / small laptop: 2-column band (UXOXO) */
  #frame > *{ --cell-pad:var(--s-2); --cell-gap:var(--s-2); --ctl-gap:var(--s-1);
         --knob:44px; --knob-lg:56px; --tab-h:48px; --key-h:128px; --page-gutter:16px; }
}
/* Tab labels: never ellipsis-truncate. Each module has a full name and a 3-letter code:
   PRESETS/PRE  PLAYER/PLY  ARP/ARP  MOD/MOD  VOICES/VOX  PEDALS/PED  MASTER/MST
   (Voices sub-tabs: MIXER/MIX  ANALOG/ANA  MODEL/MDL  SINGERS/SNG).
   Below 600px wide or in phone landscape: glyph + 3-letter code, Panel caps (--font-label), not Turbo.
   600px and up: glyph + full name; Turbo only on the active tab if it fits, else Panel caps.
   Full name is always in aria-label. */
:root{ --tab-label-font:var(--font-label); --tab-label-size:11px; --tab-label-track:0.08em; }
@container frame (min-width:600px) and (min-height:501px){ #frame > *{ --tab-label-size:13px; --tab-label-track:0.12em; } }
@container frame (min-width:1280px) and (min-height:720px){       /* desktop / Z13 / 1440x900 */
  #frame > *{ --cell-pad:var(--s-2); --cell-gap:var(--s-2); --knob:44px; --knob-lg:64px; --key-h:144px; }
}
@container frame (min-width:1800px) and (min-height:1000px){      /* 1920x1080 and up */
  #frame > *{ --cell-pad:var(--s-3); --cell-gap:var(--s-3); --knob:48px; --knob-lg:72px; --key-h:168px; --tab-h:48px; }
}
@media (pointer:coarse){ :root{ --hit:48px; } }          /* never drop below 48 on touch except dense landscape */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-med:0ms; --dur-slow:0ms; --dur-glint:0ms; --dur-boot:0ms; --ease-snap:linear; }
}
@media (forced-colors:active){ :root{ --rainbow:CanvasText; } }

/* base hooks */
*{box-sizing:border-box;border-radius:var(--radius)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
[data-module="presets"]{--mc:var(--m-presets)} [data-module="player"]{--mc:var(--m-player)}
[data-module="arp"]{--mc:var(--m-arp)}         [data-module="mod"]{--mc:var(--m-mod)}
[data-module="voices"]{--mc:var(--m-voices)}   [data-module="pedals"]{--mc:var(--m-pedals)}
[data-module="master"]{--mc:var(--m-master)}