*{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}.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}.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:#2e2e3e;color:#888;border-bottom:1px solid #1a1a28}.roll-key.black{background:#111118;color:#333}.roll-key.c{color:#c8aef0!important;font-weight:600}.roll-key:hover{filter:brightness(1.2)}.roll-grid{display:flex;flex-direction:column;position:relative}.roll-row{display:flex;height:20px}.roll-cell{width:20px;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-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-preview{background:#8b5cf659!important}.output-section{margin-top:8px}.status-bar{margin-top:16px;font-size:.8rem;color:#555;min-height:1.2em}