.music-toggle { position:fixed; right:18px; bottom:88px; z-index:45; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid #cbd9cf; border-radius:50%; color:#315c45; background:#fff; font-size:22px; cursor:pointer; box-shadow:0 3px 10px #173e3218; }
.music-toggle[aria-pressed=true] { background:#e8f5eb; border-color:#6fa07a; }
.welcome-fireworks { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:999; }
.click-spark { position:fixed; width:22px; height:22px; margin:-11px; border:2px solid #c99c3d; border-radius:50%; pointer-events:none; z-index:1000; animation:click-spark .45s ease-out forwards; }
@keyframes click-spark { to { transform:scale(2.2); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .click-spark,.welcome-fireworks { display:none; } }

.welcome-layer { position:fixed; inset:0; margin:0; padding:0; border:0; width:100vw; height:100dvh; max-width:none; max-height:none; overflow:hidden; background:transparent; pointer-events:none; z-index:2147483647; }
.welcome-layer::backdrop { background:transparent; pointer-events:none; }
.welcome-layer .welcome-fireworks { pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .welcome-layer { display:none!important; } }

.music-toggle,.music-toggle[aria-pressed=true]{width:55px;height:56px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:0}.music-toggle img{display:block;width:55px;height:56px;object-fit:contain}

.music-toggle,.music-toggle[aria-pressed=true]{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:88px;height:38px;padding:8px 10px;right:18px;bottom:90px;border:1px solid #d7dfd4;border-radius:20px;background:#fffdf7;color:#315744;box-shadow:0 3px 12px #173e321c;font:600 12px/1.2 system-ui,sans-serif;white-space:nowrap}.music-toggle[aria-pressed=true]{background:#e9f4ed;border-color:#aac8b3}.music-toggle svg{flex:none;width:19px;height:19px}.music-toggle:focus-visible{outline:2px solid #a78334;outline-offset:3px}.music-toggle:hover{border-color:#aa8a41}
