.rhythm-library{min-width:0}
.rhythm-library-toolbar,.rhythm-builder-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.rhythm-library .rhythm-round,.rhythm-chooser .rhythm-round{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;min-height:34px;min-width:34px;padding:8px;border:1px solid #e5e5e5;border-radius:50%;background:#fff;color:#333;box-shadow:0 1px 3px #00000005}
.rhythm-library .rhythm-round:hover{background:#eee;border-color:#ccc}
.rhythm-library .rhythm-round:active{transform:scale(.94)}
.rhythm-library .rhythm-round svg{width:17px;height:17px;pointer-events:none}
.rhythm-library [data-rhythm-action=new],.rhythm-library [data-rhythm-action=save]{background:#111;border-color:#111;color:white}
.rhythm-library [data-rhythm-action=new]:hover,.rhythm-library [data-rhythm-action=save]:hover{background:#333;border-color:#333}
.rhythm-library [data-rhythm-action=clear],.rhythm-library [data-rhythm-action=delete]{color:#bd3b3b;background:#fff8f8;border-color:#f0dddd}
.rhythm-library [data-rhythm-action=clear]:hover,.rhythm-library [data-rhythm-action=delete]:hover{background:#ffeded;border-color:#e7bcbc}
.rhythm-search{display:flex;align-items:center;gap:7px;width:100%;min-width:0;padding:0 10px;border:1px solid #e1e1e1;border-radius:11px;background:#fff;transition:border-color .14s,box-shadow .14s}
.rhythm-search svg{display:block;flex:none;width:15px;height:15px;color:#888}
/* Match the editor's compound input selector so only the outer search frame paints. */
:is(#editor,#score-popover) .rhythm-search input[type=search],
:is(#editor,#score-popover) .rhythm-search input[type=search]:is(:focus,:focus-visible){appearance:none;-webkit-appearance:none;flex:1;min-width:0;min-height:37px;width:100%;padding:8px 0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;outline:none;line-height:20px}
.rhythm-search:focus-within{border-color:#999;box-shadow:0 0 0 3px #11111106}
.rhythm-search input::-webkit-search-cancel-button,.rhythm-search input::-webkit-search-decoration{appearance:none;-webkit-appearance:none}
.rhythm-card-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.rhythm-card{position:relative;width:100%;min-width:0;padding:12px 10px 7px;text-align:left;border:1px solid #e4e4e4;border-radius:14px;background:white;white-space:normal;overflow:hidden}
.rhythm-card:hover{border-color:#bcbcbc;background:#fff;box-shadow:0 3px 13px #00000009}
.rhythm-card-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 3px;margin-bottom:3px}
.rhythm-card-heading strong{min-width:0;font-size:12px;font-weight:600;color:#333;overflow-wrap:anywhere;line-height:1.5}
.rhythm-card-heading>span{flex:none;color:#909090;font-size:10px;font-variant-numeric:tabular-nums}
.rhythm-card .rhythm-tab{display:block;width:100%;height:auto;max-height:152px;pointer-events:none}
.rhythm-continuation{position:absolute;bottom:6px;right:13px;letter-spacing:2px;color:#aaa;font-size:9px}
.rhythm-staff{stroke:#bbb;stroke-width:.8}
.rhythm-barline{stroke:#777;stroke-width:1}
.rhythm-attack{stroke:#111;stroke-width:1.5;stroke-linecap:round;fill:none}
.rhythm-stem{stroke:#333;stroke-width:1}
.rhythm-beam{stroke:#333;stroke-width:2}
.rhythm-dynamic-line{stroke:#ddd;stroke-width:.8;stroke-dasharray:2 4}
.rhythm-dynamic-attack{fill:white;stroke:#333;stroke-width:1.5}
.rhythm-string-label,.rhythm-target-label,.rhythm-beat{text-anchor:middle;fill:#777;font:11px "Segoe UI","Microsoft YaHei",sans-serif}
.rhythm-target-label{font-size:10px;fill:#666}
.rhythm-empty{padding:30px 12px;text-align:center;font-size:12px;color:#888}
.rhythm-builder-toolbar>span{flex:1}
.rhythm-editor-card{border:1px solid #e3e3e3;border-radius:15px;background:white;padding:12px 10px;min-width:0}
#editor .rhythm-name{display:block;width:100%;min-height:38px;padding:8px 6px;margin:0 0 10px;text-align:center;border:1px solid transparent;background:transparent;border-radius:9px;font-size:14px;font-weight:600}
#editor .rhythm-name:hover{border-color:#e7e7e7}
#editor .rhythm-name:focus{border-color:#bbb;box-shadow:none}
.rhythm-bar-controls{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 9px}
.rhythm-bar-count{font:11px "Segoe UI","Microsoft YaHei",sans-serif;color:#555;min-width:42px;text-align:center}
.rhythm-bar-controls .rhythm-round{width:24px;height:24px;min-width:24px;min-height:24px;padding:5px;border-color:transparent;box-shadow:none;background:transparent}
.rhythm-bar-controls .rhythm-round svg{width:13px;height:13px}
.rhythm-bar-tabs{display:flex;gap:3px;overflow:auto;scrollbar-width:thin;margin:0 0 10px;max-width:100%;padding:2px}
.rhythm-bar-tabs button{flex:none;min-width:28px;height:28px;padding:3px 8px;border:0;border-radius:7px;background:transparent;color:#888;font-size:11px}
.rhythm-bar-tabs button[aria-selected=true]{background:#222;color:white}
.rhythm-bar-tabs button:not([aria-selected=true]):hover{background:#eee;color:#222}
.rhythm-grid-density{display:flex;gap:2px;background:#f2f2f2;border-radius:9px;padding:3px;margin:0 0 10px}
.rhythm-grid-density button{flex:1;min-width:0;border:0;border-radius:6px;font:11px ui-monospace,monospace;padding:5px 2px;background:transparent;color:#777}
.rhythm-grid-density button[aria-pressed=true]{background:white;color:#111;box-shadow:0 1px 3px #00000010}
.rhythm-grid-density button:not([aria-pressed=true]):hover{background:#e8e8e8}
.rhythm-grid-scroll{max-width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ccc transparent;padding:0 0 4px;overscroll-behavior:contain}
.rhythm-grid-scroll .rhythm-tab{display:block;max-width:none;height:223px;touch-action:pan-x}
.rhythm-grid{stroke:#eee;stroke-width:.6;pointer-events:none}
.rhythm-grid.major{stroke:#bcbcbc;stroke-width:.8}
.rhythm-cell{fill:transparent;stroke:none;cursor:pointer}
.rhythm-cell:hover{fill:#11111110}
.rhythm-cursor{fill:#11111108;stroke:#777;stroke-width:1;pointer-events:none}
.rhythm-tab-editable:focus{outline:0}
.rhythm-tab-editable:focus-visible .rhythm-cursor{stroke:#111;stroke-width:1.5}
.rhythm-builder-footer{display:flex;align-items:center;gap:7px;padding:10px 0 0;border-top:1px solid #eee;margin-top:8px}
.rhythm-dynamic-key{display:flex;align-items:center;gap:5px;margin-right:auto;color:#777;font-size:10px}
.rhythm-dynamic-key svg{width:12px;height:12px;color:#999}
.rhythm-builder-footer .rhythm-round{width:29px;height:29px;min-width:29px;min-height:29px;padding:7px}
.rhythm-chooser{width:100%;min-width:0}
.rhythm-chooser .rhythm-search{margin-bottom:11px}
.rhythm-chooser .rhythm-card-list{max-height:min(60vh,460px);overflow:auto;scrollbar-width:thin;padding:1px 3px 2px 1px}
.rhythm-chooser .rhythm-card{padding-top:10px}
@media(max-width:760px){
 .rhythm-library .rhythm-round{width:38px;height:38px;min-width:38px;min-height:38px}
 :is(#editor,#score-popover) .rhythm-search input[type=search],:is(#editor,#score-popover) .rhythm-search input[type=search]:is(:focus,:focus-visible){font-size:16px;min-height:42px}
 #editor .rhythm-name{font-size:16px}
 .rhythm-bar-controls .rhythm-round{width:28px;height:28px;min-width:28px;min-height:28px;padding:6px}
 .rhythm-card-heading strong{font-size:14px}
 .rhythm-grid-density button{min-height:32px;font-size:12px}
 .rhythm-builder-footer .rhythm-round{width:34px;height:34px;min-width:34px;min-height:34px}
}
@media(prefers-reduced-motion:reduce){.rhythm-library .rhythm-round:active{transform:none}}