/* =============================================================================
   Academia Auditiva - design system
   -----------------------------------------------------------------------------
   Clean and musical: Figtree (geometric sans) for the brand name and headings,
   Inter for the interface, staff lines and noteheads as motifs. The colours
   come from the logo: violet accent and navy ink on white, a navy dark theme,
   and the logo's violet-to-teal gradient on XP bars. The theme follows
   Bootstrap 5.3 colour modes ([data-bs-theme]).

   Order matters:
     1. @font-face
     2. Theme tokens (light, then dark)
     3. Derived tokens + Bootstrap variable mapping. These come after both token
        blocks so every element resolves var(--aa-*) against its own theme.
     4. Base styles, Bootstrap skins, aa-* components, exercise UI,
        third-party skins, reduced motion.
   ============================================================================= */

/* ---------- 1. Fonts (self-hosted, SIL OFL 1.1 - see /fonts/*-OFL.txt) ---------- */
@font-face {
    font-family: "Figtree Variable";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Theme tokens ---------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    --aa-bg: #FFFFFF;
    --aa-bg-rgb: 255, 255, 255;
    --aa-surface: #F5F7FB;
    --aa-surface-rgb: 245, 247, 251;
    --aa-raised: #FFFFFF;
    --aa-ink: #0B1A33;
    --aa-ink-rgb: 11, 26, 51;
    --aa-muted: #53607A;
    --aa-muted-rgb: 83, 96, 122;
    --aa-line: #E2E7F0;
    --aa-line-rgb: 226, 231, 240;
    --aa-line-strong: #CDD5E2;
    --aa-staff: #D5DCE8;

    --aa-accent: #6650FC;
    --aa-accent-rgb: 102, 80, 252;
    --aa-accent-hover: #5236E6;
    --aa-accent-text: #5236E6;
    --aa-accent-text-rgb: 82, 54, 230;
    --aa-accent-soft: #EFEDFF;
    --aa-on-accent: #FFFFFF;

    /* Logo (_Logo.cshtml): the navy piece and the stops of the left "A" gradient. */
    --aa-logo-ink: #022754;
    --aa-logo-stop-2: #014072;
    --aa-logo-stop-3: #0594AB;

    --aa-ok: #0B7A53;
    --aa-ok-rgb: 11, 122, 83;
    --aa-ok-bg: #EAF7F1;
    --aa-err: #DC2626;
    --aa-err-rgb: 220, 38, 38;
    --aa-err-hover: #B91C1C;
    --aa-err-bg: #FEF2F2;
    --aa-warn: #B45309;
    --aa-warn-rgb: 180, 83, 9;
    --aa-warn-bg: #FFFBEB;

    --aa-key-white: #FFFFFF;
    --aa-key-black: #0B1A33;
    --aa-key-edge: #CDD5E2;
    --aa-key-black-label: #B4BDD0;
    --aa-key-selected-bg: #EFEDFF;
    --aa-key-selected-label: #5236E6;
    --aa-key-accent: #6650FC;

    --aa-shadow-sm: 0 1px 2px rgba(11, 26, 51, .06), 0 1px 3px rgba(11, 26, 51, .04);
    --aa-shadow-md: 0 14px 34px -14px rgba(11, 26, 51, .22), 0 2px 6px rgba(11, 26, 51, .05);
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --aa-bg: #0B1220;
    --aa-bg-rgb: 11, 18, 32;
    --aa-surface: #101A2B;
    --aa-surface-rgb: 16, 26, 43;
    --aa-raised: #17233A;
    --aa-ink: #EEF2FA;
    --aa-ink-rgb: 238, 242, 250;
    --aa-muted: #9EAAC0;
    --aa-muted-rgb: 158, 170, 192;
    --aa-line: #22304A;
    --aa-line-rgb: 34, 48, 74;
    --aa-line-strong: #304060;
    --aa-staff: #2A3854;

    --aa-accent: #8F80FF;
    --aa-accent-rgb: 143, 128, 255;
    --aa-accent-hover: #ADA2FF;
    --aa-accent-text: #ADA2FF;
    --aa-accent-text-rgb: 173, 162, 255;
    --aa-accent-soft: #1E1C48;
    --aa-on-accent: #0B1220;

    /* The navy parts of the logo turn light, fading into the same teal. */
    --aa-logo-ink: #EEF2FA;
    --aa-logo-stop-2: #C5ECF1;
    --aa-logo-stop-3: #6DDEDF;

    --aa-ok: #4ADE9B;
    --aa-ok-rgb: 74, 222, 155;
    --aa-ok-bg: #0F2A20;
    --aa-err: #F87171;
    --aa-err-rgb: 248, 113, 113;
    --aa-err-hover: #FCA5A5;
    --aa-err-bg: #2A1215;
    --aa-warn: #FBBF24;
    --aa-warn-rgb: 251, 191, 36;
    --aa-warn-bg: #2A1F0A;

    --aa-key-white: #EEF2FA;
    --aa-key-black: #050A14;
    --aa-key-edge: #304060;
    --aa-key-black-label: #9EAAC0;
    --aa-key-selected-bg: #DAD5FF;
    --aa-key-selected-label: #5236E6;
    --aa-key-accent: #6650FC;

    --aa-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --aa-shadow-md: 0 18px 40px -16px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ---------- 3. Derived tokens + Bootstrap mapping ---------- */
:root,
[data-bs-theme] {
    --aa-font-ui: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aa-font-display: "Figtree Variable", Figtree, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aa-gradient-brand: linear-gradient(90deg, #6650FC 0%, #3A6BEA 45%, #0A9CC0 75%, #01C7C7 100%);
    --aa-radius-sm: 8px;
    --aa-radius: 10px;
    --aa-radius-lg: 14px;
    --aa-radius-xl: 18px;
    --aa-focus-ring: color-mix(in srgb, var(--aa-accent) 30%, transparent);
    --aa-hover-tint: color-mix(in srgb, var(--aa-ink) 5%, transparent);

    --bs-font-sans-serif: var(--aa-font-ui);
    --bs-body-font-family: var(--aa-font-ui);
    --bs-body-bg: var(--aa-bg);
    --bs-body-bg-rgb: var(--aa-bg-rgb);
    --bs-body-color: var(--aa-ink);
    --bs-body-color-rgb: var(--aa-ink-rgb);
    --bs-emphasis-color: var(--aa-ink);
    --bs-emphasis-color-rgb: var(--aa-ink-rgb);
    --bs-secondary-color: var(--aa-muted);
    --bs-secondary-color-rgb: var(--aa-muted-rgb);
    --bs-tertiary-color: rgba(var(--aa-muted-rgb), .75);
    --bs-tertiary-color-rgb: var(--aa-muted-rgb);
    --bs-secondary-bg: var(--aa-line);
    --bs-secondary-bg-rgb: var(--aa-line-rgb);
    --bs-tertiary-bg: var(--aa-surface);
    --bs-tertiary-bg-rgb: var(--aa-surface-rgb);
    --bs-border-color: var(--aa-line);
    --bs-border-color-translucent: rgba(var(--aa-ink-rgb), .1);

    --bs-primary: var(--aa-accent);
    --bs-primary-rgb: var(--aa-accent-rgb);
    --bs-primary-text-emphasis: var(--aa-accent-text);
    --bs-primary-bg-subtle: var(--aa-accent-soft);
    --bs-primary-border-subtle: color-mix(in srgb, var(--aa-accent) 30%, var(--aa-bg));
    --bs-secondary: var(--aa-muted);
    --bs-secondary-rgb: var(--aa-muted-rgb);
    --bs-secondary-text-emphasis: var(--aa-ink);
    --bs-secondary-bg-subtle: var(--aa-surface);
    --bs-secondary-border-subtle: var(--aa-line-strong);
    --bs-success: var(--aa-ok);
    --bs-success-rgb: var(--aa-ok-rgb);
    --bs-success-text-emphasis: var(--aa-ok);
    --bs-success-bg-subtle: var(--aa-ok-bg);
    --bs-success-border-subtle: color-mix(in srgb, var(--aa-ok) 30%, var(--aa-bg));
    --bs-danger: var(--aa-err);
    --bs-danger-rgb: var(--aa-err-rgb);
    --bs-danger-text-emphasis: var(--aa-err-hover);
    --bs-danger-bg-subtle: var(--aa-err-bg);
    --bs-danger-border-subtle: color-mix(in srgb, var(--aa-err) 30%, var(--aa-bg));
    --bs-warning: var(--aa-warn);
    --bs-warning-rgb: var(--aa-warn-rgb);
    --bs-warning-text-emphasis: var(--aa-warn);
    --bs-warning-bg-subtle: var(--aa-warn-bg);
    --bs-warning-border-subtle: color-mix(in srgb, var(--aa-warn) 30%, var(--aa-bg));
    --bs-info: var(--aa-accent);
    --bs-info-rgb: var(--aa-accent-rgb);
    --bs-info-text-emphasis: var(--aa-accent-text);
    --bs-info-bg-subtle: var(--aa-accent-soft);
    --bs-info-border-subtle: color-mix(in srgb, var(--aa-accent) 30%, var(--aa-bg));

    --bs-link-color: var(--aa-accent-text);
    --bs-link-color-rgb: var(--aa-accent-text-rgb);
    --bs-link-hover-color: var(--aa-ink);
    --bs-link-hover-color-rgb: var(--aa-ink-rgb);
    --bs-code-color: var(--aa-accent-text);

    --bs-border-radius: var(--aa-radius);
    --bs-border-radius-sm: var(--aa-radius-sm);
    --bs-border-radius-lg: var(--aa-radius-lg);
    --bs-border-radius-xl: var(--aa-radius-xl);
    --bs-border-radius-xxl: 24px;
    --bs-border-radius-2xl: 24px;

    --bs-box-shadow-sm: var(--aa-shadow-sm);
    --bs-box-shadow: var(--aa-shadow-md);
    --bs-focus-ring-color: var(--aa-focus-ring);
    --bs-form-valid-color: var(--aa-ok);
    --bs-form-valid-border-color: var(--aa-ok);
    --bs-form-invalid-color: var(--aa-err);
    --bs-form-invalid-border-color: var(--aa-err);
}

/* ---------- 4. Base ---------- */
html {
    scroll-padding-top: 5rem;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--aa-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    line-height: 1.05;
    letter-spacing: -.025em;
}

h5, h6, .h5, .h6 {
    font-family: var(--aa-font-ui);
    font-weight: 600;
    letter-spacing: -.005em;
}

.lead {
    font-weight: 400;
}

a {
    text-underline-offset: .18em;
}

a:focus-visible {
    outline: 2px solid var(--aa-accent);
    outline-offset: 2px;
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

::selection {
    background: rgba(var(--aa-accent-rgb), .22);
}

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--aa-radius);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
    letter-spacing: -.005em;
}

/* Re-declared because the .btn rule above overrides Bootstrap's size rules. */
.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-padding-y: .35rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--aa-radius-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 1.075rem;
    --bs-btn-border-radius: 12px;
}

.btn-link {
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-color: var(--aa-on-accent);
    --bs-btn-bg: var(--aa-accent);
    --bs-btn-border-color: var(--aa-accent);
    --bs-btn-hover-color: var(--aa-on-accent);
    --bs-btn-hover-bg: var(--aa-accent-hover);
    --bs-btn-hover-border-color: var(--aa-accent-hover);
    --bs-btn-active-color: var(--aa-on-accent);
    --bs-btn-active-bg: var(--aa-accent-hover);
    --bs-btn-active-border-color: var(--aa-accent-hover);
    --bs-btn-disabled-color: var(--aa-on-accent);
    --bs-btn-disabled-bg: var(--aa-accent);
    --bs-btn-disabled-border-color: var(--aa-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--aa-accent-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--aa-accent) 45%, transparent);
    --bs-btn-hover-color: var(--aa-accent-text);
    --bs-btn-hover-bg: var(--aa-accent-soft);
    --bs-btn-hover-border-color: var(--aa-accent);
    --bs-btn-active-color: var(--aa-accent-text);
    --bs-btn-active-bg: var(--aa-accent-soft);
    --bs-btn-active-border-color: var(--aa-accent);
    --bs-btn-disabled-color: var(--aa-accent-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--aa-accent) 45%, transparent);
}

.btn-outline-secondary,
.aa-ghost-btn {
    --bs-btn-color: var(--aa-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--aa-line-strong);
    --bs-btn-hover-color: var(--aa-ink);
    --bs-btn-hover-bg: var(--aa-hover-tint);
    --bs-btn-hover-border-color: var(--aa-line-strong);
    --bs-btn-active-color: var(--aa-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--aa-ink) 9%, transparent);
    --bs-btn-active-border-color: var(--aa-line-strong);
    --bs-btn-disabled-color: var(--aa-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--aa-line);
}

.btn-success {
    --bs-btn-color: var(--aa-on-accent);
    --bs-btn-bg: var(--aa-ok);
    --bs-btn-border-color: var(--aa-ok);
    --bs-btn-hover-color: var(--aa-on-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--aa-ok) 85%, var(--aa-ink));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--aa-ok) 85%, var(--aa-ink));
    --bs-btn-active-color: var(--aa-on-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--aa-ok) 80%, var(--aa-ink));
    --bs-btn-active-border-color: color-mix(in srgb, var(--aa-ok) 80%, var(--aa-ink));
    --bs-btn-disabled-color: var(--aa-on-accent);
    --bs-btn-disabled-bg: var(--aa-ok);
    --bs-btn-disabled-border-color: var(--aa-ok);
}

.btn-danger {
    --bs-btn-color: var(--aa-on-accent);
    --bs-btn-bg: var(--aa-err);
    --bs-btn-border-color: var(--aa-err);
    --bs-btn-hover-color: var(--aa-on-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--aa-err) 85%, var(--aa-ink));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--aa-err) 85%, var(--aa-ink));
    --bs-btn-active-color: var(--aa-on-accent);
    --bs-btn-active-bg: color-mix(in srgb, var(--aa-err) 80%, var(--aa-ink));
    --bs-btn-active-border-color: color-mix(in srgb, var(--aa-err) 80%, var(--aa-ink));
    --bs-btn-disabled-color: var(--aa-on-accent);
    --bs-btn-disabled-bg: var(--aa-err);
    --bs-btn-disabled-border-color: var(--aa-err);
}

.btn-outline-success {
    --bs-btn-color: var(--aa-ok);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--aa-ok) 50%, transparent);
    --bs-btn-hover-color: var(--aa-ok);
    --bs-btn-hover-bg: var(--aa-ok-bg);
    --bs-btn-hover-border-color: var(--aa-ok);
    --bs-btn-active-color: var(--aa-ok);
    --bs-btn-active-bg: var(--aa-ok-bg);
    --bs-btn-active-border-color: var(--aa-ok);
    --bs-btn-disabled-color: var(--aa-ok);
    --bs-btn-disabled-bg: transparent;
}

.btn-outline-danger {
    --bs-btn-color: var(--aa-err);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--aa-err) 50%, transparent);
    --bs-btn-hover-color: var(--aa-err-hover);
    --bs-btn-hover-bg: var(--aa-err-bg);
    --bs-btn-hover-border-color: var(--aa-err);
    --bs-btn-active-color: var(--aa-err-hover);
    --bs-btn-active-bg: var(--aa-err-bg);
    --bs-btn-active-border-color: var(--aa-err);
    --bs-btn-disabled-color: var(--aa-err);
    --bs-btn-disabled-bg: transparent;
}

.btn-outline-warning {
    --bs-btn-color: var(--aa-warn);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: color-mix(in srgb, var(--aa-warn) 50%, transparent);
    --bs-btn-hover-color: var(--aa-warn);
    --bs-btn-hover-bg: var(--aa-warn-bg);
    --bs-btn-hover-border-color: var(--aa-warn);
    --bs-btn-active-color: var(--aa-warn);
    --bs-btn-active-bg: var(--aa-warn-bg);
    --bs-btn-active-border-color: var(--aa-warn);
    --bs-btn-disabled-color: var(--aa-warn);
    --bs-btn-disabled-bg: transparent;
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--aa-line-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.form-label {
    font-weight: 500;
}

.input-group-text {
    border-color: var(--aa-line-strong);
    background-color: var(--aa-surface);
}

.form-check-input {
    border-color: var(--aa-line-strong);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--aa-accent);
    border-color: var(--aa-accent);
}

.form-check-input:focus {
    border-color: var(--aa-accent);
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a5a0ff'/%3e%3c/svg%3e");
}

/* Re-declared so the checked knob stays white when the switch is also focused. */
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Vendor pseudo-elements must stay in separate rules (one unknown selector drops the whole rule). */
.form-range::-webkit-slider-thumb {
    background-color: var(--aa-accent);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--aa-accent-hover);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--aa-bg), 0 0 0 .25rem var(--aa-focus-ring);
}

.form-range::-moz-range-thumb {
    background-color: var(--aa-accent);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--aa-accent-hover);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--aa-bg), 0 0 0 .25rem var(--aa-focus-ring);
}

/* ---------- Bootstrap components ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--aa-bg);
    --bs-dropdown-color: var(--aa-ink);
    --bs-dropdown-border-color: var(--aa-line);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-inner-border-radius: 11px;
    --bs-dropdown-padding-x: .35rem;
    --bs-dropdown-padding-y: .35rem;
    --bs-dropdown-font-size: .925rem;
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-item-border-radius: var(--aa-radius-sm);
    --bs-dropdown-link-color: var(--aa-ink);
    --bs-dropdown-link-hover-color: var(--aa-ink);
    --bs-dropdown-link-hover-bg: var(--aa-hover-tint);
    --bs-dropdown-link-active-color: var(--aa-accent-text);
    --bs-dropdown-link-active-bg: var(--aa-accent-soft);
    --bs-dropdown-link-disabled-color: var(--aa-muted);
    --bs-dropdown-divider-bg: var(--aa-line);
    --bs-dropdown-header-color: var(--aa-muted);
    --bs-dropdown-box-shadow: var(--aa-shadow-md);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item:focus-visible {
    outline: 2px solid var(--aa-accent);
    outline-offset: -2px;
}

.nav-pills {
    --bs-nav-link-color: var(--aa-muted);
    --bs-nav-link-hover-color: var(--aa-ink);
    --bs-nav-link-font-weight: 500;
    --bs-nav-pills-border-radius: var(--aa-radius-sm);
    --bs-nav-pills-link-active-color: var(--aa-accent-text);
    --bs-nav-pills-link-active-bg: var(--aa-accent-soft);
}

.list-group {
    --bs-list-group-color: var(--aa-ink);
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--aa-line);
    --bs-list-group-border-radius: 12px;
    --bs-list-group-action-color: var(--aa-ink);
    --bs-list-group-action-hover-color: var(--aa-ink);
    --bs-list-group-action-hover-bg: color-mix(in srgb, var(--aa-accent) 7%, transparent);
    --bs-list-group-action-active-color: var(--aa-accent-text);
    --bs-list-group-action-active-bg: var(--aa-accent-soft);
    --bs-list-group-active-color: var(--aa-accent-text);
    --bs-list-group-active-bg: var(--aa-accent-soft);
    --bs-list-group-active-border-color: color-mix(in srgb, var(--aa-accent) 30%, var(--aa-bg));
}

/* In flex rows the list number is itself a flex item; a fixed, right-aligned column
   keeps item content aligned (tabular digits: 1-9 = 0.92em, 10-99 = 1.57em). */
.list-group-numbered > .list-group-item.d-flex::before {
    flex-shrink: 0;
    min-width: 1.6em;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--aa-line);
    --bs-progress-bar-bg: var(--aa-accent);
    --bs-progress-bar-color: var(--aa-on-accent);
    --bs-progress-border-radius: 999px;
}

.accordion {
    --bs-accordion-color: var(--aa-ink);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--aa-line);
    --bs-accordion-border-radius: 12px;
    --bs-accordion-inner-border-radius: 11px;
    --bs-accordion-btn-color: var(--aa-ink);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-border-color: var(--aa-accent);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
    --bs-accordion-active-color: var(--aa-ink);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235A5F75'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234338CA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239AA0BA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A5A0FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--aa-line);
    --bs-table-striped-bg: rgba(var(--aa-ink-rgb), .03);
    --bs-table-hover-bg: rgba(var(--aa-ink-rgb), .04);
    --bs-table-active-bg: rgba(var(--aa-ink-rgb), .07);
}

.table-light {
    --bs-table-color: var(--aa-muted);
    --bs-table-bg: rgba(var(--aa-ink-rgb), .04);
    --bs-table-border-color: var(--aa-line);
    --bs-table-striped-color: var(--aa-ink);
    --bs-table-striped-bg: rgba(var(--aa-ink-rgb), .06);
    --bs-table-active-color: var(--aa-ink);
    --bs-table-active-bg: rgba(var(--aa-ink-rgb), .08);
    --bs-table-hover-color: var(--aa-ink);
    --bs-table-hover-bg: rgba(var(--aa-ink-rgb), .06);
}

.table > thead th {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.card {
    --bs-card-bg: var(--aa-surface);
    --bs-card-border-color: var(--aa-line);
    --bs-card-border-radius: var(--aa-radius-lg);
    --bs-card-inner-border-radius: 13px;
    --bs-card-cap-bg: transparent;
}

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .38em;
}

/* White text on the lighter dark-mode accents falls below 4.5:1, so badges switch to dark text. */
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-info {
    --bs-badge-color: var(--aa-bg);
}

[data-bs-theme="dark"] .text-bg-primary,
[data-bs-theme="dark"] .text-bg-secondary,
[data-bs-theme="dark"] .text-bg-success,
[data-bs-theme="dark"] .text-bg-danger,
[data-bs-theme="dark"] .text-bg-info {
    color: var(--aa-bg) !important;
}

.alert {
    --bs-alert-border-radius: 12px;
}

.modal {
    --bs-modal-color: var(--aa-ink);
    --bs-modal-bg: var(--aa-bg);
    --bs-modal-border-color: var(--aa-line);
    --bs-modal-border-radius: var(--aa-radius-xl);
    --bs-modal-inner-border-radius: 17px;
    --bs-modal-header-border-color: var(--aa-line);
    --bs-modal-footer-border-color: var(--aa-line);
    --bs-modal-box-shadow: var(--aa-shadow-md);
}

.modal-content {
    box-shadow: var(--bs-modal-box-shadow);
}

.modal-title {
    font-family: var(--aa-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
}

.modal-backdrop {
    --bs-backdrop-bg: #050A14;
    --bs-backdrop-opacity: .5;
}

/* ---------- Shell: brand, navbar, footer ---------- */
.aa-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--aa-ink);
    text-decoration: none;
}

.aa-brand:hover,
.aa-brand:focus {
    color: var(--aa-ink);
}

/* The symbol is wider than tall: it keeps the brand's height and takes its own width. */
.aa-logo {
    width: auto;
    height: 28px;
    flex-shrink: 0;
}

.aa-logo-ink { fill: var(--aa-logo-ink); }
.aa-logo-stop-1 { stop-color: var(--aa-logo-ink); }
.aa-logo-stop-2 { stop-color: var(--aa-logo-stop-2); }
.aa-logo-stop-3 { stop-color: var(--aa-logo-stop-3); }

.aa-brand-text {
    font-family: var(--aa-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
    color: inherit;
}

.aa-brand .aa-brand-text {
    font-size: 1.15rem;
    color: var(--aa-ink);
}

.aa-accent-text {
    color: var(--aa-accent-text);
}

.aa-navbar {
    --bs-navbar-color: var(--aa-muted);
    --bs-navbar-hover-color: var(--aa-ink);
    --bs-navbar-active-color: var(--aa-accent-text);
    --bs-navbar-brand-color: var(--aa-ink);
    --bs-navbar-brand-hover-color: var(--aa-ink);
    --bs-navbar-nav-link-padding-x: .8rem;
    --bs-navbar-toggler-border-color: var(--aa-line);
    background-color: color-mix(in srgb, var(--aa-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--aa-line);
    /* Its open menus stay over the page, also on small screens where the header scrolls away. */
    z-index: 1020;
}

.aa-navbar .navbar-nav {
    --bs-nav-link-padding-x: .8rem;
}

.aa-navbar .navbar-nav .nav-link {
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--aa-radius-sm);
    transition: color .15s ease, background-color .15s ease;
}

.aa-navbar .navbar-nav .nav-link:hover {
    color: var(--aa-ink);
    background-color: var(--aa-hover-tint);
}

.aa-navbar .navbar-nav .nav-link.active,
.aa-navbar .navbar-nav .nav-link[aria-current="page"] {
    color: var(--aa-accent-text);
    background-color: var(--aa-accent-soft);
}

.aa-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

/* Up to seven menu items share one row with the brand and the account buttons. */
@media (min-width: 992px) {
    .aa-navbar {
        --bs-navbar-nav-link-padding-x: .6rem;
    }

    /* A translation too long for the row wraps whole items, never a label. */
    .aa-navbar .navbar-nav {
        flex-wrap: wrap;
    }

    .aa-navbar .navbar-nav .nav-link {
        font-size: .9375rem;
    }
}

/* Below 1200 px a signed-in menu needs the brand's room: the logo stays, the name is still read out. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .aa-navbar:has(.navbar-nav) .aa-brand-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Below 992 px the language and account buttons sit at the left of the open menu:
   their menus open under that row, from its left edge, so they never run off the screen. */
@media (max-width: 991.98px) {
    .aa-navbar-tools {
        position: relative;
    }

    .aa-navbar-tools .dropdown {
        position: static;
    }

    .aa-navbar-tools .dropdown-menu[data-bs-popper] {
        right: auto;
        left: 0;
        max-width: 100%;
    }
}

.aa-theme-toggle,
.aa-bell,
.aa-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid var(--aa-line);
    border-radius: 999px;
    background: transparent;
    color: var(--aa-muted);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.aa-theme-toggle,
.aa-bell {
    width: 36px;
    padding: 0;
}

.aa-bell {
    position: relative;
    text-decoration: none;
}

.aa-bell-count {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--aa-accent);
    color: var(--aa-on-accent);
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.aa-lang-btn {
    min-width: 44px;
    padding: 0 .8rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.aa-lang-btn.dropdown-toggle::after {
    display: none;
}

.aa-theme-toggle:hover,
.aa-bell:hover,
.aa-bell[aria-current="page"],
.aa-lang-btn:hover,
.aa-lang-btn.show {
    color: var(--aa-ink);
    background: var(--aa-surface);
    border-color: var(--aa-line-strong);
}

.aa-theme-toggle:focus-visible,
.aa-bell:focus-visible,
.aa-lang-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

/* The notifications page: unread ones are tinted, and still change on hover. */
.list-group.aa-notifications {
    --bs-list-group-bg: transparent;
}

.aa-notifications .aa-notification-unread {
    --bs-list-group-bg: rgba(var(--aa-accent-rgb), .07);
}

.aa-notification-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: .55rem;
    border-radius: 50%;
    background: var(--aa-accent);
}

.aa-footer {
    margin-top: 2.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--aa-line);
    color: var(--aa-muted);
    font-size: .9rem;
}

.aa-footer a {
    color: var(--aa-muted);
    text-decoration: none;
}

.aa-footer a:hover {
    color: var(--aa-ink);
    text-decoration: underline;
}

.aa-footer .aa-brand {
    color: var(--aa-ink);
}

.aa-footer .aa-brand:hover {
    text-decoration: none;
}

.aa-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--aa-radius-sm) 0;
    background: var(--aa-accent);
    color: var(--aa-on-accent) !important;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-110%);
    transition: transform .2s ease;
}

.aa-skip-link:focus {
    transform: translateY(0);
}

.aa-htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: 3px;
    background: var(--aa-accent);
}

/* ---------- Cards and small pieces ---------- */
.aa-card,
.aa-card-flat {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--aa-line);
    --bs-card-cap-bg: transparent;
    --bs-card-inner-border-radius: 13px;
    position: relative;
    background: var(--aa-surface);
    color: var(--aa-ink);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
}

.aa-card {
    transition: border-color .15s ease;
}

.aa-card:hover,
.aa-card:focus-within {
    border-color: color-mix(in srgb, var(--aa-accent) 40%, var(--aa-line));
}

.aa-card-accent::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    border-radius: var(--aa-radius-lg) var(--aa-radius-lg) 0 0;
    background: var(--aa-accent);
}

.aa-icon-pill {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    font-size: 1.25rem;
}

.aa-step-num {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    font-family: var(--aa-font-display);
    font-weight: 600;
    font-size: 1.05rem;
}

.aa-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}

.aa-eyebrow {
    display: inline-block;
    font-family: var(--aa-font-ui);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--aa-accent-text);
}

.aa-notehead {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--aa-accent);
    fill: currentColor;
}

.aa-note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aa-note-list > li {
    position: relative;
    padding-left: 1.4rem;
}

.aa-note-list > li + li {
    margin-top: .6rem;
}

.aa-note-list > li::before {
    content: "";
    position: absolute;
    top: .5em;
    left: .1rem;
    width: .7rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--aa-accent);
    transform: rotate(-22deg);
}

.aa-pill-tab {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--aa-line);
    border-radius: 999px;
    background: var(--aa-surface);
}

.aa-pill-tab > button,
.aa-pill-tab > a {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .45rem 1rem;
    background: transparent;
    color: var(--aa-muted);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.aa-pill-tab > a {
    text-decoration: none;
}

.aa-pill-tab > button:hover,
.aa-pill-tab > a:hover {
    color: var(--aa-ink);
}

.aa-pill-tab > button.active,
.aa-pill-tab > button[aria-pressed="true"],
.aa-pill-tab > button[aria-selected="true"],
.aa-pill-tab > a.active {
    background: var(--aa-raised);
    color: var(--aa-ink);
    box-shadow: var(--aa-shadow-sm), 0 0 0 1px var(--aa-line);
}

.aa-pill-tab > button:focus-visible,
.aa-pill-tab > a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--aa-focus-ring);
}

.aa-side-nav .nav-link {
    padding: .5rem .75rem;
    border-radius: var(--aa-radius-sm);
    color: var(--aa-muted);
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
}

.aa-side-nav .nav-link:hover {
    color: var(--aa-ink);
    background: var(--aa-hover-tint);
}

.aa-side-nav .nav-link.active {
    color: var(--aa-accent-text);
    background: var(--aa-accent-soft);
}

@media (min-width: 992px) {
    .aa-side-sticky {
        position: sticky;
        top: 5rem;
    }

    /* The teacher and admin menus (col-lg-auto) are as wide as their longest label, so none
       wraps under its icon in any language; short menus keep this width. */
    .aa-side-col {
        min-width: 13rem;
    }

    /* Without this the page beside the menu can't be narrower than a wide table in it,
       and the row wraps it under the menu. */
    .aa-side-main {
        min-width: 0;
    }
}

/* ---------- Home ---------- */
.aa-hero {
    padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}

.aa-hero-title {
    margin: 1rem 0 1.1rem;
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.03em;
}

.aa-hero .lead {
    max-width: 44ch;
    color: var(--aa-muted);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
}

.aa-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

/* The home page art (docs/landing-art.md) sits on a soft ellipse, inset like the export's preview. */
.aa-art {
    position: relative;
    isolation: isolate;
}

.aa-art::before {
    content: "";
    position: absolute;
    inset: 4%;
    z-index: -1;
    border-radius: 50%;
    background: var(--aa-accent-soft);
}

.aa-art > img {
    display: block;
    width: 100%;
    height: auto;
}

.aa-hero-art {
    max-width: 34rem;
    margin-inline: auto;
}

.aa-section {
    padding-block: clamp(3rem, 7vw, 5rem);
    scroll-margin-top: 3.5rem;
}

.aa-section + .aa-section {
    border-top: 1px solid var(--aa-line);
}

.aa-section-head {
    max-width: 46rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.aa-section-title {
    margin: .6rem 0 .75rem;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.aa-section-head p {
    margin: 0;
    color: var(--aa-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.aa-feature {
    height: 100%;
    padding: 1.25rem 1.25rem 1.3rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
}

.aa-feature-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .35rem;
    font-family: var(--aa-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.aa-feature p {
    margin: 0;
    color: var(--aa-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.aa-step {
    display: flex;
    gap: 1rem;
    height: 100%;
}

.aa-step-title {
    margin: .3rem 0 .35rem;
    font-size: 1.2rem;
    letter-spacing: -.01em;
}

.aa-step p {
    margin: 0;
    color: var(--aa-muted);
    line-height: 1.55;
}

.aa-step-art {
    width: 10rem;
    margin-bottom: 1rem;
}

@media (min-width: 992px) {
    .aa-step-art {
        width: 11rem;
    }
}

.aa-ex-group + .aa-ex-group {
    margin-top: 2rem;
}

.aa-ex-group-title {
    margin: 0 0 .85rem;
    font-size: 1.2rem;
    letter-spacing: -.01em;
}

.aa-ex-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-ex-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-bg);
    color: var(--aa-ink);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.aa-ex-item:hover {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line));
    background: var(--aa-surface);
    color: var(--aa-ink);
}

.aa-ex-item .aa-notehead {
    margin-top: .3rem;
}

.aa-ex-item-title {
    display: block;
    font-family: var(--aa-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.aa-ex-item-sub {
    display: block;
    margin-top: .15rem;
    color: var(--aa-muted);
    font-size: .9rem;
    line-height: 1.45;
}

/* A few medals (BadgeCatalog.Showcase): three per row on phones, six on wider screens. */
.aa-medal-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-medal-strip > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    font-family: var(--aa-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-align: center;
}

.aa-medal-strip .aa-medal-disc {
    width: 5.5rem;
    height: 5.5rem;
}

@media (min-width: 768px) {
    .aa-medal-strip {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.aa-roles-panel {
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
}

.aa-roles-panel .aa-note-list > li {
    font-size: 1.02rem;
    line-height: 1.55;
}

.aa-roles-art {
    max-width: 30rem;
    margin-inline: auto;
}

.aa-faq-art {
    max-width: 15rem;
    margin-top: 2rem;
}

.aa-faq {
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
}

.aa-faq .accordion-button {
    font-size: 1.02rem;
    font-weight: 600;
}

.aa-faq .accordion-body {
    padding-top: 0;
    color: var(--aa-muted);
    line-height: 1.6;
}

.aa-final {
    --aa-final-pad: clamp(2.5rem, 6vw, 4rem);
    --aa-final-art: 10rem;
    position: relative;
    overflow: hidden;
    padding: var(--aa-final-pad) 1.5rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-xl);
    background: var(--aa-surface);
    text-align: center;
}

/* Five staff lines through the middle of the illustration, faded out before it. */
.aa-final::before {
    content: "";
    position: absolute;
    top: calc(var(--aa-final-pad) + var(--aa-final-art) / 2);
    left: 0;
    right: 0;
    height: 73px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(to bottom, var(--aa-staff) 0 1px, transparent 1px 18px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 16%, transparent 36%, transparent 64%, #000 84%, #000 100%);
    pointer-events: none;
}

.aa-final > * {
    position: relative;
}

.aa-final-title {
    margin: .5rem 0 .75rem;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    letter-spacing: -.025em;
}

.aa-final-art {
    width: var(--aa-final-art);
    margin: 0 auto .75rem;
}

.aa-final p {
    max-width: 40rem;
    margin-inline: auto;
    color: var(--aa-muted);
}

/* ---------- Legal pages ---------- */
.aa-legal {
    max-width: 46rem;
    line-height: 1.7;
}

.aa-legal-head {
    margin-bottom: 2.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--aa-line);
}

.aa-legal-head .lead {
    color: var(--aa-muted);
    line-height: 1.6;
}

.aa-legal-meta {
    color: var(--aa-muted);
    font-size: .9rem;
}

.aa-legal section + section {
    margin-top: 2.5rem;
}

.aa-legal h2 {
    margin-bottom: .85rem;
    font-size: clamp(1.35rem, 2.6vw, 1.65rem);
    line-height: 1.2;
}

.aa-legal h3 {
    margin: 1.5rem 0 .5rem;
    font-family: var(--aa-font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.005em;
}

.aa-legal ul {
    padding-left: 1.25rem;
}

.aa-legal li + li {
    margin-top: .4rem;
}

.aa-legal .table {
    margin-bottom: .75rem;
    font-size: .92rem;
    line-height: 1.5;
}

.aa-legal .table code {
    word-break: break-word;
}

.aa-legal-contact {
    padding: 1.25rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-accent-soft);
}

.aa-legal-contact a {
    font-weight: 600;
    color: var(--aa-accent-text);
}

/* ---------- Exercise UI ---------- */
.aa-exercise-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--aa-line);
}

.aa-exercise-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.aa-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.aa-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 32px;
    padding: .3rem .8rem;
    border: 1px solid var(--aa-line);
    border-radius: 999px;
    background: var(--aa-bg);
    color: var(--aa-muted);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.aa-chip strong {
    color: var(--aa-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.aa-chip-ok {
    color: var(--aa-ok);
}

.aa-chip-err {
    color: var(--aa-err);
}

.aa-chip-btn {
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.aa-chip-btn:hover {
    color: var(--aa-ink);
    background: var(--aa-surface);
    border-color: var(--aa-line-strong);
}

.aa-chip-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

/* Routine preset banner shown above an exercise opened from "My training". */
.aa-preset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding: .75rem 1rem;
    margin: -.5rem 0 1.5rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
    font-size: .9rem;
}

.aa-preset > .bi {
    color: var(--aa-accent-text);
    font-size: 1.1rem;
}

.aa-preset-body {
    display: flex;
    flex: 1 1 16rem;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
}

.aa-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-preset-change {
    padding: 0;
    font-weight: 600;
}

/* Routine question banner (Views/Exercise/_RoutineBanner); practice.js keeps it in step. */
.aa-routine {
    border-color: var(--aa-accent);
}

.aa-routine-text {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.aa-routine-verdict {
    color: var(--aa-ok);
    font-weight: 600;
}

.aa-routine-verdict.is-below {
    color: var(--aa-err);
}

.aa-routine-meta {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: .4rem;
}

.aa-routine-meta:not(:has(> :not([hidden]))) {
    display: none;
}

.aa-routine-late {
    background: var(--aa-warn-bg);
    color: var(--aa-warn);
}

/* Routine state badges in My Training (Views/MyTraining/Index). */
.aa-routine-finished {
    background: var(--aa-ok-bg);
    color: var(--aa-ok);
}

.aa-routine-closed {
    background: rgba(var(--aa-muted-rgb), .14);
    color: var(--aa-muted);
}

.aa-routine-bar {
    flex: 1 0 100%;
    height: 6px;
}

.aa-routine[data-state="done"] .aa-routine-bar .progress-bar {
    background-color: var(--aa-ok);
}

/* Free practice switch: a chip holding a Bootstrap switch (Views/Exercise/_ExerciseHeader). */
.aa-chip.aa-chip-switch {
    gap: .5rem;
    margin: 0;
    padding: .3rem .8rem;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.aa-chip-switch:hover {
    color: var(--aa-ink);
    border-color: var(--aa-line-strong);
}

.aa-chip-switch.form-switch .form-check-input {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* practice.js holds the switch while a round loads; a quick round shouldn't make it flicker. */
.aa-chip-switch.form-switch .form-check-input:disabled {
    opacity: 1;
}

.aa-chip-switch:has(.form-check-input:disabled) {
    cursor: progress;
}

.aa-chip-switch:has(.form-check-input:checked) {
    border-color: var(--aa-accent);
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
}

/* The saved score doesn't move during free practice: its chips go dashed, the numbers stay readable. */
.aa-exercise-head.is-free .aa-chip-ok,
.aa-exercise-head.is-free .aa-chip-err {
    border-style: dashed;
    border-color: var(--aa-line-strong);
}

.aa-free {
    border-color: var(--aa-accent);
    background: var(--aa-accent-soft);
}

.aa-panel {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
}

.aa-question {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: -.01em;
}

.aa-audio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.aa-audio-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.aa-wave {
    --aa-wave-line: var(--aa-accent);
    --aa-wave-staff: var(--aa-staff);
    flex: 1 1 200px;
    min-width: 160px;
    height: 56px;
}

.aa-wave canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.aa-play,
.aa-audio-btn,
.aa-audio-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.aa-play {
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: var(--aa-accent);
    color: var(--aa-on-accent);
    box-shadow: 0 8px 20px -10px var(--aa-accent);
}

.aa-play:hover {
    background: var(--aa-accent-hover);
}

.aa-play:active {
    transform: scale(.96);
}

.aa-play svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

.aa-audio-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--aa-line-strong);
    background: var(--aa-bg);
    color: var(--aa-muted);
}

.aa-audio-btn:hover {
    color: var(--aa-ink);
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line-strong));
}

.aa-audio-btn svg {
    width: 16px;
    height: 16px;
}

.aa-audio-pill {
    gap: .45rem;
    height: 40px;
    padding: 0 1rem;
    border: 1px solid var(--aa-line-strong);
    background: var(--aa-bg);
    color: var(--aa-ink);
    font-size: .875rem;
    font-weight: 600;
}

.aa-audio-pill:hover {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line-strong));
    background: var(--aa-surface);
}

.aa-audio-pill svg {
    width: 16px;
    height: 16px;
}

.aa-audio-pill-primary {
    border-color: var(--aa-accent);
    background: var(--aa-accent);
    color: var(--aa-on-accent);
}

.aa-audio-pill-primary:hover {
    border-color: var(--aa-accent-hover);
    background: var(--aa-accent-hover);
    color: var(--aa-on-accent);
}

.aa-ab-playback {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: .65rem;
}

.aa-ab-controls {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.aa-ab-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 92px;
    height: 52px;
    padding: 0 1.25rem;
    border: 1px solid var(--aa-line-strong);
    border-radius: 999px;
    background: var(--aa-bg);
    color: var(--aa-ink);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.aa-ab-clip:hover,
.aa-ab-clip[aria-pressed="true"] {
    border-color: var(--aa-accent);
    background: color-mix(in srgb, var(--aa-accent) 12%, var(--aa-bg));
    color: var(--aa-accent);
}

.aa-ab-clip:active {
    transform: scale(.97);
}

.aa-ab-clip svg {
    width: 18px;
    height: 18px;
}

.aa-ab-clip:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-ab-clip:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.aa-ab-status {
    min-height: 1.5em;
    text-align: center;
}

.aa-ab-playback[data-state="error"] .aa-ab-status {
    color: var(--aa-err-hover) !important;
}

/* Microphone button while recording (the singing exercises). */
.aa-audio-pill.is-recording,
.aa-audio-pill.is-recording:hover {
    border-color: var(--aa-err);
    background: var(--aa-err-bg);
    color: var(--aa-err-hover);
}

/* How loudly the microphone hears the student, on a line of its own while recording (singing.js). */
.aa-mic-meter {
    display: block;
    flex-basis: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--aa-line);
    overflow: hidden;
}

.aa-mic-meter[hidden] {
    display: none;
}

.aa-mic-meter-level {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--aa-ok);
    transform: scaleX(0);
    transform-origin: left center;
}

/* The interval SingInterval asks for, under its question; empty until the first round. */
.aa-sing-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.25rem;
    margin: -.5rem 0 1.25rem;
    font-size: 1.25rem;
}

.aa-sing-prompt .bi {
    color: var(--aa-accent);
}

.aa-sing-prompt span {
    color: var(--aa-muted);
}

.aa-play:focus-visible,
.aa-audio-btn:focus-visible,
.aa-audio-pill:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-play:disabled,
.aa-audio-btn:disabled,
.aa-audio-pill:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.aa-validate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

.aa-answer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

/* Scripts hide answers with inline display:none (GuessChords starts with every quality hidden); drop the emptied group. */
.aa-answer-grid:not(:has(> .aa-answer:not([style*="none"]))) {
    display: none;
}

/* Answer labels are read by the exercise scripts (innerText), so no text-transform and no child elements. */
.aa-answer {
    min-width: 56px;
    padding: .55rem .9rem;
    border: 1px solid var(--aa-line-strong);
    border-radius: var(--aa-radius);
    background: var(--aa-bg);
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.aa-answer:hover {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line-strong));
}

.aa-answer.selected {
    border-color: var(--aa-accent);
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    box-shadow: inset 0 0 0 1px var(--aa-accent);
}

.aa-answer:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-answer.selected:focus-visible {
    box-shadow: inset 0 0 0 1px var(--aa-accent), 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-answer-toolbar {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.aa-answer-toggle > button {
    padding: .3rem .8rem;
    font-size: .8rem;
}

/* Piano layout: 7 white keys over a 14-column grid, black keys straddle two columns. */
.aa-answers-chromatic[data-layout="piano"] {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: 3fr 2fr;
    height: 150px;
    max-width: 560px;
    margin: 1.25rem auto 0;
    -webkit-user-select: none;
    user-select: none;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key {
    grid-column: var(--c) / span 2;
    min-width: 0;
    padding: 0;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white {
    grid-row: 1 / 3;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: .6rem;
    border: 1px solid var(--aa-key-edge);
    border-right-width: 0;
    border-radius: 0 0 8px 8px;
    background: var(--aa-key-white);
    color: #0B1A33;
    font-size: .95rem;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white:last-child {
    border-right-width: 1px;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-black {
    grid-row: 1 / 2;
    justify-self: center;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 62%;
    padding-bottom: .4rem;
    border: 1px solid var(--aa-key-black);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: var(--aa-key-black);
    color: var(--aa-key-black-label);
    font-family: var(--aa-font-ui);
    font-size: .68rem;
    font-weight: 600;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white:hover {
    border-color: var(--aa-key-edge);
    background: color-mix(in srgb, var(--aa-key-accent) 6%, var(--aa-key-white));
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-black:hover {
    border-color: var(--aa-key-black);
    background: color-mix(in srgb, var(--aa-accent) 25%, var(--aa-key-black));
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white.selected {
    border-color: var(--aa-key-edge);
    background: var(--aa-key-selected-bg);
    color: var(--aa-key-selected-label);
    box-shadow: inset 0 0 0 1px var(--aa-key-accent), inset 0 -4px 0 var(--aa-key-accent);
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-black.selected {
    border-color: var(--aa-accent);
    background: var(--aa-accent);
    color: var(--aa-on-accent);
    box-shadow: none;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key:focus-visible {
    outline: 2px solid var(--aa-key-accent);
    box-shadow: none;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white:focus-visible {
    outline-offset: -3px;
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-white.selected:focus-visible {
    box-shadow: inset 0 0 0 1px var(--aa-key-accent), inset 0 -4px 0 var(--aa-key-accent);
}

.aa-answers-chromatic[data-layout="piano"] .aa-key-black:focus-visible {
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .aa-answers-chromatic[data-layout="piano"] {
        height: 128px;
    }
}

/* Button layout: the same 12 notes as a compact grid. */
.aa-answers-chromatic[data-layout="buttons"] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 72px));
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.aa-answers-chromatic[data-layout="buttons"] .aa-key {
    grid-column: auto;
    min-width: 0;
    padding: .6rem .25rem;
}

/* Rendered sheet music (VexFlow draws black glyphs) keeps a light page in both themes. */
.aa-sheet {
    min-height: 140px;
    margin-top: 1rem;
    padding: .75rem;
    overflow-x: auto;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius);
    background: #FFFFFF;
    color: #0B1A33;
}

/* VexFlow sizes its SVG inline (500×150); let it shrink with the container and keep the viewBox ratio. */
.aa-sheet svg {
    max-width: 100%;
    height: auto !important;
}

/* Note value buttons of the staff editor show the value itself (StaffRenderer.figure). */
.aa-figure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .25rem .5rem;
}

.aa-sheet .aa-figure svg {
    width: auto;
    max-width: none;
    height: 2.25rem !important;
}

/* Whole and half rests differ only by where they sit on the line, so their buttons show it. */
.aa-figure-line {
    opacity: .55;
}

/* The answer drawn in a dialog: free practice reveal or a wrong answer (practice.js). */
.aa-reveal-staff {
    margin-top: 0;
}

/* Caption over the right answer drawn in the result dialog (i18n.js). */
.aa-answer-caption {
    margin-bottom: .75rem;
}

/* GuessRhythmPattern: the rhythms offered, each a numbered button around its staff. */
.aa-rhythm-options {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
}

.aa-rhythm-options:empty {
    display: none;
}

.aa-rhythm-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--aa-line-strong);
    border-radius: var(--aa-radius);
    background: var(--aa-bg);
    color: var(--aa-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.aa-rhythm-option:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, var(--aa-line-strong));
}

.aa-rhythm-option.selected {
    border-color: var(--aa-accent);
    background: var(--aa-accent-soft);
    box-shadow: inset 0 0 0 1px var(--aa-accent);
}

.aa-rhythm-option:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-rhythm-option.selected:focus-visible {
    box-shadow: inset 0 0 0 1px var(--aa-accent), 0 0 0 .25rem var(--aa-focus-ring);
}

/* Once answered, the rhythm played is marked, and a wrong pick too, until the next round. */
.aa-rhythm-option:disabled {
    cursor: default;
}

.aa-rhythm-option.is-answer {
    border-color: var(--aa-ok);
    background: var(--aa-ok-bg);
    box-shadow: inset 0 0 0 1px var(--aa-ok);
}

.aa-rhythm-option.is-wrong {
    border-color: var(--aa-err);
    background: var(--aa-err-bg);
    box-shadow: inset 0 0 0 1px var(--aa-err);
}

.aa-rhythm-number {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--aa-surface);
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-weight: 700;
}

.aa-rhythm-option.selected .aa-rhythm-number {
    background: var(--aa-accent);
    color: var(--aa-on-accent);
}

.aa-rhythm-option.is-answer .aa-rhythm-number {
    background: var(--aa-ok);
    color: var(--aa-bg);
}

.aa-rhythm-option.is-wrong .aa-rhythm-number {
    background: var(--aa-err);
    color: var(--aa-bg);
}

/* VexFlow draws black glyphs, so each staff keeps a light page, as .aa-sheet does. */
.aa-rhythm-staff {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .5rem;
    border-radius: calc(var(--aa-radius) - 2px);
    background: #FFFFFF;
    color: #0B1A33;
}

.aa-rhythm-staff svg {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/* Where a whole rhythm would not fit on a line, each bar takes its own. */
.aa-rhythm-bar {
    display: block;
}

/* RhythmTap: the pad the rhythm is tapped on, the taps counted under it. A tap must not
   select text, zoom the page or open the touch menu, whatever its speed. */
.aa-tap {
    display: grid;
    justify-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}

.aa-tap-pad {
    display: grid;
    place-items: center;
    width: min(100%, 24rem);
    min-height: 10rem;
    padding: 1rem;
    border: 2px dashed var(--aa-line-strong);
    border-radius: calc(var(--aa-radius) * 2);
    background: var(--aa-surface);
    color: var(--aa-muted);
    font-family: var(--aa-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .08s ease, border-color .12s ease, transform .06s ease;
}

.aa-tap-pad:disabled {
    cursor: default;
}

.aa-tap-pad.is-armed {
    border-style: solid;
    border-color: var(--aa-accent);
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
}

.aa-tap-pad.is-hit {
    background: color-mix(in srgb, var(--aa-accent) 28%, var(--aa-accent-soft));
    transform: scale(.98);
}

.aa-tap-pad:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

.aa-tap-status {
    margin: 0;
    color: var(--aa-muted);
    text-align: center;
}

.aa-tap-tally {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aa-tap-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- Gamification: level, streak, badges ---------- */
/* The rank is a dynamics marking (pp … fff), set like one in the display face. */
.aa-rank {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    min-width: 3.5rem;
    height: 3.5rem;
    padding-inline: .6rem;
    border-radius: 999px;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    font-family: var(--aa-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.aa-rank-sm {
    min-width: 1.9rem;
    height: 1.9rem;
    padding-inline: .4rem;
    font-size: .95rem;
}

.aa-rank-lg {
    min-width: 5.5rem;
    height: 5.5rem;
    margin: .25rem auto 1rem;
    font-size: 2.4rem;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--aa-accent) 12%, transparent);
}

.aa-xp-bar {
    --bs-progress-height: .5rem;
}

.aa-xp-bar .progress-bar {
    background-image: var(--aa-gradient-brand);
}

.aa-icon-pill-warm {
    background: var(--aa-warn-bg);
    color: var(--aa-warn);
}

/* One hue per badge group: the border of a new badge's card. */
.aa-medal-dedication { --aa-medal: var(--aa-warn); }
.aa-medal-mastery { --aa-medal: var(--aa-accent); }
.aa-medal-progress { --aa-medal: var(--aa-ok); }
.aa-medal-fun { --aa-medal: color-mix(in srgb, var(--aa-accent) 55%, var(--aa-err)); }

/* The medal art, wwwroot/img/badges/{key}.webp (scripts/export-badge-art.py). */
.aa-medal-disc {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
}

.aa-medal-disc > img {
    display: block;
    width: 100%;
    height: 100%;
}

.aa-medal-disc.is-new::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--aa-accent);
    box-shadow: 0 0 0 2px var(--aa-surface);
}

.aa-medal-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-medal-row .aa-medal-disc {
    width: 2.5rem;
    height: 2.5rem;
}

.aa-medal {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
}

.aa-medal.is-new {
    border-color: color-mix(in srgb, var(--aa-medal, var(--aa-accent)) 50%, var(--aa-line));
}

.aa-medal-title {
    margin: 0 0 .2rem;
    font-family: var(--aa-font-ui);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aa-ink);
}

.aa-medal-desc {
    margin: 0;
    font-size: .875rem;
    color: var(--aa-muted);
}

.aa-medal-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .5rem 0 0;
    font-size: .78rem;
    color: var(--aa-muted);
}

.aa-medal.is-locked .aa-medal-disc > img {
    filter: grayscale(1);
    opacity: .45;
}

[data-bs-theme="dark"] .aa-medal.is-locked .aa-medal-disc > img {
    opacity: .55;
}

.aa-medal.is-locked .aa-medal-title {
    color: var(--aa-muted);
}

/* Answer dialog footer: XP gained, level, progress to the next level. */
.aa-reward-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    width: 100%;
    font-size: .9rem;
}

/* Answer dialog footer of a free practice round, which earns nothing. */
.aa-free-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    color: var(--aa-muted);
    font-size: .9rem;
}

.aa-xp-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.aa-reward-level {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--aa-ink);
    font-weight: 600;
}

.aa-reward-footer .aa-xp-bar {
    --bs-progress-height: .4rem;
    flex: 1 1 6rem;
    max-width: 9rem;
}

/* Level-up / new badge dialog. */
.aa-celebration-text {
    margin: 0;
    color: var(--aa-ink);
    font-weight: 500;
}

.aa-celebration-heading {
    margin: 1.25rem 0 0;
    color: var(--aa-ink);
    font-weight: 600;
}

.aa-reward-medals {
    display: grid;
    gap: .6rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

.aa-reward-medal {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .9rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius);
    background: var(--aa-surface);
}

.aa-reward-medal-body {
    display: grid;
    gap: .1rem;
}

.aa-reward-medal-body > strong {
    color: var(--aa-ink);
}

.aa-reward-medal-body > span {
    font-size: .875rem;
    color: var(--aa-muted);
}

@keyframes aa-pop-in {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}

.aa-celebration-popup .aa-rank-lg,
.aa-celebration-popup .aa-medal-disc,
.aa-celebration-popup .aa-path-disc {
    animation: aa-pop-in .45s cubic-bezier(.2, .9, .3, 1.3) both;
}

/* ---------- Learning path ---------- */
/* Overall progress: one segment per step, a wider gap where a unit starts. */
.aa-path-track {
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-path-track > li {
    flex: 1 1 0;
    height: .5rem;
    border-radius: 999px;
    background: var(--aa-line);
}

.aa-path-track > li.is-completed {
    background: var(--aa-accent);
}

.aa-path-track > li.is-current {
    background: color-mix(in srgb, var(--aa-accent) 35%, var(--aa-line));
}

.aa-path-track > li.aa-path-track-unit {
    margin-inline-start: .45rem;
}

.aa-path-summary {
    width: min(100%, 22rem);
}

/* Steps: a marker on a vertical line, then the step card. */
.aa-path-steps {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-path-step {
    position: relative;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Connector from this marker down to the next one. */
.aa-path-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    bottom: -.75rem;
    left: calc(1.25rem - 1px);
    width: 2px;
    background: var(--aa-line);
}

.aa-path-step.is-completed:not(:last-child)::before {
    background: var(--aa-accent);
}

.aa-path-marker {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--aa-bg);
    color: var(--aa-muted);
    box-shadow: inset 0 0 0 2px var(--aa-line-strong);
    font-family: var(--aa-font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.aa-path-step.is-completed .aa-path-marker {
    background: var(--aa-accent);
    color: var(--aa-on-accent);
    box-shadow: none;
}

.aa-path-step.is-current .aa-path-marker {
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    box-shadow: inset 0 0 0 2px var(--aa-accent), 0 0 0 4px color-mix(in srgb, var(--aa-accent) 15%, transparent);
}

.aa-path-step-body {
    padding: 1rem 1.15rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
}

.aa-path-step.is-current .aa-path-step-body {
    border-color: color-mix(in srgb, var(--aa-accent) 55%, var(--aa-line));
    box-shadow: var(--aa-shadow-sm);
}

.aa-path-step.is-locked .aa-path-step-body {
    border-style: dashed;
    background: transparent;
}

.aa-path-step-number {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aa-muted);
}

.aa-path-step-title {
    margin: .15rem 0 .25rem;
    font-family: var(--aa-font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aa-ink);
}

.aa-path-step-title a {
    color: inherit;
    text-decoration: none;
}

.aa-path-step-title a:hover,
.aa-path-step-title a:focus-visible {
    color: var(--aa-accent-text);
    text-decoration: underline;
}

.aa-path-step.is-locked .aa-path-step-title {
    color: var(--aa-muted);
}

.aa-path-state {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.aa-path-state.is-completed {
    background: var(--aa-ok-bg);
    color: var(--aa-ok);
}

.aa-path-state.is-current {
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
}

.aa-path-state.is-locked {
    background: var(--aa-hover-tint);
    color: var(--aa-muted);
}

.aa-path-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
}

.aa-path-step.is-locked .aa-path-presets .aa-badge-soft {
    background: var(--aa-hover-tint);
    color: var(--aa-muted);
}

/* Answer dialog footer with both rows: XP and learning path. */
.aa-answer-footer {
    display: grid;
    gap: .6rem;
    width: 100%;
}

.aa-path-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .6rem;
    width: 100%;
    font-size: .875rem;
    color: var(--aa-ink);
}

.aa-path-footer > .bi {
    color: var(--aa-accent-text);
}

.aa-path-footer.is-complete > .bi {
    color: var(--aa-ok);
}

.aa-path-footer .aa-xp-bar {
    --bs-progress-height: .4rem;
    flex: 1 1 5rem;
    max-width: 7rem;
}

.aa-path-footer.is-complete .progress-bar {
    background-color: var(--aa-ok);
    background-image: none;
}

/* Step complete dialog. */
.aa-path-disc {
    display: inline-grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: .25rem auto 1rem;
    border-radius: 50%;
    background: var(--aa-accent-soft);
    color: var(--aa-accent-text);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--aa-accent) 12%, transparent);
    font-size: 2rem;
}

.aa-celebration-next {
    margin: .4rem 0 0;
    color: var(--aa-muted);
}

.aa-celebration > .aa-rank:not(.aa-rank-lg) {
    margin: .6rem 0;
}

/* ---------- Daily challenge ---------- */
.aa-challenge-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole item links to its exercise (stretched-link). */
.aa-challenge-item {
    position: relative;
    padding: 1rem 1.15rem;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-surface);
    transition: border-color .15s ease;
}

.aa-challenge-item:hover,
.aa-challenge-item:focus-within {
    border-color: color-mix(in srgb, var(--aa-accent) 55%, var(--aa-line));
}

.aa-challenge-item.is-done {
    border-color: color-mix(in srgb, var(--aa-ok) 45%, var(--aa-line));
    background: var(--aa-ok-bg);
}

.aa-challenge-category {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aa-muted);
}

.aa-challenge-title {
    display: block;
    margin-top: .15rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aa-ink);
    text-decoration: none;
}

.aa-challenge-title:hover,
.aa-challenge-title:focus-visible {
    color: var(--aa-accent-text);
    text-decoration: underline;
}

/* The check overflows a zero-height box, so done items keep the bar's row height. */
.aa-challenge-check {
    display: flex;
    align-items: center;
    height: 0;
    color: var(--aa-ok);
}

.aa-challenge-item.is-done .progress-bar {
    background-color: var(--aa-ok);
    background-image: none;
}

.aa-challenge-card.is-complete .aa-icon-pill {
    background: var(--aa-ok-bg);
    color: var(--aa-ok);
}

/* ---------- Games (Views/Games, Views/Exercise/_GameBar, js/core/game.js) ---------- */
.aa-game {
    border-color: var(--aa-accent);
}

.aa-game-text {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.aa-game-timer {
    min-width: 3.5ch;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--aa-ink);
}

.aa-game-timer.is-low {
    color: var(--aa-err);
}

.aa-game-card {
    padding: 1.25rem;
}

.aa-game-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.aa-game-form .flex-grow-1 {
    min-width: min(100%, 14rem);
}

.aa-weak-spots,
.aa-placement-units {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-weak-spot,
.aa-placement-unit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .9rem 1rem;
}

.aa-weak-spot-body {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: .3rem;
}

.aa-placement-unit > .bi {
    font-size: 1.4rem;
    color: var(--aa-muted);
}

.aa-placement-unit.is-passed > .bi {
    color: var(--aa-ok);
}

.aa-placement-unit.is-failed > .bi {
    color: var(--aa-err);
}

.aa-game-end-score {
    margin-bottom: .25rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--aa-accent-text);
}

.aa-game-end-text {
    margin-bottom: .5rem;
}

.aa-game-end-record {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--aa-muted);
}

.aa-game-end-record.is-new {
    color: var(--aa-ok);
}

/* ---------- Guided tour (js/core/tutorial.js) ----------
   Above Bootstrap modals, SweetAlert and tooltips; below the skip link. The
   highlight's wide shadow dims the rest of the page. */
.aa-tour {
    position: fixed;
    inset: 0;
    z-index: 1090;
    animation: aa-tour-in .2s ease-out;
}

.aa-tour.is-centered {
    background: rgba(5, 10, 20, .55);
}

.aa-tour-spot {
    position: absolute;
    border-radius: var(--aa-radius-lg);
    box-shadow: 0 0 0 2px var(--aa-accent), 0 0 0 200vmax rgba(5, 10, 20, .55);
    pointer-events: none;
}

.aa-tour.is-centered .aa-tour-spot {
    display: none;
}

.aa-tour-pop {
    position: absolute;
    top: 0;
    left: 0;
    width: min(360px, calc(100vw - 24px));
    padding: 1.1rem 1.15rem .9rem;
    border: 1px solid var(--aa-line-strong);
    border-radius: var(--aa-radius-lg);
    background: var(--aa-raised);
    color: var(--aa-ink);
    box-shadow: var(--aa-shadow-md);
}

/* Only a click on its text focuses the popover itself (tabindex -1). */
.aa-tour-pop:focus {
    outline: 0;
}

.aa-tour-count {
    margin: 0 0 .4rem;
    color: var(--aa-accent-text);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aa-tour-title {
    margin: 0 0 .35rem;
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}

.aa-tour-text {
    margin: 0;
    color: var(--aa-muted);
    font-size: .925rem;
    line-height: 1.5;
}

.aa-tour-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

.aa-tour .aa-tour-skip {
    --bs-btn-color: var(--aa-muted);
    --bs-btn-hover-color: var(--aa-ink);
    --bs-btn-active-color: var(--aa-ink);
    margin-left: -.75rem;
    text-decoration: none;
}

.aa-tour .aa-tour-skip:hover {
    text-decoration: underline;
}

.aa-tour-nav {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

@keyframes aa-tour-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------- Explore (Views/Explore, js/Explore/explore.js) ---------- */
.aa-explore-tabs {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.5rem;
}

.aa-explore-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
}

.aa-explore-field {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
    max-width: 18rem;
}

.aa-explore-field-auto {
    flex: 0 1 auto;
    max-width: none;
}

.aa-explore-label {
    color: var(--aa-muted);
    font-size: .8rem;
    font-weight: 600;
}

/* As tall as the selects and the stepper beside it, so the labels line up. */
.aa-explore-toggle {
    align-self: flex-start;
    height: 38px;
}

.aa-explore-toggle > button {
    padding: 0 .85rem;
}

.aa-stepper {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--aa-line-strong);
    border-radius: var(--aa-radius);
    background: var(--aa-bg);
}

.aa-stepper-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--aa-muted);
    transition: color .15s ease, background-color .15s ease;
}

.aa-stepper-btn:hover {
    background: var(--aa-hover-tint);
    color: var(--aa-ink);
}

.aa-stepper-btn:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 .2rem var(--aa-focus-ring);
}

.aa-stepper-btn[aria-disabled="true"] {
    background: transparent;
    color: var(--aa-line-strong);
    cursor: not-allowed;
}

.aa-stepper-value {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    border-inline: 1px solid var(--aa-line);
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.aa-explore-stage {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--aa-line);
}

.aa-explore-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    min-height: 2.5rem;
    margin-top: 1.25rem;
    transition: opacity .15s ease;
}

.aa-explore-result[aria-busy="true"] {
    opacity: .55;
}

.aa-explore-name {
    margin: 0;
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.aa-explore-notes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-explore-notes > .aa-chip {
    color: var(--aa-ink);
    font-size: .85rem;
}

/* Stays in the accessibility tree while empty, so the alert is announced when filled. */
.aa-explore-error {
    margin: 0;
    color: var(--aa-err);
    font-weight: 600;
}

.aa-explore-error:not(:empty) {
    margin-top: .75rem;
}

/* Seven octaves (C1-B7) scroll sideways; offsetLeft of the keys is measured from here. */
.aa-explore-keyboard {
    position: relative;
    margin-top: 1.5rem;
    padding: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius);
    background: var(--aa-bg);
    scrollbar-width: thin;
}

.aa-explore-keys {
    --aa-explore-col: 17px;
    display: grid;
    grid-template-columns: repeat(98, var(--aa-explore-col));
    grid-template-rows: 3fr 2fr;
    width: max-content;
    height: 150px;
    -webkit-user-select: none;
    user-select: none;
}

.aa-explore-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    min-width: 0;
    padding: 0 0 .5rem;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.aa-explore-key-white {
    grid-row: 1 / 3;
    z-index: 1;
    border: 1px solid var(--aa-key-edge);
    border-right-width: 0;
    border-radius: 0 0 7px 7px;
    background: var(--aa-key-white);
    color: #53607A;
}

.aa-explore-key-white:last-child {
    border-right-width: 1px;
}

.aa-explore-key-black {
    grid-row: 1 / 2;
    justify-self: center;
    z-index: 2;
    width: 62%;
    padding-bottom: .35rem;
    border: 1px solid var(--aa-key-black);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: var(--aa-key-black);
}

.aa-explore-key-label {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.aa-explore-key-white:hover {
    background: color-mix(in srgb, var(--aa-key-accent) 6%, var(--aa-key-white));
}

.aa-explore-key-black:hover {
    background: color-mix(in srgb, var(--aa-accent) 25%, var(--aa-key-black));
}

.aa-explore-key-white.is-on {
    background: var(--aa-key-selected-bg);
    color: var(--aa-key-selected-label);
    box-shadow: inset 0 0 0 1px var(--aa-key-accent), inset 0 -4px 0 var(--aa-key-accent);
}

.aa-explore-key-black.is-on {
    border-color: var(--aa-accent);
    background: var(--aa-accent);
}

/* The root of an interval, chord or scale carries a dot. */
.aa-explore-key.is-root::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aa-key-accent);
}

.aa-explore-key-black.is-root::before {
    background: var(--aa-on-accent);
}

.aa-explore-key:focus-visible {
    outline: 2px solid var(--aa-key-accent);
    outline-offset: -4px;
}

.aa-explore-key-black:focus-visible {
    outline-offset: 2px;
}

.aa-explore-hint {
    margin: .5rem 0 0;
    color: var(--aa-muted);
    font-size: .85rem;
}

.aa-explore-staff {
    margin-top: 1.25rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .aa-explore-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        border-radius: var(--aa-radius-lg);
    }

    .aa-explore-tabs > button {
        border-radius: var(--aa-radius);
    }

    .aa-explore-field,
    .aa-explore-field-auto {
        flex-basis: 100%;
        max-width: none;
    }

    .aa-explore-toggle {
        align-self: stretch;
    }

    .aa-explore-toggle > button {
        flex: 1 1 0;
        padding: 0 .5rem;
        font-size: .82rem;
    }

    .aa-explore-keys {
        --aa-explore-col: 15px;
        height: 132px;
    }
}

@media (max-width: 399.98px) {
    .aa-explore-toggle > button {
        padding: 0 .45rem;
        font-size: .78rem;
    }
}

/* ---------- SweetAlert2 (v10) ----------
   The "all" build injects its stylesheet at runtime, after this file, so every
   override is prefixed with body to win on specificity. */
body .swal2-container.swal2-backdrop-show,
body .swal2-container.swal2-noanimation {
    background: rgba(5, 10, 20, .5);
}

body .swal2-popup {
    border: 1px solid var(--aa-line);
    border-radius: var(--aa-radius-xl);
    background: var(--aa-bg);
    color: var(--aa-ink);
    font-family: var(--aa-font-ui);
    box-shadow: var(--aa-shadow-md);
}

body .swal2-title {
    color: var(--aa-ink);
    font-family: var(--aa-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
}

body .swal2-html-container,
body .swal2-content {
    color: var(--aa-muted);
}

body .swal2-footer {
    border-top-color: var(--aa-line);
    color: var(--aa-muted);
}

body .swal2-close {
    color: var(--aa-muted);
}

body .swal2-close:hover {
    color: var(--aa-ink);
}

body .swal2-styled {
    border-radius: var(--aa-radius);
    font-weight: 600;
}

body .swal2-styled.swal2-confirm {
    border: 1px solid var(--aa-accent);
    background: var(--aa-accent);
    color: var(--aa-on-accent);
}

body .swal2-styled.swal2-confirm:hover {
    background: var(--aa-accent-hover);
    border-color: var(--aa-accent-hover);
}

body .swal2-styled.swal2-cancel,
body .swal2-styled.swal2-deny {
    border: 1px solid var(--aa-line-strong);
    background: transparent;
    color: var(--aa-ink);
}

body .swal2-styled.swal2-cancel:hover,
body .swal2-styled.swal2-deny:hover {
    background: var(--aa-hover-tint);
}

body .swal2-styled:focus,
body .swal2-close:focus {
    box-shadow: 0 0 0 .25rem var(--aa-focus-ring);
}

body .swal2-timer-progress-bar {
    background: color-mix(in srgb, var(--aa-accent) 45%, transparent);
}

body .swal2-icon.swal2-success {
    border-color: var(--aa-ok);
    color: var(--aa-ok);
}

body .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--aa-ok);
}

body .swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--aa-ok) 30%, transparent);
}

/* These pieces mask the ring animation and are hard-coded white upstream. */
body .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
body .swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--aa-bg);
}

body .swal2-icon.swal2-error {
    border-color: var(--aa-err);
    color: var(--aa-err);
}

body .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--aa-err);
}

body .swal2-icon.swal2-warning {
    border-color: color-mix(in srgb, var(--aa-warn) 55%, transparent);
    color: var(--aa-warn);
}

body .swal2-icon.swal2-info,
body .swal2-icon.swal2-question {
    border-color: color-mix(in srgb, var(--aa-accent) 45%, transparent);
    color: var(--aa-accent);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -------------------------------------------------------------------
   Exercise answer buttons in dark mode.
   Bootstrap's .btn-outline-dark is "dark text on light bg" — illegible
   on a dark theme background. Re-color it with the design-system's
   accent and make sure the .selected highlight is visible
   too (the legacy site.css rule used a translucent blue overlay that
   doesn't carry text contrast on its own).
   ------------------------------------------------------------------- */
[data-bs-theme="dark"] .btn-outline-dark {
    color: var(--bs-body-color, #e6e6e6);
    border-color: rgba(255, 255, 255, .35);
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus-visible {
    background-color: color-mix(in srgb, var(--aa-accent) 12%, transparent);
    border-color: var(--aa-accent-text);
    color: var(--aa-accent-text);
}
[data-bs-theme="dark"] .btn-outline-dark.selected,
[data-bs-theme="dark"] .btn.selected {
    color: var(--aa-accent-text) !important;
    border-color: var(--aa-accent-text) !important;
    background-color: color-mix(in srgb, var(--aa-accent) 18%, transparent) !important;
}