:root {
  --ink: #ffffff;
  --paper: #000000;
  --purple: #00ffff;
  --cyan: #cc00ff;
  --purple-on-light: #8800aa;
  --link: #00ffff;
  --line: #333333;
  --muted: #a9a9a9;
}

.skip,
.button.dark {
  background: #ffffff;
  color: #000000;
}

.button.yellow,
.button.pink,
.button.cyan,
.project-book,
.project-essays,
.book-section,
.contact-section {
  color: #000000;
}

.intro-band {
  color: #000000;
}

.intro-inner .eyebrow,
.framework-subtitle,
.scope,
.lens-content .eyebrow {
  color: #555555;
}

.statement em {
  color: var(--cyan);
}

.framework-top .eyebrow,
.scales span,
.project-hts a:hover {
  color: var(--purple-on-light);
}

.project-hts a:focus-visible {
  outline-color: var(--purple-on-light);
}

.project-essays a:hover {
  color: #000000;
  text-decoration: underline;
}

.lens,
.lens-buttons,
.lens-buttons button,
.lens-content > div + div {
  border-color: #5e5e5e;
}

.lens {
  background: #000000;
  color: #ffffff;
}

.lens-buttons button {
  color: #ffffff;
}

.lens-buttons button[aria-pressed="true"] {
  color: #000000;
}

.lens-buttons button:not([aria-pressed="true"]):hover {
  background: #333333;
}

.lens-content .eyebrow {
  color: #bfbfbf;
}

.button.dark:hover {
  background: #d9d9d9;
}

.about-copy > p:not(.about-lead) {
  color: #c8c8c8;
}

@media (max-width: 700px) {
  .lens-content > div + div {
    border-color: #5e5e5e;
  }
}