.aya-playable-svg{overflow:visible;isolation:isolate}.aya-playable-note{cursor:pointer;touch-action:none;outline:none;transition:filter .11s ease-out}.aya-playable-note text{pointer-events:none;user-select:none}.aya-playable-note:hover{filter:brightness(1.12)}.aya-playable-note:focus-visible{filter:brightness(1.35) drop-shadow(0 0 5px #f7dca0)}.aya-playable-note.aya-note-active{filter:none}.aya-handpan-controls{width:100%;max-width:780px;margin:2px auto 0;padding:16px 0 2px}.aya-handpan-hint{font-size:13px;line-height:1.7;color:#d2c3a9;margin:0 0 18px}.aya-handpan-transport{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.aya-handpan-play{min-width:112px;min-height:46px;display:inline-flex;gap:10px;align-items:center;justify-content:center;cursor:pointer}.aya-handpan-play:disabled{opacity:.6;cursor:wait}.aya-handpan-play:focus-visible{outline:2px solid #f2d7a0;outline-offset:4px}.aya-handpan-demo-name{font-size:14px;color:#eee2ca}.aya-handpan-volume{display:flex;align-items:center;gap:10px;font-size:12px;color:#c8b99e}.aya-handpan-volume input{width:92px;accent-color:#c99b6b;cursor:pointer}.aya-handpan-progress{height:3px;max-width:600px;background:#64513a;margin:22px auto 10px;border-radius:5px;overflow:hidden}.aya-handpan-progress>span{display:block;width:0;height:100%;background:#e1bc84}.aya-handpan-status{display:flex;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto;color:#d5bb90;font-size:12px;min-height:22px}.aya-handpan-status output{font-weight:600}.aya-handpan-preview-label{margin:14px 0 0!important;color:#ad9c82;font-size:11px!important;letter-spacing:.05em}@media(prefers-reduced-motion:reduce){.aya-playable-note{transition:none}}@media(max-width:640px){.aya-handpan-controls{padding-top:4px}.aya-handpan-hint{font-size:12px}.aya-handpan-transport{gap:12px}.aya-handpan-volume{flex-basis:100%;justify-content:center}.aya-handpan-status{font-size:11px}.aya-handpan-preview-label{font-size:10px!important}}

/* Show closely spaced recorded strikes as separate pulses. */
.aya-playable-note{transition:filter .045s ease-out}
.aya-playable-svg.aya-body-active>circle[r="444"]{stroke:#ffe1a3;stroke-width:7;stroke-opacity:1;filter:drop-shadow(0 0 9px #ecc17b)}
@media(prefers-reduced-motion:reduce){.aya-playable-note{transition:none}}

/* Keep both faces and the transport visible together on a phone while playing. */
@media(max-width:640px){
 .aya-digital-handpan{scroll-margin-top:0}
 .aya-digital-handpan.aya-melody-playing .handpan-note-layouts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
 .aya-digital-handpan.aya-melody-playing>.mb-8{margin-bottom:12px}
 .aya-digital-handpan.aya-melody-playing>.mb-8 p,.aya-digital-handpan.aya-melody-playing .aya-handpan-hint{display:none}
 .aya-digital-handpan.aya-melody-playing .handpan-note-layouts figcaption{font-size:11px;line-height:1.4;margin-top:6px}
 .aya-digital-handpan.aya-melody-playing .aya-handpan-status{font-size:14px}
 .aya-digital-handpan.aya-melody-playing .aya-note-active{filter:none}
}

/* Native SVG paint is visible in iPhone Safari without CSS SVG filters. */
.aya-note-strike-overlay{pointer-events:none;transition:opacity .045s ease-out}
.aya-playable-note.aya-note-active>text{fill:#302216;font-weight:700}
@media(prefers-reduced-motion:reduce){.aya-note-strike-overlay{transition:none}}

/* D Aegean currently offers recorded melody playback only. */
[data-digital-handpan][data-note-playback="false"] .aya-playable-note{cursor:default;touch-action:auto}
[data-digital-handpan][data-note-playback="false"] .aya-playable-note:hover{filter:none}

/* A single shell stays centred at full width during melody playback. */
@media(max-width:640px){.aya-digital-handpan.aya-melody-playing .handpan-note-layouts>figure:only-of-type{grid-column:1/-1}}