*{box-sizing:border-box;margin:0;padding:0}body{background:#0f0f14;color:#e0e0e0;font-family:Segoe UI,system-ui,sans-serif}.app{max-width:1200px;margin:0 auto;padding:24px 16px 48px}h1{font-size:1.8rem;font-weight:300;letter-spacing:.15em;color:#c8aef0;margin-bottom:4px}.subtitle{font-size:.85rem;color:#666;margin-bottom:32px;letter-spacing:.05em}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}.controls label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#aaa}.controls select{background:#1e1e2a;border:1px solid #333;color:#e0e0e0;padding:4px 8px;border-radius:4px;font-size:.85rem}.slider-label{gap:8px}.bpm-slider,.volume-slider{width:90px;accent-color:#7c4dff;cursor:pointer}.bpm-slider:disabled{opacity:.4;cursor:default}.slider-val{font-size:.78rem;color:#777;width:52px}.btn{padding:8px 20px;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .15s}.btn:disabled{opacity:.4;cursor:default}.btn-play{background:#00bfa5;color:#fff}.btn-play:hover:not(:disabled){background:#1de9b6}.btn-stop{background:#e53935;color:#fff}.btn-stop:hover:not(:disabled){background:#ff5252}.btn-clear{background:transparent;color:#888;border:1px solid #333}.btn-clear:hover:not(:disabled){color:#ccc;border-color:#666}.btn-midi{background:transparent;color:#7cb8ff;border:1px solid #4a7fa0}.btn-midi:hover:not(:disabled){color:#aad4ff;border-color:#7cb8ff}.section-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#555;margin-bottom:8px}.output-legend{display:flex;align-items:center;gap:16px}.legend-item{font-size:.72rem;letter-spacing:.06em}.legend-derived{color:#3b82f6}.legend-cp{color:#f97316}.legend-fill{color:#9090b8}.roll-wrapper{display:flex;align-items:flex-start;overflow-x:auto;margin-bottom:32px}.roll-keys{display:flex;flex-direction:column;flex-shrink:0}.roll-key{height:20px;width:48px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:.6rem;flex-shrink:0;border-left:4px solid #050508;cursor:pointer;-webkit-user-select:none;user-select:none}.roll-key.white{background:#232330;color:#666;border-bottom:1px solid #1a1a28}.roll-key.black{background:#0e0e15;color:#2a2a2a}.roll-key.c{color:#c8aef0!important;font-weight:600}.roll-key:hover{filter:brightness(1.2)}.roll-key.in-input-range.white{background:#323248;color:#bbb;border-left:4px solid #7c4dff!important}.roll-key.in-input-range.black{background:#18181f;color:#555;border-left:4px solid #5c35cc!important}.roll-key.in-input-range.c{color:#c8aef0!important}.roll-grid{display:flex;flex-direction:column;position:relative}.roll-row{display:flex;height:20px}.roll-cell{width:10px;height:20px;border-right:1px solid #17171f;border-bottom:1px solid #17171f;flex-shrink:0;cursor:pointer;transition:background .06s}.roll-cell:hover{background:#7c4dff33!important}.roll-cell.white-row{background:#131320}.roll-cell.black-row{background:#0c0c12}.roll-cell.beat-1{border-left:2px solid #2a2a40}.roll-cell.beat-bar{border-left:1px solid #1e1e30}.roll-cell.input-zone.white-row{background:#161628}.roll-cell.input-zone.black-row{background:#0e0e1a}.roll-cell.input-zone-end{border-right:2px solid #4a3a7a!important}.roll-cell.output-zone{cursor:default}.roll-cell.output-zone:hover{background:inherit!important}.roll-cell.input-zone.out-of-input-range.white-row{background:#08080e}.roll-cell.input-zone.out-of-input-range.black-row{background:#040408}.roll-cell.input-zone.out-of-input-range{cursor:default}.roll-cell.input-zone.out-of-input-range:hover{background:inherit!important}.roll-cell.input-zone.white-row:not(.out-of-input-range){background:#181830}.roll-cell.input-zone.black-row:not(.out-of-input-range){background:#10101f}.roll-header{display:flex;align-items:center;gap:16px}.roll-cell.note-start-input{background:#7c4dff!important;border-left:2px solid #a78bfa}.roll-cell.note-cont-input{background:#6338e0!important}.roll-cell.note-start-derived{background:#2563eb!important;border-left:2px solid #60a5fa}.roll-cell.note-cont-derived{background:#1d4ed8!important}.roll-cell.note-start-cp{background:#ea6a00!important;border-left:2px solid #fb923c}.roll-cell.note-cont-cp{background:#c85a00!important}.roll-cell.note-start-fill{background:#6a6a88!important;border-left:2px solid #9090b8}.roll-cell.note-cont-fill{background:#565678!important}.roll-cell.note-preview{background:#8b5cf659!important}.output-section{margin-top:8px}.status-bar{margin-top:16px;font-size:.8rem;color:#555;min-height:1.2em}