.sound { position:fixed; z-index:30; right:clamp(22px,4vw,68px); bottom:clamp(22px,4vw,68px); display:flex; align-items:center; gap:11px; padding:10px 0; border:0; background:transparent; color:#eeeae3; cursor:pointer; pointer-events:auto; }
.sound:focus-visible { outline:1px solid #eeeae3; outline-offset:7px; }
.sound span { position:relative; display:block; width:29px; height:29px; border:1px solid rgba(238,234,227,.32); border-radius:50%; transition:border-color .4s,transform .4s; }
.sound span::before { content:""; position:absolute; top:50%; left:50%; width:3px; height:3px; border-radius:50%; background:#eeeae3; transform:translate(-50%,-50%); transition:background .4s,box-shadow .4s; }
.sound b { font:400 .5rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.23em; text-transform:uppercase; }
.sound:hover span { border-color:rgba(238,234,227,.8); transform:scale(1.08); }
.sound[aria-pressed="true"] span { border-color:rgba(230,37,31,.76); }
.sound[aria-pressed="true"] span::before { background:#e6251f; box-shadow:0 0 12px 3px rgba(230,37,31,.46); }
@media(max-width:600px){.sound{right:22px;bottom:22px}.sound b{display:none}}