.wts-w{display:flex;align-items:center;gap:14px;margin:4px 0 22px}
.wts-btn{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:#fff;color:#0a0a0a;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.wts-btn:hover{transform:scale(1.06);box-shadow:0 0 24px rgba(255,255,255,.35)}
.wts-w.playing .wts-btn{background:#fff;box-shadow:0 0 24px rgba(255,255,255,.35)}
.wts-btn svg{width:16px;height:16px;fill:currentColor}
.wts-btn .pa,.wts-w.playing .wts-btn .pl{display:none}
.wts-w.playing .wts-btn .pa{display:block}
.wts-area{position:relative;flex:1;min-width:0;cursor:pointer}
.wts-area canvas{display:block;width:100%;height:64px;opacity:0;transition:opacity .5s}
.wts-w.ready canvas{opacity:1}
.wts-tip{position:absolute;top:-18px;transform:translateX(-50%);font-size:11px;line-height:1;background:#fff;color:#0a0a0a;padding:3px 6px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}
.wts-area:hover .wts-tip{opacity:1}
.wts-t{display:flex;justify-content:space-between;font-size:11px;color:#777;margin-top:4px;font-variant-numeric:tabular-nums}
@media(hover:none){.wts-tip{display:none}}

.wts-name{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cfcfcf;margin:6px 0 -6px 58px}
.wts-demos{margin-bottom:10px}