:root{--bg:#101014;--panel:#191920;--panel-2:#22222c;--line:#2f2f3a;--text:#e7e7ef;--muted:#9a9aa8;--accent:#5b8cf5;--accent-hot:#e6603c;--on:#3f6fd8;--step:44px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:14px/1.45 ui-sans-serif,system-ui,-apple-system,sans-serif}.rack{flex-direction:column;gap:20px;max-width:1180px;margin:0 auto;padding:20px;display:flex}.transport{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;align-items:center;gap:22px;padding:14px 18px;display:flex}.transport__play{min-height:var(--step);min-width:88px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;font-size:15px;font-weight:600}.transport__play[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.transport__help{color:var(--muted);text-underline-offset:2px;white-space:nowrap;align-self:center;margin-left:auto;font-size:12px;text-decoration:underline}.transport__help:hover{color:var(--text)}.knob{flex-direction:column;align-items:center;gap:2px;display:flex}.knob__dial{touch-action:none;cursor:grab;border-radius:50%}.knob__dial:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.knob__dial.is-dragging{cursor:grabbing}.knob__track{fill:var(--panel-2);stroke:var(--line);stroke-width:2px}.knob__arc{fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.knob__pointer{stroke:var(--text);stroke-width:3px;stroke-linecap:round}.knob__label{color:var(--muted);font-size:11px}.knob__value{color:var(--text);font-variant-numeric:tabular-nums;font-size:11px}.knob__input{background:var(--panel-2);width:60px;color:var(--text);border:1px solid var(--accent);border-radius:4px}.midi{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;align-items:center;gap:18px;padding:10px 18px;font-size:12px;display:flex}.midi__enable{background:var(--panel-2);min-height:32px;color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:0 12px}.midi__enable:hover{border-color:var(--accent)}.midi__field{color:var(--muted);align-items:center;gap:6px;display:flex}.midi__field select{background:var(--panel-2);min-height:30px;color:var(--text);border:1px solid var(--line);border-radius:6px;max-width:24ch;padding:0 6px}.midi__field--check{cursor:pointer}.midi__field--check input{accent-color:var(--accent)}.midi__hint{color:var(--muted);flex:1;min-width:20ch}.midi__warn{color:var(--accent-hot)}.mixer{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px}.mixer__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;display:flex}.mixer__scale{align-items:center;gap:10px;display:flex}.mixer__root{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.mixer__scaleField{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.mixer__scaleField select{background:var(--panel-2);min-height:30px;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:0 6px}.mixer__title,.generator__title{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0;font-size:13px}.mixer__hint,.generator__hint{color:var(--muted);max-width:62ch;margin:8px 0 12px;font-size:12px}.mixer__faders{flex-wrap:wrap;gap:10px;display:flex}.fader{flex-direction:column;align-items:center;gap:4px;display:flex}.fader__input{writing-mode:vertical-lr;width:28px;height:110px;accent-color:var(--accent);direction:rtl}.fader__label{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.tracks{flex-direction:column;gap:8px;display:flex}.track{background:var(--panel);border:1px solid var(--line);border-left:3px solid #0000;border-radius:10px;align-items:center;gap:14px;padding:10px 14px;display:flex}.track.is-selected{border-left-color:var(--accent)}.track__head{align-items:center;gap:10px;min-width:290px;display:flex}.track__name{background:var(--panel-2);min-height:32px;color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:0 10px}.track__name[aria-pressed=true]{border-color:var(--accent)}.track__mute,.track__euclid,.track__clear{background:var(--panel-2);min-height:32px;color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:0 10px;font-size:12px}.track__mute[aria-pressed=true]{background:var(--accent-hot);border-color:var(--accent-hot)}.track__gen{flex-direction:column;gap:4px;display:flex}.track__inst{flex-direction:column;gap:4px;min-width:5.5rem;display:flex}.track__kind{background:var(--panel-2);width:100%;min-height:32px;color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:0 10px;font-size:12px}.track__kind[data-kind=rhythm]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.track__drum{background:var(--panel-2);width:100%;min-height:28px;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:12px}.track__drum:disabled{opacity:.4;cursor:not-allowed}.track__clear{color:var(--muted)}.track__clear:hover{color:var(--text);border-color:#4a4a5c}.steps{flex-direction:column;gap:4px;display:flex}.steps__row{gap:4px;display:flex}.step{width:var(--step);height:var(--step);background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:5px;justify-content:center;align-items:center;padding:0;display:flex}.step__note{letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#fff;pointer-events:none;font-size:11px;font-weight:600;line-height:1}.step.is-accent .step__note{color:#1b0d07}.step[data-beat=downbeat]{border-color:#3d3d4c}.step[data-row-start]{border-left-color:#4a4a5c}.step.is-on{background:var(--on);border-color:var(--on)}.step.is-accent{background:var(--accent-hot);border-color:var(--accent-hot)}.step.is-playing{outline:2px solid var(--text);outline-offset:1px}.step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.step.is-outside{opacity:.3}.step.is-outside:hover{opacity:.55}.step--pad{visibility:hidden;display:block}.generator{background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:22px;padding:14px 18px;display:flex}.generator__title,.generator__hint{margin:0}.generator__hint{flex:1;max-width:none}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}