.visually-hidden {
  position:absolute!important; height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

:root {
  --bg: #ffffff;
  --fg: #1f2937;
  --subtle: #6b7280;
  --muted: #f9fafb;
  --surface: #ffffff;
  --border: rgba(17,24,39,.10);
  --shadow: rgba(0,0,0,.05);

  --brand: #2563eb;
  --brand-hover: #1e40af;

  --code-bg: #f3f4f6;
  --code-fg: #111827;

  --table-head-bg: #f3f4f6;
  --table-row-alt: #f9fafb;
  --table-hover: #eef2ff;

  --hr: rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --fg: #e6edf3;
    --subtle: #9aa0a6;
    --muted: #161b22;
    --surface: #0f141a;
    --border: rgba(255,255,255,.10);
    --shadow: rgba(0,0,0,.6);

    --brand: #58a6ff;
    --brand-hover: #79c0ff;

    --code-bg: #161b22;
    --code-fg: #c9d1d9;

    --table-head-bg: #161b22;
    --table-row-alt: #0d1117;
    --table-hover: #1c2128;

    --hr: rgba(255,255,255,.08);
  }
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --fg: #e6edf3;
  --subtle: #9aa0a6;
  --muted: #161b22;
  --surface: #0f141a;
  --border: rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.6);

  --brand: #58a6ff;
  --brand-hover: #79c0ff;

  --code-bg: #161b22;
  --code-fg: #c9d1d9;

  --table-head-bg: #161b22;
  --table-row-alt: #0d1117;
  --table-hover: #1c2128;

  --hr: rgba(255,255,255,.08);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #1f2937;
  --subtle: #6b7280;
  --muted: #f9fafb;
  --surface: #ffffff;
  --border: rgba(17,24,39,.10);
  --shadow: rgba(0,0,0,.05);

  --brand: #2563eb;
  --brand-hover: #1e40af;

  --code-bg: #f3f4f6;
  --code-fg: #111827;

  --table-head-bg: #f3f4f6;
  --table-row-alt: #f9fafb;
  --table-hover: #eef2ff;

  --hr: rgba(0,0,0,.06);
}

html, body {
  background: var(--bg);
  color: var(--fg);
  max-width: 100%;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

a { color: var(--brand) !important; text-decoration: none; }
a:hover, a:focus { color: var(--brand-hover) !important; }

article {
  word-wrap: break-word;
  word-break: break-word;
}

article hr {
  border: none;
  height: 1px;
  margin: 1.5rem 0;
  background: var(--hr);
}

article blockquote {
  background: var(--muted);
  border-left: 4px solid var(--brand);
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  color: var(--fg);
  border-radius: 6px;
}

article pre, .chroma {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 8px;
  overflow: auto;
  padding: 1rem;
  box-shadow: 0 0 0 1px var(--border);
  max-width: 100%;
}
article code, article pre code { color: var(--code-fg); }
.chroma .hl { background-color: rgba(255, 230, 150, .25); }
.chroma .ln { opacity: .7; }

article img {
  max-width: 100%; height: auto; display: block; margin: 1rem auto;
}
article figure { margin: 1.25rem 0; }
article figcaption { color: var(--subtle); font-size: .9rem; margin-top: .35rem; text-align: center; }

article :where(table) {
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem; line-height: 1.6;
  border-radius: 10px; overflow: hidden;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
article :where(th) {
  text-align: left; font-weight: 600;
  background: var(--table-head-bg);
  color: var(--fg);
  padding: .75em 1em; border-bottom: 1px solid var(--border);
}
article :where(td) {
  padding: .75em 1em; border-bottom: 1px solid var(--border); color: var(--fg);
}
article :where(tbody tr:nth-child(even)) { background: var(--table-row-alt); }
article :where(tbody tr:hover)           { background: var(--table-hover); }
article :where(th[align="center"], td[align="center"]) { text-align: center; }
article :where(th[align="right"],  td[align="right"])  { text-align: right;  }

@media (max-width: 640px) {
  article :where(table) { font-size: 0.92rem; }
  article :where(th, td) { padding: .65em .8em; }
}

article pre, article code, article blockquote, article img, article table {
  max-width: 100%; box-sizing: border-box;
}

header, footer {
  background: var(--bg); color: var(--fg);
  transition: background-color .25s ease, color .25s ease;
}

.header-bg { background-color: #ffffff !important; }
.theme-bg { background-color: var(--bg); color: var(--fg); }

:root[data-theme="dark"] .header-bg {
  background-color: #0d1117 !important;
}
:root[data-theme="dark"] .theme-bg {
  background-color: #0d1117;
  color: #e6edf3;
}

#TableOfContents, .toc {
  font-size: .95rem;
  line-height: 1.6;
  padding: .75rem 1rem;
  margin: 1rem 0 2rem;
}
#TableOfContents h2, .toc h2 {
  margin: 0 0 .5rem; font-size: 1rem;
}
#TableOfContents ul, #TableOfContents ol {
  margin: 0; padding-left: 1rem;
}
#TableOfContents li { margin: .25rem 0; }
#TableOfContents a { text-decoration: none; }
#TableOfContents a:hover { text-decoration: underline; }

#TableOfContents .lvl-3 { margin-left: .75rem; }
#TableOfContents .lvl-4 { margin-left: 1.5rem; }

pre code.language-mermaid {
  background: none !important;
  color: inherit !important;
}