*{box-sizing:border-box}html{color-scheme:dark;height:100%;background:#1c1c1c}body{margin:0;height:100dvh;overflow:hidden;background:#1c1c1c;color:#bdbdbd;font:13px/1.5 "Microsoft YaHei","PingFang SC",system-ui,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{border:1px solid transparent;background:#2e2e2e;border-radius:0;min-height:36px;padding:6px 12px;cursor:pointer}button:hover{background:#404040}button:active,button.selected{background:#505050}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:1px solid #459fe6;outline-offset:-1px}input,select,textarea{min-width:0;border:1px solid #515151;background:#1d1d1d;border-radius:0;padding:5px 8px;min-height:31px}input[type=checkbox]{width:17px;height:17px;min-height:17px;margin:0;accent-color:#298fe0}input[type=range]{padding:0;accent-color:#318fd8;min-height:25px}input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.menubar{height:42px;background:#2b2c30;display:flex;align-items:center;padding:0 10px;gap:3px;border-bottom:1px solid #252525}.menu{position:relative}.menu summary{list-style:none;cursor:pointer;padding:10px 12px;min-height:40px}.menu summary::-webkit-details-marker{display:none}.menu[open] summary{background:#3c3d41}.menu-items{position:absolute;left:0;top:40px;width:235px;background:#28292b;border:1px solid #57585c;z-index:15;box-shadow:2px 4px 10px #0008;padding:4px}.menu-items button,.menu-items>label{display:block;text-align:left;width:100%;padding:9px 12px;min-height:40px;border:0;margin:0;cursor:pointer}.menu-items>label:hover{background:#404040}.menu-items>label.check{display:flex;justify-content:space-between}.menu-items hr{border:0;border-top:1px solid #4a4a4a}.app-title{margin-left:16px;color:#d4d4d4}.app-title small{font-size:11px;color:#719bbd;margin-left:4px}#saveStatus{margin-left:auto;font-size:11px;color:#9e9e9e}#network{font-size:11px;color:#6e9dbc;margin:0 8px}.editor-layout{display:grid;grid-template-columns:30% 35% 35%;height:calc(100dvh - 90px);min-height:0}.track-pane{display:flex;flex-direction:column;position:relative;background:#282828;border-right:1px solid #1e1e1e;overflow:hidden}.track-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:3px 8px;background:#222;height:34px}.track-top select{padding:2px 5px;min-height:26px;font-size:11px;background:#252525;border-color:#3d3d3d}#tracks{display:block;flex:1;min-height:0;width:100%;touch-action:none}.track-labels{display:grid;grid-template-columns:repeat(10,1fr);height:33px;align-items:center;text-align:center;font:12px ui-monospace,monospace;color:#a5b2bc;background:#252525}.track-footer{display:flex;gap:5px;align-items:center;justify-content:space-between;background:#252525;font-size:10px;height:31px}.track-footer button{min-height:28px;font-size:11px;padding:4px 10px}.settings-pane{background:#1b1b1b;overflow:auto;border-right:1px solid #292929;overscroll-behavior:contain;scrollbar-width:thin}.settings-pane h2,.chart-info h2{font-size:13px;font-weight:400;background:#242424;margin:0;padding:7px 10px;height:34px;color:#d2d2d2}.section-content{padding:12px 17px 17px}.form-row{display:flex;align-items:center;gap:8px;margin:6px 0;min-height:31px}.form-row>label{width:62px;flex-shrink:0;color:#939393}.form-row>input,.form-row>select{flex:1;width:0}.form-row button{min-height:31px;padding:4px 10px}.form-row output{color:#388bd2;width:42px;text-align:right;font-size:11px}.division-buttons{margin-left:70px;display:flex;gap:5px;margin-top:7px;margin-bottom:17px}.division-buttons button{flex:1;padding:0 2px;min-height:25px;color:#929292;font-size:11px}.division-buttons button.active{color:#419fe9}.type-row{display:flex;align-items:center;gap:8px}.type-row>span{width:44px;flex-shrink:0;color:#858585}.tap-tools,.touch-tools{display:flex;gap:8px;flex:1}.tap-tools button,.touch-tools button{flex:1;position:relative;height:70px;padding:4px;min-width:0}.touch-tools{flex:0 1 69%}.tap-tools svg,.touch-tools svg{display:block;width:41px;height:41px;margin:0 auto 5px}.tap-tools small,.touch-tools small{position:absolute;left:3px;bottom:2px;color:#969696;font:11px ui-monospace,monospace}.tap-tools button>span,.touch-tools button>span{display:block;text-align:right;font:11px ui-monospace,monospace;color:#aaa}.modifiers{display:flex;flex-wrap:wrap;gap:5px 16px;margin:14px 0}.check{display:flex;align-items:center;gap:9px;color:#929292;font-size:12px;min-height:27px}.modifiers .check{flex:1;white-space:nowrap}.operation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-left:52px}.operation-grid button{min-height:62px;font-size:12px;padding:5px}.operation-grid small{display:block;text-align:left;font:10px ui-monospace,monospace;color:#969696;margin-top:7px}#toolHint,#emptyNotes{font-size:11px;color:#929292;margin:13px 0}.notes-list{display:flex;flex-wrap:wrap;gap:5px}.note-row{min-height:31px;font:11px ui-monospace,monospace;padding:4px 8px;border:1px solid #383838}.note-row.selected{border-color:#448ec8}.note-row span{font-size:9px;margin-left:8px;color:#939393}.button-row{display:flex;gap:8px}.button-row button{flex:1}.position-picker{margin-top:13px;color:#999}.position-picker summary{cursor:pointer;padding:7px 0;font-size:12px}.position-picker #rangeLabel{float:right}#sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:8px 0}#sequence button{padding:4px;font:10px ui-monospace,monospace;display:flex;gap:5px;justify-content:space-between;min-height:32px}#sequence button.active{background:#464646;border:1px solid #3e91d2}#sequence .glyph{color:#e58cc0}#sequence .timing{color:#828e98}.preview-pane{display:flex;flex-direction:column;overflow:hidden;background:#1c1c1c;min-width:0}.playfield-area{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;padding:6px}#field{display:block;width:100%;height:auto;max-height:calc(100% - 36px);aspect-ratio:1;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none}.preview-status{display:flex;gap:14px;position:absolute;bottom:40px;left:15px;font-size:10px;color:#666}.lane-buttons{display:flex;gap:3px;margin-top:auto;align-self:stretch;justify-content:center;padding-top:4px}.lane-buttons button{width:10%;min-height:28px;padding:2px;color:#7a7a7a;background:transparent;font:11px ui-monospace,monospace}.lane-buttons button:hover{background:#343434}.chart-info{flex:0 0 auto;background:#1d1d1d}.chart-info .section-content{padding:5px 13px 9px}.chart-info .form-row{margin:4px 0}.chart-info .form-row>label{width:46px;font-size:12px}.chart-info #level{max-width:68px}.chart-info p{font-size:10px;color:#828282;margin:3px 0 0 54px;overflow-wrap:anywhere}#warnings{margin:7px 0;padding:7px;border:1px solid #6c5137;color:#d9b78c;font-size:11px;max-height:80px;overflow:auto;white-space:pre-line}.transport{display:flex;align-items:center;gap:8px;height:48px;background:#2b2c30;padding:0 12px;border-top:1px solid #303135}.transport button{background:transparent;color:#b0b0b0;min-width:36px;font-size:22px;padding:2px 8px}.transport input[type=range]{flex:1;min-width:40px}.transport #timeLabel{font:11px ui-monospace,monospace;color:#359ce9;min-width:85px}.transport select{font-size:11px;width:70px;background:#303136;border-color:#303136}.transport #reset{margin-right:calc(30vw - 174px);font-size:17px}dialog{color:#bcbcbc;background:#242424;border:1px solid #686868;border-radius:0;width:min(700px,94vw);max-height:90dvh;padding:20px;box-shadow:0 5px 35px #0009}dialog::backdrop{background:#0009}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h3{font-size:16px;font-weight:400;margin:0 0 10px}.dialog-heading button{background:transparent;min-width:38px}dialog p,dialog li{font-size:12px;line-height:1.9}dialog textarea{width:100%;height:45dvh;font:13px/1.8 ui-monospace,monospace;resize:vertical;margin:10px 0}.file-button{display:block;padding:10px;background:#333;cursor:pointer}#projectList{display:grid;gap:8px;margin:15px 0}#projectList button{display:flex;justify-content:space-between;text-align:left}#projectList small{color:#8c8c8c}#textError{color:#e49b81}#toast{position:fixed;z-index:30;bottom:64px;left:50%;transform:translateX(-50%);max-width:90vw;padding:12px 20px;background:#343a3e;border:1px solid #697680;color:#ddd;box-shadow:0 4px 15px #0008;font-size:12px}
[hidden]{display:none!important}
.home-return{font-size:12px;background:#35373b;min-height:32px;padding:4px 9px;margin-right:6px}.audio-actions{display:flex;gap:6px;margin:7px 0 4px 54px}.audio-actions button{font-size:10px;min-height:31px;padding:4px 8px;flex:1}
.library-screen{height:100dvh;background:#1d1d1f;overflow:auto}.library-header{min-height:66px;display:flex;align-items:center;gap:12px;padding:12px 4vw;border-bottom:1px solid #3a3a3d;background:#2b2c30}.library-header>div{flex:1;display:flex;gap:24px;align-items:center}.library-header strong{font-weight:500;font-size:19px;color:#eee}.library-header strong small{font-size:12px;color:#6fa5d0}.library-header span{font-size:12px;color:#999}.library-header button{font-size:12px}.library-main{max-width:1320px;padding:40px 4vw;margin:auto}.library-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:28px}.library-heading h1{font-size:25px;font-weight:500;color:#e1e1e1;margin:0 0 8px}.library-heading p{font-size:12px;color:#999;margin:0}.library-actions{display:flex;gap:8px;flex-wrap:wrap}.library-actions button,.library-actions .file-button{min-height:43px;padding:10px 15px;font-size:12px;margin:0}.library-actions .primary{background:#326a94;color:#e9f6ff;border-color:#588aae}.library-toolbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid #3a3a3a;padding:0 0 14px}.library-tabs{display:flex;gap:6px;margin-right:auto}.library-tabs button{background:transparent;color:#929292}.library-tabs button.active{background:#383b3f;color:#d8ebf8}.library-tabs span{font-size:10px;background:#1f2023;padding:2px 5px;margin-left:6px}.library-toolbar input{width:230px}.library-toolbar select{width:122px}.library-list{display:grid;margin-top:8px}.project-entry{display:flex;align-items:center;border-bottom:1px solid #353535;padding:12px 0;gap:16px}.project-open{display:flex;align-items:center;gap:15px;flex:1;text-align:left;background:transparent;padding:6px 8px;min-width:0}.project-cover{width:54px;height:54px;flex-shrink:0;background:#32363b;color:#79aacb;display:flex;align-items:center;justify-content:center;font-size:27px;border:1px solid #45484d}.project-cover img{width:100%;height:100%;object-fit:cover}.project-description{display:grid;gap:5px;min-width:0}.project-description strong{font-size:15px;font-weight:450;color:#e0e0e0;overflow-wrap:anywhere}.project-description small{font-size:11px;color:#909090;overflow-wrap:anywhere}.project-entry-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.project-entry-actions button{font-size:11px;min-height:35px;padding:5px 9px}.project-entry-actions button:last-child{color:#b7a3a0}.library-empty{text-align:center;padding:70px 15px;color:#777;border-bottom:1px solid #333}.library-empty h2{font-size:20px;font-weight:400;color:#aaa}.library-empty p{font-size:12px}.library-bottom{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:28px}.library-bottom>div{display:flex;gap:8px}.library-bottom button,.library-bottom .file-button{font-size:12px;margin:0;min-height:39px;padding:9px 13px}.library-bottom p{font-size:11px;color:#98abae;max-width:350px}.library-footnote{font-size:11px;color:#777;line-height:1.9;margin-top:23px}.library-footnote a{color:#8eabc0;margin-left:8px}#audioDialog{max-width:520px}#audioImportName{display:block;overflow-wrap:anywhere;font-size:14px;color:#ddd;margin:10px 0}#audioProgress{width:100%;height:16px;accent-color:#4a9cd7}#audioImportError{border:1px solid #835e43;padding:12px;color:#e6b999;white-space:pre-wrap}.tap-tools img,.touch-tools img{display:block;width:41px;height:41px;object-fit:contain;margin:0 auto 5px}
@media(max-width:850px){.library-main{padding-top:25px}.library-heading{display:block}.library-actions{margin-top:20px}.project-entry{align-items:flex-start;flex-wrap:wrap;gap:6px}.project-entry-actions{margin-left:77px;justify-content:flex-start}.library-header>div{display:block}.library-header span{display:block;margin-top:3px}.library-header #resumeProject{max-width:150px}.library-toolbar{flex-wrap:wrap}.library-tabs{width:100%}.library-toolbar input{flex:1;width:0}.library-bottom{align-items:flex-start;flex-direction:column;gap:6px}.audio-actions{margin-left:0}.library-header strong{font-size:16px}}
@media(pointer:coarse){.project-entry-actions button,.library-tabs button{min-height:44px}.library-toolbar input,.library-toolbar select{min-height:42px}}
@media(pointer:coarse){button{min-height:42px}.menu summary{min-height:42px}.division-buttons button{min-height:32px}.tap-tools button,.touch-tools button{height:76px}.check{min-height:33px}input,select{min-height:36px}.track-labels{height:38px}.lane-buttons button{min-height:34px}.track-footer{height:38px}.track-footer button{min-height:36px}}
@media(max-width:1100px){.app-title{font-size:11px;margin-left:7px}.section-content{padding:9px 10px 13px}.type-row>span{width:30px}.tap-tools,.touch-tools{gap:5px}.operation-grid{margin-left:38px;gap:6px}.form-row>label{width:49px}.division-buttons{margin-left:57px}.modifiers{gap:5px 8px}.modifiers .check{font-size:10px}.chart-info .section-content{padding:4px 9px}.chart-info .form-row>label{width:33px}.chart-info p{margin-left:41px}#saveStatus{font-size:10px}#network{display:none}}
@media(max-width:850px) and (orientation:portrait){.editor-layout{grid-template-columns:36% 64%;grid-template-rows:55% 45%}.track-pane{grid-column:1;grid-row:1/3}.preview-pane{grid-column:2;grid-row:1;overflow:auto;display:grid;grid-template-columns:55% 45%;align-items:start}.settings-pane{grid-column:2;grid-row:2;border-top:1px solid #404040}.playfield-area{height:100%;padding:4px;justify-content:center}.chart-info{height:100%;overflow:auto}.chart-info .form-row{display:block}.chart-info .form-row>input,.chart-info .form-row>select{width:100%;min-height:30px}.chart-info .form-row>label{display:block;width:auto;font-size:10px}.chart-info p{margin-left:0}.preview-status{display:none}.lane-buttons{flex-wrap:wrap}.lane-buttons button{width:20%}#field{width:100%}.operation-grid button{min-height:52px}.transport #reset{margin-right:0}.app-title{display:none}}
@media(max-width:550px){.menubar{padding:0 2px}.menu summary{padding:10px 8px;font-size:12px}#saveStatus{font-size:9px}.editor-layout{grid-template-columns:32% 68%}.preview-pane{display:flex;overflow:auto}.playfield-area{min-height:240px}.chart-info{flex:none;height:auto}.track-top>span{display:none}.track-top select{width:100%}.track-labels{font-size:9px}.track-labels span:last-child{font-size:8px}.track-footer span{font-size:9px}.track-footer button{padding:2px 4px}.operation-grid{margin-left:0}.type-row>span{display:none}.section-content{padding:8px}.transport{gap:4px;padding:0 5px}.transport #timeLabel{font-size:9px;min-width:72px}.transport select{width:57px}.transport button{min-width:27px;padding:0 3px}.division-buttons{margin-left:0}.tap-tools svg,.touch-tools svg{width:34px;height:34px}.tap-tools small,.touch-tools small{font-size:9px}.tap-tools button>span,.touch-tools button>span{font-size:9px}}