:root {
  color-scheme: light;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-shrink: 0;
}
.topbar-actions .source-link {
  margin-left: 0;
}
.theme-toggle {
  color: var(--muted);
  border: 1px solid var(--line);
}
.theme-sun {
  display: none;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e0e8df;
  --muted: #a1b1a4;
  --accent: #9ac8a5;
  --line: #334139;
  --paper: #151d19;
  --surface: #1c2720;
  --sidebar: #19231d;
  --sage: #25372b;
  --raised: #26352b;
  --active: #304a37;
  --on-accent: #14231a;
  --accent-hover: #b5d9bb;
}
html[data-theme="dark"] .theme-moon {
  display: none;
}
html[data-theme="dark"] .theme-sun {
  display: block;
}

/* Text stays readable on every course surface, including secondary metadata. */
html[data-theme="dark"]
  :is(
    .primary-nav > a,
    .nav-module-title,
    .nav-module-title > span,
    .nav-lesson,
    .sidebar-bottom p,
    .save-note,
    .breadcrumb,
    .breadcrumb span:last-child,
    .crumb-separator,
    .source-link,
    .hero-pill,
    .hero-copy > p,
    .hero-note,
    .art-label,
    .art-caption,
    .course-facts > span,
    .course-facts .icon,
    .section-aside,
    .module-meta,
    .module-lessons > a > .icon,
    .card-lesson-index,
    .lab-tag,
    .mini-label,
    .mac-equation > b,
    .origin-note p,
    .footer,
    .resource-card-top,
    .resource-host,
    .back-link,
    .lesson-meta,
    .lesson-toc > a,
    .toc-note,
    .option-letter,
    .lesson-pagination small,
    .search-input-wrap,
    .search-result small,
    .search-result span > span,
    .search-result > .icon,
    .dialog-hint
  ) {
  color: var(--muted);
}
html[data-theme="dark"]
  :is(.course-facts strong, .lesson-body, .lesson-body strong, .objectives li) {
  color: var(--ink);
}
html[data-theme="dark"]
  :is(
    .primary-nav > a.active,
    .nav-lesson.active,
    .nav-lesson:hover,
    .primary-nav > a:hover,
    .source-link:hover,
    .back-link:hover,
    .lesson-toc > a:hover,
    .module-number,
    .mac-equation > span,
    .origin-icon,
    .footer a,
    .lab-jump-links a,
    .lab-number,
    .objectives .eyebrow,
    .lesson-body code,
    .lesson-body th
  ) {
  color: var(--accent);
}

/* A small set of shared dark surfaces replaces the original pale sage tints. */
html[data-theme="dark"] :is(.hero, .lab-teaser, .objectives, .knowledge-check) {
  background: var(--sidebar);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .search-trigger,
    .mini-lab,
    .resource-card,
    .quiz-option,
    .search-input-wrap
  ) {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"]
  :is(
    .nav-count,
    .progress-track,
    .hero-pill,
    .button.secondary,
    .module-number,
    .lab-tag,
    .mac-equation > span,
    .origin-icon,
    .lab-jump-links a,
    .lab-number,
    .lesson-body code,
    .lesson-body pre,
    .lesson-body th,
    .lesson-body blockquote,
    .lesson-body .callout
  ) {
  background: var(--raised);
  border-color: var(--line);
}
html[data-theme="dark"] .lesson-body pre code {
  background: none;
}
html[data-theme="dark"]
  :is(
    .primary-nav > a.active,
    .nav-lesson.active,
    .mac-equation > span.mac-result,
    .quiz-option:has(input:checked),
    .quiz-option:has(input:checked) .option-letter
  ) {
  background: var(--active);
  color: var(--accent);
  border-color: #63876b;
}
html[data-theme="dark"]
  :is(
    .primary-nav > a:hover,
    .nav-lesson:hover,
    .button.secondary:hover,
    .lab-jump-links a:hover,
    .resource-card:hover,
    .lesson-toc > a:hover,
    .icon-button:hover,
    .search-result:hover
  ) {
  background: var(--raised);
}
html[data-theme="dark"]
  :is(
    .search-trigger kbd,
    .sidebar-divider,
    .sidebar-bottom,
    .lesson-status,
    .module-lessons,
    .module-lessons > a,
    .option-letter,
    dialog
  ) {
  border-color: var(--line);
}
html[data-theme="dark"] :is(.module-card:hover, .resource-card:hover) {
  border-color: #63876b;
}
html[data-theme="dark"] .nav-lesson.active .lesson-status:not(.done) {
  box-shadow: inset 0 0 0 3px var(--active);
  border-color: var(--accent);
}
html[data-theme="dark"] :is(.button.primary, .skip-link, .lesson-status.done) {
  color: var(--on-accent);
}
html[data-theme="dark"] .button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
html[data-theme="dark"] .quiz-feedback.correct {
  background: #253e2c;
  color: #bfdcbd;
}
html[data-theme="dark"] :is(.quiz-feedback.retry, .storage-warning) {
  background: #3d3322;
  color: #e0c48f;
  border-color: #78633f;
}
html[data-theme="dark"] .search-input-wrap input::placeholder {
  color: var(--muted);
}
html[data-theme="dark"] :is(.eyebrow-line, .level-bars i) {
  background: #5b7160;
}
html[data-theme="dark"] :is(.level-bars i:first-child, .live-dot) {
  background: var(--accent);
}
html[data-theme="dark"] .sidebar-backdrop {
  background: #0009;
}
html[data-theme="dark"] dialog::backdrop {
  background: #0009;
}

/* The overview illustration keeps its exact geometry and uses the same palette. */
html[data-theme="dark"] .hero-art [fill="#e1e9d9"] {
  fill: var(--raised);
  stroke: #5b7160;
}
html[data-theme="dark"] .hero-art [fill="#f8fbf3"] {
  fill: var(--surface);
  stroke: #63876b;
}
html[data-theme="dark"]
  .hero-art
  :is([fill="#71836b"], [fill="#58734d"], [fill="#a9b9a0"]) {
  fill: var(--muted);
}
html[data-theme="dark"] .hero-art :is([fill="#385b38"], [fill="#608264"]) {
  fill: var(--accent);
}
html[data-theme="dark"] .hero-art :is([stroke="#78916b"], [stroke="#819578"]) {
  stroke: #83a18a;
}

/* Interactive labs: controls, active cells, charts, traces and gradient tables. */
html[data-theme="dark"]
  .lab
  :is(
    .lab-intro,
    .lab-caption,
    .lab-flow-key,
    .lab-pe-top,
    .lab-pe-stream,
    .lab-note,
    .lab-details p,
    .lab-table caption,
    .lab-table thead th
  ) {
  color: var(--muted);
}
html[data-theme="dark"] .lab .lab-trace:empty::after {
  color: var(--muted);
}
html[data-theme="dark"] .lab :is(.lab-tag, .lab-slider output, .lab-metrics) {
  background: var(--raised);
  color: var(--accent);
}
html[data-theme="dark"]
  .lab
  :is(.lab-pe, .lab-trace li, .lab-stages > div, .lab-table thead th) {
  background: var(--sidebar);
}
html[data-theme="dark"]
  .lab
  :is(.lab-pe-active, .lab-stages .lab-stage-output) {
  background: var(--active);
  border-color: #63876b;
}
html[data-theme="dark"] .lab .lab-trace li {
  border-color: #63876b;
}
html[data-theme="dark"] .lab .lab-button {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .lab .lab-button:hover:not(:disabled) {
  background: var(--raised);
}
html[data-theme="dark"] .lab .lab-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
html[data-theme="dark"] .lab .lab-button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--on-accent);
}
html[data-theme="dark"] .lab svg text {
  fill: var(--muted);
}
html[data-theme="dark"] .lab .lab-chart-axis {
  stroke: #5b7160;
}
html[data-theme="dark"] .lab .lab-chart-point {
  fill: #d5ac61;
  stroke: var(--surface);
}
html[data-theme="dark"] .lab .lab-prediction {
  color: #dfb080;
}
html[data-theme="dark"] .lab .lab-prediction-match {
  color: var(--accent);
}
@media (max-width: 560px) {
  .topbar-actions {
    gap: 10px;
  }
}
@media (max-width: 380px) {
  .topbar-actions .source-label {
    display: none;
  }
}