.sound-toggle {position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 118px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill-radius); color: var(--paper); background: var(--ui-surface); letter-spacing: .05em; cursor: pointer; transition: color var(--motion-press) ease, border-color var(--motion-press) ease, background-color var(--motion-press) ease; font-family: inherit; font-size: var(--type-caption); font-weight: 500; line-height: 1;}
.sound-toggle svg {width:17px; height:17px; flex-shrink:0;}
.sound-label {text-transform:uppercase;}
.sound-toggle[aria-pressed="true"] {color:var(--accent); border-color:#d3ff5b60;}
.sound-toggle:not([aria-pressed="true"]) .sound-waves {display:none;}
.sound-toggle[aria-pressed="true"] .sound-muted {display:none;}

.site-footer {padding-bottom:100px;}
@media (hover:hover) and (pointer:fine) {
  .sound-toggle:hover {border-color: var(--accent); background-color: var(--ui-surface); color: var(--accent);}
}
@media (max-width:760px) {
  .sound-toggle {right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); min-width: 108px; font-family: inherit; font-size: var(--type-caption); font-weight: 500; line-height: 1; background: var(--ui-surface); border: 1px solid var(--line); color: var(--paper); border-radius: var(--pill-radius);}
  .site-footer {padding-bottom:calc(90px + env(safe-area-inset-bottom));}
}
@media (max-width:480px) {
  /* Leave the central launch and postcard actions unobstructed on phones. */
  .sound-toggle {min-width: 44px; width: 44px; padding: 0; gap: 0; font-family: inherit; font-size: var(--type-caption); font-weight: 500; line-height: 1; background: var(--ui-surface); border: 1px solid var(--line); color: var(--paper); border-radius: var(--pill-radius);}
  .sound-label {position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
}