/* Intro sound: desktop hover, keyboard focus and permanently accessible touch button. */
.hero-sound-toggle {
  position:absolute;z-index:5;right:26px;bottom:28px;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:10px 14px;
  border:1px solid rgba(249,226,234,.52);border-radius:24px;
  background:rgba(24,13,30,.75);backdrop-filter:blur(12px);color:#f9f0f4;
  font:600 10px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.12em;
  cursor:pointer;opacity:1;transition:opacity .22s,background .22s,transform .22s;touch-action:manipulation;
}
.hero-sound-toggle:hover{background:rgba(42,20,47,.92)}
.hero-sound-toggle:focus-visible{outline:2px solid #f6dbad;outline-offset:3px}
.hero-sound-toggle[aria-pressed="true"]{border-color:rgba(228,193,137,.78);color:#ffe9c7}
.hero-sound-toggle[aria-pressed="true"] .sound-slash,
.hero-sound-toggle[aria-pressed="false"] .sound-wave{display:none}
.hero-sound-toggle[hidden]{display:none!important}
@media(hover:hover) and (pointer:fine){
  .hero-sound-toggle{opacity:0;transform:translateY(6px)}
  .hero-art:hover .hero-sound-toggle,.hero-art:focus-within .hero-sound-toggle{opacity:1;transform:translateY(0)}
}
@media(max-width:850px){.hero-sound-toggle{right:22px;bottom:22px;padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.hero-sound-toggle{transition:none}}