/* Токены дизайн-системы Synthari — сгенерировано scripts/tokens-css.mjs из docs/design/tokens.json (2026-10-29).
   Руками не править: менять систему, копировать tokens.json и запускать скрипт. Цвета — только через ролевые токены. */
/* Холодно-нейтральная шкала: компоненты берут ролевые токены, не её */
:root{--grey-50:#16171a;--grey-100:#1d1f22;--grey-150:#25272b;--grey-200:#2a2d31;--grey-300:#33363b;--grey-350:#3b3e44;--grey-400:#44474e;
--grey-450:#4d5057;--grey-500:#5d6168;--grey-600:#80848c;--grey-700:#9da1a8;--grey-800:#adb1b8;--grey-900:#e6e8eb}
/* Шрифт: семейство и размеры, шаг, сетка, радиусы, высоты, свет, прозрачность */
:root{--sans:Inter, 'Helvetica Neue', system-ui, sans-serif;--fs-micro:11px;--fs-body:13px;--fs-title:16px;--fs-display:22px;--space-4:4px;
--space-8:8px;--space-16:16px;--space-24:24px;--space-32:32px;--space-48:48px;--grid-step:8px;--grid-module:240px;--grid-gutter:16px;
--grid-block-inner:208px;--grid-knob-col:64px;--radius-4:4px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-20:20px;
--radius-pill:999px;--size-segment:28px;--size-control:32px;--size-menu-item:34px;--size-row:36px;--size-touch:44px;--size-header:32px;
--size-thumb:16px;--size-block-head:28px;--size-key:24px;--size-key-row:32px;--size-key-power:20px;--size-led:6px;--size-knob:38px;
--size-screen:80px;--size-screen-out:96px;--size-screen-strip:32px;--size-screen-value:48px;--size-hslider:40px;--size-knob-sm:48px;
--size-keyboard:224px;--size-piano:136px;--size-loop-screen:112px;--size-cassette:104px;--size-fx:72px;--size-fx-open:256px;
--light-convex:225deg;--light-concave:45deg;--opacity-off:0.4}
/* На мобильной раскладке шрифт на ступень крупнее (*-m) */
@media(max-width:899px),(orientation:landscape) and (max-height:500px){:root{--fs-micro:12px;--fs-body:14px;--fs-title:17px;
--fs-display:24px}}
/* Цвета и тени без светлого значения — общие (светлая тема — этап 5) */
.th-dark,.th-light{--stand:#2f3237;--slot:var(--grey-150);--slot-deep:#202226;--well:#2e3135;--accent-hi:#e8826c;--accent-deep:#a3412f;
--accent-hover:#d6644e;--accent-hover-hi:#f29a86;--knob:var(--grey-100);--knob-rim:var(--grey-600);--knob-rim-hi:var(--grey-700);
--knob-rim-lo:var(--grey-500);--knob-rim-hover:#bfc3c9;--knob-mark:#f2f2f0;--tick:var(--grey-600);--cap:#e2e3e4;--cap-hi:#f6f6f6;
--cap-lo:#c7c8c9;--cap-groove:#55575a;--cap-off:#73777e;--cap-off-hi:#8d9198;--cap-off-lo:#5d6168;--keycap:#3f4248;--keycap-hi:#464950;
--keycap-lo:#393c41;--keycap-hover-hi:#4d5057;--keycap-rim-hi:var(--grey-500);--keycap-rim:var(--grey-400);--keycap-rim-lo:var(--grey-300);
--keycap-rim-hover:#686b72;--led-off:#2c2f33;--led-on:#ffe7a6;--hole-lit:var(--grey-200);--glow-core:#f1e4cc;--glow:#f6e9d0;
--glow-halo:#ffe9bf;--play:#b4f0a8;--rec:#ff8a74;--guide-unlit:var(--grey-400);--screen:#bfc1bd;--screen-ink:#1a1b1d;--screen-ink-2:#4a4c4e;
--screen-mark:var(--accent-deep);--wire:#b4b8be;--wire-ctl:var(--grey-600);--field-bg:var(--slot-deep);--field-dot:var(--keycap-lo);
--jack-hole:var(--grey-50);--grille:#16181b;--grille-lit:rgba(255,255,255,0.07);--screw-hi:#4a4e55;--screw-lo:#2c3035;--screw-slot:#23262a;
--key-white-lo:#cfc9bd;--key-black-lo:#3b3e44;--key-name:#5f5b53;--cassette:#c9cbc8;--cassette-hi:#d2d4d1;--cassette-lo:#bdbfbc;
--cassette-off:#9a9c99;--reel:#d3d5d2;--fx-saturation:#e0763a;--fx-phaser:#9b8ac4;--fx-chorus:#6fa3c0;--fx-delay:#8fb59a;
--fx-reverb:#d6b46a;--shadow-raised:-1.5px 2px 4px rgba(0,0,0,0.45), -0.5px 0.5px 1px rgba(0,0,0,0.5);
--shadow-raised-sm:-1px 1.5px 1.5px rgba(0,0,0,0.4);--shadow-raised-pressed:-0.5px 0.75px 1.2px rgba(0,0,0,0.5);
--shadow-plate:inset -1px 1px 0 rgba(255,255,255,0.09), inset 1px -1px 0 rgba(0,0,0,0.45);
--shadow-stand:-2px 3px 0 #1d1f22, -6px 14px 28px rgba(0,0,0,0.5), -1px 2px 4px rgba(0,0,0,0.35);
--shadow-well:inset -1px 1px 2px rgba(0,0,0,0.22), -0.5px 0.5px 0 rgba(255,255,255,0.07);
--shadow-key:-1px 1.5px 2.5px rgba(0,0,0,0.22), -0.5px 0.5px 0.5px rgba(0,0,0,0.18);--shadow-key-pressed:-0.5px 0.75px 1px rgba(0,0,0,0.22);
--shadow-led:0 0 3px 1px rgba(255,220,140,0.8), 0 0 9px 3px rgba(255,205,110,0.3);
--shadow-led-off:inset -0.5px 0.5px 1px rgba(0,0,0,0.45), -0.5px 0.5px 0 rgba(255,255,255,0.08);
--shadow-screw:-0.5px 0.75px 1px rgba(0,0,0,0.35);--shadow-inset:inset -1px 2px 3px rgba(0,0,0,0.35), -1px 1px 0 rgba(255,255,255,0.10);
--shadow-screen-flush:inset -1px 2px 4px rgba(0,0,0,0.35), inset 1px -1px 0 rgba(255,255,255,0.25), -1px 1px 0 rgba(255,255,255,0.10);
--shadow-glow:0 0 3px 1px rgba(246,233,208,0.5), 0 0 8px 2px rgba(255,233,191,0.1);--shadow-play:drop-shadow(0 0 2px rgba(150,230,140,0.8));
--shadow-rec:drop-shadow(0 0 2px rgba(255,110,90,0.8));--shadow-led-sm:0 0 2px 0.5px rgba(255,220,140,0.7)}
/* Тёмная тема — основная */
.th-dark{color-scheme:dark;--bg:var(--grey-150);--surface:#33373d;--popover:var(--grey-350);--inset:var(--grey-200);
--divider:var(--grey-350);--line:var(--grey-450);--line-strong:var(--grey-500);--selected:var(--grey-450);--hover:var(--grey-400);
--accent-soft:#3a2620;--text:var(--grey-900);--text-2:var(--grey-800);--text-3:var(--grey-700);--accent:#ca5843;--accent-text:#eda08b;
--accent-tint:rgba(202,88,67,0.12);--shadow:rgba(0,0,0,0.5);--backdrop:rgba(0,0,0,0.45);--logo-bg:var(--grey-900);--logo-fg:#141513;
--on-accent:#fff8f4;--on-accent-hover:rgba(255,255,255,0.18);--key-white:#e9e4da;--key-black:#232420;--key-edge:#00000000;
--key-label:#8e897f;--key-label-black:#77736c;--shadow-popover:0 24px 60px rgba(0,0,0,0.5);--shadow-panel:0 -8px 24px rgba(0,0,0,0.5);
--shadow-toast:0 8px 24px rgba(0,0,0,0.5)}
/* Светлая тема */
.th-light{color-scheme:light;--bg:#e3e0da;--surface:#ece9e4;--popover:#efece7;--inset:#e6e3dd;--divider:#d4d0c8;--line:#cbc6bd;
--line-strong:#bdb7ad;--selected:#d3cec5;--hover:#dad6ce;--accent-soft:#ebd3ca;--text:#22231f;--text-2:#5f5b53;--text-3:#8e897f;
--accent:#c4523d;--accent-text:#a9432f;--accent-tint:rgba(196,82,61,0.09);--shadow:rgba(40,30,20,0.18);--backdrop:rgba(0,0,0,0.45);
--logo-bg:#22231f;--logo-fg:#ece9e4;--on-accent:#fff8f4;--on-accent-hover:rgba(255,255,255,0.18);--key-white:#f3f1ec;--key-black:#2a2b28;
--key-edge:#cbc6bd;--key-label:#a19c93;--key-label-black:#8e897f;--shadow-popover:0 24px 60px rgba(40,30,20,0.18);
--shadow-panel:0 -8px 24px rgba(40,30,20,0.18);--shadow-toast:0 8px 24px rgba(40,30,20,0.18)}