/* Taldigi Maths · a quiet, photographic night-study identity.
   The original stylesheet owns layout and behaviour; this layer owns the theme. */
:root {
  color-scheme: dark;
  --ink: #eef1eb;
  --text: #d8e0e5;
  --muted: #a8b8c8;
  --paper: #0b1220;
  --line: #29394a;
  --mint: #173c3c;
  --lime: #63ddc7;
  --peach: #44352d;
  --lavender: #30314b;
  --yellow: #403923;
  --blue: #203a50;
  --rose: #422e40;
  --panel: #111e2f;
  --raised: #17263a;
  --teal: #63ddc7;
  --amber: #efb66b;
  --radius: 18px;
  background: var(--paper);
  color: var(--text);
}

html { scroll-padding-top: 100px; }
body { background: var(--paper); color: var(--text); }
::selection { background: var(--teal); color: #0b1220; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
h1, h2, h3, h4 { color: var(--ink); }
h1, h2 { font-weight: 650; }
button, input, select { color: var(--text); }
select, select option { background: var(--panel); color: var(--ink); }
input { caret-color: var(--teal); }
input::placeholder { color: #8fa2b7; opacity: 1; }
.skip { background: var(--teal); color: #0b1220; }
.btn { border-radius: 9px; font-size: 13px; min-height: 47px; }
.btn.primary, .btn.light { background: var(--teal); color: #0b2527; }
.btn.primary:hover, .btn.light:hover { background: #96ecdc; }
.btn.secondary { background: var(--raised); color: var(--ink); border-color: #3a5067; }
.btn.secondary:hover { background: #21354a; border-color: var(--teal); }
.text-link { color: var(--teal); font-size: 13px; }
.eyebrow { color: var(--teal); letter-spacing: .14em; font-size: 10px; }
.tiny-dot { background: var(--teal); }
.mint { color: #83e7d4; }
.peach { color: #f0ba8f; }
.lavender { color: #c4b7f1; }
.yellow { color: #f0ce7e; }
.blue { color: #92d0ed; }
.rose { color: #eeb2d2; }

/* Navigation stays visually quiet while the lesson content takes precedence. */
.topbar {
  background: #0c1523;
  border-bottom-color: var(--line);
  height: 82px;
}
.brand { color: var(--ink); letter-spacing: -.065em; }
.brand-mark { background: var(--teal); color: #0b2527; border-radius: 10px; }
.brand-product { color: #a4b9c9; letter-spacing: .19em; }
.topbar-right { gap: 20px; }
.level-pill { background: #1b3035; border: 1px solid #2f5053; color: var(--teal); }
.level-pill span { color: #b8d0ce; }
.language-picker, .language-picker select { color: #d2dee7; }
.language-picker select { background: transparent; min-height: 42px; }
.language-picker select option { background: var(--panel); }
.menu-button { color: var(--ink); border-radius: 8px; }
.menu-button:hover { background: var(--raised); }
.app-layout { max-width: 1680px; grid-template-columns: 228px minmax(0,1fr); }
.sidebar { top: 82px; height: calc(100dvh - 82px); background: #0d1725; border-color: var(--line); padding-top: 36px; }
.nav-label { color: #94a6b8; font-size: 9px; letter-spacing: .15em; }
.nav-link { color: #adbdcd; border: 1px solid transparent; font-size: 13px; border-radius: 9px; }
.nav-link:hover { background: #152638; color: var(--ink); }
.nav-link.active { background: #153338; color: #91e7d8; border-color: #265056; }
.nav-dot { background: var(--teal); }
.sidebar-level { margin-top: 29px; }
.level-circle { background: #254047; color: var(--teal); }
.sidebar-level strong { color: #dce6e9; }
.sidebar-level small, .sidebar-note p { color: #9cadbd; font-size: 11px; line-height: 1.7; }
.sidebar-note { border-top: 1px solid var(--line); margin-top: 29px; }
.sidebar-note > .icon { color: var(--amber); }
.sidebar-note strong { color: #dce6e9; font-size: 13px; }
.back-taldigi { color: #b3c4d0; border-color: var(--line); font-size: 12px; line-height: 1.6; }
.back-taldigi:hover { color: var(--teal); }
.progress-track { background: #2a3a4a; }
.progress-track > span { background: var(--teal); }
.main-content { padding: 34px 38px 0; max-width: 1450px; }

/* The photographic opening has its own composition, not the old paper collage. */
.hero {
  background: #111e2d;
  border: 1px solid #2d4151;
  border-radius: 20px;
  grid-template-columns: 1fr 1fr;
  padding: 34px;
  gap: 28px;
  min-height: 405px;
  overflow: hidden;
}
.hero-copy { padding: 3px 0; align-self: center; min-width: 0; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(37px,3.5vw,57px); letter-spacing: -.055em; line-height: 1.09; margin: 18px 0 21px; }
.hero h1 em { color: var(--teal); font-family: Georgia,"Times New Roman",serif; font-weight: 400; }
.hero-description { color: #bbc9d5; font-size: 14px; line-height: 1.85; max-width: 410px; margin-bottom: 25px; }
.hero .eyebrow { color: var(--amber); font-size: 9px; letter-spacing: .15em; }
.hero .tiny-dot { background: var(--amber); }
.hero .btn { font-size: 13px; min-height: 47px; padding: 13px 19px; }
.hero-details { color: #abbfce; font-size: 11px; gap: 16px; margin-top: 26px; }
.hero-details b { color: var(--ink); }
.hero-details .icon { color: var(--teal); }
.hero-art {
  width: 100%; max-width: none; min-width: 0;
  min-height: 330px; height: 100%; margin: 0;
  transform: none; left: auto; align-self: stretch;
  border-radius: 14px; overflow: hidden; background: #0a1321;
  border: 1px solid #304351; position: relative;
}
.hero-photo { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: center; }
.hero-photo-caption {
  position: absolute; left: 18px; bottom: 17px; right: 18px;
  background: rgba(10,21,33,.93); color: #dbe8eb;
  padding: 12px 15px; border: 1px solid #526061; border-radius: 8px;
  font-size: 11px; line-height: 1.65; margin: 0;
}
.hero-photo-caption span, .hero-photo-caption small { display: block; color: var(--amber); font-size: 9px; letter-spacing: .1em; line-height: 1.65; }
.hero-photo-caption strong { font-weight: 600; font-size: 12px; }

/* Cards use restrained surfaces and genuine images, with generous text sizes. */
.stats-row { gap: 14px; margin: 22px 0 24px; }
.stat-card { background: var(--panel); border-color: var(--line); border-radius: 12px; padding: 19px 16px; }
.stat-card strong { color: var(--ink); font-size: 27px; font-variant-numeric: tabular-nums; }
.stat-card strong em { color: #95a9ba; }
.stat-card div > span { color: #adbdcb; font-size: 11px; }
.stat-icon { width: 37px; height: 37px; }
.daily-banner { background: #17373b; border: 1px solid #2b5b5d; padding: 23px; border-radius: 14px; margin-bottom: 41px; }
.daily-icon, .practice-symbol { background: #284d50; color: var(--teal); }
.daily-banner h2 { color: #f0f4ef; font-size: 20px; }
.daily-banner p { color: #bfd2d3; font-size: 12px; }
.daily-banner .btn { font-size: 12px; }
.section-heading h2 { font-size: 28px; }
.section-heading .eyebrow { font-size: 10px; margin-bottom: 11px; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; }
.section-heading .text-link { color: var(--teal); font-size: 12px; }
.units-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.unit-card, .lesson-card {
  background: var(--panel); border-color: #2b3e51;
  border-radius: 14px; padding: 20px;
  overflow: hidden; min-width: 0;
  transition: border-color .18s, transform .18s, background .18s;
}
.unit-card:hover, .lesson-card:hover { background: #16263a; border-color: #5b8e91; box-shadow: none; transform: translateY(-3px); }
.unit-card-image, .lesson-card-image { margin: -20px -20px 20px; aspect-ratio: 16 / 9; overflow: hidden; background: #192a39; flex-shrink: 0; }
.unit-card-image img, .lesson-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.unit-card:hover .unit-card-image img, .lesson-card:hover .lesson-card-image img { transform: scale(1.035); }
.unit-card-top { margin-bottom: 17px; gap: 10px; }
.unit-card-top > .icon { color: var(--teal); }
.unit-icon { border-radius: 10px; }
.unit-number { color: #a4b7c7; font-size: 9px; letter-spacing: .13em; }
.unit-card h3 { color: var(--ink); font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.unit-card p { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: none; margin-bottom: 25px; }
.unit-card-bottom { color: #9eb3c4; font-size: 11px; margin-bottom: 13px; }
.unit-card .progress-track { height: 4px; }
.lesson-grid { gap: 19px; }
.lesson-card h3 { color: var(--ink); font-size: 19px; line-height: 1.4; }
.lesson-card p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.lesson-card-bottom { color: #a9bbcb; font-size: 11px; }
.lesson-card-bottom > .icon { color: var(--teal); }
.lesson-symbol { color: var(--ink); }
.lesson-symbol.mint { color: #8fe4d5; }
.lesson-symbol.peach { color: #f1be9c; }
.lesson-symbol.lavender { color: #cbbff6; }
.lesson-symbol.yellow { color: #f2d088; }
.lesson-symbol.blue { color: #a7d8f1; }
.lesson-symbol.rose { color: #f0b8d8; }
.topic-status { color: #a6b9c9; font-size: 10px; }
.topic-status.mastered { color: #82dfc6; }
.level-dots i { background: #3b4e61; }
.level-dots i.filled { background: #70cbbb; }
.group-title { margin-top: 35px; margin-bottom: 22px; }
.group-title h2 { font-size: 24px; }
.group-title .eyebrow { color: #9ab4c5; font-size: 10px; }
.curriculum-note { color: var(--muted); font-size: 12px; }
.empty-state { background: var(--panel); border-color: #42586d; color: var(--muted); }
.empty-state > .icon { color: var(--teal); }

.history-banner { background: #24272c; border-color: #4b4438; border-radius: 15px; padding: 24px; gap: 24px; margin-top: 32px; }
.history-symbol { background: #3f382c; color: var(--amber); }
.history-banner-image { width: 180px; height: 150px; object-fit: cover; border-radius: 10px; flex: 0 0 180px; overflow: hidden; }
.history-banner-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-banner .eyebrow { color: var(--amber); font-size: 9px; }
.history-banner h2 { color: #f1e6d5; font-size: 22px; }
.history-banner p:not(.eyebrow) { color: #c6beb3; font-size: 12px; line-height: 1.85; }
.history-banner .text-link { color: var(--amber); font-size: 12px; }
.app-footer { border-color: var(--line); color: #8fa5b6; margin-top: 48px; }
.app-footer > span { color: #b6cad5; }
.footer-plus { color: var(--teal); }
.app-footer p, .app-footer small { color: #9db1c1; font-size: 10px; }

/* Reading, worked examples, real-world applications, and historical sources. */
.page-title h1 { font-size: clamp(34px,3.3vw,48px); }
.page-title > p:last-child { color: #afc0cf; font-size: 15px; line-height: 1.85; }
.page-title .eyebrow { font-size: 10px; }
.filters { gap: 12px; }
.search-box, .filters select, .difficulty-selector select { background: var(--panel); border-color: #3c5065; color: var(--text); }
.search-box .icon { color: #a5b9c9; }
.search-box input { color: var(--ink); font-size: 13px; }
.search-box input::placeholder { color: #9aafc1; }
.search-box:focus-within { outline: 2px solid var(--teal); }
.filters select { font-size: 12px; }
.lesson-breadcrumb { color: #a5bbca; font-size: 12px; }
.lesson-breadcrumb a { color: var(--teal); font-size: 13px; }
.lesson-header { border-color: var(--line); }
.lesson-header .eyebrow { font-size: 10px; }
.lesson-header .eyebrow span { color: #7f96a9; }
.lesson-header h1 { font-size: clamp(32px,3.3vw,46px); }
.lesson-header > div > p:last-child { color: #b1c2cf; font-size: 14px; line-height: 1.8; }
.lesson-layout { gap: 32px; grid-template-columns: minmax(0,1fr) 238px; }
.lesson-visual, .real-life-visual { margin: 0 0 29px; background: #121f30; border: 1px solid #334657; border-radius: 14px; overflow: hidden; }
.lesson-visual > img { width: 100%; height: 285px; object-fit: cover; object-position: center; display: block; }
.lesson-visual figcaption, .real-life-visual figcaption { margin: 0; padding: 13px 19px; color: #afc2d0; font-size: 12px; line-height: 1.75; }
.lesson-visual figcaption strong, .real-life-visual figcaption strong { color: #e6e9e5; }
.real-life-visual { border-color: #355453; background: #142a30; }
.real-life-visual > img { display: block; width: 100%; height: 245px; object-fit: cover; }
.real-life-visual figcaption { color: #bcd3cf; padding: 12px 15px; }
.section-label { gap: 12px; }
.section-label > span { background: #1c3d41; color: var(--teal); width: 29px; height: 29px; font-size: 11px; }
.section-label h2 { font-size: 23px; color: var(--ink); line-height: 1.35; }
.lesson-section > p { color: #c0ccd7; font-size: 16px; line-height: 1.95; }
.rules-panel { background: #122d32; border: 1px solid #2a5153; border-left: 3px solid var(--teal); padding: 25px; border-radius: 12px; }
.rules-panel h2 { color: #e3f0ea; font-size: 18px; }
.rules-panel h2 .icon, .rules-panel li .icon { color: var(--teal); }
.rules-panel li { color: #c0d6d4; font-size: 14px; line-height: 1.9; }
.worked-example { background: var(--panel); border-color: var(--line); padding: 27px; }
.example-question { background: #1b2e42; color: #e5eaf0; font-size: 18px; border: 1px solid #324b61; }
.steps li > span { color: var(--teal); border-color: #385c64; background: #163238; font-size: 11px; }
.steps li p, .answer-feedback .steps li p { color: #bacbd7; font-size: 15px; line-height: 1.9; }
.answer-box { background: #183a3a; border: 1px solid #2d5655; }
.answer-box > span { color: #b1cfca; font-size: 12px; }
.answer-box strong { color: #96ebd9; font-size: 23px; }
.answer-box .icon { color: var(--teal); }
.mistake-note { background: #322b24; border-color: #574536; border-left: 3px solid var(--amber); }
.mistake-note > .icon { color: var(--amber); }
.mistake-note h3 { color: #f3cca1; font-size: 16px; }
.mistake-note p { color: #d0bda8; font-size: 14px; line-height: 1.9; }
.lesson-bottom-actions > p { color: var(--muted); }
.lesson-aside { top: 108px; }
.practice-callout { background: #17373b; border: 1px solid #2d5559; color: #c5d6d7; padding: 24px 21px; }
.practice-callout .eyebrow { color: var(--teal); font-size: 9px; }
.practice-callout h2 { color: #edf3ed; font-size: 24px; }
.practice-callout p:not(.eyebrow) { color: #bfd1d2; font-size: 13px; }
.practice-callout .btn { font-size: 12px; }
.practice-callout small { color: #b5cdcb; font-size: 11px; }
.lesson-mini-progress h3 { font-size: 15px; }
.lesson-mini-progress p, .lesson-mini-progress small { color: #a8bdcc; font-size: 11px; line-height: 1.8; }
.real-life-section { background: #10272d; border-color: #2b4f52; border-radius: 15px; padding: 26px; }
.real-life-heading > span { color: var(--teal); background: #244a4c; }
.real-life-heading h2 { color: #e4efea; font-size: 23px; }
.real-life-intro { color: #bfd3d2; font-size: 15px; line-height: 1.9; }
.application-order { color: #a7c0bf; font-size: 12px; }
.application-examples { gap: 20px; }
.application-card { background: #152d35; border-color: #33535b; padding: 23px; border-radius: 12px; }
.application-number { background: #285354; color: #8be4d4; font-size: 14px; width: 33px; height: 33px; }
.application-level { color: #9bc7c1; font-size: 10px; }
.application-card h3 { color: #e6efec; font-size: 18px; }
.application-scenario { color: #c1d2d6; font-size: 14px; line-height: 1.9; }
.application-calculation { background: #0c2029; border: 1px solid #2b4955; padding: 16px; }
.application-calculation > span { color: #a1bfca; font-size: 11px; }
.application-calculation p { color: #d3f1e8; font-size: 16px; line-height: 1.9; }
.application-result { color: #b6d1cd; font-size: 14px; line-height: 1.9; }
.application-result strong { color: #91e5d4; }
.application-details summary { border-color: #355458; color: #90e5d4; font-size: 14px; }
.practice-purpose { max-width: 780px; }
.practice-purpose .real-life-visual > img { height: 205px; }

.history-detail { background: #25282d; border-color: #4c463c; }
.history-badge { background: #453b2e; color: var(--amber); }
.history-detail summary { padding: 22px; }
.history-detail summary small { color: #d3b389; font-size: 9px; }
.history-detail summary strong { color: #efdfc6; font-size: 16px; }
.history-detail summary > .icon, .history-list-item summary > .icon { color: var(--amber); }
.history-body { padding: 0 24px 25px; }
.history-body h3 { color: #f0ddbe; font-size: 24px; line-height: 1.45; }
.history-body p { color: #c7c5c0; font-size: 15px; line-height: 1.95; }
.history-body .history-reading-time { color: #c5b79f; font-size: 12px; }
.history-section h4, .history-section h3 { color: #e6cda8; font-size: 16px; line-height: 1.6; }
.history-section p { color: #c7c5c0; }
.history-citations a { color: #efc88e; font-size: 12px; min-width: 28px; min-height: 28px; }
.history-citations a:hover { background: #4b4134; }
.history-citations a:focus-visible { outline-color: var(--amber); }
.sources, .history-body .sources { border-color: #4b453c; }
.sources a, .history-body .sources a { color: #ddc69f; font-size: 12px; line-height: 1.8; }
.sources a:hover, .history-body .sources a:hover { color: #fff0d7; }
.sources > span, .history-body .sources > span { color: #bcae98; font-size: 12px; }
.history-intro-note { background: #2b2b29; color: #c9c0ac; border: 1px solid #4d493f; font-size: 13px; }
.history-intro-note .icon { color: var(--amber); }
.history-list-item { background: #202631; border-color: #3b4350; }
.history-list-item summary { padding: 22px; }
.history-list-item summary small { color: #abb8c5; font-family: inherit; font-size: 11px; }
.history-list-item summary .history-list-title { color: #e6d7c1; font-size: 21px; line-height: 1.45; }
.history-list-item .history-body .text-link { color: var(--amber); font-size: 12px; }

/* Exact diagrams retain a light drawing surface; their labels are never AI art. */
.math-model { background: #142738; border-color: #354e61; padding: 25px; }
.math-model > p { color: #afc4d4; font-size: 13px; }
.math-model .section-label h2 { color: #e6edf1; }
.model-caption { color: #a9bece !important; font-size: 11px !important; }
.model-equation { color: #b8d6df; font-size: 31px; }
.model-equation strong { color: #8ce4d4; }
.model-control > span { color: #b5c9d8; font-size: 12px; }
.model-control b { color: var(--teal); font-size: 14px; }
.model-control input { accent-color: var(--teal); min-height: 30px; }
.counter-dot { background: #70d3bd; box-shadow: inset -2px -2px 0 #4eac98; }
.counter-group.coral .counter-dot { background: #e9af78; box-shadow: inset -2px -2px 0 #bb8451; }
.counter-dot.removed { background: #e5ae85; opacity: .48; }
.counter-dot.removed:after { background: #fff0d8; height: 2px; }
.fraction-model > span { background: #dce6e3; border-color: #8fa8aa; }
.fraction-model > span.selected { background: #63cdb6; border-color: #328d7e; }
.fraction-explain { color: #adc5d2; font-size: 12px; }
.area-model { background: #457677; border-color: #457677; }
.area-model > span { background: #b2ded0; }
.model-results { color: #b0c5d1; font-size: 12px; }
.model-results b { color: #8de3d3; font-size: 15px; }
.circle-model, .pythagoras-model { background: #f3efe5; border-radius: 10px; border: 1px solid #d7ddce; }
.circle-model { max-width: 300px; height: 205px; }
.pythagoras-model { max-width: 440px; height: 245px; padding: 8px; }

/* Exercise states remain easily distinguishable without relying only on colour. */
.difficulty-selector strong { color: #b5c7d6; font-size: 13px; }
.difficulty-selector select { font-size: 13px; }
.practice-choice { background: var(--panel); border-color: var(--line); padding: 27px 24px; }
.practice-choice.daily-choice { background: #163035; border-color: #315559; }
.practice-choice h2 { color: var(--ink); font-size: 25px; }
.practice-choice p { color: #b5c7d4; font-size: 14px; }
.practice-choice p.small { color: #a9bfc8; font-size: 12px; }
.practice-choice .btn, .practice-choice > .text-link { font-size: 12px; }
.topic-chips span { background: #253b49; color: #c2d6de; font-size: 11px; }
.points-note { background: #2c2b28; border-color: #494638; }
.points-note > .icon { color: var(--amber); }
.points-note p { color: #d2c7b1; font-size: 13px; }
.resume-banner { background: #17373b; border: 1px solid #31575b; }
.resume-banner > span { color: #d1e7e3; }
.practice-top > span { background: #1c393c; color: var(--teal); }
.question-shell { background: var(--panel); border-color: #3a4e62; }
.question-progress { color: #a9bfce; font-size: 12px; }
.question-progress b { color: var(--teal); font-size: 14px; }
.question-content { padding: 35px 38px; }
.question-content .eyebrow { font-size: 11px; }
.question-prompt { color: #edf2ed; font-size: 32px; line-height: 1.5; }
.answer-label { color: #bdcfdc; font-size: 13px; }
.answer-input-wrap input { background: #091522; border-color: #4b6a80; color: #f1f4ec; font-size: 25px; min-height: 60px; }
.answer-input-wrap input::placeholder { color: #91a8bb; }
.answer-input-wrap input:disabled { background: #162434; color: #b4c9d7; }
.answer-input-wrap input[aria-invalid="true"] { border-color: #efaf87; }
.answer-input-wrap > span { color: #b9cddd; }
.input-help { color: #a4b9cb; font-size: 12px; }
.answer-actions .btn { font-size: 13px; }
.hint-button { color: var(--amber); font-size: 13px; }
.hint-button:hover:not(:disabled) { color: #ffe0b4; }
.answer-error { color: #f4b99a; font-size: 13px; }
.answer-choice { background: #162739; border-color: #405569; color: #d3e4eb; }
.answer-choice:hover { border-color: #75abae; }
.answer-choice.selected { background: #193f43; border-color: var(--teal); }
.answer-choice:focus-within { outline-color: var(--teal); }
.choice-number { background: #2b4156; color: #c6dbe8; }
.answer-choice.selected .choice-number { background: #6ad6c1; color: #123133; }
.hint-panel { background: #302b24; border-color: #594b36; }
.hint-panel > .icon { color: var(--amber); }
.hint-panel strong { color: #edc88d; font-size: 13px; }
.hint-panel p { color: #d4c6ae; font-size: 14px; }
.answer-feedback { border-color: #33495a; }
.feedback-heading > span { background: #204a42; color: #8ce3c9; }
.feedback-heading h2 { color: #d9eee5; font-size: 20px; }
.feedback-heading > b { color: var(--teal); }
.try-again .feedback-heading > span { background: #4a3d2a; color: #f0c787; }
.try-again .feedback-heading h2 { color: #edcf9f; }
.correct-answer { color: #afc5d4; font-size: 13px; }
.correct-answer strong { color: #a0e4d5; font-size: 22px; }
.answer-feedback h3 { color: #cfdee5; font-size: 15px; }
.feedback-actions .text-link { color: var(--teal); }
.session-save-note { color: #a6bdce; font-size: 11px; }
.session-results { background: var(--panel); border-color: #3a5061; }
.result-medal { background: #2e382b; color: var(--amber); }
.session-results .eyebrow { color: var(--teal); font-size: 11px; }
.session-results > p:not(.eyebrow) { color: #b8cbd7; font-size: 14px; }
.results-numbers strong { color: #e7f2ed; }
.results-numbers strong em { color: #a7c0cd; }
.results-numbers div > span { color: #b1c7d5; font-size: 12px; }

.progress-overview { background: #142e35; border-color: #2a4a55; }
.progress-overview strong { color: #83dac8; }
.progress-overview span { color: #afc8cf; font-size: 11px; }
.progress-topics .section-heading p { color: #acbfce; font-size: 13px; }
.topic-progress-list { background: var(--panel); border-color: #2d4356; }
.topic-progress-row { border-color: #2b3e4f; }
.topic-progress-row h3 { color: #e1ebed; font-size: 16px; }
.topic-progress-row > div > span { color: #a7bece; font-size: 11px; }
.topic-progress-row > .icon { color: var(--teal); }
.topic-progress-bar small { color: #afc9d7; font-size: 11px; }
.backup-panel { background: #162737; border-color: #334c60; }
.backup-panel p { color: #b3c8d6; font-size: 14px; }
.backup-actions .btn { font-size: 12px; }
.file-label:focus-within { outline-color: var(--teal); }
.reset-button { color: #e9bc97; font-size: 12px; }
.storage-warning { background: #3e3024; border-color: #785b39; color: #f1d9b4; }
.toast { background: #d9f1e8; color: #0c2d2a; border: 1px solid #8cc4b3; box-shadow: 0 5px 30px #0004; }
.boot-logo { background: var(--teal); color: #0b2527; }
.boot p { color: #a9c0d1; }

@media (min-width:1500px) {
  .main-content { padding: 38px 45px 0; }
  .hero { min-height: 440px; padding: 38px; }
  .hero-art { transform: none; }
  .hero-photo, .hero-art { min-height: 360px; }
}
@media (max-width:1180px) {
  .app-layout { grid-template-columns: 205px minmax(0,1fr); }
  .main-content { padding: 28px 26px 0; }
  .hero { padding: 27px; grid-template-columns: 1.08fr 1fr; gap: 22px; min-height: 390px; }
  .hero h1 { font-size: 42px; }
  .hero-art { width: 100%; left: auto; transform: none; }
  .hero-description { font-size: 13px; }
  .hero-details { gap: 12px; font-size: 10px; }
  .units-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unit-card, .lesson-card { padding: 20px; }
  .lesson-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 23px; }
  .lesson-aside .practice-callout { padding: 22px 17px; }
  .stat-card { padding: 16px 12px; gap: 10px; }
  .stat-card div > span { font-size: 10px; }
  .history-banner { gap: 19px; }
  .history-banner-image { width: 140px; flex-basis: 140px; height: 150px; }
}
@media (max-width:960px) {
  .app-layout { grid-template-columns: 180px minmax(0,1fr); }
  .main-content { padding: 24px 22px 0; }
  .nav-link { font-size: 12px; padding: 12px 9px; }
  .nav-label { font-size: 8px; }
  .hero { grid-template-columns: 1fr; gap: 25px; }
  .hero-copy { max-width: 560px; }
  .hero h1 { font-size: 46px; }
  .hero-description { max-width: 490px; font-size: 14px; }
  .hero-art { min-height: 250px; height: 280px; width: 100%; left: auto; transform: none; }
  .hero-photo { min-height: 0; height: 100%; }
  .hero-details { font-size: 11px; }
  .stats-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .daily-banner h2 { font-size: 20px; }
  .daily-banner p { font-size: 12px; }
  .daily-banner .btn { font-size: 12px; }
  .section-heading h2 { font-size: 27px; }
  .unit-card h3, .lesson-card h3 { font-size: 18px; }
  .unit-card p, .lesson-card p { font-size: 12px; }
  .unit-number { font-size: 8px; }
  .unit-card-bottom { font-size: 10px; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-aside { position: static; }
  .history-banner > .text-link { margin-left: 0; margin-top: 0; }
  .history-banner { align-items: flex-start; }
  .history-banner > div:not(.history-banner-image) { min-width: 190px; }
  .history-banner-image { width: 130px; flex-basis: 130px; height: 150px; }
  .practice-choice { padding: 25px; }
  .practice-choice h2 { font-size: 24px; }
  .history-list-item summary .history-list-title { font-size: 20px; }
  .history-list-item .history-body { padding: 4px 24px 25px; }
}
@media (max-width:720px) {
  html { scroll-padding-top: 86px; }
  .topbar { height: 70px; padding: 0 18px; }
  .app-layout { display: block; }
  .sidebar { top: 70px; height: auto; max-height: calc(100dvh - 70px); background: #101e2e; border-color: #324b5e; box-shadow: 0 18px 28px #0006; }
  .nav-link { font-size: 14px; padding: 14px; }
  .brand { font-size: 23px; }
  .brand-product { font-size: 8px; }
  .topbar-right { gap: 10px; }
  .level-pill { padding: 7px 9px; }
  .language-picker select { font-size: 11px; }
  .main-content { padding: 21px 18px 0; }
  .hero { padding: 27px; border-radius: 16px; gap: 26px; }
  .hero h1 { font-size: clamp(39px,7.5vw,49px); margin: 17px 0 20px; }
  .hero .eyebrow { font-size: 9px; line-height: 1.7; }
  .hero-description { font-size: 14px; }
  .hero .btn { font-size: 13px; }
  .hero-details { gap: 16px; font-size: 10px; margin-top: 24px; }
  .hero-art { width: 100%; height: 245px; min-height: 245px; margin: 0; left: auto; transform: none; align-self: auto; }
  .hero-photo { min-height: 0; }
  .hero-photo-caption { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; font-size: 11px; }
  .hero-photo-caption span, .hero-photo-caption small { font-size: 8px; }
  .stats-row { margin: 18px 0 21px; gap: 12px; }
  .stat-card { padding: 17px 13px; }
  .stat-card strong { font-size: 26px; }
  .stat-card div > span { font-size: 11px; }
  .stat-icon { width: 32px; height: 32px; }
  .daily-banner { padding: 22px; }
  .daily-banner .btn { margin-left: 0; min-height: 45px; }
  .daily-banner h2 { font-size: 20px; line-height: 1.4; }
  .daily-banner p { font-size: 13px; line-height: 1.8; }
  .daily-icon { width: 36px; height: 36px; }
  .section-heading { margin-bottom: 23px; }
  .section-heading h2 { font-size: 28px; }
  .section-heading .eyebrow { font-size: 9px; }
  .section-heading p:not(.eyebrow) { font-size: 13px; }
  .section-heading .text-link { font-size: 13px; }
  .units-grid, .lesson-grid { gap: 17px; }
  .unit-card, .lesson-card { padding: 19px; }
  .unit-card-image, .lesson-card-image { margin: -19px -19px 19px; }
  .unit-card-top { flex-wrap: nowrap; gap: 9px; margin-bottom: 17px; }
  .unit-number { font-size: 8px; }
  .unit-card h3, .lesson-card h3 { font-size: 20px; }
  .unit-card p, .lesson-card p { font-size: 13px; }
  .unit-card-bottom, .lesson-card-bottom { font-size: 11px; }
  .topic-status { font-size: 10px; }
  .history-banner { padding: 22px; gap: 20px; }
  .history-banner-image { width: 100%; height: 205px; flex-basis: 100%; }
  .history-banner h2 { font-size: 24px; }
  .history-banner p:not(.eyebrow) { font-size: 13px; }
  .history-banner .text-link { font-size: 13px; margin-left: 0; }
  .app-footer { padding: 24px 0; }
  .app-footer p { font-size: 10px; }
  .page-title > p:last-child { font-size: 15px; }
  .filters select, .search-box input { font-size: 12px; }
  .group-title h2 { font-size: 24px; }
  .group-title .eyebrow { font-size: 9px; }
  .lesson-header h1 { font-size: 34px; }
  .lesson-header > div > p:last-child { font-size: 14px; }
  .lesson-header .eyebrow { font-size: 9px; }
  .lesson-breadcrumb a { font-size: 12px; }
  .lesson-breadcrumb > span { font-size: 11px; }
  .lesson-visual > img { height: 230px; }
  .lesson-visual figcaption, .real-life-visual figcaption { font-size: 12px; padding: 13px 16px; }
  .lesson-section > p { font-size: 16px; line-height: 1.95; }
  .section-label h2 { font-size: 22px; }
  .rules-panel { padding: 22px 20px; }
  .rules-panel h2 { font-size: 18px; }
  .rules-panel li { font-size: 14px; }
  .worked-example { padding: 23px 20px; }
  .worked-example .section-label h2 { font-size: 21px; }
  .example-question { font-size: 17px; padding: 17px; }
  .steps li p, .answer-feedback .steps li p { font-size: 15px; }
  .answer-box strong { font-size: 21px; }
  .mistake-note { padding: 21px 18px; }
  .mistake-note h3 { font-size: 16px; }
  .mistake-note p { font-size: 14px; }
  .lesson-aside .practice-callout p:not(.eyebrow) { font-size: 14px; }
  .lesson-aside .practice-callout small { font-size: 12px; }
  .lesson-mini-progress p, .lesson-mini-progress small { font-size: 12px; }
  .real-life-section { padding: 23px 19px; }
  .real-life-heading h2 { font-size: 22px; }
  .real-life-intro { font-size: 15px; }
  .application-card { padding: 21px 17px; }
  .application-card h3 { font-size: 18px; }
  .application-scenario, .application-result { font-size: 14px; }
  .application-calculation p { font-size: 15px; }
  .application-order { font-size: 12px; }
  .real-life-visual > img { height: 205px; }
  .history-detail summary { padding: 20px 18px; }
  .history-detail summary strong { font-size: 15px; }
  .history-detail summary small { font-size: 8px; }
  .history-body { padding: 0 21px 24px; }
  .history-body h3 { font-size: 23px; }
  .history-body p { font-size: 15px; line-height: 1.95; }
  .history-section h4, .history-section h3 { font-size: 16px; }
  .sources a, .history-body .sources a { font-size: 12px; }
  .history-list-item summary .history-list-title { font-size: 20px; }
  .history-list-item summary small { font-size: 11px; }
  .history-list-item .history-body p { font-size: 15px; }
  .history-intro-note { font-size: 13px; }
  .math-model { padding: 22px 18px; }
  .math-model .section-label h2 { font-size: 21px; }
  .model-control > span { font-size: 11px; }
  .model-results { font-size: 12px; }
  .model-results b { font-size: 14px; }
  .model-caption { font-size: 11px !important; }
  .pythagoras-model { height: 220px; }
  .difficulty-selector strong, .difficulty-selector select { font-size: 13px; }
  .practice-choice h2 { font-size: 24px; }
  .practice-choice p { font-size: 14px; }
  .practice-choice p.small { font-size: 12px; }
  .practice-choice .btn { font-size: 13px; }
  .points-note p { font-size: 13px; }
  .question-content { padding: 27px 23px; }
  .question-progress { font-size: 12px; }
  .question-content .eyebrow { font-size: 10px; }
  .question-prompt { font-size: 28px; }
  .answer-input-wrap input { font-size: 25px; min-height: 60px; }
  .input-help { font-size: 12px; }
  .hint-button { font-size: 13px; }
  .hint-panel p { font-size: 14px; }
  .feedback-heading h2 { font-size: 19px; }
  .correct-answer { font-size: 13px; }
  .answer-feedback h3 { font-size: 15px; }
  .session-save-note { font-size: 11px; }
  .session-results > p:not(.eyebrow) { font-size: 14px; }
  .progress-overview span { font-size: 11px; }
  .progress-topics .section-heading p { font-size: 13px; }
  .topic-progress-row h3 { font-size: 16px; }
  .topic-progress-row > div > span { font-size: 11px; }
  .backup-panel p { font-size: 14px; }
  .backup-actions .btn, .reset-button { font-size: 12px; }
}
@media (max-width:600px) {
  .units-grid, .lesson-grid { grid-template-columns: 1fr; }
  .unit-card-image, .lesson-card-image { aspect-ratio: 1.9 / 1; }
  .unit-card { min-height: auto; }
  .unit-card p { max-width: none; }
  .unit-card-top { margin-bottom: 17px; }
  .unit-number { font-size: 10px; }
  .lesson-card-top { margin-bottom: 17px; }
  .lesson-aside { grid-template-columns: 1fr; }
  .real-life-heading { align-items: flex-start; }
  .real-life-heading h2 { padding-top: 2px; }
}
@media (max-width:400px) {
  .topbar { padding: 0 13px; }
  .brand { font-size: 21px; gap: 8px; }
  .brand-mark { width: 33px; height: 35px; font-size: 26px; }
  .brand-product { font-size: 8px; letter-spacing: .12em; }
  .topbar-right { gap: 5px; }
  .level-pill { padding: 6px 7px; }
  .level-pill > span { display: none; }
  .language-picker select { width: 88px; max-width: 88px; font-size: 10px; }
  .main-content { padding: 17px 14px 0; }
  .hero { padding: 24px 21px; }
  .hero h1 { font-size: 39px; }
  .hero-details { gap: 12px; }
  .hero-art { height: 225px; min-height: 225px; transform: none; margin: 0; }
  .hero-details span:last-child { display: flex; }
  .stat-card { padding: 15px 11px; gap: 9px; }
  .stat-icon { width: 29px; height: 29px; }
  .stat-card div > span { font-size: 10px; }
  .stat-card strong { font-size: 25px; }
  .lesson-header h1 { font-size: 31px; }
  .lesson-symbol.large { width: 49px; height: 49px; font-size: 27px; }
  .lesson-header { gap: 12px; }
  .lesson-visual > img { height: 205px; }
  .real-life-section { padding: 21px 16px; }
  .question-content { padding: 25px 20px; }
  .question-prompt { font-size: 26px; }
}
@media (prefers-reduced-motion:reduce) {
  .unit-card:hover, .lesson-card:hover, .unit-card:hover .unit-card-image img, .lesson-card:hover .lesson-card-image img { transform: none; }
}
@media print {
  :root { color-scheme: light; --ink: #162f35; --text: #24363a; --paper: #fff; --line: #bbb; }
  body, .main-content { background: white; color: #222; }
  .lesson-visual, .real-life-visual { display: none; }
  .lesson-section > p, .steps li p, .history-body p, .application-scenario, .application-result, .real-life-intro { color: #222; }
  .rules-panel, .worked-example, .mistake-note, .history-detail, .real-life-section, .application-card, .application-calculation, .answer-box { background: #fff; color: #222; border-color: #aaa; }
  .rules-panel li, .example-question, .answer-box strong, .application-calculation p, .history-section h4, .history-section h3 { color: #222; }
  .example-question { background: #f3f3f3; }
  .sources a, .history-body .sources a, .history-citations a { color: #333; }
}