*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0e0f;--surface: #1a1a1c;--border: #2e2e32;--accent: #ff6b2b;--text: #e8e8e8;--text-muted: #666;--white-key-bg: #f0ede6;--white-key-active: var(--accent);--white-key-border: #c8c5be;--black-key-bg: #1c1c1e;--black-key-active: var(--accent);--key-radius: 4px;--white-w: 52px;--white-h: 180px;--black-w: 34px;--black-h: 112px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:40px}.app__header{display:flex;flex-direction:column;align-items:center;gap:10px}.app__title{font-family:Space Mono,monospace;font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}.app__status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);font-family:Space Mono,monospace}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);transition:background .3s}.status-dot--ok{background:var(--accent)}.status-dot--loading{background:#888;animation:pulse 1s ease-in-out infinite}.status-error{color:#ff6b6b}.status-divider{opacity:.3}.midi-status--connected{color:var(--accent)}.midi-status--error{color:#ff6b6b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.app__main{display:flex;flex-direction:column;align-items:center;gap:28px}.stage{display:flex;align-items:flex-start;gap:16px}.faders{display:flex;gap:12px;padding-top:16px}.fader{display:flex;flex-direction:column;align-items:center;gap:10px}.fader input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:4px;height:var(--white-h);background:var(--border);border-radius:2px;outline:none}.fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}.fader__label{font-family:Space Mono,monospace;font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.controls-row{display:flex;align-items:center;gap:12px}.preset-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:Space Mono,monospace;font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--text);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--border);border-radius:6px;padding:10px 32px 10px 16px;cursor:pointer;outline:none}.preset-select option{background:var(--surface);color:var(--text)}.backing-btn{font-family:Space Mono,monospace;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--accent);border:none;border-radius:6px;padding:10px 24px;cursor:pointer;transition:opacity .15s ease}.backing-btn:active{opacity:.7}.keyboard{position:relative;display:flex;align-items:flex-start;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 0 0 1px #ffffff0a inset,0 24px 64px #00000080}.key--white{position:relative;width:var(--white-w);height:var(--white-h);background:var(--white-key-bg);border:1px solid var(--white-key-border);border-top:none;border-radius:0 0 var(--key-radius) var(--key-radius);cursor:pointer;transition:background 60ms ease,transform 60ms ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;z-index:1}.key--white+.key--white{border-left:none}.key--white:active,.key--white.key--active{background:var(--white-key-active);transform:scaleY(.98);transform-origin:top center}.key--black{position:absolute;width:var(--black-w);height:var(--black-h);background:var(--black-key-bg);border:1px solid #333;border-top:none;border-radius:0 0 3px 3px;cursor:pointer;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-shadow:0 4px 8px #0009,0 1px #ffffff0d inset;transition:background 60ms ease,transform 60ms ease}.key--black:active,.key--black.key--active{background:var(--black-key-active);transform:scaleY(.97);transform-origin:top center}.key--black[data-note="C#4"]{left:calc(16px + 1 * var(--white-w) - var(--black-w) / 2);top:16px}.key--black[data-note="D#4"]{left:calc(16px + 2 * var(--white-w) - var(--black-w) / 2);top:16px}.key--black[data-note="F#4"]{left:calc(16px + 4 * var(--white-w) - var(--black-w) / 2);top:16px}.key--black[data-note="G#4"]{left:calc(16px + 5 * var(--white-w) - var(--black-w) / 2);top:16px}.key--black[data-note="A#4"]{left:calc(16px + 6 * var(--white-w) - var(--black-w) / 2);top:16px}.key__label{font-family:Space Mono,monospace;font-size:10px;font-weight:700;text-transform:uppercase;pointer-events:none}.key--white .key__label{color:#999}.key--black .key__label{color:#555}.key--white.key--active .key__label,.key--black.key--active .key__label{color:#0e0e0f}@media (max-width: 768px) and (orientation: portrait){:root{--white-w: 40px;--white-h: 140px;--black-w: 26px;--black-h: 88px}.app{padding:24px 8px;gap:24px}.key__label{font-size:8px}.faders{flex-direction:row;gap:8px}.fader input[type=range]{height:var(--white-h)}}