.hero-sound { position: absolute; z-index: 2; right: max(16px,env(safe-area-inset-right)); bottom: max(26px,env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 106px; padding: 9px 12px; border: 1px solid #ffffff40; border-radius: 24px; background: #171b19b8; color: #fffaf0; font-family: var(--body,sans-serif); font-size: 13px; line-height: 1.25; cursor: pointer; }
.hero-sound:hover { background: #171b19e6; }
.hero-sound:focus-visible { outline: 2px solid #f1d58b; outline-offset: 4px; }
.hero-sound svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-sound .sound-waves, .hero-sound.is-on .sound-muted { display: none; }
.hero-sound.is-on .sound-waves { display: initial; }
@media (max-width: 359px) { .hero-sound { right: 8px; min-width: 82px; gap: 4px; padding-inline: 6px; font-size: 12px; } .hero-sound svg { width: 14px; height: 14px; } }