/* Shared appearance controls and tokens for the explorer and guided demo. */
.appearance-control {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  white-space: nowrap;
  margin: 0;
  font-weight: 500;
  color: var(--muted);
  order: 1;
}
.appearance-control select {
  width: 132px;
  min-height: 34px;
  padding: 5px 24px 5px 10px;
  border: 1px solid var(--border, var(--line));
  border-radius: 9px;
  background: var(--appearance-surface, #fff);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.appearance-control select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.site-head nav {
  align-items: center;
}
html[data-appearance="night"] {
  --appearance-bg: #0b1222;
  --appearance-surface: #121e33;
  --appearance-raised: #1c2c47;
  --appearance-strong: #22395c;
  --appearance-button: #365fce;
  --appearance-on-button: #fff;
  --appearance-soft-ink: #d9e5ff;
  --ink: #eaf1ff;
  --ink-2: #becce0;
  --muted: #a5b6cf;
  --blue: #96b9ff;
  --blue-deep: #719eeb;
  --blue-tint: #1b3153;
  --border: #34445f;
  --border-strong: #516987;
  --line: #34445f;
  --panel: #19283f;
  --paper: #0b1222;
  --danger: #ffb4b4;
  --green: #79d7c1;
  --purple: #c2afff;
}
html[data-appearance="notes"] {
  --appearance-bg: #f4f0e6;
  --appearance-surface: #fffcf5;
  --appearance-raised: #eee8da;
  --appearance-strong: #2c4436;
  --appearance-button: #395d46;
  --appearance-on-button: #fffdf6;
  --appearance-soft-ink: #e7eddc;
  --ink: #2a3028;
  --ink-2: #515d4f;
  --muted: #64695c;
  --blue: #3e664c;
  --blue-deep: #2e513b;
  --blue-tint: #e4ebdc;
  --border: #d4cdbd;
  --border-strong: #a7ad97;
  --line: #d4cdbd;
  --panel: #eeeadd;
  --paper: #f4f0e6;
  --danger: #a33135;
  --green: #37634d;
  --purple: #765b83;
  --font-display: Georgia, "Times New Roman", serif;
}
html[data-appearance="terminal"] {
  --appearance-bg: #05080f;
  --appearance-surface: #07110c;
  --appearance-raised: #0b1c11;
  --appearance-strong: #12341e;
  --appearance-button: #285d37;
  --appearance-on-button: #e6ffeb;
  --appearance-soft-ink: #b9ffc6;
  --ink: #d6ffdd;
  --ink-2: #b9ffc6;
  --muted: #8fc79c;
  --blue: #5edb7a;
  --blue-deep: #b9ffc6;
  --blue-tint: #0b1c11;
  --border: #2a6b3a;
  --border-strong: #4b975d;
  --line: #2a6b3a;
  --panel: #0b1c11;
  --paper: #05080f;
  --danger: #ffb4b4;
  --green: #8be6aa;
  --purple: #bad397;
}
html[data-appearance]:not([data-appearance="light"]) body {
  background: var(--appearance-bg);
  color: var(--ink);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.nav, .site-head, .bottom-slot, .walk-navigation) {
  background: var(--appearance-bg);
  border-color: var(--border);
}
html[data-appearance]:not([data-appearance="light"])
  :is(
    .chapter,
    .controls-panel,
    .advanced-scenario,
    .access,
    .notice,
    .chip,
    .unlock,
    .inputrow,
    .msg.ai .bubble,
    .fu,
    .diagram,
    dialog
  ) {
  background: var(--appearance-surface);
  color: var(--ink);
  border-color: var(--border);
}
html[data-appearance]:not([data-appearance="light"])
  :is(
    .profile,
    .module,
    .funnel > div,
    .quiz-grid button,
    .guided-behaviour,
    .entry-card,
    .answer-action,
    .explore-action,
    .map-step
  ) {
  background: var(--appearance-surface);
  color: var(--ink);
  border-color: var(--border);
}
html[data-appearance]:not([data-appearance="light"])
  :is(
    .example-notice,
    .mini-note,
    .confidence-note,
    .demo-invitation,
    .next-step,
    .selected-row,
    .evidence-note,
    .banner
  ) {
  background: var(--blue-tint);
  color: var(--ink);
  border-color: var(--border-strong);
}
html[data-appearance]:not([data-appearance="light"]) .welcome-route li::before,
html[data-appearance]:not([data-appearance="light"])
  :is(.profile .initial, .orbit) {
  background: var(--blue-tint);
  color: var(--blue);
  border-color: var(--border);
}
html[data-appearance]:not([data-appearance="light"])
  :is(select, input[type="number"], input[type="password"]) {
  background: var(--appearance-surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.primary, .btn, .send, button[type="submit"], .demo-start) {
  background: var(--appearance-button);
  color: var(--appearance-on-button) !important;
  border-color: var(--appearance-button);
}
html[data-appearance]:not([data-appearance="light"]) .bluebox {
  background: var(--appearance-strong);
  box-shadow: 0 6px 24px #0002;
  border: 1px solid var(--border-strong);
}
html[data-appearance]:not([data-appearance="light"]) .inputrow {
  box-shadow: none;
}
html[data-appearance]:not([data-appearance="light"]) .inputrow:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
html[data-appearance]:not([data-appearance="light"])
  :is(textarea, textarea::placeholder) {
  color: var(--ink);
}
html[data-appearance]:not([data-appearance="light"]) textarea::placeholder {
  color: var(--muted);
}
html[data-appearance]:not([data-appearance="light"]) .seg {
  border-color: var(--appearance-soft-ink);
  background: transparent;
}
html[data-appearance]:not([data-appearance="light"]) .seg button {
  color: var(--appearance-soft-ink);
}
html[data-appearance]:not([data-appearance="light"])
  .seg
  button[aria-pressed="true"] {
  background: var(--appearance-surface);
  color: var(--ink);
}
html[data-appearance]:not([data-appearance="light"]) .hint {
  color: var(--appearance-soft-ink);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.secondary, .table-choice) {
  background: var(--appearance-surface);
  color: var(--blue);
  border-color: var(--border-strong);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.demo-return, .value-hero) {
  background: var(--appearance-strong);
  border-color: var(--blue);
  color: #fff;
}
html[data-appearance]:not([data-appearance="light"])
  :is(.demo-return small, .value-hero p) {
  color: var(--appearance-soft-ink);
}
html[data-appearance]:not([data-appearance="light"]) .value-hero .substats {
  border-color: var(--border-strong);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.demo-return strong, .value-hero .amount, .value-hero .substats strong) {
  color: #fff;
}
html[data-appearance]:not([data-appearance="light"])
  :is(.bar-track, .walk-track) {
  background: var(--appearance-raised);
}
html[data-appearance]:not([data-appearance="light"]) .bar-fill.baseline {
  background: var(--muted);
}
html[data-appearance]:not([data-appearance="light"]) .timeline-chart text {
  fill: var(--muted);
}
html[data-appearance]:not([data-appearance="light"]) .timeline-chart circle {
  fill: var(--blue);
}
html[data-appearance]:not([data-appearance="light"])
  .timeline-chart
  path[stroke="#134bff"] {
  stroke: var(--blue);
}
html[data-appearance]:not([data-appearance="light"])
  .timeline-chart
  path[stroke="#d3dbe9"] {
  stroke: var(--border);
}
html[data-appearance]:not([data-appearance="light"]) :is(.error, #unlockError) {
  color: var(--danger) !important;
}
html[data-appearance]:not([data-appearance="light"])
  .quiz-grid
  button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-tint);
}
html[data-appearance]:not([data-appearance="light"])
  :is(.map-step, .case-tabs button)[aria-pressed="true"] {
  background: var(--appearance-button);
  color: var(--appearance-on-button);
}
html[data-appearance="night"] .landing,
html[data-appearance="night"] .chapter {
  background-image: radial-gradient(
    ellipse at top right,
    #27477424,
    transparent 70%
  );
}
html[data-appearance="night"] :is(.msg.ai .bubble, .chapter) {
  box-shadow: 0 10px 32px #0002;
}
html[data-appearance="notes"] :is(h1, h2, h3, .demo-invitation strong) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}
html[data-appearance="notes"] .chapter,
html[data-appearance="notes"] .msg.ai .bubble {
  border-radius: 7px;
  box-shadow: 3px 4px 0 #d9d0ba55;
}
html[data-appearance="notes"]
  :is(.demo-invitation, .confidence-note, .example-notice) {
  border-radius: 6px;
  border-left: 4px solid var(--blue);
}
html[data-appearance="notes"] :is(.eyebrow, .starts .l) {
  letter-spacing: 0.17em;
}
html[data-appearance="notes"] .chapter h2 {
  font-size: 32px;
}
html[data-appearance="notes"] .profile {
  border-radius: 5px;
}
html[data-appearance="terminal"] .guided {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
@media (max-width: 800px) {
  .appearance-control > span {
    display: none;
  }
  .appearance-control select {
    width: 119px;
  }
  .nav .col {
    height: auto;
    min-height: 56px;
    padding-block: 10px;
  }
  .nav .navr {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    gap: 6px;
  }
  .site-head {
    height: auto;
    min-height: 76px;
    padding-block: 12px;
  }
  .site-head nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .nav .col,
  .site-head {
    align-items: flex-start;
  }
  .nav .logo,
  .site-head .brand {
    padding-top: 6px;
    flex-shrink: 0;
  }
  .nav .navr,
  .site-head nav {
    flex: 1;
  }
  .appearance-control {
    flex-basis: 100%;
    justify-content: flex-end;
  }
  .site-head nav a {
    padding: 6px 0;
  }
  .appearance-control select {
    min-height: 34px;
  }
  .guided #welcome h1 {
    font-size: 32px;
  }
}