.drum-notation-title{display:flex;align-items:center;gap:8px}
/* Engraved glyphs use left-to-right coordinates, including on Hebrew pages.
   RTL text anchoring moves the noteheads away from the separately drawn stems. */
.drum-score{direction:ltr;unicode-bidi:isolate}
.drum-randomize{background:linear-gradient(135deg,#7c3aed,#a21caf)!important;color:#fff!important;border:1px solid #c084fc;box-shadow:0 2px 8px #7c3aed33}
.drum-randomize svg{color:#fde68a}
.drum-randomize-track{color:#d8b4fe!important;background:#7c3aed33;border-radius:5px;opacity:1!important}
.drum-randomize-track:hover{color:#fff!important;background:#7c3aed88}
.drum-guide-open{display:inline-grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid #a58bc8;border-radius:6px;background:#49375f;color:#f0e3ff;font:700 13px/1 system-ui;cursor:pointer}
.drum-notation-guide{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto!important;padding:22px!important;line-height:1.6}
.drum-notation-guide::backdrop{background:#0008}
.drum-notation-guide:not(:popover-open){display:none}
.drum-notation-guide h2{padding-inline-end:32px}
.drum-notation-guide>.grid{grid-template-columns:1fr;gap:18px}
.drum-guide-close{position:absolute;top:16px;inset-inline-end:16px;width:28px;height:28px;padding:0;border:1px solid #64748b;border-radius:6px;background:#334155;color:#fff;font:22px/1 system-ui;cursor:pointer}
.drum-kit-error{margin:0;color:#fda4af;font-size:12px;line-height:1.4}
.drum-machine-toolbar button:disabled{opacity:.55;cursor:wait}
.drum-metronome-control{display:flex;flex-direction:row;align-items:center;gap:3px;flex:none}
.drum-metronome-sound{height:26px;padding:0 6px;border:1px solid #64748b;border-radius:5px;background:#334155;color:#e2e8f0;font:600 10px/1 system-ui;white-space:nowrap;cursor:pointer}
.drum-metronome-sound[aria-pressed=true]{border-color:#34d399;color:#a7f3d0}
.drum-metronome-sound:focus-visible{outline:2px solid #34d399;outline-offset:2px}
.drum-metronome-audio{display:flex;flex-direction:row;direction:ltr;align-items:center;gap:5px;padding-top:10px;flex:none}
.drum-metronome-audio .drum-metronome-sound{margin-bottom:10px}
.drum-metronome-volume{display:flex;flex-direction:column;align-items:center;gap:1px}
.drum-metronome-volume output{color:#a7f3d0;font:600 9px/1 system-ui;direction:ltr}
.drum-click-knob{box-sizing:border-box;position:relative;width:32px;height:32px;border:1px solid #64748b;border-radius:50%;background:#1e293b;box-shadow:inset 0 2px 5px #0009,0 1px 4px #0005;cursor:ns-resize;touch-action:none}
.drum-click-knob-pointer{position:absolute;inset:3px;border-radius:50%;transform:rotate(var(--click-knob-angle));pointer-events:none}
.drum-click-knob-pointer::before{content:"";display:block;width:3px;height:8px;margin:auto;background:#34d399;border-radius:2px;box-shadow:0 0 4px #34d39966}
.drum-click-knob:focus-visible{outline:2px solid #34d399;outline-offset:2px}
.drum-midi-controls{display:flex;align-items:center}
.drum-midi-tab{height:28px;padding:3px 9px;border:1px solid #a78bfa;border-radius:6px;background:#5b21b6;color:#fff;font:600 12px/1.2 system-ui;white-space:nowrap;cursor:pointer}
.drum-midi-tab[data-connected=true]{border-color:#34d399;background:#065f46}
.drum-midi-panel{box-sizing:border-box;position:fixed;inset:105px 16px auto auto;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 125px);overflow:auto;margin:0;padding:18px;border:1px solid #64748b;border-radius:12px;background:#1e293b;color:#e2e8f0;box-shadow:0 12px 40px #0008;font:14px/1.5 system-ui}
.drum-midi-panel::backdrop{background:#0003}
.drum-midi-panel h2{margin:0 0 12px;padding-inline-end:30px;font-size:17px;font-weight:700}
.drum-midi-close{position:absolute;top:12px;inset-inline-end:12px;padding:0;width:26px;height:26px;border:1px solid #64748b;border-radius:5px;background:#334155;color:#fff;font:20px/1 system-ui;cursor:pointer}
.drum-midi-panel select{box-sizing:border-box;display:block;width:100%;margin:8px 0;padding:6px;border:1px solid #64748b;border-radius:6px;background:#0f172a;color:#e2e8f0}
.drum-midi-connect,.drum-midi-exports button{padding:7px 10px;border:1px solid #64748b;border-radius:6px;color:#fff;background:#334155;font:600 12px/1.4 system-ui;cursor:pointer}
.drum-midi-connect{background:#065f46;border-color:#34d399}
.drum-midi-connect:disabled{opacity:.6;cursor:wait}
.drum-midi-exports{display:flex;gap:8px;border-top:1px solid #475569;padding-top:12px}
.drum-midi-exports .drum-export-midi{background:#b45309;border-color:#fbbf24}
.drum-midi-hint{margin:8px 0;color:#cbd5e1;font-size:11px;line-height:1.5}
.drum-midi-status{min-height:20px;color:#a7f3d0;font-size:12px}
.drum-machine-toolbar .drum-metronome{width:70px!important;height:70px!important;padding:9px!important;margin:0!important;flex:none;background:transparent;border:0;cursor:pointer;display:grid;place-items:center}
.drum-metronome:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:8px}
.drum-metronome .measure-circle{box-sizing:border-box;position:relative;display:block;width:52px;height:52px;border-radius:50%;border:2px solid #64748b;background:radial-gradient(circle,#101827,#1e293b);box-shadow:inset 0 3px 8px #0008}
.drum-metronome .circle-hand{position:absolute;bottom:50%;left:50%;width:2px;height:21px;background:linear-gradient(to top,#e5c15833,#e5c158);transform-origin:bottom center;transform:translateX(-50%) rotate(0deg);border-radius:2px;z-index:2}
.drum-metronome .circle-marker{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px;background:#cbd5e1;border-radius:50%;z-index:4;color:#0f172a}
.drum-metronome .circle-marker.downbeat{background:#e74c3c;color:white}
.drum-metronome .circle-marker.flash{background:#fff;box-shadow:0 0 7px #fff8}
.drum-metronome .circle-marker.downbeat.flash{background:#ff9999;box-shadow:0 0 7px #ff9999}
.drum-metronome .beat-number{position:absolute;top:50%;left:50%;font:700 8px/1 system-ui;white-space:nowrap}

@media(min-width:900px) and (min-height:600px){
  body{margin:0;padding:0!important}
  #root>.drum-machine-app{height:100dvh;min-height:0;padding:12px 60px 8px!important;align-items:stretch}
  .drum-machine-workspace{height:100%;max-width:1700px;min-height:0;margin:auto;display:flex;flex-direction:column;gap:10px}
  .drum-machine-toolbar{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:8px 12px!important;margin:0;min-width:0}
  .drum-machine-toolbar>div{gap:8px;margin:0;min-width:0}
  .drum-machine-toolbar>div:last-child{justify-content:flex-end;gap:6px}
  .drum-machine-toolbar>div:first-child>button{height:38px;padding:6px 15px;margin:0;font-size:14px}
  .drum-machine-toolbar>div:first-child>.h-12{height:38px;padding:5px 9px;font-size:12px}
  .drum-machine-toolbar [title="Drag up/down to change volume"]{width:38px!important;height:38px!important}
  .drum-machine-toolbar .uppercase{font-size:9px;line-height:1}
  .drum-machine-toolbar>div:last-child>.bg-slate-700{padding:6px 9px;gap:6px}
  .drum-machine-toolbar select{font-size:12px;max-width:260px}
  .drum-machine-toolbar>div:last-child>button{padding:5px 9px;font-size:12px}
  .drum-machine-toolbar input[type=number]{width:50px;font-size:13px}
  .drum-sequencer{flex:1;min-height:272px;margin:0;display:flex}
  .drum-sequencer>.overflow-x-auto{width:100%;padding:8px 12px!important;overflow:visible}
  #root .drum-track-grid{min-width:0!important;height:100%;display:flex;flex-direction:column;gap:4px}
  #root .drum-track-grid>.group{height:auto!important;min-height:28px;flex:1;margin:0!important}
  #root .drum-track-grid>.group>div:first-child{width:256px;flex:none;padding-right:10px;margin-right:8px}
  .drum-track-grid>.group>div:last-child{min-width:0;gap:3px}
  .drum-track-grid>.group>div:last-child>button{height:clamp(26px,4.2vh,36px);min-width:0}
  .drum-track-grid .drum-instrument-icon{width:28px;height:28px;flex-basis:28px}
  .drum-track-grid .drum-instrument-preview{width:28px;height:28px;flex-basis:28px}
  .drum-notation{flex:none;margin:0;padding:8px 12px!important}
  .drum-notation>div:first-child{margin:0;gap:6px}
  .drum-notation h2{font-size:14px;line-height:1.4}
  .drum-step-help{font-size:11px;line-height:1.4;margin:4px 0 6px}
  .drum-score{width:100%;padding:4px 8px;overflow:visible}
  .drum-score>div{width:100%!important;min-width:0}
  .drum-score svg{display:block;width:100%!important;height:200px!important;max-width:100%}
  footer[data-cr-footer]{margin:0!important;padding:4px 8px!important;font-size:10px!important;line-height:1.3!important}
}
@media(min-width:900px) and (max-height:700px) and (min-height:600px){
  .drum-machine-workspace{gap:7px}
  .drum-score svg{height:150px!important}
}
@media(min-width:900px) and (max-height:620px) and (min-height:600px){.drum-score svg{height:125px!important}}
@media(min-width:900px) and (max-width:1100px) and (min-height:600px){
  .drum-machine-toolbar>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700{min-width:0;padding:5px 7px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700>span{flex:none;font-size:11px}
  .drum-machine-toolbar>div:last-child select{min-width:0;width:100%;font-size:11px}
  .drum-machine-toolbar>div:last-child>button{justify-content:center;padding:5px;font-size:11px;white-space:nowrap}
}
/* Keep transport, selectors and actions on one shared toolbar line. */
@media(min-width:900px) and (min-height:600px){
  .drum-machine-toolbar>div:last-child{display:flex;flex-wrap:nowrap;gap:5px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700{min-width:0;flex:1 1 145px;padding:5px 7px;gap:5px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700:first-child{flex:0 0 95px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700 select{min-width:0;width:100%;flex:1;font-size:11px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700>span{font-size:11px;flex:none}
  .drum-machine-toolbar>div:last-child>.flex:last-child{width:auto;flex:none;gap:5px;flex-wrap:nowrap}
  .drum-machine-toolbar>div:last-child>.flex:last-child>button{margin:0;padding:6px 8px;font-size:11px;white-space:nowrap}
}
@media(min-width:900px) and (max-width:1200px) and (min-height:600px){
  .drum-machine-toolbar{padding:8px!important;gap:5px}
  .drum-machine-toolbar>div:first-child{gap:5px}
  .drum-machine-toolbar>div:first-child>button{padding:5px 9px;font-size:12px}
  .drum-machine-toolbar>div:first-child>.h-12{padding:5px;gap:4px;font-size:10px}
  .drum-machine-toolbar input[type=number]{width:40px;font-size:12px}
  .drum-machine-toolbar [title="Drag up/down to change volume"]{width:30px!important;height:30px!important}
  .drum-machine-toolbar>div:last-child>.bg-slate-700{padding:5px;gap:3px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700:first-child{flex-basis:53px}
  .drum-machine-toolbar>div:last-child>.bg-slate-700>span{display:none}
  .drum-machine-toolbar>div:last-child>.bg-slate-700>svg{display:none}
  .drum-machine-toolbar>div:last-child>.flex:last-child>button{width:28px;height:28px;padding:4px;font-size:0}
  .drum-machine-toolbar>div:last-child>.flex:last-child>button svg{width:16px;height:16px}
  .drum-machine-toolbar>div:last-child>.flex:last-child>button:nth-of-type(3)::before{content:"⌫";font:18px/1 system-ui}
  .drum-midi-tab{padding:3px 5px;font-size:10px}
}
/* Audio-clock-synchronized flash on the sounding notation heads. */ .drum-note-playing{filter:drop-shadow(0 0 4px #ffca45) drop-shadow(0 0 8px #ffca4580)}.drum-note-playing path,.drum-note-playing text{fill:#ffd34d!important;stroke:#ffd34d!important}