*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font-main:"DM Sans", sans-serif;--font-display:"DM Sans", sans-serif;--r-sm:6px;--r-md:14px;--r-lg:22px;--r-xl:30px}[data-theme=light]{--bg:#e6e6e6;--bg-deep:#d4d4d4;--panel:#f2f2f2;--panel-raised:#fff;--panel-inset:#e0e0e0;--panel-border:#00000014;--panel-shadow:#0000001a;--key-white:#fff;--key-white-top:#fff;--key-white-active:#f0f0f0;--key-black:#222;--key-black-top:#333;--key-black-active:#444;--text-label:#444;--text-dim:#777;--text-bright:#111;--accent:#4a90e2;--accent-dim:#4a90e21a;--piano-body:#dcdcdc;--divider:#0000001a;--knob-bg:radial-gradient(circle at 35% 30%, #fff, #f0f0f0 60%, #e0e0e0 100%);--knob-indicator:#444;--nav-mini-key:#00000026;--nav-viewport:#00000014;--nav-viewport-border:#00000040;--knob-track:#0000001f}[data-theme=dark]{--bg:#1c1f27;--bg-deep:#161820;--panel:#21242d;--panel-raised:#272b35;--panel-inset:#181b22;--panel-border:#ffffff0f;--panel-shadow:#0000008c;--key-white:#c6cad5;--key-white-top:#d4d8e4;--key-white-active:#b8d0f0;--key-black:#1a1c24;--key-black-top:#21242e;--key-black-active:#2e3650;--text-label:#8a92b0;--text-dim:#6d7490;--text-bright:#c8ccd5;--accent:#4e6a9e;--accent-dim:#4e6a9e33;--piano-body:#14161e;--divider:#ffffff0f;--knob-bg:radial-gradient(circle at 38% 32%, #31364a, #1c1f28 70%);--knob-indicator:var(--accent);--nav-mini-key:#fff3;--nav-viewport:#4e6a9e40;--nav-viewport-border:#4e6a9e99;--knob-track:#ffffff1f}html,body{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-main);background:var(--bg);color:var(--text-bright);-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{height:100vh;overflow:hidden}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:99px}._wrapper_1v433_1{flex-direction:column;align-items:center;gap:10px;display:flex}._btn_1v433_9{cursor:pointer;background:var(--knob-bg);width:48px;height:48px;box-shadow:0 3px 6px var(--panel-shadow), 0 1px 0 #ffffff1a inset;border:none;border:1px solid var(--panel-border);border-radius:50%;outline:none;transition:all 80ms;position:relative}._btn_1v433_9:hover{filter:brightness(1.1)}._btn_1v433_9:active{transform:translateY(1px);box-shadow:0 2px 6px #0009}._btnInner_1v433_28{flex-direction:column;justify-content:center;align-items:center;gap:2px;height:100%;display:flex}._recordCircle_1v433_38{background:#ff4d4d;border-radius:50%;width:10px;height:10px;box-shadow:0 0 8px #ff4d4d99}._recording_1v433_46 ._recordCircle_1v433_38{animation:1s infinite _pulse_1v433_1}._stopIcon_1v433_50{background:#fff;border-radius:1px;width:10px;height:10px}@keyframes _pulse_1v433_1{0%{opacity:1}50%{opacity:.5}to{opacity:1}}._label_1v433_63{letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-size:8px;font-weight:700}._recording_1v433_46{background:radial-gradient(circle at 38% 35%,#3a2030,#221020 70%);box-shadow:0 4px 10px #0009,0 0 0 2px #b43c3c59,inset 0 1px #ffffff0d}._recording_1v433_46 ._label_1v433_63{color:#c8505099}._stopIcon_1v433_50{background:#b43c3cb3;border-radius:3px;width:16px;height:16px;margin-bottom:2px;display:block}._duration_1v433_91{font-family:var(--font-display);color:#c85050cc;letter-spacing:.04em;font-size:13px;font-weight:700}._recordedState_1v433_100{flex-direction:column;align-items:center;gap:6px;display:flex}._recordedBadge_1v433_107{letter-spacing:.12em;text-transform:uppercase;color:#50a06eb3;background:#3c5a5033;border:1px solid #3c8c6433;border-radius:50px;align-items:center;gap:6px;padding:5px 12px;font-size:9px;font-weight:700;display:flex}._checkIcon_1v433_122{color:#50a06ee6;font-size:10px}._durationBadge_1v433_127{opacity:.6;font-size:9px}._reRecordBtn_1v433_132{border:1px solid var(--panel-border);color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;font-size:9px;font-weight:700;font-family:var(--font-main);background:0 0;border-radius:50px;align-items:center;gap:8px;padding:5px 14px;transition:all .15s;display:flex}._reRecordBtn_1v433_132:hover{color:var(--text-bright);border-color:#ffffff24}._container_1vux0_1{flex-direction:column;gap:4px;width:100%;display:flex}._label_1vux0_8{letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);text-align:center;font-size:8px;font-weight:700}._track_1vux0_17{background:var(--panel-inset);border:1px solid var(--panel-border);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;width:100%;height:32px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #00000080}._miniPiano_1vux0_31{opacity:.15;pointer-events:none;gap:1px;width:100%;height:100%;padding:2px;display:flex}._miniKey_1vux0_41{background:var(--nav-mini-key);border-radius:.5px;flex:1;height:100%}._miniBlack_1vux0_48{background:#00000080;height:60%}._viewport_1vux0_53{background:var(--nav-viewport);border:1.5px solid var(--nav-viewport-border);box-sizing:border-box;height:100%;box-shadow:0 0 10px var(--panel-shadow);z-index:2;cursor:grab;border-radius:4px;justify-content:space-between;display:flex;position:absolute;top:0}._viewport_1vux0_53._active_1vux0_68{cursor:grabbing;background:#4e6a9e4d}._resizeHandle_1vux0_73{cursor:col-resize;z-index:3;background:#ffffff0d;justify-content:center;align-items:center;width:10px;height:100%;display:flex;position:absolute;top:0;left:0}._resizeHandle_1vux0_73:after{content:"";background:var(--text-bright);opacity:.5;border-radius:1px;width:2px;height:40%}._resizeHandle_1vux0_73:hover:after{opacity:1}@media screen and (width<=768px){._track_1vux0_17{height:16px}._label_1vux0_8{font-size:7px}}._wrapper_e6160_1{flex-direction:column;flex:1;gap:0;width:100%;min-height:0;display:flex}._octaveBar_e6160_11{flex-shrink:0;justify-content:center;align-items:center;gap:12px;margin-bottom:10px;display:flex}._octaveBtn_e6160_20{color:var(--text-label);cursor:pointer;font-size:12px;font-family:var(--font-main);will-change:transform, background-color;backface-visibility:hidden;-webkit-font-smoothing:antialiased;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:4px 10px;line-height:1;transition:background-color .12s,border-color .12s,color .12s,transform 80ms,box-shadow .12s;transform:translate(0,0)}._octaveBtn_e6160_20:hover:not(:disabled){color:var(--text-bright);background:#4e6a9e26;border-color:#4e6a9e4d}._octaveBtn_e6160_20:active:not(:disabled){transform:translateY(1px)}._octaveBtn_e6160_20:disabled{opacity:.25;cursor:not-allowed}._octaveLabel_e6160_59{font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--text-label);text-align:center;min-width:70px;font-size:11px;font-weight:700}._sustainIndicator_e6160_70{color:#8ca0ff;letter-spacing:.1em;background:#8ca0ff33;border:1px solid #8ca0ff66;border-radius:4px;margin-left:12px;padding:2px 8px;font-size:8px;font-weight:900;animation:1.5s infinite _pulseGlow_e6160_1;box-shadow:0 0 10px #8ca0ff33}@keyframes _pulseGlow_e6160_1{0%{opacity:.8;box-shadow:0 0 5px #8ca0ff33}50%{opacity:1;box-shadow:0 0 15px #8ca0ff80}to{opacity:.8;box-shadow:0 0 5px #8ca0ff33}}._octaveHint_e6160_90{color:var(--text-dim);letter-spacing:.1em;margin-left:8px;font-size:9px}._scrollContainer_e6160_98{-webkit-overflow-scrolling:touch;cursor:grab;scroll-behavior:auto;backface-visibility:hidden;flex:1;min-height:0;overflow:auto hidden;transform:translate(0,0)}._scrollContainer_e6160_98:active{cursor:grabbing}._scrollContainer_e6160_98._disabled_e6160_115{opacity:.35;pointer-events:none}._scrollContainer_e6160_98._assignMode_e6160_120{cursor:crosshair}._scrollContainer_e6160_98._assignMode_e6160_120 ._whiteKey_e6160_124,._scrollContainer_e6160_98._assignMode_e6160_120 ._blackKey_e6160_125{animation:2s infinite _breathe_e6160_1}@keyframes _breathe_e6160_1{0%{box-shadow:0 0 5px #8ca0ff1a}50%{box-shadow:0 0 15px #8ca0ff4d}to{box-shadow:0 0 5px #8ca0ff1a}}._whiteKey_e6160_124._assigned_e6160_135{background:linear-gradient(#f0f7ff 0%,#e6f0ff 100%)!important;border-bottom:3px solid #8ca0ff!important}._whiteKey_e6160_124._focused_e6160_140{outline-offset:-2px!important;background:linear-gradient(#f5f8ff 0%,#eef3ff 100%)!important;outline:2px solid #8ca0ff!important}._blackKey_e6160_125._assigned_e6160_135{box-shadow:0 0 8px #8ca0ff66;border-bottom:3px solid #8ca0ff!important}._blackKey_e6160_125._focused_e6160_140{z-index:10;outline-offset:-2px!important;outline:2px solid #8ca0ff!important}._scrollContainer_e6160_98::-webkit-scrollbar{height:6px}._scrollContainer_e6160_98::-webkit-scrollbar-track{background:#0003;border-radius:99px}._scrollContainer_e6160_98::-webkit-scrollbar-thumb{background:#4e6a9e59;border-radius:99px}._scrollContainer_e6160_98::-webkit-scrollbar-thumb:hover{background:#4e6a9e8c}._piano_e6160_177{width:calc((100vw - 40px) / var(--key-zoom,.2));background:var(--piano-body);height:100%;min-height:120px;box-shadow:0 1px 0 #ffffff1a inset, 0 2px 6px var(--panel-shadow) inset;border:1px solid var(--panel-border);-webkit-user-select:none;user-select:none;backface-visibility:hidden;border-radius:8px;flex-shrink:0;padding:4px 2px 0;position:relative;transform:translate(0,0)}._whiteKeys_e6160_199{gap:1.5px;height:100%;display:flex}._whiteKey_e6160_124{min-width:calc((100vw - 40px) / (52 * var(--key-zoom,.2)));cursor:pointer;will-change:transform, background-color;backface-visibility:hidden;-webkit-font-smoothing:antialiased;background:linear-gradient(#fff 0%,#fcfcfc 40%,#f9f9f9 100%);border:none;border-radius:0 0 6px 6px;outline:none;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:2px;padding-bottom:6px;transition:background-color .1s,transform 60ms,box-shadow .1s,filter .1s;display:flex;position:relative;transform:translate(0,0);box-shadow:0 2px 4px #0003}._whiteKey_e6160_124:hover:not(:disabled){filter:brightness(.985)}._whiteKey_e6160_124:active:not(:disabled){transform:translateY(2px)}._whiteKey_e6160_124._whiteActive_e6160_252{background:linear-gradient(#eeeded 0%,#fcfcfc 40%,#e0dfdf 100%);transform:translateY(2px);box-shadow:0 0 10px #ffffff59!important}._whiteKey_e6160_124._mapped_e6160_265{border-bottom:2px solid #4e6a9e66}._whiteKey_e6160_124._anchor_e6160_269{background:linear-gradient(#f0f4ff 0%,#fff 100%)!important}._whiteKeyNote_e6160_277{font-family:var(--font-display);color:#1e233747;font-size:8px;font-weight:700;line-height:1}._octaveTag_e6160_285{font-family:var(--font-display);color:#4e6a9e80;font-size:7px;font-weight:700;line-height:1}._bindingLabel_e6160_293{font-family:var(--font-display);color:#4e6a9ea6;pointer-events:none;font-size:9px;font-weight:800;position:absolute;top:6px;left:50%;transform:translate(-50%)}._blackKeys_e6160_308{pointer-events:none;height:56%;position:absolute;top:4px;left:2px;right:2px}._blackKey_e6160_125{width:calc(((100vw - 40px) / (52 * var(--key-zoom,.2))) * .6);cursor:pointer;z-index:2;pointer-events:all;will-change:transform, background-color;backface-visibility:hidden;-webkit-font-smoothing:antialiased;background:linear-gradient(#252830 0%,#1c1f28 35%,#181b22 70%,#1e2130 100%);border:none;border-radius:0 0 5px 5px;outline:none;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;padding-bottom:6px;transition:transform 50ms,filter 80ms,box-shadow 80ms,background-color 80ms;display:flex;position:absolute;transform:translate(-50%);box-shadow:2px 5px 8px #000000a6,inset 0 1px #ffffff12}._blackKey_e6160_125:hover:not(:disabled){filter:brightness(.1)}._blackKey_e6160_125:active:not(:disabled){transform:translate(-50%,2px)}._blackKey_e6160_125._blackActive_e6160_373{background:linear-gradient(#262931 0%,#1c1f28 35%,#232731 70%,#1e2130 100%);transform:translate(-50%,2px);box-shadow:0 0 14px #ffffff73,inset 0 1px 3px #0000001a!important}._blackKey_e6160_125._mapped_e6160_265{border-bottom:2px solid #4e6a9e80}._blackBindingLabel_e6160_392{font-family:var(--font-display);color:#4e6a9e8c;pointer-events:none;font-size:7px;font-weight:800;position:absolute;top:5px}._anchorTag_e6160_405{color:#4e6a9e;letter-spacing:.1em;text-shadow:0 0 5px #4e6a9e4d;pointer-events:none;background:#fffc;border-radius:2px;padding:1px 3px;font-size:8px;font-weight:900;position:absolute;top:10px;left:50%;transform:translate(-50%)}._lockMsg_e6160_427{text-align:center;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);flex-shrink:0;margin-top:12px;font-size:10px}@media (width<=768px){._whiteKey_e6160_124{min-width:28px}._blackKey_e6160_125{width:18px}._octaveBar_e6160_11{gap:8px;margin-bottom:8px}._octaveLabel_e6160_59{font-size:9px}._octaveHint_e6160_90{display:none}}@media (width<=480px){._whiteKey_e6160_124{min-width:24px}._blackKey_e6160_125{width:16px}._bindingLabel_e6160_293,._blackBindingLabel_e6160_392{display:none}._whiteKeyNote_e6160_277,._octaveTag_e6160_285{font-size:6px}}._knob_nje2u_1{-webkit-user-select:none;user-select:none;touch-action:none;flex-direction:column;align-items:center;gap:20px;display:flex}._knobOuter_nje2u_11{width:calc(var(--knob-size) + 20px);height:calc(var(--knob-size) + 20px);justify-content:center;align-items:center;display:flex;position:relative}._sm_nje2u_21{--knob-size:clamp(52px, min(12vh, 8vw), 80px)}._lg_nje2u_22{--knob-size:clamp(80px, min(18vh, 12vw), 115px)}._track_nje2u_25{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;inset:0}._knobBody_nje2u_35{width:var(--knob-size);height:var(--knob-size);background:var(--knob-bg);border:1px solid var(--panel-border);box-shadow:0 8px 16px var(--panel-shadow), 0 2px 4px var(--panel-shadow), inset 0 1px 0 #ffffff0d;cursor:grab;z-index:2;border-radius:50%;transition:box-shadow .15s;position:relative}._knobBody_nje2u_35:hover{box-shadow:0 10px 20px var(--panel-shadow), 0 4px 8px var(--panel-shadow), inset 0 1px 0 #ffffff1a}._knobBody_nje2u_35._active_nje2u_58{cursor:grabbing;box-shadow:0 2px 4px var(--panel-shadow), inset 0 1px 0 #ffffff05}._indicator_nje2u_66{background:var(--knob-indicator);border-radius:4px;width:3px;height:20%;position:absolute;top:15%;left:50%;transform:translate(-50%);box-shadow:0 0 2px #0000001a}._lg_nje2u_22 ._indicator_nje2u_66{width:4px;height:22%}._terminalLabel_nje2u_84{color:var(--text-dim);opacity:.5;letter-spacing:.1em;text-transform:uppercase;z-index:3;pointer-events:none;font-size:7px;font-weight:900;position:absolute;bottom:0;transform:translateY(4px)}._min_nje2u_98{left:8px}._max_nje2u_99{right:8px}._status_nje2u_102{flex-direction:column;align-items:center;gap:4px;display:flex}._label_nje2u_109{letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);font-size:10px;font-weight:700;line-height:1;transition:color .2s}._labelActive_nje2u_119{color:var(--text-bright)}._statusLed_nje2u_123{border-radius:50%;width:4px;height:4px;margin-bottom:2px;transition:all .3s}._valueLabel_nje2u_131{font-family:var(--font-display);color:var(--accent);opacity:.7;letter-spacing:.05em;font-size:9px;font-weight:700;line-height:1}@media (width<=1024px){._knob_nje2u_1{gap:8px}._label_nje2u_109{letter-spacing:.1em;margin-top:4px;font-size:8px}._valueLabel_nje2u_131{font-size:8px}._terminalLabel_nje2u_84{font-size:6px}._sm_nje2u_21{--knob-size:clamp(40px, 7vw, 60px)}._lg_nje2u_22{--knob-size:clamp(52px, 10vw, 84px)}._knobOuter_nje2u_11{width:calc(var(--knob-size) + 12px);height:calc(var(--knob-size) + 12px)}}@media (height<=500px){._knob_nje2u_1{gap:6px}._label_nje2u_109{font-size:8px}._valueLabel_nje2u_131{font-size:7px}._terminalLabel_nje2u_84{font-size:5px}._sm_nje2u_21{--knob-size:clamp(36px, 12vh, 58px)}._lg_nje2u_22{--knob-size:clamp(56px, 18vh, 80px)}._knobOuter_nje2u_11{width:calc(var(--knob-size) + 8px);height:calc(var(--knob-size) + 8px)}}._wrapper_1xdim_1{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:8px;display:flex}._label_1xdim_9{letter-spacing:.1em;color:var(--text-dim);opacity:.6;font-size:8px;font-weight:800}._container_1xdim_17{cursor:ns-resize;background:#0006;border:1px solid #ffffff0d;border-radius:4px;width:40px;height:120px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px #00000080}._track_1xdim_29{background:#ffffff0d;width:2px;position:absolute;top:10px;bottom:10px;left:50%;transform:translate(-50%)}._centerLine_1xdim_39{background:#fff3;width:10px;height:1px;position:absolute;top:50%;left:-4px}._wheel_1xdim_48{pointer-events:none;background:linear-gradient(#333 0%,#111 50%,#333 100%);border:1px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;height:30px;transition:top 50ms linear;display:flex;position:absolute;left:4px;right:4px;box-shadow:0 4px 10px #00000080}._wheelGlow_1xdim_64{opacity:.5;background:#8ca0ff;width:100%;height:2px;box-shadow:0 0 10px #8ca0ff}.app{background:var(--bg);width:100vw;height:100vh;overflow:hidden}.device{background:var(--panel);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.device:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#ffffff12,#0000);height:1px;position:absolute;top:0;left:10%;right:10%}.topBar{border-bottom:1px solid var(--divider);flex-shrink:0;justify-content:space-between;align-items:center;padding:15px 28px;display:flex}.logo{align-items:baseline;gap:8px;display:flex}.logoMark{color:var(--accent);opacity:.8;font-size:14px}.themeToggle{border:1px solid var(--panel-border);background:var(--knob-bg);width:42px;height:42px;box-shadow:0 2px 4px var(--panel-shadow), 0 1px 0 #ffffff0d inset;color:var(--text-dim);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.themeToggle:hover{background:var(--panel-raised);color:var(--text-bright);box-shadow:0 4px 8px var(--panel-shadow);transform:translateY(-1px)}.logoText{font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:#a0a0a0;font-size:24px;font-weight:800}.authorLink{color:inherit;text-decoration:none;transition:all .2s}.author{color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;opacity:.7;font-size:8px;font-weight:700}.authorLink:hover{color:var(--text-bright);opacity:1}.deviceModel{letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-size:10px;font-weight:600}.controls{border-bottom:1px solid var(--divider);flex:0 0 clamp(160px,25vh,240px);justify-content:space-evenly;align-items:stretch;gap:clamp(4px,1.5vw,24px);padding:clamp(10px,2vh,20px) clamp(8px,2vw,32px);display:flex}.controlGroup{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-width:0;display:flex}.controlGroupLabel{letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);text-align:center;font-size:9px;font-weight:700}.controlGroupRow{justify-content:space-evenly;align-items:center;width:100%;display:flex}.controlDivider{opacity:.6;background:linear-gradient(#0000 0%,#ffffff0d 50%,#0000 100%);flex-shrink:0;align-self:center;width:1px;height:60%;margin:0 20px}.centerControl{flex-direction:column;flex:0 0 clamp(240px,25vw,320px);justify-content:flex-start;align-items:center;gap:12px;min-width:0;padding:0 clamp(4px,1.5vw,16px);display:flex;overflow:visible}.mappingArea{width:100%;max-width:280px}.centerBtns{flex-direction:column;align-items:center;gap:8px;display:flex}.fileInput{display:none}.importBtn{color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;font-size:9px;font-weight:700;font-family:var(--font-main);background:0 0;border:1px solid #ffffff14;border-radius:50px;align-items:center;gap:8px;padding:5px 14px;transition:all .15s;display:flex}.importBtn:hover{color:var(--text-bright);background:#4e6a9e14;border-color:#4e6a9e66}.actionRow{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.assignGroup{align-items:center;gap:4px;display:flex}.assignBtn{color:#8ca0ff;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:#8ca0ff1a;border:1px solid #8ca0ff33;border-radius:4px;justify-content:center;align-items:center;height:26px;padding:5px 10px;font-size:8px;font-weight:800;transition:all .2s;display:flex}.assignBtn:hover{color:#a0b0ff;background:#8ca0ff33;border-color:#8ca0ff66}.assignBtn.assignActive{color:#000;background:#8ca0ff;border-color:#8ca0ff;animation:1.5s infinite pulseAssign}@keyframes pulseAssign{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.clearAssignBtn{color:#ff6464;cursor:pointer;background:#ff64641a;border:1px solid #ff646433;border-radius:4px;justify-content:center;align-items:center;width:26px;height:26px;transition:all .2s;display:flex}.clearAssignBtn:hover{background:#ff646433;border-color:#ff646466}.targetIndicator{background:#0003;border:1px solid #8ca0ff33;border-radius:50px;align-items:center;gap:8px;padding:6px 14px;display:flex;box-shadow:inset 0 1px 4px #0003}.targetLabel{text-transform:uppercase;color:var(--text-dim);letter-spacing:.15em;opacity:.8;font-size:8px;font-weight:700}.targetNote{color:#8ca0ff;letter-spacing:.05em;font-size:11px;font-weight:900}.assignmentControls{flex-direction:column;gap:6px;width:100%;display:flex}.commitBtn{color:#fff;letter-spacing:.05em;cursor:pointer;text-transform:uppercase;background:linear-gradient(135deg,#8ca0ff 0%,#6c84ff 100%);border:none;border-radius:6px;padding:10px 16px;font-size:11px;font-weight:800;transition:all .2s;box-shadow:0 4px 15px #8ca0ff4d,inset 0 1px #fff3}.commitBtn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #8ca0ff66,inset 0 1px #fff3}.commitBtn:active{transform:translateY(1px)}.clearRecordingBtn{color:var(--text-dim);cursor:pointer;text-transform:uppercase;background:0 0;border:1px solid #ffffff1a;border-radius:6px;padding:6px 12px;font-size:9px;font-weight:700;transition:all .2s}.clearRecordingBtn:hover{color:#ff6464;background:#ffffff0d;border-color:#ff64644d}.pianoSection{flex:1;align-items:stretch;gap:16px;min-height:0;padding:0 10px;display:flex}.leftSideBar{flex-direction:column;justify-content:center;padding-bottom:24px;display:flex}.pianoWrap{background:var(--panel-inset);border-top:1px solid #00000080;flex-direction:column;flex:1;min-width:0;min-height:160px;padding:8px 20px 12px;display:flex;overflow:hidden;box-shadow:inset 0 4px 12px #0006}.envelopeContainer{flex-direction:column;align-items:center;gap:8px;display:flex}.pianoContainer{letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);text-align:center;flex-shrink:0;margin-bottom:10px;font-size:9px;font-weight:600}.footer{background:var(--panel);border-top:1px solid #ffffff0a;flex-shrink:0;justify-content:center;align-items:center;gap:24px;padding:10px 28px;display:flex}.footerDot{background:var(--accent);opacity:.4;border-radius:50%;flex-shrink:0;width:5px;height:5px}.footerItem{color:var(--text-dim);letter-spacing:.08em;align-items:center;gap:8px;font-size:10px;display:flex}@media (width<=1024px){.controls{flex:0 0 clamp(140px,22vh,200px);gap:4px;padding:8px 12px}.controlGroup{gap:6px}.controlDivider{display:none}.centerControl{flex:0 0 clamp(130px,15vw,180px);gap:8px}.pianoWrap{min-height:140px}.topBar{padding:6px 16px}.footer{gap:12px;padding:6px 16px}}@media (width<=768px){.controls{flex:none;padding:6px 8px}.centerControl{flex:0 0 120px;gap:6px}.pianoWrap{min-height:130px;padding:4px 12px 8px}.footer{flex-wrap:wrap;gap:6px;padding:4px 12px}.controlGroupLabel{letter-spacing:.15em;font-size:8px}}@media (height<=500px){.topBar{padding:4px 16px}.controls{flex:none;gap:2px;padding:4px 6px}.controlGroup{gap:4px}.controlDivider{display:none}.centerControl{flex:0 0 clamp(150px,16vw,220px);gap:6px}.pianoWrap{min-height:120px}.footer{gap:10px;padding:4px 16px}}.portraitWarning{background:var(--bg);z-index:9999;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;padding:40px;display:none;position:fixed;top:0;left:0}.warningIcon{color:var(--text-bright);margin-bottom:24px;animation:4s linear infinite rotateWarning}@keyframes rotateWarning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.portraitWarning h2{font-family:var(--font-display);color:var(--text-bright);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:20px}.portraitWarning p{color:var(--text-dim);max-width:280px;font-size:14px;line-height:1.6}@media screen and (width<=1024px) and (orientation:portrait){.portraitWarning{display:flex}.device{display:none}}