/* Generated by scripts/build-home-system.py from squatch-skin e2ba4a7 (dist/css, skins/brush, skins/machined).
   Do not edit: re-run the script. Each theme and mode is a block of custom properties on .sys, chosen by the
   demo's radio buttons through :has(), so it works with no script at all. --sysr-* are the panel's readouts. */
/* Squatch Ink, light */
.sys {
  --sq-sys-color-surface-canvas: #EEE9DF;
  --sq-sys-color-surface-page: #F7F5F0;
  --sq-sys-color-surface-raised: #FCFBF8;
  --sq-sys-color-surface-sunken: #E8E0D4;
  --sq-sys-color-text-primary: #1C160E;
  --sq-sys-color-text-secondary: #6B5B3E;
  --sq-sys-color-text-on-accent: #FFFFFF;
  --sq-sys-color-line-rule: #D4CBBB;
  --sq-sys-color-line-faint: #CBBFA9;
  --sq-sys-color-accent: #9C7208;
  --sq-sys-color-status-level: #1C160E;
  --sq-sys-color-status-limit: #9A2E1B;
  --sq-sys-color-focus: #9C7208;
  --sq-sys-font-ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-hand: "Lora", ui-serif, "Georgia", serif;
  --sq-sys-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-legend-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-legend-font-size: 10px;
  --sq-sys-type-legend-font-weight: 600;
  --sq-sys-type-legend-letter-spacing: 1.2px;
  --sq-sys-type-legend-line-height: 1;
  --sq-sys-type-legend-text-transform: uppercase;
  --sq-sys-type-name-font-family: "Lora", ui-serif, "Georgia", serif;
  --sq-sys-type-name-font-size: 20px;
  --sq-sys-type-name-font-weight: 500;
  --sq-sys-type-name-letter-spacing: 0px;
  --sq-sys-type-name-line-height: 1.15;
  --sq-sys-type-name-font-style: italic;
  --sq-sys-type-readout-font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-readout-font-size: 12px;
  --sq-sys-type-readout-font-weight: 500;
  --sq-sys-type-readout-letter-spacing: 0px;
  --sq-sys-type-readout-line-height: 1.2;
  --sq-sys-type-readout-font-variant-numeric: tabular-nums;
  --sq-sys-type-body-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-body-font-size: 14px;
  --sq-sys-type-body-font-weight: 400;
  --sq-sys-type-body-letter-spacing: 0px;
  --sq-sys-type-body-line-height: 1.5;
  --sq-sys-space-1: 4px;
  --sq-sys-space-2: 8px;
  --sq-sys-space-3: 12px;
  --sq-sys-space-4: 16px;
  --sq-sys-space-5: 24px;
  --sq-sys-space-6: 32px;
  --sq-sys-space-7: 48px;
  --sq-sys-radius-sm: 6px;
  --sq-sys-radius-md: 10px;
  --sq-sys-radius-control: 6px;
  --sq-sys-size-target: 44px;
  --sq-sys-size-control: 30px;
  --sq-sys-stroke-contour: 2.25px;
  --sq-sys-stroke-detail: 1.25px;
  --sq-sys-stroke-hatch: 0.75px;
  --sq-sys-stroke-focus: 2px;
  --sq-sys-motion-duration-fast: 140ms;
  --sq-sys-motion-duration-med: 240ms;
  --sq-sys-motion-duration-settle: 750ms;
  --sq-sys-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sq-sys-motion-ballistics-level-attack: 15ms;
  --sq-sys-motion-ballistics-level-release: 280ms;
  --sq-sys-motion-ballistics-env-attack: 5ms;
  --sq-sys-motion-ballistics-env-release: 120ms;
  --sq-sys-motion-ballistics-gr-attack: 10ms;
  --sq-sys-motion-ballistics-gr-release: 150ms;
  --sq-sys-motion-ballistics-clip-hold: 450ms;
  --sq-sys-motion-ballistics-readout: 100ms;
  --sq-sys-motion-ballistics-reduced-step: 250ms;
  --sq-sys-elevation-raised: 0px 1px 0px 0px #D4CBBB;
  --sq-sys-ink-brush-entry: 0.12;
  --sq-sys-ink-brush-exit: 0.35;
  --sq-sys-ink-brush-belly: 0.15;
  --sq-sys-ink-brush-dry: 0.5;
  --sq-sys-ink-brush-streaks: 7;
  --sq-sys-ink-brush-jitter: 0.07;
  --sq-sys-ink-brush-bleed: 0.15;
  --sq-sys-ink-grain-opacity: 0.12;
  --sq-sys-ink-grain-blend: multiply;
  --sq-sys-ink-grain-frequency: 0.045;
  --sq-sys-ink-edge-roughness: 6;
  --sq-sys-ink-seal-roughness: 4;
  --sq-sys-ink-seal-shape: chop;
  --sq-comp-pedal-face: #F7F5F0;
  --sq-comp-pedal-edge: #1C160E;
  --sq-comp-pedal-lid: #CBBFA9;
  --sq-comp-pedal-corner-radius: 10px;
  --sq-comp-knob-cap: #FCFBF8;
  --sq-comp-knob-outline: #1C160E;
  --sq-comp-knob-pointer: #1C160E;
  --sq-comp-knob-track: #CBBFA9;
  --sq-comp-knob-value: #9C7208;
  --sq-comp-knob-ring-width: 3px;
  --sq-comp-knob-travel: 270;
  --sq-comp-footswitch-body: #E8E0D4;
  --sq-comp-footswitch-outline: #1C160E;
  --sq-comp-led-on: #9C7208;
  --sq-comp-led-off: #CBBFA9;
  --sq-comp-led-clip: #9A2E1B;
  --sq-comp-legend-color: #6B5B3E;
  --sq-comp-legend-type-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-comp-legend-type-font-size: 10px;
  --sq-comp-legend-type-font-weight: 600;
  --sq-comp-legend-type-letter-spacing: 1.2px;
  --sq-comp-legend-type-line-height: 1;
  --sq-comp-legend-type-text-transform: uppercase;
  --sq-comp-glyph-ink: #1C160E;
  --sq-comp-glyph-value: #9C7208;
  --sq-comp-meter-level: #1C160E;
  --sq-comp-meter-limit: #9A2E1B;
  --sysr-state: "Squatch Ink, light";
  --sysr-hex-page: "#F7F5F0";
  --sysr-hex-raised: "#FCFBF8";
  --sysr-hex-text: "#1C160E";
  --sysr-hex-label: "#6B5B3E";
  --sysr-hex-accent: "#9C7208";
  --sysr-hex-limit: "#9A2E1B";
  --sysr-cr-text: "16.5:1";
  --sysr-cr-label: "6.0:1";
  --sysr-cr-accent: "4.0:1, marks only";
  --sysr-cr-limit: "6.9:1";
  --sysr-cr-on-accent: "4.4:1";
  --sysr-cr-text-raised: "17.3:1";
  --sysr-cr-label-raised: "6.4:1";
  --sysr-type-name: "Lora italic 500 · 20px";
  --sysr-type-body: "Inter 400 · 14px";
  --sysr-type-readout: "IBM Plex Mono 500 · 12px";
  --sysr-radius: "6px · 10px · 6px";
  --sysr-motion: "140ms · 240ms · 750ms";
  --sysr-brush: "brush on: dry 0.5, 7 streaks";
  --sysr-worst: "6.0:1";
  color-scheme: light;
}
/* Squatch Ink, dark */
.sys:has(#sys-theme-ink:checked):has(#sys-mode-dark:checked) {
  --sq-sys-color-surface-canvas: #100D09;
  --sq-sys-color-surface-page: #17130D;
  --sq-sys-color-surface-raised: #201A12;
  --sq-sys-color-surface-sunken: #231D15;
  --sq-sys-color-text-primary: #EDE6D8;
  --sq-sys-color-text-secondary: #A89878;
  --sq-sys-color-text-on-accent: #17130D;
  --sq-sys-color-line-rule: #3A3226;
  --sq-sys-color-line-faint: #4A4034;
  --sq-sys-color-accent: #D4A93F;
  --sq-sys-color-status-level: #EDE6D8;
  --sq-sys-color-status-limit: #D9553D;
  --sq-sys-color-focus: #D4A93F;
  --sq-sys-font-ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-hand: "Lora", ui-serif, "Georgia", serif;
  --sq-sys-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-legend-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-legend-font-size: 10px;
  --sq-sys-type-legend-font-weight: 600;
  --sq-sys-type-legend-letter-spacing: 1.2px;
  --sq-sys-type-legend-line-height: 1;
  --sq-sys-type-legend-text-transform: uppercase;
  --sq-sys-type-name-font-family: "Lora", ui-serif, "Georgia", serif;
  --sq-sys-type-name-font-size: 20px;
  --sq-sys-type-name-font-weight: 500;
  --sq-sys-type-name-letter-spacing: 0px;
  --sq-sys-type-name-line-height: 1.15;
  --sq-sys-type-name-font-style: italic;
  --sq-sys-type-readout-font-family: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-readout-font-size: 12px;
  --sq-sys-type-readout-font-weight: 500;
  --sq-sys-type-readout-letter-spacing: 0px;
  --sq-sys-type-readout-line-height: 1.2;
  --sq-sys-type-readout-font-variant-numeric: tabular-nums;
  --sq-sys-type-body-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-body-font-size: 14px;
  --sq-sys-type-body-font-weight: 400;
  --sq-sys-type-body-letter-spacing: 0px;
  --sq-sys-type-body-line-height: 1.5;
  --sq-sys-space-1: 4px;
  --sq-sys-space-2: 8px;
  --sq-sys-space-3: 12px;
  --sq-sys-space-4: 16px;
  --sq-sys-space-5: 24px;
  --sq-sys-space-6: 32px;
  --sq-sys-space-7: 48px;
  --sq-sys-radius-sm: 6px;
  --sq-sys-radius-md: 10px;
  --sq-sys-radius-control: 6px;
  --sq-sys-size-target: 44px;
  --sq-sys-size-control: 30px;
  --sq-sys-stroke-contour: 2.25px;
  --sq-sys-stroke-detail: 1.25px;
  --sq-sys-stroke-hatch: 0.75px;
  --sq-sys-stroke-focus: 2px;
  --sq-sys-motion-duration-fast: 140ms;
  --sq-sys-motion-duration-med: 240ms;
  --sq-sys-motion-duration-settle: 750ms;
  --sq-sys-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sq-sys-motion-ballistics-level-attack: 15ms;
  --sq-sys-motion-ballistics-level-release: 280ms;
  --sq-sys-motion-ballistics-env-attack: 5ms;
  --sq-sys-motion-ballistics-env-release: 120ms;
  --sq-sys-motion-ballistics-gr-attack: 10ms;
  --sq-sys-motion-ballistics-gr-release: 150ms;
  --sq-sys-motion-ballistics-clip-hold: 450ms;
  --sq-sys-motion-ballistics-readout: 100ms;
  --sq-sys-motion-ballistics-reduced-step: 250ms;
  --sq-sys-elevation-raised: 0px 1px 0px 0px #D4CBBB;
  --sq-sys-ink-brush-entry: 0.12;
  --sq-sys-ink-brush-exit: 0.35;
  --sq-sys-ink-brush-belly: 0.15;
  --sq-sys-ink-brush-dry: 0.5;
  --sq-sys-ink-brush-streaks: 7;
  --sq-sys-ink-brush-jitter: 0.07;
  --sq-sys-ink-brush-bleed: 0.15;
  --sq-sys-ink-grain-opacity: 0.07;
  --sq-sys-ink-grain-blend: screen;
  --sq-sys-ink-grain-frequency: 0.045;
  --sq-sys-ink-edge-roughness: 6;
  --sq-sys-ink-seal-roughness: 4;
  --sq-sys-ink-seal-shape: chop;
  --sq-comp-pedal-face: #17130D;
  --sq-comp-pedal-edge: #EDE6D8;
  --sq-comp-pedal-lid: #4A4034;
  --sq-comp-pedal-corner-radius: 10px;
  --sq-comp-knob-cap: #201A12;
  --sq-comp-knob-outline: #EDE6D8;
  --sq-comp-knob-pointer: #EDE6D8;
  --sq-comp-knob-track: #4A4034;
  --sq-comp-knob-value: #D4A93F;
  --sq-comp-knob-ring-width: 3px;
  --sq-comp-knob-travel: 270;
  --sq-comp-footswitch-body: #231D15;
  --sq-comp-footswitch-outline: #EDE6D8;
  --sq-comp-led-on: #D4A93F;
  --sq-comp-led-off: #4A4034;
  --sq-comp-led-clip: #D9553D;
  --sq-comp-legend-color: #A89878;
  --sq-comp-legend-type-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-comp-legend-type-font-size: 10px;
  --sq-comp-legend-type-font-weight: 600;
  --sq-comp-legend-type-letter-spacing: 1.2px;
  --sq-comp-legend-type-line-height: 1;
  --sq-comp-legend-type-text-transform: uppercase;
  --sq-comp-glyph-ink: #EDE6D8;
  --sq-comp-glyph-value: #D4A93F;
  --sq-comp-meter-level: #EDE6D8;
  --sq-comp-meter-limit: #D9553D;
  --sysr-state: "Squatch Ink, dark";
  --sysr-hex-page: "#17130D";
  --sysr-hex-raised: "#201A12";
  --sysr-hex-text: "#EDE6D8";
  --sysr-hex-label: "#A89878";
  --sysr-hex-accent: "#D4A93F";
  --sysr-hex-limit: "#D9553D";
  --sysr-cr-text: "14.9:1";
  --sysr-cr-label: "6.5:1";
  --sysr-cr-accent: "8.4:1";
  --sysr-cr-limit: "4.7:1";
  --sysr-cr-on-accent: "8.4:1";
  --sysr-cr-text-raised: "13.9:1";
  --sysr-cr-label-raised: "6.1:1";
  --sysr-type-name: "Lora italic 500 · 20px";
  --sysr-type-body: "Inter 400 · 14px";
  --sysr-type-readout: "IBM Plex Mono 500 · 12px";
  --sysr-radius: "6px · 10px · 6px";
  --sysr-motion: "140ms · 240ms · 750ms";
  --sysr-brush: "brush on: dry 0.5, 7 streaks";
  --sysr-worst: "4.7:1";
  color-scheme: dark;
}
/* Studio, light */
.sys:has(#sys-theme-studio:checked) {
  --sq-sys-color-surface-canvas: #EEF0F2;
  --sq-sys-color-surface-page: #F6F7F8;
  --sq-sys-color-surface-raised: #FFFFFF;
  --sq-sys-color-surface-sunken: #E6E9ED;
  --sq-sys-color-text-primary: #121417;
  --sq-sys-color-text-secondary: #5A616B;
  --sq-sys-color-text-on-accent: #FFFFFF;
  --sq-sys-color-line-rule: #E2E5E9;
  --sq-sys-color-line-faint: #C9CED4;
  --sq-sys-color-accent: #2F5FD0;
  --sq-sys-color-status-level: #121417;
  --sq-sys-color-status-limit: #B33F00;
  --sq-sys-color-focus: #2F5FD0;
  --sq-sys-font-ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-hand: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-legend-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-legend-font-size: 10px;
  --sq-sys-type-legend-font-weight: 600;
  --sq-sys-type-legend-letter-spacing: 1.2px;
  --sq-sys-type-legend-line-height: 1;
  --sq-sys-type-legend-text-transform: uppercase;
  --sq-sys-type-name-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-name-font-size: 20px;
  --sq-sys-type-name-font-weight: 500;
  --sq-sys-type-name-letter-spacing: 0px;
  --sq-sys-type-name-line-height: 1.15;
  --sq-sys-type-name-font-style: normal;
  --sq-sys-type-readout-font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-readout-font-size: 12px;
  --sq-sys-type-readout-font-weight: 500;
  --sq-sys-type-readout-letter-spacing: 0px;
  --sq-sys-type-readout-line-height: 1.2;
  --sq-sys-type-readout-font-variant-numeric: tabular-nums;
  --sq-sys-type-body-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-body-font-size: 14px;
  --sq-sys-type-body-font-weight: 400;
  --sq-sys-type-body-letter-spacing: 0px;
  --sq-sys-type-body-line-height: 1.5;
  --sq-sys-space-1: 4px;
  --sq-sys-space-2: 8px;
  --sq-sys-space-3: 12px;
  --sq-sys-space-4: 16px;
  --sq-sys-space-5: 24px;
  --sq-sys-space-6: 32px;
  --sq-sys-space-7: 48px;
  --sq-sys-radius-sm: 8px;
  --sq-sys-radius-md: 14px;
  --sq-sys-radius-control: 10px;
  --sq-sys-size-target: 44px;
  --sq-sys-size-control: 30px;
  --sq-sys-stroke-contour: 1.5px;
  --sq-sys-stroke-detail: 1px;
  --sq-sys-stroke-hatch: 0.75px;
  --sq-sys-stroke-focus: 2px;
  --sq-sys-motion-duration-fast: 140ms;
  --sq-sys-motion-duration-med: 240ms;
  --sq-sys-motion-duration-settle: 240ms;
  --sq-sys-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sq-sys-motion-ballistics-level-attack: 15ms;
  --sq-sys-motion-ballistics-level-release: 280ms;
  --sq-sys-motion-ballistics-env-attack: 5ms;
  --sq-sys-motion-ballistics-env-release: 120ms;
  --sq-sys-motion-ballistics-gr-attack: 10ms;
  --sq-sys-motion-ballistics-gr-release: 150ms;
  --sq-sys-motion-ballistics-clip-hold: 450ms;
  --sq-sys-motion-ballistics-readout: 100ms;
  --sq-sys-motion-ballistics-reduced-step: 250ms;
  --sq-sys-elevation-raised: 0px 6px 18px -6px #00000024;
  --sq-sys-ink-brush-entry: 0;
  --sq-sys-ink-brush-exit: 0;
  --sq-sys-ink-brush-belly: 0;
  --sq-sys-ink-brush-dry: 0;
  --sq-sys-ink-brush-streaks: 0;
  --sq-sys-ink-brush-jitter: 0;
  --sq-sys-ink-brush-bleed: 0;
  --sq-sys-ink-grain-opacity: 0;
  --sq-sys-ink-grain-blend: multiply;
  --sq-sys-ink-grain-frequency: 0.045;
  --sq-sys-ink-edge-roughness: 0;
  --sq-sys-ink-seal-roughness: 0;
  --sq-sys-ink-seal-shape: dot;
  --sq-comp-pedal-face: #FFFFFF;
  --sq-comp-pedal-edge: #C9CED4;
  --sq-comp-pedal-lid: #E2E5E9;
  --sq-comp-pedal-corner-radius: 14px;
  --sq-comp-knob-cap: #FFFFFF;
  --sq-comp-knob-outline: #121417;
  --sq-comp-knob-pointer: #121417;
  --sq-comp-knob-track: #C9CED4;
  --sq-comp-knob-value: #2F5FD0;
  --sq-comp-knob-ring-width: 3px;
  --sq-comp-knob-travel: 270;
  --sq-comp-footswitch-body: #E6E9ED;
  --sq-comp-footswitch-outline: #121417;
  --sq-comp-led-on: #2F5FD0;
  --sq-comp-led-off: #C9CED4;
  --sq-comp-led-clip: #B33F00;
  --sq-comp-legend-color: #5A616B;
  --sq-comp-legend-type-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-comp-legend-type-font-size: 10px;
  --sq-comp-legend-type-font-weight: 600;
  --sq-comp-legend-type-letter-spacing: 1.2px;
  --sq-comp-legend-type-line-height: 1;
  --sq-comp-legend-type-text-transform: uppercase;
  --sq-comp-glyph-ink: #121417;
  --sq-comp-glyph-value: #2F5FD0;
  --sq-comp-meter-level: #121417;
  --sq-comp-meter-limit: #B33F00;
  --sysr-state: "Studio, light";
  --sysr-hex-page: "#F6F7F8";
  --sysr-hex-raised: "#FFFFFF";
  --sysr-hex-text: "#121417";
  --sysr-hex-label: "#5A616B";
  --sysr-hex-accent: "#2F5FD0";
  --sysr-hex-limit: "#B33F00";
  --sysr-cr-text: "17.2:1";
  --sysr-cr-label: "5.8:1";
  --sysr-cr-accent: "5.3:1";
  --sysr-cr-limit: "5.4:1";
  --sysr-cr-on-accent: "5.7:1";
  --sysr-cr-text-raised: "18.5:1";
  --sysr-cr-label-raised: "6.3:1";
  --sysr-type-name: "Inter normal 500 · 20px";
  --sysr-type-body: "Inter 400 · 14px";
  --sysr-type-readout: "ui-monospace 500 · 12px";
  --sysr-radius: "8px · 14px · 10px";
  --sysr-motion: "140ms · 240ms · 240ms";
  --sysr-brush: "brush off: clean line";
  --sysr-worst: "5.4:1";
  color-scheme: light;
}
/* Studio, dark */
.sys:has(#sys-theme-studio:checked):has(#sys-mode-dark:checked) {
  --sq-sys-color-surface-canvas: #0C0D0F;
  --sq-sys-color-surface-page: #121417;
  --sq-sys-color-surface-raised: #181B1F;
  --sq-sys-color-surface-sunken: #1D2126;
  --sq-sys-color-text-primary: #EEF0F2;
  --sq-sys-color-text-secondary: #9AA3AD;
  --sq-sys-color-text-on-accent: #0C0D0F;
  --sq-sys-color-line-rule: #2A2F36;
  --sq-sys-color-line-faint: #3A414A;
  --sq-sys-color-accent: #8FB3FF;
  --sq-sys-color-status-level: #EEF0F2;
  --sq-sys-color-status-limit: #FF8A5C;
  --sq-sys-color-focus: #8FB3FF;
  --sq-sys-font-ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-hand: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-legend-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-legend-font-size: 10px;
  --sq-sys-type-legend-font-weight: 600;
  --sq-sys-type-legend-letter-spacing: 1.2px;
  --sq-sys-type-legend-line-height: 1;
  --sq-sys-type-legend-text-transform: uppercase;
  --sq-sys-type-name-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-name-font-size: 20px;
  --sq-sys-type-name-font-weight: 500;
  --sq-sys-type-name-letter-spacing: 0px;
  --sq-sys-type-name-line-height: 1.15;
  --sq-sys-type-name-font-style: normal;
  --sq-sys-type-readout-font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --sq-sys-type-readout-font-size: 12px;
  --sq-sys-type-readout-font-weight: 500;
  --sq-sys-type-readout-letter-spacing: 0px;
  --sq-sys-type-readout-line-height: 1.2;
  --sq-sys-type-readout-font-variant-numeric: tabular-nums;
  --sq-sys-type-body-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-sys-type-body-font-size: 14px;
  --sq-sys-type-body-font-weight: 400;
  --sq-sys-type-body-letter-spacing: 0px;
  --sq-sys-type-body-line-height: 1.5;
  --sq-sys-space-1: 4px;
  --sq-sys-space-2: 8px;
  --sq-sys-space-3: 12px;
  --sq-sys-space-4: 16px;
  --sq-sys-space-5: 24px;
  --sq-sys-space-6: 32px;
  --sq-sys-space-7: 48px;
  --sq-sys-radius-sm: 8px;
  --sq-sys-radius-md: 14px;
  --sq-sys-radius-control: 10px;
  --sq-sys-size-target: 44px;
  --sq-sys-size-control: 30px;
  --sq-sys-stroke-contour: 1.5px;
  --sq-sys-stroke-detail: 1px;
  --sq-sys-stroke-hatch: 0.75px;
  --sq-sys-stroke-focus: 2px;
  --sq-sys-motion-duration-fast: 140ms;
  --sq-sys-motion-duration-med: 240ms;
  --sq-sys-motion-duration-settle: 240ms;
  --sq-sys-motion-easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sq-sys-motion-ballistics-level-attack: 15ms;
  --sq-sys-motion-ballistics-level-release: 280ms;
  --sq-sys-motion-ballistics-env-attack: 5ms;
  --sq-sys-motion-ballistics-env-release: 120ms;
  --sq-sys-motion-ballistics-gr-attack: 10ms;
  --sq-sys-motion-ballistics-gr-release: 150ms;
  --sq-sys-motion-ballistics-clip-hold: 450ms;
  --sq-sys-motion-ballistics-readout: 100ms;
  --sq-sys-motion-ballistics-reduced-step: 250ms;
  --sq-sys-elevation-raised: 0px 6px 18px -6px #00000024;
  --sq-sys-ink-brush-entry: 0;
  --sq-sys-ink-brush-exit: 0;
  --sq-sys-ink-brush-belly: 0;
  --sq-sys-ink-brush-dry: 0;
  --sq-sys-ink-brush-streaks: 0;
  --sq-sys-ink-brush-jitter: 0;
  --sq-sys-ink-brush-bleed: 0;
  --sq-sys-ink-grain-opacity: 0;
  --sq-sys-ink-grain-blend: screen;
  --sq-sys-ink-grain-frequency: 0.045;
  --sq-sys-ink-edge-roughness: 0;
  --sq-sys-ink-seal-roughness: 0;
  --sq-sys-ink-seal-shape: dot;
  --sq-comp-pedal-face: #181B1F;
  --sq-comp-pedal-edge: #3A414A;
  --sq-comp-pedal-lid: #2A2F36;
  --sq-comp-pedal-corner-radius: 14px;
  --sq-comp-knob-cap: #181B1F;
  --sq-comp-knob-outline: #EEF0F2;
  --sq-comp-knob-pointer: #EEF0F2;
  --sq-comp-knob-track: #3A414A;
  --sq-comp-knob-value: #8FB3FF;
  --sq-comp-knob-ring-width: 3px;
  --sq-comp-knob-travel: 270;
  --sq-comp-footswitch-body: #1D2126;
  --sq-comp-footswitch-outline: #EEF0F2;
  --sq-comp-led-on: #8FB3FF;
  --sq-comp-led-off: #3A414A;
  --sq-comp-led-clip: #FF8A5C;
  --sq-comp-legend-color: #9AA3AD;
  --sq-comp-legend-type-font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sq-comp-legend-type-font-size: 10px;
  --sq-comp-legend-type-font-weight: 600;
  --sq-comp-legend-type-letter-spacing: 1.2px;
  --sq-comp-legend-type-line-height: 1;
  --sq-comp-legend-type-text-transform: uppercase;
  --sq-comp-glyph-ink: #EEF0F2;
  --sq-comp-glyph-value: #8FB3FF;
  --sq-comp-meter-level: #EEF0F2;
  --sq-comp-meter-limit: #FF8A5C;
  --sysr-state: "Studio, dark";
  --sysr-hex-page: "#121417";
  --sysr-hex-raised: "#181B1F";
  --sysr-hex-text: "#EEF0F2";
  --sysr-hex-label: "#9AA3AD";
  --sysr-hex-accent: "#8FB3FF";
  --sysr-hex-limit: "#FF8A5C";
  --sysr-cr-text: "16.2:1";
  --sysr-cr-label: "7.2:1";
  --sysr-cr-accent: "8.8:1";
  --sysr-cr-limit: "7.9:1";
  --sysr-cr-on-accent: "9.3:1";
  --sysr-cr-text-raised: "15.1:1";
  --sysr-cr-label-raised: "6.8:1";
  --sysr-type-name: "Inter normal 500 · 20px";
  --sysr-type-body: "Inter 400 · 14px";
  --sysr-type-readout: "ui-monospace 500 · 12px";
  --sysr-radius: "8px · 14px · 10px";
  --sysr-motion: "140ms · 240ms · 240ms";
  --sysr-brush: "brush off: clean line";
  --sysr-worst: "6.8:1";
  color-scheme: dark;
}
/* The skins: art and a few token overrides (each skin.json), applied on the stage so they win over the theme. */
.sys__stage { --sq-comp-knob-ring-width: 4.5px; --sq-comp-legend-type-font-family: var(--sq-sys-font-hand); --sq-comp-legend-type-font-size: 13px; --sq-comp-legend-type-text-transform: none; --sysr-skin: "Brush"; }
.sys:has(#sys-skin-machined:checked) .sys__stage { --sq-comp-knob-ring-width: 2.5px; --sq-comp-pedal-lid: var(--sq-sys-color-line-rule); --sq-comp-legend-type-font-family: var(--sq-sys-font-ui); --sq-comp-legend-type-font-size: 10px; --sq-comp-legend-type-text-transform: uppercase; --sysr-skin: "Machined"; }
.sk-machined, .th-studio { display: none; }
.sys:has(#sys-skin-machined:checked) .sk-brush { display: none; }
.sys:has(#sys-skin-machined:checked) .sk-machined { display: inline; }
.sys:has(#sys-theme-studio:checked) .th-ink { display: none; }
.sys:has(#sys-theme-studio:checked) .th-studio { display: inline; }