.audio-mode{border:1px solid #edc9ae;background:#fff8f1;border-radius:9px;padding:9px 12px;color:#8e421e;font:inherit;font-size:13px;min-width:112px;cursor:pointer}.audio-mode:hover{background:#ffebd9}.inversion-toggle{display:flex;align-items:center;gap:8px;margin:16px 0;font-size:14px}.inversion-toggle input{accent-color:#dc601f}.piano-key.active{background:#fffaf5}.piano-key.black.active{background:#332a26}.key-tone-marker,.key-playing-dot{position:absolute;bottom:45px;left:50%;width:clamp(12px,1.7vw,24px);height:clamp(12px,1.7vw,24px);border-radius:50%;pointer-events:none;transform:translateX(-50%);background:var(--note-color,#dc713b);border:2px solid #fff;box-shadow:0 0 0 1px var(--note-color,#dc713b)}.key-playing-dot{bottom:80px;background:var(--note-color,#ee802f);opacity:var(--play-opacity,1);transform:translateX(-50%) scale(var(--play-scale,1));box-shadow:0 0 9px #f29a4666}.piano-key.avoid .key-tone-marker{background:#aaa39c;box-shadow:0 0 0 1px #aaa39c}.answer-note{border-radius:9px;border:2px solid var(--note-color,#ddd);background:white}.answer-note.inversion-bass{border:3px solid var(--note-color);box-shadow:0 0 0 2px #4b302733}.answer-note.avoid-note{border-color:#aaa39c;color:#89817a}.guitar-playing-ring{fill:none;stroke:#35251c;stroke-width:2.5;stroke-dasharray:4 4;opacity:var(--play-opacity,1);pointer-events:none}.guitar-position{will-change:transform}.key-playing-dot,.key-tone-marker{z-index:1}
@media(prefers-reduced-motion:reduce){.guitar-position{transform:none!important}.guitar-playing-ring{stroke-dashoffset:0!important}.key-playing-dot{transform:translateX(-50%)}}