html {
  background: var(--bg);
}

html[data-theme="night"] {
  --bg: #07111f;
  --panel: #101b2d;
  --ink: #eef5ff;
  --muted: #aebbd0;
  --line: rgba(222, 234, 255, .16);
  --brand: #62a8ff;
  --brand2: #26d3b2;
  --dark: #050a13;
  --shadow: 0 20px 48px rgba(0, 7, 18, .38);
  --hero-glow-a: rgba(98, 168, 255, .26);
  --hero-glow-b: rgba(38, 211, 178, .18);
  --hero-from: #0b1628;
  --hero-to: #132844;
  --header-bg: rgba(7, 17, 31, .9);
  --nav-ink: #dce8ff;
  --nav-active-bg: rgba(98, 168, 255, .16);
  --eyebrow-bg: rgba(98, 168, 255, .14);
  --eyebrow-ink: #9ccdff;
  --hero-card-bg: rgba(16, 27, 45, .72);
  --secondary-btn-bg: rgba(238, 245, 255, .08);
  --secondary-btn-border: rgba(174, 187, 208, .32);
  --feature-bg: rgba(98, 168, 255, .14);
  --code-bg: rgba(238, 245, 255, .1);
}

html[data-theme="mint"] {
  --bg: #f0fbf8;
  --panel: #ffffff;
  --ink: #11241f;
  --muted: #557269;
  --line: #cfe9e1;
  --brand: #057a63;
  --brand2: #2b72d6;
  --dark: #0b2420;
  --shadow: 0 18px 42px rgba(8, 68, 55, .12);
  --hero-glow-a: rgba(43, 114, 214, .18);
  --hero-glow-b: rgba(5, 122, 99, .22);
  --hero-from: #f8fffc;
  --hero-to: #dcf5ef;
  --header-bg: rgba(255, 255, 255, .9);
  --nav-ink: #25473f;
  --nav-active-bg: rgba(5, 122, 99, .1);
  --eyebrow-bg: rgba(5, 122, 99, .1);
  --eyebrow-ink: #05634f;
  --hero-card-bg: rgba(255, 255, 255, .78);
  --secondary-btn-bg: #ffffff;
  --secondary-btn-border: #b9ded4;
  --feature-bg: #e4f6f1;
  --code-bg: #e2f2ee;
}

html[data-theme="dawn"] {
  --bg: #fff7f4;
  --panel: #ffffff;
  --ink: #2a1720;
  --muted: #765965;
  --line: #efd2d8;
  --brand: #bd315f;
  --brand2: #d97706;
  --dark: #25131b;
  --shadow: 0 18px 42px rgba(102, 36, 64, .13);
  --hero-glow-a: rgba(189, 49, 95, .18);
  --hero-glow-b: rgba(217, 119, 6, .16);
  --hero-from: #fffaf7;
  --hero-to: #ffe7ee;
  --header-bg: rgba(255, 255, 255, .9);
  --nav-ink: #523244;
  --nav-active-bg: rgba(189, 49, 95, .1);
  --eyebrow-bg: rgba(189, 49, 95, .1);
  --eyebrow-ink: #9f2751;
  --hero-card-bg: rgba(255, 255, 255, .78);
  --secondary-btn-bg: #ffffff;
  --secondary-btn-border: #edc8d1;
  --feature-bg: #fff0f3;
  --code-bg: #f8e8ed;
}

body {
  transition: background-color .2s ease, color .2s ease;
}

.site-header {
  background: var(--header-bg, rgba(255, 255, 255, .9));
}

.main-nav a {
  color: var(--nav-ink, #31405a);
}

.main-nav a:hover,
.main-nav a.active {
  background: var(--nav-active-bg, #edf4ff);
}

.hero {
  background:
    radial-gradient(circle at 15% 10%, var(--hero-glow-a, rgba(31, 102, 209, .22)), transparent 34%),
    radial-gradient(circle at 90% 20%, var(--hero-glow-b, rgba(10, 166, 120, .2)), transparent 30%),
    linear-gradient(135deg, var(--hero-from, #f8fbff), var(--hero-to, #eef5ff));
}

.mini-hero {
  background: linear-gradient(135deg, var(--hero-from, #f9fbff), var(--hero-to, #eef6ff));
}

.hero h1,
.section-head h2,
.page h1,
.card h3,
.mini-hero h1,
.lab-category-body h3,
.lab-item-info h3,
.lab-detail-card h2,
.resource-card h2,
.resource-paths b {
  color: var(--ink);
}

.hero p,
.section-head p,
.mini-hero p,
.page .lead {
  color: var(--muted);
}

.eyebrow {
  background: var(--eyebrow-bg, #e8f2ff);
  color: var(--eyebrow-ink, #1457b8);
}

.hero-card {
  background: var(--hero-card-bg, rgba(255, 255, 255, .78));
}

.btn.secondary {
  background: var(--secondary-btn-bg, #fff);
  border-color: var(--secondary-btn-border, #cfe0fb);
}

.feature-icon {
  background: var(--feature-bg, #edf6ff);
}

code {
  background: var(--code-bg, #eef3fb);
}

.table-wrap,
.resource-nav a,
.labs-hero-note,
.lab-category-card,
.lab-item-card,
.lab-card,
.resource-paths {
  background: var(--panel);
  color: var(--ink);
}

th {
  background: var(--feature-bg, #f3f7fd);
  color: var(--ink);
}

td {
  color: var(--ink);
}

.notice {
  background: var(--panel);
  color: var(--ink);
}

.labs-hero,
.card-course-page .lab-page-hero {
  background: linear-gradient(135deg, var(--hero-from, #f8fbff), var(--hero-to, #eef5ff));
}

.labs-hero h1,
.labs-hero-note b,
.lab-resource-card h3.seedlab,
.card-course-page .lab-page-hero h1 {
  color: var(--ink);
}

.lab-category-body span,
.lab-type {
  background: var(--eyebrow-bg, #eef6ff);
  color: var(--eyebrow-ink, #1457b8);
}

.lab-item-image,
.lab-detail-image {
  background: var(--feature-bg, #f2f6fc);
}

html[data-theme] .w3-white,
html[data-theme] .w3-card-4 {
  background: var(--panel) !important;
  background-color: var(--panel) !important;
  color: var(--ink) !important;
}

html[data-theme] .seed-lab-page .w3-card-4 h2,
html[data-theme] .seed-lab-page .w3-card-4 h3 {
  color: var(--ink);
}

html[data-theme] .lab-intro-text p,
html[data-theme] .lab-resource-card ul,
html[data-theme] .lab-resource-card li {
  color: var(--muted);
}

html[data-theme] .lab-resource-card tt,
html[data-theme] .seed-lab-page tt {
  background: var(--code-bg, #eef3fb);
  color: var(--ink);
}

html[data-theme] h2.seedlab,
html[data-theme] h3.seedlab,
html[data-theme] .lab-resource-card .seedlab {
  color: var(--brand);
}

html[data-theme] .seed-page-header h2.seedlab,
html[data-theme] .seed-page-header h3.seedlab {
  color: #fff !important;
}

.theme-switcher {
  position: fixed;
  top: 92px;
  right: max(22px, calc((100vw - 1120px) / 2));
  z-index: 25;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: 0 14px 34px rgba(20, 31, 54, .12);
  backdrop-filter: blur(16px);
}

.theme-switcher button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.theme-switcher button[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
}

.theme-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(20, 31, 54, .12);
}

.theme-swatch-default {
  background: linear-gradient(135deg, #1f66d1 0 50%, #0aa678 50% 100%);
}

.theme-swatch-night {
  background: linear-gradient(135deg, #07111f 0 48%, #62a8ff 48% 76%, #26d3b2 76% 100%);
}

.theme-swatch-mint {
  background: linear-gradient(135deg, #f0fbf8 0 42%, #057a63 42% 72%, #2b72d6 72% 100%);
}

.theme-swatch-dawn {
  background: linear-gradient(135deg, #fff7f4 0 42%, #bd315f 42% 72%, #d97706 72% 100%);
}

html[data-theme="night"] .brand-logo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95)) drop-shadow(0 0 6px rgba(98, 168, 255, .45));
}

@media (max-width: 860px) {
  .theme-switcher {
    position: static;
    width: min(92vw, 360px);
    margin: 12px auto -20px;
    overflow-x: auto;
    justify-content: center;
  }

  .theme-switcher button {
    padding: 7px 9px;
    white-space: nowrap;
  }
}