:root {
  --cstruct-accent: #2563eb;
  --cstruct-accent-soft: #dbeafe;
}

[data-bs-theme="dark"] {
  --cstruct-accent: #60a5fa;
  --cstruct-accent-soft: #172554;
}

a {
  text-underline-offset: 0.15em;
}

.navbar-brand {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.navbar-brand #logo {
  height: 2rem;
  margin-right: 0.4rem;
  width: 2rem;
}

article {
  max-width: 82ch;
}

article h1,
article h2,
article h3 {
  letter-spacing: -0.015em;
}

article :not(pre) > code {
  border-radius: 0.25rem;
  padding: 0.1em 0.25em;
}

article pre {
  border-left: 0.2rem solid var(--cstruct-accent);
}

.cstruct-code-block {
  position: relative;
}

.cstruct-code-block .cstruct-copy {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 1;
}

.cstruct-code-block pre {
  padding-top: 2.75rem;
}

article pre code:focus {
  outline: 0.2rem solid var(--cstruct-accent);
  outline-offset: -0.2rem;
}

article .hljs-meta {
  color: #17627a;
}

[data-bs-theme="dark"] article .hljs-meta {
  color: #7dd3fc;
}

/* HTML attributes and JavaScript object keys must remain readable in code samples. */
article .hljs-attr {
  color: #9f1239;
}

[data-bs-theme="dark"] article .hljs-attr {
  color: #fda4af;
}

article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.TIP,
.NOTE,
.IMPORTANT,
.WARNING,
.CAUTION {
  border-radius: 0.45rem;
}

article svg.byte-grid {
  display: block;
  font-family: var(--bs-font-monospace, ui-monospace, monospace);
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}