.sound-button { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--mute); background: rgba(4,4,8,.25); transition: color .3s, border-color .3s; }
.sound-button[hidden] { display: none; }
.sound-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.sound-button .sound-disc { transform-origin: 12px 12px; }
.sound-button.is-on { color: var(--bone); border-color: #a78bfa80; }
.sound-button.is-on .sound-disc { animation: music-turn 10s linear infinite; }
.sound-button:hover { color: var(--bone); border-color: var(--bone); }
.sound-button:focus-visible, .site-footer .motion-button:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.site-footer .motion-button { width: auto; min-height: 36px; height: auto; padding: 7px 11px; border-radius: 999px; display: inline-flex; gap: 7px; flex: 0 0 auto; font-size: 13px; }
.site-footer .motion-button span { display: inline; font: 11px var(--sans); }
@keyframes music-turn { to { transform: rotate(360deg); } }
@media(max-width:800px) { .sound-button { width: 34px; height: 34px; } .sound-button svg { width: 17px; height: 17px; } }
@media(max-width:420px) { .site-footer nav { flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { .sound-button.is-on .sound-disc { animation: none; } }