:root {
  color-scheme: light dark;
  --canvas: #ffffff;
  --text: #0f0f0f;
  --muted: #606060;
  --soft: #f2f2f2;
  --line: #e5e5e5;
  --link: #1769aa;
  --chip-selected: #000000;
  --chip-selected-text: #ffffff;
  --commit: #cc0000;
  --commit-pressed: #a30000;
  --commit-text: #ffffff;
}

body {
  color: var(--text);
  background: var(--canvas);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #3ea6ff;
  outline-offset: 2px;
}

.skip-link {
  color: #0f0f0f;
  background: #ffffff;
  border: 1px solid #0f0f0f;
  padding: 10px 14px;
}

.guide-mark,
.header-link,
.filter-chip,
.feed-item,
.source-card,
.chapter-step-links a,
.footer-links a,
.return-action {
  text-decoration: none;
}

.guide-mark::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-inline-end: 10px;
  background: linear-gradient(135deg, #0f0f0f 0 50%, #3ea6ff 50% 100%);
  transform: rotate(-4deg);
}

.header-group-label,
.chapter-meta,
.feed-meta,
.source-card small,
.chapter-step-links span,
.site-footer p,
.save-status {
  color: var(--muted);
}

.header-link-current {
  box-shadow: inset 0 -2px 0 var(--text);
}

.filter-chip,
.selection-count,
.secondary-action {
  color: var(--text);
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 24px;
}

.filter-chip-current {
  color: var(--chip-selected-text);
  background: var(--chip-selected);
}

.chapter-visual,
.feed-image-frame {
  background-color: var(--soft);
  background-image: linear-gradient(145deg, transparent 35%, rgba(62, 166, 255, 0.16) 35% 57%, transparent 57%), linear-gradient(22deg, rgba(15, 15, 15, 0.08) 20%, transparent 20%);
}

.visual-tag,
.duration-tag {
  color: #ffffff;
  background: #141414;
  border-radius: 4px;
  padding: 5px 7px;
}

.chapter-avatar,
.feed-avatar {
  border-radius: 50%;
  background: linear-gradient(145deg, var(--text) 0 52%, #3ea6ff 52% 100%);
  box-shadow: inset 0 0 0 4px var(--canvas);
  outline: 1px solid var(--line);
}

.chapter-eyebrow {
  color: var(--muted);
}

.chapter-summary {
  background: var(--soft);
  padding-inline: 16px;
}

.evidence-line {
  border-inline-start: 3px solid #3ea6ff;
  padding-inline-start: 14px;
}

.source-link {
  color: var(--link);
}

.question-prompts li::before {
  color: var(--text);
  background: var(--soft);
  border-radius: 50%;
}

.feed-item:hover .feed-title,
.chapter-step-links a:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.source-card {
  background: var(--soft);
  border: 1px solid var(--line);
}

.checklist-row:hover {
  background: linear-gradient(90deg, var(--soft), transparent);
}

.checklist-row input {
  accent-color: #0f0f0f;
}

.secondary-action,
.commit-action {
  border: 0;
  border-radius: 24px;
  cursor: pointer;
}

.commit-action {
  color: var(--commit-text);
  background: var(--commit);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.commit-action:active {
  background: var(--commit-pressed);
}

.commit-action.is-committed {
  color: var(--text);
  background: var(--soft);
  transform: scale(1);
}

.commit-action.is-bouncing {
  transform: scale(1.15);
}

.return-action {
  color: var(--text);
  background: var(--soft);
  border-radius: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0f0f0f;
    --text: #f2f2f2;
    --muted: #b8b8b8;
    --soft: #272727;
    --line: #3d3d3d;
    --link: #3ea6ff;
  }

  .guide-mark::before {
    background: linear-gradient(135deg, #f2f2f2 0 50%, #3ea6ff 50% 100%);
  }

  .filter-chip-current {
    border-color: #606060;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}