/*
 * Domain theme layer v17.
 *
 * Every knowledge domain owns only semantic visual tokens. The shared map
 * controls, DOM order and responsive layout continue to come from
 * knowledge-alpha-v13.css.
 *
 * v17: bright Paper Circuit surfaces with a distinct visual language for
 *      every domain. Shared content, controls and geometry remain unchanged.
 */

/* ---------- 1. 哲学与思维 · PHILOSOPHY ---------- */
#domainPreview[data-domain-theme="philosophy"],
#domainPreviewView[data-domain-theme="philosophy"],
#quizView[data-domain-theme="philosophy"],
#aiMapView[data-domain-theme="philosophy"] {
  --domain-bg: #13201c;
  --domain-bg-deep: #090f0d;
  --domain-panel: rgba(17, 30, 26, .96);
  --domain-panel-soft: rgba(28, 45, 39, .9);
  --domain-text: #f3ead2;
  --domain-muted: #a8b7a5;
  --domain-accent: #d9ad4d;
  --domain-accent-strong: #ffe29a;
  --domain-accent-2: #58a38b;
  --domain-accent-3: #d26d52;
  --domain-line: rgba(217, 173, 77, .3);
  --domain-map-surface: #0a1210;
  --domain-map-node-text: #f0e8d5;
  --domain-map-region-copy: #8eaa9c;
  --domain-edge-opacity: .4;
  --domain-glow: #d4a84b;
  --domain-glow-2: #58a38b;
  --domain-grid: rgba(88, 163, 139, .07);
  --domain-node-bg: rgba(18, 35, 30, .97);
  --domain-edge-color: rgba(217, 173, 77, .52);
  --domain-node-radius: 3px;
  --domain-heading-font: Georgia, "Times New Roman", "Microsoft YaHei", serif;
}

/* ---------- 2. 数学与逻辑 · MATHEMATICS ---------- */
#domainPreview[data-domain-theme="mathematics"],
#domainPreviewView[data-domain-theme="mathematics"],
#quizView[data-domain-theme="mathematics"],
#aiMapView[data-domain-theme="mathematics"] {
  --domain-bg: #071b22;
  --domain-bg-deep: #031014;
  --domain-panel: rgba(7, 27, 34, .97);
  --domain-panel-soft: rgba(10, 43, 52, .9);
  --domain-text: #e5fbff;
  --domain-muted: #88b9c2;
  --domain-accent: #36c7e8;
  --domain-accent-strong: #a9f1ff;
  --domain-accent-2: #ffb84d;
  --domain-accent-3: #77e28d;
  --domain-line: rgba(54, 199, 232, .3);
  --domain-map-surface: #031115;
  --domain-map-node-text: #d4e5fa;
  --domain-map-region-copy: #7695b8;
  --domain-edge-opacity: .45;
  --domain-glow: #3b9eff;
  --domain-glow-2: #ffb84d;
  --domain-grid: rgba(54, 199, 232, .08);
  --domain-node-bg: rgba(5, 31, 39, .97);
  --domain-edge-color: rgba(54, 199, 232, .56);
  --domain-node-radius: 2px;
  --domain-heading-font: Consolas, "SFMono-Regular", "Microsoft YaHei", monospace;
}

/* ---------- 3. 物质与宇宙 · UNIVERSE ---------- */
#domainPreview[data-domain-theme="universe"],
#domainPreviewView[data-domain-theme="universe"],
#quizView[data-domain-theme="universe"],
#aiMapView[data-domain-theme="universe"] {
  --domain-bg: #100b2b;
  --domain-bg-deep: #03020d;
  --domain-panel: rgba(16, 10, 43, .97);
  --domain-panel-soft: rgba(31, 20, 70, .9);
  --domain-text: #f2eeff;
  --domain-muted: #a59bd1;
  --domain-accent: #9a7cff;
  --domain-accent-strong: #d8ccff;
  --domain-accent-2: #38d6df;
  --domain-accent-3: #ff7eb3;
  --domain-line: rgba(154, 124, 255, .32);
  --domain-map-surface: #03020e;
  --domain-map-node-text: #e0d9fa;
  --domain-map-region-copy: #8478b5;
  --domain-edge-opacity: .45;
  --domain-glow: #8875ff;
  --domain-glow-2: #38d6df;
  --domain-grid: rgba(118, 198, 255, .06);
  --domain-node-bg: rgba(20, 13, 53, .97);
  --domain-edge-color: rgba(118, 213, 226, .5);
  --domain-node-radius: 50%;
  --domain-heading-font: "Trebuchet MS", "Microsoft YaHei", sans-serif;
}

/* ---------- 4. 生命与健康 · LIFE ---------- */
#domainPreview[data-domain-theme="life"],
#domainPreviewView[data-domain-theme="life"],
#quizView[data-domain-theme="life"],
#aiMapView[data-domain-theme="life"] {
  --domain-bg: #0c1a12;
  --domain-bg-deep: #050f08;
  --domain-panel: rgba(12, 28, 18, .96);
  --domain-panel-soft: rgba(18, 48, 30, .88);
  --domain-text: #e6f5e4;
  --domain-muted: #8aaf8a;
  --domain-accent: #4caf5c;
  --domain-accent-strong: #9ce89c;
  --domain-accent-2: #d8b84a;
  --domain-accent-3: #ef7f68;
  --domain-line: rgba(76, 175, 92, .25);
  --domain-map-surface: #050f08;
  --domain-map-node-text: #dcedd6;
  --domain-map-region-copy: #789d7a;
  --domain-edge-opacity: .4;
  --domain-glow: #4caf5c;
  --domain-glow-2: #d8b84a;
  --domain-grid: rgba(119, 204, 112, .06);
  --domain-node-bg: rgba(10, 36, 20, .96);
  --domain-edge-color: rgba(76, 175, 92, .48);
  --domain-node-radius: 30% 70% 50% 50% / 50% 40% 60% 50%;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 5. 心理与行为 · PSYCHOLOGY ---------- */
#domainPreview[data-domain-theme="psychology"],
#domainPreviewView[data-domain-theme="psychology"],
#quizView[data-domain-theme="psychology"],
#aiMapView[data-domain-theme="psychology"] {
  --domain-bg: #261529;
  --domain-bg-deep: #100a16;
  --domain-panel: rgba(37, 20, 42, .97);
  --domain-panel-soft: rgba(59, 31, 63, .9);
  --domain-text: #f8ebf4;
  --domain-muted: #c2a0ba;
  --domain-accent: #e17abf;
  --domain-accent-strong: #ffc0e7;
  --domain-accent-2: #69c6b2;
  --domain-accent-3: #f0bd59;
  --domain-line: rgba(225, 122, 191, .3);
  --domain-map-surface: #110915;
  --domain-map-node-text: #eddae8;
  --domain-map-region-copy: #a881ac;
  --domain-edge-opacity: .38;
  --domain-glow: #d462c8;
  --domain-glow-2: #69c6b2;
  --domain-grid: rgba(212, 98, 200, .045);
  --domain-node-bg: rgba(40, 18, 50, .96);
  --domain-edge-color: rgba(212, 98, 200, .45);
  --domain-node-radius: 16px;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 6. 历史与文明 · HISTORY ---------- */
#domainPreview[data-domain-theme="history"],
#domainPreviewView[data-domain-theme="history"],
#quizView[data-domain-theme="history"],
#aiMapView[data-domain-theme="history"] {
  --domain-bg: #171b25;
  --domain-bg-deep: #090c13;
  --domain-panel: rgba(23, 27, 37, .97);
  --domain-panel-soft: rgba(41, 42, 50, .9);
  --domain-text: #f0e7d3;
  --domain-muted: #b7aa92;
  --domain-accent: #c8954b;
  --domain-accent-strong: #f0cc84;
  --domain-accent-2: #8f3f4d;
  --domain-accent-3: #668da8;
  --domain-line: rgba(200, 149, 75, .3);
  --domain-map-surface: #0a0d14;
  --domain-map-node-text: #e0ceb8;
  --domain-map-region-copy: #a88668;
  --domain-edge-opacity: .42;
  --domain-glow: #c47d3a;
  --domain-glow-2: #8f3f4d;
  --domain-grid: rgba(196, 125, 58, .04);
  --domain-node-bg: rgba(31, 31, 37, .97);
  --domain-edge-color: rgba(196, 125, 58, .48);
  --domain-node-radius: 4px;
  --domain-heading-font: Georgia, "Times New Roman", "Microsoft YaHei", serif;
}

/* ---------- 7. 社会与文化 · SOCIETY ---------- */
#domainPreview[data-domain-theme="society"],
#domainPreviewView[data-domain-theme="society"],
#quizView[data-domain-theme="society"],
#aiMapView[data-domain-theme="society"] {
  --domain-bg: #151d20;
  --domain-bg-deep: #080e11;
  --domain-panel: rgba(20, 29, 32, .97);
  --domain-panel-soft: rgba(32, 46, 49, .9);
  --domain-text: #f4eeee;
  --domain-muted: #a9b7b5;
  --domain-accent: #e16f75;
  --domain-accent-strong: #ffb0ad;
  --domain-accent-2: #51b8b0;
  --domain-accent-3: #e5b650;
  --domain-line: rgba(225, 111, 117, .3);
  --domain-map-surface: #080f12;
  --domain-map-node-text: #e8d6dc;
  --domain-map-region-copy: #ad8a96;
  --domain-edge-opacity: .38;
  --domain-glow: #c8798a;
  --domain-glow-2: #51b8b0;
  --domain-grid: rgba(81, 184, 176, .06);
  --domain-node-bg: rgba(20, 35, 37, .97);
  --domain-edge-color: rgba(225, 111, 117, .52);
  --domain-node-radius: 12px 3px;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 8. 政治与法律 · POLITICS ---------- */
#domainPreview[data-domain-theme="politics"],
#domainPreviewView[data-domain-theme="politics"],
#quizView[data-domain-theme="politics"],
#aiMapView[data-domain-theme="politics"] {
  --domain-bg: #201517;
  --domain-bg-deep: #0d090a;
  --domain-panel: rgba(31, 21, 23, .97);
  --domain-panel-soft: rgba(48, 31, 33, .9);
  --domain-text: #f3ece1;
  --domain-muted: #b9aaa0;
  --domain-accent: #c95658;
  --domain-accent-strong: #ffaca6;
  --domain-accent-2: #d4aa4f;
  --domain-accent-3: #7194a6;
  --domain-line: rgba(201, 86, 88, .3);
  --domain-map-surface: #0e090b;
  --domain-map-node-text: #decec2;
  --domain-map-region-copy: #9d857a;
  --domain-edge-opacity: .4;
  --domain-glow: #ab735e;
  --domain-glow-2: #d4aa4f;
  --domain-grid: rgba(171, 115, 94, .04);
  --domain-node-bg: rgba(38, 23, 25, .97);
  --domain-edge-color: rgba(212, 170, 79, .48);
  --domain-node-radius: 2px;
  --domain-heading-font: Georgia, "Times New Roman", "Microsoft YaHei", serif;
}

/* ---------- 9. 经济与商业 · ECONOMICS ---------- */
#domainPreview[data-domain-theme="economics"],
#domainPreviewView[data-domain-theme="economics"],
#quizView[data-domain-theme="economics"],
#aiMapView[data-domain-theme="economics"] {
  --domain-bg: #0e1c12;
  --domain-bg-deep: #080f08;
  --domain-panel: rgba(14, 28, 18, .96);
  --domain-panel-soft: rgba(22, 42, 28, .88);
  --domain-text: #e8f0e4;
  --domain-muted: #9ab58e;
  --domain-accent: #7f9d70;
  --domain-accent-strong: #c5d9bb;
  --domain-accent-2: #d6ad4f;
  --domain-accent-3: #4d91b8;
  --domain-line: rgba(127, 157, 112, .26);
  --domain-map-surface: #080f08;
  --domain-map-node-text: #d8e4d2;
  --domain-map-region-copy: #8aa680;
  --domain-edge-opacity: .4;
  --domain-glow: #7f9d70;
  --domain-glow-2: #d6ad4f;
  --domain-grid: rgba(127, 157, 112, .04);
  --domain-node-bg: rgba(16, 34, 22, .96);
  --domain-edge-color: rgba(127, 157, 112, .48);
  --domain-node-radius: 6px;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 10. 技术与工程 · TECHNOLOGY ---------- */
#domainPreview[data-domain-theme="technology"],
#domainPreviewView[data-domain-theme="technology"],
#quizView[data-domain-theme="technology"],
#aiMapView[data-domain-theme="technology"] {
  --domain-bg: #11191c;
  --domain-bg-deep: #070c0e;
  --domain-panel: rgba(16, 25, 28, .97);
  --domain-panel-soft: rgba(25, 40, 44, .9);
  --domain-text: #e7f5f2;
  --domain-muted: #8eaaa8;
  --domain-accent: #43c3c6;
  --domain-accent-strong: #a8ffff;
  --domain-accent-2: #f0a84b;
  --domain-accent-3: #c45c78;
  --domain-line: rgba(67, 195, 198, .3);
  --domain-map-surface: #070d0f;
  --domain-map-node-text: #d4e6ee;
  --domain-map-region-copy: #78a2b5;
  --domain-edge-opacity: .42;
  --domain-glow: #5f9db3;
  --domain-glow-2: #f0a84b;
  --domain-grid: rgba(67, 195, 198, .075);
  --domain-node-bg: rgba(12, 31, 34, .97);
  --domain-edge-color: rgba(67, 195, 198, .56);
  --domain-node-radius: 1px;
  --domain-heading-font: Consolas, "SFMono-Regular", "Microsoft YaHei", monospace;
}

/* ---------- 11. 人工智能 · AI ---------- */
#domainPreview[data-domain-theme="ai"],
#domainPreviewView[data-domain-theme="ai"],
#quizView[data-domain-theme="ai"],
#aiMapView[data-domain-theme="ai"] {
  --domain-bg: #111b21;
  --domain-bg-deep: #060b10;
  --domain-panel: rgba(15, 27, 33, .97);
  --domain-panel-soft: rgba(21, 43, 48, .9);
  --domain-text: #eafbf8;
  --domain-muted: #8bbdb5;
  --domain-accent: #42d8b8;
  --domain-accent-strong: #b8fff1;
  --domain-accent-2: #8d78ff;
  --domain-accent-3: #f0b34e;
  --domain-line: rgba(66, 216, 184, .3);
  --domain-map-surface: #060c11;
  --domain-map-node-text: #d4f2ec;
  --domain-map-region-copy: #72b8ad;
  --domain-edge-opacity: .42;
  --domain-glow: #42cbb3;
  --domain-glow-2: #8d78ff;
  --domain-grid: rgba(66, 203, 179, .05);
  --domain-node-bg: rgba(14, 36, 42, .96);
  --domain-edge-color: rgba(66, 203, 179, .48);
  --domain-node-radius: 8px;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---------- 12. 艺术语言媒体 · ARTS & MEDIA ---------- */
#domainPreview[data-domain-theme="arts-media"],
#domainPreviewView[data-domain-theme="arts-media"],
#quizView[data-domain-theme="arts-media"],
#aiMapView[data-domain-theme="arts-media"] {
  --domain-bg: #211225;
  --domain-bg-deep: #0e0712;
  --domain-panel: rgba(31, 17, 35, .97);
  --domain-panel-soft: rgba(52, 25, 56, .9);
  --domain-text: #fff0f7;
  --domain-muted: #c5a2ba;
  --domain-accent: #ee659f;
  --domain-accent-strong: #ffc1dc;
  --domain-accent-2: #42c7cf;
  --domain-accent-3: #f2c84b;
  --domain-line: rgba(238, 101, 159, .3);
  --domain-map-surface: #0f0713;
  --domain-map-node-text: #ead6e0;
  --domain-map-region-copy: #b888a8;
  --domain-edge-opacity: .38;
  --domain-glow: #d26fa5;
  --domain-glow-2: #42c7cf;
  --domain-grid: rgba(242, 200, 75, .055);
  --domain-node-bg: rgba(42, 20, 42, .97);
  --domain-edge-color: rgba(66, 199, 207, .5);
  --domain-node-radius: 16px 3px 13px 5px;
  --domain-heading-font: "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ═══════════════════════════════════════════
   Shared surface styling
   ═══════════════════════════════════════════ */

#domainPreviewView[data-domain-theme],
#quizView[data-domain-theme] {
  --bg: var(--domain-bg);
  --bg-deep: var(--domain-bg-deep);
  --panel: var(--domain-panel);
  --text: var(--domain-text);
  --muted: var(--domain-muted);
  --cyan: var(--domain-accent);
  --cyan-strong: var(--domain-accent-strong);
  --line: var(--domain-line);
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--domain-glow) 22%, transparent), transparent 34%),
    var(--domain-bg-deep);
  color: var(--domain-text);
}

#domainPreviewView[data-domain-theme=ai] {
  background-color: #f7fbfd;
  background-image: url("./bg-ai-paper-circuit-v2.webp");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

#quizView[data-domain-theme] .quiz-navigator,
#quizView[data-domain-theme] .quiz-question-panel,
#quizView[data-domain-theme] .quiz-overview-drawer,
#quizView[data-domain-theme] .commerce-card {
  border-color: var(--domain-line);
  background: var(--domain-panel);
}

#domainPreviewView[data-domain-theme] .locked-domain-page {
  border-color: var(--domain-line);
  background: var(--domain-panel);
  box-shadow: 0 24px 64px rgba(34, 56, 70, .1);
}

#domainPreviewView[data-domain-theme] .locked-domain-page > p {
  color: var(--domain-muted);
  font-size: 15px;
  line-height: 1.75;
}

#domainPreviewView[data-domain-theme] .locked-outline div {
  border-color: color-mix(in srgb, var(--domain-accent) 30%, transparent);
  background: color-mix(in srgb, #ffffff 93%, var(--domain-accent) 7%);
}

#domainPreviewView[data-domain-theme] .locked-outline strong {
  color: var(--domain-text);
  font-size: 13px;
  line-height: 1.4;
}

#domainPreviewView[data-domain-theme] .locked-outline span {
  color: var(--domain-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

#domainPreviewView[data-domain-theme] .locked-geometry {
  border-color: color-mix(in srgb, var(--domain-accent) 25%, transparent);
  background: color-mix(in srgb, #ffffff 88%, var(--domain-accent) 12%);
}

#domainPreviewView[data-domain-theme] .locked-geometry::after {
  background: radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--domain-accent) 7%, transparent));
}

#domainPreviewView[data-domain-theme] .locked-geometry span {
  border-color: color-mix(in srgb, var(--domain-accent) 45%, transparent);
  background: color-mix(in srgb, #ffffff 86%, var(--domain-accent) 14%);
  color: color-mix(in srgb, var(--domain-text) 76%, var(--domain-muted) 24%);
  filter: none;
  font-size: 11.5px;
  font-weight: 600;
}

#domainPreviewView[data-domain-theme] .locked-facts div {
  border-color: color-mix(in srgb, var(--domain-accent) 22%, transparent);
  background: color-mix(in srgb, #ffffff 94%, var(--domain-accent) 6%);
}

#domainPreviewView[data-domain-theme] .locked-facts dt {
  color: var(--domain-muted);
  font-size: 10.5px;
}

#domainPreviewView[data-domain-theme] .locked-facts dd {
  color: var(--domain-accent-strong);
  font-size: 16px;
}

#domainPreviewView[data-domain-theme] .preview-note {
  color: var(--domain-muted);
  font-size: 10.5px;
  line-height: 1.6;
}

#domainPreview[data-domain-theme] {
  --panel: var(--domain-panel);
  --text: var(--domain-text);
  --muted: var(--domain-muted);
  --cyan: var(--domain-accent);
  --cyan-strong: var(--domain-accent-strong);
  --line: var(--domain-line);
  border-color: var(--domain-line);
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--domain-glow) 22%, transparent), transparent 34%),
    var(--domain-panel);
  color: var(--domain-text);
}

/* ═══════════════════════════════════════════
   Main map view
   ═══════════════════════════════════════════ */

#aiMapView[data-domain-theme] {
  --bg: var(--domain-bg);
  --bg-deep: var(--domain-bg-deep);
  --panel: var(--domain-panel);
  --panel-soft: var(--domain-panel-soft);
  --text: var(--domain-text);
  --muted: var(--domain-muted);
  --cyan: var(--domain-accent);
  --cyan-strong: var(--domain-accent-strong);
  --line: var(--domain-line);
  --map-surface: var(--domain-map-surface);
  --map-node-text: var(--domain-map-node-text);
  --map-region-copy: var(--domain-map-region-copy);
  --map-edge-opacity: var(--domain-edge-opacity);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--domain-glow) 18%, transparent), transparent 45%),
    radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--domain-glow-2) 10%, transparent), transparent 35%),
    linear-gradient(160deg, var(--domain-bg), var(--domain-bg-deep) 50%, var(--domain-bg));
  color: var(--domain-text);
}

#aiMapView[data-domain-theme] .map-viewport {
  background-color: var(--domain-map-surface);
}

#aiMapView[data-domain-theme] .map-canvas::after {
  background: none;
}

#aiMapView[data-domain-theme] .concept-panel {
  border-color: var(--domain-line);
  background-color: var(--domain-panel);
}

/* Map viewport - per-domain rich gradients */
#aiMapView[data-domain-theme=philosophy] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, color-mix(in srgb, #d4a84b 20%, transparent), transparent 40%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, #b8863a 12%, transparent), transparent 35%),
    radial-gradient(ellipse at 50% 80%, color-mix(in srgb, #d4a84b 8%, transparent), transparent 30%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=mathematics] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, #3b9eff 18%, transparent), transparent 35%),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, #1a6ecf 10%, transparent), transparent 28%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, #3b9eff 8%, transparent), transparent 30%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=universe] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 40% 30%, color-mix(in srgb, #8875ff 18%, transparent), transparent 35%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, #6a4fd6 12%, transparent), transparent 32%),
    radial-gradient(circle at 85% 20%, color-mix(in srgb, #b088ff 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=life] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 50%, color-mix(in srgb, #4caf5c 18%, transparent), transparent 38%),
    radial-gradient(circle at 75% 30%, color-mix(in srgb, #2e8a3e 10%, transparent), transparent 28%),
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, #4caf5c 8%, transparent), transparent 30%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=psychology] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, #d462c8 18%, transparent), transparent 36%),
    radial-gradient(circle at 20% 70%, color-mix(in srgb, #b040a4 10%, transparent), transparent 28%),
    radial-gradient(circle at 80% 25%, color-mix(in srgb, #d462c8 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=history] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 30%, color-mix(in srgb, #c47d3a 18%, transparent), transparent 38%),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, #9a5e28 10%, transparent), transparent 30%),
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, #c47d3a 8%, transparent), transparent 28%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=society] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 40% 30%, color-mix(in srgb, #c8798a 18%, transparent), transparent 36%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, #a85a6c 10%, transparent), transparent 28%),
    radial-gradient(circle at 15% 75%, color-mix(in srgb, #c8798a 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=politics] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, color-mix(in srgb, #ab735e 18%, transparent), transparent 38%),
    radial-gradient(circle at 75% 65%, color-mix(in srgb, #8a5640 10%, transparent), transparent 30%),
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, #ab735e 8%, transparent), transparent 28%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=economics] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, color-mix(in srgb, #7f9d70 18%, transparent), transparent 38%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, #5c7a4e 10%, transparent), transparent 30%),
    radial-gradient(circle at 85% 25%, color-mix(in srgb, #7f9d70 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=technology] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, #5f9db3 18%, transparent), transparent 36%),
    radial-gradient(circle at 20% 25%, color-mix(in srgb, #3a7a92 10%, transparent), transparent 28%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, #5f9db3 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=ai] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 30% 35%, color-mix(in srgb, #42cbb3 18%, transparent), transparent 36%),
    radial-gradient(circle at 70% 65%, color-mix(in srgb, #28a890 10%, transparent), transparent 30%),
    radial-gradient(ellipse at 50% 15%, color-mix(in srgb, #42cbb3 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

#aiMapView[data-domain-theme=arts-media] .map-viewport {
  background:
    linear-gradient(color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--domain-grid) 100%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 40% 30%, color-mix(in srgb, #d26fa5 18%, transparent), transparent 36%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, #b04078 10%, transparent), transparent 28%),
    radial-gradient(circle at 20% 75%, color-mix(in srgb, #d26fa5 8%, transparent), transparent 25%),
    var(--domain-map-surface);
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto;
}

/* Per-domain panel patterns */
#aiMapView[data-domain-theme=philosophy] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(125deg, color-mix(in srgb, #d4a84b 8%, transparent), transparent 40%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, #d4a84b 16%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=mathematics] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(125deg, color-mix(in srgb, #3b9eff 8%, transparent), transparent 40%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, #3b9eff 16%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=universe] .concept-panel {
  border-color: var(--domain-line);
  background:
    radial-gradient(ellipse at 88% 15%, color-mix(in srgb, #8875ff 10%, transparent), transparent 32%),
    radial-gradient(circle at 10% 50%, color-mix(in srgb, #6a4fd6 8%, transparent), transparent 28%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=life] .concept-panel {
  border-color: var(--domain-line);
  background:
    radial-gradient(ellipse at 95% 5%, color-mix(in srgb, #4caf5c 10%, transparent), transparent 32%),
    radial-gradient(ellipse at 5% 80%, color-mix(in srgb, #2e8a3e 6%, transparent), transparent 28%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=psychology] .concept-panel {
  border-color: var(--domain-line);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, #d462c8 10%, transparent), transparent 30%),
    radial-gradient(circle at 10% 80%, color-mix(in srgb, #b040a4 6%, transparent), transparent 28%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=history] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, #c47d3a 8%, transparent), transparent 40%),
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, #c47d3a 14%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=society] .concept-panel {
  border-color: var(--domain-line);
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, #c8798a 8%, transparent), transparent 30%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, #a85a6c 6%, transparent), transparent 28%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=politics] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, #ab735e 8%, transparent), transparent 40%),
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, #ab735e 14%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=economics] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, #7f9d70 8%, transparent), transparent 40%),
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, #7f9d70 14%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=technology] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, #5f9db3 8%, transparent), transparent 40%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, #5f9db3 14%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=ai] .concept-panel {
  border-color: var(--domain-line);
  background:
    linear-gradient(125deg, color-mix(in srgb, #42cbb3 8%, transparent), transparent 40%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, #42cbb3 16%, transparent), transparent 30%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=arts-media] .concept-panel {
  border-color: var(--domain-line);
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, #d26fa5 10%, transparent), transparent 30%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, #b04078 6%, transparent), transparent 28%),
    var(--domain-panel);
}

/* ═══════════════════════════════════════════
   Shared component styles
   ═══════════════════════════════════════════ */

#aiMapView[data-domain-theme] .ai-map-header,
#aiMapView[data-domain-theme] .map-toolbar,
#aiMapView[data-domain-theme] .route-footer {
  border-color: var(--domain-line);
  background: color-mix(in srgb, var(--domain-bg-deep) 92%, transparent);
}

#aiMapView[data-domain-theme] .ai-map-heading h1,
#aiMapView[data-domain-theme] .concept-card > h2 {
  color: var(--domain-text);
  font-family: var(--domain-heading-font);
}

#aiMapView[data-domain-theme] .knowledge-node {
  position: absolute;
  border-radius: var(--domain-node-radius);
  background: var(--domain-node-bg);
}

#aiMapView[data-domain-theme] .knowledge-edge line {
  stroke: var(--domain-edge-color);
}

#aiMapView[data-domain-theme] .knowledge-edge.is-selected-edge line {
  stroke: var(--domain-accent-strong);
}

#aiMapView[data-domain-theme] .map-mode-tabs button.is-active,
#aiMapView[data-domain-theme] .region-filters button.is-active,
#aiMapView[data-domain-theme] .concept-badge {
  border-color: color-mix(in srgb, var(--domain-accent) 34%, transparent);
  background: color-mix(in srgb, var(--domain-accent) 10%, transparent);
  color: var(--domain-accent-strong);
}

#aiMapView[data-domain-theme] button {
  position: relative;
}

#aiMapView[data-domain-theme] button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  min-width: 44px;
  min-height: 44px;
  content: "";
  transform: translate(-50%, -50%);
}

#aiMapView[data-domain-theme] .map-toolbar {
  padding-block: 5px;
}

#aiMapView[data-domain-theme] .node-search input {
  height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  #aiMapView[data-domain-theme],
  #aiMapView[data-domain-theme] *,
  #aiMapView[data-domain-theme] *::before,
  #aiMapView[data-domain-theme] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Distinct domain visual signatures ---------- */

#aiMapView[data-domain-theme] .ai-map-header,
#aiMapView[data-domain-theme] .map-toolbar,
#aiMapView[data-domain-theme] .route-footer {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--domain-accent-2) 8%, transparent), transparent 35%),
    color-mix(in srgb, var(--domain-bg-deep) 94%, transparent);
}

#aiMapView[data-domain-theme] .knowledge-region {
  border-color: color-mix(in srgb, var(--domain-accent) 38%, var(--domain-accent-2) 16%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--domain-accent) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--domain-accent-2) 5%, transparent);
  box-shadow: inset 0 0 36px color-mix(in srgb, var(--domain-accent-2) 5%, transparent);
}

#aiMapView[data-domain-theme] .knowledge-node {
  border-color: color-mix(in srgb, var(--domain-accent) 46%, var(--domain-accent-2) 18%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--domain-accent-2) 8%, transparent),
    0 7px 18px rgba(0, 0, 0, .26);
}

#aiMapView[data-domain-theme] .knowledge-node.is-selected {
  border-color: var(--domain-accent-strong);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--domain-accent) 12%, transparent),
    0 0 24px color-mix(in srgb, var(--domain-accent-2) 20%, transparent);
}

#aiMapView[data-domain-theme] .concept-panel {
  border-color: color-mix(in srgb, var(--domain-accent) 30%, var(--domain-accent-2) 14%);
  box-shadow: inset 1px 0 color-mix(in srgb, var(--domain-accent-strong) 10%, transparent);
}

#domainPreview[data-domain-theme],
#domainPreviewView[data-domain-theme],
#quizView[data-domain-theme] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--domain-accent-2) 9%, transparent), transparent 42%),
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--domain-accent) 16%, transparent), transparent 30%),
    var(--domain-bg-deep);
}

#domainPreviewView[data-domain-theme] .locked-domain-page {
  border-color: color-mix(in srgb, var(--domain-accent) 32%, var(--domain-accent-2) 16%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--domain-accent) 14%, transparent), transparent 40%),
    linear-gradient(315deg, color-mix(in srgb, var(--domain-accent-2) 12%, transparent), transparent 42%),
    var(--domain-panel);
  box-shadow:
    inset 0 1px color-mix(in srgb, var(--domain-accent-strong) 12%, transparent),
    0 26px 70px rgba(0, 0, 0, .28);
}

#domainPreviewView[data-domain-theme] .locked-outline > *,
#domainPreviewView[data-domain-theme] .locked-facts,
#quizView[data-domain-theme] .quiz-navigator,
#quizView[data-domain-theme] .quiz-question-panel,
#quizView[data-domain-theme] .quiz-overview-drawer,
#quizView[data-domain-theme] .commerce-card {
  border-color: color-mix(in srgb, var(--domain-accent) 26%, var(--domain-accent-2) 12%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--domain-accent-2) 7%, transparent), transparent 58%),
    color-mix(in srgb, var(--domain-panel-soft) 88%, transparent);
}

#domainPreviewView[data-domain-theme] .locked-geometry {
  border-color: color-mix(in srgb, var(--domain-accent-2) 24%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--domain-accent) 8%, transparent), transparent 45%),
    linear-gradient(315deg, color-mix(in srgb, var(--domain-accent-2) 8%, transparent), transparent 48%),
    var(--domain-map-surface);
}

#domainPreviewView[data-domain-theme] .locked-geometry span {
  border-color: color-mix(in srgb, var(--domain-accent) 40%, var(--domain-accent-2) 20%);
  background: color-mix(in srgb, var(--domain-accent-2) 8%, transparent);
}

#domainPreviewView[data-domain-theme] .eyebrow,
#domainPreviewView[data-domain-theme] .domain-preview-english,
#quizView[data-domain-theme] .eyebrow {
  color: var(--domain-accent-strong);
}

#domainPreview[data-domain-theme] .domain-preview-card {
  border-color: color-mix(in srgb, var(--domain-accent) 34%, var(--domain-accent-2) 14%);
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--domain-accent) 14%, transparent), transparent 42%),
    linear-gradient(320deg, color-mix(in srgb, var(--domain-accent-2) 11%, transparent), transparent 44%),
    var(--domain-panel);
}

/* Philosophy: ink, gold leaf, and marginalia. */
#aiMapView[data-domain-theme=philosophy] .map-viewport {
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(217, 173, 77, .035) 35px),
    linear-gradient(90deg, transparent 0 14%, rgba(88, 163, 139, .12) 14.1%, transparent 14.35%),
    radial-gradient(ellipse at 28% 38%, rgba(217, 173, 77, .16), transparent 38%),
    radial-gradient(ellipse at 76% 64%, rgba(88, 163, 139, .13), transparent 36%),
    #0a1210;
}

#aiMapView[data-domain-theme=philosophy] .knowledge-region {
  border-style: double;
  border-radius: 5px 22px 5px 22px;
}

#aiMapView[data-domain-theme=philosophy] .knowledge-node {
  background: linear-gradient(145deg, rgba(40, 55, 43, .98), rgba(16, 29, 25, .98));
  box-shadow: inset 3px 0 rgba(217, 173, 77, .25), 0 8px 20px rgba(0, 0, 0, .28);
}

#aiMapView[data-domain-theme=philosophy] .concept-panel {
  background:
    linear-gradient(90deg, rgba(217, 173, 77, .13), transparent 2px),
    linear-gradient(145deg, rgba(88, 163, 139, .12), transparent 42%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=philosophy] .knowledge-edge line {
  stroke: rgba(217, 173, 77, .55);
}

/* Mathematics: cyan blueprint with amber construction marks. */
#aiMapView[data-domain-theme=mathematics] .map-viewport {
  background:
    linear-gradient(rgba(54, 199, 232, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 199, 232, .065) 1px, transparent 1px),
    linear-gradient(rgba(54, 199, 232, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 199, 232, .025) 1px, transparent 1px),
    linear-gradient(135deg, transparent 48%, rgba(255, 184, 77, .08) 49%, transparent 50%),
    #031115;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto, auto;
}

#aiMapView[data-domain-theme=mathematics] .knowledge-region {
  border-style: dashed;
  border-radius: 0;
  background: rgba(54, 199, 232, .035);
}

#aiMapView[data-domain-theme=mathematics] .knowledge-node {
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(54, 199, 232, .13), rgba(5, 31, 39, .98) 38%);
  box-shadow: inset 0 -2px rgba(255, 184, 77, .22), 0 7px 16px rgba(0, 0, 0, .24);
}

#aiMapView[data-domain-theme=mathematics] .concept-panel {
  background:
    linear-gradient(rgba(54, 199, 232, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 199, 232, .035) 1px, transparent 1px),
    var(--domain-panel);
  background-size: 18px 18px, 18px 18px, auto;
}

#aiMapView[data-domain-theme=mathematics] .knowledge-edge line {
  stroke: rgba(54, 199, 232, .62);
  stroke-dasharray: 2 3;
}

/* Universe: star field, violet nebula, and orbital nodes. */
#aiMapView[data-domain-theme=universe] .map-viewport {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .78) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 12%, rgba(56, 214, 223, .7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 62%, rgba(255, 126, 179, .65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 76%, rgba(255, 255, 255, .55) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 30% 40%, rgba(154, 124, 255, .22), transparent 42%),
    radial-gradient(ellipse at 72% 64%, rgba(56, 214, 223, .15), transparent 38%),
    #03020e;
}

#aiMapView[data-domain-theme=universe] .knowledge-region {
  border-style: solid;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(154, 124, 255, .1), rgba(56, 214, 223, .025) 52%, transparent 72%);
  box-shadow: inset 0 0 48px rgba(154, 124, 255, .08), 0 0 24px rgba(56, 214, 223, .04);
}

#aiMapView[data-domain-theme=universe] .knowledge-node {
  background: radial-gradient(circle at 34% 28%, rgba(216, 204, 255, .2), rgba(20, 13, 53, .98) 56%);
  box-shadow: 0 0 18px rgba(154, 124, 255, .16), inset 0 0 12px rgba(56, 214, 223, .08);
}

#aiMapView[data-domain-theme=universe] .concept-panel {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(154, 124, 255, .2), transparent 36%),
    radial-gradient(ellipse at 8% 76%, rgba(56, 214, 223, .1), transparent 32%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=universe] .knowledge-edge line {
  stroke: rgba(105, 220, 230, .55);
  filter: drop-shadow(0 0 2px rgba(154, 124, 255, .45));
}

/* Life: organic cellular fields with chlorophyll and pollen accents. */
#aiMapView[data-domain-theme=life] .map-viewport {
  background:
    radial-gradient(ellipse at 18% 30%, rgba(76, 175, 92, .2), transparent 34%),
    radial-gradient(ellipse at 78% 26%, rgba(216, 184, 74, .13), transparent 28%),
    radial-gradient(ellipse at 58% 78%, rgba(239, 127, 104, .09), transparent 30%),
    repeating-linear-gradient(125deg, transparent 0 44px, rgba(119, 204, 112, .03) 45px, transparent 46px),
    #050f08;
}

#aiMapView[data-domain-theme=life] .knowledge-region {
  border-radius: 30% 70% 46% 54% / 54% 38% 62% 46%;
  background: radial-gradient(ellipse at 42% 38%, rgba(76, 175, 92, .11), transparent 68%);
}

#aiMapView[data-domain-theme=life] .knowledge-node {
  background: linear-gradient(145deg, rgba(76, 175, 92, .16), rgba(10, 36, 20, .98) 56%, rgba(216, 184, 74, .07));
  box-shadow: inset 0 0 12px rgba(156, 232, 156, .08), 0 8px 18px rgba(0, 0, 0, .25);
}

#aiMapView[data-domain-theme=life] .concept-panel {
  background:
    radial-gradient(ellipse at 90% 8%, rgba(76, 175, 92, .17), transparent 34%),
    linear-gradient(125deg, rgba(216, 184, 74, .07), transparent 38%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=life] .knowledge-edge line {
  stroke: rgba(116, 202, 111, .56);
  stroke-linecap: round;
}

/* Psychology: layered perception fields in rose, mint, and warm gold. */
#aiMapView[data-domain-theme=psychology] .map-viewport {
  background:
    repeating-radial-gradient(ellipse at 48% 44%, transparent 0 76px, rgba(225, 122, 191, .045) 77px, transparent 79px),
    linear-gradient(125deg, rgba(105, 198, 178, .1), transparent 34%),
    linear-gradient(305deg, rgba(240, 189, 89, .08), transparent 38%),
    #110915;
}

#aiMapView[data-domain-theme=psychology] .knowledge-region {
  border-radius: 52% 48% 62% 38% / 43% 57% 42% 58%;
  background: linear-gradient(145deg, rgba(225, 122, 191, .1), rgba(105, 198, 178, .04));
}

#aiMapView[data-domain-theme=psychology] .knowledge-node {
  background: linear-gradient(135deg, rgba(225, 122, 191, .17), rgba(40, 18, 50, .98) 52%, rgba(105, 198, 178, .09));
  box-shadow: inset 0 0 14px rgba(255, 192, 231, .07), 0 8px 20px rgba(0, 0, 0, .28);
}

#aiMapView[data-domain-theme=psychology] .concept-panel {
  background:
    linear-gradient(140deg, rgba(225, 122, 191, .14), transparent 38%),
    linear-gradient(320deg, rgba(105, 198, 178, .09), transparent 42%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=psychology] .knowledge-edge line {
  stroke: rgba(225, 122, 191, .52);
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

/* History: archival ink, chronology rules, and oxblood annotations. */
#aiMapView[data-domain-theme=history] .map-viewport {
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(200, 149, 75, .045) 48px),
    linear-gradient(90deg, transparent 0 17%, rgba(143, 63, 77, .15) 17.1%, rgba(143, 63, 77, .15) 17.25%, transparent 17.35%),
    linear-gradient(145deg, rgba(102, 141, 168, .08), transparent 36%),
    #0a0d14;
}

#aiMapView[data-domain-theme=history] .knowledge-region {
  border-style: solid;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(200, 149, 75, .08), rgba(102, 141, 168, .025));
  box-shadow: inset 4px 0 rgba(143, 63, 77, .12);
}

#aiMapView[data-domain-theme=history] .knowledge-node {
  background: linear-gradient(180deg, rgba(200, 149, 75, .14), rgba(31, 31, 37, .98) 42%);
  box-shadow: inset 0 -2px rgba(143, 63, 77, .24), 0 7px 16px rgba(0, 0, 0, .3);
}

#aiMapView[data-domain-theme=history] .concept-panel {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(200, 149, 75, .025) 32px),
    linear-gradient(145deg, rgba(143, 63, 77, .12), transparent 35%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=history] .knowledge-edge line {
  stroke: rgba(200, 149, 75, .56);
  stroke-dasharray: 5 2;
}

/* Society: woven networks in coral, teal, and civic gold. */
#aiMapView[data-domain-theme=society] .map-viewport {
  background:
    repeating-linear-gradient(45deg, transparent 0 52px, rgba(225, 111, 117, .038) 53px, transparent 54px),
    repeating-linear-gradient(-45deg, transparent 0 52px, rgba(81, 184, 176, .038) 53px, transparent 54px),
    radial-gradient(ellipse at 28% 30%, rgba(225, 111, 117, .13), transparent 35%),
    radial-gradient(ellipse at 74% 68%, rgba(81, 184, 176, .12), transparent 38%),
    #080f12;
}

#aiMapView[data-domain-theme=society] .knowledge-region {
  border-radius: 22px 4px 22px 4px;
  background: linear-gradient(135deg, rgba(225, 111, 117, .09), rgba(81, 184, 176, .045));
}

#aiMapView[data-domain-theme=society] .knowledge-node {
  background: linear-gradient(135deg, rgba(225, 111, 117, .14), rgba(20, 35, 37, .98) 48%, rgba(81, 184, 176, .11));
  box-shadow: inset 0 -2px rgba(229, 182, 80, .18), 0 8px 18px rgba(0, 0, 0, .27);
}

#aiMapView[data-domain-theme=society] .concept-panel {
  background:
    linear-gradient(135deg, rgba(225, 111, 117, .13), transparent 35%),
    linear-gradient(315deg, rgba(81, 184, 176, .1), transparent 38%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=society] .knowledge-edge line {
  stroke: color-mix(in srgb, var(--domain-accent) 58%, var(--domain-accent-2) 42%);
}

/* Politics: institutional charcoal, civic red, and seal gold. */
#aiMapView[data-domain-theme=politics] .map-viewport {
  background:
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(201, 86, 88, .04) 93px, transparent 94px),
    repeating-linear-gradient(0deg, transparent 0 138px, rgba(212, 170, 79, .035) 139px, transparent 140px),
    linear-gradient(145deg, rgba(201, 86, 88, .12), transparent 35%),
    linear-gradient(325deg, rgba(113, 148, 166, .08), transparent 38%),
    #0e090b;
}

#aiMapView[data-domain-theme=politics] .knowledge-region {
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(212, 170, 79, .07), rgba(201, 86, 88, .045));
  box-shadow: inset 0 3px rgba(212, 170, 79, .1);
}

#aiMapView[data-domain-theme=politics] .knowledge-node {
  background: linear-gradient(180deg, rgba(201, 86, 88, .16), rgba(38, 23, 25, .98) 45%);
  box-shadow: inset 0 -2px rgba(212, 170, 79, .2), 0 8px 18px rgba(0, 0, 0, .3);
}

#aiMapView[data-domain-theme=politics] .concept-panel {
  background:
    linear-gradient(90deg, rgba(201, 86, 88, .14), transparent 3px),
    linear-gradient(145deg, rgba(212, 170, 79, .09), transparent 38%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=politics] .knowledge-edge line {
  stroke: rgba(212, 170, 79, .52);
  stroke-dasharray: 8 3;
}

/* Economics: ledger green, market gold, and analytical blue. */
#aiMapView[data-domain-theme=economics] .map-viewport {
  background:
    linear-gradient(rgba(127, 157, 112, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 157, 112, .045) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(214, 173, 79, .07) 120px, transparent 121px),
    linear-gradient(135deg, rgba(77, 145, 184, .09), transparent 35%),
    #080f08;
  background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

#aiMapView[data-domain-theme=economics] .knowledge-region {
  border-radius: 5px;
  background: linear-gradient(150deg, rgba(127, 157, 112, .11), rgba(214, 173, 79, .035));
}

#aiMapView[data-domain-theme=economics] .knowledge-node {
  background: linear-gradient(145deg, rgba(127, 157, 112, .16), rgba(16, 34, 22, .98) 54%, rgba(214, 173, 79, .08));
  box-shadow: inset 0 -2px rgba(214, 173, 79, .19), 0 7px 18px rgba(0, 0, 0, .26);
}

#aiMapView[data-domain-theme=economics] .concept-panel {
  background:
    linear-gradient(rgba(127, 157, 112, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 157, 112, .025) 1px, transparent 1px),
    linear-gradient(145deg, rgba(214, 173, 79, .08), transparent 36%),
    var(--domain-panel);
  background-size: 24px 24px, 24px 24px, auto, auto;
}

#aiMapView[data-domain-theme=economics] .knowledge-edge line {
  stroke: rgba(189, 175, 91, .54);
  stroke-dasharray: 2 2;
}

/* Technology: circuit board grid with cyan traces and amber signal points. */
#aiMapView[data-domain-theme=technology] .map-viewport {
  background:
    radial-gradient(circle, rgba(240, 168, 75, .22) 0 1px, transparent 1.5px),
    linear-gradient(rgba(67, 195, 198, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 195, 198, .055) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 48%, rgba(196, 92, 120, .055) 49%, transparent 50%),
    #070d0f;
  background-size: 64px 64px, 32px 32px, 32px 32px, 128px 128px, auto;
}

#aiMapView[data-domain-theme=technology] .knowledge-region {
  border-style: dashed;
  border-radius: 0;
  background: linear-gradient(135deg, rgba(67, 195, 198, .08), rgba(240, 168, 75, .03));
}

#aiMapView[data-domain-theme=technology] .knowledge-node {
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(67, 195, 198, .17), rgba(12, 31, 34, .98) 42%, rgba(240, 168, 75, .08));
  box-shadow: inset 2px 0 rgba(67, 195, 198, .24), inset -2px 0 rgba(240, 168, 75, .16), 0 7px 16px rgba(0, 0, 0, .28);
}

#aiMapView[data-domain-theme=technology] .concept-panel {
  background:
    linear-gradient(rgba(67, 195, 198, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 195, 198, .03) 1px, transparent 1px),
    linear-gradient(145deg, rgba(240, 168, 75, .08), transparent 36%),
    var(--domain-panel);
  background-size: 22px 22px, 22px 22px, auto, auto;
}

#aiMapView[data-domain-theme=technology] .knowledge-edge line {
  stroke: rgba(67, 195, 198, .62);
  stroke-dasharray: 7 2 1 2;
}

/* AI: neural mesh with mint signals, violet depth, and amber decisions. */
#aiMapView[data-domain-theme=ai] .map-viewport {
  background:
    radial-gradient(circle at 20% 26%, rgba(66, 216, 184, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 18%, rgba(141, 120, 255, .2) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 74%, rgba(240, 179, 78, .16) 0 1px, transparent 2px),
    repeating-linear-gradient(60deg, transparent 0 72px, rgba(66, 216, 184, .035) 73px, transparent 74px),
    repeating-linear-gradient(-60deg, transparent 0 72px, rgba(141, 120, 255, .03) 73px, transparent 74px),
    #060c11;
}

#aiMapView[data-domain-theme=ai] .knowledge-region {
  border-radius: 18px 4px;
  background: linear-gradient(135deg, rgba(66, 216, 184, .09), rgba(141, 120, 255, .045));
}

#aiMapView[data-domain-theme=ai] .knowledge-node {
  background: linear-gradient(135deg, rgba(66, 216, 184, .17), rgba(14, 36, 42, .98) 48%, rgba(141, 120, 255, .12));
  box-shadow: inset 0 0 13px rgba(184, 255, 241, .07), 0 0 16px rgba(66, 216, 184, .08);
}

#aiMapView[data-domain-theme=ai] .concept-panel {
  background:
    linear-gradient(135deg, rgba(66, 216, 184, .14), transparent 36%),
    linear-gradient(315deg, rgba(141, 120, 255, .12), transparent 40%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=ai] .knowledge-edge line {
  stroke: color-mix(in srgb, var(--domain-accent) 72%, var(--domain-accent-2) 28%);
  stroke-dasharray: 5 3;
}

/* Arts and media: editorial collage in magenta, cyan, and process yellow. */
#aiMapView[data-domain-theme=arts-media] .map-viewport {
  background:
    repeating-linear-gradient(120deg, transparent 0 86px, rgba(238, 101, 159, .055) 87px, transparent 90px),
    repeating-linear-gradient(30deg, transparent 0 112px, rgba(66, 199, 207, .045) 113px, transparent 116px),
    linear-gradient(140deg, rgba(242, 200, 75, .1), transparent 32%),
    linear-gradient(320deg, rgba(238, 101, 159, .14), transparent 38%),
    #0f0713;
}

#aiMapView[data-domain-theme=arts-media] .knowledge-region {
  border-radius: 28px 4px 38px 7px;
  background: linear-gradient(135deg, rgba(238, 101, 159, .11), rgba(66, 199, 207, .05) 58%, rgba(242, 200, 75, .035));
}

#aiMapView[data-domain-theme=arts-media] .knowledge-node {
  background: linear-gradient(125deg, rgba(238, 101, 159, .18), rgba(42, 20, 42, .98) 46%, rgba(66, 199, 207, .13));
  box-shadow: inset 0 -2px rgba(242, 200, 75, .2), 0 8px 20px rgba(0, 0, 0, .28);
}

#aiMapView[data-domain-theme=arts-media] .concept-panel {
  background:
    linear-gradient(130deg, rgba(238, 101, 159, .16), transparent 34%),
    linear-gradient(310deg, rgba(66, 199, 207, .12), transparent 38%),
    linear-gradient(45deg, rgba(242, 200, 75, .05), transparent 42%),
    var(--domain-panel);
}

#aiMapView[data-domain-theme=arts-media] .knowledge-edge line {
  stroke: color-mix(in srgb, var(--domain-accent) 48%, var(--domain-accent-2) 52%);
  stroke-dasharray: 1 3;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════
   v17 · Paper Circuit light palettes
   Unquoted theme selectors intentionally override the legacy dark tokens
   without changing the stable theme contract above.
   ═══════════════════════════════════════════ */

#domainPreview[data-domain-theme=philosophy],
#domainPreviewView[data-domain-theme=philosophy],
#quizView[data-domain-theme=philosophy],
#conceptDetailView[data-domain-theme=philosophy],
#aiMapView[data-domain-theme=philosophy] {
  --domain-bg: #fbfaf4;
  --domain-bg-deep: #f4f0e3;
  --domain-panel: rgba(255, 255, 252, .98);
  --domain-panel-soft: rgba(247, 243, 232, .95);
  --domain-text: #22302a;
  --domain-muted: #6f7d76;
  --domain-accent: #9a6b13;
  --domain-accent-strong: #744c00;
  --domain-accent-2: #23806d;
  --domain-accent-3: #c65d48;
  --domain-line: rgba(35, 128, 109, .24);
  --domain-map-surface: #fdfcf7;
  --domain-map-node-text: #22302a;
  --domain-map-region-copy: #6d7f75;
  --domain-edge-opacity: .62;
  --domain-glow: #d9ad4d;
  --domain-glow-2: #58a38b;
  --domain-grid: rgba(35, 128, 109, .08);
  --domain-node-bg: rgba(255, 255, 252, .98);
  --domain-edge-color: rgba(154, 107, 19, .62);
}

#domainPreview[data-domain-theme=mathematics],
#domainPreviewView[data-domain-theme=mathematics],
#quizView[data-domain-theme=mathematics],
#conceptDetailView[data-domain-theme=mathematics],
#aiMapView[data-domain-theme=mathematics] {
  --domain-bg: #f7fbff;
  --domain-bg-deep: #edf5fb;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(239, 247, 253, .95);
  --domain-text: #172d42;
  --domain-muted: #63798d;
  --domain-accent: #176bd6;
  --domain-accent-strong: #0b4fa5;
  --domain-accent-2: #df8b14;
  --domain-accent-3: #2f8e54;
  --domain-line: rgba(23, 107, 214, .22);
  --domain-map-surface: #fbfdff;
  --domain-map-node-text: #172d42;
  --domain-map-region-copy: #63798d;
  --domain-edge-opacity: .66;
  --domain-glow: #59a5ff;
  --domain-glow-2: #f2ad45;
  --domain-grid: rgba(23, 107, 214, .09);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(23, 107, 214, .62);
}

#domainPreview[data-domain-theme=universe],
#domainPreviewView[data-domain-theme=universe],
#quizView[data-domain-theme=universe],
#conceptDetailView[data-domain-theme=universe],
#aiMapView[data-domain-theme=universe] {
  --domain-bg: #fbfaff;
  --domain-bg-deep: #f1effb;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(245, 242, 253, .95);
  --domain-text: #292443;
  --domain-muted: #70698b;
  --domain-accent: #6e56cf;
  --domain-accent-strong: #523aa8;
  --domain-accent-2: #178aa3;
  --domain-accent-3: #c75083;
  --domain-line: rgba(110, 86, 207, .22);
  --domain-map-surface: #fdfcff;
  --domain-map-node-text: #292443;
  --domain-map-region-copy: #716a8e;
  --domain-edge-opacity: .62;
  --domain-glow: #9b8ae4;
  --domain-glow-2: #53b6c7;
  --domain-grid: rgba(110, 86, 207, .07);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(66, 143, 165, .62);
}

#domainPreview[data-domain-theme=life],
#domainPreviewView[data-domain-theme=life],
#quizView[data-domain-theme=life],
#conceptDetailView[data-domain-theme=life],
#aiMapView[data-domain-theme=life] {
  --domain-bg: #f8fcf8;
  --domain-bg-deep: #eef7ef;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(240, 248, 241, .95);
  --domain-text: #1f3526;
  --domain-muted: #657a6b;
  --domain-accent: #278243;
  --domain-accent-strong: #1b6230;
  --domain-accent-2: #b8870e;
  --domain-accent-3: #c85f4e;
  --domain-line: rgba(39, 130, 67, .22);
  --domain-map-surface: #fbfefb;
  --domain-map-node-text: #1f3526;
  --domain-map-region-copy: #667d6d;
  --domain-edge-opacity: .62;
  --domain-glow: #72b980;
  --domain-glow-2: #d9b84e;
  --domain-grid: rgba(39, 130, 67, .07);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(39, 130, 67, .6);
}

#domainPreview[data-domain-theme=psychology],
#domainPreviewView[data-domain-theme=psychology],
#quizView[data-domain-theme=psychology],
#conceptDetailView[data-domain-theme=psychology],
#aiMapView[data-domain-theme=psychology] {
  --domain-bg: #fff9fc;
  --domain-bg-deep: #f8eef5;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(251, 241, 247, .95);
  --domain-text: #392538;
  --domain-muted: #806d7e;
  --domain-accent: #b44387;
  --domain-accent-strong: #8b2f67;
  --domain-accent-2: #2f8777;
  --domain-accent-3: #b58116;
  --domain-line: rgba(180, 67, 135, .21);
  --domain-map-surface: #fffdfd;
  --domain-map-node-text: #392538;
  --domain-map-region-copy: #806d7e;
  --domain-edge-opacity: .6;
  --domain-glow: #d985b8;
  --domain-glow-2: #69b6a7;
  --domain-grid: rgba(180, 67, 135, .06);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(180, 67, 135, .58);
}

#domainPreview[data-domain-theme=history],
#domainPreviewView[data-domain-theme=history],
#quizView[data-domain-theme=history],
#conceptDetailView[data-domain-theme=history],
#aiMapView[data-domain-theme=history] {
  --domain-bg: #fcfaf5;
  --domain-bg-deep: #f3ede3;
  --domain-panel: rgba(255, 255, 252, .98);
  --domain-panel-soft: rgba(247, 241, 231, .95);
  --domain-text: #352d27;
  --domain-muted: #7d7167;
  --domain-accent: #9a631e;
  --domain-accent-strong: #71450f;
  --domain-accent-2: #7e3747;
  --domain-accent-3: #3b6f93;
  --domain-line: rgba(154, 99, 30, .22);
  --domain-map-surface: #fffdf8;
  --domain-map-node-text: #352d27;
  --domain-map-region-copy: #7d7167;
  --domain-edge-opacity: .62;
  --domain-glow: #c99b5d;
  --domain-glow-2: #a56874;
  --domain-grid: rgba(154, 99, 30, .065);
  --domain-node-bg: rgba(255, 255, 252, .98);
  --domain-edge-color: rgba(154, 99, 30, .6);
}

#domainPreview[data-domain-theme=society],
#domainPreviewView[data-domain-theme=society],
#quizView[data-domain-theme=society],
#conceptDetailView[data-domain-theme=society],
#aiMapView[data-domain-theme=society] {
  --domain-bg: #fffafa;
  --domain-bg-deep: #f5f7f7;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(247, 249, 249, .95);
  --domain-text: #302d33;
  --domain-muted: #74747b;
  --domain-accent: #c34851;
  --domain-accent-strong: #982f37;
  --domain-accent-2: #23837b;
  --domain-accent-3: #b78313;
  --domain-line: rgba(35, 131, 123, .22);
  --domain-map-surface: #fffefe;
  --domain-map-node-text: #302d33;
  --domain-map-region-copy: #74747b;
  --domain-edge-opacity: .6;
  --domain-glow: #df858b;
  --domain-glow-2: #6ab9b3;
  --domain-grid: rgba(35, 131, 123, .065);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(137, 95, 91, .6);
}

#domainPreview[data-domain-theme=politics],
#domainPreviewView[data-domain-theme=politics],
#quizView[data-domain-theme=politics],
#conceptDetailView[data-domain-theme=politics],
#aiMapView[data-domain-theme=politics] {
  --domain-bg: #fffafa;
  --domain-bg-deep: #f6eff0;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(249, 242, 243, .95);
  --domain-text: #36292b;
  --domain-muted: #7f6e71;
  --domain-accent: #a93d43;
  --domain-accent-strong: #802b30;
  --domain-accent-2: #9a751d;
  --domain-accent-3: #416b84;
  --domain-line: rgba(169, 61, 67, .21);
  --domain-map-surface: #fffdfd;
  --domain-map-node-text: #36292b;
  --domain-map-region-copy: #7f6e71;
  --domain-edge-opacity: .62;
  --domain-glow: #cf7f83;
  --domain-glow-2: #c8aa5b;
  --domain-grid: rgba(169, 61, 67, .055);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(154, 117, 29, .6);
}

#domainPreview[data-domain-theme=economics],
#domainPreviewView[data-domain-theme=economics],
#quizView[data-domain-theme=economics],
#conceptDetailView[data-domain-theme=economics],
#aiMapView[data-domain-theme=economics] {
  --domain-bg: #f9fcf8;
  --domain-bg-deep: #eef5ef;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(241, 247, 242, .95);
  --domain-text: #27362a;
  --domain-muted: #6d7d70;
  --domain-accent: #3f7547;
  --domain-accent-strong: #2d5833;
  --domain-accent-2: #a87812;
  --domain-accent-3: #35759a;
  --domain-line: rgba(63, 117, 71, .21);
  --domain-map-surface: #fcfefc;
  --domain-map-node-text: #27362a;
  --domain-map-region-copy: #6d7d70;
  --domain-edge-opacity: .62;
  --domain-glow: #82ad87;
  --domain-glow-2: #cfaa50;
  --domain-grid: rgba(63, 117, 71, .065);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(102, 125, 75, .6);
}

#domainPreview[data-domain-theme=technology],
#domainPreviewView[data-domain-theme=technology],
#quizView[data-domain-theme=technology],
#conceptDetailView[data-domain-theme=technology],
#aiMapView[data-domain-theme=technology] {
  --domain-bg: #f8fcfd;
  --domain-bg-deep: #edf7f8;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(239, 248, 249, .95);
  --domain-text: #20363a;
  --domain-muted: #687e82;
  --domain-accent: #0d7f8a;
  --domain-accent-strong: #075d65;
  --domain-accent-2: #c47c14;
  --domain-accent-3: #ad4765;
  --domain-line: rgba(13, 127, 138, .22);
  --domain-map-surface: #fbfefe;
  --domain-map-node-text: #20363a;
  --domain-map-region-copy: #687e82;
  --domain-edge-opacity: .64;
  --domain-glow: #62b4ba;
  --domain-glow-2: #dfa149;
  --domain-grid: rgba(13, 127, 138, .075);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(13, 127, 138, .62);
}

#domainPreview[data-domain-theme=ai],
#domainPreviewView[data-domain-theme=ai],
#quizView[data-domain-theme=ai],
#conceptDetailView[data-domain-theme=ai],
#aiMapView[data-domain-theme=ai] {
  --domain-bg: #f8fcfb;
  --domain-bg-deep: #edf7f6;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(239, 248, 247, .95);
  --domain-text: #1d3040;
  --domain-muted: #65798a;
  --domain-accent: #176bd6;
  --domain-accent-strong: #0c4fa5;
  --domain-accent-2: #168b72;
  --domain-accent-3: #c78716;
  --domain-line: rgba(23, 107, 214, .22);
  --domain-map-surface: #fbfefe;
  --domain-map-node-text: #1d3040;
  --domain-map-region-copy: #65798a;
  --domain-edge-opacity: .66;
  --domain-glow: #5d9be9;
  --domain-glow-2: #5cb6a1;
  --domain-grid: rgba(23, 107, 214, .075);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(23, 107, 214, .62);
}

#domainPreview[data-domain-theme=arts-media],
#domainPreviewView[data-domain-theme=arts-media],
#quizView[data-domain-theme=arts-media],
#conceptDetailView[data-domain-theme=arts-media],
#aiMapView[data-domain-theme=arts-media] {
  --domain-bg: #fff9fc;
  --domain-bg-deep: #f7eff5;
  --domain-panel: rgba(255, 255, 255, .98);
  --domain-panel-soft: rgba(251, 242, 248, .95);
  --domain-text: #3a2733;
  --domain-muted: #806d78;
  --domain-accent: #bd3f79;
  --domain-accent-strong: #912b5a;
  --domain-accent-2: #247f8a;
  --domain-accent-3: #b68b12;
  --domain-line: rgba(189, 63, 121, .21);
  --domain-map-surface: #fffdfd;
  --domain-map-node-text: #3a2733;
  --domain-map-region-copy: #806d78;
  --domain-edge-opacity: .6;
  --domain-glow: #db83ab;
  --domain-glow-2: #68b5bd;
  --domain-grid: rgba(189, 63, 121, .06);
  --domain-node-bg: rgba(255, 255, 255, .98);
  --domain-edge-color: rgba(100, 101, 130, .6);
}

/* Shared light application shell. */
#aiMapView[data-domain-theme] {
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--domain-glow) 12%, transparent), transparent 30%),
    radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--domain-glow-2) 8%, transparent), transparent 32%),
    var(--domain-bg);
  color: var(--domain-text);
}

#aiMapView[data-domain-theme] .ai-map-header,
#aiMapView[data-domain-theme] .map-toolbar,
#aiMapView[data-domain-theme] .route-footer {
  background: rgba(255, 255, 255, .92);
  border-color: var(--domain-line);
  color: var(--domain-text);
  box-shadow: 0 1px 0 rgba(18, 38, 50, .04);
}

#aiMapView[data-domain-theme] .ai-map-header {
  box-shadow: 0 5px 20px rgba(31, 55, 70, .055);
}

#aiMapView[data-domain-theme] .ai-map-heading h1 {
  font-size: 18px;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .ai-map-heading p {
  color: var(--domain-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

#aiMapView[data-domain-theme] .map-toolbar {
  box-shadow: 0 7px 22px rgba(31, 55, 70, .06);
}

#aiMapView[data-domain-theme] .node-search input {
  font-size: 12px;
}

#aiMapView[data-domain-theme] .map-mode-tabs button,
#aiMapView[data-domain-theme] .region-filters button {
  color: color-mix(in srgb, var(--domain-text) 72%, var(--domain-muted) 28%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .map-viewport {
  background-color: var(--domain-map-surface);
}

#aiMapView[data-domain-theme] .knowledge-region {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--domain-accent) 34%, transparent);
  background: color-mix(in srgb, #ffffff 95%, var(--domain-accent) 5%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

#aiMapView[data-domain-theme] .region-copy {
  max-width: 190px;
  padding: 8px 10px 9px;
  border-left: 3px solid var(--region-color);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 5px 16px rgba(32, 53, 66, .075);
}

#aiMapView[data-domain-theme] .knowledge-region .region-index {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .knowledge-region h3 {
  color: color-mix(in srgb, var(--domain-text) 82%, var(--region-color) 18%);
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .knowledge-region p {
  max-width: 180px;
  color: var(--domain-muted);
  font-size: 10px;
  line-height: 1.5;
}

#aiMapView[data-domain-theme] .knowledge-node {
  position: absolute;
  min-width: 96px;
  max-width: 152px;
  padding: 10px 12px;
  border-width: 1.25px;
  color: var(--domain-map-node-text);
  border-color: color-mix(in srgb, var(--domain-accent) 58%, #ffffff 42%);
  background: color-mix(in srgb, #ffffff 94%, var(--domain-accent) 6%);
  box-shadow: 0 5px 14px rgba(35, 52, 65, .11);
}

#aiMapView[data-domain-theme] .knowledge-node span {
  color: var(--domain-map-node-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .knowledge-node small {
  color: var(--domain-muted);
  font-size: 8.5px;
  line-height: 1.35;
}

#aiMapView[data-domain-theme] .knowledge-node:hover {
  color: var(--domain-accent-strong);
  border-color: var(--domain-accent);
  background: #ffffff;
  box-shadow: 0 7px 18px rgba(35, 52, 65, .13);
}

#aiMapView[data-domain-theme] .knowledge-node.is-related {
  color: var(--domain-accent-strong);
  border-color: color-mix(in srgb, var(--domain-accent) 72%, #ffffff 28%);
  background: #ffffff;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--domain-accent) 8%, transparent),
    0 7px 18px rgba(35, 52, 65, .13);
}

#aiMapView[data-domain-theme] .knowledge-node.is-selected {
  color: #ffffff;
  border-color: var(--domain-accent-strong);
  background: var(--domain-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--domain-accent) 23%, transparent);
}

#aiMapView[data-domain-theme] .knowledge-node.is-selected span {
  color: #ffffff;
}

#aiMapView[data-domain-theme] .knowledge-node.is-selected small {
  color: rgba(255, 255, 255, .78);
}

#aiMapView[data-domain-theme] .knowledge-edge line {
  opacity: .3;
  stroke-width: 1;
}

#aiMapView[data-domain-theme] .knowledge-edge.is-route-edge line {
  opacity: .48;
}

#aiMapView[data-domain-theme] .knowledge-edge.is-selected-edge line {
  opacity: .96;
  stroke: var(--domain-accent-strong);
  stroke-width: 2.15;
}

#aiMapView[data-domain-theme] .knowledge-edge text {
  fill: var(--domain-accent-strong);
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 3px;
  paint-order: stroke;
  font-size: calc(10px * var(--inverse-scale, 1));
  font-weight: 700;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .concept-panel {
  border-color: var(--domain-line);
  background: rgba(255, 255, 255, .98);
  color: var(--domain-text);
  box-shadow: -16px 0 40px rgba(35, 52, 65, .1);
}

#aiMapView[data-domain-theme] .concept-card {
  padding: 26px 28px;
}

#aiMapView[data-domain-theme] .concept-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .concept-card > h2 {
  margin-top: 12px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .concept-meta {
  font-size: 10.5px;
  line-height: 1.5;
}

#aiMapView[data-domain-theme] .concept-block {
  padding: 14px 0;
}

#aiMapView[data-domain-theme] .concept-block h3,
#aiMapView[data-domain-theme] .concept-sources h3 {
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .concept-block p {
  font-size: 13px;
  line-height: 1.72;
}

#aiMapView[data-domain-theme] .concept-relations button {
  padding: 10px 11px;
  font-size: 11px;
  line-height: 1.5;
}

#aiMapView[data-domain-theme] .concept-more summary {
  font-size: 11px;
  font-weight: 650;
}

#aiMapView[data-domain-theme] .concept-more p {
  font-size: 12px;
}

#aiMapView[data-domain-theme] .concept-sources a {
  font-size: 10.5px;
  line-height: 1.45;
}

#aiMapView[data-domain-theme] .concept-updated {
  font-size: 9.5px;
}

#aiMapView[data-domain-theme] .route-footer button,
#aiMapView[data-domain-theme] .route-footer strong {
  font-size: 11px;
  letter-spacing: 0;
}

#aiMapView[data-domain-theme] .concept-card,
#aiMapView[data-domain-theme] .concept-card section,
#aiMapView[data-domain-theme] .concept-card li,
#aiMapView[data-domain-theme] .concept-card button {
  color: var(--domain-text);
  border-color: var(--domain-line);
}

#aiMapView[data-domain-theme] .concept-meta,
#aiMapView[data-domain-theme] .concept-block h3,
#aiMapView[data-domain-theme] .concept-sources h3,
#aiMapView[data-domain-theme] .concept-more summary,
#aiMapView[data-domain-theme] .concept-updated {
  color: var(--domain-muted);
}

#aiMapView[data-domain-theme] .concept-block,
#aiMapView[data-domain-theme] .concept-more,
#aiMapView[data-domain-theme] .concept-sources {
  border-color: var(--domain-line);
}

#aiMapView[data-domain-theme] .concept-block p,
#aiMapView[data-domain-theme] .concept-more p {
  color: color-mix(in srgb, var(--domain-text) 88%, #ffffff 12%);
}

#aiMapView[data-domain-theme] .concept-relations button {
  color: var(--domain-text);
  border-color: color-mix(in srgb, var(--domain-accent) 24%, transparent);
  background: color-mix(in srgb, #ffffff 94%, var(--domain-accent) 6%);
}

#aiMapView[data-domain-theme] .concept-sources a {
  color: var(--domain-accent);
}

#aiMapView[data-domain-theme] .concept-badge,
#aiMapView[data-domain-theme] .map-mode-tabs button.is-active,
#aiMapView[data-domain-theme] .region-filters button.is-active {
  color: var(--domain-accent-strong);
  border-color: color-mix(in srgb, var(--domain-accent) 42%, transparent);
  background: color-mix(in srgb, #ffffff 88%, var(--domain-accent) 12%);
}

#aiMapView[data-domain-theme] button,
#aiMapView[data-domain-theme] input {
  color: var(--domain-text);
}

#aiMapView[data-domain-theme] .ghost-button,
#aiMapView[data-domain-theme] .map-toolbar button,
#aiMapView[data-domain-theme] .route-footer button,
#aiMapView[data-domain-theme] .node-search input {
  border-color: var(--domain-line);
  background: rgba(255, 255, 255, .9);
}

#domainPreviewView[data-domain-theme],
#quizView[data-domain-theme] {
  background:
    linear-gradient(var(--domain-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--domain-grid) 1px, transparent 1px),
    var(--domain-bg);
  background-size: 32px 32px, 32px 32px, auto;
  color: var(--domain-text);
}

#domainPreview[data-domain-theme],
#domainPreviewView[data-domain-theme] .locked-domain-page,
#quizView[data-domain-theme] .quiz-navigator,
#quizView[data-domain-theme] .quiz-question-panel,
#quizView[data-domain-theme] .quiz-overview-drawer,
#quizView[data-domain-theme] .commerce-card {
  color: var(--domain-text);
  border-color: var(--domain-line);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 14px 34px rgba(35, 52, 65, .1);
}

#domainPreviewView[data-domain-theme] .locked-domain-page p,
#domainPreviewView[data-domain-theme] .locked-outline span,
#domainPreviewView[data-domain-theme] .locked-geometry span {
  color: var(--domain-muted);
}

#domainPreviewView[data-domain-theme] .locked-geometry::after {
  background: none;
}

#domainPreviewView[data-domain-theme] .locked-facts div {
  min-width: 0;
}

#domainPreviewView[data-domain-theme] .locked-facts dd {
  color: var(--domain-accent-strong);
  overflow-wrap: anywhere;
}

#quizView[data-domain-theme] .quiz-nav-button,
#quizView[data-domain-theme] .quiz-answer-area > input,
#quizView[data-domain-theme] .quiz-option {
  color: var(--domain-text);
  border-color: var(--domain-line);
  background: color-mix(in srgb, #ffffff 94%, var(--domain-accent) 6%);
}

#quizView[data-domain-theme] .quiz-nav-button[data-state="current"] {
  color: #ffffff;
  border-color: var(--domain-accent);
  background: var(--domain-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--domain-accent) 14%, transparent);
}

#quizView[data-domain-theme] .quiz-nav-button[data-state="answered"],
#quizView[data-domain-theme] .quiz-nav-button.is-answered {
  color: var(--domain-accent-strong);
  background: color-mix(in srgb, #ffffff 84%, var(--domain-accent) 16%);
}

#quizView[data-domain-theme] .quiz-score-components,
#quizView[data-domain-theme] .quiz-error-count,
#quizView[data-domain-theme] .quiz-best-price,
#quizView[data-domain-theme] .quiz-next-price,
#quizView[data-domain-theme] .quiz-review-card p,
#quizView[data-domain-theme] .commerce-details {
  color: var(--domain-muted);
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header {
  border-bottom-color: rgba(24, 66, 86, .12);
  background: rgba(255, 255, 255, .94);
  color: #1d3040;
  box-shadow: 0 1px 0 rgba(24, 66, 86, .04);
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-brand-mark {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(from 35deg, #168b72, #4f93e8, #8d78d6, #d66d89, #d6a72f, #168b72) border-box;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-brand {
  color: #1d3040;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-nav {
  border-color: rgba(24, 66, 86, .12);
  background: rgba(24, 66, 86, .045);
  color: #7a8993;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-nav > [aria-current="page"] {
  background: rgba(22, 139, 114, .09);
  box-shadow: inset 0 0 0 1px rgba(22, 139, 114, .16);
  color: #126f5d;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header .header-chip,
body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header .ghost-button {
  color: #536976;
  border-color: rgba(24, 66, 86, .14);
  background: rgba(248, 251, 252, .9);
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header-progress > span {
  border-left-color: rgba(24, 66, 86, .12);
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header-progress small {
  color: #71838e;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header-progress strong {
  color: #168b72;
}

body:has(#aiMapView[data-domain-theme]:not([hidden]),
          #domainPreviewView[data-domain-theme]:not([hidden]),
          #quizView[data-domain-theme]:not([hidden])) .alpha-header .header-chip strong {
  color: #168b72;
}

/* Philosophy: ivory manuscript paper, gold rules and jade marginalia. */
#aiMapView[data-domain-theme=philosophy] .map-viewport {
  background:
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(154, 107, 19, .065) 36px),
    linear-gradient(90deg, transparent 0 14%, rgba(35, 128, 109, .16) 14.1%, transparent 14.35%),
    #fdfcf7;
}

#aiMapView[data-domain-theme=philosophy] .knowledge-node {
  background: color-mix(in srgb, #ffffff 92%, #d9ad4d 8%);
  box-shadow: inset 3px 0 rgba(35, 128, 109, .18), 0 4px 12px rgba(61, 70, 64, .08);
}

#aiMapView[data-domain-theme=philosophy] .concept-panel {
  background:
    linear-gradient(90deg, rgba(154, 107, 19, .16), transparent 2px),
    #fffefb;
}

/* Mathematics: blue graph paper with amber construction marks. */
#aiMapView[data-domain-theme=mathematics] .map-viewport {
  background:
    linear-gradient(rgba(23, 107, 214, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 214, .09) 1px, transparent 1px),
    linear-gradient(rgba(23, 107, 214, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 214, .035) 1px, transparent 1px),
    #fbfdff;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto;
}

#aiMapView[data-domain-theme=mathematics] .knowledge-node {
  background: color-mix(in srgb, #ffffff 92%, #4c9bf2 8%);
  box-shadow: inset 0 -2px rgba(223, 139, 20, .2), 0 4px 12px rgba(35, 70, 105, .09);
}

#aiMapView[data-domain-theme=mathematics] .concept-panel {
  background:
    linear-gradient(rgba(23, 107, 214, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 214, .035) 1px, transparent 1px),
    #ffffff;
  background-size: 18px 18px, 18px 18px, auto;
}

/* Universe: daylight observatory chart with sparse orbital points. */
#aiMapView[data-domain-theme=universe] .map-viewport {
  background:
    radial-gradient(circle at 12% 18%, rgba(110, 86, 207, .32) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 12%, rgba(23, 138, 163, .28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 62%, rgba(199, 80, 131, .25) 0 1px, transparent 1.5px),
    repeating-radial-gradient(circle at 48% 52%, transparent 0 82px, rgba(110, 86, 207, .055) 83px, transparent 84px),
    #fdfcff;
}

#aiMapView[data-domain-theme=universe] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #9b8ae4 9%);
  box-shadow: 0 0 16px rgba(110, 86, 207, .12);
}

#aiMapView[data-domain-theme=universe] .concept-panel {
  background:
    radial-gradient(ellipse at 92% 8%, rgba(110, 86, 207, .09), transparent 34%),
    #ffffff;
}

/* Discovery questions: bright paper surface with domain color and clear action roles. */
#aiMapView[data-domain-theme] .concept-question {
  border-color: color-mix(in srgb, var(--domain-accent) 36%, #d9e5e2);
  background: #f7fbfa;
  box-shadow: 0 12px 30px rgba(35, 52, 65, .12);
}

#aiMapView[data-domain-theme] .concept-question h3,
#aiMapView[data-domain-theme] .concept-question-prompt {
  color: #183431;
}

#aiMapView[data-domain-theme] .concept-question-balance {
  color: #42655f;
  border-color: #d6e5e1;
  background: #edf5f2;
}

#aiMapView[data-domain-theme] .concept-question-clue {
  color: #284744;
  border-color: var(--domain-accent-strong);
  background: color-mix(in srgb, var(--domain-accent) 9%, #edf7f8);
}

#aiMapView[data-domain-theme] .concept-question-options label {
  color: #243d39;
  border-color: #d9e5e2;
  background: #ffffff;
}

#aiMapView[data-domain-theme] .concept-question-options label:hover {
  border-color: color-mix(in srgb, var(--domain-accent-strong) 48%, #b9cbc6);
}

#aiMapView[data-domain-theme] .concept-question-options label:has(input:checked) {
  border-color: var(--domain-accent-strong);
  background: color-mix(in srgb, var(--domain-accent) 10%, #ffffff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--domain-accent) 18%, transparent);
}

#aiMapView[data-domain-theme] .concept-question-actions .primary-button {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--domain-accent-strong) 78%, #173f38);
  background: var(--domain-accent-strong);
}

#aiMapView[data-domain-theme] .concept-question-actions .ghost-button {
  color: #76510b;
  border-color: #ead49c;
  background: #fff8e8;
}

#aiMapView[data-domain-theme] .concept-question-actions .ghost-button:nth-of-type(3) {
  color: #55536c;
  border-color: #d8d8e8;
  background: #f5f4fa;
}

#aiMapView[data-domain-theme] .concept-question-actions .concept-recharge-button {
  color: var(--domain-accent-strong);
  border-color: transparent;
  background: transparent;
}

#aiMapView[data-domain-theme] .concept-question-message,
#aiMapView[data-domain-theme] .concept-question-loading,
#aiMapView[data-domain-theme] .concept-question-explanation {
  color: #496660;
}

#aiMapView[data-domain-theme] .concept-question-error {
  color: #a34444;
}

#aiMapView[data-domain-theme] .concept-question-answer {
  color: #173b35;
  border-color: #d9e5e2;
}

/* Life: pale cellular field with chlorophyll and pollen accents. */
#aiMapView[data-domain-theme=life] .map-viewport {
  background:
    repeating-radial-gradient(ellipse at 34% 42%, transparent 0 65px, rgba(39, 130, 67, .055) 66px, transparent 68px),
    radial-gradient(ellipse at 76% 28%, rgba(184, 135, 14, .08), transparent 27%),
    #fbfefb;
}

#aiMapView[data-domain-theme=life] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #72b980 9%);
  box-shadow: inset 0 0 12px rgba(39, 130, 67, .08), 0 4px 12px rgba(45, 78, 52, .08);
}

#aiMapView[data-domain-theme=life] .concept-panel {
  background:
    radial-gradient(ellipse at 92% 8%, rgba(39, 130, 67, .09), transparent 34%),
    #ffffff;
}

/* Psychology: perception rings in rose, mint and warm gold. */
#aiMapView[data-domain-theme=psychology] .map-viewport {
  background:
    repeating-radial-gradient(ellipse at 48% 44%, transparent 0 76px, rgba(180, 67, 135, .06) 77px, transparent 79px),
    linear-gradient(125deg, rgba(47, 135, 119, .06), transparent 34%),
    #fffdfd;
}

#aiMapView[data-domain-theme=psychology] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #d985b8 9%);
  box-shadow: inset 0 0 12px rgba(47, 135, 119, .07), 0 4px 12px rgba(83, 50, 74, .08);
}

#aiMapView[data-domain-theme=psychology] .concept-panel {
  background:
    linear-gradient(140deg, rgba(180, 67, 135, .08), transparent 38%),
    #ffffff;
}

/* History: archival chronology paper with oxblood annotations. */
#aiMapView[data-domain-theme=history] .map-viewport {
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(154, 99, 30, .065) 48px),
    linear-gradient(90deg, transparent 0 17%, rgba(126, 55, 71, .16) 17.1%, transparent 17.35%),
    #fffdf8;
}

#aiMapView[data-domain-theme=history] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #c99b5d 9%);
  box-shadow: inset 0 -2px rgba(126, 55, 71, .18), 0 4px 12px rgba(72, 58, 44, .08);
}

#aiMapView[data-domain-theme=history] .concept-panel {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(154, 99, 30, .035) 32px),
    #fffefb;
}

/* Society: woven civic network in coral, teal and gold. */
#aiMapView[data-domain-theme=society] .map-viewport {
  background:
    repeating-linear-gradient(45deg, transparent 0 52px, rgba(195, 72, 81, .055) 53px, transparent 54px),
    repeating-linear-gradient(-45deg, transparent 0 52px, rgba(35, 131, 123, .055) 53px, transparent 54px),
    #fffefe;
}

#aiMapView[data-domain-theme=society] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #df858b 9%);
  box-shadow: inset 0 -2px rgba(183, 131, 19, .16), 0 4px 12px rgba(75, 56, 62, .08);
}

#aiMapView[data-domain-theme=society] .concept-panel {
  background:
    linear-gradient(135deg, rgba(195, 72, 81, .075), transparent 35%),
    linear-gradient(315deg, rgba(35, 131, 123, .065), transparent 38%),
    #ffffff;
}

/* Politics: institutional paper with civic-red columns and seal-gold rules. */
#aiMapView[data-domain-theme=politics] .map-viewport {
  background:
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(169, 61, 67, .055) 93px, transparent 94px),
    repeating-linear-gradient(0deg, transparent 0 138px, rgba(154, 117, 29, .05) 139px, transparent 140px),
    #fffdfd;
}

#aiMapView[data-domain-theme=politics] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #cf7f83 9%);
  box-shadow: inset 0 -2px rgba(154, 117, 29, .17), 0 4px 12px rgba(74, 48, 51, .08);
}

#aiMapView[data-domain-theme=politics] .concept-panel {
  background:
    linear-gradient(90deg, rgba(169, 61, 67, .13), transparent 3px),
    #ffffff;
}

/* Economics: ledger grid with market-gold checkpoints. */
#aiMapView[data-domain-theme=economics] .map-viewport {
  background:
    linear-gradient(rgba(63, 117, 71, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 117, 71, .065) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(168, 120, 18, .07) 120px, transparent 121px),
    #fcfefc;
  background-size: 40px 40px, 40px 40px, auto, auto;
}

#aiMapView[data-domain-theme=economics] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #82ad87 9%);
  box-shadow: inset 0 -2px rgba(168, 120, 18, .17), 0 4px 12px rgba(53, 75, 57, .08);
}

#aiMapView[data-domain-theme=economics] .concept-panel {
  background:
    linear-gradient(rgba(63, 117, 71, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 117, 71, .03) 1px, transparent 1px),
    #ffffff;
  background-size: 24px 24px, 24px 24px, auto;
}

/* Technology: fine circuit grid with cyan traces and amber signal points. */
#aiMapView[data-domain-theme=technology] .map-viewport {
  background:
    radial-gradient(circle, rgba(196, 124, 20, .18) 0 1px, transparent 1.5px),
    linear-gradient(rgba(13, 127, 138, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 127, 138, .075) 1px, transparent 1px),
    #fbfefe;
  background-size: 64px 64px, 32px 32px, 32px 32px, auto;
}

#aiMapView[data-domain-theme=technology] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #62b4ba 9%);
  box-shadow: inset 2px 0 rgba(13, 127, 138, .17), inset -2px 0 rgba(196, 124, 20, .13), 0 4px 12px rgba(44, 74, 77, .08);
}

#aiMapView[data-domain-theme=technology] .concept-panel {
  background:
    linear-gradient(rgba(13, 127, 138, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 127, 138, .035) 1px, transparent 1px),
    #ffffff;
  background-size: 22px 22px, 22px 22px, auto;
}

/* AI: Paper Circuit graph with cobalt structure, mint learning and amber decisions. */
#aiMapView[data-domain-theme=ai] .map-viewport {
  background: #fbfefe url("./bg-ai-paper-circuit-v2.webp") center top / 100% auto repeat-y;
}

#aiMapView[data-domain-theme=ai] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #5d9be9 9%);
  box-shadow: inset 0 0 0 1px rgba(22, 139, 114, .07), 0 4px 12px rgba(37, 69, 91, .09);
}

#aiMapView[data-domain-theme=ai] .concept-panel {
  background:
    linear-gradient(90deg, rgba(23, 107, 214, .16), transparent 3px),
    linear-gradient(135deg, rgba(22, 139, 114, .055), transparent 34%),
    #ffffff;
}

/* Arts and media: bright editorial paper with cyan and process-yellow cuts. */
#aiMapView[data-domain-theme=arts-media] .map-viewport {
  background:
    repeating-linear-gradient(120deg, transparent 0 86px, rgba(189, 63, 121, .065) 87px, transparent 90px),
    repeating-linear-gradient(30deg, transparent 0 112px, rgba(36, 127, 138, .055) 113px, transparent 116px),
    linear-gradient(140deg, rgba(182, 139, 18, .055), transparent 32%),
    #fffdfd;
}

#aiMapView[data-domain-theme=arts-media] .knowledge-node {
  background: color-mix(in srgb, #ffffff 91%, #db83ab 9%);
  box-shadow: inset 0 -2px rgba(182, 139, 18, .16), 0 4px 12px rgba(79, 49, 67, .08);
}

#aiMapView[data-domain-theme=arts-media] .concept-panel {
  background:
    linear-gradient(130deg, rgba(189, 63, 121, .075), transparent 34%),
    linear-gradient(310deg, rgba(36, 127, 138, .06), transparent 38%),
    #ffffff;
}