/* A little speaker decal, with the slash showing the actual muted state. */
.nav #snd{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:44px;padding:8px;border:2px solid #34445c;border-radius:12px;background:#fff8e8;color:#34445c;box-shadow:2px 3px 0 #b43d78;letter-spacing:0;transform:rotate(-3deg);transition:transform .15s,background .15s}
.nav #snd:hover{transform:rotate(0deg) translateY(-1px);background:#ffe2b6}
.nav #snd svg{display:block;width:27px;height:27px;overflow:visible}
.nav #snd .speaker-body{fill:#f6b76a;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nav #snd .speaker-waves{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:none}
.nav #snd .speaker-mute{fill:none;stroke:#b43d78;stroke-width:2.8;stroke-linecap:round}
.nav #snd[aria-pressed="true"]{background:#f6b76a;color:#34445c}
.nav #snd[aria-pressed="true"] .speaker-waves{display:block}
.nav #snd[aria-pressed="true"] .speaker-mute{display:none}
.nav #snd:focus-visible{outline:3px solid #34445c;outline-offset:5px}
@media(max-width:560px){.nav .wrap{padding-block:8px}.nav nav{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px 12px}.nav nav>.btn{grid-column:1/-1;justify-self:stretch;text-align:center}.nav #snd{flex-basis:44px;width:44px}}
@media(prefers-reduced-motion:reduce){.nav #snd{transform:none;transition:none}.nav #snd:hover{transform:none}}