:root {
  --code-bg: #f3f4f5;
  --code-border: #e2e8f0;
  --code-accent: #008000;
  --code-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  --code-radius: 10px;
  --inline-code-bg: #f3f4f5;
  --inline-code-color: #0f172a;
}

main pre,
.highlight {
  margin: 1.5rem 0;
}

main pre,
.highlight pre,
pre.chroma {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-left: 3px solid var(--code-accent) !important;
  border-radius: var(--code-radius) !important;
  box-shadow: var(--code-shadow) !important;
  padding: 1.1rem 1.25rem !important;
  overflow-x: auto;
}

.highlight pre,
pre.chroma {
  margin: 0 !important;
}

.highlight {
  border-radius: var(--code-radius);
}

.highlight code,
pre.chroma code,
main pre code {
  background: transparent !important;
}

.chroma .line {
  line-height: 1.7;
}

.chroma .lnt,
.chroma .ln {
  padding-right: 0.85rem;
  color: #94a3b8;
}

p code,
li code,
td code,
th code,
blockquote code,
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  padding: 0.12rem 0.42rem;
  border-radius: 0.45rem;
  background: var(--inline-code-bg);
  color: var(--inline-code-color);
}