.cycle-select{display:flex;align-items:center;height:40px;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden}.cycle-select__btn{display:flex;align-items:center;justify-content:center;width:28px;height:100%;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;flex-shrink:0}.cycle-select__btn:active{color:var(--accent)}.cycle-select__label{flex:1;font-family:"Press Start 2P",monospace;font-size:8px;font-weight:400;letter-spacing:.02em;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.cycle-select__label--left{animation:slide-from-left .2s ease-out}.cycle-select__label--right{animation:slide-from-right .2s ease-out}@keyframes slide-from-right{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-from-left{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}*,*: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;overflow:hidden;position:fixed;width:100%;touch-action:manipulation}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;gap:24px;position:relative}.silent-banner{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border);font-family:Space Mono,monospace;font-size:10px;color:var(--text-muted);z-index:10}.silent-banner__close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0;line-height:1;flex-shrink:0}.silent-banner__close:active{color:var(--text)}.app__title{font-family:"Press Start 2P",monospace;font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}.stage{display:flex;align-items:flex-start;gap:24px}.keyboard-panel{display:flex;flex-direction:column;gap:12px}.side-panel{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch}.controls-row{display:flex;align-items:flex-end;gap:12px}.status-row{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--text-muted);font-family:Space Mono,monospace}.status-item{display:flex;align-items:center;gap:6px}.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}.midi-status{width:140px}.midi-status--connected{color:var(--accent)}.midi-status--error{color:#ff6b6b}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.faders{display:flex;gap:12px}.fader{display:flex;flex-direction:column;align-items:center;gap:16px}.fader input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:pan-y;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:28px;height:32px;border:none;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'%3E%3Cellipse cx='14' cy='18' rx='12' ry='12' fill='%23ff8c00'/%3E%3Cellipse cx='14' cy='18' rx='12' ry='12' fill='url(%23og)'/%3E%3Cellipse cx='10' cy='14' rx='5' ry='4' fill='%23ffa333' opacity='0.5'/%3E%3Crect x='13' y='2' width='2' height='7' rx='1' fill='%23556b2f'/%3E%3Cellipse cx='18' cy='5' rx='5' ry='3' fill='%23228b22' transform='rotate(-30 18 5)'/%3E%3Cdefs%3E%3CradialGradient id='og' cx='40%25' cy='35%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23ffaa33'/%3E%3Cstop offset='100%25' stop-color='%23e06600'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain;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}.select-group{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.select-group__label{font-family:Space Mono,monospace;font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.backing-btn{font-family:Space Mono,monospace;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:0 24px;height:40px;display:inline-flex;align-items:center;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){.app{padding:0!important;gap:12px}}@media (max-width: 768px) and (orientation: portrait){:root{--kb-pad: 8px;--white-w: 56px;--white-h: 128px;--black-w: 36px;--black-h: 80px}html,body{overflow:hidden}.app{transform:rotate(90deg);transform-origin:top left;position:absolute;top:0;left:100vw;width:100vh;height:100vw;min-height:unset;padding:0;gap:12px}.stage{gap:12px}.keyboard{padding:var(--kb-pad)}.key--black[data-note="C#4"]{left:calc(var(--kb-pad) + 1 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="D#4"]{left:calc(var(--kb-pad) + 2 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="F#4"]{left:calc(var(--kb-pad) + 4 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="G#4"]{left:calc(var(--kb-pad) + 5 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="A#4"]{left:calc(var(--kb-pad) + 6 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key__label{font-size:8px}.controls-row{flex-wrap:wrap}.backing-btn{font-size:10px;padding:0 16px}.cycle-select,.backing-btn{height:32px}.status-row{font-size:10px}.fader input[type=range]{height:var(--white-h)}}@media (max-height: 500px) and (orientation: landscape){:root{--kb-pad: 8px;--white-w: 56px;--white-h: 164px;--black-w: 48px;--black-h: 104px}.app{padding:0;gap:12px}.stage{gap:12px}.keyboard{padding:var(--kb-pad)}.key--black[data-note="C#4"]{left:calc(var(--kb-pad) + 1 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="D#4"]{left:calc(var(--kb-pad) + 2 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="F#4"]{left:calc(var(--kb-pad) + 4 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="G#4"]{left:calc(var(--kb-pad) + 5 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key--black[data-note="A#4"]{left:calc(var(--kb-pad) + 6 * var(--white-w) - var(--black-w) / 2);top:var(--kb-pad)}.key__label{font-size:8px}.controls-row{flex-wrap:wrap}.backing-btn{font-size:10px;padding:0 16px}.cycle-select,.backing-btn{height:32px}.status-row{font-size:10px}.fader input[type=range]{height:var(--white-h)}.fader{display:flex;flex-direction:column;align-items:center;gap:6px}}