@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap";:root{color-scheme:dark;--bg: #5f6b76;--panel: #6b7987;--panel-2: #72808d;--panel-strong: #56626d;--roll-surface: #3f454a;--line: #8c98a4;--line-2: #a2aeb9;--text: #f5f7fa;--muted: #e0e6eb;--accent: #ef9b5f;--accent-2: #77a8ff;font-family:IBM Plex Sans,sans-serif;background:linear-gradient(180deg,#788592,#5f6b76);color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button,select,input[type=range]{min-width:0}button{border:1px solid var(--line-2);background:#5a6672;color:var(--text);cursor:pointer;padding:.28rem .5rem;border-radius:0}button:hover{background:#65727f}button:disabled{opacity:.55;cursor:default}select,input[type=text],input[type=number]{width:100%;border:1px solid var(--line-2);background:var(--panel-strong);color:var(--text);padding:.28rem .38rem;border-radius:0}select option{background:var(--panel-strong);color:var(--text)}input[type=text]::placeholder,input[type=number]::placeholder{color:#d3dbe2}input[type=range]{width:100%;accent-color:var(--accent)}.app-shell{width:100%;padding:8px;display:grid;gap:8px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:0;overflow:hidden}.roll-stage{display:grid;gap:6px;padding:6px}.top-strip{display:flex;flex-wrap:wrap;gap:8px 14px;padding:0 0 6px;font-size:.76rem;line-height:1.2}.top-strip span{color:var(--muted);white-space:nowrap}.top-strip strong{color:var(--text);font-weight:600}.water-visualizer-shell{border:1px solid var(--line);background:radial-gradient(circle at top,rgba(186,231,255,.1),transparent 52%),linear-gradient(180deg,#132a38f5,#0a1722fa);overflow:hidden}.water-visualizer{display:block;width:100%;height:132px}.status-inline{color:var(--accent)}.controls-panel{position:sticky;top:0;z-index:10;padding:6px}.button-row{display:flex;flex-wrap:wrap;gap:4px}.toolbar-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}.toolbar-left-stack{display:grid;gap:4px;min-width:0}.toolbar-left{justify-content:flex-start}.toolbar-center{justify-content:center}.toolbar-right{justify-content:flex-end}.transport-override-row{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.transport-override-control{display:grid;gap:3px;min-width:0;padding:4px 8px 6px;border:1px solid var(--line);background:#2b353e52}.transport-override-control span{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.transport-override-control strong{font-size:.74rem;color:#fff2dc}.transport-override-toggle .checkbox-inline{min-height:54px;justify-content:space-between}.transport-override-action{align-content:stretch}.transport-override-action .randomize-all-button{width:100%;min-height:54px;justify-content:center}.toolbar-select{display:grid;gap:2px;min-width:160px;padding:2px 6px 4px;border:1px solid var(--line);background:var(--panel-2)}.toolbar-select span{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.toolbar-select select{min-width:0}.help-button{min-width:2rem;font-size:1rem;font-weight:700;line-height:1}.save-slots-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.save-slot{display:grid;grid-template-columns:auto 1fr 1fr;gap:2px;align-items:center;padding:2px 3px;border:1px solid var(--line);background:#2b353e61}.save-slot-filled{border-color:#91b8da;background:#2b445975}.save-slot-label{min-width:12px;text-align:center;font-size:.58rem;color:var(--muted);font-weight:600}.slot-mini-button{padding:.12rem .2rem;font-size:.58rem;line-height:1.1}.dice-button{display:inline-flex;align-items:center;gap:6px}.dice-icon{width:24px;height:24px;object-fit:contain;flex:0 0 auto}.toolbar-button-yellow{background:#735a10;border-color:#b99318;color:#fff7d6}.toolbar-button-yellow:hover{background:#8a6d16}.toolbar-button-red{background:#7f1d1d;border-color:#b23a3a;color:#fff1f1}.toolbar-button-red:hover{background:#962525}.toolbar-button-green{background:#1f5d2d;border-color:#3d9b57;color:#edfdf1}.toolbar-button-green:hover{background:#28753a}.toolbar-button-neutral{background:#4c5862;border-color:#95a2ad;color:#f1f4f6}.toolbar-button-neutral:hover{background:#58656f}.toolbar-button-blue{background:#193b66;border-color:#477dbe;color:#eef5ff}.toolbar-button-blue:hover{background:#224c82}.attention-button{background:#7f1d1d;border-color:#b23a3a;color:#fff1f1}.attention-button:hover{background:#962525}.randomize-all-button{min-width:9.25rem;justify-content:center;font-weight:700}.control-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.95fr);gap:8px;align-items:start}.compact-panel{min-height:0}.panel-scroll{max-height:calc(100vh - 240px);overflow:auto;padding:6px;display:grid;gap:8px}.panel-title-row{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:.74rem;color:var(--muted)}.panel-title-row h2{margin:0;font-size:.84rem;font-weight:600;color:var(--text)}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:4px}.controls-grid .span-2-col{grid-column:span 2}.instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.instrument-grid .span-2{grid-column:1 / -1}.controls-grid label,.section-card-controls label{display:grid;gap:2px;padding:4px;background:var(--panel-2);border:1px solid var(--line)}.controls-grid span,.section-card-controls span{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.controls-grid strong{font-size:.7rem;color:var(--accent-2)}.control-disabled{opacity:.56}.drum-panel{display:grid;gap:6px;padding:6px;border:1px solid var(--line);background:var(--panel-2)}.drum-title-row{margin-top:2px}.drum-title-actions{display:flex;align-items:center;gap:10px}.drum-enable-toggle{display:flex;align-items:center;gap:6px;color:var(--text);font-size:.7rem}.drum-enable-toggle span{color:var(--text);text-transform:uppercase;letter-spacing:.04em}.drum-enable-toggle input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--accent)}.drum-controls-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:2px}.drum-lanes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px}.control-box{display:grid;gap:3px;padding:4px;background:var(--panel-2);border:1px solid var(--line)}.control-row{display:flex;align-items:center;gap:6px}.control-row input[type=range]{flex:1 1 auto}.value-chip{min-width:36px;text-align:right;color:var(--muted);font-size:.68rem;font-weight:600}.track-action-box{justify-content:center}.track-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.drum-toggle-row{grid-template-columns:minmax(0,1fr)}.track-action-row button{width:100%}.drum-auto-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-height:28px;border:1px solid var(--line-2);background:#5a6672;color:var(--text);padding:.28rem .4rem;cursor:pointer}.drum-auto-toggle input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--accent)}.drum-roll-canvas{display:block;width:100%;height:164px;border:1px solid var(--line);background:var(--roll-surface)}.diagnostics-shell{padding:6px}.checkbox-control{align-content:start}.checkbox-inline{display:flex;align-items:center;gap:6px;min-height:28px}.checkbox-inline input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--accent)}.radio-control{align-content:start}.radio-group{display:flex;flex-wrap:wrap;gap:6px;min-height:28px}.radio-option{display:inline-flex;align-items:center;gap:6px;padding:.28rem .45rem;border:1px solid var(--line-2);background:var(--panel-strong);color:var(--text)}.radio-option.active{border-color:var(--accent);background:#616c78}.radio-option input[type=radio]{width:14px;height:14px;margin:0;accent-color:var(--accent)}.radio-option span{color:var(--text);font-size:.68rem;letter-spacing:.04em}.toggle-grid{display:flex;flex-wrap:wrap;gap:4px}.toggle{background:#5c6974}.toggle.active{background:#6a7885;border-color:#c6d0d8}.section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.section-card{padding:4px;cursor:pointer}.section-card.active{border-color:var(--accent)}.section-card-head{display:flex;justify-content:space-between;gap:4px;align-items:center}.section-card h2{margin:0;font-size:.72rem;font-weight:600}.section-card-progression{margin:4px 0 2px;color:#aac3d8;font-size:.68rem;line-height:1.3}.section-card-roman{margin:0 0 4px;color:var(--muted);font-size:.62rem;line-height:1.3}.section-card-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.piano-roll-shell{border:1px solid var(--line);background:var(--roll-surface)}.piano-roll-scroll{overflow:hidden}.piano-roll{display:block;width:100%;height:auto}.piano-roll-key-label,.piano-roll-timeline-label,.piano-roll-section-label{font-size:9px;fill:#ffffff9e}.piano-roll-section-label{fill:#ef9b5fe6}.piano-roll-chord-label{font-size:7.5px;fill:#ffffffb8}.diagnostics-panel{display:grid;gap:4px;padding:0;font-size:.66rem}.diagnostics-grid{display:flex;flex-wrap:wrap;gap:4px}.diagnostics-grid span{padding:2px 6px;border:1px solid var(--line);background:#071018b3;color:var(--muted);white-space:nowrap}.diagnostics-grid strong{color:var(--text)}.slot-diagnostics span{color:#9db2c1}.diagnostics-warning{padding:3px 6px;border:1px solid #7d5d29;background:#5c3f0a4d;color:#f0cb7a}.diagnostics-log{display:grid;gap:2px;max-height:96px;overflow:auto;padding:4px 6px;border:1px solid var(--line);background:#060d13d1;color:#9db2c1;font-family:IBM Plex Sans,sans-serif}.modal-overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:12px;background:#1b212694}.modal-card{width:min(420px,100%);display:grid;gap:8px;padding:10px;background:var(--panel);border:1px solid var(--line-2)}.modal-actions{display:flex;justify-content:flex-end;gap:6px}.help-modal-card{width:min(980px,100%);max-height:calc(100vh - 36px);grid-template-rows:auto minmax(0,1fr) auto}.help-modal-content{display:grid;gap:12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:none;-ms-overflow-style:none}.help-modal-content::-webkit-scrollbar{width:0;height:0;display:none}.help-intro{margin:0;color:var(--muted);line-height:1.5}.help-section{display:grid;gap:6px;padding:8px 10px;border:1px solid rgba(162,174,185,.36);background:#2b353e47}.help-section h3{margin:0;font-size:.84rem;color:#fff2dc}.help-section ul{margin:0;padding-left:1.1rem;display:grid;gap:6px;color:var(--text);line-height:1.45}.help-section li::marker{color:var(--accent)}@media(max-width:1100px){.control-columns{grid-template-columns:1fr}.transport-override-row{grid-template-columns:minmax(0,1fr)}.panel-scroll{max-height:none}.drum-lanes-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.toolbar-row{grid-template-columns:1fr}.save-slots-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.toolbar-left,.toolbar-center,.toolbar-right{justify-content:flex-start}}@media(max-width:760px){.app-shell{padding:6px}.controls-grid .span-2-col{grid-column:auto}.instrument-grid,.drum-controls-grid,.drum-lanes-grid{grid-template-columns:1fr}.save-slots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drum-title-actions{width:100%;justify-content:space-between}.section-grid,.section-card-controls{grid-template-columns:1fr}}