.audio-note{background:#fff;border:1px solid #eae7f0;border-radius:20px;flex-wrap:wrap;align-items:center;gap:15px;max-width:410px;padding:18px;display:flex;box-shadow:0 5px 20px #36304d04}.audio-note-play{background:var(--accent);color:#fff;width:46px;height:46px;transition:transform .16s var(--ease-out);border-radius:50%;flex:0 0 46px;place-items:center;display:grid}.audio-note-play:active{transform:scale(.96)}.audio-note-track{flex:1;min-width:60px;position:relative}.audio-note-wave{justify-content:space-between;align-items:center;gap:2px;height:43px;display:flex}.audio-note-wave span{background:#d6c6f3;border-radius:3px;width:2px}.audio-note-track input{width:100%;height:14px;accent-color:var(--accent);cursor:pointer;margin:2px 0 0;display:block}.audio-note-caption{white-space:nowrap;gap:5px;font-size:11px;display:grid}.audio-note-caption strong{color:#303044;font-weight:750}.audio-note-caption span{color:#6e6c80;font-variant-numeric:tabular-nums}.audio-note-error{color:#8f3944;flex-basis:100%;font-size:12px;line-height:1.5}.audio-note-error a{text-decoration:underline}@media (width<=380px){.audio-note{gap:10px;padding:14px}.audio-note-caption{font-size:10px}}@media (prefers-reduced-motion:reduce){.audio-note-play:active{transform:none}}.audio-note-track input{appearance:none;background:0 0}.audio-note-track input::-webkit-slider-runnable-track{background:#e5d6f2;border-radius:2px;height:2px}.audio-note-track input::-webkit-slider-thumb{appearance:none;background:var(--accent);border:1px solid #fff;border-radius:50%;width:9px;height:9px;margin-top:-3.5px}.audio-note-track input::-moz-range-track{background:#e5d6f2;border-radius:2px;height:2px}.audio-note-track input::-moz-range-thumb{background:var(--accent);border:1px solid #fff;border-radius:50%;width:8px;height:8px}.audio-note-wave span{background:linear-gradient(#f599c3,#b896e8)}.audio-note-wave span[data-heard]{background:var(--accent)}