/* Shared controls; the default light appearance remains the established design. */
.theme-picker { position: relative; flex: 0 0 auto; z-index: 25; }
.theme-footer { padding: 22px 0; background: #eceff3; border-top: 1px solid #d8dce2; color: #3e5f9e; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 46px; padding: 10px 15px; border: 1px solid #d0d5dd; background: #f7f8fa; color: #466ba7; font: inherit; font-size: 16px; font-weight: 550; line-height: 1.5; cursor: pointer; }
.theme-toggle:hover { color: #203758; background: #fff; border-color: #a9b5c8; }
.theme-toggle-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; color: #707780; }
.theme-toggle-label { text-transform: none; padding: 0; }
.theme-toggle:focus-visible { outline: 2px solid #f05a18; outline-offset: 4px; }
.theme-panel { position: absolute; bottom: calc(100% + 12px); left: 0; width: 250px; max-width: calc(100vw - 32px); padding: 15px; color: #252525; background: #fff; border: 1px solid #d8dce2; box-shadow: 0 -6px 28px rgba(0,0,0,.25); text-align: left; }
.theme-panel[hidden] { display: none; }
.theme-panel-title { font-size: 13px; font-weight: 700; line-height: 1.5; padding: 0 4px; margin: 0 0 10px; }
.theme-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 5px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.theme-option:hover { background: #edf1f7; }
.theme-option input { margin: 0; accent-color: #f05a18; width: 16px; height: 16px; flex: 0 0 auto; }
.theme-option input:focus-visible { outline: 2px solid #f05a18; outline-offset: 3px; }
.theme-option svg { width: 19px; height: 19px; flex: 0 0 auto; color: #203758; }
.theme-auto-note { border-top: 1px solid #e0e3e8; padding: 11px 4px 0; margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: #5f6368; }

/* The illustration keeps its lettering; the real link gains a visible outline. */
.art-cta { z-index: 3; cursor: pointer; border: 2px solid #fff; border-radius: clamp(6px,1.1vw,14px); box-shadow: 0 0 0 2px rgba(32,55,88,.8), 0 4px 12px rgba(0,0,0,.25); transition: box-shadow .18s ease, background-color .18s ease; }
.art-cta:hover { background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px #f05a18, 0 4px 16px rgba(0,0,0,.4); }
.art-cta:focus-visible { outline: 3px solid #203758; outline-offset: 5px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1b2029;
  --ink: #edf2f8;
  --muted: #bec7d5;
  --line: #394457;
  --coral: #222c3c;
  --blue: #7898ce;
  --lime: #253046;
  --white: #1b2029;
}
html[data-theme="dark"] body { background: #12151b; color: #edf2f8; }
html[data-theme="dark"] .site-header { background: #181c24; }
html[data-theme="dark"] .header-contact { background: #46669f; color: #fff; }
html[data-theme="dark"] .header-contact:hover { background: #3c5d96; }
html[data-theme="dark"] .nav { background: #101319; }
html[data-theme="dark"] footer { background: #101319; border-color: #394457; }
html[data-theme="dark"] .hero > div:first-child,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .closing,
html[data-theme="dark"] .topic-list a,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card + .card,
html[data-theme="dark"] .reason-card,
html[data-theme="dark"] .lesson-next,
html[data-theme="dark"] .framework-note,
html[data-theme="dark"] .level-card { background: #1b2029; color: #edf2f8; }
html[data-theme="dark"] .offer,
html[data-theme="dark"] .levels-hero,
html[data-theme="dark"] .level-guidance { background: #202733; border-color: #394457; }
html[data-theme="dark"] .teacher-photo-frame { background: #1b2029; border-color: #394457; border-left-color: #7898ce; }
html[data-theme="dark"] .hero h1 { color: #edf2f8; }
html[data-theme="dark"] .hero h1 em,
html[data-theme="dark"] .hero .text-link,
html[data-theme="dark"] .section-heading em,
html[data-theme="dark"] .reason-heading,
html[data-theme="dark"] .reason-back,
html[data-theme="dark"] .lesson-next h2,
html[data-theme="dark"] .levels-inline-link,
html[data-theme="dark"] .levels-more,
html[data-theme="dark"] .levels-breadcrumb,
html[data-theme="dark"] .levels-hero h1,
html[data-theme="dark"] .framework-note h2,
html[data-theme="dark"] .framework-note a,
html[data-theme="dark"] .level-group-head h2,
html[data-theme="dark"] .level-card h3,
html[data-theme="dark"] .level-card h4,
html[data-theme="dark"] .level-guidance h2,
html[data-theme="dark"] .level-sources h2,
html[data-theme="dark"] .level-sources a,
html[data-theme="dark"] .objectives-link { color: #c6d9f7; }
html[data-theme="dark"] .reason-heading em { color: #c6d9f7 !important; }
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .hero .hero-copy,
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .intro-note,
html[data-theme="dark"] .intro-detail,
html[data-theme="dark"] .offer-note,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .lesson-next p,
html[data-theme="dark"] .levels-lead,
html[data-theme="dark"] .framework-note p,
html[data-theme="dark"] .examples-note,
html[data-theme="dark"] .level-group-head p,
html[data-theme="dark"] .level-description,
html[data-theme="dark"] .level-card ul,
html[data-theme="dark"] .practice-example p,
html[data-theme="dark"] .level-guidance p,
html[data-theme="dark"] .level-sources p { color: #bec7d5; }
html[data-theme="dark"] .hero h1 .brand-orange,
html[data-theme="dark"] .reason-heading .brand-orange,
html[data-theme="dark"] .levels-hero .brand-orange,
html[data-theme="dark"] .intro h2 em,
html[data-theme="dark"] .closing h2 em,
html[data-theme="dark"] .level-code { color: #f05a18; }
html[data-theme="dark"] .credential { color: #d4dff1; background: #252e3e; border-color: #44516a; }
html[data-theme="dark"] .topic-list a:hover,
html[data-theme="dark"] .language-menu button:hover,
html[data-theme="dark"] .language-menu button:focus-visible,
html[data-theme="dark"] .theme-option:hover { background: #29354a; }
html[data-theme="dark"] .topic-list a,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card + .card,
html[data-theme="dark"] .level-card { border-color: #394457; border-top-color: #7898ce; }
html[data-theme="dark"] .intro,
html[data-theme="dark"] .practice-example,
html[data-theme="dark"] .level-sources { border-color: #394457; }
html[data-theme="dark"] .contact-card { background: #202733; }
html[data-theme="dark"] .contact-card::after { color: rgba(255,255,255,.05); }
html[data-theme="dark"] .language-menu,
html[data-theme="dark"] .language-menu button,
html[data-theme="dark"] .theme-panel { background: #202733; color: #edf2f8; border-color: #44516a; }
html[data-theme="dark"] .theme-option svg { color: #c6d9f7; }
html[data-theme="dark"] .theme-auto-note { color: #bec7d5; border-color: #44516a; }
html[data-theme="dark"] .theme-footer { background: #171d27; border-color: #394457; }
html[data-theme="dark"] .theme-toggle { color: #c6d9f7; background: #202733; border-color: #44516a; }
html[data-theme="dark"] .theme-toggle:hover { color: #fff; background: #29354a; }
html[data-theme="dark"] .theme-toggle-icon { color: #bec7d5; }
html[data-theme="dark"] .levels-jumps a { background: #1b2029; color: #d4e2f8; border-color: #44516a; border-bottom-color: #f05a18; }
html[data-theme="dark"] .levels-jumps a:hover { background: #2b3850; }
html[data-theme="dark"] .group-badge { background: #c6d9f7; color: #17202d; }
html[data-theme="dark"] .reason-back:hover,
html[data-theme="dark"] .levels-inline-link:hover,
html[data-theme="dark"] .levels-more:hover,
html[data-theme="dark"] .hero .text-link:hover,
html[data-theme="dark"] .offer-title-link:hover { color: #ff9a6a; }
html[data-theme="dark"] .framework-note { border-left-color: #7898ce; }
html[data-theme="dark"] .lesson-next { border-left-color: #f05a18; }
html[data-theme="dark"] .level-card:target { border-top-color: #f05a18; }
html[data-theme="dark"] .hero-actions .button:focus-visible,
html[data-theme="dark"] .lesson-cta:focus-visible,
html[data-theme="dark"] .reasons-button:focus-visible { outline-color: #c6d9f7; }

@media(max-width:600px) { .theme-toggle { font-size: 15px; } .theme-footer { padding: 19px 0; } }
@media(prefers-reduced-motion:reduce) { .art-cta { transition: none; } }