:root {
    --bg-deep: #090a0d;
    --bg-mid: #15181d;
    --bg-primary: #111318;
    --bg-secondary: rgba(18, 21, 27, 0.96);
    --bg-card: rgba(20, 24, 31, 0.98);
    --panel: rgba(18, 21, 27, 0.94);
    --panel-strong: rgba(24, 28, 35, 0.98);
    --line: rgba(240, 245, 255, 0.14);
    --text: #f4f7fb;
    --text-primary: #f4f7fb;
    --text-secondary: #aeb8c6;
    --muted: #a5afbb;
    --accent: #b8ff3b;
    --accent-a: #b8ff3b;
    --accent-b: #ff6b2c;
    --accent-c: #3fd7ff;
    --accent-soft: #3fd7ff;
    --accent-strong: #ff6b2c;
    --accent-light: #ffd84a;
    --good: #8dff4f;
    --bad: #ff5a36;
    --warn: #ffd84a;
    --source-color: #3fd7ff;
    --target-color: #ff6b2c;
    --chord-major: #8dff4f;
    --chord-minor: #3fd7ff;
    --chord-dim: #ff5a36;
    --chord-aug: #ffd84a;
    --chord-dom: #ff8a1f;
    --ui-font: "Space Grotesk", "Segoe UI", sans-serif;
    --label-font: "IBM Plex Mono", monospace;
}

html {
    background: #090a0d;
}

body {
    font-family: var(--ui-font) !important;
    background: #0d0f13 !important;
    background-image: none !important;
    color: var(--text) !important;
}

body::before,
body::after,
.orb,
.orb-2,
.landing::before,
.landing::after,
.hero-copy::after,
.hero-audio-link::after,
.hero-launch::before,
.hero-launch::after,
.pulse-ring {
    display: none !important;
    content: none !important;
}

body *,
body *::before,
body *::after {
    border-radius: 0 !important;
}

.page,
.container,
.landing {
    letter-spacing: 0.01em;
}

.landing,
.panel,
.hero,
.hero-stage,
.quiz-stage,
.page-content,
.tool-group,
.feature-card,
.group-link,
.hero-audio-link,
.quick-pick,
.key-selector-container,
.key-selector,
.modulation-path,
.section,
.controls,
.share-wrap,
.summary-table,
.sheet-line,
.history-item,
.stat,
.type-chip,
.interval-chip,
.note-chip,
.answer-btn,
.note-btn,
.status-card,
.result-card,
.results-card,
.chord,
.prompt-card,
.hero-launch,
.quiz-card,
.feedback,
.card,
.cards > *,
.feature-shell,
.spotlight-shell,
.quick-picks > *,
.tool-shell,
.comparison-grid > *,
.progression-chain,
.pivot-info {
    background: #171b21 !important;
    background-image: none !important;
    border: 1px solid rgba(240, 245, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: none !important;
}

.home-link,
.home-btn,
.crumb,
.ghost-link,
.tool-link,
.btn,
.play-btn,
select,
textarea,
input,
button,
.cue-pill,
.tag,
.answer-chip,
.hero-audio-kicker,
.eyebrow,
.status-pill,
.type-chip,
.interval-chip,
.note-chip,
.settings-toggle,
.secondary-actions a,
.quick-links span {
    background: #12151a !important;
    background-image: none !important;
    border: 1px solid rgba(240, 245, 255, 0.14) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-family: var(--label-font) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.tool-link,
.btn.primary,
.play-btn,
.play-orb,
button.primary,
.ghost-link[href="/privacy-policy/"] {
    background: #b8ff3b !important;
    background-image: none !important;
    border-color: #ecffb2 !important;
    color: #050607 !important;
    text-shadow: none !important;
}

.btn.secondary,
.home-link:hover,
.home-btn:hover,
.crumb:hover,
.ghost-link:hover,
.tool-link:hover,
.btn:hover,
.answer-btn:hover,
.interval-chip:hover,
.note-chip:hover,
.type-chip:hover,
select:hover,
button:hover {
    border-color: rgba(63, 215, 255, 0.82) !important;
    background: #1a1e25 !important;
    background-image: none !important;
    color: var(--text) !important;
    transform: none !important;
}

h1,
.page-head h1,
.hero h1,
header h1,
.feature-card h2,
.tool-group h2 {
    color: var(--text) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--text) !important;
    background-clip: border-box !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

.hero-highlight,
.feature-kicker,
.hero-audio-arrow,
.relationship-badge,
.legend strong,
.panel h2,
.group-head h2 + p strong {
    color: var(--accent-c) !important;
}

.eyebrow,
.feature-kicker,
.hero-audio-kicker,
.status-pill,
.tag,
.cue-pill,
.quick-stat,
.quick-kicker,
.section-nav,
.group-head .feature-kicker {
    font-family: var(--label-font) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--accent-a) !important;
}

.page-head p,
.hero p,
.hero-sub,
.page-intro,
.group-link span,
.feature-card p,
.quick-pick p,
.panel p,
.page-content p,
.page-content li,
header p {
    color: var(--muted) !important;
    max-width: 72ch;
}

.play-orb {
    width: min(260px, 100%) !important;
    min-height: 64px !important;
    aspect-ratio: auto !important;
    padding: 12px 14px !important;
    font-family: var(--label-font) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.hero-stage,
.quiz-stage,
.landing,
.hero,
header,
.spotlight-shell {
    background: #1a1e25 !important;
    background-image: none !important;
}

.landing,
.hero,
.hero-stage,
.quiz-stage,
.panel,
.page-content,
.tool-group,
.feature-card,
.quick-pick,
.group-link,
.hero-audio-link,
.key-selector-container,
.controls,
.modulation-path,
.section,
.share-wrap,
.feedback {
    position: relative;
}

.landing::after,
.hero::after,
.hero-stage::after,
.quiz-stage::after,
.panel::after,
.page-content::after,
.tool-group::after,
.feature-card::after,
.quick-pick::after,
.group-link::after,
.hero-audio-link::after,
.key-selector-container::after,
.controls::after,
.modulation-path::after,
.section::after,
.share-wrap::after,
.feedback::after {
    display: block !important;
    content: "" !important;
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.panel h2::before,
.section h2::before,
.group-head h2::before {
    background: var(--accent-c) !important;
    width: 2px !important;
    height: 1.1em !important;
}

.chord.major,
.source,
.in-key.source,
.legend-color[style*="source-color"] {
    color: #091006 !important;
    background: #b8ff3b !important;
    background-image: none !important;
}

.chord.minor,
.target,
.in-key.target,
.legend-color[style*="target-color"] {
    color: #031116 !important;
    background: #3fd7ff !important;
    background-image: none !important;
}

.chord.dominant,
.chord.dom,
.pivot,
.legend-color[style*="chord-dom"] {
    color: #180802 !important;
    background: #ff8a1f !important;
    background-image: none !important;
}

.answer-btn.is-correct,
.good {
    border-color: rgba(184, 255, 59, 0.72) !important;
    background: #1f2a12 !important;
    background-image: none !important;
    color: #efffd6 !important;
}

.answer-btn.is-wrong,
.bad {
    border-color: rgba(255, 90, 54, 0.76) !important;
    background: #31130f !important;
    background-image: none !important;
    color: #ffdcd5 !important;
}

.landing,
.page,
.container {
    max-width: min(1280px, 100%) !important;
}

.cta-row,
.topbar,
.home-header,
.group-links,
.quick-picks,
.hero-audio-grid,
.controls-grid,
.stats-grid,
.secondary-actions,
.feedback-actions,
.preset-row,
.action-row {
    gap: 8px !important;
}

.landing,
.page,
.container {
    padding-inline: 18px !important;
}

.landing,
.hero,
.hero-stage,
.quiz-stage,
.panel,
.page-content,
.tool-group,
.feature-card,
.quick-pick,
.group-link,
.hero-audio-link,
.controls,
.key-selector-container,
.modulation-path,
.section,
.share-wrap,
.feedback {
    padding: 14px !important;
}

.feature-grid,
.group-links,
.quick-picks,
.hero-audio-grid {
    align-items: stretch !important;
}

.home-link,
.home-btn,
.crumb,
.ghost-link,
.tool-link,
.btn,
.play-btn,
button,
select,
textarea,
input {
    min-height: 34px !important;
    padding: 8px 10px !important;
}

.hero-audio-title,
.group-link strong,
.quick-pick h2,
.feature-card h2,
.panel h2 {
    font-weight: 600 !important;
}

.hero-audio-copy,
.group-link span,
.quick-links span,
.feature-card p {
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
}

.feature-card,
.group-link,
.quick-pick,
.hero-audio-link {
    min-height: 0 !important;
}

.status-pill,
.eyebrow,
.hero-audio-kicker,
.cue-pill,
.tag,
.answer-chip {
    padding: 5px 8px !important;
}

@media (max-width: 640px) {
    .page {
        padding: 8px 8px 16px !important;
    }

    .topbar {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .topbar .crumb {
        flex: 0 0 auto;
    }

    .page-head {
        margin: 0 0 8px !important;
    }

    .page-head p,
    .hero-copy p,
    .prompt-sub,
    .launch-note,
    .hero-cues,
    .goal-strip,
    .share-wrap {
        display: none !important;
    }

    .page-head h1,
    .prompt-main {
        margin: 0 0 8px !important;
        font-size: clamp(1.02rem, 5vw, 1.28rem) !important;
        line-height: 1.05 !important;
        max-width: none !important;
        white-space: normal !important;
    }

    .hero-stage,
    .quiz-stage,
    .panel,
    .feedback {
        padding: 8px !important;
    }

    .hero-grid {
        display: block !important;
    }

    .hero-rail {
        display: grid !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .hero-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .hero-copy h2 {
        margin: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
    }

    .hero-launch {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .play-orb {
        width: auto !important;
        min-width: 112px !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .play-orb small {
        display: none !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .stat {
        padding: 6px !important;
    }

    .stat-label {
        font-size: 0.54rem !important;
    }

    .stat-value {
        font-size: 0.86rem !important;
    }

    .secondary-actions,
    .feedback-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .secondary-actions .btn,
    .feedback-actions .btn,
    .answers-grid .answer-btn,
    .answers-grid .btn,
    .answers-grid button {
        min-height: 40px !important;
        padding: 8px 6px !important;
        font-family: var(--ui-font) !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.01em !important;
        text-transform: none !important;
    }

    .tag-row,
    .meta-row {
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .tag-row .tag,
    .meta-row .tag,
    #roundTag,
    #difficultyTag,
    #statusTag,
    #poolTag {
        padding: 3px 5px !important;
        font-size: 0.58rem !important;
        letter-spacing: 0.08em !important;
    }

    .prompt,
    .notes-line {
        margin-bottom: 6px !important;
        font-size: 0.72rem !important;
    }

    .answers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .feedback {
        margin-top: 8px !important;
    }

    .history-panel,
    .settings-panel {
        margin-top: 8px !important;
    }
}