:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --ft-bg: #111827;
    --ft-surface: #192334;
    --ft-surface-raised: #202d40;
    --ft-border: #334155;
    --ft-border-strong: #46566b;
    --ft-text: #cbd5e1;
    --ft-text-strong: #f1f5f9;
    --ft-text-muted: #94a3b8;
    --ft-text-subtle: #64748b;
    --ft-accent: #d7a866;
    --ft-accent-strong: #e8bd7d;
    --ft-accent-ink: #21180d;
    --ft-danger: #d99a9a;
    --ft-particle: #22d3ee;
}

:root[data-theme="light"] {
    color-scheme: light;
    --ft-bg: #f4f7fb;
    --ft-surface: #ffffff;
    --ft-surface-raised: #edf2f7;
    --ft-border: #cbd5e1;
    --ft-border-strong: #94a3b8;
    --ft-text: #334155;
    --ft-text-strong: #0f172a;
    --ft-text-muted: #475569;
    --ft-text-subtle: #5f6f83;
    --ft-accent: #2563eb;
    --ft-accent-strong: #1d4ed8;
    --ft-accent-ink: #ffffff;
    --ft-success: #18794e;
    --ft-danger: #b42318;
    --ft-focus-ring: #2563eb;
    --ft-particle: #0891b2;
}

:root[data-theme="system"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        color-scheme: light;
        --ft-bg: #f4f7fb;
        --ft-surface: #ffffff;
        --ft-surface-raised: #edf2f7;
        --ft-border: #cbd5e1;
        --ft-border-strong: #94a3b8;
        --ft-text: #334155;
        --ft-text-strong: #0f172a;
        --ft-text-muted: #475569;
        --ft-text-subtle: #5f6f83;
        --ft-accent: #2563eb;
        --ft-accent-strong: #1d4ed8;
        --ft-accent-ink: #ffffff;
        --ft-success: #18794e;
        --ft-danger: #b42318;
        --ft-focus-ring: #2563eb;
        --ft-particle: #0891b2;
    }

}

body {
    background: var(--ft-bg) !important;
    color: var(--ft-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

#app-container,
#user-screen,
#pack-selection,
#package-manager,
#lesson-list,
#game-container,
#stats-modal {
    background: var(--ft-bg);
    color: var(--ft-text) !important;
}

#lesson-list {
    --lesson-bg: var(--ft-bg);
    --lesson-surface: var(--ft-surface);
    --lesson-surface-raised: var(--ft-surface-raised);
    --lesson-border: var(--ft-border);
    --lesson-text: var(--ft-text-strong);
    --lesson-muted: var(--ft-text-muted);
    --lesson-subtle: var(--ft-text-subtle);
    --lesson-accent: var(--ft-accent);
    --lesson-accent-soft: color-mix(in srgb, var(--ft-accent) 12%, transparent);
    --lesson-success: var(--ft-accent);
    --lesson-warning: var(--ft-accent-strong);
}

#user-screen .bg-gray-700,
#pack-selection .bg-gray-700,
#package-manager .bg-gray-700,
#package-manager .bg-gray-800,
#lesson-list .bg-gray-800,
#stats-modal .bg-gray-800,
#stats-modal .bg-gray-900,
#device-keyboard-notice > div {
    background: var(--ft-surface) !important;
    color: var(--ft-text) !important;
}

#stats-modal {
    background: color-mix(in srgb, var(--ft-bg) 86%, #000) !important;
}

#user-screen .border-gray-600,
#user-screen .border-gray-700,
#pack-selection .border-gray-600,
#pack-selection .border-gray-700,
#package-manager .border-gray-600,
#package-manager .border-gray-700,
#lesson-list .border-gray-600,
#lesson-list .border-gray-700,
#stats-modal .border-gray-600,
#stats-modal .border-gray-700 {
    border-color: var(--ft-border) !important;
}

#user-screen h1,
#user-screen h2,
#package-manager h1,
#package-manager h2,
#package-manager h3,
#lesson-list h1,
#lesson-list h2,
#lesson-list h3,
#stats-modal h2,
#stats-modal h3 {
    color: var(--ft-text-strong) !important;
}

#user-screen #new-user-name,
#user-screen #new-user-level {
    min-width: 0;
    width: 100%;
}

#onboarding-quick-actions {
    display: grid;
    gap: 0.75rem;
}

#onboarding-quick-actions.hidden {
    display: none;
}

#onboarding-quick-actions .onboarding-kicker {
    margin: 0 0 0.35rem;
    color: var(--ft-text-subtle);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

#onboarding-quick-actions button {
    min-height: 3.25rem;
    width: 100%;
    border-radius: 0.85rem;
    font-weight: 700;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

#onboarding-beginner-btn {
    border: 1px solid var(--ft-accent);
    background: var(--ft-accent);
    color: var(--ft-accent-ink);
}

#onboarding-beginner-btn:hover {
    background: var(--ft-accent-strong);
    border-color: var(--ft-accent-strong);
    transform: translateY(-1px);
}

#onboarding-placement-btn {
    border: 1px solid var(--ft-border-strong);
    background: transparent;
    color: var(--ft-text-strong);
}

#onboarding-placement-btn:hover {
    border-color: var(--ft-accent);
    color: var(--ft-accent-strong);
}

#onboarding-more-options {
    margin-top: 1rem;
    border-top: 1px solid var(--ft-border);
    color: var(--ft-text-muted);
}

#onboarding-more-options > summary {
    cursor: pointer;
    padding: 0.85rem 0.25rem;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    list-style: none;
}

#onboarding-more-options > summary::-webkit-details-marker {
    display: none;
}

#onboarding-more-options > summary::after {
    content: '＋';
    margin-left: 0.4rem;
    color: var(--ft-accent-strong);
}

#onboarding-more-options[open] > summary::after {
    content: '－';
}

.onboarding-more-options-body {
    padding: 0.25rem 0 0.5rem;
}

@media (max-width: 520px) {
    #user-screen {
        padding: 1rem;
    }

    #user-screen > div {
        width: min(100%, 24rem);
    }

    #user-screen h1 {
        margin-bottom: 2.5rem;
        font-size: clamp(2.5rem, 13vw, 3.25rem);
    }
}

#user-screen #create-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    min-height: 44px;
    padding-inline: 1.25rem;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

#user-screen .text-cyan-200,
#user-screen .text-cyan-300,
#user-screen .text-cyan-400,
#package-manager .text-cyan-200,
#package-manager .text-cyan-300,
#package-manager .text-cyan-400,
#lesson-list .text-cyan-200,
#lesson-list .text-cyan-300,
#lesson-list .text-cyan-400,
#stats-modal .text-cyan-200,
#stats-modal .text-cyan-300,
#stats-modal .text-cyan-400 {
    color: var(--ft-accent-strong) !important;
}

#user-screen .bg-cyan-600,
#pack-selection .bg-cyan-600,
#package-manager .bg-cyan-600,
#package-manager .bg-blue-600,
#package-manager .bg-green-600,
#package-manager .bg-purple-600,
#lesson-list .bg-cyan-600,
#stats-modal .bg-cyan-600,
#stats-modal .bg-orange-600,
#stats-modal .bg-purple-600 {
    background: var(--ft-accent) !important;
    color: var(--ft-accent-ink) !important;
}

#user-screen input,
#user-screen select,
#package-manager input,
#package-manager select,
#package-manager textarea {
    border-color: var(--ft-border-strong) !important;
    background: var(--ft-surface-raised) !important;
    color: var(--ft-text-strong) !important;
}

#pack-selection main {
    max-width: 70rem;
}

@media (min-width: 900px) {
    #pack-selection main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(1rem, 2vw, 1.5rem);
        row-gap: 1.25rem;
        align-content: start;
    }

    #pack-selection main > header,
    #pack-selection main > section[aria-labelledby="today-heading"],
    #pack-selection main > details {
        grid-column: 1 / -1;
    }

    #pack-selection main > header,
    #pack-selection main > section[aria-labelledby="today-heading"],
    #pack-selection main > details {
        margin-bottom: 0 !important;
    }

    #progress-details[open] > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(1rem, 2vw, 1.5rem);
        row-gap: 1.25rem;
    }

    #progress-details section[aria-labelledby="mastery-heading"],
    #progress-details section[aria-labelledby="review-health-heading"],
    #progress-details section[aria-labelledby="trend-heading"] {
        min-width: 0;
    }
}

#progress-details section[aria-labelledby="mastery-heading"] > div,
#progress-details section[aria-labelledby="review-health-heading"] > div,
#progress-details section[aria-labelledby="trend-heading"] > div {
    flex-wrap: wrap;
}


#pack-selection main > header h1,
#lesson-list .lesson-page-title {
    color: var(--ft-text-strong) !important;
    letter-spacing: -0.035em;
}

#pack-selection main > header p,
#pack-selection section > p,
#pack-selection details,
#pack-selection details summary {
    color: var(--ft-text-muted);
}

#pack-selection section,
#pack-selection details {
    border-color: var(--ft-border) !important;
    background: var(--ft-surface) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

#pack-selection #progress-details > div > section {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pack-selection section[aria-labelledby="today-heading"] {
    border-color: color-mix(in srgb, var(--ft-accent) 58%, var(--ft-border)) !important;
}

#pack-selection h2,
#pack-selection summary {
    color: var(--ft-text-strong) !important;
}

#pack-selection .text-cyan-300,
#pack-selection .text-cyan-400,
#pack-selection .text-cyan-200 {
    color: var(--ft-accent-strong) !important;
}

#pack-selection .bg-cyan-600,
#pack-selection .bg-cyan-500 {
    background: var(--ft-accent) !important;
    color: var(--ft-accent-ink) !important;
}

#pack-selection .bg-cyan-600:hover,
#pack-selection .bg-cyan-500:hover {
    background: var(--ft-accent-strong) !important;
}

#game-container {
    background: var(--ft-bg);
    color: var(--ft-text);
    --ft-training-text: #cbd5e1;
    --ft-training-strong: #f8fafc;
    --ft-training-muted: #9ca3af;
    --ft-training-current-glow: rgba(226, 232, 240, .14);
    --ft-training-correct: #22c55e;
    --ft-training-correct-bg: rgba(34, 197, 94, .08);
    --ft-training-correct-trace: rgba(143, 179, 162, .5);
    --ft-training-correct-flare: #62d89b;
    --ft-training-correct-flare-glow: rgba(156, 217, 189, .18);
    --ft-training-single-correct-start: rgba(34, 197, 94, .1);
    --ft-training-single-correct-end: rgba(22, 163, 74, .2);
    --ft-training-single-correct-border: rgba(34, 197, 94, .2);
    --ft-training-single-error-start: rgba(239, 68, 68, .15);
    --ft-training-single-error-end: rgba(220, 38, 38, .25);
    --ft-training-single-error-border: rgba(239, 68, 68, .3);
    --ft-training-single-error: #ef4444;
    --ft-training-multi-correct: #8fb3a2;
    --ft-training-multi-error: #e5a4a4;
    --ft-training-cyan: #22d3ee;
    --ft-training-cyan-soft: rgba(34, 211, 238, .16);
    --ft-training-cyan-glow: rgba(34, 211, 238, .6);
    --ft-training-cyan-highlight: #67e8f9;
    --ft-training-combo: #f4c76a;
    --ft-training-combo-glow: rgba(244, 199, 106, .28);
    --ft-training-card: #1f2937;
    --ft-training-card-border: #374151;
    --ft-training-card-label: #f3f4f6;
    --ft-training-card-kicker: #6b7280;
    --ft-training-finger: #374151;
    --ft-training-finger-stroke: #4b5563;
    --ft-training-lane: #4b5563;
    --ft-training-reading-bg: rgba(15, 23, 42, .72);
    --ft-training-reading-border: rgba(148, 163, 184, .18);
    --ft-training-reading-shadow: 0 18px 44px rgba(2, 6, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
}

:root[data-theme="light"] #game-container,
body[data-theme="light"] #game-container {
    --ft-training-text: var(--ft-text);
    --ft-training-strong: var(--ft-text-strong);
    --ft-training-muted: var(--ft-text-muted);
    --ft-training-current-glow: color-mix(in srgb, var(--ft-focus-ring) 14%, transparent);
    --ft-training-correct: var(--ft-success);
    --ft-training-correct-bg: color-mix(in srgb, var(--ft-success) 8%, transparent);
    --ft-training-correct-trace: color-mix(in srgb, var(--ft-success) 60%, var(--ft-text));
    --ft-training-correct-flare: var(--ft-success);
    --ft-training-correct-flare-glow: color-mix(in srgb, var(--ft-success) 10%, transparent);
    --ft-training-single-correct-start: color-mix(in srgb, var(--ft-success) 10%, transparent);
    --ft-training-single-correct-end: color-mix(in srgb, var(--ft-success) 16%, transparent);
    --ft-training-single-correct-border: color-mix(in srgb, var(--ft-success) 24%, transparent);
    --ft-training-single-error-start: color-mix(in srgb, var(--ft-danger) 10%, transparent);
    --ft-training-single-error-end: color-mix(in srgb, var(--ft-danger) 18%, transparent);
    --ft-training-single-error-border: color-mix(in srgb, var(--ft-danger) 26%, transparent);
    --ft-training-single-error: var(--ft-danger);
    --ft-training-multi-correct: var(--ft-success);
    --ft-training-multi-error: var(--ft-danger);
    --ft-training-cyan: var(--ft-focus-ring);
    --ft-training-cyan-soft: color-mix(in srgb, var(--ft-focus-ring) 14%, transparent);
    --ft-training-cyan-glow: color-mix(in srgb, var(--ft-focus-ring) 48%, transparent);
    --ft-training-cyan-highlight: var(--ft-accent-strong);
    --ft-training-combo: var(--ft-accent-strong);
    --ft-training-combo-glow: color-mix(in srgb, var(--ft-accent-strong) 24%, transparent);
    --ft-training-card: var(--ft-surface);
    --ft-training-card-border: var(--ft-border);
    --ft-training-card-label: var(--ft-text-strong);
    --ft-training-card-kicker: var(--ft-text-muted);
    --ft-training-finger: var(--ft-surface-raised);
    --ft-training-finger-stroke: var(--ft-border-strong);
    --ft-training-lane: var(--ft-border-strong);
    --ft-training-reading-bg: color-mix(in srgb, var(--ft-surface) 88%, transparent);
    --ft-training-reading-border: color-mix(in srgb, var(--ft-border-strong) 24%, transparent);
    --ft-training-reading-shadow: 0 18px 44px rgba(23, 30, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] #game-container,
    body[data-theme="system"] #game-container {
        --ft-training-text: var(--ft-text);
        --ft-training-strong: var(--ft-text-strong);
        --ft-training-muted: var(--ft-text-muted);
        --ft-training-current-glow: color-mix(in srgb, var(--ft-focus-ring) 14%, transparent);
        --ft-training-correct: var(--ft-success);
        --ft-training-correct-bg: color-mix(in srgb, var(--ft-success) 8%, transparent);
        --ft-training-correct-trace: color-mix(in srgb, var(--ft-success) 60%, var(--ft-text));
        --ft-training-correct-flare: var(--ft-success);
        --ft-training-correct-flare-glow: color-mix(in srgb, var(--ft-success) 10%, transparent);
        --ft-training-single-correct-start: color-mix(in srgb, var(--ft-success) 10%, transparent);
        --ft-training-single-correct-end: color-mix(in srgb, var(--ft-success) 16%, transparent);
        --ft-training-single-correct-border: color-mix(in srgb, var(--ft-success) 24%, transparent);
        --ft-training-single-error-start: color-mix(in srgb, var(--ft-danger) 10%, transparent);
        --ft-training-single-error-end: color-mix(in srgb, var(--ft-danger) 18%, transparent);
        --ft-training-single-error-border: color-mix(in srgb, var(--ft-danger) 26%, transparent);
        --ft-training-single-error: var(--ft-danger);
        --ft-training-multi-correct: var(--ft-success);
        --ft-training-multi-error: var(--ft-danger);
        --ft-training-cyan: var(--ft-focus-ring);
        --ft-training-cyan-soft: color-mix(in srgb, var(--ft-focus-ring) 14%, transparent);
        --ft-training-cyan-glow: color-mix(in srgb, var(--ft-focus-ring) 48%, transparent);
        --ft-training-cyan-highlight: var(--ft-accent-strong);
        --ft-training-combo: var(--ft-accent-strong);
        --ft-training-combo-glow: color-mix(in srgb, var(--ft-accent-strong) 24%, transparent);
        --ft-training-card: var(--ft-surface);
        --ft-training-card-border: var(--ft-border);
        --ft-training-card-label: var(--ft-text-strong);
        --ft-training-card-kicker: var(--ft-text-muted);
        --ft-training-finger: var(--ft-surface-raised);
        --ft-training-finger-stroke: var(--ft-border-strong);
        --ft-training-lane: var(--ft-border-strong);
        --ft-training-reading-bg: color-mix(in srgb, var(--ft-surface) 88%, transparent);
        --ft-training-reading-border: color-mix(in srgb, var(--ft-border-strong) 24%, transparent);
        --ft-training-reading-shadow: 0 18px 44px rgba(23, 30, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
    }
}

#game-container header,
#game-container footer {
    color: var(--ft-text-muted);
}

#game-container .text-white,
#game-container #wpm,
#game-container #accuracy {
    color: var(--ft-text-strong) !important;
}

#game-container .key {
    background: var(--ft-surface-raised) !important;
    border-color: var(--ft-border-strong) !important;
    color: var(--ft-text-muted) !important;
    box-shadow: none !important;
    transition: all .1s ease-out;
    border-bottom-width: 4px;
}

#game-container .key-active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

#game-container .key-active,
#game-container .key-highlight {
    background: var(--ft-border-strong) !important;
    color: var(--ft-text-strong) !important;
    box-shadow: inset 0 0 0 1px var(--ft-accent) !important;
    filter: none !important;
}

#game-container .finger-cue strong {
    background: var(--ft-training-cyan) !important;
    color: #111827 !important;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    box-shadow: 0 0 10px var(--ft-training-cyan-glow) !important;
}

#game-container .finger {
    background: var(--ft-training-finger) !important;
    border-color: var(--ft-training-finger-stroke) !important;
    box-shadow: none !important;
    fill: var(--ft-training-finger) !important;
    stroke: var(--ft-training-finger-stroke) !important;
    stroke-width: 2;
}

#game-container .finger-highlight {
    background: transparent !important;
    box-shadow: none !important;
    fill: var(--ft-training-cyan) !important;
    stroke: var(--ft-training-cyan-highlight) !important;
}

#game-container .finger-lane i {
    --finger-height: 30px;
    position: relative;
    height: var(--finger-height) !important;
    background: var(--ft-training-lane) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#game-container .finger-lane i[data-finger$="-pinky"] { --finger-height: 25px; }
#game-container .finger-lane i[data-finger$="-ring"] { --finger-height: 34px; }
#game-container .finger-lane i[data-finger$="-middle"] { --finger-height: 41px; }
#game-container .finger-lane i[data-finger$="-index"] { --finger-height: 37px; }
#game-container .finger-lane i[data-finger$="-thumb"] { --finger-height: 21px; }

#game-container .finger-lane i::after {
    content: '';
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: 50%;
    width: 6px;
    height: 1px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ft-training-card-label) 26%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

#game-container .finger-lane i.active {
    height: var(--finger-height) !important;
    background: var(--ft-training-cyan) !important;
    box-shadow: 0 0 0 3px var(--ft-training-cyan-soft), 0 0 14px var(--ft-training-cyan-glow) !important;
}

#game-container .finger-lane i.active::after {
    background: color-mix(in srgb, var(--ft-training-card) 42%, transparent);
}

#game-container #finger-tips.finger-cue {
    box-sizing: border-box;
    width: min(20rem, calc(100% - 2rem));
    min-height: 68px;
    margin-block-start: 14px;
    padding: 10px 14px;
    justify-content: center;
    gap: 12px;
    direction: ltr;
    overflow: hidden;
    background: var(--ft-training-card) !important;
    border-color: var(--ft-training-card-border) !important;
    color: var(--ft-training-muted) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16) !important;
}

#game-container #finger-tips .finger-cue-announcement,
#game-container #finger-tips #finger-cue-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#game-container #finger-tips .finger-lane {
    direction: ltr;
    flex: 0 0 auto;
    margin: 0;
}

#game-container #finger-tips .finger-cue-state {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 18px;
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}

#game-container #finger-tips[data-state="paused"] .finger-cue-state {
    opacity: .9;
    transform: translateX(0);
}

#game-container #finger-tips[data-state="paused"] .finger-cue-state::before {
    content: '';
    position: absolute;
    inset: 2px 1px;
    border-block: 7px solid transparent;
    border-inline-start: 11px solid var(--ft-training-card-label);
}

#game-container #finger-tips[data-state="paused"] #finger-cue-key {
    animation: finger-cue-breathe 1.8s ease-in-out infinite;
}

@keyframes finger-cue-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .82; transform: scale(.97); }
}

#game-container #pause-training-btn {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    font-size: 0 !important;
    color: var(--ft-text-muted) !important;
    border: 1px solid transparent;
    border-radius: 8px !important;
    background: transparent !important;
}

#game-container #pause-training-btn:hover {
    color: var(--ft-text-strong) !important;
    border-color: var(--ft-border-strong);
    background: color-mix(in srgb, var(--ft-surface-raised) 72%, transparent) !important;
}

#game-container #pause-training-btn::before {
    content: '';
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 2px;
    background: linear-gradient(to right, currentColor 0 4px, transparent 4px 10px, currentColor 10px 14px) center / 14px 16px no-repeat;
}

#game-container #pause-training-btn[data-state="paused"]::before {
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: currentColor;
    clip-path: polygon(7px 4px, 18px 12px, 7px 20px);
}

#game-container #text-stream,
#game-container #text-stream .char {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
}

#game-container #text-stream .char {
    z-index: 2;
}

#game-container #text-stream-container {
    isolation: isolate;
}

#game-container #combo-burst-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: clip;
    pointer-events: none;
}

#game-container #combo-burst-layer .combo-burst {
    --burst-duration: 380ms;
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
    color: var(--ft-training-combo);
    opacity: 1;
    transform-origin: center;
    transform: translateZ(0);
    animation: combo-burst-shell var(--burst-duration) cubic-bezier(.22, 1, .36, 1) both;
}

#game-container #combo-burst-layer .combo-burst[data-tier="large"] {
    --burst-duration: 480ms;
}

#game-container #combo-burst-layer .combo-burst[data-tier="small"] {
    --burst-duration: 180ms;
    color: var(--ft-training-cyan);
}

#game-container #combo-burst-layer .combo-burst-core,
#game-container #combo-burst-layer .combo-burst-ring,
#game-container #combo-burst-layer .combo-burst-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    pointer-events: none;
}

#game-container #combo-burst-layer .combo-burst-core {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 12px var(--ft-training-combo-glow);
    animation: combo-burst-core calc(var(--burst-duration) * .78) cubic-bezier(.22, 1, .36, 1) both;
}

#game-container #combo-burst-layer .combo-burst[data-tier="small"] .combo-burst-core {
    width: 10px;
    height: 7px;
    background: color-mix(in srgb, currentColor 72%, transparent);
    box-shadow: 0 0 10px var(--ft-training-cyan-glow);
    filter: blur(.35px);
}

#game-container #combo-burst-layer .combo-burst[data-tier="large"] .combo-burst-core {
    width: 15px;
    height: 15px;
}

#game-container #combo-burst-layer .combo-burst-ring {
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-top-color: color-mix(in srgb, currentColor 72%, transparent);
    border-right-color: color-mix(in srgb, currentColor 42%, transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 3px var(--ft-training-combo-glow));
    animation: combo-burst-ring var(--burst-duration) cubic-bezier(.22, 1, .36, 1) both;
}

#game-container #combo-burst-layer .combo-burst[data-tier="large"] .combo-burst-ring[data-ring="1"] {
    width: 58px;
    height: 58px;
}

#game-container #combo-burst-layer .combo-burst[data-tier="large"] .combo-burst-ring[data-ring="2"] {
    width: 42px;
    height: 42px;
    animation-delay: 28ms;
}

#game-container #combo-burst-layer .combo-burst-spark {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px var(--ft-training-combo-glow);
    animation: combo-burst-spark var(--burst-duration) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--spark-delay, 0ms);
}

#game-container #combo-burst-layer .combo-burst[data-tier="small"] .combo-burst-spark {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 3px var(--ft-training-cyan-glow);
}

#game-container #combo-burst-layer .combo-burst[data-tier="large"] .combo-burst-spark {
    width: 6px;
    height: 6px;
}

#game-container #text-stream {
    z-index: 2;
}

@keyframes combo-burst-shell {
    0% { opacity: .86; transform: translateZ(0) scale(.97); }
    100% { opacity: 1; transform: translateZ(0) scale(1); }
}

@keyframes combo-burst-core {
    0% { opacity: 0; transform: translate(-50%, -45%) scale(.55); }
    24% { opacity: .7; transform: translate(-50%, -52%) scale(1); }
    58% { opacity: .34; transform: translate(-50%, -62%) scale(1.34); }
    100% { opacity: 0; transform: translate(-50%, -82%) scale(1.7); }
}

@keyframes combo-burst-ring {
    0% { opacity: 0; transform: translate(-50%, -48%) scale(.56) rotate(calc(var(--ring-turn, 0deg) - 4deg)); }
    18% { opacity: .58; transform: translate(-50%, -50%) scale(.76) rotate(calc(var(--ring-turn, 0deg) - 2deg)); }
    58% { opacity: .42; transform: translate(-50%, -54%) scale(1.05) rotate(calc(var(--ring-turn, 0deg) + 1deg)); }
    84% { opacity: .2; transform: translate(-50%, -58%) scale(1.24) rotate(calc(var(--ring-turn, 0deg) + 3deg)); }
    100% { opacity: 0; transform: translate(-50%, -62%) scale(1.38) rotate(calc(var(--ring-turn, 0deg) + 5deg)); }
}

@keyframes combo-burst-spark {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-2px) scale(.3); }
    22% { opacity: .82; }
    58% { opacity: .48; }
    84% { opacity: .18; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(calc(var(--spark-distance) * -1)) scale(var(--spark-scale, .68)); }
}

#game-container #text-stream.multi-line {
    color: var(--ft-training-text) !important;
    text-align: left;
    text-shadow: none;
    padding-inline: clamp(24px, 2.5vw, 32px);
    text-wrap: pretty;
}

#game-container #text-stream-container.multi-line {
    width: min(calc(100% - 48px), 1300px);
    background: var(--ft-training-reading-bg) !important;
    border-color: var(--ft-training-reading-border) !important;
    box-shadow: var(--ft-training-reading-shadow) !important;
}

#game-container #text-stream.multi-line .char.current {
    position: relative;
    color: var(--ft-training-strong) !important;
    text-shadow: 0 0 16px var(--ft-training-current-glow) !important;
}

#game-container #text-stream.multi-line .char.current::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.08em;
    width: 1ch;
    height: 2px;
    border-radius: 999px;
    background: var(--ft-training-cyan);
    opacity: .65;
    pointer-events: none;
    animation: multiline-cursor-breathe 2s ease-in-out infinite;
}

#game-container #text-stream.multi-line .char.current[data-char="space"]::before {
    width: .55em;
}

#game-container #text-stream.multi-line .char.current[data-char="space"]::after {
    display: none !important;
}

@keyframes multiline-cursor-breathe {
    0%, 100% { opacity: .65; }
    50% { opacity: 1; }
}

#game-container #text-stream .char.completed.correct:not([data-char="space"]):not([data-char="enter"]):not([data-char="virtual-enter"]) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--ft-training-correct-trace) !important;
    text-shadow: none !important;
}

#game-container #text-stream .char.completed.correct.feedback-active[data-feedback-glyph]:not([data-char="space"]):not([data-char="enter"]):not([data-char="virtual-enter"]) {
    color: var(--ft-training-correct-flare) !important;
    font-weight: 700;
    text-decoration: none;
    transition: none;
}

#game-container #text-stream .char.completed.correct.feedback-fading[data-feedback-glyph]:not([data-char="space"]):not([data-char="enter"]):not([data-char="virtual-enter"]) {
    color: var(--ft-training-correct-trace) !important;
    font-weight: 400;
    transition: color 600ms cubic-bezier(.25, 1, .5, 1);
}

#game-container #text-stream.multi-line .char.completed.error:not([data-char="space"]):not([data-char="enter"]) {
    color: var(--ft-training-multi-error) !important;
}

#game-container #text-stream:not(.multi-line) .char.completed.error:not([data-char="space"]):not([data-char="enter"]) {
    background: linear-gradient(135deg, var(--ft-training-single-error-start) 0%, var(--ft-training-single-error-end) 100%) !important;
    border: 1px solid var(--ft-training-single-error-border) !important;
    color: var(--ft-training-single-error) !important;
}

.particle {
    position: fixed;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
    user-select: none;
    background: var(--ft-particle);
    animation: typing-dust .6s ease-out forwards;
}

@keyframes typing-dust {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); }
}

#game-container #focus-cursor {
    background-color: var(--ft-training-cyan) !important;
    box-shadow: 0 0 10px var(--ft-training-cyan) !important;
}

#game-container .btn-base,
#game-container button {
    box-shadow: none;
}

.product-quick-preferences {
    position: fixed;
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
}

.product-quick-preference {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    color: var(--ft-ui-text-muted, var(--ft-text-muted));
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.product-quick-preference:hover,
.product-quick-preference:focus-within {
    background: var(--ft-ui-surface-raised, var(--ft-surface-raised));
    color: var(--ft-ui-text-strong, var(--ft-text-strong));
}

.product-quick-preference:focus-within {
    outline: 2px solid var(--ft-ui-flow, var(--ft-accent));
    outline-offset: 2px;
}

.product-quick-preference-icon {
    display: grid;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    place-items: center;
    font-size: 0;
    line-height: 0;
    transform: none;
    pointer-events: none;
}

.product-quick-preference-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    overflow: visible;
}

.product-quick-preference select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

body:has(#game-container:not(.hidden)) .product-quick-preferences {
    top: max(1.125rem, env(safe-area-inset-top));
    right: max(4.75rem, calc(3.75rem + env(safe-area-inset-right)));
    bottom: auto;
}

body:has(#stats-modal:not(.hidden)) .product-quick-preferences {
    visibility: hidden;
}

@media (max-width: 520px) {
    body:has(#game-container:not(.hidden)) .product-quick-preferences {
        display: none;
    }
}

@media (min-width: 521px) and (max-width: 720px) {
    body:has(#game-container:not(.hidden)) #pause-training-btn {
        top: max(1.125rem, env(safe-area-inset-top));
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-quick-preference {
        transition: none;
    }

    html[data-theme="dark"] .particle,
    body[data-theme="dark"] .particle,
    html[data-theme="light"] .particle,
    body[data-theme="light"] .particle,
    html[data-theme="system"] .particle,
    body[data-theme="system"] .particle {
        display: none !important;
    }

    #game-container #combo-burst-layer {
        display: none !important;
    }

    #game-container #text-stream.multi-line .char.current::before {
        animation: none;
        opacity: .85;
    }

    #game-container #finger-tips[data-state="paused"] #finger-cue-key {
        animation: none;
    }

}

@media (max-width: 720px) {
    #keyboard > div > .key[data-key="backspace"],
    #keyboard > div > .key[data-key="capslock"],
    #keyboard > div > .key[data-key="enter"],
    #keyboard > div > .key[data-key="shift"],
    #keyboard > div > .key[data-key="tab"] {
        overflow: hidden;
        white-space: nowrap;
        font-size: 0 !important;
    }

    #keyboard > div > .key[data-key="backspace"]::after,
    #keyboard > div > .key[data-key="capslock"]::after,
    #keyboard > div > .key[data-key="enter"]::after,
    #keyboard > div > .key[data-key="shift"]::after,
    #keyboard > div > .key[data-key="tab"]::after {
        display: block;
        color: currentColor;
        font-family: ui-sans-serif, system-ui, sans-serif;
        font-size: 1rem;
        line-height: 1;
        text-align: center;
    }

    #keyboard > div > .key[data-key="backspace"]::after { content: '⌫'; }
    #keyboard > div > .key[data-key="capslock"]::after { content: '⇪'; }
    #keyboard > div > .key[data-key="enter"]::after { content: '↵'; }
    #keyboard > div > .key[data-key="shift"]::after { content: '⇧'; }
    #keyboard > div > .key[data-key="tab"]::after { content: '⇥'; }

    #game-container #finger-tips.finger-cue {
        flex-wrap: nowrap;
        gap: 8px;
    }

    #game-container #finger-tips #finger-cue-key {
        flex: 0 0 auto;
        min-width: 38px;
        width: max-content;
        padding-inline: 4px;
        white-space: nowrap;
    }

    #game-container #finger-tips .finger-lane {
        flex: 0 0 auto;
    }

    #game-container header > div,
    #game-container header > div > span {
        white-space: nowrap;
    }

}

@media (max-width: 320px) {
    #game-container #finger-tips.finger-cue {
        width: calc(100% - 12px);
        min-height: 62px;
        padding-inline: 6px;
        gap: 6px;
    }

    #game-container #finger-tips .finger-lane {
        gap: 2px;
    }

    #game-container #finger-tips .finger-lane i {
        width: 9px;
    }

    #game-container #finger-tips .finger-lane i:nth-child(6) {
        margin-inline-start: 6px;
    }

    #game-container #finger-tips .finger-cue-state {
        flex-basis: 13px;
        width: 13px;
    }
}

#game-container #text-stream:focus,
#game-container #text-stream:focus-visible {
    outline: 0 !important;
}

#game-container #toggle-keyboard-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#game-container #toggle-keyboard-btn:focus-visible,
#game-container #pause-training-btn:focus-visible,
#game-container #exit-training-btn:focus-visible {
    outline: 2px solid var(--ft-accent) !important;
    outline-offset: 3px;
}

/* Product surfaces: Quiet Momentum. */
:root,
:root[data-theme="dark"] {
    --ft-ui-bg: #0b1220;
    --ft-ui-surface: #111a2a;
    --ft-ui-surface-raised: #172235;
    --ft-ui-border: #29364b;
    --ft-ui-border-strong: #42516a;
    --ft-ui-text: #c7d0dc;
    --ft-ui-text-strong: #f5f7fa;
    --ft-ui-text-muted: #96a2b4;
    --ft-ui-text-subtle: #7e8a9c;
    --ft-ui-flow: #6f9cff;
    --ft-ui-flow-strong: #8bb2ff;
    --ft-ui-primary: #f5f7fa;
    --ft-ui-primary-hover: #ffffff;
    --ft-ui-primary-ink: #0b1220;
    --ft-ui-success: #76ad88;
    --ft-ui-warning: #d0a45d;
    --ft-ui-danger: #d17a82;
    --ft-ui-overlay: rgba(3, 8, 18, .82);
    --ft-ui-shadow: 0 24px 72px rgba(2, 7, 17, .34);
}

:root[data-theme="light"] {
    --ft-ui-bg: #f4f7fb;
    --ft-ui-surface: #ffffff;
    --ft-ui-surface-raised: #edf2f7;
    --ft-ui-border: #cbd5e1;
    --ft-ui-border-strong: #94a3b8;
    --ft-ui-text: #334155;
    --ft-ui-text-strong: #0f172a;
    --ft-ui-text-muted: #475569;
    --ft-ui-text-subtle: #5f6f83;
    --ft-ui-flow: #326bcf;
    --ft-ui-flow-strong: #2458b6;
    --ft-ui-primary: #111722;
    --ft-ui-primary-hover: #253047;
    --ft-ui-primary-ink: #fbfaf7;
    --ft-ui-success: #18794e;
    --ft-ui-warning: #9a6700;
    --ft-ui-danger: #b42318;
    --ft-ui-focus-ring: #2563eb;
    --ft-ui-overlay: rgba(8, 14, 24, .56);
    --ft-ui-shadow: 0 24px 64px rgba(23, 30, 42, .16);
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        --ft-ui-bg: #f4f7fb;
        --ft-ui-surface: #ffffff;
        --ft-ui-surface-raised: #edf2f7;
        --ft-ui-border: #cbd5e1;
        --ft-ui-border-strong: #94a3b8;
        --ft-ui-text: #334155;
        --ft-ui-text-strong: #0f172a;
        --ft-ui-text-muted: #475569;
        --ft-ui-text-subtle: #5f6f83;
        --ft-ui-flow: #326bcf;
        --ft-ui-flow-strong: #2458b6;
        --ft-ui-primary: #111722;
        --ft-ui-primary-hover: #253047;
        --ft-ui-primary-ink: #fbfaf7;
        --ft-ui-success: #18794e;
        --ft-ui-warning: #9a6700;
        --ft-ui-danger: #b42318;
        --ft-ui-focus-ring: #2563eb;
        --ft-ui-overlay: rgba(8, 14, 24, .56);
        --ft-ui-shadow: 0 24px 64px rgba(23, 30, 42, .16);
    }
}

:is(
    #user-screen,
    #pack-selection,
    #package-manager,
    #lesson-list,
    #stats-modal,
    .product-quick-preferences
) {
    --ft-bg: var(--ft-ui-bg);
    --ft-surface: var(--ft-ui-surface);
    --ft-surface-raised: var(--ft-ui-surface-raised);
    --ft-border: var(--ft-ui-border);
    --ft-border-strong: var(--ft-ui-border-strong);
    --ft-text: var(--ft-ui-text);
    --ft-text-strong: var(--ft-ui-text-strong);
    --ft-text-muted: var(--ft-ui-text-muted);
    --ft-text-subtle: var(--ft-ui-text-subtle);
    --ft-accent: var(--ft-ui-flow);
    --ft-accent-strong: var(--ft-ui-flow-strong);
    --ft-accent-ink: var(--ft-ui-primary-ink);
    --ft-success: var(--ft-ui-success);
    --ft-danger: var(--ft-ui-danger);
    --ft-focus-ring: var(--ft-ui-focus-ring, var(--ft-ui-flow));
    color: var(--ft-ui-text) !important;
    font-family: Onest, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-kerning: normal;
}

.ui-text-strong {
    color: var(--ft-ui-text-strong) !important;
}

.ui-text-body {
    color: var(--ft-ui-text) !important;
}

.ui-text-muted {
    color: var(--ft-ui-text-muted) !important;
}

.ui-text-subtle {
    color: var(--ft-ui-text-subtle) !important;
}

.ui-text-flow {
    color: var(--ft-ui-flow-strong) !important;
}

.ui-action-ink {
    color: var(--ft-ui-primary-ink) !important;
}

.ui-text-on-color {
    color: #ffffff !important;
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal) {
    background: var(--ft-ui-bg);
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences)
    :is(button, input, select, textarea) {
    font: inherit;
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences) button {
    min-height: 44px;
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences)
    :is(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--ft-focus-ring) !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

#pack-selection summary:focus-visible {
    outline: 2px solid var(--ft-focus-ring) !important;
    outline-offset: 3px;
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences)
    ::selection {
    background: color-mix(in srgb, var(--ft-ui-flow) 28%, transparent);
    color: var(--ft-ui-text-strong);
}

:is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences) {
    scrollbar-color: var(--ft-ui-border-strong) transparent;
}

/* Profile entry */
#user-screen {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

#user-screen > div {
    width: min(100%, 34rem);
    padding-block: clamp(3rem, 10vh, 7rem);
}

#user-screen h1 {
    margin-bottom: clamp(2rem, 6vh, 3.5rem) !important;
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(3rem, 9vw, 5.75rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.065em;
    line-height: .96;
}

#user-screen h1::after {
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 1rem;
    background: var(--ft-ui-flow);
    content: "";
}

#user-screen h2 {
    margin-bottom: .75rem !important;
    color: var(--ft-ui-text-muted) !important;
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left !important;
}

#user-screen #user-list {
    gap: .5rem;
}

#user-screen #user-list button {
    border: 1px solid var(--ft-ui-border);
    background: transparent !important;
    color: var(--ft-ui-text-strong) !important;
    box-shadow: none;
}

#user-screen #user-list button:hover {
    border-color: var(--ft-ui-border-strong);
    background: var(--ft-ui-surface) !important;
    transform: none;
}

#user-screen #new-user-name,
#user-screen #new-user-level {
    min-height: 48px;
    border: 1px solid var(--ft-ui-border-strong) !important;
    border-radius: .5rem;
    background: var(--ft-ui-surface) !important;
    color: var(--ft-ui-text-strong) !important;
}

#user-screen #new-user-name::placeholder {
    color: var(--ft-ui-text-muted);
    opacity: 1;
}

#user-screen #create-user-btn {
    border: 1px solid var(--ft-ui-primary);
    background: var(--ft-ui-primary) !important;
    color: var(--ft-ui-primary-ink) !important;
    box-shadow: none;
}

#user-screen #create-user-btn:hover {
    border-color: var(--ft-ui-primary-hover);
    background: var(--ft-ui-primary-hover) !important;
    transform: none;
}

/* Learning center */
#pack-selection {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

#pack-selection main {
    width: min(100%, 66rem);
    padding-top: clamp(4.5rem, 9vh, 6.5rem) !important;
    padding-bottom: clamp(3rem, 8vh, 6rem) !important;
}

#pack-selection main > header {
    position: relative;
    max-width: 47rem;
    margin-bottom: clamp(2.5rem, 7vh, 4.5rem) !important;
    padding-bottom: 1.75rem;
}

#pack-selection main > header::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--ft-ui-flow);
    content: "";
}

#pack-selection main > header > p:first-child {
    display: none;
}

#pack-selection main > header h1 {
    margin-top: 0 !important;
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(2.65rem, 6vw, 4.75rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.06em;
    line-height: 1.02;
}

#pack-selection main > header > p:last-child {
    max-width: 42rem;
    margin-top: 1rem !important;
    color: var(--ft-ui-text-muted) !important;
    font-size: 1rem;
    line-height: 1.7;
}

#pack-selection main > section[aria-labelledby="today-heading"] {
    margin-bottom: 2.25rem !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
    border: 1px solid var(--ft-ui-border-strong) !important;
    border-radius: .75rem !important;
    background: var(--ft-ui-surface) !important;
    box-shadow: var(--ft-ui-shadow) !important;
}

#pack-selection #today-heading {
    margin-bottom: .65rem !important;
    color: var(--ft-ui-text-muted) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .11em;
}

#pack-selection #learning-plan-title {
    margin: 0;
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
    font-weight: 600;
    letter-spacing: -.03em;
}

#pack-selection #learning-plan-reason {
    max-width: 42rem;
    color: var(--ft-ui-text-muted) !important;
    line-height: 1.65;
}

#pack-selection #learning-plan-progress,
#pack-selection #core-route-current {
    color: var(--ft-ui-flow-strong) !important;
}

#pack-selection #progress-summary,
#pack-selection #key-mastery-summary,
#pack-selection #review-health-summary,
#pack-selection #trend-summary {
    color: var(--ft-ui-text-muted) !important;
}

#pack-selection #start-learning-plan-btn {
    min-width: 10rem;
    min-height: 48px;
    border: 1px solid var(--ft-ui-primary);
    background: var(--ft-ui-primary) !important;
    color: var(--ft-ui-primary-ink) !important;
    box-shadow: none !important;
}

#pack-selection #start-learning-plan-btn:hover:not(:disabled) {
    border-color: var(--ft-ui-primary-hover);
    background: var(--ft-ui-primary-hover) !important;
    transform: translateY(-1px);
}

#pack-selection #start-learning-plan-btn:disabled {
    cursor: wait;
    opacity: .5;
}

#pack-selection main > section:not([aria-labelledby="today-heading"]) {
    margin-bottom: 0 !important;
    padding: 1.5rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ft-ui-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pack-selection main > section:not([aria-labelledby="today-heading"]) h2 {
    color: var(--ft-ui-text-strong) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

#pack-selection main > details {
    margin-bottom: 2rem !important;
    border: 0 !important;
    border-block: 1px solid var(--ft-ui-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pack-selection #core-route-details > summary,
#pack-selection main > details:last-child > summary {
    min-height: 64px;
    padding: 1rem 0 !important;
    color: var(--ft-ui-text-strong) !important;
}

#pack-selection #core-route-list,
#pack-selection main > details:last-child > div {
    border-color: var(--ft-ui-border) !important;
    padding: 1rem 0 !important;
}

#pack-selection #core-route-list > button,
#pack-selection #free-practice-list > button {
    position: relative;
    min-height: 60px;
    border: 0 !important;
    border-top: 1px solid var(--ft-ui-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
    box-shadow: none;
}

#pack-selection #core-route-list > button.border-cyan-400 {
    padding-left: 2.5rem;
    color: var(--ft-ui-text-strong) !important;
}

#pack-selection #core-route-list > button.border-cyan-400::before {
    position: absolute;
    top: 50%;
    left: .25rem;
    width: 1.5rem;
    height: 2px;
    background: var(--ft-ui-flow);
    content: "";
    transform: translateY(-50%);
}

#pack-selection #core-route-list > button:hover,
#pack-selection #free-practice-list > button:hover {
    color: var(--ft-ui-text-strong) !important;
    background: var(--ft-ui-surface) !important;
}

#pack-selection #start-review-btn,
#pack-selection #switch-user-btn {
    border: 1px solid var(--ft-ui-border-strong) !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
    box-shadow: none;
}

#pack-selection #start-review-btn {
    border-color: color-mix(in srgb, var(--ft-ui-warning) 58%, var(--ft-ui-border)) !important;
    color: var(--ft-ui-warning) !important;
}

#pack-selection #start-review-btn:hover,
#pack-selection #switch-user-btn:hover {
    background: var(--ft-ui-surface) !important;
    color: var(--ft-ui-text-strong) !important;
}

#pack-selection :is(#start-placement-btn, #start-reinforcement-btn, #manage-packages-btn) {
    padding-inline: .2rem;
    background: transparent !important;
    color: var(--ft-ui-text-muted) !important;
    box-shadow: none;
}

#pack-selection :is(#start-placement-btn, #start-reinforcement-btn, #manage-packages-btn):hover {
    color: var(--ft-ui-text-strong) !important;
}

/* Lesson catalog */
#lesson-list {
    --lesson-bg: var(--ft-ui-bg);
    --lesson-surface: var(--ft-ui-surface);
    --lesson-surface-raised: var(--ft-ui-surface-raised);
    --lesson-border: var(--ft-ui-border);
    --lesson-text: var(--ft-ui-text-strong);
    --lesson-muted: var(--ft-ui-text-muted);
    --lesson-subtle: var(--ft-ui-text-subtle);
    --lesson-accent: var(--ft-ui-flow);
    --lesson-accent-soft: transparent;
    --lesson-success: var(--ft-ui-success);
    --lesson-warning: var(--ft-ui-warning);
    padding-top: clamp(5rem, 10vh, 7rem);
}

#lesson-list .lesson-page-shell {
    gap: clamp(2rem, 4vw, 3.5rem);
}

#lesson-list .lesson-page-header {
    position: relative;
    padding-bottom: 1.5rem;
}

#lesson-list .lesson-page-header::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--ft-ui-flow);
    content: "";
}

#lesson-list #lesson-list-title {
    color: var(--ft-ui-text-strong) !important;
    font-weight: 600;
}

#lesson-list .lesson-page-context {
    display: inline-flex;
    max-width: 100%;
    margin: .65rem 0 0;
    padding: .35rem .65rem;
    border: 1px solid var(--ft-ui-border-strong);
    border-radius: 999px;
    color: var(--ft-ui-flow-strong) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
}

#lesson-list .lesson-page-intro {
    max-width: 48rem;
    color: var(--ft-ui-text-muted) !important;
    line-height: 1.7;
}

#lesson-list #pack-stats-display {
    overflow: visible;
    border: 0;
    border-block: 1px solid var(--ft-ui-border);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

#lesson-list .lesson-stats-grid {
    gap: 0;
    background: transparent;
}

#lesson-list .lesson-stat {
    padding: 1.1rem;
    background: transparent;
}

#lesson-list .lesson-stat + .lesson-stat {
    border-left: 1px solid var(--ft-ui-border);
}

#lesson-list .lesson-stat-value {
    color: var(--ft-ui-text-strong) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

#lesson-list .lesson-stat-label {
    color: var(--ft-ui-text-muted) !important;
}

#lesson-list #lesson-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

#lesson-list .lesson-card {
    gap: 1rem;
    padding: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--ft-ui-border);
    border-radius: 0;
    background: transparent !important;
    color: var(--ft-ui-text);
    box-shadow: none;
    opacity: 1;
    animation: none;
    transition: background-color 160ms ease, color 160ms ease;
}

#lesson-list .lesson-card:last-child {
    border-bottom: 1px solid var(--ft-ui-border);
}

#lesson-list .lesson-card:hover {
    border-color: var(--ft-ui-border);
    background: var(--ft-ui-surface) !important;
    box-shadow: none;
    transform: none;
}

#lesson-list .lesson-card-title {
    color: var(--ft-ui-text-strong);
    font-weight: 600;
}

#lesson-list .lesson-card-kicker,
#lesson-list .lesson-card-objective {
    color: var(--ft-ui-text-muted);
}

#lesson-list .lesson-card-count,
#lesson-list .lesson-card-meta {
    color: var(--ft-ui-text-subtle) !important;
}

#lesson-list .lesson-status {
    position: relative;
    min-height: 44px;
    padding: .65rem .75rem .65rem 2.75rem;
    border-radius: 0;
    background: transparent !important;
}

#lesson-list .lesson-status::before {
    position: absolute;
    top: 50%;
    left: .75rem;
    width: 1.25rem;
    height: 2px;
    background: currentColor;
    content: "";
    transform: translateY(-50%);
}

#lesson-list .lesson-status-icon {
    display: none;
}

#lesson-list .lesson-status-start {
    color: var(--ft-ui-flow-strong) !important;
}

#lesson-list .lesson-status-progress {
    color: var(--ft-ui-warning) !important;
}

#lesson-list .lesson-status-complete {
    color: var(--ft-ui-success) !important;
}

#lesson-list .lesson-status-start::before,
#lesson-list .lesson-status-progress::before,
#lesson-list .lesson-status-complete::before {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

#lesson-list .lesson-status-start::before { content: '→'; }
#lesson-list .lesson-status-progress::before { content: '•'; }
#lesson-list .lesson-status-complete::before { content: '✓'; }

.status-success::before,
.status-error::before {
    display: inline-grid;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    margin-inline-end: .35em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .8em;
    font-weight: 800;
    content: '';
}

.status-success::before { content: '✓'; }
.status-error::before { content: '!'; }

#lesson-list .lesson-back-btn {
    border-color: var(--ft-ui-border);
    background: transparent !important;
    color: var(--ft-ui-text-muted) !important;
}

#lesson-list .lesson-back-btn:hover {
    border-color: var(--ft-ui-border-strong);
    background: var(--ft-ui-surface) !important;
    color: var(--ft-ui-text-strong) !important;
}

/* Course manager */
#package-manager {
    gap: 1.5rem;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

#package-manager > div:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ft-ui-border);
}

#package-manager h1 {
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.045em;
}

#package-manager h2,
#package-manager h3 {
    color: var(--ft-ui-text-strong) !important;
    font-weight: 600 !important;
    letter-spacing: -.025em;
}

#package-manager > .grid {
    gap: 0 !important;
}

#package-manager > .grid > div {
    padding: 1.5rem !important;
    border: 0;
    border-top: 1px solid var(--ft-ui-border);
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

#package-manager > .grid > div + div {
    border-left: 1px solid var(--ft-ui-border);
}

#package-manager #lesson-modal {
    background: var(--ft-ui-overlay) !important;
}

#package-manager #lesson-modal > div {
    border: 1px solid var(--ft-ui-border-strong);
    border-radius: .75rem !important;
    background: var(--ft-ui-surface) !important;
    box-shadow: var(--ft-ui-shadow);
}

#package-manager :is(input, select, textarea) {
    min-height: 44px;
    border: 1px solid var(--ft-ui-border-strong) !important;
    background: var(--ft-ui-surface) !important;
    color: var(--ft-ui-text-strong) !important;
}

#package-manager :is(input, textarea)::placeholder {
    color: var(--ft-ui-text-subtle);
    opacity: 1;
}

#package-manager :is(
    #back-to-packs-from-manager,
    #generate-smart-package,
    #add-lesson,
    #cancel-lesson,
    #close-lesson-modal
) {
    border: 1px solid var(--ft-ui-border-strong) !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
    box-shadow: none;
}

#package-manager :is(#create-new-package, #save-package, #save-lesson) {
    border: 1px solid var(--ft-ui-primary) !important;
    background: var(--ft-ui-primary) !important;
    color: var(--ft-ui-primary-ink) !important;
    box-shadow: none;
}

#package-manager :is(#create-new-package, #save-package, #save-lesson):hover {
    border-color: var(--ft-ui-primary-hover) !important;
    background: var(--ft-ui-primary-hover) !important;
}

#package-manager:has(#save-package:not(.hidden)) #create-new-package {
    border-color: var(--ft-ui-border-strong) !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
}

#package-manager :is(.bg-red-600, .text-red-400, .text-red-500) {
    border-color: color-mix(in srgb, var(--ft-ui-danger) 58%, var(--ft-ui-border)) !important;
    background: transparent !important;
    color: var(--ft-ui-danger) !important;
}

/* Result */
#stats-modal {
    position: fixed;
    padding: clamp(1rem, 3vw, 2rem);
    background: var(--ft-ui-overlay) !important;
}

#stats-modal .result-card {
    width: min(100%, 44rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: clamp(1.5rem, 4vw, 2.75rem) !important;
    border: 1px solid var(--ft-ui-border-strong) !important;
    border-radius: .75rem !important;
    background: var(--ft-ui-surface) !important;
    color: var(--ft-ui-text);
    box-shadow: var(--ft-ui-shadow) !important;
    text-align: left !important;
    scrollbar-color: var(--ft-ui-border-strong) transparent;
}

#stats-modal .result-heading {
    position: relative;
    display: grid;
    gap: .65rem;
    max-width: 36rem;
    padding-top: 1.25rem;
}

#stats-modal .result-heading::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--ft-ui-flow);
    content: "";
}

#stats-modal .result-eyebrow {
    display: none;
}

#stats-modal #modal-title {
    margin: 0 !important;
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(2.1rem, 6vw, 3.5rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.055em;
    line-height: 1.04;
}

#stats-modal #modal-subtitle {
    margin: 0 !important;
    color: var(--ft-ui-text-muted) !important;
    font-size: 1rem !important;
    line-height: 1.65;
    white-space: pre-line;
}

#stats-modal .result-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    margin: clamp(1.75rem, 4vw, 2.75rem) 0 !important;
    overflow: visible;
    border: 0;
    border-block: 1px solid var(--ft-ui-border);
    border-radius: 0;
    background: transparent;
}

#stats-modal .result-metric {
    min-width: 0;
    padding: 1.15rem 1rem;
    background: transparent;
}

#stats-modal .result-metric + .result-metric {
    border-left: 1px solid var(--ft-ui-border);
}

#stats-modal .result-metric > p:first-child {
    margin: 0 0 .6rem;
    color: var(--ft-ui-text-muted) !important;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
}

#stats-modal .result-metric > p:last-child {
    margin: 0;
    color: var(--ft-ui-text-strong) !important;
    font-size: clamp(1.75rem, 4vw, 2.45rem) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600 !important;
    letter-spacing: -.045em;
    line-height: 1;
}

#stats-modal #weak-chars-section,
#stats-modal #review-result-list {
    margin-bottom: 1.5rem !important;
    padding: 1rem 0;
    border: 0;
    border-block: 1px solid var(--ft-ui-border);
    border-radius: 0;
    background: transparent;
}

#stats-modal #weak-chars-section h3,
#stats-modal #review-result-list .ui-text-strong {
    color: var(--ft-ui-text-strong) !important;
}

#stats-modal #weak-chars-display {
    justify-content: flex-start;
    padding: .75rem 0 !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
}

#stats-modal .result-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
}

#stats-modal .result-actions > button {
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: .75rem 1rem !important;
    border: 1px solid var(--ft-ui-border-strong) !important;
    border-radius: .5rem !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    box-shadow: none !important;
    transform: none !important;
}

#stats-modal .result-actions > button[data-default-action="true"] {
    border-color: var(--ft-ui-primary) !important;
    background: var(--ft-ui-primary) !important;
    color: var(--ft-ui-primary-ink) !important;
}

#stats-modal .result-actions > button:not([data-default-action="true"]) {
    border-color: var(--ft-ui-border-strong) !important;
    background: transparent !important;
    color: var(--ft-ui-text) !important;
}

#stats-modal :is(#reinforce-btn, #course-reinforce-btn, #next-lesson-btn) {
    order: -3;
}

#stats-modal #restart-btn {
    order: -2;
}

#stats-modal #change-level-btn {
    order: 3;
}

#stats-modal .result-actions > button:hover {
    border-color: var(--ft-ui-border-strong) !important;
    background: var(--ft-ui-surface-raised) !important;
    color: var(--ft-ui-text-strong) !important;
}

#stats-modal .result-actions > button[data-default-action="true"]:hover {
    border-color: var(--ft-ui-primary-hover) !important;
    background: var(--ft-ui-primary-hover) !important;
    color: var(--ft-ui-primary-ink) !important;
}

#stats-modal .result-actions > button:not([data-default-action="true"]):hover {
    border-color: var(--ft-ui-border-strong) !important;
    background: var(--ft-ui-surface-raised) !important;
    color: var(--ft-ui-text-strong) !important;
}

#stats-modal #keyboard-hint {
    margin-top: 1rem !important;
    color: var(--ft-ui-text-subtle) !important;
    font-size: .8rem;
    text-align: left;
}

#stats-modal #keyboard-hint kbd {
    border: 1px solid var(--ft-ui-border);
    background: var(--ft-ui-surface-raised) !important;
    color: var(--ft-ui-text-strong) !important;
}

@media (min-width: 900px) {
    #pack-selection main {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
        row-gap: 0;
        align-content: start;
    }

    #pack-selection main > header,
    #pack-selection main > section[aria-labelledby="today-heading"],
    #pack-selection main > details {
        grid-column: 1 / -1;
    }

    #pack-selection #progress-details > div > section {
        min-width: 0;
    }

    #pack-selection #progress-details > div > section + section {
        padding-left: clamp(1.5rem, 3vw, 2.5rem) !important;
        border-left: 1px solid var(--ft-ui-border) !important;
    }
}

@media (max-width: 899px) {
    #pack-selection main {
        padding-top: 5rem !important;
    }

    #package-manager > .grid {
        overflow-y: auto;
    }

    #package-manager > .grid > div + div {
        border-left: 0;
    }
}

@media (max-width: 640px) {
    #user-screen > div {
        justify-content: flex-start;
        padding-top: 12vh;
    }

    #user-screen h1 {
        align-self: flex-start;
    }

    #user-screen #user-list {
        grid-template-columns: 1fr;
    }

    #pack-selection > .absolute {
        position: static;
        width: 100%;
        justify-content: flex-end;
        align-self: stretch;
    }

    #pack-selection #user-stats-display {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    #pack-selection #user-stats-display p:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #pack-selection #switch-user-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #pack-selection main {
        padding-top: 2rem !important;
    }

    #pack-selection main > header {
        margin-bottom: 2.5rem !important;
    }

    #pack-selection main > section[aria-labelledby="today-heading"] > div {
        align-items: stretch;
    }

    #pack-selection #start-learning-plan-btn {
        width: 100%;
    }

    #pack-selection main > section[aria-labelledby="mastery-heading"] > div,
    #pack-selection main > section[aria-labelledby="review-health-heading"] > div,
    #pack-selection main > section[aria-labelledby="trend-heading"] > div {
        align-items: flex-start;
        flex-direction: column;
    }

    #lesson-list .lesson-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #lesson-list .lesson-page-shell {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    #lesson-list .lesson-stat:nth-child(odd) {
        border-left: 0;
    }

    #lesson-list .lesson-stat:nth-child(n + 3) {
        border-top: 1px solid var(--ft-ui-border);
    }

    #package-manager {
        overflow-y: auto;
    }

    #package-manager > div:first-child {
        align-items: flex-start;
        gap: 1rem;
    }

    #package-manager .flex.gap-4 {
        flex-direction: column;
        gap: .75rem;
    }

    #stats-modal {
        align-items: flex-end;
        padding: max(.75rem, env(safe-area-inset-top)) .75rem 0;
    }

    #stats-modal .result-card {
        width: 100%;
        max-height: calc(100dvh - max(.75rem, env(safe-area-inset-top)));
        padding: 1.5rem 1.25rem max(1.5rem, env(safe-area-inset-bottom)) !important;
        border-bottom: 0 !important;
        border-radius: .75rem .75rem 0 0 !important;
    }

    #stats-modal .result-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-block: 1.5rem !important;
    }

    #stats-modal .result-metric:nth-child(odd) {
        border-left: 0;
    }

    #stats-modal .result-metric:nth-child(n + 3) {
        border-top: 1px solid var(--ft-ui-border);
    }

    #stats-modal .result-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    #stats-modal .result-actions > button {
        min-height: 48px;
    }
}

@media (max-width: 390px) {
    #pack-selection {
        padding-inline: .75rem;
    }

    #pack-selection main > section[aria-labelledby="today-heading"] {
        padding: 1.25rem !important;
    }

    #stats-modal {
        padding-inline: .5rem;
    }

    #stats-modal .result-card {
        padding-inline: 1rem !important;
    }

    #stats-modal .result-actions {
        grid-template-columns: 1fr;
    }

    #stats-modal .result-actions > button {
        width: 100%;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(#user-screen, #pack-selection, #package-manager, #lesson-list, #stats-modal, .product-quick-preferences)
        :is(button, input, select, textarea),
    #lesson-list .lesson-card {
        transition: none !important;
    }
}