:root {
  --brand-cyan: #0795e2;
  --brand-cyan-hover: #2fb6ff;
  --brand-blue: #3462ab;
  --brand-navy: #004182;
  --brand-green: #4ed401;
  --brand-ice: #f1fafe;
  --brand-blue-bg: #e9eff9;
  --bg: #101314;
  --panel: #1b1f20;
  --surface: #252e30;
  --line: #3e4b4c;
  --text: #f4f5ed;
  --muted: #a3adaa;
  --accent: #d0f878;
  --accent-soft: #d0f87815;
  --lime: var(--accent);
  --purple: #b9a6f5;
  --blue: #8ac9ef;
  --on-brand: #fff;
  --positive: #8fe65d;
  --negative: #ffb6af;
  color-scheme: dark;
}
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 85% 30%, var(--accent-soft), transparent 55%);
}
.header-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.brand {
  color: var(--accent);
}
.brand i {
  background: var(--brand-cyan);
}
.status-dot {
  background: var(--accent);
  box-shadow: 0 0 12px #d0f87850;
}
.progress-track {
  background: var(--surface);
}
#progress {
  background: var(--accent);
}
footer {
  background: linear-gradient(transparent, var(--bg) 22%);
}
.session,
.pill,
.intro-points,
.summary-list li {
  color: var(--text);
}
.session-label,
.intro-bottom,
.placeholder-content,
.product-num,
.grip,
.zone-button {
  color: var(--muted);
}
.primary {
  background: var(--accent);
  color: #182113;
}
.primary:hover:not(:disabled) {
  background: #dcff96;
}
.nav-button:not(:disabled),
.intro-points b {
  border-color: var(--line);
}
.panel,
.speaker-card,
.image-placeholder,
.tablet-screen,
.result-card {
  background: linear-gradient(135deg, var(--surface), var(--panel));
  border-color: var(--line);
}
.speaker-card .image-icon,
.image-icon {
  color: var(--accent);
}
.floating-tag,
.task-card {
  background: var(--accent);
  color: #182113;
}
.tag-two {
  background: var(--brand-blue);
  color: white;
}
.product-card,
.product-card:nth-child(n),
.department,
.department:nth-child(n),
.tablet,
.phone,
.choice,
.logic-block,
.quiz-option,
.tabs button,
.orbit-label,
.swipe-actions button {
  background: var(--panel);
  border-color: var(--line);
}
.choice.active,
.tabs .active,
.department.active,
.quiz-option.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.move-controls button {
  background: var(--surface);
  border-color: var(--line);
}
.notification {
  background: var(--accent-soft);
  border-color: var(--line);
}
.correct {
  color: var(--positive);
  background: #4ed40112;
  border-color: var(--positive);
}
.incorrect {
  color: var(--negative);
  background: #e33c3912;
  border-color: var(--negative);
}
.success-art > span {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.success-orbit {
  border-color: var(--line);
}
.swipe-card {
  background: linear-gradient(145deg, #d2f58f, #b5d877);
  color: #203217;
}
.swipe-card .match-star,
.swipe-card .eyebrow {
  color: #344b1e;
}
.product-card:nth-child(even),
.department:nth-child(even) {
  background: #192b3d;
  border-color: #345473;
}
.question-mark {
  text-shadow: 0 0 80px var(--accent-soft);
}
.result-card .tie-note,
.config-placeholder {
  color: var(--muted);
  border-color: var(--line);
}
.scratch-editor,
.scratch-palette,
.scratch-preview {
  background: var(--panel);
  border-color: var(--line);
}
.scratch-canvas,
.if-mouth {
  --socket-bg: var(--surface);
  background-color: var(--surface);
}
.scratch-palette {
  --socket-bg: var(--panel);
}
.mini-cavity {
  background: var(--panel);
}
.if-head:before {
  background: var(--surface) !important;
}
.scratch-section-title {
  color: var(--text);
}
.scratch-section-title > span,
.palette-item > small,
.scratch-help,
.scratch-output,
.scratch-return,
.snap-slot,
.if-mouth > small {
  color: var(--muted);
}
.scratch-return,
.snap-slot:last-child {
  border-color: var(--line);
}
.scratch-palette,
.scratch-canvas {
  scrollbar-color: var(--line) var(--panel);
}
.snap-slot:focus-visible,
.snap-slot:hover,
.scratch-dragging .snap-slot,
.scratch-editor:has(.is-selected) .snap-slot {
  background: var(--accent-soft);
  outline-color: var(--accent);
}
.snap-slot.snap-hover {
  background: var(--accent-soft);
  outline-color: var(--brand-cyan);
  box-shadow: 0 0 14px var(--accent-soft);
}
@media (max-width: 420px) {
  .site-header {
    gap: 10px;
  }
  .session {
    font-size: 7px;
    letter-spacing: 0.5px;
    gap: 5px;
  }
  .header-actions {
    gap: 6px;
  }
  .header-actions .icon-button {
    width: 34px;
    height: 34px;
  }
}