:root{color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;--bg:#0b0b0b;--plate:#0c0c0c;--line:#ffffff0e;--text:#e8e8e4;--muted:#a09f98;--accent:#e0a13a;--accent-ink:#241a06;--display-bg:#1b0c07;--display:#ff5b33;--mono:ui-monospace, SFMono-Regular, monospace;--key:#2f2f2f;--key-hover:#363636;--key-down:#272727;--key-border:#171717;--key-shadow:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000059, 0 1px 1px #00000080, 0 2px 3px #0000004d;--key-shadow-down:inset 0 1px 2px #00000073, inset 0 -1px 0 #00000040;--key-shadow-sm:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000059, 0 1px 1px #00000080, 0 1px 2px #0000004d;--accent-shadow:inset 0 1px 0 #ffffff4d, inset 0 -1px 0 #00000026, 0 1px 1px #00000080, 0 2px 3px #0000004d;--accent-shadow-down:inset 0 1px 2px #00000059, inset 0 -1px 0 #00000026;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{min-width:750px;min-height:100vh;color:var(--text);background:var(--bg);margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:1px solid var(--accent);outline-offset:2px}select{appearance:none;color:var(--text);border:1px solid var(--key-border);background-color:var(--key);background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);box-shadow:var(--key-shadow);background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px),0 0;background-repeat:no-repeat;background-size:4px 4px,4px 4px,auto}select option{color:var(--text);background:#222}input[type=range]{appearance:none;cursor:pointer;background:0 0}input[type=range]::-webkit-slider-runnable-track{background:#0a0a0a;border-radius:2px;height:4px;box-shadow:inset 0 1px 2px #000,0 1px #ffffff14}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid var(--key-border);background:linear-gradient(var(--track-color,var(--text)), var(--track-color,var(--text))) 50% 2px / 1px 6px no-repeat, var(--key);width:15px;height:15px;box-shadow:var(--key-shadow);border-radius:3px;margin-top:-5.5px}input[type=range]::-moz-range-track{background:#0a0a0a;border-radius:2px;height:4px;box-shadow:inset 0 1px 2px #000}input[type=range]::-moz-range-thumb{border:1px solid var(--key-border);background:linear-gradient(var(--track-color,var(--text)), var(--track-color,var(--text))) 50% 2px / 1px 6px no-repeat, var(--key);width:15px;height:15px;box-shadow:var(--key-shadow);border-radius:3px}input[type=range]:disabled{opacity:.4}.app{-webkit-user-select:none;user-select:none;background:#171717;border:1px solid #ffffff0b;border-radius:10px;width:calc(100% - 48px);max-width:1360px;margin:28px auto;padding:0 28px 36px;position:relative;box-shadow:0 16px 48px #0006,inset 0 1px #ffffff08}.app input,.app textarea,.app [contenteditable=true]{-webkit-user-select:text;user-select:text}.topbar{justify-content:space-between;align-items:center;gap:24px;min-height:76px;display:flex}.brand-row,.brand-lockup{align-items:center;gap:16px;display:flex}.header-actions{align-items:center;gap:6px;display:flex}.app-menu{position:relative}.header-action{border:1px solid var(--key-border);background:var(--key);width:30px;height:30px;box-shadow:var(--key-shadow-sm);color:var(--muted);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;padding:0;font:500 15px system-ui,sans-serif;list-style:none;display:flex}.app-menu summary::-webkit-details-marker{display:none}.header-action:hover{background:var(--key-hover);color:var(--text)}.header-action:active,.app-menu[open] summary{background:var(--key-down);box-shadow:var(--key-shadow-down);color:var(--text)}.app-menu-items{z-index:2;border:1px solid var(--key-border);background:#1d1d1d;border-radius:6px;min-width:170px;padding:5px;display:grid;position:absolute;top:38px;left:0;box-shadow:0 12px 28px #000000b3}.app-menu-items button,.app-menu-items a{color:var(--text);text-align:left;background:0 0;border:0;border-radius:4px;padding:8px 10px;font-size:12px;text-decoration:none}.menu-sep{border:0;border-top:1px solid var(--line);margin:5px 4px}.app-menu-items button:hover,.app-menu-items button:focus-visible,.app-menu-items a:hover,.app-menu-items a:focus-visible{background:var(--key-hover);outline:none}#help-dialog{width:min(440px,100vw - 48px);max-height:calc(100dvh - 48px);color:var(--text);background:#191919;border:1px solid #ffffff12;border-radius:12px;padding:28px;font-size:12px;line-height:1.5;overflow-y:auto;box-shadow:0 24px 80px #000c}#help-dialog::backdrop{background:#000000b8}.help-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}#help-dialog h2{letter-spacing:-.4px;margin:0;font-size:20px;font-weight:650}.help-keys{gap:12px;margin:0;display:grid}.help-keys>div{grid-template-columns:68px minmax(0,1fr);align-items:baseline;gap:12px;display:grid}.help-keys dt{gap:4px;display:flex}.help-keys dd{margin:0}#help-dialog kbd{border:1px solid var(--key-border);background:var(--key);min-width:24px;min-height:25px;box-shadow:var(--key-shadow-sm);color:var(--text);font:11px var(--mono);border-radius:4px;justify-content:center;align-items:center;padding:3px 6px;display:inline-flex}.help-note{color:var(--muted);margin:0 0 24px;line-height:1.7}.help-tip{border-top:1px solid var(--line);color:var(--muted);margin:24px 0 0;padding-top:18px;font-size:11px}.brand{color:var(--text);letter-spacing:-.8px;white-space:nowrap;align-items:center;font-size:19px;font-weight:750;text-decoration:none;display:flex}.brand-dash{color:var(--accent);margin:0 2px;font-weight:500}.brand-dot{background:radial-gradient(circle at 38% 32%,#f4ffe8,#6fe06c 42%,#22611f);border-radius:50%;width:6px;height:6px;margin:0 9px 1px 1px;display:inline-block;box-shadow:0 0 0 1px #000000b3,0 0 5px #6fe06c80}.brand-sub{color:#85847e;letter-spacing:.01em;white-space:nowrap;font:11px system-ui,sans-serif}.transport{align-items:center;gap:8px;display:flex}.transport button,.transport select,.tempo-control{border:1px solid var(--key-border);background:var(--key);height:32px;color:var(--text);box-shadow:var(--key-shadow);border-radius:3px}.transport button:active,.transport button.active{background:var(--key-down);box-shadow:var(--key-shadow-down);transform:translateY(1px)}.transport-button{width:40px;font-size:13px}#play{color:var(--accent-ink);background:var(--accent);box-shadow:var(--accent-shadow)}#play.active{box-shadow:var(--accent-shadow-down);transform:translateY(1px)}.transport .record-button{font:10px var(--mono);letter-spacing:.6px;align-items:center;gap:8px;padding:0 13px;display:flex}.record-button>span{background:radial-gradient(circle at 38% 32%,#a03524,#5e1d12 55%,#2b0d08);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 1px #000000b3,0 0 4px #ff3b1e33}.record-button.active>span{background:radial-gradient(circle at 38% 32%,#ffe6e0,#ff4a35 45%,#8f1f13);animation:.9s infinite pulse;box-shadow:0 0 0 1px #00000073,0 0 6px #ff3b1e,0 0 14px #ff3b1e,0 0 22px #ff3b1e}.record-button.active{border-color:#5c2a1e}.transport select{font:10px var(--mono);padding:0 22px 0 10px}.tempo-control{font:9px var(--mono);color:var(--muted);align-items:center;gap:8px;padding:0 9px;display:flex}.tempo-control input{text-align:center;background:var(--display-bg);width:56px;height:24px;color:var(--display);font:700 13px var(--mono);border:1px solid #000000b3;border-radius:2px;padding:0 3px}.quantize-control{display:none}.quantize-control input{appearance:none;border:1px solid var(--key-border);background:var(--key);width:14px;height:14px;box-shadow:var(--key-shadow);border-radius:2px;margin:0}.quantize-control input:checked{background:var(--accent);box-shadow:inset 0 1px #ffe4a8,0 2px #0a0a0a}.key-button{border:1px solid var(--key-border);background:var(--key);height:26px;color:var(--text);font:9px var(--mono);box-shadow:var(--key-shadow);border-radius:3px}.key-button:active{background:var(--key-down);box-shadow:var(--key-shadow-down)}.subtle-button{width:34px;font-size:14px}.subtle-button:disabled{cursor:default;box-shadow:var(--key-shadow);display:none}.save-state,#track-kind,.track-name small{display:none}.mixer{grid-template-columns:minmax(0,1fr);align-items:start;padding:0 0 24px;display:grid;position:relative}.track-strip{grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:8px;padding-right:60px;display:grid}.track-card{border:1px solid var(--key-border);background:#202020;border-bottom:2px solid #0000;border-radius:5px;align-items:center;min-height:44px;padding:0;display:flex;box-shadow:inset 0 1px #ffffff08}.track-card.selected{border-bottom-color:var(--track-color);background:#2b2b2b;box-shadow:inset 0 1px #ffffff1a}.track-card .track-index{color:#5d5d58;font:700 11px var(--mono)}.track-card.selected .track-index{color:var(--track-color);text-shadow:0 0 9px var(--track-color)}.track-name{text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.track-name small{display:none}.mixer-more{align-self:start}.extra-controls.mixer-more summary{border:1px solid var(--key-border);background:var(--key);height:44px;color:var(--text);font:9px var(--mono);box-shadow:var(--key-shadow-sm);border-radius:3px;align-items:center;padding:0 14px;display:flex;position:absolute;top:0;right:0}.mixer-more[open] summary{background:var(--key-down);box-shadow:var(--key-shadow-down)}.extra-controls.mixer-more{grid-column:1/-1}.extra-controls.mixer-more summary:before,.extra-controls.mixer-more[open] summary:before{content:none}.mixer-rows{background:#111;border-radius:6px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-top:12px;padding:16px;display:grid}.mix-row{grid-template-columns:minmax(0,1fr) 110px 34px;align-items:center;gap:8px;display:grid}.mix-name{color:var(--muted);font:9px var(--mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mix-row input{width:110px}.mute-button{border:1px solid var(--key-border);background:var(--key);width:26px;height:25px;color:var(--muted);font:9px var(--mono);box-shadow:var(--key-shadow-sm);border-radius:3px;padding:0}.mute-button.muted{color:var(--accent-ink);background:var(--accent);box-shadow:inset 0 1px #ffe4a8,inset 0 -2px #a9761b,0 2px #0a0a0a}.space-control{flex:0 0 110px;padding-left:18px}.workbench{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.panel{background:0 0;border:0;padding:0}.panel-heading,.sequence-heading{justify-content:space-between;align-items:center;display:flex}.eyebrow{font:10px var(--mono);color:var(--muted)}h1,h2{margin:2px 0 0}h1{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h2{font-size:19px}.text-button{color:var(--muted);background:0 0;border:0;font-size:10px}.text-button kbd{font:9px var(--mono);border:1px solid var(--key-border);color:var(--text);background:var(--key);box-shadow:var(--key-shadow-sm);border-radius:3px;padding:3px 5px}.instrument-panel{border-top:1px solid var(--line);padding:22px 0 0;position:relative}.panel-heading{position:absolute;top:30px;right:0}.fx-instrument{border-top:0;padding-top:0}.fx-instrument .panel-heading{justify-content:flex-end;position:static}.synth-controls{grid-template-columns:190px 112px 140px 140px minmax(0,1fr);align-items:center;gap:16px 20px;margin:0;display:grid}.select-control,.knob-control{font:9px var(--mono);color:var(--muted);flex-direction:column;gap:5px;min-width:0;display:flex}.select-control select{height:34px;font:10px var(--mono);border-radius:3px;padding:0 26px 0 10px}.knob-control input{width:100%;height:13px;margin:0}.knob-control output{color:#c9c9c4;font:10px var(--mono)}.octave-control{font:9px var(--mono);color:var(--muted);grid-column:auto;align-items:center;gap:9px;display:flex}.octave-control span{display:none}.octave-control button{border:1px solid var(--key-border);background:var(--key);width:25px;height:23px;color:var(--text);box-shadow:var(--key-shadow);border-radius:3px}.octave-control button:active{background:var(--key-down);box-shadow:var(--key-shadow-down);transform:translateY(1px)}.octave-control b{font:10px var(--mono);color:var(--text);text-align:center;min-width:15px}.note-bank{align-items:flex-end;gap:16px;margin-top:16px;display:flex}.note-rows{flex:1;gap:6px;min-width:0;display:grid}.note-rows,.pad-bank{background:#101010;border-radius:7px;padding:12px}.note-row{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;min-width:0;display:grid}.note-row:first-child .note-tab{justify-self:center;width:calc(50% - 3px)}.drum-pad,.note-tab,.effect-button{border:1px solid var(--key-border);background:var(--key);min-width:0;height:40px;color:var(--text);box-shadow:var(--key-shadow);touch-action:none;border-radius:3px;justify-content:center;align-items:center;gap:6px;padding:0 6px;font:500 11px system-ui,sans-serif;display:flex}.drum-pad>span{white-space:nowrap}.drum-pad small,.note-tab small,.effect-button small{color:var(--muted);font:9px var(--mono);margin-top:3px;display:block}.drum-pad.active{box-shadow:var(--key-shadow), inset 0 -2px 0 #ffffff40}.drum-pad:hover,.note-tab:hover,.effect-button:hover{background:var(--key-hover)}.drum-pad:active,.note-tab:active,.effect-button:active{background:var(--key-down);box-shadow:var(--key-shadow-down);transform:translateY(1px)}.drum-pad:before,.note-tab:before,.effect-icon{content:"";background:#514738;border-radius:50%;flex:0 0 4px;width:4px;height:4px;font-size:0;box-shadow:inset 0 1px 1px #ffffff14,0 0 0 1px #000}.drum-pad.sounding:before,.note-tab.sounding:before,.effect-button.active .effect-icon{background:#fff1c5;box-shadow:0 0 7px #fff1c5}.drum-controls{grid-template-columns:190px minmax(0,1fr);gap:16px 24px;padding-right:100px;display:grid}.pad-bank{grid-column:span 3;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.drum-reverb-control{grid-column:auto}.sequencer-panel{order:-1;min-width:0;padding:0}.sequence-heading{justify-content:flex-end;min-height:24px}.sequence-heading h2{display:none}.step-count{background:var(--display-bg);color:var(--display);font:700 10px var(--mono);border:1px solid #000000b3;border-radius:2px;padding:4px 7px}.bar-ruler{gap:0;height:24px;margin-top:10px;display:flex}.bar-label{border-left:1px solid var(--line);color:var(--muted);font:9px var(--mono);padding:3px 0 0 6px}.bar-label:first-child{border-left-color:var(--track-color)}.sequence-grid{grid-template-columns:repeat(16,minmax(14px,1fr));align-items:stretch;gap:6px;min-width:0;padding:4px 2px 9px;display:grid;overflow-x:auto}.sequence-step{border:1px solid var(--key-border);background:var(--key);width:100%;min-width:0;height:36px;box-shadow:var(--key-shadow);border-radius:3px;padding:0;transition:background .12s;position:relative;overflow:hidden}.step-led{z-index:1;pointer-events:none;background:radial-gradient(circle at 38% 32%,#7e2b1c,#451509 55%,#1e0806);border-radius:50%;width:7px;height:7px;position:absolute;top:4px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #000000b3,inset 0 -1px 1px #00000080,0 0 3px #ff3b1e33}.step-note{color:var(--text);font:8px var(--mono);white-space:nowrap;pointer-events:none;place-items:center;display:grid;position:absolute;inset:14px 1px 3px;overflow:hidden}.sequence-step:hover{background:var(--key-hover)}.sequence-step:active{background:var(--key-down);box-shadow:var(--key-shadow-down);transform:translateY(1px)}.sequence-step:nth-child(4n+1):before{content:attr(data-beat);color:#5c5c58;font:6px var(--mono);pointer-events:none;position:absolute;bottom:2px;left:3px}.sequence-step.active .step-led{background:radial-gradient(circle at 38% 32%, #fff, var(--track-color) 45%, #7a3308);box-shadow:0 0 0 1px #00000073, 0 0 5px var(--track-color), 0 0 12px var(--track-color), 0 0 20px var(--track-color)}.sequence-step.selected{box-shadow:var(--key-shadow), inset 0 0 0 1px #ffffff40}.sequence-step.playhead:after{content:"";background:var(--track-color);pointer-events:none;height:2px;position:absolute;inset:0 0 auto}.sequence-step.playhead .step-led{background:radial-gradient(circle at 38% 32%, #fff, #fff 45%, var(--track-color));box-shadow:0 0 6px #fff, 0 0 14px var(--track-color), 0 0 22px var(--track-color)}.drum-rows{flex-direction:column;gap:5px;display:flex}.drum-row{grid-template-columns:40px minmax(0,1fr);align-items:center;gap:6px;display:grid}.effect-row{grid-template-columns:64px minmax(0,1fr)}.drum-row-name{font:9px var(--mono);color:var(--muted)}.drum-row .sequence-grid{gap:6px;padding:0}.drum-row .sequence-step{height:24px}.sequence-footer{min-height:24px;color:var(--muted);justify-content:flex-end;align-items:flex-start;margin-top:4px;padding-top:0;font-size:10px;display:flex}#sequence-help{display:none}.sequence-footer:has(#note-edit.hidden){border-top:0;min-height:0;margin-top:0;padding-top:0}.note-edit{align-items:center;gap:10px;display:flex}.note-edit label{font:9px var(--mono);color:var(--muted)}.note-edit select{border-radius:3px;margin-left:6px;padding:2px 22px 2px 6px;font-size:10px}.performance-panel{background:#101010;border-radius:7px;flex-wrap:wrap;align-items:center;gap:16px 0;margin-top:24px;padding:12px;display:flex;position:relative}.performance-title{display:none}.effect-buttons{flex:1;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.effect-button{text-align:left;justify-content:flex-start}.effect-button.active,.drum-pad.sounding,.note-tab.sounding{color:var(--accent-ink);background:var(--accent);box-shadow:var(--accent-shadow)}.effect-button.active .effect-icon,.effect-button.active small,.drum-pad.sounding small,.note-tab.sounding small{color:#4a3608}.status{max-width:calc(100% - 56px);color:var(--muted);font:10px var(--mono);text-align:right;position:absolute;bottom:12px;right:28px}.status:empty{display:none}.status.recording{color:#ff8f7e}.status.playing{color:#b9d779}@keyframes pulse{50%{opacity:.25}}.track-select{text-align:left;background:0 0;border:0;align-items:center;gap:8px;width:100%;min-width:0;min-height:42px;padding:0 14px;display:flex}.track-select:focus-visible{outline:none}#shuffle-sound{height:34px;font:11px system-ui,sans-serif}.extra-controls{color:var(--muted);font:10px var(--mono);grid-column:1/-1}.extra-controls summary{cursor:pointer;width:fit-content;padding:4px 0;list-style:none}.extra-controls summary::-webkit-details-marker{display:none}.extra-controls summary:before{content:"+ "}.extra-controls[open] summary:before{content:"- "}.more-grid{background:#111;border-radius:6px;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:20px;margin-top:16px;padding:20px;display:grid}.synth-controls>.extra-controls{grid-column:1/-1}.drum-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.drum-controls>.extra-controls,.pad-bank{grid-column:1/-1}.hidden{display:none}@media (width<=1050px){.app{padding-left:20px;padding-right:20px}.topbar{gap:8px}.save-state{display:none}.synth-controls{grid-template-columns:170px 100px 120px 120px minmax(0,1fr);column-gap:16px}.panel-heading{top:auto;bottom:2px}.note-bank{padding-right:100px}.more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.performance-panel{flex-wrap:wrap;gap:12px}.performance-title{min-width:130px}.effect-button{gap:7px;padding:0 8px}.drum-pad,.note-tab,.effect-button{font-size:10px}}@media (width<=800px){.app{width:calc(100% - 24px);margin:12px auto;padding:0 16px 32px}.topbar{height:auto;min-height:70px;padding:12px 0}.track-select{gap:6px;padding:0 8px}.track-name{font-size:10px}.more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.space-control{flex-basis:88px;padding-left:12px}.sequence-grid,.drum-row .sequence-grid{gap:4px}.sequence-step{height:30px}}