:where(.drum-canvas){--dc-bg:#fff;--dc-panel:#f6f6f6;--dc-ink:#181818;--dc-muted:#777;--dc-border:#ddd;--dc-accent:#202020;--dc-on-accent:#fff;--dc-selected:#ededed;--dc-radius:8px;color:var(--dc-ink);background:var(--dc-bg);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;position:relative;width:100%;margin:auto}
:where(.drum-canvas) *{box-sizing:border-box}:where(.drum-canvas) [hidden]{display:none!important}:where(.drum-canvas) button,:where(.drum-canvas) input,:where(.drum-canvas) select{font:inherit;letter-spacing:normal;text-transform:none;margin:0}:where(.drum-canvas) button{cursor:pointer;border:1px solid var(--dc-border);border-radius:var(--dc-radius);padding:8px 12px;min-height:40px;background:var(--dc-bg);color:var(--dc-ink);box-shadow:none;line-height:1.3}:where(.drum-canvas) button:hover{background:var(--dc-selected)}:where(.drum-canvas) button:disabled{opacity:.35;cursor:default}:where(.drum-canvas) :is(button,input,select,summary):focus-visible{outline:2px solid var(--dc-accent);outline-offset:3px}:where(.drum-canvas) .dc-primary,:where(.drum-canvas) .is-active,:where(.drum-canvas) .dc-play{background:var(--dc-accent);border-color:var(--dc-accent);color:var(--dc-on-accent)}:where(.drum-canvas) .dc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}:where(.drum-canvas) .dc-title{width:100%;min-width:80px;border:0;background:transparent;color:var(--dc-ink);font-size:22px;font-weight:600;padding:6px}:where(.drum-canvas) .dc-actions{display:flex;gap:7px;white-space:nowrap}:where(.drum-canvas) .dc-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--dc-border);border-radius:var(--dc-radius);background:var(--dc-panel);padding:10px}:where(.drum-canvas) label{display:flex;gap:7px;align-items:center;color:var(--dc-muted);font-size:12px}:where(.drum-canvas) input:not([type=checkbox]),:where(.drum-canvas) select{min-height:38px;padding:7px;border:1px solid var(--dc-border);border-radius:5px;background:var(--dc-bg);color:var(--dc-ink);max-width:100%}:where(.drum-canvas) .dc-title{border:0;background:transparent}:where(.drum-canvas) input[type=number]{width:66px}:where(.drum-canvas) input[type=checkbox]{accent-color:var(--dc-accent);width:17px;height:17px}:where(.drum-canvas) .dc-divider{height:25px;border-left:1px solid var(--dc-border)}:where(.drum-canvas) .dc-spacer{flex:1}:where(.drum-canvas) .dc-modes{display:flex;gap:4px}:where(.drum-canvas) .dc-more{position:relative}:where(.drum-canvas) summary{cursor:pointer;font-size:12px;padding:9px}:where(.drum-canvas) .dc-more>div{position:absolute;right:0;top:38px;z-index:30;min-width:190px;display:grid;gap:10px;padding:14px;background:var(--dc-bg);border:1px solid var(--dc-border);border-radius:var(--dc-radius);box-shadow:0 8px 30px #0002}:where(.drum-canvas) .dc-palette{display:flex;gap:6px;overflow-x:auto;padding:16px 0 12px}:where(.drum-canvas) .dc-drum{display:flex;flex:1;min-width:72px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 5px;touch-action:none;user-select:none}:where(.drum-canvas) .dc-drum svg{width:38px;height:30px;pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.5}:where(.drum-canvas) .dc-drum span{font-size:11px;white-space:nowrap;pointer-events:none}:where(.drum-canvas) .dc-values{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:0 0 14px;border-bottom:1px solid var(--dc-border)}:where(.drum-canvas) .dc-duration{display:flex;gap:3px}:where(.drum-canvas) .dc-duration button{display:flex;flex-direction:column;align-items:center;padding:5px 9px;min-width:42px;min-height:54px;font-family:Georgia,serif;font-size:23px}:where(.drum-canvas) .dc-duration small{font:9px system-ui;color:inherit}:where(.drum-canvas) .dc-hint{font-size:11px;color:var(--dc-muted);flex:1;min-width:170px}:where(.drum-canvas) .dc-scorebar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:14px 0;font-size:12px}:where(.drum-canvas) .dc-scorebar>div{display:flex;gap:7px;align-items:center;flex-wrap:wrap}:where(.drum-canvas) .dc-scorebar button{font-size:12px}:where(.drum-canvas) .dc-range{margin-left:12px}:where(.drum-canvas) .dc-editor{display:grid;grid-template-columns:minmax(0,1fr) 215px;align-items:start;gap:14px}:where(.drum-canvas) .dc-sheet{min-width:0;background:var(--dc-bg);border:1px solid var(--dc-border);border-radius:var(--dc-radius);overflow:hidden}:where(.drum-canvas) .dc-score{max-height:780px;overflow:auto;overscroll-behavior:contain}:where(.drum-canvas) .dc-measure{position:relative;padding:8px 10px 0;border-bottom:1px solid var(--dc-border)}:where(.drum-canvas) .dc-measure.is-selected{background:var(--dc-selected)}:where(.drum-canvas) .dc-bar-top{display:flex;align-items:center;gap:12px;color:var(--dc-muted);font-size:11px;position:sticky;left:0}:where(.drum-canvas) .dc-bar-number{min-height:32px;padding:5px 11px;font-size:11px}:where(.drum-canvas) .dc-notation{position:relative;min-height:230px;overflow-x:auto;overflow-y:hidden}:where(.drum-canvas) .dc-notation>svg{display:block;max-width:none!important;touch-action:pan-y}:where(.drum-canvas) .dc-target{fill:transparent;stroke:transparent;cursor:pointer;touch-action:none}:where(.drum-canvas) .dc-target:hover,:where(.drum-canvas) .dc-target:focus-visible{fill:#0000000a;stroke:var(--dc-muted);outline:none}:where(.drum-canvas) .dc-note-selected{fill:#0000000c;stroke:var(--dc-accent);stroke-width:1.5}:where(.drum-canvas) .dc-cursor{pointer-events:none;stroke:var(--dc-accent);stroke-width:1;stroke-dasharray:4 3}:where(.drum-canvas) .dc-drop-preview{pointer-events:none;fill:var(--dc-accent);opacity:.3}:where(.drum-canvas) .dc-inspector{border:1px solid var(--dc-border);border-radius:var(--dc-radius);padding:14px;background:var(--dc-panel);display:grid;gap:12px;position:sticky;top:12px}:where(.drum-canvas) .dc-inspector-head span{display:block;font-size:11px;color:var(--dc-muted);margin-top:3px}:where(.drum-canvas) .dc-inspector label{display:grid;gap:4px}:where(.drum-canvas) .dc-inspector .dc-tie{display:flex;font-size:11px}:where(.drum-canvas) .dc-inspector input:not([type=checkbox]),:where(.drum-canvas) .dc-inspector select{width:100%;min-width:0}:where(.drum-canvas) .dc-inspector details button{margin:8px 0;width:100%}:where(.drum-canvas) .dc-inspector small{font-size:10px;display:block;color:var(--dc-muted)}:where(.drum-canvas) .dc-notechips{display:flex;gap:3px;flex-wrap:wrap}:where(.drum-canvas) .dc-notechips:empty{display:none}:where(.drum-canvas) .dc-notechips button{font-size:10px;padding:5px;min-height:30px}:where(.drum-canvas) .dc-emptyhint{font-size:12px;color:var(--dc-muted);text-align:center;padding:15px}:where(.drum-canvas) .dc-footer{display:flex;justify-content:space-between;gap:20px;color:var(--dc-muted);font-size:11px;padding:12px 0;min-height:42px}:where(.drum-canvas) dialog{background:var(--dc-bg);color:var(--dc-ink);border:1px solid var(--dc-border);border-radius:12px;padding:24px;max-width:560px;width:calc(100% - 32px);max-height:88vh;overflow:auto;box-shadow:0 20px 90px #0003}:where(.drum-canvas) dialog::backdrop{background:#0008}:where(.drum-canvas) dialog h2{font-size:21px;margin:0 0 18px}:where(.drum-canvas) dialog label{display:grid;gap:5px;margin-bottom:12px}:where(.drum-canvas) dialog input:not([type=checkbox]),:where(.drum-canvas) dialog select{width:100%}:where(.drum-canvas) .dc-fields{display:flex;gap:14px}:where(.drum-canvas) .dc-fields label{flex:1}:where(.drum-canvas) dialog li,:where(.drum-canvas) dialog p{font-size:13px;line-height:1.7;margin-bottom:12px}:where(.drum-canvas) dialog ol{padding-left:20px}:where(.drum-canvas) dialog details{border-top:1px solid var(--dc-border)}:where(.drum-canvas) dialog>button{margin-top:12px}:where(.drum-canvas) .dc-dragbadge{position:fixed;z-index:999999;pointer-events:none;transform:translate(-50%,-120%);padding:8px 15px;border-radius:7px;background:var(--dc-accent);color:var(--dc-on-accent);font-size:13px;box-shadow:0 5px 15px #0003}
@media(max-width:950px){:where(.drum-canvas) .dc-editor{grid-template-columns:minmax(0,1fr)}:where(.drum-canvas) .dc-inspector{position:static;grid-template-columns:repeat(3,minmax(0,1fr))}:where(.drum-canvas) .dc-inspector-head,:where(.drum-canvas) .dc-notechips{grid-column:1/-1}:where(.drum-canvas) .dc-score{max-height:580px}:where(.drum-canvas) .dc-hint{display:none}}@media(max-width:600px){:where(.drum-canvas) .dc-top{flex-wrap:wrap;gap:8px}:where(.drum-canvas) .dc-actions button{padding:7px 12px}:where(.drum-canvas) .dc-scorebar{flex-wrap:wrap}:where(.drum-canvas) .dc-inspector{grid-template-columns:repeat(2,minmax(0,1fr))}:where(.drum-canvas) .dc-duration button{min-width:37px;padding:4px 7px}:where(.drum-canvas) .dc-score{max-height:500px}:where(.drum-canvas) .dc-voice{display:none}}

:where(.drum-canvas) .dc-ornaments{display:grid;gap:10px}:where(.drum-canvas) input.dc-title{border:0;background:transparent}:where(.drum-canvas) .dc-insert{stroke:none}:where(.drum-canvas) .dc-note-selected{stroke:var(--dc-accent)}
/* 2.1: score + beat grid, progressive disclosure */
:where(.drum-canvas){--dc-panel:#fafafa;--dc-selected:#f6f6f6;--dc-radius:7px}
:where(.drum-canvas) .dc-top{padding:10px 0 13px}:where(.drum-canvas) input.dc-title{font-size:20px;font-weight:550;letter-spacing:-.4px}:where(.drum-canvas) .dc-actions button{min-height:36px}:where(.drum-canvas) .dc-toolbar{background:var(--dc-bg);border:0;border-top:1px solid var(--dc-border);border-bottom:1px solid var(--dc-border);border-radius:0;padding:10px 0;gap:12px}:where(.drum-canvas) .dc-view-switch{display:flex;padding:3px;background:var(--dc-panel);border:1px solid var(--dc-border);border-radius:9px;margin-right:auto}:where(.drum-canvas) .dc-view-switch button{border:0;min-height:32px;padding:7px 15px;font-size:12px;background:transparent;color:var(--dc-muted)}:where(.drum-canvas) .dc-view-switch .is-active{background:var(--dc-accent);color:var(--dc-on-accent);box-shadow:0 1px 3px #0001}:where(.drum-canvas) .dc-toolbar .dc-spacer{display:none}:where(.drum-canvas) .dc-toolbar button{min-height:34px}:where(.drum-canvas) .dc-play{border-radius:50%;width:36px;height:36px;padding:7px}:where(.drum-canvas) .dc-toolbar input{border:0;background:var(--dc-panel);min-height:32px}:where(.drum-canvas) .dc-toolbar>button:not(.dc-play){border-color:transparent;padding:5px 10px}:where(.drum-canvas) :is(.dc-filemenu,.dc-bar-menu,.dc-instrument-menu){position:relative}:where(.drum-canvas) :is(.dc-filemenu,.dc-bar-menu,.dc-instrument-menu)>summary{list-style:none;min-height:34px;padding:7px 10px;color:var(--dc-muted);border-radius:5px}:where(.drum-canvas) summary::-webkit-details-marker{display:none}:where(.drum-canvas) .dc-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:35;min-width:205px;padding:8px;background:var(--dc-bg);border:1px solid var(--dc-border);border-radius:10px;box-shadow:0 10px 30px #0002;display:grid;gap:3px}:where(.drum-canvas) .dc-menu button{border:0;text-align:left;white-space:nowrap;min-height:38px;font-size:12px}:where(.drum-canvas) .dc-menu label{padding:6px 8px;min-height:34px;margin:0;white-space:nowrap}:where(.drum-canvas) .dc-more>div{min-width:250px}:where(.drum-canvas) .dc-more details{border-top:1px solid var(--dc-border);padding-top:5px}:where(.drum-canvas) .dc-more small{display:block;font-size:10px;color:var(--dc-muted);white-space:normal}:where(.drum-canvas) .dc-scorebar{margin:11px 0;font-size:11px}:where(.drum-canvas) .dc-score-label{font-weight:600;color:var(--dc-ink);margin-right:10px}:where(.drum-canvas) .dc-scorebar strong{font-size:11px;font-weight:400;color:var(--dc-muted)}:where(.drum-canvas) .dc-scorebar button{min-height:30px;font-size:11px;padding:5px 10px;border-color:transparent}:where(.drum-canvas) .dc-editor{display:block}:where(.drum-canvas) .dc-sheet{border-color:var(--dc-border);border-radius:10px}:where(.drum-canvas) .dc-score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:460px;overflow:auto}:where(.drum-canvas) .dc-measure{min-width:0;padding:5px 7px 0;border-bottom:1px solid #eee;background:var(--dc-bg)}:where(.drum-canvas) .dc-measure.is-selected{background:var(--dc-selected);box-shadow:inset 0 2px var(--dc-accent)}:where(.drum-canvas) .dc-bar-top{height:24px;gap:7px;font-size:9px}:where(.drum-canvas) .dc-bar-number{border:0;background:transparent;min-height:23px;padding:3px 7px;font-weight:650}:where(.drum-canvas) .dc-notation{min-height:215px}:where(.drum-canvas) .dc-emptyhint{padding:8px;font-size:11px;border-top:1px solid var(--dc-border)}
:where(.drum-canvas) .dc-grid-deck{border:1px solid var(--dc-border);border-radius:10px;margin-top:16px;padding:13px 15px 9px;background:var(--dc-bg)}:where(.drum-canvas) .dc-grid-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}:where(.drum-canvas) .dc-grid-navigation,:where(.drum-canvas) .dc-grid-tools{display:flex;align-items:center;gap:8px}:where(.drum-canvas) .dc-grid-navigation b{font-size:12px;font-weight:550;min-width:70px;text-align:center}:where(.drum-canvas) .dc-grid-navigation>button{border:0;font-size:21px;min-height:30px;padding:2px 8px}:where(.drum-canvas) .dc-grid-navigation .dc-meter-pill{font-size:11px;border:1px solid var(--dc-border);border-radius:5px;min-height:26px;padding:3px 7px;margin-left:6px}:where(.drum-canvas) .dc-grid-tools select{min-height:30px;padding:3px 6px;border:0;background:var(--dc-panel);font-size:11px}:where(.drum-canvas) .dc-grid-tools label{font-size:11px}:where(.drum-canvas) .dc-grid-tools>button{font-size:11px;min-height:30px;padding:4px 8px}:where(.drum-canvas) .dc-grid-scroll{overflow-x:auto}:where(.drum-canvas) .dc-grid{display:grid;gap:5px;align-items:center}:where(.drum-canvas) .dc-grid-corner{font-size:8px;letter-spacing:1.2px;color:var(--dc-muted);position:sticky;left:0;background:var(--dc-bg)}:where(.drum-canvas) .dc-beat-count{text-align:center;font-size:10px;color:var(--dc-muted);line-height:22px}:where(.drum-canvas) .dc-grid-drum{text-align:left;border:0;background:var(--dc-bg);padding:0 7px 0 0;font-size:11px;min-height:34px;position:sticky;left:0;z-index:2}:where(.drum-canvas) .dc-step{border:1px solid #e7e7e7;border-radius:5px;background:#f6f6f6;min-height:34px;height:34px;min-width:0;padding:0;font-size:13px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:background .1s,transform .1s}:where(.drum-canvas) .dc-step.is-beat{border-left:2px solid #bbb}:where(.drum-canvas) .dc-step:hover{background:#e6e6e6;transform:translateY(-1px)}:where(.drum-canvas) .dc-step.is-on{background:var(--dc-accent);color:var(--dc-on-accent);border-color:var(--dc-accent);box-shadow:0 1px 2px #0002}:where(.drum-canvas) .dc-grid-caption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:10px;color:var(--dc-muted)}:where(.drum-canvas) .dc-grid-caption span:last-child{font-weight:550}:where(.drum-canvas) .dc-footer{font-size:10px;padding:10px 2px;min-height:30px}:where(.drum-canvas) .dc-notation-tools{padding:0 0 8px}:where(.drum-canvas) .dc-palette{padding:10px 0}:where(.drum-canvas) .dc-drum{min-width:62px;padding:6px 4px}:where(.drum-canvas) .dc-drum svg{height:23px}:where(.drum-canvas) .dc-drum span{font-size:10px}:where(.drum-canvas) .dc-duration button{font-size:20px;min-height:48px;padding:3px 5px;min-width:34px}:where(.drum-canvas) .dc-values{gap:8px;padding-bottom:9px}:where(.drum-canvas) .dc-values .dc-modes{margin-right:5px}:where(.drum-canvas) .dc-values .dc-modes button{font-size:11px;padding:7px}:where(.drum-canvas) .dc-values label{font-size:11px}
:where(.drum-canvas) .dc-note-dialog{max-width:550px;padding:20px}:where(.drum-canvas) .dc-dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}:where(.drum-canvas) .dc-eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--dc-muted)}:where(.drum-canvas) .dc-dialog-top button{border:0;min-height:28px;padding:3px 6px}:where(.drum-canvas) .dc-inspector{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;border:0;background:var(--dc-bg);gap:12px}:where(.drum-canvas) .dc-inspector-head{grid-column:1/-1;margin-bottom:6px}:where(.drum-canvas) .dc-inspector-head b{font-size:20px;font-weight:550}:where(.drum-canvas) .dc-notechips{grid-column:1/-1}:where(.drum-canvas) .dc-inspector label{margin:0}:where(.drum-canvas) .dc-ornaments{display:contents}:where(.drum-canvas) .dc-note-dialog button{font-size:12px}:where(.drum-canvas) .dc-note-dialog [data-dc=deselect]{background:var(--dc-accent);color:var(--dc-on-accent)}:where(.drum-canvas).dc-expanded{position:fixed;inset:0;z-index:999990;padding:16px 24px;overflow:auto;max-width:none;background:var(--dc-bg)}
@media(max-width:760px){:where(.drum-canvas) .dc-score{grid-template-columns:1fr;max-height:310px}:where(.drum-canvas) .dc-grid-heading{flex-wrap:wrap}:where(.drum-canvas) .dc-grid-tools{width:100%;justify-content:flex-end}:where(.drum-canvas) .dc-grid-deck{padding:10px}:where(.drum-canvas) .dc-grid-caption{flex-direction:column;gap:3px}:where(.drum-canvas) .dc-toolbar{gap:7px}:where(.drum-canvas) .dc-toolbar .dc-view-switch{margin-right:auto}:where(.drum-canvas) .dc-top{flex-wrap:nowrap}:where(.drum-canvas) .dc-title{font-size:17px!important}:where(.drum-canvas) .dc-actions{gap:3px}:where(.drum-canvas) .dc-actions button{padding:6px 9px}:where(.drum-canvas) .dc-inspector{grid-template-columns:repeat(2,minmax(0,1fr))}:where(.drum-canvas).dc-expanded{padding:10px}}
@media(prefers-reduced-motion:reduce){:where(.drum-canvas) *{transition:none!important}}
:where(.drum-canvas[data-view="grid"]) .dc-score{max-height:260px}
:where(.drum-canvas[data-view="notation"]) .dc-score{max-height:570px}
:where(.drum-canvas) .dc-more .dc-voice{display:flex}

/* 2.2 visual polish; all accents remain theme-overridable. */
:where(.drum-canvas){--dc-accent:#6354cf;--dc-on-accent:#fff;--dc-selected:#f0edfc;--dc-panel:#f7f8fc;--dc-border:#dde1eb;--dc-ink:#252b3c;--dc-muted:#657087;--dc-radius:9px;--dc-cymbal:#ab681a;--dc-snare:#6354cf;--dc-kick:#167e86}
.drum-canvas .dc-top{gap:20px;padding:14px 0 18px;align-items:center}
.drum-canvas .dc-actions{align-items:center;gap:8px}
.drum-canvas .dc-title{padding-left:0;font-size:21px;line-height:1.4}
.drum-canvas .dc-toolbar{padding:10px 12px;background:var(--dc-panel);border:1px solid var(--dc-border);border-radius:12px;gap:8px}
.drum-canvas .dc-toolbar>label{margin:0 10px;align-items:center}
.drum-canvas .dc-toolbar button,.drum-canvas .dc-toolbar summary{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
.drum-canvas .dc-view-switch{padding:3px;border:1px solid var(--dc-border);border-radius:9px;background:var(--dc-bg)}
.drum-canvas .dc-view-switch .is-active{background:var(--dc-accent);color:var(--dc-on-accent);box-shadow:0 2px 5px #30206020}
.drum-canvas .dc-play{background:var(--dc-accent);color:var(--dc-on-accent);box-shadow:0 3px 10px #6354cf25}
.drum-canvas .dc-scorebar{margin:14px 0 10px;min-height:38px}
.drum-canvas .dc-scorebar strong{color:var(--dc-accent);background:var(--dc-selected);padding:5px 9px;border-radius:6px}
.drum-canvas .dc-sheet{border-radius:12px;box-shadow:0 3px 16px #28314a06}
.drum-canvas .dc-measure.is-selected{background:var(--dc-selected);box-shadow:inset 0 3px var(--dc-accent)}
.drum-canvas .dc-grid-deck{padding:16px;border-radius:12px;background:var(--dc-panel);border-color:var(--dc-border)}
.drum-canvas .dc-grid-heading{align-items:center;min-height:40px;margin-bottom:16px;gap:12px}
.drum-canvas .dc-grid-navigation,.drum-canvas .dc-grid-tools{align-items:center;gap:8px}
.drum-canvas .dc-grid-navigation b{min-width:78px;text-align:center;font-variant-numeric:tabular-nums}
.drum-canvas .dc-meter-pill{color:var(--dc-accent);background:var(--dc-selected);border:1px solid var(--dc-border)}
.drum-canvas .dc-step{height:38px;border-radius:6px;background:var(--dc-bg);transition:background .12s,box-shadow .12s}
.drum-canvas .dc-step:hover{box-shadow:inset 0 0 0 1px var(--dc-accent)}
.drum-canvas .dc-step.is-on{background:var(--dc-snare);border-color:var(--dc-snare);color:white;box-shadow:0 2px 4px #252b3c15}
.drum-canvas .dc-step.is-on:is([data-grid-k="hh"],[data-grid-k="oh"],[data-grid-k="cr"],[data-grid-k="rd"]){background:var(--dc-cymbal);border-color:var(--dc-cymbal)}
.drum-canvas .dc-step.is-on:is([data-grid-k="bd"],[data-grid-k="fh"]){background:var(--dc-kick);border-color:var(--dc-kick)}
.drum-canvas .dc-grid-caption{margin-top:12px;line-height:1.5}
.drum-canvas .dc-menu{border-radius:10px;box-shadow:0 10px 35px #252b3c18}
.drum-canvas dialog{border-radius:16px;border:1px solid var(--dc-border);box-shadow:0 20px 80px #252b3c30}
.drum-canvas .dc-inspector label.dc-tie{align-self:end;min-height:40px;margin:0}
@media(max-width:600px){.drum-canvas .dc-top{gap:8px;flex-wrap:wrap}.drum-canvas .dc-title{flex-basis:100%}.drum-canvas .dc-actions{margin-left:auto}.drum-canvas .dc-grid-heading{align-items:flex-start}.drum-canvas .dc-grid-deck{padding:12px}.drum-canvas .dc-toolbar>label{margin:0}}
@media(prefers-reduced-motion:reduce){.drum-canvas .dc-step{transition:none}}

/* Appearance palettes use low specificity so theme CSS can override tokens. */
:where(.drum-canvas[data-theme="light"]){color-scheme:light}
:where(.drum-canvas[data-theme="dark"]){color-scheme:dark;--dc-bg:#181c26;--dc-panel:#202633;--dc-ink:#e7ebf4;--dc-muted:#a8b3c7;--dc-border:#394357;--dc-accent:#afa0ff;--dc-on-accent:#201644;--dc-selected:#302c49;--dc-cymbal:#95601f;--dc-snare:#7560cd;--dc-kick:#237b82}
.drum-canvas .dc-measure{border-bottom-color:var(--dc-border)}
.drum-canvas .dc-step:not(.is-on){border-color:var(--dc-border)}
.drum-canvas .dc-step.is-beat{border-left-color:var(--dc-muted)}
.drum-canvas .dc-step:not(.is-on):hover{background:var(--dc-selected)}
.drum-canvas dialog{background:var(--dc-bg);color:var(--dc-ink)}
.drum-canvas dialog::backdrop{background:rgb(8 12 22 / .65)}
.drum-canvas :is(input,select){color-scheme:inherit}
.drum-canvas :is(.dc-score,.dc-grid-scroll){scrollbar-color:var(--dc-border) var(--dc-panel)}
.drum-canvas .dc-more>div>label{justify-content:space-between}
.drum-canvas .dc-more>div>label>select{min-width:110px}

/* 2.4 host integration and consistent control geometry. */
:where(.drum-canvas){--dc-brand:#6354cf;--dc-accent:var(--dc-brand);--dc-on-accent:#fff;--dc-selected:color-mix(in srgb,var(--dc-accent) 10%,var(--dc-bg));padding:24px;border:1px solid var(--dc-border);border-radius:16px;box-shadow:0 6px 28px rgb(20 30 50 / .06)}
:where(.drum-canvas[data-theme="dark"]){--dc-accent:var(--dc-brand);--dc-on-accent:#fff;--dc-selected:color-mix(in srgb,var(--dc-accent) 22%,var(--dc-bg))}
.drum-canvas .dc-top{padding:0 0 20px;min-height:64px}
.drum-canvas :is(button,summary,select,input){font-weight:400;line-height:1.4}
.drum-canvas :is(button,summary){font-size:13px}
.drum-canvas :is(.dc-actions,.dc-grid-navigation,.dc-grid-tools,.dc-scorebar>div){display:flex;align-items:center;gap:10px}
.drum-canvas :is(.dc-actions button,.dc-actions summary,.dc-toolbar>button,.dc-toolbar>label>input,.dc-toolbar>.dc-more>summary,.dc-scorebar button,.dc-scorebar summary,.dc-grid-heading button,.dc-grid-heading summary,.dc-grid-heading select){min-height:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border:1px solid var(--dc-border);border-radius:8px;background:var(--dc-bg);color:var(--dc-ink);font-size:13px;box-sizing:border-box}
.drum-canvas .dc-actions summary{gap:8px;list-style:none}
.drum-canvas .dc-actions .dc-primary,.drum-canvas .dc-toolbar .dc-play{background:var(--dc-accent);border-color:var(--dc-accent);color:var(--dc-on-accent)}
.drum-canvas .dc-toolbar .dc-play{width:44px;height:44px;font-size:19px;border-radius:50%;padding:8px}
.drum-canvas .dc-toolbar>button:not(.dc-play){width:42px;font-size:21px;padding:7px}
.drum-canvas .dc-toolbar>label{height:44px;gap:10px}
.drum-canvas .dc-view-switch button{min-height:40px;padding:9px 16px;font-size:13px}
.drum-canvas .dc-grid-navigation>button:not(.dc-meter-pill){width:42px;font-size:24px;padding:4px}
.drum-canvas .dc-grid-navigation .dc-meter-pill{margin:0;font-size:13px;color:var(--dc-ink)}
.drum-canvas .dc-grid-heading{align-items:center;flex-wrap:wrap;margin-bottom:18px}
.drum-canvas .dc-grid-tools>label{display:flex;align-items:center;gap:10px;margin:0}
.drum-canvas .dc-menu label{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:42px;padding:8px 10px;font-size:13px;font-weight:400}
.drum-canvas .dc-menu input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:0;padding:0}
.drum-canvas .dc-menu label span{font-weight:400;line-height:1.4}
.drum-canvas select,.drum-canvas option{font-weight:400!important;font-size:13px}
.drum-canvas .dc-grid-drum{font-size:12px;min-height:38px}
.drum-canvas .dc-menu button{font-size:13px;min-height:42px}
.drum-canvas .dc-scorebar{margin:16px 0 12px}
.drum-canvas .dc-footer{padding:14px 0 0;font-size:11px}
.drum-canvas .dc-grid-caption{font-size:11px}
@media(max-width:600px){.drum-canvas{padding:14px;border-radius:12px}.drum-canvas .dc-top{padding-bottom:14px}.drum-canvas .dc-toolbar{gap:8px}.drum-canvas .dc-grid-tools{flex-wrap:wrap}.drum-canvas .dc-scorebar{flex-wrap:wrap}}
.drum-canvas{box-sizing:border-box;min-width:0}
.drum-canvas .dc-actions button.dc-primary,.drum-canvas .dc-toolbar>button.dc-play{background:var(--dc-accent);color:var(--dc-on-accent);border-color:var(--dc-accent)}
.drum-canvas .dc-toolbar>button.dc-play{border-radius:50%;width:44px;height:44px;font-size:19px}
.drum-canvas .dc-title{font-weight:600}
.drum-canvas .dc-instrument-menu .dc-menu{max-height:300px;overflow-y:auto;overscroll-behavior:contain}

/* Consistent chevrons and focused editing states. */
.drum-canvas summary{list-style:none;display:flex;align-items:center;gap:9px}
.drum-canvas summary::marker{content:''}
.drum-canvas summary::after{content:'';display:inline-block;width:16px;height:16px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.drum-canvas .dc-bar-menu>summary::after{display:none}
.drum-canvas select{appearance:none;padding-right:32px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23778094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-position:right 9px center!important;background-size:16px!important;background-repeat:no-repeat!important}
.drum-canvas[data-grid-tool='paint'] .dc-step,.drum-canvas[data-grid-tool='select'] .dc-step{touch-action:none}
.drum-canvas .dc-step.is-picked{outline:2px solid var(--dc-accent);outline-offset:1px}
.drum-canvas .dc-step.is-playing{box-shadow:inset 0 0 0 3px var(--dc-ink);filter:brightness(1.15)}
.drum-canvas .dc-example-preview,.drum-canvas [data-dc='legendContent']{overflow:auto;margin:16px 0;border:1px solid var(--dc-border);border-radius:8px}
.drum-canvas [data-dc='saveState']{margin-left:auto;margin-right:16px;color:var(--dc-muted)}
.drum-canvas .dc-grid-tools{flex-wrap:wrap;justify-content:flex-end}
.drum-canvas dialog{max-height:85vh;overflow:auto}

.drum-canvas .dc-legend-list{columns:2;column-gap:32px;padding:0 28px 16px;font-size:13px}.drum-canvas .dc-legend-list li{padding:4px;break-inside:avoid}

/* Options: consistent rows, distinct groups, comfortable pointer targets. */
.drum-canvas .dc-more>.dc-options-panel{width:310px;max-width:calc(100vw - 48px);top:calc(100% + 8px);padding:16px;gap:16px;max-height:70vh;overflow:auto;border-radius:12px;box-shadow:0 12px 40px rgb(0 0 0 / .18)}
.drum-canvas .dc-option-group{display:grid;gap:4px;margin:0;padding:0}
.drum-canvas .dc-option-group+.dc-option-group{border-top:1px solid var(--dc-border);padding-top:14px}
.drum-canvas .dc-option-group h3{margin:0 0 6px;padding:0;font:600 11px/1.5 system-ui;letter-spacing:.08em;text-transform:uppercase;color:var(--dc-muted)}
.drum-canvas .dc-option-group label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;margin:0;padding:4px 0;font-size:13px;color:var(--dc-ink)}
.drum-canvas .dc-option-group input[type=checkbox]{margin:0;width:18px;height:18px;flex:0 0 18px}
.drum-canvas .dc-option-group select{width:115px;min-height:40px}
.drum-canvas .dc-option-group button,.drum-canvas .dc-option-patterns button{width:100%;min-height:42px;text-align:left;font-size:13px}
.drum-canvas .dc-option-patterns>summary{min-height:42px;padding:6px 0;justify-content:space-between;font-size:13px;color:var(--dc-ink)}
.drum-canvas .dc-pattern-label{display:grid;gap:6px;margin:8px 0 12px;font-size:12px}
.drum-canvas .dc-pattern-label select{width:100%;min-height:42px}
.drum-canvas .dc-option-patterns small{margin-top:9px;line-height:1.6;font-size:11px}
.drum-canvas .dc-actions .dc-fullscreen{width:42px;flex:0 0 42px;padding:9px;display:inline-flex;align-items:center;justify-content:center}
.drum-canvas .dc-fullscreen svg{display:block;width:22px;height:22px;flex:none;pointer-events:none}
.drum-canvas:fullscreen,.drum-canvas.dc-expanded{width:100%;height:100%;max-height:none;max-width:none;margin:0;border-radius:0;box-sizing:border-box;overflow:auto}
.drum-canvas:fullscreen::backdrop{background:var(--dc-bg)}
/* Expanded desktop workspace: score grows, editing dock stays below it. */
@media (min-width:1000px) and (min-height:800px){
 .drum-canvas.dc-expanded{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
 .drum-canvas.dc-expanded>.dc-top,
 .drum-canvas.dc-expanded>.dc-toolbar,
 .drum-canvas.dc-expanded>.dc-notation-tools,
 .drum-canvas.dc-expanded>.dc-scorebar,
 .drum-canvas.dc-expanded>.dc-footer{flex:0 0 auto}
 .drum-canvas.dc-expanded>.dc-editor{flex:1 1 0;min-height:180px;display:flex;flex-direction:column}
 .drum-canvas.dc-expanded .dc-sheet{display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%}
 .drum-canvas.dc-expanded .dc-score{flex:1 1 0;min-height:0;max-height:none;overflow:auto;align-content:start}
 .drum-canvas.dc-expanded .dc-emptyhint{flex:0 0 auto}
 .drum-canvas.dc-expanded>.dc-grid-deck{flex:0 1 auto;max-height:40vh;min-height:180px;display:flex;flex-direction:column}
 .drum-canvas.dc-expanded .dc-grid-heading,
 .drum-canvas.dc-expanded .dc-grid-caption{flex:0 0 auto}
 .drum-canvas.dc-expanded .dc-grid-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
 .drum-canvas.dc-expanded .dc-notation-tools{max-height:25vh;overflow:auto}
}

/* Unified settings and contextual explanations. */
.drum-canvas .dc-settings-dialog{width:min(720px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:24px}
.drum-canvas .dc-settings-dialog .dc-options-panel{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:auto;min-width:0;padding:0;border:0;box-shadow:none;background:transparent}
.drum-canvas .dc-settings-dialog .dc-option-group{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;min-width:0}
.drum-canvas .dc-settings-dialog .dc-option-group label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px;width:100%;margin:0}
.drum-canvas .dc-setting-hint{display:block;font-size:12px;line-height:1.5;font-weight:400;opacity:.78;grid-column:1/-1;margin:4px 0 0}
.drum-canvas .dc-settings-dialog .dc-menu{position:static;display:grid;gap:10px;padding:0;min-width:0;box-shadow:none;border:0;background:transparent}
.drum-canvas .dc-settings-dialog .dc-menu label{display:flex;justify-content:flex-start;gap:12px}
.drum-canvas .dc-settings-dialog h3{margin:0;font-size:15px}
.drum-canvas .dc-settings-dialog .dc-dialog-top{margin-bottom:22px;align-items:center}
.drum-canvas .dc-settings-dialog .dc-dialog-top h2{margin:0}
.drum-canvas .dc-note-dialog details{font-size:13px;line-height:1.6;margin:12px 0}
@media(max-width:600px){.drum-canvas .dc-settings-dialog .dc-options-panel{grid-template-columns:1fr}}

.drum-canvas .dc-settings-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:9px;flex-shrink:0}.drum-canvas .dc-settings-toggle svg{display:block;width:22px;height:22px;pointer-events:none}