/* Music on/off switch, shared by the walkthrough nav and the app page. */
.music { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-family: var(--font); font-size: 0.875rem; color: var(--yale);
  background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--pen); padding: 6px 12px 6px 14px; cursor: pointer; }
.music:active { transform: translate(2px, 3px); box-shadow: none; }
.music-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 2px solid var(--ink); background: #E3ECD9; transition: background .2s; flex: none; }
.music-switch i { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); transition: transform .2s; }
.music[aria-checked="true"] .music-switch { background: var(--emerald); }
.music[aria-checked="true"] .music-switch i { transform: translateX(14px); }
.music-state { min-width: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .music-switch, .music-switch i { transition: none; } }