/* Themes: dark/light tokens, contrast, and interaction overrides
   Generated from the original stylesheet and kept in cascade order. */

/* ====================
   Theme system
   ==================== */
:root {
    color-scheme: dark;
    --text-strong: #f3eee7;
    --text-body: #d8d1c8;
    --text-subtle: #b8b0a7;
    --copy-text: #d2cbc2;
    --copy-weight: 500;
    --control-text: #f3eee7;
    --placeholder-text: #918a82;
    --primary-button-background: #c4a484;
    --primary-button-hover-background: #e5d3b3;
    --primary-button-text: #17130f;
    --primary-button-hover-text: #17130f;
    --accent-button-text: #17130f;
    --chord-accent: #7fb7ad;
    --chord-accent-hover: #9bc8c0;
    --chord-accent-text: #17130f;
    --chord-control: #7fb7ad;
    --chord-accent-soft: rgba(127, 183, 173, 0.16);
    --body-pattern:
        linear-gradient(115deg, rgba(127, 183, 173, 0.055) 0 1px, transparent 1px 92px),
        linear-gradient(0deg, rgba(229, 211, 179, 0.034) 0 1px, transparent 1px 74px),
        radial-gradient(circle at 18% 16%, rgba(196, 164, 132, 0.11), transparent 26%),
        radial-gradient(circle at 82% 42%, rgba(127, 183, 173, 0.08), transparent 30%);
    --body-background: linear-gradient(135deg, #101010 0%, #15120f 52%, #101817 100%);
    --nav-background: rgba(20, 20, 20, 0.9);
    --footer-background: #0a0a0a;
    --panel-background: rgba(27, 27, 27, 0.92);
    --panel-raised-background: rgba(36, 36, 36, 0.94);
    --control-background: rgba(20, 20, 20, 0.88);
    --soft-background: rgba(44, 43, 41, 0.72);
    --border-soft: rgba(196, 164, 132, 0.18);
    --shadow-color: rgba(0, 0, 0, 0.28);
    --panel-hover-background: #090909;
    --control-hover-background: #161616;
    --subpanel-background: rgba(18, 18, 18, 0.5);
    --secondary-hover-background: #0d0d0d;
    --secondary-hover-text: var(--gold-light);
    --secondary-button-text: var(--gold);
    --secondary-button-background: transparent;
    --secondary-button-border: var(--gold);
    --hover-border: rgba(229, 211, 179, 0.58);
    --hover-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
    --focus-ring: rgba(229, 211, 179, 0.42);
    --disabled-opacity: 0.58;
    --disabled-background: rgba(28, 27, 25, 0.72);
    --disabled-border: rgba(196, 164, 132, 0.14);
    --danger-background: #8b4a50;
    --danger-border: #8b4a50;
    --danger-text: #fff6f7;
    --divider-color: rgba(255, 255, 255, 0.08);
    --button-glow: rgba(229, 211, 179, 0.34);
    --button-depth-shadow: 0 8px 0 rgba(80, 57, 38, 0.34), 0 18px 32px rgba(0, 0, 0, 0.24);
    --button-depth-shadow-hover: 0 6px 0 rgba(80, 57, 38, 0.32), 0 22px 38px rgba(0, 0, 0, 0.32);
    --light-button-hover-text: var(--secondary-hover-text);
    --light-button-hover-background: var(--secondary-hover-background);
    --light-button-hover-border: var(--hover-border);
    --light-button-hover-shadow: var(--button-depth-shadow-hover);
    --light-button-hover-transform: translateY(-3px) scale(1.025);
    --glass-card-background:
        linear-gradient(135deg, rgba(38, 35, 31, 0.82), rgba(20, 20, 19, 0.78)),
        linear-gradient(90deg, rgba(127, 183, 173, 0.08), transparent 38%);
    --glass-card-border: rgba(229, 211, 179, 0.2);
    --glass-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    --result-explanation-background: rgba(127, 183, 173, 0.07);
    --result-explanation-border: rgba(127, 183, 173, 0.18);
    --result-explanation-card-background: rgba(18, 18, 18, 0.36);
    --result-explanation-card-border: rgba(196, 164, 132, 0.14);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f1ec;
    --surface: #ffffff;
    --surface-raised: #faf7f2;
    --surface-soft: #ebe5dc;
    --line: #d3cbc0;
    --text: #28211b;
    --muted: #5f564d;
    --gold: #8a603e;
    --gold-light: #5f3e28;
    --teal: #2d7b76;
    --wine: #985463;
    --text-strong: #241d17;
    --text-body: #4f463d;
    --text-subtle: #685e54;
    --copy-text: #493f36;
    --copy-weight: 500;
    --control-text: #28211b;
    --placeholder-text: #7c7167;
    --primary-button-background: #8a603e;
    --primary-button-hover-background: #684329;
    --primary-button-text: #fffaf4;
    --primary-button-hover-text: #fffaf4;
    --accent-button-text: #fffdf9;
    --chord-accent: #dfc5a7;
    --chord-accent-hover: #cfa77d;
    --chord-accent-text: #342419;
    --chord-control: #9a6b44;
    --chord-accent-soft: rgba(154, 107, 68, 0.11);
    --body-pattern:
        linear-gradient(115deg, rgba(45, 123, 118, 0.05) 0 1px, transparent 1px 96px),
        linear-gradient(0deg, rgba(138, 96, 62, 0.04) 0 1px, transparent 1px 78px),
        radial-gradient(circle at 18% 14%, rgba(223, 197, 167, 0.2), transparent 28%),
        radial-gradient(circle at 84% 42%, rgba(45, 123, 118, 0.08), transparent 32%);
    --body-background: linear-gradient(135deg, #f7f4ef 0%, #eee8df 54%, #eef5f3 100%);
    --nav-background: rgba(250, 248, 244, 0.92);
    --footer-background: #e8e1d8;
    --panel-background: rgba(255, 255, 255, 0.88);
    --panel-raised-background: rgba(249, 246, 241, 0.96);
    --control-background: rgba(255, 255, 255, 0.92);
    --soft-background: rgba(235, 229, 220, 0.74);
    --border-soft: rgba(88, 72, 58, 0.2);
    --shadow-color: rgba(75, 61, 49, 0.13);
    --panel-hover-background: #f3e9dd;
    --control-hover-background: #faf5ee;
    --subpanel-background: rgba(247, 241, 233, 0.9);
    --secondary-hover-background: #efe2d2;
    --secondary-hover-text: #563b29;
    --secondary-button-text: var(--gold-light);
    --secondary-button-background: transparent;
    --secondary-button-border: var(--gold-light);
    --hover-border: rgba(152, 113, 78, 0.5);
    --hover-shadow: 0 16px 34px rgba(91, 70, 52, 0.16);
    --focus-ring: rgba(45, 123, 118, 0.3);
    --disabled-opacity: 0.66;
    --disabled-background: rgba(235, 229, 220, 0.68);
    --disabled-border: rgba(88, 72, 58, 0.14);
    --danger-background: #7d3f45;
    --danger-border: #7d3f45;
    --danger-text: #fffaf4;
    --divider-color: rgba(88, 72, 58, 0.14);
    --button-glow: rgba(45, 123, 118, 0.22);
    --button-depth-shadow: 0 7px 0 rgba(82, 54, 34, 0.2), 0 16px 28px rgba(91, 70, 52, 0.12);
    --button-depth-shadow-hover: 0 5px 0 rgba(82, 54, 34, 0.18), 0 20px 34px rgba(91, 70, 52, 0.18);
    --light-button-hover-text: var(--secondary-hover-text);
    --light-button-hover-background: linear-gradient(135deg, rgba(250, 245, 238, 0.98), rgba(239, 226, 210, 0.96));
    --light-button-hover-border: rgba(152, 113, 78, 0.38);
    --light-button-hover-shadow: 0 5px 0 rgba(82, 54, 34, 0.12), 0 18px 30px rgba(91, 70, 52, 0.12);
    --light-button-hover-transform: translateY(-3px) scale(1.025);
    --glass-card-background:
        linear-gradient(135deg, rgba(255, 253, 249, 0.74), rgba(246, 239, 229, 0.66)),
        linear-gradient(90deg, rgba(45, 123, 118, 0.045), transparent 38%);
    --glass-card-border: rgba(88, 72, 58, 0.22);
    --glass-card-shadow: 0 18px 42px rgba(86, 68, 51, 0.13);
    --result-explanation-background: rgba(246, 239, 229, 0.92);
    --result-explanation-border: rgba(152, 113, 78, 0.22);
    --result-explanation-card-background: #efe4d7;
    --result-explanation-card-border: rgba(138, 96, 62, 0.18);
}

body {
    background: var(--body-pattern), var(--body-background);
    background-attachment: fixed;
    color: var(--text);
    transition: background 0.28s ease, color 0.2s ease;
}

.navbar {
    background-color: var(--nav-background);
    border-bottom-color: var(--border-soft);
    transition: background-color 0.28s ease, border-color 0.2s ease;
}

.logo,
h1,
.section-title,
.signature-slogan,
.home-section-heading h2,
.home-feature-band h2,
.about-copy h2 {
    color: var(--gold);
}

.nav-links a,
.nav-dropdown summary {
    color: var(--text);
}

.footer {
    color: var(--muted);
    background-color: var(--footer-background);
    border-top: 1px solid var(--border-soft);
    transition: background-color 0.28s ease, color 0.2s ease, border-color 0.2s ease;
}

.track-card,
.key-result,
.key-finder-panel,
.audio-player-card,
.progression-card,
.note-card,
.modal-content,
.home-release-card,
.start-card {
    color: var(--text);
    background: var(--panel-background);
    border-color: var(--border-soft);
    box-shadow: 0 10px 26px var(--shadow-color);
}

.track-card {
    border-left-color: var(--gold);
}

.key-finder-panel {
    border-left-color: var(--teal);
}

.track-controls,
.key-finder-result,
.key-finder-form input,
.track-controls input:not([type="checkbox"]),
.track-controls select,
.progression-controls select,
.progression-controls input,
.modal-content input,
.theme-toggle,
.footer-theme-toggle {
    color: var(--text);
    background-color: var(--control-background);
    border-color: var(--border-soft);
}

.analysis-history,
.key-finder-candidates li,
.result-evidence-grid div,
.result-ranking-block {
    color: var(--text);
    background: var(--subpanel-background);
    border-color: var(--border-soft);
}

.analysis-history li,
.result-details-secondary,
.result-analysis-notes {
    border-color: var(--divider-color);
}

.confidence-bar {
    background: var(--divider-color);
}

.track-controls {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--teal) 5%, transparent), transparent 28%),
        color-mix(in srgb, var(--panel-background) 44%, transparent);
    border-top-color: var(--border-soft);
    border-bottom-color: var(--border-soft);
}

html[data-theme="light"] .tracks-library-page .track-controls {
    background:
        linear-gradient(90deg, rgba(45, 123, 118, 0.055), transparent 34%),
        #f4eee5;
    border-color: #d8ccbd;
    border-left-color: var(--teal);
    box-shadow: 0 18px 42px rgba(86, 68, 51, 0.1);
}

html[data-theme="light"] .tracks-library-page .track-controls input:not([type="checkbox"]),
html[data-theme="light"] .tracks-library-page .track-controls select {
    background-color: rgba(255, 253, 249, 0.92);
    border-color: rgba(124, 101, 80, 0.18);
}

html[data-theme="light"] .track-key-checkbox:checked + .track-key-checkbox-wrapper .track-key-checkbox-visual {
    color: #5f3e28;
    background-color: #dfc5a7;
    box-shadow:
        rgba(95, 62, 40, 0.16) 0 -3px 1px 0 inset,
        rgba(255, 255, 255, 0.72) 0 -1px 1px 0,
        rgba(91, 70, 52, 0.12) 0 2px 5px 1px;
}

html[data-theme="light"] .track-key-checkbox:checked + .track-key-checkbox-wrapper .track-key-checkbox-visual:hover {
    color: #4d3323;
    background-color: #d7b995;
    box-shadow:
        rgba(95, 62, 40, 0.18) 0 -3px 1px 0 inset,
        rgba(255, 255, 255, 0.72) 0 -1px 1px 0,
        rgba(91, 70, 52, 0.14) 0 3px 6px 2px;
}

html[data-theme="light"] .tracks-library-page .favorites-filter {
    background: #eee5da;
    border-color: #d7c7b5;
}

html[data-theme="light"] .tracks-library-page .track-card {
    background:
        linear-gradient(90deg, rgba(45, 123, 118, 0.035), transparent 32%),
        linear-gradient(135deg, rgba(255, 253, 249, 0.78), rgba(246, 239, 229, 0.7));
    border-color: #ded3c4;
    border-left-color: var(--gold);
    box-shadow: var(--glass-card-shadow);
}

html[data-theme="light"] .tracks-library-page .track-card:hover {
    background:
        linear-gradient(90deg, rgba(45, 123, 118, 0.05), transparent 32%),
        linear-gradient(135deg, rgba(255, 253, 249, 0.86), rgba(242, 233, 220, 0.78));
    border-color: rgba(138, 96, 62, 0.34);
    border-left-color: var(--teal);
}

.track-loading {
    color: var(--text-subtle);
    background: var(--panel-background);
    border-color: var(--border-soft);
}

.favorites-filter,
.segmented-control,
.api-status {
    color: var(--text);
    background: var(--soft-background);
    border-color: var(--border-soft);
}

.hero-tagline,
.track-card p,
.interval-name,
.upload-file-label small,
.key-finder-copy,
.tool-section-heading p {
    color: var(--text-body);
}

.audio-title,
.track-card h2,
.track-card h3,
.track-card h5,
.key-finder-result {
    color: var(--text);
}

.key-finder-final,
.analysis-history strong,
.note-name {
    color: var(--gold-light);
}

.section-divider {
    border-color: var(--border-soft);
}

.key-finder-divider::before,
.key-finder-divider::after {
    background: var(--border-soft);
}

.nav-theme-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-language-item {
    display: flex;
    align-items: center;
}

.nav-appearance-label {
    display: none;
}

.nav-theme-toggle,
.nav-language-toggle {
    --theme-switch-size: 46px;
}

/* Adapted from Uiverse.io by pandey_saurav_: Toggle-switches/pandey_saurav__friendly-insect-59.html */
.theme-toggle {
    --theme-switch-size: 38px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: var(--theme-switch-size);
    min-height: var(--theme-switch-size);
    padding: 7px;
    color: var(--text-subtle);
    background: color-mix(in srgb, #2e2e2e 92%, var(--control-background));
    border: 0;
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 80%, transparent),
        0 6px 16px color-mix(in srgb, var(--shadow-color) 72%, transparent);
    transition:
        color 0.2s ease,
        background-color 0.7s ease,
        box-shadow 0.7s ease,
        transform 0.22s ease;
}

.theme-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.theme-toggle-label {
    display: none;
}

.theme-toggle-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.theme-toggle-icon {
    display: block;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--shadow-color) 70%, transparent));
    transition: filter 0.7s ease, transform 0.22s ease;
}

.theme-toggle-icon-base {
    fill: color-mix(in srgb, #51514c 82%, var(--text-subtle));
}

.theme-toggle-icon-rays {
    fill: color-mix(in srgb, #a7a79b 82%, var(--text-subtle));
    transition: fill 0.7s ease;
}

.theme-toggle-icon-bulb {
    fill: #ffffff;
    transition: fill 0.7s ease;
}

.theme-toggle-input:checked ~ .theme-toggle-switch .theme-toggle-icon-base {
    fill: color-mix(in srgb, var(--gold) 74%, #51514c);
}

.theme-toggle-input:checked ~ .theme-toggle-switch .theme-toggle-icon-rays {
    fill: color-mix(in srgb, var(--gold-light) 72%, #fff2c2);
}

.theme-toggle-input:checked ~ .theme-toggle-switch .theme-toggle-icon-bulb {
    fill: #fff7df;
}

.theme-toggle-input:checked ~ .theme-toggle-switch .theme-toggle-icon {
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--gold-light) 74%, #ffc400))
        drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 48%, transparent));
}

.theme-toggle-input:checked ~ .theme-toggle-switch {
    animation: themeToggleBulbPulse 1.7s ease-in-out infinite;
}

.theme-toggle-input:checked ~ .theme-toggle-switch,
.theme-toggle:hover .theme-toggle-switch {
    transform: translateY(-1px);
}

.theme-toggle:hover {
    color: var(--secondary-hover-text);
    background: color-mix(in srgb, var(--control-hover-background) 80%, #2e2e2e);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--hover-border) 68%, transparent),
        0 8px 22px color-mix(in srgb, var(--shadow-color) 66%, transparent);
    transform: translateY(-1px);
}

.theme-toggle-input:checked ~ .theme-toggle-switch,
.theme-toggle-switch {
    transition: transform 0.22s ease;
}

.theme-toggle.is-light-theme {
    background-color: color-mix(in srgb, var(--gold) 70%, #a15b00);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gold-light) 42%, transparent),
        0 0 42px color-mix(in srgb, var(--gold-light) 36%, transparent),
        0 8px 24px color-mix(in srgb, var(--shadow-color) 65%, transparent);
}

html[data-theme="light"] .theme-toggle {
    background: color-mix(in srgb, var(--surface-raised) 78%, #2e2e2e);
}

html[data-theme="light"] .theme-toggle.is-light-theme {
    background-color: color-mix(in srgb, var(--gold) 82%, #f0d2a7);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 242, 0.64),
        0 0 34px rgba(223, 197, 167, 0.42),
        0 8px 20px rgba(91, 70, 52, 0.16);
}

.theme-toggle:focus-within {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.language-switch-button {
    width: var(--theme-switch-size);
    height: var(--theme-switch-size);
    min-width: var(--theme-switch-size);
    min-height: var(--theme-switch-size);
    padding: 7px;
    color: color-mix(in srgb, var(--teal) 78%, #f7ead7);
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold-light) 18%, transparent), transparent 52%),
        color-mix(in srgb, var(--teal) 22%, #2e2e2e);
    flex: 0 0 auto;
}

html[data-theme="light"] .language-switch-button {
    color: color-mix(in srgb, var(--gold) 78%, #5f3e28);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 250, 242, 0.74), transparent 56%),
        color-mix(in srgb, var(--gold) 18%, var(--surface-raised));
    box-shadow:
        inset 0 0 0 1px rgba(138, 96, 62, 0.18),
        0 8px 20px rgba(91, 70, 52, 0.13);
}

.language-switch-button:hover {
    color: color-mix(in srgb, var(--gold-light) 82%, var(--teal));
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold-light) 28%, transparent), transparent 54%),
        color-mix(in srgb, var(--teal) 34%, #2e2e2e);
}

html[data-theme="light"] .language-switch-button:hover {
    color: color-mix(in srgb, var(--teal) 74%, #5f3e28);
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 250, 242, 0.88), transparent 56%),
        color-mix(in srgb, var(--teal) 10%, var(--surface-raised));
}

.language-switch-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: currentColor;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    transition: transform 0.22s ease;
}

.language-switch-button:hover .language-switch-label {
    transform: translateY(-1px);
}

@media (min-width: 1181px) {
    .nav-language-toggle {
        box-sizing: content-box;
    }
}

.footer-theme-toggle {
    --theme-switch-size: 46px;
}

@keyframes themeToggleBulbPulse {
    0%,
    100% {
        transform: translateY(-1px) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1.05);
    }
}

@media (max-width: 1180px) {
    .nav-theme-toggle {
        --theme-switch-size: 46px;
        min-height: 46px;
        color: var(--text);
        background: transparent;
        border-radius: 999px;
        box-shadow: none;
        transform: none;
    }

    html[data-theme="light"] .nav-theme-toggle,
    .nav-theme-toggle.is-light-theme,
    html[data-theme="light"] .nav-theme-toggle.is-light-theme {
        background: transparent;
        box-shadow: none;
    }

    .nav-theme-toggle:hover {
        color: var(--gold-light);
        background: transparent;
        box-shadow: none;
    }
}

/* Theme-aware interaction states */
.logo:hover,
.nav-links a:hover,
.nav-links a.active,
.nav-dropdown summary:hover,
.nav-dropdown summary.active,
.section-title-link:hover,
.text-link:hover,
.footer .social-links a:hover {
    color: var(--gold-light);
}

.nav-menu-button {
    color: var(--text);
    background: var(--panel-background);
    border-color: var(--border-soft);
}

@media (min-width: 1181px) {
    .nav-submenu a:hover,
    .nav-submenu a.active {
        color: var(--secondary-hover-text);
        background: var(--secondary-hover-background);
    }
}

.primary-button,
.track-link,
.select-key-button,
.key-button {
    color: var(--primary-button-text);
    background-color: var(--primary-button-background);
    border-color: var(--primary-button-background);
}

.primary-button,
.secondary-button,
.track-link,
.select-key-button,
.key-button,
.progression-play-button,
.progression-save-button,
.progression-export-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: var(--button-depth-shadow);
}

.primary-button::before,
.secondary-button::before,
.track-link::before,
.select-key-button::before,
.key-button::before,
.progression-play-button::before,
.progression-save-button::before,
.progression-export-button::before {
    content: "";
    position: absolute;
    inset: -40% -22%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--button-glow) 82%, transparent), transparent 34%),
        linear-gradient(110deg, transparent 12%, color-mix(in srgb, var(--button-glow) 58%, transparent) 46%, transparent 72%);
    opacity: 0;
    transform: translateX(-34%) rotate(8deg);
    transition: opacity 0.22s ease, transform 0.42s ease;
}

.primary-button > *,
.secondary-button > *,
.track-link > *,
.select-key-button > *,
.key-button > *,
.progression-play-button > *,
.progression-save-button > *,
.progression-export-button > * {
    position: relative;
    z-index: 1;
}

.primary-button:hover,
.track-link:hover,
.select-key-button:hover,
.key-button:hover,
#backToTopBtn:hover {
    color: var(--primary-button-hover-text);
    background-color: var(--primary-button-hover-background);
    border-color: var(--primary-button-hover-background);
    box-shadow: var(--button-depth-shadow-hover);
    transform: translateY(-3px) scale(1.025);
}

.primary-button:hover::before,
.secondary-button:hover::before,
.track-link:hover::before,
.select-key-button:hover::before,
.key-button:hover::before,
.progression-play-button:hover::before,
.progression-save-button:hover::before,
.progression-export-button:hover::before {
    opacity: 1;
    transform: translateX(18%) rotate(8deg);
}

.primary-button:active,
.secondary-button:active,
.track-link:active,
.select-key-button:active,
.key-button:active,
.progression-play-button:active,
.progression-save-button:active,
.progression-export-button:active {
    box-shadow: 0 2px 0 rgba(80, 57, 38, 0.3), 0 8px 16px var(--shadow-color);
    transform: translateY(3px) scale(0.985);
}

.secondary-button,
.secondary-track-link {
    color: var(--gold);
    background: transparent;
    border-color: var(--gold);
}

.secondary-button:hover,
.secondary-track-link:hover {
    color: var(--secondary-hover-text);
    background: var(--secondary-hover-background);
    border-color: var(--hover-border);
    box-shadow: var(--button-depth-shadow-hover);
    transform: translateY(-3px) scale(1.025);
}

.download-track-link {
    color: var(--text);
    background: var(--surface-raised);
    border-color: var(--line);
}

.download-track-link:hover {
    color: var(--secondary-hover-text);
    background: var(--secondary-hover-background);
    border-color: var(--hover-border);
}

.track-actions .track-primary-action {
    color: var(--primary-button-text);
    background: var(--primary-button-background);
    border-color: var(--primary-button-background);
    box-shadow: 0 8px 18px var(--shadow-color);
}

.track-actions .track-primary-action:hover {
    color: var(--primary-button-hover-text);
    background: var(--primary-button-hover-background);
    border-color: var(--primary-button-hover-background);
    box-shadow: 0 11px 24px var(--shadow-color);
}

.track-actions .track-secondary-action {
    color: var(--text-body);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.track-actions .track-secondary-action:hover {
    color: var(--gold-light);
    background: var(--secondary-hover-background);
    border-color: var(--border-soft);
    box-shadow: none;
    transform: translateY(-1px);
}

.track-actions .uiverse-download-button,
.track-actions .track-slides-download-link,
.track-actions .uiverse-download-button:hover,
.track-actions .uiverse-download-button:focus-visible,
.track-actions .track-slides-download-link:hover,
.track-actions .track-slides-download-link:focus-visible {
    position: relative;
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    color: var(--gold-light);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.track-actions .uiverse-download-button:hover,
.track-actions .uiverse-download-button:focus-visible,
.track-actions .track-slides-download-link:hover,
.track-actions .track-slides-download-link:focus-visible {
    color: var(--secondary-hover-text);
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: translateY(-2px);
}

.track-actions .uiverse-download-button::before,
.track-actions .track-slides-download-link::before {
    inset: 0;
    z-index: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    background: color-mix(in srgb, var(--gold-light) 84%, white);
    border-radius: 50%;
    opacity: 0;
    transform: rotate(-90deg) translate(28px);
}

.track-actions .uiverse-download-button.is-activating::before,
.track-actions .track-slides-download-link.is-activating::before {
    opacity: 1;
    transform: rotate(-90deg) translate(28px);
}

.track-actions .uiverse-download-button-circle,
.track-actions .track-slides-download-circle {
    position: relative;
    z-index: 1;
}

.track-actions .download-track-link {
    color: var(--text-body);
    background: transparent;
    border-color: transparent;
}

.track-card,
.start-card,
.home-release-card,
.audio-player-card,
.progression-card,
.note-card {
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.track-card,
.key-finder-panel,
.key-finder-result,
.analysis-history,
.result-evidence-grid div,
.result-ranking-block,
.home-release-card,
.start-card,
.audio-player-card,
.progression-card,
.note-card {
    transition:
        color 0.2s ease,
        background-color 0.28s ease,
        border-color 0.2s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.track-card:hover,
.start-card:hover,
.home-release-card:hover,
.audio-player-card:hover,
.key-finder-panel:hover,
.progression-card:hover,
.note-card:hover {
    color: var(--text);
    background: var(--panel-hover-background);
    border-color: var(--hover-border);
    box-shadow: var(--hover-shadow);
    transform: translateY(-3px) scale(1.008);
}

.feedback-page .key-finder-panel:hover {
    background: var(--panel-background);
    border-color: var(--border-soft);
    border-left-color: var(--teal);
    box-shadow: var(--card-shadow);
    transform: none;
}

.key-finder-page .key-finder-panel:hover {
    background: var(--panel-background);
    border-color: var(--border-soft);
    border-left-color: var(--teal);
    box-shadow: var(--card-shadow);
    transform: none;
}

.feedback-actions .primary-button,
.feedback-actions .secondary-button {
    box-sizing: border-box;
    flex: 0 0 148px;
    width: 148px;
    min-width: 148px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.upload-file-label {
    color: var(--text);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--teal) 8%, transparent), transparent 38%),
        var(--panel-raised-background);
    border-color: color-mix(in srgb, var(--teal) 34%, transparent);
}

.upload-file-label:hover,
.key-finder-upload input[type="file"]:focus + .upload-file-label {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--teal) 12%, transparent), transparent 42%),
        var(--control-hover-background);
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.key-finder-form input,
.progression-controls select,
.transpose-controls button {
    color: var(--text);
    background: var(--control-background);
    border-color: var(--border-soft);
}

.key-finder-form input:hover,
.track-controls input:not([type="checkbox"]):hover,
.track-controls select:hover,
.progression-controls select:hover,
.modal-content input:hover {
    background: var(--control-hover-background);
    border-color: var(--hover-border);
}

.key-finder-form input:focus,
.track-controls input:not([type="checkbox"]):focus,
.track-controls select:focus,
.progression-controls select:focus,
.modal-content input:focus {
    color: var(--text);
    background: var(--control-hover-background);
    border-color: var(--teal);
    outline: 3px solid var(--focus-ring);
}

.progression-save-button:hover,
.progression-export-button:hover,
.transpose-controls button:hover {
    color: var(--secondary-hover-text);
    background: var(--secondary-hover-background);
    border-color: var(--hover-border);
    transform: translateY(-1px) scale(1.02);
}

.progression-play-button:hover {
    color: var(--primary-button-hover-text);
    background: var(--primary-button-hover-background);
    box-shadow: 0 9px 20px var(--shadow-color);
    transform: translateY(-2px) scale(1.025);
}

.favorites-filter:hover {
    color: var(--secondary-hover-text) !important;
    background: var(--secondary-hover-background);
    border-color: var(--hover-border);
}

.favorite-track-button {
    color: var(--muted);
    background: var(--control-background);
    border-color: var(--border-soft);
}

.favorite-track-button:hover {
    color: var(--wine);
    background: var(--secondary-hover-background);
    border-color: color-mix(in srgb, var(--wine) 48%, transparent);
    transform: scale(1.08);
}

#backToTopBtn {
    color: var(--primary-button-text);
    background: var(--primary-button-background);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.track-link:focus-visible,
.key-button:focus-visible,
.select-key-button:focus-visible,
.favorite-track-button:focus-visible,
.progression-play-button:focus-visible,
.progression-save-button:focus-visible,
.progression-export-button:focus-visible,
.transpose-controls button:focus-visible,
#backToTopBtn:focus-visible {
    outline-color: var(--gold-light);
}

html[data-theme="light"] .key-finder-result.is-error,
html[data-theme="light"] .error-report {
    color: #7c3f49;
}

html[data-theme="light"] .track-meta span,
html[data-theme="light"] .hero-badges span {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

html[data-theme="light"] .modal-overlay {
    background-color: rgba(68, 56, 46, 0.48);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #eee8df;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c8baaa;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

html[data-theme="light"] ::selection {
    color: #201811;
    background: #dbc8ae;
}

/* Theme contrast normalization */
.home-lead,
.home-metrics dd,
.home-feature-inner > div > p:last-child,
.about-copy > p:not(.home-eyebrow),
.start-card span:last-child,
.track-card p,
.key-finder-copy,
.key-finder-meta,
.key-finder-notes,
.confidence-note,
.upload-privacy-note,
.service-wake-panel p,
.tool-section-heading p,
.status-page > p:not(.status-page-code),
.track-result-count,
.key-result p {
    color: var(--copy-text);
    font-weight: var(--copy-weight);
    line-height: 1.72;
}

.home-lead {
    color: var(--copy-text);
    font-weight: 500;
    letter-spacing: 0.004em;
}

.track-card-title-row h2,
.track-card-title-row h3 {
    margin: 0;
}

.start-card span:last-child,
.home-metrics dd,
.track-result-count,
.upload-privacy-note {
    line-height: 1.58;
}

.progression-chords,
.audio-title,
.history-item-button,
.saved-progression-item {
    color: var(--text-strong);
}

.key-result h3,
.selected-key-heading h3,
.progression-section h4,
.saved-progression-section h4 {
    color: var(--gold-light);
}

.key-result p {
    color: var(--text-body);
}

.progression-numerals {
    color: var(--gold);
}

.progression-style,
.interval-name,
.progression-separator,
.saved-progression-item span,
.saved-progression-empty,
.analysis-history span,
.analysis-history a,
.analysis-history em,
.key-finder-candidates p span {
    color: var(--text-subtle);
}

.progression-controls label {
    color: var(--text-body);
}

.progression-controls select,
.progression-controls input[type="number"],
.transpose-controls button {
    color: var(--control-text);
    background: var(--control-background);
    border-color: var(--border-soft);
}

.progression-controls input[type="number"]:hover,
.transpose-controls button:hover {
    border-color: var(--hover-border);
}

.progression-controls input[type="number"]:focus {
    color: var(--control-text);
    background: var(--control-hover-background);
    border-color: var(--chord-control);
    outline: 3px solid var(--focus-ring);
}

.result-mode-button.active {
    color: var(--accent-button-text);
}

.progression-play-button,
.key-button.is-selected {
    color: var(--chord-accent-text);
    background: var(--chord-accent);
    border-color: var(--chord-accent);
}

.progression-play-button:hover {
    color: var(--chord-accent-text);
    background: var(--chord-accent-hover);
    border-color: var(--chord-accent-hover);
}

.progression-controls input[type="range"],
.metronome-toggle input,
.backing-toggle input {
    accent-color: var(--chord-control);
}

.progression-chord-token.is-current {
    color: var(--chord-accent-text);
    background: var(--chord-accent);
}

.progression-chord-token.is-next {
    color: var(--chord-control);
    background: var(--chord-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chord-control) 42%, transparent);
}

.progression-card.is-playing {
    border-color: color-mix(in srgb, var(--chord-control) 62%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--chord-control) 18%, transparent),
        0 10px 26px var(--shadow-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--placeholder-text);
    opacity: 1;
}

html[data-theme="light"] button:disabled,
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled {
    opacity: 0.72;
}

html[data-theme="light"] .progression-card,
html[data-theme="light"] .note-card,
html[data-theme="light"] .start-card {
    border-color: rgba(88, 72, 58, 0.24);
}

html[data-theme="light"] .progression-writer-page,
html[data-theme="light"] .progression-writer-shape-picker-modal {
    --diagram-tone-fill: #9a6843;
    --diagram-tone-text: #fffaf2;
    --diagram-root-fill: #2d7b76;
    --diagram-root-text: #fffdf8;
    --diagram-root-ring: rgba(45, 123, 118, 0.22);
    --diagram-third-fill: #9d6a3d;
    --diagram-third-text: #fffaf2;
    --diagram-third-ring: rgba(157, 106, 61, 0.2);
    --diagram-fifth-fill: #b88b56;
    --diagram-fifth-text: #fffaf2;
    --diagram-fifth-ring: rgba(184, 139, 86, 0.22);
    --diagram-seventh-fill: #b06b7a;
    --diagram-seventh-text: #fffaf2;
    --diagram-seventh-ring: rgba(176, 107, 122, 0.18);
    --diagram-extension-fill: #7a8c74;
    --diagram-extension-text: #fffaf2;
    --diagram-extension-ring: rgba(122, 140, 116, 0.2);
    --diagram-open-tone-background: #f2e5d6;
    --diagram-open-tone-border: rgba(154, 104, 67, 0.26);
    --diagram-grid-line: rgba(93, 82, 72, 0.5);
}

html[data-theme="light"] .key-selector .select-key-button:hover,
html[data-theme="light"] .key-selector .key-button:hover:not(.is-selected) {
    color: var(--light-button-hover-text);
    background: var(--light-button-hover-background);
    border-color: var(--light-button-hover-border);
    box-shadow: var(--light-button-hover-shadow);
}

html[data-theme="light"] .key-selector .key-button.is-selected:hover {
    color: var(--chord-accent-text);
    background: var(--chord-accent-hover);
    border-color: color-mix(in srgb, var(--chord-control) 42%, transparent);
    box-shadow: 0 5px 0 rgba(82, 54, 34, 0.12), 0 18px 30px rgba(91, 70, 52, 0.12);
}

html[data-theme="light"] .progression-card-actions button {
    color: var(--gold-light);
    border-color: rgba(95, 62, 40, 0.32);
}

html[data-theme="light"] .progression-card-actions button:hover {
    color: var(--secondary-hover-text);
}

html[data-theme="light"] .progression-card-actions .progression-play-button {
    color: var(--chord-accent-text);
    background: var(--chord-accent);
    border-color: color-mix(in srgb, var(--chord-control) 46%, transparent);
    box-shadow: 0 7px 16px rgba(91, 70, 52, 0.14);
}

html[data-theme="light"] .progression-card-actions .progression-play-button:hover {
    color: var(--chord-accent-text);
    background: var(--chord-accent-hover);
    border-color: var(--chord-control);
    box-shadow: 0 10px 22px rgba(91, 70, 52, 0.2);
}
html[data-theme="light"] .progression-scale-advice {
    color: #4e4338;
    background: linear-gradient(135deg, rgba(250, 247, 242, 0.98), rgba(241, 234, 224, 0.94));
    border-color: rgba(156, 119, 84, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .scale-advice-kicker,
html[data-theme="light"] .scale-advice-grid span,
html[data-theme="light"] .scale-advice-detail summary {
    color: #8e6a45;
}

html[data-theme="light"] .scale-advice-summary strong {
    color: #5d3f28;
}

html[data-theme="light"] .scale-advice-grid div {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(133, 102, 73, 0.2);
}

html[data-theme="light"] .scale-advice-grid p,
html[data-theme="light"] .scale-advice-tip,
html[data-theme="light"] .scale-advice-chord-list span {
    color: #4e453c;
}

html[data-theme="light"] .scale-advice-chord-list strong {
    color: #8f623b;
}

html[data-theme="light"] .scale-advice-detail {
    border-top-color: rgba(133, 102, 73, 0.18);
}

/* Keep page subtitles aligned with the homepage signature style. */
.signature-slogan,
.hero-tagline.signature-slogan,
.tracks-library-page .hero-tagline.signature-slogan,
.dictionary-heading .hero-tagline.signature-slogan,
.scale-page-heading .hero-tagline.signature-slogan,
.trainer-heading .hero-tagline.signature-slogan {
    color: var(--gold);
    font-family: "Noto Serif TC", serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

/* Cross-page state normalization */
:where(button, input, select, textarea):disabled,
:where(.primary-button, .secondary-button, .track-link, .select-key-button, .key-button)[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    filter: saturate(0.78);
    box-shadow: none;
    transform: none;
}

:where(button, input, select, textarea):disabled {
    color: color-mix(in srgb, var(--text-subtle) 82%, transparent);
    background-color: var(--disabled-background);
    border-color: var(--disabled-border);
}

:where(button, input, select, textarea):disabled:hover,
:where(.primary-button, .secondary-button, .track-link, .select-key-button, .key-button)[aria-disabled="true"]:hover {
    color: color-mix(in srgb, var(--text-subtle) 82%, transparent);
    background-color: var(--disabled-background);
    border-color: var(--disabled-border);
    transform: none;
}

.modal-content,
.progression-writer-shape-picker-dialog {
    background: var(--panel-background);
    border-color: var(--border-soft);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--shadow-color) 92%, transparent);
}

.modal-content label {
    color: var(--text-body);
}

.modal-content input,
.home-subscribe-form input,
.progression-writer-saved-picker select,
.progression-writer-meta-input,
.progression-writer-chord-field input {
    color: var(--control-text);
}

.home-subscribe-form input,
.progression-writer-saved-picker select {
    background: var(--control-background);
    border-color: var(--border-soft);
}

.home-subscribe-form input:hover,
.progression-writer-saved-picker select:hover,
.progression-writer-meta-input:hover,
.progression-writer-chord-field input:hover {
    background: var(--control-hover-background);
    border-color: var(--hover-border);
}

.home-subscribe-form input:focus,
.progression-writer-saved-picker select:focus,
.progression-writer-meta-input:focus,
.progression-writer-chord-field input:focus {
    background: var(--control-hover-background);
    border-color: var(--teal);
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.progression-writer-meta-input:focus {
    outline: 0;
}

.progression-writer-meta-input:disabled,
.progression-writer-saved-picker select:disabled {
    background: transparent;
    border-color: var(--disabled-border);
}

.result-mode-button.active,
.key-button.is-selected,
.progression-extension-option.is-selected,
.progression-writer-saved-item.is-active {
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.key-button.is-selected:hover,
.progression-extension-option.is-selected:hover {
    color: var(--chord-accent-text);
    background: var(--chord-accent-hover);
    border-color: var(--chord-accent-hover);
}

html[data-theme="light"] :is(
    .primary-button,
    .secondary-button,
    .track-link,
    .download-track-link,
    .track-actions .track-primary-action,
    .track-actions .track-secondary-action,
    .track-actions .uiverse-download-button,
    .track-actions .track-slides-download-link,
    .track-pill-button,
    .track-reset-button,
    .text-button,
    .result-mode-button,
    .helper-start-button,
    .analyze-file-button,
    .history-item-button,
    .select-key-button,
    .key-button,
    .progression-play-button,
    .progression-save-button,
    .progression-export-button,
    .progression-extension-option,
    .progression-download-button,
    .transpose-controls button,
    .favorite-track-button,
    .home-subscribe-button,
    .secondary-link-button
):hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--light-button-hover-text);
    background: var(--light-button-hover-background);
    border-color: var(--light-button-hover-border);
    box-shadow: var(--light-button-hover-shadow);
    transform: var(--light-button-hover-transform);
}

html[data-theme="light"] :is(
    .track-actions .uiverse-download-button,
    .track-actions .track-slides-download-link
):hover:not(:disabled):not([aria-disabled="true"]) {
    border: 0;
}

.progression-download-button:disabled,
.uiverse-download-button:disabled,
.track-slides-download-link[aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

@supports not (color: color-mix(in srgb, white, black)) {
    .navbar {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
    }

    .nav-submenu,
    .nav-compact-tools-menu,
    .track-key-options {
        background: rgba(27, 27, 27, 0.97);
        border-color: rgba(196, 164, 132, 0.22);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
    }

    html[data-theme="light"] .nav-submenu,
    html[data-theme="light"] .nav-compact-tools-menu,
    html[data-theme="light"] .track-key-options {
        background: rgba(255, 253, 249, 0.98);
        border-color: rgba(88, 72, 58, 0.22);
        box-shadow: 0 16px 34px rgba(91, 70, 52, 0.16);
    }

    .nav-submenu a:hover,
    .nav-submenu a.active,
    .nav-compact-tools-menu a:hover,
    .nav-compact-tools-menu a.active {
        color: var(--gold-light);
        background: rgba(196, 164, 132, 0.16);
    }

    html[data-theme="light"] .nav-submenu a:hover,
    html[data-theme="light"] .nav-submenu a.active,
    html[data-theme="light"] .nav-compact-tools-menu a:hover,
    html[data-theme="light"] .nav-compact-tools-menu a.active {
        color: var(--gold-light);
        background: rgba(239, 226, 210, 0.86);
    }

    .nav-compact-tools summary {
        background: rgba(20, 20, 20, 0.78);
        border-color: rgba(196, 164, 132, 0.22);
        box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24);
    }

    .nav-compact-tools summary:hover,
    .nav-compact-tools.is-active summary,
    .nav-compact-tools[open] summary {
        background: rgba(32, 28, 24, 0.94);
        border-color: rgba(229, 211, 179, 0.5);
    }

    html[data-theme="light"] .nav-compact-tools summary {
        background: rgba(250, 247, 242, 0.92);
        border-color: rgba(88, 72, 58, 0.2);
    }

    html[data-theme="light"] .nav-compact-tools summary:hover,
    html[data-theme="light"] .nav-compact-tools.is-active summary,
    html[data-theme="light"] .nav-compact-tools[open] summary {
        background: rgba(239, 226, 210, 0.92);
        border-color: rgba(152, 113, 78, 0.42);
    }

    .start-card,
    .home-release-card,
    .track-card,
    .audio-player-card,
    .key-finder-panel,
    .key-finder-result,
    .dictionary-browser,
    .dictionary-detail,
    .chord-shape-card,
    .progression-card,
    .trainer-card,
    .scale-current-card,
    .scale-neck-card {
        background: rgba(27, 27, 27, 0.92);
        border-color: rgba(196, 164, 132, 0.2);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
    }

    html[data-theme="light"] .start-card,
    html[data-theme="light"] .home-release-card,
    html[data-theme="light"] .track-card,
    html[data-theme="light"] .audio-player-card,
    html[data-theme="light"] .key-finder-panel,
    html[data-theme="light"] .key-finder-result,
    html[data-theme="light"] .dictionary-browser,
    html[data-theme="light"] .dictionary-detail,
    html[data-theme="light"] .chord-shape-card,
    html[data-theme="light"] .progression-card,
    html[data-theme="light"] .trainer-card,
    html[data-theme="light"] .scale-current-card,
    html[data-theme="light"] .scale-neck-card {
        background: rgba(255, 253, 249, 0.92);
        border-color: rgba(88, 72, 58, 0.18);
        box-shadow: 0 18px 40px rgba(91, 70, 52, 0.12);
    }

    .start-card:hover,
    .home-release-card:hover,
    .track-card:hover,
    .chord-shape-card:hover,
    .progression-card:hover,
    .trainer-card:hover,
    .scale-current-card:hover {
        border-color: rgba(127, 183, 173, 0.48);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="light"] .start-card:hover,
    html[data-theme="light"] .home-release-card:hover,
    html[data-theme="light"] .track-card:hover,
    html[data-theme="light"] .chord-shape-card:hover,
    html[data-theme="light"] .progression-card:hover,
    html[data-theme="light"] .trainer-card:hover,
    html[data-theme="light"] .scale-current-card:hover {
        border-color: rgba(45, 123, 118, 0.34);
        box-shadow: 0 20px 42px rgba(91, 70, 52, 0.16);
    }

    .primary-button::before,
    .secondary-button::before,
    .track-link::before,
    .select-key-button::before,
    .key-button::before,
    .progression-play-button::before,
    .progression-save-button::before,
    .progression-export-button::before {
        background:
            radial-gradient(circle at 30% 25%, rgba(229, 211, 179, 0.26), transparent 34%),
            linear-gradient(110deg, transparent 12%, rgba(229, 211, 179, 0.2) 46%, transparent 72%);
    }

    .secondary-button:hover,
    .secondary-track-link:hover,
    .progression-play-button:hover,
    .progression-save-button:hover,
    .progression-export-button:hover {
        color: var(--secondary-hover-text);
        background: rgba(229, 211, 179, 0.12);
        border-color: rgba(229, 211, 179, 0.5);
    }

    html[data-theme="light"] .secondary-button:hover,
    html[data-theme="light"] .secondary-track-link:hover,
    html[data-theme="light"] .progression-play-button:hover,
    html[data-theme="light"] .progression-save-button:hover,
    html[data-theme="light"] .progression-export-button:hover {
        background: rgba(239, 226, 210, 0.96);
        border-color: rgba(152, 113, 78, 0.38);
    }

    .theme-toggle {
        background: rgba(46, 46, 46, 0.94);
        box-shadow:
            inset 0 0 0 1px rgba(196, 164, 132, 0.18),
            0 6px 16px rgba(0, 0, 0, 0.28);
    }

    .theme-toggle:hover {
        background: rgba(38, 34, 30, 0.98);
        box-shadow:
            inset 0 0 0 1px rgba(229, 211, 179, 0.38),
            0 8px 22px rgba(0, 0, 0, 0.34);
    }

    html[data-theme="light"] .theme-toggle {
        background: rgba(250, 247, 242, 0.94);
        box-shadow:
            inset 0 0 0 1px rgba(88, 72, 58, 0.16),
            0 8px 20px rgba(91, 70, 52, 0.16);
    }

    html[data-theme="light"] .theme-toggle:hover {
        background: rgba(239, 226, 210, 0.96);
    }

    .key-finder-input,
    .key-finder-file-drop,
    .progression-writer-input,
    .home-subscribe-form input,
    input,
    textarea,
    select {
        border-color: rgba(196, 164, 132, 0.22);
        box-shadow: none;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: rgba(127, 183, 173, 0.68);
        box-shadow: 0 0 0 3px rgba(127, 183, 173, 0.18);
    }

    html[data-theme="light"] input:focus,
    html[data-theme="light"] textarea:focus,
    html[data-theme="light"] select:focus {
        border-color: rgba(45, 123, 118, 0.58);
        box-shadow: 0 0 0 3px rgba(45, 123, 118, 0.14);
    }

    .tracks-library-page .track-cover-media {
        border-right-color: rgba(196, 164, 132, 0.2);
    }

    .theme-transition-wash {
        background:
            radial-gradient(circle at 50% 18%, rgba(229, 211, 179, 0.16), transparent 38%),
            rgba(255, 250, 242, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .language-switch-button,
    .language-switch-label,
    .theme-toggle-switch,
    .theme-toggle-icon,
    .theme-toggle-icon-base,
    .theme-toggle-icon-rays,
    .theme-toggle-icon-bulb,
    .primary-button,
    .secondary-button,
    .track-link,
    .select-key-button,
    .key-button,
    .progression-play-button,
    .progression-save-button,
    .progression-export-button,
    .result-mode-button,
    .progression-extension-option,
    .key-mode-switch,
    .key-mode-label,
    .key-mode-toggle-handle,
    .key-mode-toggle-knob,
    .key-mode-toggle-bar,
    .key-mode-toggle-base-inside::after,
    .track-key-filter-toggle,
    .track-key-filter-toggle::after,
    .track-key-options,
    .track-key-checkbox-visual,
    .track-key-checkbox-inner,
    .track-sort-mode,
    .uiverse-toggle,
    .uiverse-toggle::after,
    .track-sort-switch,
    .track-sort-switch::after,
    .progression-writer-mode-label,
    .progression-writer-switch,
    .progression-writer-switch::after,
    .progression-download-layout-switch,
    .progression-download-layout-switch::after,
    .uiverse-download-button,
    .uiverse-download-button-circle,
    .uiverse-download-button-circle::before,
    .uiverse-download-button-icon,
    .uiverse-download-button-square,
    .track-slides-download-link,
    .track-slides-download-circle,
    .track-slides-download-circle::before,
    .track-slides-download-icon,
    .track-slides-download-square {
        transition-duration: 0.001ms !important;
    }

    .uiverse-loader,
    .uiverse-loader-dot::after,
    .jh-loader,
    .jh-loader-dot::after,
    .uiverse-download-button::before,
    .track-slides-download-link::before {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .primary-button::before,
    .secondary-button::before,
    .track-link::before,
    .select-key-button::before,
    .key-button::before,
    .progression-play-button::before,
    .progression-save-button::before,
    .progression-export-button::before {
        display: none;
    }
}