*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}#root{width:100%;height:100%}:root{--bg-primary:#1e1e2e;--bg-secondary:#252537;--bg-tertiary:#2b3043;--bg-hover:#2a2f45;--bg-active:#353b52;--text-primary:#f8f8f2;--text-secondary:#c0caf5;--text-dim:#8b92af;--text-muted:#5b6078;--border-color:#44475a;--border-dim:#2a2d3f;--border-bright:#7aa2f7;--active-bg:#31374f;--active-border:#7aa2f7;--active-glow:#7aa2f773;--playback-position-bg:#3b2240;--playback-position-border:#ff79c6;--playback-position-active-bg:#4b2b52;--playback-position-active-border:#ff92d0;--hover-bg:#2a2f45;--hover-glow:#7aa2f740;--button-bg:#2b3043;--button-border:#44475a;--button-text:#e2e8ff;--button-hover:#343a52;--button-active:#3b425b;--debug-btn-bg:#237d8dea;--debug-btn-bg-2:#094e7c;--debug-btn-border:#4b6b86cc;--debug-btn-active-bg:#5b2f7b;--debug-btn-active-bg-2:#7c3aed;--debug-btn-active-border:#a855f7;--debug-btn-active-glow:#a855f799;--reset-btn-bg:#5b1f24;--reset-btn-bg-2:#75303b91;--reset-btn-border:#ac3e3e;--play-song-idle-bg:#263a32;--play-song-idle-border:#3a8265;--play-pattern-idle-bg:#3a3024;--play-pattern-idle-border:#91663c;--stop-idle-bg:#3a2327;--stop-idle-border:#a4535a;--play-song-bg:#1f4730;--play-song-border:#34d399;--play-song-glow:#34d39999;--play-pattern-bg:#4b3415;--play-pattern-border:#f59e0b;--play-pattern-glow:#f59e0b99;--stop-bg:#4b1f24;--stop-border:#f97373;--stop-glow:#f8717199;--piano-white:#e9ecf4;--piano-black:#151521;--piano-pressed:#7aa2f7;--piano-shadow:#0009;--envelope-bar:#7aa2f7;--envelope-glow:#7aa2f799;--volume-bar:#7aa2f7;--track-cell-active-bg:#51376f;--track-a-bg:#582537;--track-b-bg:#255837;--track-c-bg:#25256a;--track-inactive-bg:#324569;--track-active-bg:#182833;--track-active-border:#8678b9;--shadow-small:0 1px 2px #000000b3;--shadow-medium:0 4px 8px #000c;--shadow-large:0 10px 18px #000000e6;--shadow-inset:inset 0 1px 2px #000000b3;--glow-primary:0 0 10px #7aa2f799;--glow-secondary:0 0 6px #7aa2f759;--logo-outline:#64646499;--transparent:#0000;--font-mono:"JetBrains Mono","Fira Code","SF Mono","Monaco","Inconsolata","Roboto Mono","Source Code Pro","Consolas",monospace;--midi-input-enabled-bg:#1f4730;--midi-output-enabled-bg:#4b3415;--midi-both-enabled-bg:#3730a3}.light{--bg-primary:#f8fafc;--bg-secondary:#e2e8f0;--bg-tertiary:#cbd5e0;--bg-hover:#edf2f7;--bg-active:#bee3f8;--text-primary:#1a202c;--text-secondary:#2d3748;--text-dim:#4a5568;--text-muted:#718096;--border-color:#2d3748;--border-dim:#a0aec0;--border-bright:#1a202c;--active-bg:#fef3c7;--active-border:#f59e0b;--active-glow:#f59e0b4d;--playback-position-bg:#fee2e2;--playback-position-border:#ef4444;--playback-position-active-bg:#fecaca;--playback-position-active-border:#f87171;--hover-bg:#edf2f7;--hover-glow:#f59e0b1a;--button-bg:#fff;--button-border:#2d3748;--button-text:#1a202c;--button-hover:#f7fafc;--button-active:#fef3c7;--debug-btn-bg:#fef9c3;--debug-btn-bg-2:#fef3c7;--debug-btn-border:#cc9d12;--debug-btn-active-bg:#e9d5ff;--debug-btn-active-bg-2:#ddd6fe;--debug-btn-active-border:#7c3aed;--debug-btn-active-glow:#7c3aed73;--reset-btn-bg:#fee2e2;--reset-btn-bg-2:#fecaca;--reset-btn-border:#b91c1c;--play-song-idle-bg:#e8f8ed;--play-song-idle-border:#6cc896;--play-pattern-idle-bg:#fff3e6;--play-pattern-idle-border:#ea9a3a;--stop-idle-bg:#ffe6ea;--stop-idle-border:#f97373;--play-song-bg:#bbf7d0;--play-song-border:#16a34a;--play-song-glow:#16a34a73;--play-pattern-bg:#fed7aa;--play-pattern-border:#c05621;--play-pattern-glow:#c0562173;--stop-bg:#fecaca;--stop-border:#e11d48;--stop-glow:#e11d4873;--piano-white:#fff;--piano-black:#2d3748;--piano-pressed:#f59e0b;--piano-shadow:#0003;--envelope-bar:#f59e0b;--envelope-glow:#f59e0b80;--volume-bar:#f59e0b;--track-cell-active-bg:#f5fffc;--track-a-bg:#ffe8f0;--track-b-bg:#e2fff0;--track-c-bg:#e2e8ff;--track-inactive-bg:#fef3c7;--track-active-bg:#dfd7b4;--track-active-border:#f59e0b;--shadow-small:0 1px 2px #0000001a;--shadow-medium:0 4px 6px #00000026;--shadow-large:0 10px 15px #0003;--shadow-inset:inset 0 1px 2px #0000001a;--logo-outline:#96969699;--glow-primary:0 0 8px #f59e0b4d;--glow-secondary:0 0 4px #f59e0b26;--midi-input-enabled-bg:#729e85;--midi-output-enabled-bg:#9c8970;--midi-both-enabled-bg:#d4d2f1}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}input[type=text]{-webkit-user-select:text;user-select:text}body{font-family:var(--font-mono);background-color:var(--bg-primary);color:var(--text-primary);font-size:12px;line-height:1.2;transition:background-color 1.5s,color 1.5s;overflow:hidden}.app{background-color:var(--bg-primary);width:100vw;height:100vh;color:var(--text-primary);font-family:var(--font-mono);box-shadow:var(--shadow-large);flex-direction:column;font-size:12px;transition:background-color .3s,color 1s,border-color 1.5s,box-shadow .5s;display:flex}.header-panel{background:linear-gradient(135deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-medium);justify-content:space-between;align-items:center;padding:2px 14px;display:flex;position:relative}.header-panel:after{content:"";background:linear-gradient(90deg,transparent,var(--border-color),transparent);height:1px;position:absolute;bottom:0;left:0;right:0}.header-left{align-items:center;gap:8px;display:flex}.logo{cursor:pointer;text-shadow:-1px -1px 0 var(--logo-outline),1px -1px 0 var(--logo-outline),-1px 1px 0 var(--logo-outline),1px 1px 0 var(--logo-outline);-webkit-text-stroke:.5px var(--logo-outline);font-size:16px}.title{font-size:14px;font-weight:700}.header-center{text-align:center;flex:1}.song-title{color:var(--text-secondary);font-size:12px}.header-right{align-items:center;gap:8px;display:flex}.theme-toggle{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:0 0;padding:2px 6px;font-size:12px}.theme-toggle:hover{background-color:var(--hover-bg)}.octave-selection{background-color:var(--bg-secondary);justify-content:center;gap:1px;margin:2px;padding:1px;display:flex}.octave-selection.active{border-bottom-color:var(--active-border);box-shadow:0 0 6px var(--active-glow)}.octave-button{background-color:var(--button-bg);border:1px solid var(--button-border);width:20px;height:20px;color:var(--button-text);font-family:var(--font-mono);cursor:pointer;justify-content:center;align-items:center;margin-left:1px;margin-right:1px;font-size:10px;display:flex}.octave-button:hover{background-color:var(--button-hover)}.octave-button.active{background-color:var(--active-bg);border-color:var(--active-border);color:var(--text-primary)}.command-panel{background:linear-gradient(180deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-small);flex-direction:column;gap:2px;padding:6px;display:flex}.command-panel.active{border-bottom-color:var(--active-border);box-shadow:var(--shadow-medium),var(--glow-primary)}.command-row{justify-content:center;gap:4px;display:flex}.command-btn{background:linear-gradient(135deg,var(--button-bg)0%,var(--bg-hover)100%);border:1px solid var(--button-border);color:var(--button-text);cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--shadow-small);border-radius:2px;outline:none;padding:4px 8px;font-size:10px;font-weight:500;transition:all .5s;position:relative;overflow:hidden}.command-btn.play-song-btn{background:linear-gradient(135deg,var(--play-song-idle-bg)0%,var(--button-bg)100%);border-color:var(--play-song-idle-border)}.command-btn.play-pattern-btn{background:linear-gradient(135deg,var(--play-pattern-idle-bg)0%,var(--button-bg)100%);border-color:var(--play-pattern-idle-border)}.command-btn.stop-btn{background:linear-gradient(135deg,var(--stop-idle-bg)0%,var(--button-bg)100%);border-color:var(--stop-idle-border)}.command-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.command-btn:hover{background:linear-gradient(135deg,var(--button-hover)0%,var(--button-active)100%);border-color:var(--border-bright);box-shadow:var(--shadow-medium),var(--glow-secondary);transform:translateY(-1px)}.command-btn:hover:before{left:100%}.command-btn:active{box-shadow:var(--shadow-inset);transform:translateY(0)}.command-btn:focus-visible{background:linear-gradient(135deg,var(--active-bg)0%,var(--button-active)100%);border-color:var(--active-border);color:var(--text-primary);box-shadow:var(--shadow-medium),var(--glow-primary)}.command-btn.playing,.command-btn.active{background-color:var(--active-bg);border-color:var(--active-border);color:var(--text-primary);box-shadow:var(--shadow-medium),var(--glow-primary)}.command-btn.play-song-btn.playing,.command-btn.play-song-btn.active{background:linear-gradient(135deg,var(--play-song-bg)0%,var(--bg-active)100%);border-color:var(--play-song-border);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 8px var(--play-song-glow)}.command-btn.play-pattern-btn.playing,.command-btn.play-pattern-btn.active{background:linear-gradient(135deg,var(--play-pattern-bg)0%,var(--bg-active)100%);border-color:var(--play-pattern-border);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 8px var(--play-pattern-glow)}.command-btn.stop-btn.playing,.command-btn.stop-btn.active{background:linear-gradient(135deg,var(--stop-bg)0%,var(--bg-active)100%);border-color:var(--stop-border);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 8px var(--stop-glow)}.command-btn.debug-btn{background:linear-gradient(135deg,var(--debug-btn-bg)0%,var(--debug-btn-bg-2)100%);border-color:var(--debug-btn-border)}.command-btn.debug-btn:hover{background:linear-gradient(135deg,var(--debug-btn-bg-2)0%,var(--debug-btn-bg)100%);border-color:var(--debug-btn-border);box-shadow:var(--shadow-medium),var(--debug-btn-active-glow)}.command-btn.debug-btn.active{background:linear-gradient(135deg,var(--debug-btn-active-bg)0%,var(--debug-btn-active-bg-2)100%);border-color:var(--debug-btn-active-border);color:var(--text-primary);box-shadow:var(--shadow-medium),var(--debug-btn-active-glow)}.command-btn.reset-btn{background:linear-gradient(135deg,var(--reset-btn-bg)0%,var(--reset-btn-bg-2)100%);border-color:var(--reset-btn-border)}.command-btn.reset-btn:hover{background:linear-gradient(135deg,var(--reset-btn-bg-2)0%,var(--reset-btn-bg)100%);border-color:var(--reset-btn-border)}.command-btn.midi-btn{min-width:56px}.command-btn.midi-btn.midi-disabled{background:linear-gradient(135deg,var(--bg-tertiary)0%,var(--bg-secondary)100%);border-color:var(--border-bright);color:var(--text-secondary)}.command-btn.midi-btn.midi-input-enabled{background:linear-gradient(135deg,var(--midi-input-enabled-bg)0%,var(--bg-active)100%);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 6px #34d3998c;border-color:#34d399}.command-btn.midi-btn.midi-output-enabled{background:linear-gradient(135deg,var(--midi-output-enabled-bg)0%,var(--bg-active)100%);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 6px #f59e0b8c;border-color:#f59e0b}.command-btn.midi-btn.midi-both-enabled{background:linear-gradient(135deg,var(--midi-both-enabled-bg)0%,var(--bg-active)100%);color:var(--text-primary);box-shadow:var(--shadow-medium),0 0 8px #a855f7b3;border-color:#a855f7}.modal-backdrop{z-index:1000;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog{background-color:var(--bg-secondary);border:2px solid var(--border-color);box-shadow:var(--shadow-large);min-width:260px;max-width:360px;padding:12px}.modal-dialog.changelog-modal{flex-direction:column;width:80vw;max-width:720px;height:80vh;max-height:80vh;display:flex}.modal-dialog.download-modal{flex-direction:column;width:60vw;max-width:540px;height:50vh;max-height:50vh;display:flex}.modal-dialog.instrument-type-warning-modal{min-width:340px;max-width:468px}.modal-dialog.midi-modal{flex-direction:column;width:90vw;max-width:90vw;height:90vh;max-height:90vh;display:flex}.modal-body.midi-modal-body{flex-direction:column;flex:1;gap:8px;display:flex;overflow:hidden}.midi-warning{border:1px solid var(--border-color);color:var(--text-primary);background-color:#7f1d1d40;padding:6px 8px;font-size:10px}.midi-io-columns{flex:1;align-items:stretch;gap:16px;min-height:0;display:flex}.midi-io-column{flex:1;grid-template-rows:auto auto 1fr;gap:8px;min-width:0;min-height:0;display:grid}.midi-checkbox-group{flex-direction:column;gap:4px;padding-left:2px;display:flex}.midi-top-row{justify-content:flex-start;align-items:center;gap:16px;display:flex}.midi-checkbox{align-items:center;gap:6px;font-size:10px;display:flex}.midi-device-row{gap:16px;display:flex}.midi-device-column{flex-direction:column;flex:none;gap:4px;display:flex}.midi-label{color:var(--text-secondary);font-size:10px}.midi-select{background-color:var(--bg-tertiary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);font-family:var(--font-mono);padding:2px 4px;font-size:10px}.midi-select:disabled{opacity:.6}.midi-monitors{flex:1;gap:8px;min-height:0;display:flex}.midi-monitor-panel{border:1px solid var(--border-color);background-color:var(--bg-secondary);flex-direction:column;flex:auto;min-height:0;display:flex}.midi-monitor-title{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:6px;padding:4px 6px;font-size:10px;font-weight:700;display:flex}.midi-monitor-copy-btn{background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--button-text);font-family:var(--font-mono);text-transform:uppercase;cursor:pointer;padding:3px 6px 2px;font-size:9px}.midi-monitor-copy-btn:disabled{opacity:.5;cursor:default}.midi-monitor-header{color:var(--text-secondary);border-bottom:1px solid var(--border-color);padding:2px 4px;font-size:9px;display:flex}.midi-monitor-body{flex:1;overflow:hidden scroll}.midi-monitor-body::-webkit-scrollbar{width:8px}.midi-monitor-body::-webkit-scrollbar-track{background-color:#00000040}.midi-monitor-body::-webkit-scrollbar-thumb{background-color:#ffffff40}.midi-monitor-row{border-bottom:1px solid #0003;padding:2px 4px;font-size:9px;display:flex}.midi-col{white-space:nowrap;text-overflow:ellipsis;padding-right:4px;overflow:hidden}.midi-col.time{width:96px}.midi-col.data{flex:1.4}.midi-col.device{flex:1}.midi-col.channel{text-align:center;width:32px}.midi-col.type,.midi-col.note{flex:.8}.midi-col.value{text-align:right;width:48px}.modal-actions.midi-actions{justify-content:space-between;margin-top:8px;display:flex}.midi-actions-left,.midi-actions-right{gap:6px;display:flex}.modal-title{text-align:center;margin-bottom:18px;font-size:12px;font-weight:700}.modal-body{color:var(--text-secondary);margin-bottom:12px;font-size:10px;line-height:1.2rem}.modal-body.changelog-modal-body,.modal-body.download-modal-body{flex:1;overflow:hidden auto}.download-list{margin:0;padding:0;list-style:none}.download-list li+li{margin-top:4px}.download-link{color:var(--text-secondary);text-decoration:none}.download-link:hover{color:var(--text-primary);text-decoration:underline}.modal-body.changelog-modal-body h1,.modal-body.changelog-modal-body h2{margin-top:0;margin-bottom:1.2rem}.modal-body.changelog-modal-body p{margin-bottom:.8rem}.modal-body.changelog-modal-body ul,.modal-body.changelog-modal-body ol{margin-bottom:.8rem;margin-left:1.4rem}.modal-body.changelog-modal-body li{margin-bottom:.4rem}.modal-actions{justify-content:flex-end;gap:6px;display:flex}.main-content{flex:1;gap:4px;padding:4px;display:flex;overflow:hidden}.left-column,.middle-column,.right-column{flex-direction:column;gap:4px;display:flex}.left-column{flex:2}.middle-column{flex:3;min-height:0}.right-column{flex:1.6;min-height:0}.position-block{background:linear-gradient(180deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border:2px solid var(--border-color);width:42px;height:100%;box-shadow:var(--shadow-medium);border-radius:3px;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.position-header{font-family:var(--font-mono);color:var(--text-primary);text-align:center;background:linear-gradient(180deg,var(--bg-tertiary)0%,var(--bg-secondary)100%);text-shadow:0 1px 2px #00000080;box-sizing:border-box;flex-shrink:0;justify-content:center;align-items:center;height:25px;min-height:25px;max-height:25px;padding:4px 2px 6px;font-size:10px;font-weight:700;display:flex}.position-content{direction:rtl;flex:1;overflow-y:scroll}.position-number{height:14px;min-height:14px;max-height:14px;font-family:var(--font-mono);color:var(--text-dim);box-sizing:border-box;cursor:pointer;direction:ltr;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:1px 0 0;font-size:10px;line-height:10px;display:flex}.position-number.current{background-color:var(--active-bg);color:var(--text-primary);font-weight:700}.left-column-content{flex-direction:row;gap:2px;height:100%;display:flex}.tracks-container{flex-direction:column;flex:1;min-height:0;display:flex}.tracks-row{flex-direction:row;flex:1;gap:2px;min-height:0;display:flex}.track-panel{background:linear-gradient(180deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border:2px solid var(--border-color);cursor:pointer;box-shadow:var(--shadow-medium);border-radius:3px;flex-direction:column;flex:1;min-height:0;padding:4px;display:flex;position:relative;overflow:hidden}.track-panel.active{border-color:var(--active-border);box-shadow:var(--shadow-medium),var(--glow-primary);background:linear-gradient(180deg,var(--bg-active)0%,var(--bg-secondary)100%)}.track-panel:hover{border-color:var(--border-bright);box-shadow:var(--shadow-large),var(--glow-secondary)}.track-panel.disabled{background:linear-gradient(180deg,var(--bg-tertiary)0%,var(--bg-secondary)100%);border-color:var(--border-dim);opacity:.7}.track-panel.track-a{background-color:var(--track-a-bg);background:linear-gradient(180deg,var(--track-a-bg)30%,var(--bg-tertiary)80%)}.track-panel.track-b{background-color:var(--track-b-bg);background:linear-gradient(180deg,var(--track-b-bg)30%,var(--bg-tertiary)80%)}.track-panel.track-c{background-color:var(--track-c-bg);background:linear-gradient(180deg,var(--track-c-bg)30%,var(--bg-tertiary)80%)}.track-panel.disabled .track-header,.track-panel.disabled .note-data,.track-panel.disabled .track-footer{color:var(--text-muted)}.track-header{font-family:var(--font-mono);color:var(--text-primary);text-align:center;background:linear-gradient(180deg,var(--bg-tertiary)0%,var(--bg-secondary)100%);text-shadow:0 1px 2px #00000080;box-sizing:border-box;flex-shrink:0;justify-content:center;align-items:center;height:20px;min-height:20px;max-height:20px;margin-bottom:1px;padding:2px 4px 4px;font-size:10px;font-weight:700;display:flex}.track-panel .track-header{justify-content:space-between;padding:4px 4px 4px 20px}.track-header-title{text-align:left;flex:1;padding-left:8px}.track-header-volume{text-align:right;min-width:6ch;font-size:9px}.track-header.target-track{background:linear-gradient(180deg,var(--active-bg)0%,var(--bg-secondary)100%);box-shadow:var(--glow-primary);color:var(--text-secondary)}.track-content{flex:1;font-family:Courier New,monospace;overflow-y:hidden}.track-content::-webkit-scrollbar{width:0;height:0}.track-content{scrollbar-width:none}.track-line{cursor:pointer;border:0 #0000;gap:8px;padding:1px 2px;display:flex}.track-line:hover{background-color:var(--hover-bg)}.track-line.current{background-color:var(--track-inactive-bg)}.track-panel.active .track-line.current{background-color:var(--track-active-bg);border:1px solid var(--track-active-border)}.beat-line{position:relative}.beat-line:before{content:"";background-color:var(--text-dim);width:2px;position:absolute;top:0;bottom:0;left:0}.track-line{height:14px;min-height:14px;max-height:14px;font-family:var(--font-mono);white-space:nowrap;box-sizing:border-box;align-items:center;margin:0;padding:0 2px;font-size:10px;line-height:10px;display:flex;overflow:hidden}.line-number{color:var(--text-dim);text-align:right;width:20px}.note-data{text-align:left;flex:1;align-items:center;gap:8px;height:100%;padding-left:1rem;display:flex}.note-text{box-sizing:border-box;align-items:center;min-width:10ch;height:100%;padding:1px 2px 0 4px;display:flex}.note-text.active{background-color:var(--track-cell-active-bg);color:var(--text-primary)}.volume-data{text-align:center;width:14px;color:var(--text-secondary);box-sizing:border-box;justify-content:center;align-items:center;height:100%;padding-top:1px;padding-left:1px;padding-right:0;display:flex}.volume-data.active{color:var(--text-primary);background-color:var(--track-cell-active-bg)}.track-panel.active .track-line.current .note-text{padding-left:3px}.track-panel.active .track-line.current .volume-data{padding-left:0}.track-footer{border-top:1px solid var(--border-color);color:var(--text-secondary);margin-top:4px;padding-top:2px;font-size:10px}.envelope-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;outline:none;flex-shrink:0;padding:4px}.envelope-panel.active{background-color:var(--active-bg);border-color:var(--active-border)}.envelope-header{text-align:center;margin-bottom:4px;padding-bottom:2px;font-weight:700}.envelope-content{flex-direction:column;gap:4px;display:flex}.envelope-graph{align-items:flex-end;gap:1px;height:60px;margin-bottom:4px;display:flex;position:relative}.envelope-bar{background-color:var(--envelope-bar);cursor:pointer;opacity:.7;flex:1;min-height:2px}.envelope-bar:hover,.envelope-bar.current{opacity:1}.envelope-bar.sustain{box-shadow:inset 0 0 4px #000c}.envelope-sustain-dot{background-color:#000;border-radius:50%;width:6px;height:6px;position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%)}.value-display{color:var(--text-secondary);font-size:8px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.envelope-values{text-align:center;gap:1px;font-size:8px;display:flex}.envelope-value{cursor:pointer;border:1px solid var(--transparent);flex:1;padding:2px 1px 0}.envelope-value:hover{background-color:var(--hover-bg)}.envelope-value.current{background-color:var(--active-bg);border:1px solid var(--active-border);padding:2px 1px 0}.envelope-footer{border-top:1px solid var(--border-color);color:var(--text-secondary);justify-content:space-between;margin-top:4px;padding-top:2px;font-size:10px;display:flex}.notes-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);min-height:0;box-shadow:var(--shadow-small);cursor:pointer;flex:1;padding:4px;overflow:hidden}.notes-content{height:100%;color:var(--text-secondary);opacity:1;-webkit-user-select:none;user-select:none;font-size:9px;transition:opacity .8s ease-in-out;overflow:hidden}.notes-content.notes-hidden{opacity:0}.notes-content p{margin-bottom:4px}.mode-panel{min-height:40px}.mode-content{flex-wrap:wrap;gap:2px;display:flex}.envelope-panel.mode .envelope-content{gap:2px}.envelope-panel.mode .envelope-graph{height:20px}.mode-cell{background-color:var(--bg-tertiary);border:1px solid var(--border-color);cursor:pointer;text-align:center;min-width:30px;padding:2px 4px;font-size:8px}.mode-cell:hover{background-color:var(--hover-bg)}.mode-cell.current{background-color:var(--active-bg);border-color:var(--active-border)}.song-info-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;padding:4px}.song-info-panel.active{background-color:var(--active-bg);border-color:var(--active-border)}.song-info-header{text-align:center;margin-bottom:4px;padding-bottom:2px;font-weight:700}.song-info-content{flex-direction:column;gap:4px;padding-left:10px;padding-right:10px;display:flex}.song-info-grid{gap:4px;display:flex}.song-info-column{flex-direction:column;flex:1;gap:4px;display:flex}.song-info-column-right{align-items:flex-end}.info-field{align-items:center;gap:4px;display:flex}.info-field label{width:60px;color:var(--text-secondary);font-size:10px}.info-input{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-mono);flex:1;padding:2px 4px;font-size:10px}.info-input:focus{border-color:var(--active-border);background-color:var(--active-bg);outline:none}.light .info-input:focus{background-color:#f4f4f4}.playlist-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;outline:none;flex-direction:column;flex:1;min-height:0;padding:4px;display:flex}.playlist-panel.active{background-color:var(--active-bg);border-color:var(--active-border)}.playlist-header{text-align:center;margin-bottom:4px;padding-bottom:2px;font-weight:700}.playlist-content{flex-direction:column;flex:1;min-height:0;display:flex}.playlist-header-row{color:var(--text-secondary);gap:8px;margin-bottom:2px;padding-bottom:2px;font-size:10px;display:flex}.line-number-header{text-align:right;flex:0 0 23px;width:20px}.playlist-header-row .track-header{text-align:center;flex:1}.playlist-move-header{text-align:center;flex:0 0 45px;width:32px}.playlist-line .line-number{flex:0 0 20px}.playlist-move-buttons{flex:0 0 32px}.playlist-lines{flex:1;min-height:0;overflow-y:scroll}.playlist-line{cursor:pointer;gap:8px;padding:1px 2px;font-size:10px;display:flex}.playlist-line .line-number{padding-top:1px}.playlist-line:hover{background-color:var(--hover-bg)}.playlist-line.current{background-color:var(--active-bg);border:1px solid var(--active-border)}.playlist-line.playback-position{background-color:var(--playback-position-bg);border:1px solid var(--playback-position-border)}.playlist-line.playback-position.current{background-color:var(--playback-position-active-bg);border:1px solid var(--playback-position-active-border)}.track-pattern{text-align:center;cursor:pointer;flex:1;padding:1px 2px}.track-pattern:hover{background-color:var(--hover-bg)}.track-pattern.current-track{background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--button-text)}.playlist-move-buttons{flex-direction:row;justify-content:center;align-items:center;gap:2px;display:inline-flex}.playlist-move-buttons button{background-color:var(--button-bg);border:1px solid var(--button-border);width:16px;height:14px;color:var(--button-text);cursor:pointer;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.playlist-move-buttons button:disabled{opacity:.4;cursor:default}.playlist-move-buttons button:not(:disabled):hover{background-color:var(--button-hover)}.pattern-input{text-align:center;background-color:var(--input-bg);border:1px solid var(--input-border);color:var(--input-text);outline:none;flex:1;padding:1px 2px;font-size:10px}.pattern-input:focus{border-color:var(--active-border);background-color:var(--active-bg)}.playlist-footer{border-top:1px solid var(--border-color);justify-content:space-between;align-items:center;margin-top:4px;padding-top:2px;font-size:10px;display:flex}.playlist-info{color:var(--text-secondary)}.playlist-controls{gap:4px;display:flex}.nav-btn{background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--button-text);cursor:pointer;padding:2px 6px;font-family:Courier New,monospace;font-size:8px}.nav-btn:hover:not(:disabled){background-color:var(--button-hover)}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.instrument-list-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);cursor:pointer;outline:none;flex-direction:column;flex:1;min-height:0;padding:4px;display:flex}.instrument-list-panel.active{background-color:var(--active-bg);border-color:var(--active-border)}.instrument-list-header{text-align:center;margin-bottom:4px;padding-bottom:2px;font-weight:700}.instrument-list-content{flex-direction:column;flex:1;min-height:0;display:flex}.instrument-header-row{color:var(--text-secondary);border-bottom:1px solid var(--border-color);gap:8px;margin-bottom:2px;padding-bottom:2px;font-size:10px;display:flex}.instrument-id-header{text-align:center;width:30px}.instrument-name-header{text-align:left;flex:1}.instrument-items{flex:1;min-height:0;overflow-y:scroll}.instrument-item{cursor:pointer;gap:8px;padding:1px 2px;font-size:10px;display:flex}.instrument-item:hover{background-color:var(--hover-bg)}.instrument-item.current{background-color:var(--active-bg);box-shadow:0 0 8px var(--active-glow);gap:5px}.instrument-item.current .instrument-id,.instrument-item.current .instrument-name{color:var(--text-primary);font-weight:700}.instrument-item.current .instrument-id{padding-top:3px}.instrument-item.focused{background-color:var(--bg-active);box-shadow:0 0 0 1px var(--active-border)inset}.instrument-actions{align-items:center;gap:4px;display:inline-flex}.instrument-midi-btn{box-sizing:border-box;min-width:30px;height:14px;font-size:8px;font-family:var(--font-mono);background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--button-text);cursor:pointer;padding:0 4px}.instrument-midi-btn.instrument-midi-disabled{background-color:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-secondary)}.instrument-midi-btn.instrument-midi-enabled{background:linear-gradient(135deg,var(--midi-output-enabled-bg)0%,var(--bg-active)100%);color:var(--text-primary);box-shadow:var(--shadow-small),0 0 4px #f59e0bb3;border-color:#f59e0b}.instrument-midi-btn:disabled{opacity:.5;cursor:default}.instrument-id{text-align:center;width:30px;color:var(--text-secondary)}.instrument-name{text-align:left;flex:1}.instrument-name-input{background-color:var(--bg-secondary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);font-family:var(--font-mono);padding:1px 2px;font-size:10px}.instrument-name-input:focus{border-color:var(--active-border);background-color:var(--bg-hover);outline:none}.bottom-panels{gap:4px;display:flex}.dump-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);flex:2;padding:4px}.dump-header{text-align:center;cursor:pointer;margin-bottom:4px;padding-bottom:2px;font-size:10px;font-weight:700}.dump-content{font-family:Courier New,monospace;font-size:8px}.register-grid{grid-template-columns:repeat(2,1fr);gap:2px 32px;display:grid}.register-item{justify-content:space-between;padding:1px 2px;display:flex}.register-name{color:var(--text-secondary)}.register-value{color:var(--text-primary);cursor:pointer;font-weight:700}.eq-panel{background-color:var(--bg-secondary);border:1px solid var(--border-color);flex:1;padding:4px}.eq-header{text-align:center;margin-bottom:4px;padding-bottom:2px;font-size:10px;font-weight:700}.eq-content{justify-content:center;align-items:flex-end;height:60px;display:flex}.volume-bars{align-items:flex-end;gap:8px;display:flex}.volume-bar-container{flex-direction:column;align-items:center;gap:2px;display:flex}.volume-bar{background-color:var(--bg-tertiary);border:1px solid var(--border-color);width:12px;height:50px;position:relative}.volume-fill{background-color:var(--volume-bar);transition:height 50ms;position:absolute;bottom:0;left:0;right:0}.volume-bar.muted{background-color:var(--playback-position-bg);border-color:var(--playback-position-border)}.channel-label.muted{color:var(--text-muted)}.channel-label{color:var(--text-secondary);font-size:8px}.piano-keyboard-container{background:linear-gradient(180deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border-top:2px solid var(--border-color);box-shadow:var(--shadow-medium);padding:4px}.octave-selector{align-items:center;gap:12px;margin-bottom:8px;display:flex}.octave-header{color:var(--text-secondary);text-shadow:0 1px 2px #00000080;width:40px;font-size:10px;font-weight:700}.octave-buttons{gap:2px;display:flex}.octave-btn{background:linear-gradient(135deg,var(--button-bg)0%,var(--bg-hover)100%);border:1px solid var(--button-border);width:20px;height:20px;color:var(--button-text);font-family:var(--font-mono);cursor:pointer;box-shadow:var(--shadow-small);border-radius:2px;font-size:10px;transition:all .2s}.octave-btn:hover{background:linear-gradient(135deg,var(--button-hover)0%,var(--button-active)100%);border-color:var(--border-bright);box-shadow:var(--shadow-medium)}.octave-btn.current{background:linear-gradient(135deg,var(--active-bg)0%,var(--button-active)100%);border-color:var(--active-border);color:var(--text-primary);box-shadow:var(--shadow-medium),var(--glow-secondary)}.piano-keyboard{cursor:pointer;border:1px solid var(--border-color);background:linear-gradient(#1a1a1a 0%,#2a2a2a 100%);border-radius:4px;outline:none;padding:7px;box-shadow:inset 0 2px 4px #00000080}.piano-keyboard.active{border-color:var(--active-border);box-shadow:inset 0 2px 4px #00000080,var(--glow-primary)}.piano-keys{background:linear-gradient(#0a0a0a 0%,#1a1a1a 100%);border-radius:3px;width:fit-content;height:80px;margin:0 auto;padding:4px;display:flex;position:relative;box-shadow:inset 0 1px 2px #000c}.piano-key{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.piano-key.white-key{background:linear-gradient(#fff 0%,#f0f0f0 50%,#e0e0e0 100%);border:1px solid #ccc;border-radius:0 0 3px 3px;width:24px;height:72px;margin-right:1px;box-shadow:0 4px 6px #0000004d,inset 0 1px #fffc}.piano-key.white-key:hover{background:linear-gradient(#f0f0f0 0%,#e0e0e0 50%,#d0d0d0 100%)}.piano-key.white-key.pressed{background:linear-gradient(#e0e0e0 0%,#d0d0d0 50%,silver 100%);transform:translateY(1px);box-shadow:0 2px 3px #0000004d,inset 0 1px 2px #0000004d}.piano-key.black-key{z-index:2;background:linear-gradient(#2a2a2a 0%,#1a1a1a 50%,#0a0a0a 100%);border:1px solid #000;border-radius:0 0 2px 2px;width:16px;height:49px;margin-left:-8px;box-shadow:0 3px 5px #00000080,inset 0 1px #ffffff1a}.piano-key.black-key:hover{background:linear-gradient(#3a3a3a 0%,#2a2a2a 50%,#1a1a1a 100%)}.piano-key.black-key.pressed{background:linear-gradient(#1a1a1a 0%,#0a0a0a 50%,#000 100%);height:50px;box-shadow:0 1px 2px #00000080,inset 0 1px 2px #00000080}.key-label{color:#666;pointer-events:none;text-shadow:0 1px 1px #fffc;font-size:7px;font-weight:700;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.piano-key .base-key-dot{pointer-events:none;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.piano-key.white-key .base-key-dot{background:#000}.piano-key.black-key .base-key-dot{background:#fff}.hidden{display:none!important}.text-center{text-align:center}.text-right{text-align:right}.mode-bar{-webkit-user-select:none;user-select:none;height:20px;justify-content:center!important;align-items:center!important;display:flex!important;position:relative!important}.envelope-graph.centered{position:relative}.envelope-graph.centered .neutral-line{background-color:var(--text-secondary);opacity:.5;z-index:1;height:1px;position:absolute;top:50%;left:0;right:0}.envelope-bar.centered{background-color:var(--envelope-bar);z-index:2;width:3.125%;height:3px;position:absolute;bottom:auto}.envelope-bar.centered:hover{background-color:var(--envelope-bar-hover)}.envelope-bar.centered.current{background-color:var(--accent-color);box-shadow:0 0 4px var(--accent-color)}.mode-emoji{opacity:.8;pointer-events:none;font-size:10px;line-height:1}.mode-bar:hover .mode-emoji{opacity:1}.mode-bar.current .mode-emoji{opacity:1;transform:scale(1.1)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--border-color)}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}:focus{outline:1px solid var(--active-border);outline-offset:1px}