/* Restrained editor palettes: neutral surfaces, one functional accent. */
:root,
[data-theme='graphite'] {
  color-scheme: dark;
  --canvas: #18191b;
  --surface: #202124;
  --raised: #27292c;
  --soft: #2b2d30;
  --border: #383b40;
  --ink: #e2e3e5;
  --secondary: #b0b3b8;
  --quiet: #858a92;
  --accent: #c8a66b;
  --accent-ink: #242019;
  --selection: #393329;
  --selection-border: #6b5b40;
  --dot: #34363a;
  --line: var(--border);
}
[data-theme='light'] {
  color-scheme: light;
  --canvas: #e8eaed;
  --surface: #fff;
  --raised: #f6f7f8;
  --soft: #eef0f2;
  --border: #d9dde2;
  --ink: #282d34;
  --secondary: #59636e;
  --quiet: #747e89;
  --accent: #527398;
  --accent-ink: #fff;
  --selection: #e9eff5;
  --selection-border: #a1b6ca;
  --dot: #e0e4e9;
}
[data-theme='navy'] {
  color-scheme: dark;
  --canvas: #141a23;
  --surface: #1b2330;
  --raised: #222c3a;
  --soft: #273343;
  --border: #344255;
  --ink: #dee4ed;
  --secondary: #a9b6c7;
  --quiet: #8192a8;
  --accent: #8da8cd;
  --accent-ink: #172232;
  --selection: #293b52;
  --selection-border: #526c8c;
  --dot: #304055;
}
[data-theme='paper'] {
  color-scheme: light;
  --canvas: #e8e4db;
  --surface: #f8f5ed;
  --raised: #f1ede3;
  --soft: #eae5da;
  --border: #d9d0c1;
  --ink: #38352f;
  --secondary: #6c6458;
  --quiet: #8b8070;
  --accent: #927653;
  --accent-ink: #fffaf1;
  --selection: #ede4d5;
  --selection-border: #c5af91;
  --dot: #ded6c9;
}
[data-theme='forest'] {
  color-scheme: dark;
  --canvas: #191e1b;
  --surface: #222a25;
  --raised: #2a322c;
  --soft: #303b32;
  --border: #3c493e;
  --ink: #e0e7df;
  --secondary: #aebdac;
  --quiet: #849783;
  --accent: #a3b394;
  --accent-ink: #222c22;
  --selection: #344333;
  --selection-border: #5a7154;
  --dot: #364239;
}
:root {
  background: var(--canvas);
  color: var(--ink);
}
.toolbar {
  background: var(--canvas);
  border-color: var(--border);
}
.brand,
h2,
h3 {
  color: var(--ink);
}
.logo {
  background: var(--accent);
  color: var(--accent-ink);
}
.toolbar-divider {
  background: var(--border);
}
.demo-badge {
  color: var(--quiet);
}
.demo-badge i {
  background: var(--quiet);
}
.theme-picker {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--quiet);
  font-size: 11px;
}
.theme-picker select {
  padding: 6px 25px 6px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}
.library nav {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px #0002;
}
nav button,
nav button span {
  color: var(--secondary);
}
nav button.active {
  background: var(--selection);
  color: var(--ink);
}
.explanation,
.visualization {
  background: var(--surface);
  border-color: var(--border);
}
.panel-title {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--border);
}
.panel-subtitle,
.eyebrow {
  color: var(--quiet);
}
.tags span {
  background: var(--soft);
  color: var(--secondary);
}
.input-drawer {
  background: var(--surface);
  border-color: var(--border);
}
.input-drawer > summary {
  color: var(--secondary);
}
.tabs button {
  color: var(--quiet);
}
.tabs button.selected {
  background: var(--soft);
  color: var(--ink);
}
#inputHint,
.input-bottom > span {
  color: var(--quiet);
}
textarea {
  color: var(--ink);
  outline-color: var(--accent);
}
#inputFeedback:not(:empty) {
  color: var(--secondary);
}
.path-item {
  color: var(--quiet);
}
.path-item b {
  border-color: var(--border);
}
.path-item.active {
  color: var(--secondary);
}
.path-item.active b {
  background: var(--soft);
  border-color: var(--border);
}
.path-line {
  background: var(--border);
}
#description {
  color: var(--secondary);
}
.idea {
  background: var(--raised);
  border-color: var(--border);
}
.idea > span {
  color: var(--ink);
}
.idea p {
  color: var(--secondary);
}
.section-label,
.section-label span {
  color: var(--quiet);
}
ol li {
  color: var(--secondary);
}
ol li:before {
  color: var(--quiet);
}
ol li.active {
  background: var(--selection);
  color: var(--ink);
  box-shadow: inset 2px 0 var(--accent);
}
.step-explanation > span {
  color: var(--accent);
}
.step-explanation p {
  color: var(--secondary);
}
.text-button {
  color: var(--secondary);
  background: transparent;
}
.viz-top {
  color: var(--secondary);
}
#targetBadge {
  background: var(--soft);
  color: var(--secondary);
}
.array-stage {
  background-image: radial-gradient(var(--dot) 0.75px, transparent 0.75px);
}
.value {
  background: var(--raised);
  border-color: var(--border);
  color: var(--ink);
}
.cell.active .value {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.cell.out .value {
  background: var(--surface);
  border-color: var(--border);
  color: var(--quiet);
  opacity: 0.5;
}
.cell.sorted .value {
  background: var(--selection);
  color: var(--ink);
  border-color: var(--selection-border);
}
.index,
.pointer {
  color: var(--quiet);
}
.legend {
  color: var(--quiet);
}
.current {
  background: var(--accent);
}
.available {
  background: var(--secondary);
}
.excluded {
  background: var(--border);
}
.data-editor {
  color: var(--secondary);
}
.variables-heading > span {
  color: var(--quiet);
}
.var {
  background: var(--raised);
  border-color: var(--border);
}
.name {
  color: var(--secondary);
}
.change b {
  color: var(--ink);
}
.change small {
  color: var(--quiet);
}
.var.changed {
  background: var(--selection);
  border-color: var(--selection-border);
}
.insight {
  background: var(--raised);
  color: var(--quiet);
}
.controls {
  background: var(--surface);
}
.step-count {
  color: var(--secondary);
}
.progress {
  background: var(--soft);
}
.progress i {
  background: var(--accent);
}
.unlock-card {
  background: var(--raised);
}
.unlock-icon,
.unlock-card h3 {
  color: var(--quiet);
}
.quiz-card,
.solution {
  background: var(--surface);
}
#quizFeedback {
  color: var(--secondary);
}
.solution pre {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--border);
}
.solution p {
  color: var(--secondary);
}
button {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--border);
}
button:hover:not(:disabled) {
  background: var(--soft);
}
.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.primary:hover:not(:disabled) {
  background: var(--accent);
  filter: brightness(1.1);
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
select:focus-visible {
  outline-color: var(--accent);
}
.solution select,
.data-form input {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.explanation-body,
.viz-body {
  scrollbar-color: var(--border) transparent;
}
::selection {
  background: var(--selection-border);
  color: var(--ink);
}
@media (max-width: 650px) {
  .theme-picker > span,
  .demo-badge {
    display: none;
  }
  .toolbar {
    gap: 9px;
  }
  .theme-picker select {
    max-width: 105px;
    padding-right: 4px;
  }
  .toolbar-spacer {
    min-width: 0;
  }
}