.hover-sfx-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:35px;padding:7px 10px;border:1px solid #b8d9d0;border-radius:999px;background:#edf9f6;color:#08786f;font:800 10px/1.2 Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.hover-sfx-toggle:hover{background:#d7f4ea;border-color:#76c7bb}
.hover-sfx-toggle:focus-visible{outline:3px solid #15a89b;outline-offset:3px}
.hover-sfx-icon{font-size:15px;color:#069a96;line-height:1}
.hover-sfx-state{font-size:8px;color:#657982;background:#e7eded;border-radius:50px;padding:3px 5px}
.hover-sfx-toggle[aria-pressed=true] .hover-sfx-state{color:#08756a;background:#d0f1e6}
.hover-sfx-toggle[aria-pressed=false]{background:#f8faf8;border-color:#dbe3e4;color:#687d8a}
.hover-sfx-toggle[hidden]{display:none!important}
body.dark .hover-sfx-toggle{background:#1c414a;color:#b9f3e4;border-color:#437e7c}
body.dark .hover-sfx-state{background:#29665d;color:#c8f5e9}
.nav-links .hover-sfx-toggle{min-height:32px;padding:5px 10px;font-size:10px}
@media(max-width:880px),(hover:none),(pointer:coarse){.hover-sfx-toggle{display:none!important}}
@media(min-width:881px) and (max-width:1199px){.hero-actions .hover-sfx-toggle{padding:6px 8px;font-size:9px}.hero-actions{flex-wrap:wrap}}