:root{color:#17191a;font-synthesis:none;color-scheme:light;background:#f2f1ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;min-height:100%;margin:0}body{min-width:20rem}button{font:inherit}button:focus-visible{outline-offset:3px;outline:3px solid #17191a}.app-shell{width:min(100%,52rem);min-height:100dvh;padding:max(.875rem, env(safe-area-inset-top)) .875rem max(.875rem, env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto;gap:.75rem;margin:0 auto;display:grid}.topbar{justify-content:space-between;align-items:center;gap:1rem;min-height:3.75rem;display:flex}h1,.eyebrow{letter-spacing:0;margin:0}h1{font-size:1.6rem;line-height:1}.eyebrow{color:#655f56;text-transform:uppercase;margin-bottom:.2rem;font-size:.68rem;font-weight:800;line-height:1}.pad-grid{grid-template-rows:repeat(4,minmax(4.6rem,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;min-height:0;display:grid}.pad{background:var(--pad-color);min-width:0;min-height:0;color:var(--pad-text);touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border:1px solid #0000002e;border-radius:.5rem;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.75rem;transition:transform 70ms,box-shadow 70ms,filter 70ms;display:flex;position:relative;overflow:hidden;box-shadow:0 .3rem #1919192e}.pad.active{filter:saturate(1.14)brightness(.94);transform:translateY(.25rem);box-shadow:0 .05rem #19191933}.pad-number{font-size:.68rem;font-weight:850}.pad-meta{justify-content:space-between;align-items:center;gap:.5rem;width:100%;display:flex}.pad-binding{text-transform:uppercase;border:1px solid;border-radius:.2rem;padding:.18rem .28rem;font-size:.6rem;font-weight:850;line-height:1}.pad-label{overflow-wrap:anywhere;text-align:left;width:100%;font-size:clamp(.78rem,2.6cqw,1rem);font-weight:850;line-height:1.05}footer{color:#655f56;justify-content:space-between;align-items:center;min-height:2rem;font-size:.75rem;font-weight:700;display:flex}.project-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.footer-actions{align-items:center;gap:.45rem;display:flex}.tool-button,.icon-button{color:#2c4f45;cursor:pointer;background:0 0;border:0}.tool-button{align-items:center;gap:.4rem;min-height:2.75rem;padding:.45rem .25rem;font-size:.78rem;font-weight:800;display:inline-flex}.tool-button.active{color:#8e3028}.error-toast{z-index:40;top:max(.75rem, env(safe-area-inset-top));color:#7d2822;background:#fff;border-left:.32rem solid #b64136;border-radius:.35rem;justify-content:space-between;align-items:center;gap:.75rem;width:min(100% - 1.5rem,32rem);min-height:3.5rem;padding:.65rem .5rem .65rem .85rem;font-size:.82rem;font-weight:750;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 .5rem 1.8rem #00000038}.dialog-layer{z-index:20;align-items:end;display:grid;position:fixed;inset:0}.dialog-backdrop{background:#14161694;border:0;width:100%;height:100%;position:absolute;inset:0}.device-panel{width:min(100%,34rem);max-height:min(88dvh,34rem);padding:1.1rem 1rem max(1rem, env(safe-area-inset-bottom));background:#fff;border-radius:.5rem .5rem 0 0;gap:1rem;margin:0 auto;display:grid;position:relative;box-shadow:0 -.5rem 2rem #0000002e}.sound-panel{max-height:min(92dvh,38rem)}.edit-panel{max-height:min(94dvh,48rem);overflow-y:auto}.loop-panel{max-height:min(94dvh,46rem);overflow-y:auto}.panel-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.panel-header h2{letter-spacing:0;margin:0;font-size:1.2rem}.icon-button{place-items:center;width:2.75rem;height:2.75rem;display:grid}.input-status{color:#205d4d;background:#eff7f4;border-left:.3rem solid #28a88c;align-items:center;gap:.65rem;min-height:3.25rem;padding:.75rem;font-weight:800;display:flex}.audio-diagnostic{color:#4c4842;border-block:1px solid #dedbd3;align-items:center;gap:.65rem;min-height:3.5rem;padding:.6rem .75rem;display:flex}.audio-diagnostic.error{color:#8e3028}.audio-diagnostic>span{gap:.08rem;display:grid}.audio-diagnostic small{color:#655f56;font-size:.7rem}.audio-diagnostic button{color:#2c4f45;cursor:pointer;background:#f5f4f0;border:1px solid #aaa59b;border-radius:.35rem;min-height:2.5rem;margin-left:auto;padding:.5rem .7rem;font-size:.76rem;font-weight:800}.sound-pad-picker{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;display:grid}.sound-pad-picker button{background:var(--picker-color);min-width:0;min-height:2.9rem;color:var(--picker-text);cursor:pointer;border:2px solid #0000;border-radius:.35rem;font-size:.7rem;font-weight:850;box-shadow:inset 0 0 0 1px #0000002e}.sound-pad-picker button.selected{border-color:#17191a;box-shadow:inset 0 0 0 2px #fff}.sound-pad-picker button:disabled{cursor:not-allowed;opacity:.58}.selected-sound{border-block:1px solid #dedbd3;align-items:center;gap:.7rem;min-width:0;min-height:3.5rem;padding:.65rem 0;display:flex}.selected-sound span{gap:.12rem;min-width:0;display:grid}.selected-sound small{color:#655f56;font-size:.68rem}.selected-sound strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.selected-sound .icon-button{flex:none;margin-left:auto}.selected-sound .icon-button:disabled{cursor:not-allowed;opacity:.35}.editor-loading{color:#655f56;place-content:center;justify-items:center;gap:.6rem;min-height:12rem;font-size:.8rem;font-weight:750;display:grid}.waveform{background:#f5f4f0;border:1px solid #c8c4ba;border-radius:.35rem;align-items:center;gap:1px;height:7rem;padding:.65rem;display:flex;overflow:hidden}.waveform span{background:#26745c;flex:1 1 0;min-width:1px;max-height:100%}.editor-field,.range-field{gap:.45rem;display:grid}.editor-field>span,.range-field strong,.mode-field legend{color:#4c4842;font-size:.74rem;font-weight:800}.editor-field input[type=text]{width:100%;min-height:2.9rem;font:inherit;border:1px solid #aaa59b;border-radius:.35rem;padding:.55rem .65rem}.trim-controls{gap:.7rem;display:grid}.range-field>span{justify-content:space-between;align-items:center;gap:1rem;display:flex}.range-field output{color:#655f56;font-variant-numeric:tabular-nums;font-size:.74rem;font-weight:750}.range-field input[type=range]{accent-color:#26745c;cursor:pointer;width:100%;height:2rem;margin:0}.mode-field{border:0;min-width:0;padding:0}.mode-field legend{margin-bottom:.45rem}.segmented-control{background:#eceae4;border:1px solid #c8c4ba;border-radius:.4rem;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem;padding:.2rem;display:grid}.segmented-control button{color:#4c4842;cursor:pointer;background:0 0;border:0;border-radius:.25rem;min-height:2.65rem;font-size:.78rem;font-weight:800}.segmented-control button.active{color:#205d4d;background:#fff;box-shadow:0 1px .3rem #0000001f}.edit-preview-row{display:grid}.edit-actions{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:.65rem;display:grid}.danger-action{color:#8e3028;cursor:pointer;background:#fff7f5;border:1px solid #c4857e;border-radius:.4rem;justify-content:center;align-items:center;gap:.5rem;min-height:3rem;padding:.65rem .8rem;font-size:.8rem;font-weight:800;display:inline-flex}.danger-action:disabled{cursor:wait;opacity:.58}.loop-status{color:#4c4842;background:#f5f4f0;border-left:.3rem solid #aaa59b;align-items:center;gap:.65rem;min-height:3.6rem;padding:.65rem .75rem;display:flex}.loop-status.playing{color:#205d4d;background:#eff7f4;border-left-color:#26745c}.loop-status>span:not(.event-count){gap:.05rem;display:grid}.loop-status small{font-size:.68rem;font-weight:750}.loop-status strong{font-variant-numeric:tabular-nums;font-size:1rem}.event-count{margin-left:auto;font-size:.72rem;font-weight:800}.loop-pad-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;display:grid}.loop-pad-grid button{background:var(--loop-pad-color);min-width:0;height:3.4rem;color:var(--loop-pad-text);cursor:pointer;touch-action:manipulation;border:1px solid #0000002e;border-radius:.35rem;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:.4rem .45rem;display:flex}.loop-pad-grid button:active{filter:brightness(.9);transform:translateY(.1rem)}.loop-pad-grid button:disabled{cursor:not-allowed;opacity:.38}.loop-pad-grid span{font-size:.58rem;font-weight:850}.loop-pad-grid strong{text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.68rem;line-height:1;overflow:hidden}.loop-settings{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:.75rem;display:grid}.tempo-field,.bars-field{border:0;min-width:0;margin:0;padding:0}.tempo-field{gap:.45rem;display:grid}.tempo-field span,.bars-field legend{color:#4c4842;font-size:.72rem;font-weight:800}.tempo-field input{width:100%;min-height:3rem;font:inherit;background:#fff;border:1px solid #aaa59b;border-radius:.35rem;padding:.45rem .55rem;font-size:1rem;font-weight:800}.bars-field legend{margin-bottom:.45rem}.bars-field .segmented-control{grid-template-columns:repeat(3,minmax(0,1fr))}.tempo-field input:disabled,.bars-field button:disabled{cursor:not-allowed;opacity:.58}.step-strip{grid-template-columns:repeat(16,minmax(0,1fr));gap:.18rem;height:1.2rem;display:grid}.step-strip span{background:#dedbd3;border-radius:.12rem}.step-strip span:nth-child(4n+1){background:#c4c0b7}.step-strip span.filled{background:#8dbdad}.step-strip span.current{background:#26745c;transform:scaleY(1.28)}.loop-transport{grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;display:grid}.loop-transport button{color:#4c4842;cursor:pointer;background:#f5f4f0;border:1px solid #c8c4ba;border-radius:.35rem;justify-content:center;align-items:center;gap:.35rem;min-width:0;min-height:3rem;padding:.55rem .35rem;font-size:.72rem;font-weight:800;display:inline-flex}.loop-transport button:disabled{cursor:not-allowed;opacity:.4}.loop-transport .transport-start{color:#fff;background:#26745c;border-color:#236c57}.loop-transport .transport-stop,.loop-transport .transport-record.active{color:#fff;background:#b64136;border-color:#8e3028}.loop-transport .transport-mute.active{color:#fff;background:#655f56;border-color:#655f56}.panel-actions{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:.65rem;display:grid}.portability-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.portability-actions button,.portability-actions label{color:#3f4945;cursor:pointer;background:#fff;border:1px solid #c8c4ba;border-radius:.35rem;justify-content:center;align-items:center;gap:.45rem;min-width:0;min-height:2.8rem;padding:.55rem .65rem;font-size:.76rem;font-weight:800;display:inline-flex}.portability-actions button:disabled,.portability-actions label.busy{cursor:wait;opacity:.58}.primary-action,.secondary-action{cursor:pointer;border-radius:.4rem;justify-content:center;align-items:center;gap:.5rem;min-height:3rem;padding:.65rem .8rem;font-size:.8rem;font-weight:800;display:inline-flex}.primary-action{color:#fff;background:#26745c;border:1px solid #236c57}.primary-action.busy{cursor:wait;opacity:.72}.secondary-action{color:#4c4842;background:#f5f4f0;border:1px solid #c8c4ba}.primary-action:disabled,.secondary-action:disabled{cursor:wait;opacity:.58}.recorder-status{border-block:1px solid #dedbd3;align-items:center;gap:.75rem;min-height:4.25rem;padding:.75rem;display:flex}.recording-indicator{color:#5d5850;background:#eceae4;border-radius:50%;flex:none;place-items:center;width:2.75rem;height:2.75rem;display:grid}.recorder-status.recording .recording-indicator{color:#fff;background:#b64136;animation:1.2s ease-in-out infinite record-pulse}.recorder-status>span:last-child{gap:.1rem;min-width:0;display:grid}.recorder-status small{color:#655f56;font-size:.7rem;font-weight:700}.recorder-status strong{text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;overflow:hidden}.input-level{color:#655f56;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7rem;padding:.2rem .75rem;font-size:.7rem;font-weight:750;display:grid}.input-level-track{background:#dedbd3;border-radius:999px;height:.65rem;overflow:hidden}.input-level-fill{border-radius:inherit;transform-origin:0;background:linear-gradient(90deg,#52825d 0 72%,#d49b3b 72% 90%,#b64136 90%);width:100%;height:100%;transition:transform 80ms linear;display:block}.recording-error{color:#7d2822;background:#fbefed;border-left:.3rem solid #b64136;margin:0;padding:.7rem .75rem;font-size:.8rem;font-weight:750}.start-recording,.stop-recording{color:#fff;cursor:pointer;background:#b64136;border:1px solid #8e3028;border-radius:.4rem;justify-content:center;align-items:center;gap:.55rem;min-height:3.25rem;padding:.7rem 1rem;font-size:.84rem;font-weight:850;display:inline-flex}.start-recording:disabled{cursor:wait;opacity:.7}.stop-recording{background:#8e3028}.recording-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}.retry-action{grid-column:1/-1}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.spin{animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes record-pulse{50%{opacity:.68}}.key-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;display:grid}kbd{text-transform:uppercase;background:#f5f4f0;border:1px solid #c8c4ba;border-bottom-width:.2rem;border-radius:.3rem;place-items:center;min-width:0;min-height:2.7rem;font:800 .72rem/1 Inter,ui-sans-serif,system-ui,sans-serif;display:grid}kbd.active{color:#101f1b;background:#28a88c;border-color:#236c57;transform:translateY(.12rem)}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;display:flex}.toggle-label{align-items:center;gap:.65rem;display:flex}.toggle-label span{gap:.1rem;display:grid}.toggle-label small{color:#655f56;font-size:.72rem}.toggle-row input{accent-color:#26745c;width:2.8rem;height:1.5rem}.language-description{color:#655f56;margin:0;font-size:.84rem;line-height:1.45}.language-options{gap:.5rem;display:grid}.language-options button{color:#4c4842;cursor:pointer;background:#f5f4f0;border:1px solid #c8c4ba;border-radius:.4rem;justify-content:space-between;align-items:center;gap:1rem;min-height:3.25rem;padding:.65rem .8rem;font-weight:800;display:flex}.language-options button.active{color:#205d4d;background:#eff7f4;border-color:#26745c}@media (width>=42rem) and (orientation:landscape){.app-shell{gap:1rem;padding-inline:1rem}.pad-grid{grid-template-rows:repeat(3,minmax(5.5rem,1fr));grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.device-panel{border-radius:.5rem;margin-bottom:1rem}}@media (height<=38rem) and (orientation:landscape){.app-shell{grid-template-rows:auto minmax(0,1fr)}footer{display:none}.pad-grid{grid-template-rows:repeat(2,minmax(4.4rem,1fr));grid-template-columns:repeat(6,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.pad{transition:none}.spin,.recorder-status.recording .recording-indicator{animation:none}}@media (width<=27rem){.project-name{display:none}footer{justify-content:flex-end}.footer-actions{gap:.2rem}.tool-button{justify-content:center;width:2.75rem;padding-inline:0}.tool-button span{display:none}}