.music-symbols{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:17px 0 0;padding:0;max-width:100%}
.music-symbols .music-symbol{display:flex;align-items:center;justify-content:center;flex:0 0 58px;width:58px;height:58px;min-height:44px;padding:2px;border:0;border-radius:8px;background:transparent;box-shadow:none;cursor:help;position:relative}
.music-symbols .music-symbol:hover,.music-symbols .music-symbol:focus-visible{background:rgba(127,127,127,.13)}
.music-symbols .music-symbol:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.music-symbol-frame{display:block;position:relative;overflow:hidden;flex:none;pointer-events:none}
.music-symbol-frame img{position:absolute;max-width:none!important;max-height:none!important;object-fit:fill;pointer-events:none}
.music-symbol-legacy{width:40px;height:36px}
.music-symbol-single{width:40px;height:40px;object-fit:contain;pointer-events:none}
.music-symbol-sheet-d{display:block;width:40px;height:40px;background-size:600% 600%;background-repeat:no-repeat;pointer-events:none}
.music-symbol-tooltip{position:fixed;z-index:10000;box-sizing:border-box;width:max-content;max-width:min(360px,calc(100vw - 20px));max-height:calc(100vh - 20px);overflow:auto;padding:13px 16px;border:1px solid #53625e;border-radius:9px;background:#172320;color:#f2f6f4;box-shadow:0 8px 25px #0003;font:14px/1.5 system-ui,sans-serif;text-align:left;overflow-wrap:anywhere}
.music-symbol-tooltip[hidden]{display:none}
.music-symbol-tooltip strong{display:block;font-size:15px;color:#f0d39b}.music-symbol-tooltip p{margin:7px 0}.music-symbol-tooltip small{display:block;color:#c9d8d2;font-size:12px;margin-top:8px}

.music-symbol-art{display:flex;width:40px;height:40px;flex:none;align-items:center;justify-content:center;pointer-events:none;transform:scale(1.3)}
.music-symbol-preview{display:flex;align-items:center;justify-content:center;height:144px;margin:0 0 10px}
.music-symbol-preview .music-symbol-art{transform:scale(3.2)}

.music-symbol-tooltip .music-symbol-filter-path{display:block;border-top:1px solid #53625e;margin-top:12px;padding-top:9px;color:#f0d39b;font-size:12px;line-height:1.5}

/* Keep the artwork beside the explanation, rather than above it. */
.music-symbol-tooltip{width:420px;max-width:calc(100vw - 20px);display:flow-root}
.music-symbol-tooltip[hidden]{display:none}
.music-symbol-tooltip .music-symbol-preview{float:left;width:78px;height:86px;margin:0 15px 5px 0}
.music-symbol-tooltip .music-symbol-preview .music-symbol-art{transform:scale(1.8)}
.music-symbol-tooltip .music-symbol-filter-path{clear:both}
@media(max-width:480px){.music-symbol-tooltip .music-symbol-preview{width:62px;height:70px;margin-right:12px}.music-symbol-tooltip .music-symbol-preview .music-symbol-art{transform:scale(1.45)}}

/* A genuinely enlarged artwork preview inside the explanation popup. */
@media(min-width:481px){
 .music-symbol-tooltip{width:480px}
 .music-symbol-tooltip .music-symbol-preview{width:136px;height:144px;margin:0 18px 8px 0}
 .music-symbol-tooltip .music-symbol-preview .music-symbol-art{transform:scale(3.2)}
}
@media(max-width:480px){
 .music-symbol-tooltip .music-symbol-preview{width:96px;height:104px;margin:0 14px 8px 0}
 .music-symbol-tooltip .music-symbol-preview .music-symbol-art{transform:scale(2.2)}
}

/* Hover previews the symbol; activation opens its explanation. */
.music-symbols .music-symbol{cursor:pointer;overflow:visible}
.music-symbols .music-symbol>.music-symbol-art{transition:transform 140ms ease;transform-origin:center}
@media(hover:hover) and (pointer:fine){
 .music-symbols .music-symbol:hover{z-index:2}
 .music-symbols .music-symbol:hover>.music-symbol-art{transform:scale(2.1)}
}
.music-symbols .music-symbol:focus-visible{z-index:2}
.music-symbols .music-symbol:focus-visible>.music-symbol-art{transform:scale(2.1)}
@media(prefers-reduced-motion:reduce){.music-symbols .music-symbol>.music-symbol-art{transition:none}}

/* Native symbol follows the same portrait, filter and enlarged tooltip sizing. */
.music-symbol-emoji{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font:36px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;pointer-events:none}

.music-symbol-apply-filter{display:block;clear:both;width:100%;margin-top:12px;padding:10px 12px;border:1px solid #eac17b;border-radius:6px;background:#303a2e;color:#f0d39b;text-align:left;font:inherit;cursor:pointer}
.music-symbol-apply-filter:hover{background:#40513c}