.abc-notation{background-color:var(--abc-bg,#f5f5f5);cursor:pointer;border-radius:4px;max-width:95%;margin:1em 0;padding:1em;position:relative;overflow-x:auto}.abc-notation svg{max-width:100%;height:auto}.abc-notation svg path,.abc-notation svg text{fill:var(--abc-svg-color,#000)}.abc-notation.playing{background-color:var(--abc-playing-bg,#e8f5e9)}.abc-notation:before{content:"▶ Click to play";color:var(--abc-label-color,#666);background-color:var(--abc-label-bg,#ffffffe6);pointer-events:none;border-radius:3px;padding:.3em .6em;font-size:.8em;position:absolute;top:.5em;right:.5em}.abc-notation.playing:before{content:"🔊 Playing...";color:var(--abc-playing-label-color,#2e7d32)}@media (prefers-color-scheme:dark){.abc-notation{--abc-bg:#2d2d2d;--abc-playing-bg:#1a3a1a;--abc-label-color:#aaa;--abc-label-bg:#323232e6;--abc-playing-label-color:#4caf50;--abc-svg-color:#e0e0e0}}:root[data-theme=dark] .abc-notation,.dark .abc-notation,html.dark .abc-notation,.abc-notation.theme-dark{--abc-bg:#2d2d2d;--abc-playing-bg:#1a3a1a;--abc-label-color:#aaa;--abc-label-bg:#323232e6;--abc-playing-label-color:#4caf50;--abc-svg-color:#e0e0e0}.abc-notation.theme-light{--abc-bg:#f5f5f5;--abc-playing-bg:#e8f5e9;--abc-label-color:#666;--abc-label-bg:#ffffffe6;--abc-playing-label-color:#2e7d32;--abc-svg-color:#000}