/* ============================================================
   Stack - component styles. One 720px measure, hanging numbers,
   rules and the measure carry all structure. No cards.
   ============================================================ */

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
}
/* Wordmark: the mark is "kp." set very tight, with the full stop always
   in accent. The mono name sits beside it at label size. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.wordmark-mark {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.075em;
  color: var(--ink);
}
.wordmark-dot {
  color: var(--accent);
}
.wordmark-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark:hover .wordmark-mark {
  color: var(--accent);
}
.site-nav {
  display: flex;
  gap: 22px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
}
.site-nav a {
  color: var(--ink);
}
.site-nav a:hover {
  color: var(--accent);
}
.site-nav a[data-active="true"] {
  color: var(--accent);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--ink);
}
.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding-block: 16px;
  /* Keep clear of the home indicator on notched phones. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-copy {
  color: var(--muted);
}
.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--accent);
}

/* ---- Shared: section label rows ---- */
.sec-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.sec-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-more {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--canvas);
  padding: 10px 17px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
}
.btn-primary:hover {
  background: #000;
  color: var(--canvas);
}
.btn-secondary {
  display: inline-block;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
}
.btn-secondary:hover {
  background: var(--panel);
  color: var(--ink);
}

/* ---- Home hero ---- */
.hero {
  padding-block: 88px 60px;
}
.hero-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-h1 {
  font-family: var(--sans);
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--ink);
  margin: 20px 0 0;
}
.hero-positioning {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--accent);
  margin: 24px 0 18px;
}
.hero-blurb {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.8;
  color: var(--prose);
  margin: 0;
}
.hero-blurb a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* ---- Tally ---- */
.tally {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding: 20px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.tally-num {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.tally-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.tally-label a {
  color: var(--accent);
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ---- Recent writing cover cards (home) ---- */
.home-writing {
  padding-block: 44px 56px;
}
.pcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 26px;
}
.pcard {
  display: block;
  color: inherit;
}
.pcard-cover {
  height: 173px;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  overflow: hidden;
  background: var(--panel);
}
.pcard-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
}
.pcard-title {
  display: block;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.24;
  color: var(--ink);
  margin-top: 6px;
}
.pcard:hover .pcard-title {
  color: var(--accent);
}
/* Post excerpts, wherever they appear: home cards, the writing index, and the
   related list under a post. One rule for all three, because they are the same
   piece of writing and used to render at three different sizes (16.5 / 16.5
   with a different leading / 15.5), which read as sloppy when you moved
   between pages.

   Same voice as .hero-blurb (Literata, --prose), a step down in size so six
   cards do not outweigh the about paragraph above them. */
.pcard-summary,
.record-summary,
.related-summary {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--prose);
  margin-top: 7px;
}

/* ---- Record rows (writing index) ---- */
.records {
  display: block;
}
.record {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}
.record:hover {
  background: var(--row-hover);
}
.record-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  padding-top: 5px;
}
.record-title {
  font-family: var(--sans);
  /* Every .record on the site is a .record--index, so the old 23px base plus a
     24px override just meant two numbers for one rendered size. */
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.record:hover .record-title {
  color: var(--accent);
}
.record-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ---- Year headings (writing) ---- */
.records > .record:last-child {
  border-bottom: none;
}
.year-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  margin-top: 20px;
}
.year-head--later {
  margin-top: 40px;
}
.year {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.year-count {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Filter chips (separate, outlined) ---- */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
}
.filter {
  border: 1px solid var(--rule);
  color: var(--text);
  background: transparent;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.filter[data-active="true"] {
  border: none;
  background: var(--ink);
  color: var(--canvas);
  padding: 6px 13px;
}

/* ---- Writing page head ---- */
.writing-head {
  padding-block: 64px 26px;
}
.page-h1 {
  font-family: var(--sans);
  font-size: clamp(34px, 7vw, 46px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}
.writing-dek {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.75;
  color: var(--text);
  margin: 12px 0 0;
}
.rss-link {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.writing-records {
  padding-block: 0 70px;
}

/* ---- Contact (home): label on canvas, then a full-bleed ink panel ---- */
/* The section label sits inside the ink panel rather than above it, so the
   heading, its rule and the copy all share one dark ground. On ink the label
   goes canvas and the rule uses the translucent on-ink divider. */
.contact-panel {
  background: var(--ink);
  margin-top: 52px;
  padding: 34px 0 48px;
}
.contact-head {
  margin-bottom: 26px;
}
.contact-head > span {
  display: block;
  color: var(--canvas);
  border-bottom: 1px solid var(--rule-on-ink);
  padding-bottom: 9px;
}
/* No hanging column here: the contact copy starts flush with the left edge of
   the measure, in line with the section label above it. */
.contact-body {
  display: block;
}
.contact-p {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--prose-on-ink);
  margin: 0 0 16px;
  max-width: 46ch;
}
.contact-email {
  display: block;
  font-family: var(--sans);
  font-size: clamp(25px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--canvas);
  border-bottom: 2px solid var(--accent-on-ink);
  padding-bottom: 9px;
  overflow-wrap: anywhere;
}
.contact-email:hover {
  color: var(--accent-on-ink);
  text-decoration: none;
}
.contact-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--prose-on-ink);
}
.contact-socials {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}
.contact-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--canvas);
}
.contact-socials a:hover {
  color: var(--accent-on-ink);
  text-decoration: none;
}
.social-badge {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(251, 250, 247, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0;
  color: var(--accent-on-ink);
}

/* ---- Post ---- */
.progress {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 2px;
  background: var(--rule);
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 120ms ease-out;
}
.post-head {
  padding-block: 56px 0;
}
.post-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.post-h1 {
  font-family: var(--sans);
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 16px 0 0;
}
.post-dek {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
  margin: 18px 0 0;
}
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ink);
  margin-top: 24px;
  padding-top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Lead plate (cover) - breaks out to 1060 on desktop */
/* The hero used to be 1060px against a 900px measure, so it hung 80px past
   the text on each side and was framed only top and bottom. It now sits on
   the measure and carries a full border, matching .post-fig. */
.lead-plate {
  max-width: var(--measure);
  margin: 28px auto 0;
}
@media (max-width: 940px) {
  .lead-plate {
    max-width: none;
    padding-inline: 24px;
  }
}
@media (max-width: 600px) {
  .lead-plate {
    padding-inline: 18px;
  }
}
.lead-plate-img {
  height: 400px;
  border: 1px solid var(--ink);
  overflow: hidden;
}
.lead-plate-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lead-plate-cap {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text);
}
.lead-plate-cap span:last-child {
  color: var(--faint);
  white-space: nowrap;
}

/* Body: 150px rail + prose */
.post-body-wrap {
  padding-block: 34px 0;
}
.post-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
}
.post-prose {
  max-width: 620px;
}

/* Section rail (desktop) */
.section-rail {
  position: sticky;
  top: 24px;
}
.section-rail-head {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.rail-list {
  display: grid;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
}
.rail-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  line-height: 1.3;
}
/* The last item's rule sat directly above the progress bar, so a short post
   stacked three horizontal lines into about 40px of rail. */
.rail-item:last-child {
  border-bottom: none;
}
.rail-item:hover {
  color: var(--accent);
}
.rail-item[data-active="true"] {
  color: var(--accent);
  font-weight: 600;
}
.rail-num {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--faint);
  padding-top: 2px;
}
.rail-item[data-active="true"] .rail-num {
  color: var(--accent);
}
.rail-progress {
  position: relative;
  height: 2px;
  background: var(--rule);
  margin-top: 14px;
}
.rail-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  transition: width 120ms ease-out;
}
.rail-readout {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* Section chips (tablet + mobile) */
.section-chips {
  display: none;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  margin: 0 0 26px;
}
.chips-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.chips-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}
.chip-sec {
  border: 1px solid var(--rule);
  color: var(--text);
  padding: 4px 10px;
}
.chip-sec[data-active="true"] {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
  padding: 5px 11px;
}

/* Code block */
.code {
  border: 1px solid var(--ink);
  background: var(--panel);
  margin: 0 0 24px;
}
.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}
.code-file {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
}
.code-copy {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--rule);
  background: transparent;
  padding: 2px 9px;
  cursor: pointer;
}
.code-copy:hover {
  background: var(--panel);
  color: var(--ink);
}
.code-body {
  margin: 0;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--code-text);
  overflow: auto;
}
.code-body code {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* Inline figure (stays in the prose column) */
.post-fig {
  margin: 0 0 26px;
}
.post-fig-img {
  border: 1px solid var(--ink);
  overflow: hidden;
}
.post-fig-img img {
  display: block;
  width: 100%;
  height: auto;
}
.post-fig-cap {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text);
}

/* Related reading - cover cards */
.related {
  padding-block: 52px 76px;
}
.related-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.related-more {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
}
.related-card {
  display: block;
  color: inherit;
}
.related-cover {
  height: 150px;
  border: 1px solid var(--ink);
  overflow: hidden;
  background: var(--panel);
}
.related-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 10px;
}
.related-title {
  display: block;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: var(--ink);
  margin-top: 5px;
}
.related-card:hover .related-title {
  color: var(--accent);
}

/* Next + actions */
.post-next {
  border-top: 1px solid var(--ink);
  margin-top: 44px;
  padding-top: 20px;
}
.post-next-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-next-link {
  display: block;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 8px;
}
.post-next-link:hover {
  color: var(--accent);
}
.post-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
}
.post-actions .btn-primary {
  padding: 8px 15px;
  font-size: 12.5px;
}
.btn-ghost {
  border: 1px solid var(--rule);
  color: var(--text);
  background: transparent;
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
}
.btn-ghost:hover {
  background: var(--panel);
  color: var(--ink);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .hero {
    padding-block: 34px 30px;
  }
  /* Matches the mobile step-down on .post-prose p, so the reading size is the
     same on the landing page and inside a post at every width. */
  .hero-blurb {
    font-size: 17.5px;
  }
  .site-header-inner {
    padding-block: 15px;
  }
  .site-nav {
    gap: 14px;
    font-size: 12.5px;
  }
  .tally {
    gap: 20px;
  }
  .tally-num {
    font-size: 22px;
  }
  .record {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .record-num {
    padding-top: 0;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }
  .contact-panel {
    margin-top: 34px;
    padding: 26px 0 32px;
  }
  .contact-head {
    margin-bottom: 20px;
  }
  .contact-p {
    font-size: 17.5px;
    line-height: 1.62;
  }
  /* display:block alone left the two spans running together as one sentence,
     since they are inline. Stack them. */
  .contact-note {
    display: block;
    line-height: 1.8;
  }
  .contact-note > span {
    display: block;
  }
  .contact-socials {
    gap: 16px;
    font-size: 13.5px;
  }
  /* Stacked and centred. Left aligned, the links ran to the screen edge and
     collided with the rounded corner on an iPhone. */
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-links {
    justify-content: center;
    gap: 16px;
  }
  /* Recent-writing cards: single column. The cover stays inside the measure
     and keeps its border on all four sides so it reads as a thumbnail rather
     than a full-width banner. */
  .pcards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pcard-cover {
    height: 156px;
  }
  /* The full name stays on mobile. It is the site's only branding, and the
     bare mark alone reads as an unfinished logo. */
  .wordmark-name {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .wordmark {
    gap: 7px;
  }
  .wordmark-mark {
    font-size: 20px;
  }
  .writing-head {
    padding-block: 40px 20px;
  }
  .post-head {
    padding-block: 34px 0;
  }
  /* Figures stay inside the measure so they line up with the prose above
     and below, rather than jumping to the screen edge. */
  .post-fig {
    margin-inline: 0;
  }
}

/* ---- Post responsive ---- */
@media (min-width: 901px) {
  /* Desktop shows the rail's read bar; hide the sticky top progress bar. */
  .progress {
    display: none;
  }
}
@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .section-rail {
    display: none;
  }
  .section-chips {
    display: block;
  }
  .lead-plate {
    margin-top: 24px;
  }
  .post-body-wrap {
    padding-block: 26px 0;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .related-summary {
    display: none;
  }
}
@media (max-width: 600px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  .related {
    padding-block: 34px 40px;
  }
}

/* ---- Code syntax theme -------------------------------------------------
   Chroma emits class names; the palette is the design's quiet code theme.
   Anything not listed inherits --code-text, which is intentional: the
   design calls for a near-monochrome block with only comments, strings
   and keywords tinted. */
.code-body .c,
.code-body .c1,
.code-body .cm,
.code-body .cp,
.code-body .cs,
.code-body .ch,
.code-body .cpf {
  color: var(--faint);
}
.code-body .s,
.code-body .s1,
.code-body .s2,
.code-body .sb,
.code-body .sc,
.code-body .sd,
.code-body .se,
.code-body .sh,
.code-body .si,
.code-body .sx,
.code-body .sr,
.code-body .ss,
.code-body .dl {
  color: var(--ok);
}
.code-body .k,
.code-body .kc,
.code-body .kd,
.code-body .kn,
.code-body .kp,
.code-body .kr,
.code-body .kt,
.code-body .nt,
.code-body .nb,
.code-body .nf,
.code-body .nd {
  color: var(--accent);
}
.code-body .m,
.code-body .mi,
.code-body .mf,
.code-body .mh,
.code-body .mo,
.code-body .il {
  color: var(--accent);
}
.code-body .err {
  color: inherit;
}