@charset "UTF-8";
:root{color-scheme:light;--bg:#f3f3f3;--panel:#f9f9f9;--panel2:#fff;--line:#d2d2d2;--text:#202020;--muted:#6e6e6e;--accent:#0078d4;--accent-dim:#e4eff8;--layer-width:264px;--row-height:32px;font-family:"WeblySleek UI","Segoe UI","Microsoft YaHei",sans-serif;font-size:12px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}button:disabled{opacity:.32;cursor:default}button:hover:not(:disabled){background:#e5e5e5}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:1px solid var(--accent);outline-offset:1px}button.active{background:#e6e6e6;color:var(--accent)}input,select,textarea{background:#fff;border:1px solid #b8b8b8;border-radius:2px;color:var(--text);padding:4px 5px;min-width:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}select{cursor:pointer}input[type=range]{accent-color:var(--accent);padding:0;height:14px;border:0;background:transparent;cursor:pointer}input[type=checkbox]{accent-color:var(--accent)}[hidden],.is-hidden{display:none!important}i[data-icon]{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}img{user-select:none;-webkit-user-drag:none}
.app{height:100dvh;min-height:500px;min-width:800px;display:flex;flex-direction:column;overflow:hidden}.menu-bar{height:20px;display:flex;align-items:center;flex-shrink:0;padding:0 3px;gap:8px}.main-menu{height:20px;display:flex;align-items:stretch;flex-shrink:0}.main-menu button{font-size:11px;padding:0 8px;gap:0;border-radius:2px}.main-menu button span{display:none}.document-tab{height:19px;margin-left:auto;max-width:50%;padding:0 5px;gap:6px;color:#555;font-size:10px;justify-content:flex-end;overflow:hidden}.document-tab #projectTitle{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.document-tab small{color:#777;font-size:10px;flex-shrink:0}.local-label{color:#888;font-size:9px;padding-right:6px;flex-shrink:0}.main-toolbar{height:32px;display:flex;align-items:center;padding:0 5px;flex-shrink:0;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid #e1e1e1}.main-toolbar::-webkit-scrollbar{display:none}.toolbar-group{display:flex;align-items:center;flex-shrink:0;height:25px}.toolbar-group button,.main-toolbar .custom-instrument{height:25px;width:25px;padding:0;flex-shrink:0;border-radius:2px;position:relative}.toolbar-group button>img{width:25px;height:25px;object-fit:contain;pointer-events:none}.toolbar-group button>img.layer-tool-image{width:16px;height:16px}.toolbar-group button>svg{width:18px;height:18px}.toolbar-group .active::after{content:"";position:absolute;bottom:0;left:5px;right:5px;height:2px;background:var(--accent);border-radius:1px}.toolbar-separator{width:1px;height:19px;background:#c8c8c8;margin:0 5px;flex-shrink:0}.play-button{color:#202020}.editor-toolbar{display:flex;align-items:center;flex-shrink:0}.master-volume{display:flex;align-items:center;gap:5px;margin-left:8px;padding-right:5px;flex-shrink:0;color:#777;font-size:9px}.master-volume>span:first-child{font-size:19px;color:#555}.master-volume input{width:68px}.master-volume #volumeLabel{width:27px}.instrument-section{display:flex;align-items:center;gap:0;flex-shrink:0;height:25px}.instrument-rack{display:flex;align-items:center;gap:0;height:25px}.instrument-card{height:25px;width:25px;min-width:25px;padding:0;border:0;position:relative;background:transparent;border-radius:2px;flex:none}.instrument-card .inst-symbol,.instrument-card>span:last-child,.instrument-card::after{display:none}.instrument-card::before{content:"";display:block;width:16px;height:16px;background:center/16px 16px no-repeat url("assets/original/instrument-glyphs/16-custom-base.png");image-rendering:pixelated}.instrument-card.active{background:#e3eaf0;box-shadow:inset 0 -2px var(--accent)}.instrument-card img{width:16px;height:16px;image-rendering:pixelated}.custom-instrument img{width:16px;height:16px}
.instrument-card[data-instrument="0"]::before{background-image:url("assets/original/instrument-glyphs/00-harp.png")}.instrument-card[data-instrument="1"]::before{background-image:url("assets/original/instrument-glyphs/01-double-bass.png")}.instrument-card[data-instrument="2"]::before{background-image:url("assets/original/instrument-glyphs/02-bass-drum.png")}.instrument-card[data-instrument="3"]::before{background-image:url("assets/original/instrument-glyphs/03-snare-drum.png")}.instrument-card[data-instrument="4"]::before{background-image:url("assets/original/instrument-glyphs/04-click.png")}.instrument-card[data-instrument="5"]::before{background-image:url("assets/original/instrument-glyphs/05-guitar.png")}.instrument-card[data-instrument="6"]::before{background-image:url("assets/original/instrument-glyphs/06-flute.png")}.instrument-card[data-instrument="7"]::before{background-image:url("assets/original/instrument-glyphs/07-bell.png")}.instrument-card[data-instrument="8"]::before{background-image:url("assets/original/instrument-glyphs/08-chime.png")}.instrument-card[data-instrument="9"]::before{background-image:url("assets/original/instrument-glyphs/09-xylophone.png")}.instrument-card[data-instrument="10"]::before{background-image:url("assets/original/instrument-glyphs/10-iron-xylophone.png")}.instrument-card[data-instrument="11"]::before{background-image:url("assets/original/instrument-glyphs/11-cow-bell.png")}.instrument-card[data-instrument="12"]::before{background-image:url("assets/original/instrument-glyphs/12-didgeridoo.png")}.instrument-card[data-instrument="13"]::before{background-image:url("assets/original/instrument-glyphs/13-bit.png")}.instrument-card[data-instrument="14"]::before{background-image:url("assets/original/instrument-glyphs/14-banjo.png")}.instrument-card[data-instrument="15"]::before{background-image:url("assets/original/instrument-glyphs/15-pling.png")}
.workspace{min-height:110px;flex:1;display:flex;padding-bottom:21px}.editor-panel{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.timeline-layout{position:relative;display:grid;grid-template-columns:var(--layer-width) minmax(0,1fr);grid-template-rows:32px minmax(0,1fr);min-height:0;flex:1;border-top:2px solid transparent}.layer-heading{display:flex;align-items:center;gap:5px;padding:0 5px 0 8px;background:var(--bg);border-right:1px solid #b9b9b9}.time-display{display:flex;flex-direction:column;min-width:77px;font-variant-numeric:tabular-nums;line-height:1.1}.time-display strong{font-size:14px;font-weight:600}.time-display small{font-size:9px;color:#777;margin-left:7px}.time-display em{font-style:normal}.numeric-control{display:flex;align-items:center;gap:2px;white-space:nowrap}.numeric-control input{padding:2px 3px;font-size:11px;height:22px;text-align:center;width:43px;border-color:#c4c4c4;background:#f9f9f9}.numeric-control small{font-size:9px;color:#666}.signature-control input{width:23px}.layer-count{margin-left:auto;font-size:9px;color:#777}.layer-count b{font-weight:400}.layer-heading>button{height:20px;width:20px;padding:0;flex-shrink:0}.layer-heading>button img{width:16px;height:16px}.ruler-container{overflow:hidden;background:#f3f3f3;position:relative;cursor:crosshair;border-top:1px solid #c9c9c9;border-bottom:1px solid #b9b9b9}.ruler-container>canvas{width:100%;height:100%;display:block}.grid-options{position:absolute;top:3px;right:3px;display:flex;gap:2px;align-items:center;font-size:9px;color:#666;background:#f3f3f3e8;border:1px solid #d4d4d4;border-radius:2px;padding:1px 2px;height:24px}.grid-options label{display:flex;gap:4px;align-items:center;margin-right:3px}.grid-options select{font-size:9px;padding:1px 2px;width:55px;height:18px;border-color:#ccc;background:#fafafa}.grid-options button{height:18px;width:19px;font-size:13px;padding:0}.grid-options>span{min-width:30px;text-align:center;font-variant-numeric:tabular-nums}.grid-options .small-button{font-size:9px;width:auto;padding:0 3px}.layer-pane{overflow:hidden;position:relative;background:#f3f3f3;border-right:1px solid #b9b9b9}.layer-row{height:32px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #dfdfdf;padding:3px 5px 3px 8px;cursor:pointer;position:relative;background:#f3f3f3}.layer-row.selected{background:#e5edf4}.layer-row.selected::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}.layer-index{font-size:9px;color:#888;min-width:16px;font-variant-numeric:tabular-nums}.layer-body{flex:1;min-width:0}.layer-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:#292929;line-height:1.2;max-width:140px}.layer-meta{font-size:8px;color:#777;display:block;margin-top:1px;line-height:1.2}.layer-controls{display:flex;gap:2px;align-items:center;flex-shrink:0}.layer-controls button{width:17px;height:17px;padding:0;border:1px solid #c9c9c9;border-radius:2px;font-size:8px;font-weight:600;color:#666}.layer-controls .mute.active{color:#ac3c22;background:#f6dfd6;border-color:#d6b6a8}.layer-controls .solo.active{color:#0067af;background:#dcebf7;border-color:#a6c5df}.layer-reverb,.reverb-percent{font-size:8px;min-width:28px;color:#5f6e78;text-align:right;font-variant-numeric:tabular-nums}.grid-scroll{overflow:auto;position:relative;background:#f9f9f9;scrollbar-color:#b6b6b6 #f0f0f0;scrollbar-width:auto;overscroll-behavior:contain;outline:none;z-index:1}.grid-spacer{pointer-events:none;min-height:100%;min-width:100%}.grid-canvas{position:absolute;top:34px;left:var(--layer-width);pointer-events:none;z-index:2}.overview{display:none}
.keyboard-panel{flex-shrink:0;height:132px;position:relative;background:var(--bg);padding:0 0 4px}.keyboard-heading{position:absolute;top:-19px;left:8px;right:8px;height:19px;display:flex;align-items:center;gap:12px;font-size:9px;color:#666;z-index:3}.keyboard-heading #activeInstrumentLabel{max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.demo-picker{display:flex;align-items:center}.demo-picker select{font-size:9px;padding:0 4px;height:17px;max-width:190px;border-color:#cecece;background:#f7f7f7}.octave-controls{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:9px;color:#777}.octave-controls button{height:17px;width:18px;border:1px solid #ccc;border-radius:2px;padding:0;font-size:8px}.piano{height:128px;position:relative;display:flex;justify-content:center;overflow:hidden;user-select:none;touch-action:none}.piano-inner{position:relative;display:flex;width:max-content!important;height:128px;flex:none;margin:0 auto}.piano-white{width:39px;min-width:39px;flex:none;height:121px;position:relative;align-items:flex-end;justify-content:center;padding:0 0 19px;color:#333;font-size:9px;border:0;border-radius:0;background:transparent url("assets/original/piano-normal/06-frame-6.png") left top/40px 121px no-repeat}.piano-white:hover:not(:disabled){background-color:#dbeeff}.piano-white.active{background-color:#bbdef7;background-blend-mode:multiply;color:#005a9e}.piano-black{height:71px;position:absolute;top:-7px;z-index:1;border:0;border-radius:0;background:transparent url("assets/original/piano-normal/07-frame-7.png") center top/40px 121px no-repeat;color:white;font-size:8px;align-items:flex-start;padding-top:24px;box-shadow:none}.piano-black:hover:not(:disabled){background-color:#cae3f6}.piano-black.active{background-color:#74a9d0;background-blend-mode:multiply}.status-bar{height:24px;flex-shrink:0;display:flex;align-items:center;gap:0;border-top:1px solid #a8a8a8;font-size:10px;color:#333;padding:0 5px;overflow:hidden;white-space:nowrap}.status-bar>span{overflow:hidden;text-overflow:ellipsis;padding:0 8px;border-right:1px solid #c9c9c9;flex-shrink:0;line-height:16px}.status-bar #statusText{padding-left:0;min-width:80px;max-width:35%;flex:1;flex-shrink:1}.status-bar #projectCaption{display:none}.status-bar #saveState{font-size:9px;color:#777}.status-bar #engineStats{margin-left:auto;border-right:0;font-size:9px;color:#666;max-width:32%;flex-shrink:1}
.inspector{position:fixed;top:83px;right:17px;width:227px;max-height:calc(100dvh - 120px);overflow:auto;background:#f9f9f9;border:1px solid #bbb;border-radius:4px;padding:12px;box-shadow:0 6px 22px #0003;z-index:15}.inspector-heading{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ddd;padding-bottom:7px;font-size:12px}.inspector-heading strong{font-weight:600}.inspector-heading #closePropertiesBtn{margin-left:auto;font-size:18px;height:20px;width:20px;padding:0}.count-badge{font-size:10px;color:#777}.inspector-hint{color:#777;font-size:10px;line-height:1.5;margin:10px 0}.pitch-preview{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding:2px 0 10px}.pitch-preview>span{font-size:22px;color:#0067b5}.pitch-stepper{display:flex;align-items:center;gap:4px}.pitch-stepper button{height:23px;width:23px;border:1px solid #bbb;background:#f3f3f3;border-radius:2px}.pitch-stepper input{width:34px;font-size:11px;text-align:center}.inspector-field{display:block;font-size:11px;color:#555;margin:10px 0}.inspector-field>span{float:right;color:#777;font-size:10px}.inspector-field>input[type=range],.inspector-field>select{display:block;width:100%;margin-top:5px}.inspector-field>select{font-size:10px}.inline-field{display:flex;align-items:center;justify-content:space-between}.inline-field>div{display:flex;align-items:center;gap:4px;font-size:9px;color:#777}.inline-field input{width:47px;text-align:right;font-size:11px}.outline-button{border:1px solid #b5b5b5;border-radius:2px;color:#333;background:#f5f5f5;width:100%;height:26px;font-size:11px}.selection-actions{display:flex;gap:6px;margin-top:8px}.selection-actions button{border:1px solid #ccc;background:#f3f3f3;font-size:10px;height:24px;flex:1;border-radius:2px}
.boot{padding:40px;font-size:12px;color:#555}.boot strong{font-size:18px;font-weight:500}.toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);max-width:min(90vw,700px);background:#f9f9f9;color:#252525;border:1px solid #b5b5b5;box-shadow:0 4px 14px #0002;border-radius:4px;font-size:12px;padding:9px 14px;z-index:30;line-height:1.5}.toast.error{background:#fff4f0;border-color:#d4a797;color:#8c301e}dialog{background:#f9f9f9;color:var(--text);border:1px solid #b6b6b6;border-radius:6px;padding:21px;width:min(540px,92vw);max-height:85vh;box-shadow:0 12px 45px #0004}dialog::backdrop{background:#0004}.modal-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.modal-heading h2{font-size:17px;margin:0;font-weight:500}.modal-heading button{width:25px;height:25px;padding:4px;border-radius:2px;color:#555}.modal-body{line-height:1.6;color:#4f4f4f;font-size:12px}.modal-body p{margin:9px 0}.modal-body label{display:block;font-size:11px;margin:11px 0;color:#555}.modal-body label>input,.modal-body label>textarea{display:block;width:100%;margin-top:5px}.modal-body textarea{resize:vertical;min-height:70px}.modal-body .inline-label{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-body .inline-label>input{width:95px;margin-top:0}.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.primary-button{background:#0078d4;color:white;padding:6px 17px;border:1px solid #0069ba;border-radius:3px}.primary-button:hover:not(:disabled){background:#006bbd}.secondary-button{border:1px solid #bbb;background:#f3f3f3;color:#333;padding:6px 15px;border-radius:3px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}.help-grid>div{border-bottom:1px solid #ddd;padding:6px 0;display:flex;justify-content:space-between;gap:8px;font-size:10px}kbd{background:#f0f0f0;padding:0 4px;border:1px solid #ccc;border-radius:2px;font-size:10px;color:#555}.export-choice{border:1px solid #ddd;background:#fff;display:flex;justify-content:flex-start;text-align:left;width:100%;padding:11px;margin:7px 0;border-radius:3px;gap:12px}.export-choice>svg,.export-choice>i{color:var(--accent);width:20px;height:20px;flex-shrink:0}.export-choice strong{display:block;font-size:13px;font-weight:600;color:#333}.export-choice small{display:block;color:#777;font-size:10px;margin-top:2px}.drop-overlay{position:fixed;inset:7px;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f3f8fdee;border:2px dashed #0078d4;border-radius:5px;color:#0067af}.drop-overlay>img{width:64px;height:64px}.drop-overlay p{font-size:12px}.drop-overlay h2{font-size:22px;font-weight:500}.layer-context-note{font-size:10px;color:#777}.custom-sample-status{padding:7px;border:1px solid #ccc;border-radius:3px;font-size:11px;margin-top:10px}.audio-progress{margin:8px 0;color:#0067af;font-size:11px}.engine-badge{font-size:9px;color:#777}.performance-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.performance-grid>div{padding:7px;background:#fff;border:1px solid #ddd;border-radius:3px}
.grid-canvas{top:32px}.instrument-card:has(>img)::before{display:none}
@media(max-width:1050px){.document-tab small,.local-label{display:none}.main-toolbar{padding-left:3px}.main-menu button{padding:0 7px}.status-bar #saveState{display:none}.grid-options label{font-size:0}.grid-options label select{font-size:9px}}
@media(max-width:799px){:root{--layer-width:190px}.app{min-width:0;min-height:580px}.menu-bar{gap:3px}.main-menu button{font-size:10px;padding:0 6px}.document-tab{max-width:32%;font-size:9px}.layer-heading{gap:3px;padding-left:5px}.time-display{min-width:59px}.time-display strong{font-size:12px}.time-display small{font-size:8px;margin-left:0}.numeric-control input{width:32px;font-size:10px}.numeric-control small{font-size:8px}.signature-control,.layer-count{display:none}.layer-heading>button{margin-left:auto}.layer-index{min-width:12px;font-size:8px}.layer-name{font-size:9px;max-width:91px}.layer-meta{font-size:7px}.layer-row{padding-left:5px;gap:4px}.layer-controls button{width:15px;height:16px;font-size:7px}.keyboard-heading{left:5px;right:5px;gap:5px}.keyboard-heading #activeInstrumentLabel{max-width:100px;font-size:8px}.demo-picker select{font-size:8px;max-width:115px}.octave-controls{gap:3px;font-size:8px}.octave-controls button{width:15px}.grid-options{top:3px}.grid-options label,.grid-options #zoomLabel,.grid-options #fitBtn{display:none}.status-bar{font-size:9px}.status-bar #statusText{max-width:55%}.status-bar #songStats{display:none}.status-bar #engineStats{max-width:44%;font-size:8px}.inspector{right:8px;top:72px;width:min(227px,calc(100vw - 16px))}.help-grid{grid-template-columns:1fr}}

.feature-actions{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.feature-actions>button,.backup-list>button{border:1px solid #bbb;padding:7px 10px;border-radius:3px;background:var(--bg,#f3f3f3)}.modal-body select{display:block;width:100%;padding:5px;margin-top:4px;max-width:100%}.preferences-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.backup-list{max-height:290px;overflow:auto}.backup-list>button{display:block;width:100%;text-align:left;margin:5px 0}.backup-list small{display:block;color:#777}.midi-device{padding:10px;border:1px solid #ccc;margin:8px 0}.midi-device>small{margin-left:8px}.midi-device label{display:inline-flex;gap:8px;align-items:center;max-width:100%;margin-right:12px}.midi-device select{width:160px}#recordMidiBtn.active{background:#ffd7d7;outline:1px solid #b00}.modal-body table{width:100%;border-collapse:collapse}.modal-body th,.modal-body td{border-bottom:1px solid #ccc;text-align:left;padding:5px}.hide-layer-pane{--layer-width:0px!important}.hide-layer-pane .layer-pane,.hide-layer-pane .layer-heading{visibility:hidden;overflow:hidden}.hide-piano .keyboard-panel{display:none}.theme-dark{--bg:#252525;--text:#eee;background:#202020;color:#eee}.theme-dark .menu-bar,.theme-dark .main-toolbar,.theme-dark .layer-heading,.theme-dark .layer-pane,.theme-dark .layer-row,.theme-dark .keyboard-panel,.theme-dark .status-bar,.theme-dark .native-menu,.theme-dark .ruler-container,.theme-dark .grid-options{background:#292929;color:#eee;border-color:#555}.theme-dark .layer-row.selected,.theme-dark button:hover:not(:disabled){background:#34495c}.theme-dark input,.theme-dark select,.theme-dark textarea,.theme-dark dialog,.theme-dark .inspector,.theme-dark .native-menu,.theme-dark .export-choice,.theme-dark .performance-grid>div{background:#262626;color:#eee;border-color:#666}.theme-dark .main-toolbar img,.theme-dark .native-menu-item>img{filter:invert(1)}.theme-dark .layer-name,.theme-dark .modal-body,.theme-dark .modal-body label,.theme-dark .export-choice strong{color:#ddd}.theme-dark .primary-button{background:#0078d4;color:white}.theme-dark .secondary-button{background:#333;color:#ddd}.theme-dark .toast{background:#333;color:#eee}.theme-dark .layer-meta,.theme-dark .layer-index{color:#aaa}.theme-dark .grid-scroll{background:#202020}.theme-dark .menu-bar button,.theme-dark .main-menu button,.theme-dark .keyboard-heading{color:#eee}

.player-mode #editMenuBtn,.player-mode .editor-toolbar,.player-mode #recordMidiBtn,.player-mode #newBtn,.player-mode #customInstrumentBtn,.player-mode #propertiesBtn,.player-mode #addLayerBtn{display:none!important}
.player-mode #gridScroll,.player-mode #layerStack{pointer-events:none}