.theme-dark {
    color-scheme: dark;
    --background: #0f1413;
    --background-warm: #121918;
    --card: #161f1d;
    --card-soft: #192522;
    --text: #f3f7f5;
    --text-soft: #c8d2ce;
    --muted: #94a3a0;
    --muted-2: #6f7e7a;
    --border: rgba(230, 245, 240, .10);
    --border-strong: rgba(230, 245, 240, .18);
    --primary: #4fd1c5;
    --primary-dark: #8ee8dd;
    --primary-soft: rgba(79, 209, 197, .14);
    --danger: #ff7a66;
    --danger-soft: rgba(255, 122, 102, .13);
    --success: #77d69a;
    --success-soft: rgba(119, 214, 154, .14);
    --warning: #f0c36a;
    --warning-soft: rgba(240, 195, 106, .14);
    --gold: #d8b35f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .28);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .38), 0 18px 44px rgba(0, 0, 0, .34);
}

.theme-dark body {
    background:
        radial-gradient(circle at top left, rgba(79, 209, 197, .12), transparent 32rem),
        linear-gradient(180deg, var(--background-warm), var(--background));
    color: var(--text);
}

.theme-dark a:focus-visible,
.theme-dark button:focus-visible,
.theme-dark input:focus-visible,
.theme-dark textarea:focus-visible {
    outline-color: rgba(79, 209, 197, .34);
}

.theme-dark .topbar,
.theme-dark .site-footer {
    border-color: var(--border);
    background: rgba(18, 25, 24, .82);
    backdrop-filter: blur(14px);
    color: var(--muted);
}

.theme-dark .brand {
    color: var(--text);
}

.theme-dark .brand::before {
    background: var(--primary);
    color: #071312;
    box-shadow: 0 8px 20px rgba(79, 209, 197, .18);
}

.theme-dark .site-footer a,
.theme-dark a {
    color: var(--primary-dark);
}

.theme-dark .nav a,
.theme-dark .link-button {
    color: var(--muted);
}

.theme-dark .nav a:hover,
.theme-dark .link-button:hover {
    color: var(--text);
    background: rgba(230, 245, 240, .06);
}

.theme-dark .nav a.active,
.theme-dark .nav-primary,
.theme-dark .nav-primary.active,
.theme-dark .theme-toggle {
    color: var(--primary-dark) !important;
    background: var(--primary-soft);
    border-color: rgba(79, 209, 197, .18);
}

.theme-dark .theme-toggle[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #071312;
}

.theme-dark .button.primary,
.theme-dark .small-button {
    background: var(--primary);
    color: #071312;
    box-shadow: 0 10px 24px rgba(79, 209, 197, .18);
}

.theme-dark .button.primary:hover,
.theme-dark .small-button:hover {
    background: var(--primary-dark);
    color: #071312;
}

.theme-dark .button.secondary,
.theme-dark .button.ghost,
.theme-dark .small-button.secondary {
    background: rgba(22, 31, 29, .72);
    border-color: var(--border-strong);
    color: var(--text);
}

.theme-dark .button.secondary:hover,
.theme-dark .button.ghost:hover {
    background: rgba(230, 245, 240, .07);
    color: var(--text);
}

.theme-dark .auth-panel,
.theme-dark .panel,
.theme-dark .quiz,
.theme-dark .result,
.theme-dark .split article,
.theme-dark .card,
.theme-dark .landing-card,
.theme-dark .why-card,
.theme-dark .jlpt-realism-card,
.theme-dark .how-card,
.theme-dark .preview-card,
.theme-dark .bottom-cta,
.theme-dark .blog-card,
.theme-dark .blog-article,
.theme-dark .help-card,
.theme-dark .help-topic-card,
.theme-dark .help-contact-card,
.theme-dark .settings-card,
.theme-dark .danger-settings-section,
.theme-dark .dashboard-stats-panel,
.theme-dark .dashboard-stat-card,
.theme-dark .dashboard-insight-card,
.theme-dark .dashboard-progress-card,
.theme-dark .hero-card,
.theme-dark .hero-action-card,
.theme-dark .limit-card,
.theme-dark .pricing-card,
.theme-dark .subscription-hero,
.theme-dark .subscription-terms-card,
.theme-dark .comparison-table-wrap,
.theme-dark .admin-wide-panel {
    border-color: var(--border);
    background: rgba(22, 31, 29, .92);
    box-shadow: var(--shadow);
}

.theme-dark .card:hover,
.theme-dark .panel:hover,
.theme-dark .blog-card:hover,
.theme-dark .help-card:hover,
.theme-dark .hero-action-card:hover,
.theme-dark .pricing-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}

.theme-dark .hero-card,
.theme-dark .subscription-hero,
.theme-dark .training-action-card {
    background:
        radial-gradient(circle at top right, rgba(79, 209, 197, .13), transparent 22rem),
        rgba(22, 31, 29, .94);
}

.theme-dark .review-action-card,
.theme-dark .danger-card,
.theme-dark .result.wrong {
    background:
        radial-gradient(circle at top right, rgba(255, 122, 102, .12), transparent 22rem),
        rgba(22, 31, 29, .94);
}

.theme-dark .result.correct {
    background:
        radial-gradient(circle at top right, rgba(119, 214, 154, .12), transparent 22rem),
        rgba(22, 31, 29, .94);
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
    background: rgba(10, 16, 15, .72);
    color: var(--text);
    border-color: var(--border);
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
    color: var(--muted-2);
}

.theme-dark .answer-button,
.theme-dark .level-button {
    background: rgba(22, 31, 29, .9);
    border-color: var(--border);
    color: var(--text);
}

.theme-dark .answer-button:hover,
.theme-dark .level-button:hover {
    border-color: rgba(79, 209, 197, .42);
    background: rgba(79, 209, 197, .08);
}

.theme-dark .answer-button.correct-option {
    border-color: rgba(119, 214, 154, .48);
    background: var(--success-soft);
    box-shadow: 0 0 0 4px rgba(119, 214, 154, .08);
}

.theme-dark .answer-button.selected-wrong-option {
    border-color: rgba(255, 122, 102, .5);
    background: var(--danger-soft);
    box-shadow: 0 0 0 4px rgba(255, 122, 102, .08);
}

.theme-dark .answer-button.muted-option {
    background: rgba(230, 245, 240, .04);
    opacity: .62;
}

.theme-dark .quiz-status-bar,
.theme-dark .debug-meta,
.theme-dark .example-usage,
.theme-dark .word-facts {
    border-color: var(--border);
    background: rgba(10, 16, 15, .52);
}

.theme-dark .example-usage {
    border-left-color: var(--primary);
}

.theme-dark .badge,
.theme-dark .level-badge,
.theme-dark .answer-hotkey,
.theme-dark .error-count-badge,
.theme-dark .recommended-badge,
.theme-dark .pricing-card-head em,
.theme-dark .quiz-status-main span,
.theme-dark .quiz-status-main strong,
.theme-dark .quiz-limit-count,
.theme-dark .hero-level-button,
.theme-dark .segmented-control button {
    background: rgba(79, 209, 197, .12);
    border-color: rgba(79, 209, 197, .18);
    color: var(--primary-dark);
}

.theme-dark .recommended-badge {
    background: rgba(240, 195, 106, .16);
    border-color: rgba(240, 195, 106, .28);
    color: #f3d28a;
}

.theme-dark .premium-locked-card {
    background: rgba(240, 195, 106, .12) !important;
    border-color: rgba(240, 195, 106, .28) !important;
}

.theme-dark .premium-locked-card strong,
.theme-dark .premium-locked-card small,
.theme-dark .premium-lock-label {
    color: #f3d28a;
}

.theme-dark .mini-progress,
.theme-dark .progress-track,
.theme-dark .quiz-limit-track,
.theme-dark .accuracy-bar {
    background: rgba(230, 245, 240, .08);
}

.theme-dark .mini-progress span,
.theme-dark .progress-track span,
.theme-dark .quiz-limit-track span,
.theme-dark .accuracy-bar span {
    background: linear-gradient(90deg, var(--primary), var(--success));
}

.theme-dark .comparison-table th,
.theme-dark .comparison-table td {
    border-color: var(--border);
}

.theme-dark .comparison-table thead th {
    background: rgba(230, 245, 240, .05);
    color: var(--text-soft);
}

.theme-dark .comparison-table tbody th,
.theme-dark .comparison-table td {
    color: var(--text-soft);
}

.theme-dark .comparison-table td:last-child {
    background: rgba(79, 209, 197, .07);
    color: var(--primary-dark);
}

.theme-dark .flash {
    border-color: var(--border);
    background: rgba(22, 31, 29, .94);
}

.theme-dark .flash.error {
    background: var(--danger-soft);
    color: #ffb0a3;
}

.theme-dark .flash.success {
    background: var(--success-soft);
    color: #a6e8bd;
}

.theme-dark .flash.warning {
    background: var(--warning-soft);
    color: #f3d28a;
}

.theme-dark .empty-state,
.theme-dark .subscription-warning,
.theme-dark .landing-quiz-preview,
.theme-dark .landing-preview-card,
.theme-dark .landing-toast,
.theme-dark .preview-answer,
.theme-dark .preview-result,
.theme-dark .preview-progress {
    border-color: var(--border);
    background: rgba(22, 31, 29, .88);
    color: var(--text);
}

.theme-dark .landing-quiz-preview img,
.theme-dark .landing-mascot {
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, .36));
}

.theme-dark .danger-settings-section {
    background: rgba(255, 122, 102, .08);
}

.theme-dark .blog-hero-image,
.theme-dark .blog-toc,
.theme-dark .blog-faq,
.theme-dark .blog-related,
.theme-dark .blog-cta,
.theme-dark .faq-item,
.theme-dark .help-contact-form,
.theme-dark .feedback-item,
.theme-dark .stats-level-filter,
.theme-dark .inline-result,
.theme-dark .limit-summary,
.theme-dark .limit-countdown,
.theme-dark .limit-premium-note,
.theme-dark .dashboard-progress-card,
.theme-dark .progress-distribution,
.theme-dark .progress-legend div,
.theme-dark .insight-word-list li,
.theme-dark .contact-facts div {
    border-color: var(--border);
    background: rgba(22, 31, 29, .92);
    color: var(--text);
    box-shadow: var(--shadow);
}

.theme-dark .blog-toc,
.theme-dark .blog-faq,
.theme-dark .blog-related,
.theme-dark .faq-item {
    background: rgba(22, 31, 29, .94);
}

.theme-dark .blog-faq details {
    border-color: var(--border);
}

.theme-dark .blog-toc a,
.theme-dark .blog-faq a,
.theme-dark .blog-related a,
.theme-dark .faq-item a {
    color: var(--primary-dark);
}

.theme-dark .blog-toc a:hover,
.theme-dark .blog-faq a:hover,
.theme-dark .blog-related a:hover,
.theme-dark .faq-item a:hover {
    color: var(--primary);
}

.theme-dark .blog-cta,
.theme-dark .limit-countdown,
.theme-dark .help-contact-section {
    border-color: rgba(79, 209, 197, .20);
    background:
        linear-gradient(180deg, rgba(79, 209, 197, .10), rgba(22, 31, 29, .94));
}

.theme-dark .limit-countdown strong,
.theme-dark .help-contact-copy .eyebrow {
    color: var(--primary-dark);
}

.theme-dark .limit-countdown span,
.theme-dark .limit-summary div,
.theme-dark .limit-premium-note p,
.theme-dark .blog-faq p,
.theme-dark .blog-cta p,
.theme-dark .faq-item p,
.theme-dark .contact-facts span,
.theme-dark .feedback-meta,
.theme-dark .stats-level-filter > span {
    color: var(--muted);
}

.theme-dark .contact-facts a,
.theme-dark .contact-facts strong,
.theme-dark .feedback-meta strong {
    color: var(--text);
}

.theme-dark .help-contact-guest input,
.theme-dark .help-contact-guest textarea {
    background: rgba(10, 16, 15, .72);
}

.theme-dark .inline-result {
    background:
        linear-gradient(180deg, rgba(22, 31, 29, .96), rgba(18, 27, 25, .96));
    border-color: rgba(79, 209, 197, .18);
    box-shadow: var(--shadow);
}

.theme-dark .inline-result h2,
.theme-dark .inline-result p,
.theme-dark .word-facts dd,
.theme-dark .word-facts dt {
    color: var(--text);
}

.theme-dark .word-facts div,
.theme-dark .debug-meta span,
.theme-dark .progress-legend div,
.theme-dark .insight-word-list li {
    border-color: var(--border);
    background: rgba(10, 16, 15, .42);
    color: var(--text-soft);
}

.theme-dark .debug-meta .debug-warning {
    border-color: rgba(240, 195, 106, .22);
    background: var(--warning-soft);
    color: #f3d28a;
}

.theme-dark .example-usage {
    background: rgba(79, 209, 197, .08);
    border-left-color: rgba(79, 209, 197, .55);
}

.theme-dark .example-jp {
    color: var(--text);
}

.theme-dark .example-reading {
    color: var(--muted);
}

.theme-dark .example-ru {
    color: var(--text-soft);
}

.theme-dark .progress-distribution,
.theme-dark .quiz-limit-track,
.theme-dark .mini-progress,
.theme-dark .progress-line {
    background: rgba(230, 245, 240, .08);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .28);
}

.theme-dark .progress-distribution {
    box-shadow: none;
}

.theme-dark .progress-legend strong,
.theme-dark .insight-word-list strong,
.theme-dark .insight-category {
    color: var(--text);
}

.theme-dark .insight-word-list small,
.theme-dark .dashboard-insight-card small,
.theme-dark .dashboard-insight-card p,
.theme-dark .progress-legend small {
    color: var(--muted);
}

.theme-dark .error-count-badge {
    background: var(--warning-soft);
    color: #f3d28a;
}

.theme-dark .comparison-table-wrap {
    background: rgba(22, 31, 29, .92);
}

.theme-dark .comparison-table td:last-child {
    background: rgba(79, 209, 197, .08);
}

.theme-dark .level-card,
.theme-dark .goal-card,
.theme-dark .remaining-card {
    background:
        linear-gradient(180deg, rgba(79, 209, 197, .09), rgba(22, 31, 29, .94));
}

.theme-dark .streak-card {
    background:
        linear-gradient(180deg, rgba(240, 195, 106, .12), rgba(22, 31, 29, .94));
}

.theme-dark .success-card {
    background:
        linear-gradient(180deg, rgba(119, 214, 154, .12), rgba(22, 31, 29, .94));
}

.theme-dark .danger-card {
    background:
        linear-gradient(180deg, rgba(255, 122, 102, .12), rgba(22, 31, 29, .94));
}

.theme-dark .empty-card,
.theme-dark .card.locked {
    background: rgba(10, 16, 15, .42);
    border-color: var(--border);
}

.theme-dark .badge {
    color: var(--text-soft);
}

.theme-dark .landing-bottom-cta,
.theme-dark .dashboard-hero,
.theme-dark .dashboard-head {
    border-color: var(--border);
    background:
        radial-gradient(circle at top right, rgba(79, 209, 197, .12), transparent 24rem),
        rgba(22, 31, 29, .94);
    color: var(--text);
    box-shadow: var(--shadow);
}

.theme-dark .dashboard-head {
    background: transparent;
    box-shadow: none;
}

.theme-dark .speech-bubble,
.theme-dark .hero-level-selector,
.theme-dark .hero-action-card {
    border-color: var(--border);
    background: rgba(10, 16, 15, .46);
    color: var(--text);
}

.theme-dark .training-action-card {
    background:
        linear-gradient(180deg, rgba(79, 209, 197, .12), rgba(10, 16, 15, .46));
}

.theme-dark .review-action-card {
    background:
        linear-gradient(180deg, rgba(240, 195, 106, .10), rgba(10, 16, 15, .46));
}

.theme-dark .landing-bottom-cta li,
.theme-dark .landing-bottom-cta p,
.theme-dark .hero-subtitle,
.theme-dark .hero-level-notice,
.theme-dark .hero-action-card span,
.theme-dark .hero-action-card p:not(.hero-panel-title) {
    color: var(--text-soft);
}

.theme-dark .landing-bottom-cta li span {
    background: var(--success-soft);
    color: #a6e8bd;
}

.theme-dark .hero-level-option {
    color: var(--muted);
}

.theme-dark .hero-level-option:hover {
    background: rgba(79, 209, 197, .10);
    color: var(--text);
}

.theme-dark .hero-level-option.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #071312;
    box-shadow: 0 8px 18px rgba(79, 209, 197, .18);
}

.theme-dark .hero-level-option.locked {
    background: rgba(230, 245, 240, .05);
    border-color: var(--border);
    color: var(--muted-2);
}

.theme-dark .hero-level-option.locked:hover,
.theme-dark .hero-level-option.locked:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.theme-retro {
    color-scheme: light;
    --background: #f8eedc;
    --background-warm: #fff5df;
    --card: #fff9e8;
    --card-soft: #fff2c9;
    --text: #111111;
    --text-soft: #302f38;
    --muted: #5d5870;
    --muted-2: #756f83;
    --border: #111111;
    --border-strong: #111111;
    --primary: #36c6f4;
    --primary-dark: #111111;
    --primary-soft: #ffe85d;
    --danger: #ff4da6;
    --danger-soft: #ffd6ec;
    --success: #00c875;
    --success-soft: #c5ffd9;
    --warning: #ffcc33;
    --warning-soft: #fff0a8;
    --gold: #ffe85d;
    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 6px 6px 0 #111111;
    --shadow-hover: 9px 9px 0 #111111;
    --card-padding: 20px;
    --dashboard-card-height: 136px;
    --dashboard-panel-min-height: 206px;
}

.theme-retro body {
    font-family: "Arial Black", "Arial Narrow", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .01em;
    background:
        radial-gradient(circle, rgba(17, 17, 17, .11) 1px, transparent 1.5px) 0 0 / 14px 14px,
        linear-gradient(135deg, rgba(255, 77, 166, .16), transparent 30%),
        linear-gradient(180deg, var(--background-warm), var(--background));
}

.theme-retro a:focus-visible,
.theme-retro button:focus-visible,
.theme-retro input:focus-visible,
.theme-retro textarea:focus-visible {
    outline: 4px solid #ffe85d;
    outline-offset: 3px;
}

.theme-retro .topbar,
.theme-retro .site-footer {
    border-color: #111111;
    border-width: 3px;
    background: #fff9e8;
    backdrop-filter: none;
    box-shadow: 0 4px 0 #111111;
}

.theme-retro .site-footer {
    border-right: 3px solid #111111;
    border-bottom: 0;
    border-left: 3px solid #111111;
    box-shadow: 0 -4px 0 #111111;
}

.theme-retro .brand {
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #36c6f4;
}

.theme-retro .brand::before {
    border: 3px solid #111111;
    border-radius: 4px;
    background: #36c6f4;
    color: #111111;
    box-shadow: 3px 3px 0 #111111;
}

.theme-retro .nav a,
.theme-retro .link-button,
.theme-retro .theme-toggle {
    min-height: 36px;
    border: 3px solid #111111;
    border-radius: 3px;
    background: #fff9e8;
    color: #111111;
    box-shadow: 3px 3px 0 #111111;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 950;
}

.theme-retro .nav a:hover,
.theme-retro .link-button:hover,
.theme-retro .theme-toggle:hover {
    background: #ffe85d;
    color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #111111;
}

.theme-retro .nav a.active,
.theme-retro .nav-primary,
.theme-retro .nav-primary.active,
.theme-retro .theme-toggle[aria-pressed="true"] {
    background: #36c6f4;
    border-color: #111111;
    color: #111111 !important;
    box-shadow: 4px 4px 0 #111111;
}

.theme-retro .button,
.theme-retro .small-button,
.theme-retro .level-button,
.theme-retro .answer-button {
    border: 3px solid #111111;
    border-radius: 4px;
    background: #fff9e8;
    color: #111111;
    box-shadow: 5px 5px 0 #111111;
    text-transform: uppercase;
    font-weight: 950;
}

.theme-retro .button.primary,
.theme-retro .small-button {
    background: #36c6f4;
    color: #111111;
}

.theme-retro .button.secondary {
    background: #fff9e8;
    color: #111111;
}

.theme-retro .button:hover,
.theme-retro .small-button:hover,
.theme-retro .level-button:hover,
.theme-retro .answer-button:hover {
    background: #ffe85d;
    border-color: #111111;
    color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #111111;
}

.theme-retro .button:active,
.theme-retro .small-button:active,
.theme-retro .level-button:active,
.theme-retro .answer-button:active {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 #111111;
}

.theme-retro .auth-panel,
.theme-retro .panel,
.theme-retro .quiz,
.theme-retro .result,
.theme-retro .split article,
.theme-retro .card,
.theme-retro .landing-card,
.theme-retro .why-card,
.theme-retro .landing-bottom-cta,
.theme-retro .how-card,
.theme-retro .blog-card,
.theme-retro .blog-toc,
.theme-retro .blog-faq,
.theme-retro .blog-related,
.theme-retro .blog-cta,
.theme-retro .faq-item,
.theme-retro .help-card,
.theme-retro .help-topic-card,
.theme-retro .help-contact-section,
.theme-retro .help-contact-form,
.theme-retro .contact-facts div,
.theme-retro .settings-card,
.theme-retro .danger-settings-section,
.theme-retro .feedback-item,
.theme-retro .dashboard-stats-panel,
.theme-retro .dashboard-stat-card,
.theme-retro .dashboard-insight-card,
.theme-retro .dashboard-progress-card,
.theme-retro .dashboard-hero,
.theme-retro .hero-card,
.theme-retro .hero-action-card,
.theme-retro .speech-bubble,
.theme-retro .hero-level-selector,
.theme-retro .limit-card,
.theme-retro .limit-summary,
.theme-retro .limit-countdown,
.theme-retro .limit-premium-note,
.theme-retro .pricing-card,
.theme-retro .subscription-hero,
.theme-retro .subscription-terms-card,
.theme-retro .comparison-table-wrap,
.theme-retro .inline-result,
.theme-retro .progress-legend div,
.theme-retro .insight-word-list li,
.theme-retro .stats-level-filter,
.theme-retro .admin-wide-panel {
    border: 3px solid #111111;
    border-radius: 6px;
    background: #fff9e8;
    box-shadow: var(--shadow);
}

.theme-retro .premium-locked-card {
    border: 3px dashed #111111 !important;
    background: #fff0a8 !important;
    box-shadow: 5px 5px 0 #111111;
}

.theme-retro .card:hover,
.theme-retro .panel:hover,
.theme-retro .blog-card:hover,
.theme-retro .help-card:hover,
.theme-retro .hero-action-card:hover,
.theme-retro .pricing-card:hover {
    border-color: #111111;
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hover);
}

.theme-retro .hero-card,
.theme-retro .subscription-hero,
.theme-retro .dashboard-hero,
.theme-retro .landing-bottom-cta,
.theme-retro .training-action-card {
    background:
        linear-gradient(90deg, rgba(54, 198, 244, .2), transparent 44%),
        #fff9e8;
}

.theme-retro .review-action-card,
.theme-retro .danger-card,
.theme-retro .result.wrong {
    background:
        linear-gradient(90deg, rgba(255, 77, 166, .18), transparent 48%),
        #fff9e8;
}

.theme-retro .speech-bubble,
.theme-retro .hero-level-selector,
.theme-retro .limit-countdown,
.theme-retro .blog-cta {
    background: #ffe85d;
    color: #111111;
}

.theme-retro .hero-level-option {
    border: 2px solid transparent;
    border-radius: 4px;
    color: #111111;
    text-transform: uppercase;
    font-weight: 950;
}

.theme-retro .hero-level-option:hover,
.theme-retro .hero-level-option.locked:hover,
.theme-retro .hero-level-option.locked:focus-visible {
    border-color: #111111;
    background: #ffe85d;
    color: #111111;
    box-shadow: 3px 3px 0 #111111;
}

.theme-retro .hero-level-option.active {
    border-color: #111111;
    background: #36c6f4;
    color: #111111;
    box-shadow: 3px 3px 0 #111111;
}

.theme-retro .hero-level-option.locked {
    border-color: #111111;
    background: #f0e4cb;
    color: #5d5870;
}

.theme-retro .landing-bottom-cta li,
.theme-retro .landing-bottom-cta p,
.theme-retro .hero-subtitle,
.theme-retro .hero-level-notice,
.theme-retro .hero-action-card span,
.theme-retro .hero-action-card p:not(.hero-panel-title),
.theme-retro .blog-faq p,
.theme-retro .blog-cta p,
.theme-retro .faq-item p,
.theme-retro .limit-summary div,
.theme-retro .limit-countdown span,
.theme-retro .limit-premium-note p {
    color: #302f38;
}

.theme-retro .landing-bottom-cta li span,
.theme-retro .limit-summary span,
.theme-retro .limit-premium-note span {
    border: 2px solid #111111;
    background: #c5ffd9;
    color: #111111;
    box-shadow: 2px 2px 0 #111111;
}

.theme-retro .debug-meta span {
    border: 2px solid #111111;
    border-radius: 3px;
    background: #fff9e8;
    color: #111111;
    box-shadow: 2px 2px 0 #111111;
}

.theme-retro .debug-meta .debug-warning,
.theme-retro .error-count-badge {
    background: #fff0a8;
    color: #111111;
}

.theme-retro .result.correct {
    background:
        linear-gradient(90deg, rgba(0, 200, 117, .18), transparent 48%),
        #fff9e8;
}

.theme-retro .answer-button {
    min-height: 72px;
    background: #fff9e8;
}

.theme-retro .answer-button.correct-option {
    border-color: #111111;
    background: #c5ffd9;
    box-shadow: 5px 5px 0 #00c875;
}

.theme-retro .answer-button.selected-wrong-option {
    border-color: #111111;
    background: #ffd6ec;
    box-shadow: 5px 5px 0 #ff4da6;
}

.theme-retro .answer-button.muted-option {
    opacity: .6;
    background: #f0e4cb;
}

.theme-retro .answer-hotkey,
.theme-retro .error-count-badge,
.theme-retro .badge,
.theme-retro .level-badge,
.theme-retro .recommended-badge,
.theme-retro .pricing-card-head em,
.theme-retro .quiz-status-main span,
.theme-retro .quiz-status-main strong,
.theme-retro .quiz-limit-count,
.theme-retro .hero-level-button,
.theme-retro .segmented-control button {
    border: 2px solid #111111;
    border-radius: 3px;
    background: #ffe85d;
    color: #111111;
    box-shadow: 2px 2px 0 #111111;
    text-transform: uppercase;
}

.theme-retro .badge.success,
.theme-retro .result-status.correct {
    color: #111111;
    background: #c5ffd9;
}

.theme-retro .error-count-badge,
.theme-retro .debug-meta .debug-warning {
    background: #fff0a8;
    color: #111111;
}

.theme-retro .result-status.wrong {
    color: #111111;
    background: #ffd6ec;
}

.theme-retro input,
.theme-retro textarea,
.theme-retro select {
    border: 3px solid #111111;
    border-radius: 4px;
    background: #fffdf3;
    color: #111111;
    box-shadow: inset 3px 3px 0 rgba(17, 17, 17, .08);
}

.theme-retro .quiz-status-bar,
.theme-retro .debug-meta,
.theme-retro .example-usage,
.theme-retro .word-facts,
.theme-retro .comparison-table th,
.theme-retro .comparison-table td {
    border-color: #111111;
}

.theme-retro .quiz-status-bar,
.theme-retro .example-usage {
    border-width: 3px;
    background: #fff9e8;
    box-shadow: 4px 4px 0 #111111;
}

.theme-retro .example-usage {
    border-left: 8px solid #36c6f4;
}

.theme-retro .comparison-table thead th,
.theme-retro .panel-heading,
.theme-retro .pricing-card.recommended {
    background: #ffe85d;
}

.theme-retro .comparison-table td:last-child,
.theme-retro .pricing-card.recommended {
    color: #111111;
}

.theme-retro .flash,
.theme-retro .empty-state,
.theme-retro .subscription-warning {
    border: 3px solid #111111;
    border-radius: 4px;
    box-shadow: 4px 4px 0 #111111;
}

.theme-retro .mini-progress,
.theme-retro .progress-track,
.theme-retro .quiz-limit-track {
    border: 2px solid #111111;
    background: #fff9e8;
}

.theme-retro .mini-progress span,
.theme-retro .progress-track span,
.theme-retro .quiz-limit-track span {
    background: #36c6f4;
}

.theme-retro h1,
.theme-retro h2,
.theme-retro h3,
.theme-retro .quiz-question,
.theme-retro .subscription-hero h1 {
    color: #111111;
    letter-spacing: .015em;
    text-shadow: 3px 3px 0 rgba(54, 198, 244, .65);
}

.theme-retro .site-footer .theme-toggle {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 1;
}

.theme-retro .site-footer .theme-toggle {
    border-width: 2px;
    border-radius: 3px;
    box-shadow: 2px 2px 0 #111111;
}

.theme-retro .site-footer .theme-toggle:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #111111;
}

.theme-retro .site-footer .theme-toggle[aria-pressed="true"] {
    background: #36c6f4;
    color: #111111;
}

.theme-retro .page-mascot {
    opacity: .9;
}