body { margin: 0; }
.site-banner { border-bottom: 1px solid currentColor; padding: 0 1rem; }
.site-topbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding: 0.75rem 0; }
.site-wordmark { font-size: 1.4rem; font-weight: 800; text-decoration: none; color: inherit; }
.site-tagline { margin: 0; flex: 1; }
.site-links a { margin-left: 1rem; }
.site-menu summary { cursor: pointer; padding: 0.5rem 0; font-weight: 600; }
.site-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 2rem; padding: 0.5rem 0 1rem; }
.site-nav-label { margin: 0 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; }
.site-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-nav-list a { text-decoration: none; color: inherit; padding: 0.15rem 0 0.15rem 0.5rem; border-left: 3px solid transparent; display: block; }
.site-nav-list a:hover { text-decoration: underline; }
.site-nav-list a[aria-current="page"] { border-left-color: currentColor; font-weight: 700; }
main, .markus-main { max-width: 52rem; margin-left: auto; margin-right: auto; }
@media (min-width: 1100px) {
  body { margin-left: 17rem; }
  .site-banner { position: fixed; top: 0; left: 0; width: 17rem; height: 100vh; overflow: auto; box-sizing: border-box; border-bottom: 0; border-right: 1px solid currentColor; }
  .site-sidebar { grid-template-columns: 1fr; }
  .site-menu summary { display: none; }
}

[data-theme="catppuccin"] { --markus-muted: #a6adc8; }
[data-theme="catppuccin-latte"] {
  --markus-muted: #5c5f77;
  --markus-accent: #1a56d6;
  --markus-accent-2: #b53a17;
  --markus-note: #0f6b70;
  --markus-warning: #9a5b00;
  --markus-tip: #2b7a1b;
  --markus-caution: #b00c30;
}
main img, main svg, .markus-main img, .markus-main svg { max-width: 100%; height: auto; }
main :not(pre) > code, main a, main strong, main em, main h1, main h2, main h3, main h4, main h5, main h6,
.markus-main :not(pre) > code, .markus-main a, .markus-main strong, .markus-main em, .markus-main h1, .markus-main h2, .markus-main h3, .markus-main h4 { overflow-wrap: anywhere; }
main pre, .markus-main pre { max-width: 100%; overflow-x: auto; }
main, .markus-main { overflow-wrap: break-word; }
.markus-table-wrap { max-width: 100%; overflow-x: auto; }
pre.mermaid { background: transparent; text-align: center; overflow-x: auto; }
.site-topbar, .site-tagline { min-width: 0; }
.site-links a, .site-footer a { color: var(--markus-accent); }