html[data-theme] .site-header .main-nav .nav-link.active,
html[data-theme] .site-header .main-nav details.nav-group.active > summary.nav-link,
html[data-theme] .site-header .main-nav details.nav-group[open] > summary.nav-link,
html[data-theme] .mobile-nav .mobile-nav-link.active {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 36%, transparent) !important;
}

html[data-theme="graphite"] .quiz-answer-btn.correct,
html[data-theme="oled"] .quiz-answer-btn.correct,
html[data-theme="graphite"] .answer-label.correct,
html[data-theme="oled"] .answer-label.correct {
  background: color-mix(in srgb, #16a34a 22%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, #16a34a 75%, var(--border)) !important;
}

html[data-theme="graphite"] .quiz-answer-btn.wrong,
html[data-theme="oled"] .quiz-answer-btn.wrong,
html[data-theme="graphite"] .answer-label.wrong,
html[data-theme="oled"] .answer-label.wrong {
  background: color-mix(in srgb, #ef4444 18%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, #ef4444 70%, var(--border)) !important;
}

.piano-decoration,
.piano-key-deco,
.music-emoji-field,
.music-emoji-note,
.hero-bg-characters,
.treble-clef {
  pointer-events: none !important;
}

.quiz-progress-fill,
#quiz-progress-fill,
#progress-bar,
#file-progress-bar,
.upload-progress-fill,
.progress-fill {
  transition: none !important;
  will-change: width;
  transform: translateZ(0);
}

@media (max-width: 700px) {
  .site-footer .footer-inner {
    padding-top: 16px;
  }

  .site-footer .footer-col .section-kicker {
    margin-top: 6px;
  }
}