:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172017;background:#f6f7f4;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;height:100vh;overflow:hidden}button,input,select{font:inherit}select{padding-right:28px;text-overflow:ellipsis}.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{min-height:72px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid #d9ded2;background:#fcfdfa}.brand{display:flex;align-items:center;gap:12px;min-width:240px}.brand svg{color:#2e6f53}h1,h2,h3,p{margin:0}.brand h1{font-size:18px;font-weight:750}.brand span,.surface-header p{color:#61705f;font-size:13px}.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.hidden-file{display:none}.icon-button{height:38px;border:1px solid #2e6f53;border-radius:7px;background:#2e6f53;color:#fff;display:inline-flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer}.icon-button.secondary{background:#fff;color:#203025;border-color:#cad4c7}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr);overflow:hidden}.control-panel{min-height:0;border-right:1px solid #d9ded2;background:#eef2ea;padding:14px;overflow-y:auto}.panel-title{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#2b513f}.panel-title h3{font-size:13px;text-transform:uppercase;letter-spacing:0}.control{display:grid;gap:6px;margin-bottom:12px;color:#354536;font-size:13px;font-weight:650}.control input,.control select{width:100%;min-height:36px;border:1px solid #c4cebf;border-radius:7px;background:#fff;color:#172017;padding:7px 9px}.control input[type=range]{padding:0}.control-heading{color:#354536;font-size:13px;font-weight:750;margin:16px 0 8px}.rhythm-picker,.playback-picker{border-top:1px solid #d9ded2;margin-top:12px;padding-top:4px}.rhythm-picker label,.playback-picker label{min-height:28px;display:flex;align-items:center;gap:7px;color:#354536;font-size:14px}.rhythm-picker label span{margin-left:auto;color:#6b7568;font-variant-numeric:tabular-nums}.toggle-row{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px;font-weight:650}.composer-surface{min-width:0;min-height:0;padding:16px;overflow-y:auto;overflow-x:hidden;scroll-padding-top:96px}.surface-header{position:sticky;top:-16px;z-index:12;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-16px -16px 12px;padding:16px;border-bottom:1px solid #dfe6da;background:#f6f7f4f5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.surface-header h2{font-size:20px}.surface-heading{flex:1 1 auto;min-width:0}.create-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:#1f2f2473;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.create-card{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;background:#fff;border:1px solid #d6e0d2;border-radius:14px;padding:24px;box-shadow:0 24px 60px #1f3c2247}.create-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:24px;line-height:1;color:#7a857a;cursor:pointer}.create-title{font-size:22px;margin:0 0 4px;color:#233027}.create-sub{margin:0 0 16px;color:#61705f;font-size:14px}.create-choices{display:grid;gap:10px}.create-choice{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border:1px solid #d6e0d2;border-radius:10px;background:#f7faf5;cursor:pointer;transition:border-color .12s ease,background .12s ease,transform 80ms ease}.create-choice:hover:not(:disabled){border-color:#8bb38a;background:#eef6ea;transform:translateY(-1px)}.create-choice:disabled{opacity:.55;cursor:default}.create-choice-title{font-weight:700;color:#233027;font-size:15px}.create-choice-desc{color:#61705f;font-size:13px}.create-skip{margin-top:14px;border:0;background:transparent;color:#5a7d57;cursor:pointer;font-size:14px}.create-form{display:grid;gap:12px;margin:8px 0 18px}.create-form .control{display:flex;flex-direction:column;gap:4px}.create-form .control>span{font-size:13px;color:#4d5a4b;font-weight:600}.create-form input[type=text],.create-form input[type=number],.create-form select{padding:8px 10px;border:1px solid #cdd8c9;border-radius:8px;font-size:14px}.create-check{flex-direction:row!important;align-items:center;gap:8px}.create-check>span{font-weight:500}.create-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}.create-card.midi-preview{width:min(720px,100%)}.engine-toggle{display:inline-flex;border:1px solid #cdd8c8;border-radius:8px;overflow:hidden}.engine-option{border:0;background:#f3f7f1;color:#51604f;font-size:13px;font-weight:600;padding:6px 12px;cursor:pointer}.engine-option.active{background:#3a7a3a;color:#fff}.midi-preview-file{margin:0 0 12px;font-size:13px;color:#6a756a;word-break:break-all}.midi-preview-summary{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;font-size:13px;color:#324034}.midi-preview-summary b{color:#233027}.midi-preview-table{border:1px solid #e0e7dc;border-radius:10px;overflow:hidden;margin-bottom:12px}.midi-preview-row{display:grid;grid-template-columns:1.4fr 1.2fr .6fr .5fr 1fr 1fr;gap:8px;align-items:center;padding:7px 12px;font-size:13px;border-top:1px solid #eef2ec}.midi-preview-row:first-child{border-top:0}.midi-preview-header{background:#f3f7f1;font-weight:600;font-size:12px;color:#5a655b;text-transform:uppercase;letter-spacing:.03em}.midi-preview-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-lane-tag{font-weight:600;font-size:12px;padding:2px 8px;border-radius:999px;text-align:center;background:#eef2ec;color:#5a655b}.midi-lane-tag.lane-melody{background:#e3f0ff;color:#1f5f9e}.midi-lane-tag.lane-melody_b{background:#e8f3e6;color:#3a7a3a}.midi-lane-tag.lane-chords{background:#f3e9ff;color:#7a4fb0}.midi-lane-tag.lane-drums{background:#ffeede;color:#b06a2c}.midi-preview-note{font-size:13px;color:#51604f;margin:0 0 16px;line-height:1.45}.song-name-input{font-size:20px;font-weight:700;color:#233027;border:1px solid transparent;border-radius:6px;background:transparent;padding:2px 6px;margin:0 0 2px -6px;width:100%;box-sizing:border-box}.song-name-input::placeholder{color:#9aa79a;font-weight:600}.song-name-input:hover{border-color:#dfe6da}.song-name-input:focus{outline:none;border-color:#8bb38a;background:#fff}.surface-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.compact-action{min-height:32px;border:1px solid #c8d2c4;border-radius:6px;background:#fff;color:#203020;padding:0 10px;font-size:12px;font-weight:750;cursor:pointer}.compact-action:hover{background:#edf4e8}.status{min-height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #ccd5c9;border-radius:7px;background:#fff;color:#3d4b3b;font-size:13px;white-space:nowrap}.status.error{border-color:#c07b75;color:#8f2f28}.now-playing{min-height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #9fc6af;border-radius:7px;background:#edf8f0;color:#1d5c43;font-size:13px;font-weight:800;white-space:nowrap}.error-banner{margin-bottom:12px;padding:10px 12px;border:1px solid #d39a95;border-radius:7px;background:#fff4f1;color:#7f2923;font-size:14px}.bar-grid{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}.bar-column{position:relative;border:1px solid #cbd8c7;border-radius:7px;background:#fff;min-height:0;display:flex;flex-direction:column;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.bar-column.playing{border-color:#d47a13;background:#fffaf0;box-shadow:0 0 0 3px #d47a1342,0 10px 24px #5c37122e}.bar-column.playing:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;border-radius:7px 0 0 7px;background:#d47a13}.bar-column.playing .bar-title{background:#fff0cf;color:#5a3308}.bar-title{min-height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #d7e1d2;font-weight:750;color:#263528}.bar-story-card{position:relative;width:min(520px,62vw);min-height:106px;border:1px solid #cbd8c5;border-radius:7px;background:#fbfdf9;padding:7px 9px;display:grid;grid-template-columns:76px minmax(240px,1fr) 86px;gap:10px;align-items:center;flex:1 1 520px}.story-meta{min-width:0;display:grid;gap:2px}.story-meta b{color:#243326;font-size:12px;line-height:1}.story-meta span{color:#2e6f53;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.melody-ladder{position:relative;height:88px;min-width:0;border-radius:6px;background:#fff;overflow:hidden}.bar-snapshot{position:absolute;left:8px;top:calc(100% + 6px);z-index:60;width:max-content;max-width:740px;background:#fff;border:1px solid #d6e0d2;border-radius:12px;box-shadow:0 16px 38px #1f3c223d;padding:12px 14px;display:none;pointer-events:none}.bar-story-card:hover .bar-snapshot{display:block}.snap-grid{display:block;width:700px;max-width:100%;height:auto}.bar-story-card{cursor:zoom-in}.snap-modal-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:#1f2f2480;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:default}.snap-modal{width:min(980px,94vw);max-height:90vh;overflow:auto;background:#fff;border:1px solid #d6e0d2;border-radius:14px;box-shadow:0 24px 60px #1f3c224d;padding:16px 20px 22px}.snap-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:17px;color:#1f5fa8}.snap-modal-close{border:0;background:transparent;font-size:20px;line-height:1;color:#7a857a;cursor:pointer}.snap-modal-nav{display:flex;align-items:center;gap:12px}.snap-nav-btn{border:1px solid #cdd8c8;background:#f3f7f1;color:#233027;border-radius:8px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer}.snap-nav-btn:hover:not(:disabled){background:#e7efe5}.snap-nav-btn:disabled{opacity:.4;cursor:default}.snap-modal .snap-grid{width:100%}.snap-modal-play{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.snap-modal-play button{border:1px solid #cdd8c8;background:#f3f7f1;color:#233027;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer}.snap-modal-play button:hover{background:#e7efe5}.snap-modal-play button.primary{background:#3a7a3a;border-color:#3a7a3a;color:#fff}.snap-edit{margin-top:16px;border-top:1px solid #e0e7dc;padding-top:14px;display:flex;flex-direction:column;gap:16px}.snap-edit-title{font-size:13px;font-weight:700;color:#51604f;letter-spacing:.02em;margin-bottom:6px}.snap-head{font-weight:800;font-size:15px;color:#1f5fa8;margin-bottom:7px}.snap-row{display:flex;gap:12px;margin:7px 0;align-items:baseline}.snap-k{flex:0 0 66px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:#6a756a}.snap-cells{display:flex;flex-wrap:wrap;gap:10px}.snap-cell{font-size:16px;font-weight:700;color:#233027;white-space:nowrap}.snap-cell i{font-style:normal;font-weight:500;font-size:12px;color:#6a756a;margin-left:3px}.snap-cell.rest{color:#9a948b;font-style:italic;font-weight:600}.snap-cell.chord{color:#7a4fb0}.snap-drums{display:flex;flex-direction:column;gap:5px}.snap-drum{display:flex;gap:10px;align-items:center}.snap-drum-name{flex:0 0 82px;font-size:13px;color:#51604f}.snap-drum-grid{display:flex;gap:3px;align-items:center}.snap-drum-grid .dh{width:14px;height:14px;border-radius:3px;border:1px solid #d8cdbf;background:#f3efe9}.snap-drum-grid .dh.on{background:#d98a3a;border-color:#b06a2c}.snap-drum-grid .dh.bs{margin-left:8px}.melody-ladder svg{position:relative;z-index:1;width:100%;height:100%;display:block}.ladder-label-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.ladder-marker-layer{position:absolute;inset:0;z-index:2;pointer-events:none}.ladder-fixed-dot{position:absolute;width:0;height:0;transform:translate(-50%,-50%);border:0;border-radius:0;background:transparent}.ladder-fixed-dot.rest{width:18px;height:18px;border-style:dashed;border-color:#7671698c;background:#76716924}.ladder-note-label{position:absolute;transform:translate(-50%,-50%);max-width:72px;min-width:0;min-height:0;border:0;border-radius:4px;background:#ffffffeb;color:#1f5fa8;padding:1px 3px;font-size:18px;font-weight:900;line-height:1;text-align:center;white-space:nowrap;overflow:visible;text-shadow:0 1px 2px rgba(31,95,168,.18);display:flex;flex-direction:column;align-items:center;gap:1px}.ladder-note-interval{font-size:15px;font-weight:900;line-height:1;opacity:.95;text-shadow:none}.ladder-note-label.rest{color:#5a554c;font-size:18px;font-weight:700;font-style:italic;text-shadow:0 1px 0 #ffffff,1px 0 0 #ffffff,0 -1px 0 #ffffff,-1px 0 0 #ffffff}.ladder-line{fill:none;stroke:#a44679a8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.ladder-dot{fill:#2f765b24;stroke:#2f765b47;stroke-width:1.6}.ladder-dot.halo{fill:#2f765b1f;stroke:#2f765b3d}.ladder-dot.rest{fill:#cfc7bd;stroke:#bcb2a6;stroke-width:1.5}.ladder-bar-boundary,.beat-grid-line{stroke:#3a503a99;stroke-width:1.3}.ladder-tick{stroke:#4960489e;stroke-width:1.5}.story-cues{display:grid;gap:3px;color:#697565;font-size:10px;font-weight:750;line-height:1.1}.bar-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.collapse-button,.mini-icon{width:26px;height:26px;border:1px solid #c5cfbf;border-radius:6px;background:#fff;color:#2e6f53;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.mini-icon:disabled{opacity:.4;cursor:not-allowed}.mini-icon.danger{color:#9b4435}.mini-text{min-width:34px;height:26px;border:1px solid #c5cfbf;border-radius:6px;background:#fff;color:#2e6f53;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:750}.bar-command-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:8px 10px;border-bottom:1px solid #d7e3d1;background:#f3f8ef}.bar-command-row span{color:#435841;font-size:12px;font-weight:800;margin-right:2px}.bar-command-row button{min-height:28px;border:1px solid #bfd0b9;border-radius:6px;background:#fff;color:#214d3e;padding:0 10px;font-size:12px;font-weight:750;cursor:pointer}.bar-command-row button:hover{background:#e7f2e1}.bar-command-row button:disabled{opacity:.45;cursor:not-allowed}.bar-control-strip{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px;padding:8px 10px;border-bottom:1px solid #dde7d8;background:#fafbf8}.bar-control-strip label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;align-items:center;color:#5c6a59;font-size:12px;font-weight:700}.bar-control-strip select{min-width:0;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.bar-section{border-top:1px solid #d9e4d4}.bar-section-header{width:100%;min-height:34px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:7px;border:0;background:#f7faf4;color:#243525;padding:7px 10px;text-align:left;cursor:pointer}.bar-section-header span{font-size:12px;font-weight:800}.bar-section-header em{color:#60715d;font-size:11px;font-style:normal;font-weight:700;white-space:nowrap}.bar-section.open .bar-section-header{background:#eef5ea}.bar-section-content{background:#fff}.section-inner{padding:10px}.lane{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;padding:10px;border-bottom:1px solid #dde7d8}.lane.lane-full{grid-template-columns:minmax(0,1fr)}.lane:last-child{border-bottom:0}.lane>span{color:#5c6a59;font-size:12px;font-weight:700}.lane.muted{background:#fafbf8}.note-cells{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.note-cells button{min-height:30px;min-width:52px;border:1px solid #b9c5b5;border-radius:6px;background:#f3f7f1;color:#203025;padding:4px 8px;cursor:pointer;font-size:12px}.editor-cells{display:flex;flex-wrap:wrap;gap:7px;min-width:0}.lane-grid{display:grid;gap:8px;min-width:0}.lane-add-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.lane-add-row>span{color:#5c6a59;font-size:12px;font-weight:750}.lane-add-row select{width:148px;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.lane-add-row .remaining-pill{color:#33514a;background:#edf4e8;border:1px solid #cddac6;border-radius:999px;padding:4px 8px;white-space:nowrap}.two-row-grid{display:grid;grid-template-columns:62px minmax(0,1fr);gap:6px 8px;align-items:center}.slot-column-grid,.drum-grid-aligned{display:grid;grid-template-columns:66px minmax(0,1fr);gap:8px;align-items:start}.slot-axis,.drum-axis{display:grid;gap:6px}.slot-axis b,.drum-axis b{height:28px;display:flex;align-items:center;color:#5c6a59;font-size:12px}.slot-columns,.drum-slot-columns{display:flex;flex-wrap:nowrap;gap:7px;min-width:0;overflow-x:auto;padding-bottom:6px}.slot-column,.drum-slot-column{width:136px;flex:0 0 136px;display:grid;gap:6px}.slot-column select,.drum-slot-column select{width:136px;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.wide-delete{width:136px}.slot-preview{width:136px;height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border-radius:6px;border:1.5px solid transparent;font-weight:700}.slot-preview.mela{background:#d3e6fb;border-color:#0c447c;color:#0c447c}.slot-preview.melb{background:#d6f0e6;border-color:#0f6e56;color:#0f6e56}.slot-preview.rest{background:#7878781a;border-color:#78787880;color:#5a5a5a}.slot-glyph{font-size:18px;line-height:1}.slot-note-wrap{display:inline-flex;align-items:baseline;gap:4px}.slot-note{font-size:14px;font-weight:800}.slot-intv{font-size:11.5px;font-weight:600;opacity:.82}.slot-axis b:first-child{height:34px}.melody-lane .slot-column select{font-size:13px;font-weight:700;min-height:32px}.melody-lane .rhythm-select,.melody-lane .note-select{color:#14233a}.melody-lane.mela .slot-column select{border-left:4px solid #0C447C}.melody-lane.melb .slot-column select{border-left:4px solid #0F6E56}.melody-lane .slot-column select:hover{background:#f7fbff}.melody-lane.mela .slot-column select:focus{outline:none;border-color:#0c447c;box-shadow:0 0 0 3px #0c447c33}.melody-lane.melb .slot-column select:focus{outline:none;border-color:#0f6e56;box-shadow:0 0 0 3px #0f6e5633}.rhythm-help{position:relative;display:inline-flex;align-items:center}.rhythm-help-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid #0C447C;background:#eaf2fc;color:#0c447c;font-weight:800;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.rhythm-help-btn:hover{background:#d3e6fb}.rhythm-help-pop{position:absolute;top:28px;right:0;z-index:60;width:320px;max-width:86vw;background:#fff;border:1px solid #c4cec0;border-radius:10px;box-shadow:0 10px 30px #1423142e;padding:12px 14px;text-align:left;font-size:12.5px;color:#1c271b}.rhythm-help-head{font-weight:800;font-size:13.5px;margin-bottom:6px;color:#14233a}.rhythm-help-pop p{margin:0 0 7px;line-height:1.45}.rhythm-help-compound{background:#fff5e6;border:1px solid #e6c98a;border-radius:6px;padding:5px 8px;color:#7a531a}.rhythm-help-legend{display:grid;gap:3px;margin:8px 0 6px;border-top:1px solid #e4ebe2;padding-top:8px}.rhythm-help-row{display:grid;grid-template-columns:26px 96px 1fr;align-items:center;gap:6px}.rhythm-help-glyph{font-size:18px;text-align:center;color:#0c447c}.rhythm-help-name{font-weight:700}.rhythm-help-val{color:#51604f}.rhythm-help-tip{font-size:11.5px;color:#6a766a;border-top:1px solid #e4ebe2;padding-top:6px}.song-wide-label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.song-wide-tag{padding:1px 6px;border-radius:8px;background:#fdeccb;color:#8a5a14;font-size:9.5px;font-weight:700;letter-spacing:.2px}.song-wide-field select{border-color:#e6c98a}.two-row-grid>b{color:#5c6a59;font-size:12px}.slot-row{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.slot-cell{display:inline-flex;gap:3px}.slot-cell select,.note-select,.hit-select,.drum-inst-cell select{width:136px;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.note-select.rest,.hit-select{background:#f4f0eb}.hit-select.hit{background:#f0d2bd;border-color:#d87946}.slot-delete{width:24px;min-height:28px;border:1px solid #d2c7c2;border-radius:5px;background:#fff8f5;color:#9b4435;cursor:pointer}.secondary-add{color:#705f50}.editor-cell{display:grid;grid-template-columns:76px 58px 28px;gap:5px;align-items:center;padding:5px;border:1px solid #d7dfd2;border-radius:6px;background:#f8faf6}.editor-cell.rest{background:#f3f1ed}.editor-cell select,.chord-select{min-width:0;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.cell-delete{width:28px;height:28px;border:1px solid #d2c7c2;border-radius:5px;background:#fff8f5;color:#9b4435;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.lane-add{min-height:28px;min-width:70px;border:1px dashed #b9c5b5;border-radius:6px;background:#fff;color:#2e6f53;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-size:12px}.add-rhythm-box{display:inline-flex;gap:6px;align-items:center}.add-rhythm-box select{width:148px;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.note-cells.ghost button{border-style:dashed;color:#6b7568}.chord-cell button{background:#edf4f8;border-color:#aebfc7}.drum-cells{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.drum-lane{align-items:start}.drum-matrix{display:grid;gap:8px}.drum-two-row-grid{grid-template-columns:112px minmax(0,1fr)}.drum-inst-cell{display:flex;gap:4px;height:28px}.drum-inst-cell select{width:136px}.drum-rhythm-controls{display:flex;align-items:center;gap:8px}.drum-rhythm-controls label{display:inline-flex;align-items:center;gap:8px;color:#5c6a59;font-size:12px;font-weight:700}.drum-rhythm-controls input{width:70px;min-height:28px;border:1px solid #c4cec0;border-radius:5px;background:#fff;color:#172017;padding:2px 6px;font-size:12px}.drum-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:7px;align-items:center}.drum-row b{color:#5c6a59;font-size:11px;font-weight:750}.drum-cells i,.drum-cells button{width:24px;height:24px;border-radius:5px;border:1px solid #c4cec0;background:#f6f7f4}.drum-cells button{cursor:pointer;padding:0}.drum-cells i.hit,.drum-cells button.hit{background:#d87946;border-color:#c76936}.bar-footer{padding:8px 10px 10px;border-top:1px solid #dce6d8}.bar-footer button{width:100%;min-height:30px;border:1px solid #cbd8c7;border-radius:6px;background:#fff;color:#495846;cursor:pointer}.lower-panel{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}.progression-strip{display:flex;flex-wrap:wrap;gap:8px}.progression-cell{min-width:96px;border:1px solid #cad4c7;border-radius:6px;background:#fff;padding:7px 9px;display:grid;gap:3px}.progression-cell span{color:#697566;font-size:11px;font-weight:700}.progression-cell b{color:#203025;font-size:13px}@media(max-width:900px){.topbar,.surface-header{align-items:flex-start;flex-direction:column}.workspace,.lower-panel{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid #d9ded2;max-height:42vh}}