/* The site layout (header, sidebar, content), shared by every site and kept neutral: a site's look beyond
   its settings lives in its own CSS (weerd.xyz's monospace nav, Monokai code etc. are in weerd's `_site`).
   Per-site values come from the `_site` settings as custom properties set before this file:
   --accent, --page-bg, --page-fg, --font, --content-width. The site's own CSS comes after it. */

:root {
  --bg-color: var(--page-bg, #ffffff);
  --text-color: var(--page-fg, #333333);
  --link-color: #1a73e8;
  --border-color: #e0e0e0;
  --sidebar-width: 260px;
  --sidebar-bg: #f8f9fa;
  --active-link-color: var(--accent, #4a9e5c);
  --active-link-bg: color-mix(in srgb, var(--active-link-color) 8%, transparent);
  --muted: #777;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --link-color: #61afef;
  --border-color: #3a3a3a;
  --sidebar-bg: #252525;
  --active-link-color: color-mix(in srgb, var(--accent, #4a9e5c) 75%, white);
  --active-link-bg: color-mix(in srgb, var(--accent, #4a9e5c) 18%, transparent);
  --muted: #999;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  overflow-x: hidden;
}

/* -- header ------------------------------------------------------------------ */
.page-header {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-color);
  z-index: 200;
}
.header-container { padding: 0 20px; display: flex; align-items: center; height: 100%; gap: 12px; }
.site-name { font-size: 1.5rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.site-name a { text-decoration: none; color: var(--text-color); }
.site-tagline { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
.header-links { display: flex; gap: 14px; list-style: none; font-size: 0.95rem; }
.header-links a { color: var(--text-color); text-decoration: none; }
.header-links a:hover { color: var(--active-link-color); }
.icon-button {
  background: none; border: none; cursor: pointer; color: var(--text-color);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none;
}
.icon-button:hover { background-color: rgba(128, 128, 128, 0.12); }
.rss-icon { width: 18px; height: 18px; fill: #f26522; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* -- layout ------------------------------------------------------------------ */
.page-container { display: flex; min-height: calc(100vh - 60px); margin-top: 60px; }
.content-container {
  position: fixed; top: 60px; left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width)); height: calc(100vh - 60px);
  overflow-y: auto; padding: 0 20px 0 30px;
}
.no-sidebar .content-container, .sidebar-collapsed .content-container { left: 0; width: 100%; }
main { padding: 10px 0 20px; max-width: var(--content-width, 800px); margin: 0 auto; width: 100%; }

/* -- sidebar ----------------------------------------------------------------- */
.sidebar {
  position: fixed; top: 60px; left: 0; width: var(--sidebar-width); height: calc(100vh - 60px);
  background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color);
  padding-bottom: 20px; overflow-y: auto; transition: transform 0.3s ease; z-index: 100;
}
.sidebar-collapsed .sidebar { transform: translateX(-100%); }
.sidebar-header { display: flex; justify-content: flex-end; padding: 10px 15px; border-bottom: 1px solid var(--border-color); }
.sidebar-toggle, .show-sidebar-btn {
  width: 30px; height: 30px; border-radius: 4px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; font-weight: bold;
}
.sidebar-toggle:hover { background-color: rgba(128, 128, 128, 0.12); }
.show-sidebar-btn {
  position: fixed; top: 75px; left: 20px; z-index: 150; width: 34px; height: 34px; font-size: 18px;
  background-color: var(--sidebar-bg); border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.page-container:not(.sidebar-collapsed) .show-sidebar-btn { display: none; }
.nav { list-style: none; font-size: 0.9rem; }
.nav a { display: block; padding: 6px 20px; color: var(--text-color); text-decoration: none; }
.nav a:hover { background-color: rgba(128, 128, 128, 0.08); }
.nav li.active > a { color: var(--active-link-color); background-color: var(--active-link-bg); font-weight: 500; }
.nav-section { margin-bottom: 4px; }
.nav-section-title { display: flex; align-items: center; font-weight: 600; padding: 6px 20px; cursor: pointer; }
.nav-section-title::before { content: "▶"; display: inline-block; width: 12px; margin-right: 6px; font-size: 10px; text-align: center; }
.nav-section.expanded > .nav-section-title::before { content: "▼"; }
.nav-children { list-style: none; padding-left: 15px; display: none; }
.nav-section.expanded > .nav-children { display: block; }

/* -- content ----------------------------------------------------------------- */
article { margin-bottom: 40px; }
article h1 { font-size: 2rem; margin: 0.4em 0 20px; }
article h2 { margin: 1.4em 0 0.6em; }
article h3 { margin: 1.2em 0 0.5em; }
article p { margin-bottom: 1rem; }
article ul, article ol { margin: 1rem 0 1.5rem 1.5rem; }
article li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
article ul ul, article ol ol, article ul ol, article ol ul { margin: 0.5rem 0 0.5rem 1.5rem; }
article img { max-width: 100%; height: auto; }
article hr { border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0; }
h1, h2, h3 { color: var(--text-color); }
a { color: var(--active-link-color); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; width: 100%; margin: 1em 0; border: 1px solid var(--border-color); }
th, td { padding: 8px 12px; text-align: left; border: 1px solid var(--border-color); }
th { background-color: rgba(128, 128, 128, 0.1); }
code { background-color: rgba(128, 128, 128, 0.1); padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
pre code { background: none; padding: 0; }
pre { overflow-x: auto; }
blockquote { border-left: 4px solid var(--border-color); padding-left: 1em; opacity: 0.85; margin: 1em 0; }
.footnotes { font-size: 0.9rem; color: var(--muted); }
.footnotes-sep { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0 1rem; }

/* the page's own heading (posts get a date line) */
.post-meta { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; margin: -12px 0 20px; }

/* lists of posts: home page "Recent posts", section pages */
.recent-posts { margin-top: 2rem; }
.post-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.post-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: baseline; list-style: none; }
.post-date { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 6.5rem; }
.post-link { margin-left: 1rem; font-weight: 500; }

/* about-style pages: profile picture and links from frontmatter */
.about-profile { text-align: center; margin-bottom: 2rem; }
.profile-image { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); }
.contact-links { margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.5rem 0 0; }
.social-links li { list-style: none; padding: 0; }

.site-footer { margin: 3rem 0 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);
               color: var(--muted); font-size: 0.85rem; text-align: center; }
.site-footer p { margin: 0; }

/* preview-only banner (never on the public site) */
.preview-banner {
  position: fixed; bottom: 12px; right: 12px; z-index: 300; background: #fff7d6; color: #5c4400;
  border: 1px solid #e8d48a; border-radius: 6px; padding: 6px 10px; font: 13px/1.4 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.preview-banner a { color: inherit; text-decoration: underline; }
.preview-banner .banner-form { display: inline; margin: 0; }
.preview-banner button { font: inherit; padding: 1px 8px; margin-left: 4px; border: 1px solid #c9b25c; border-radius: 4px;
                         background: #fffbe8; color: inherit; cursor: pointer; }
.state-badge { display: inline-block; font: 600 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
               padding: 3px 6px; border-radius: 4px; vertical-align: middle; margin-left: 8px; }
.state-draft { background: #fde2e2; color: #8a1f1f; }
.state-changed { background: #fff1c2; color: #6b4f00; }
.state-published { background: #dff5e3; color: #1d5b2a; }

/* -- admonitions (!!! note "Title") ------------------------------------------------ */
.admonition {
  margin: 1.5em 0; padding: 0.8em 1em; border-radius: 4px; border-left: 5px solid #888;
  background-color: rgba(128, 128, 128, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.admonition > :last-child { margin-bottom: 0; }
.admonition-title { font-weight: bold; margin: 0 0 0.5em; font-size: 1.1em; display: flex; align-items: center; }
.admonition.note { border-color: #448aff; background-color: rgba(68, 138, 255, 0.1); }
.admonition.note .admonition-title { color: #448aff; }
.admonition.warning { border-color: #ff9100; background-color: rgba(255, 145, 0, 0.1); }
.admonition.warning .admonition-title { color: #ff9100; }
.admonition.danger { border-color: #ff5252; background-color: rgba(255, 82, 82, 0.1); }
.admonition.danger .admonition-title { color: #ff5252; }
.admonition.tip { border-color: #00c853; background-color: rgba(0, 200, 83, 0.1); }
.admonition.tip .admonition-title { color: #00c853; }
.admonition.info { border-color: #26c6da; background-color: rgba(38, 198, 218, 0.1); }
.admonition.info .admonition-title { color: #26c6da; }

/* -- code: pygments' default style, and native in dark mode. The dark selector is wrapped in :where() so it
   weighs no more than .highlight .x: a site's own CSS (loaded after this) can always restyle code. -- */
.highlight { padding: 1em; margin: 1em 0; border-radius: 4px; overflow-x: auto; line-height: 125%; }
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #9C6500 } /* Comment.Preproc */
.highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #E40000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #008400 } /* Generic.Inserted */
.highlight .go { color: #717171 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #687822 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #00F; font-weight: bold } /* Name.Class */
.highlight .no { color: #800 } /* Name.Constant */
.highlight .nd { color: #A2F } /* Name.Decorator */
.highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #00F } /* Name.Function */
.highlight .nl { color: #767600 } /* Name.Label */
.highlight .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #666 } /* Literal.Number.Bin */
.highlight .mf { color: #666 } /* Literal.Number.Float */
.highlight .mh { color: #666 } /* Literal.Number.Hex */
.highlight .mi { color: #666 } /* Literal.Number.Integer */
.highlight .mo { color: #666 } /* Literal.Number.Oct */
.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #A45A77 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #00F } /* Name.Function.Magic */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .vm { color: #19177C } /* Name.Variable.Magic */
.highlight .il { color: #666 } /* Literal.Number.Integer.Long */
:where([data-theme="dark"]) .highlight .hll { background-color: #404040 }
:where([data-theme="dark"]) .highlight { background: #202020; color: #D0D0D0 }
:where([data-theme="dark"]) .highlight .c { color: #ABABAB; font-style: italic } /* Comment */
:where([data-theme="dark"]) .highlight .err { color: #A61717; background-color: #E3D2D2 } /* Error */
:where([data-theme="dark"]) .highlight .esc { color: #D0D0D0 } /* Escape */
:where([data-theme="dark"]) .highlight .g { color: #D0D0D0 } /* Generic */
:where([data-theme="dark"]) .highlight .k { color: #6EBF26; font-weight: bold } /* Keyword */
:where([data-theme="dark"]) .highlight .l { color: #D0D0D0 } /* Literal */
:where([data-theme="dark"]) .highlight .n { color: #D0D0D0 } /* Name */
:where([data-theme="dark"]) .highlight .o { color: #D0D0D0 } /* Operator */
:where([data-theme="dark"]) .highlight .x { color: #D0D0D0 } /* Other */
:where([data-theme="dark"]) .highlight .p { color: #D0D0D0 } /* Punctuation */
:where([data-theme="dark"]) .highlight .ch { color: #ABABAB; font-style: italic } /* Comment.Hashbang */
:where([data-theme="dark"]) .highlight .cm { color: #ABABAB; font-style: italic } /* Comment.Multiline */
:where([data-theme="dark"]) .highlight .cp { color: #FF3A3A; font-weight: bold } /* Comment.Preproc */
:where([data-theme="dark"]) .highlight .cpf { color: #ABABAB; font-style: italic } /* Comment.PreprocFile */
:where([data-theme="dark"]) .highlight .c1 { color: #ABABAB; font-style: italic } /* Comment.Single */
:where([data-theme="dark"]) .highlight .cs { color: #E50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
:where([data-theme="dark"]) .highlight .gd { color: #FF3A3A } /* Generic.Deleted */
:where([data-theme="dark"]) .highlight .ge { color: #D0D0D0; font-style: italic } /* Generic.Emph */
:where([data-theme="dark"]) .highlight .ges { color: #D0D0D0; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
:where([data-theme="dark"]) .highlight .gr { color: #FF3A3A } /* Generic.Error */
:where([data-theme="dark"]) .highlight .gh { color: #FFF; font-weight: bold } /* Generic.Heading */
:where([data-theme="dark"]) .highlight .gi { color: #589819 } /* Generic.Inserted */
:where([data-theme="dark"]) .highlight .go { color: #CCC } /* Generic.Output */
:where([data-theme="dark"]) .highlight .gp { color: #AAA } /* Generic.Prompt */
:where([data-theme="dark"]) .highlight .gs { color: #D0D0D0; font-weight: bold } /* Generic.Strong */
:where([data-theme="dark"]) .highlight .gu { color: #FFF; text-decoration: underline } /* Generic.Subheading */
:where([data-theme="dark"]) .highlight .gt { color: #FF3A3A } /* Generic.Traceback */
:where([data-theme="dark"]) .highlight .kc { color: #6EBF26; font-weight: bold } /* Keyword.Constant */
:where([data-theme="dark"]) .highlight .kd { color: #6EBF26; font-weight: bold } /* Keyword.Declaration */
:where([data-theme="dark"]) .highlight .kn { color: #6EBF26; font-weight: bold } /* Keyword.Namespace */
:where([data-theme="dark"]) .highlight .kp { color: #6EBF26 } /* Keyword.Pseudo */
:where([data-theme="dark"]) .highlight .kr { color: #6EBF26; font-weight: bold } /* Keyword.Reserved */
:where([data-theme="dark"]) .highlight .kt { color: #6EBF26; font-weight: bold } /* Keyword.Type */
:where([data-theme="dark"]) .highlight .ld { color: #D0D0D0 } /* Literal.Date */
:where([data-theme="dark"]) .highlight .m { color: #51B2FD } /* Literal.Number */
:where([data-theme="dark"]) .highlight .s { color: #ED9D13 } /* Literal.String */
:where([data-theme="dark"]) .highlight .na { color: #BBB } /* Name.Attribute */
:where([data-theme="dark"]) .highlight .nb { color: #2FBCCD } /* Name.Builtin */
:where([data-theme="dark"]) .highlight .nc { color: #71ADFF; text-decoration: underline } /* Name.Class */
:where([data-theme="dark"]) .highlight .no { color: #40FFFF } /* Name.Constant */
:where([data-theme="dark"]) .highlight .nd { color: #FFA500 } /* Name.Decorator */
:where([data-theme="dark"]) .highlight .ni { color: #D0D0D0 } /* Name.Entity */
:where([data-theme="dark"]) .highlight .ne { color: #BBB } /* Name.Exception */
:where([data-theme="dark"]) .highlight .nf { color: #71ADFF } /* Name.Function */
:where([data-theme="dark"]) .highlight .nl { color: #D0D0D0 } /* Name.Label */
:where([data-theme="dark"]) .highlight .nn { color: #71ADFF; text-decoration: underline } /* Name.Namespace */
:where([data-theme="dark"]) .highlight .nx { color: #D0D0D0 } /* Name.Other */
:where([data-theme="dark"]) .highlight .py { color: #D0D0D0 } /* Name.Property */
:where([data-theme="dark"]) .highlight .nt { color: #6EBF26; font-weight: bold } /* Name.Tag */
:where([data-theme="dark"]) .highlight .nv { color: #40FFFF } /* Name.Variable */
:where([data-theme="dark"]) .highlight .ow { color: #6EBF26; font-weight: bold } /* Operator.Word */
:where([data-theme="dark"]) .highlight .pm { color: #D0D0D0 } /* Punctuation.Marker */
:where([data-theme="dark"]) .highlight .w { color: #666 } /* Text.Whitespace */
:where([data-theme="dark"]) .highlight .mb { color: #51B2FD } /* Literal.Number.Bin */
:where([data-theme="dark"]) .highlight .mf { color: #51B2FD } /* Literal.Number.Float */
:where([data-theme="dark"]) .highlight .mh { color: #51B2FD } /* Literal.Number.Hex */
:where([data-theme="dark"]) .highlight .mi { color: #51B2FD } /* Literal.Number.Integer */
:where([data-theme="dark"]) .highlight .mo { color: #51B2FD } /* Literal.Number.Oct */
:where([data-theme="dark"]) .highlight .sa { color: #ED9D13 } /* Literal.String.Affix */
:where([data-theme="dark"]) .highlight .sb { color: #ED9D13 } /* Literal.String.Backtick */
:where([data-theme="dark"]) .highlight .sc { color: #ED9D13 } /* Literal.String.Char */
:where([data-theme="dark"]) .highlight .dl { color: #ED9D13 } /* Literal.String.Delimiter */
:where([data-theme="dark"]) .highlight .sd { color: #ED9D13 } /* Literal.String.Doc */
:where([data-theme="dark"]) .highlight .s2 { color: #ED9D13 } /* Literal.String.Double */
:where([data-theme="dark"]) .highlight .se { color: #ED9D13 } /* Literal.String.Escape */
:where([data-theme="dark"]) .highlight .sh { color: #ED9D13 } /* Literal.String.Heredoc */
:where([data-theme="dark"]) .highlight .si { color: #ED9D13 } /* Literal.String.Interpol */
:where([data-theme="dark"]) .highlight .sx { color: #FFA500 } /* Literal.String.Other */
:where([data-theme="dark"]) .highlight .sr { color: #ED9D13 } /* Literal.String.Regex */
:where([data-theme="dark"]) .highlight .s1 { color: #ED9D13 } /* Literal.String.Single */
:where([data-theme="dark"]) .highlight .ss { color: #ED9D13 } /* Literal.String.Symbol */
:where([data-theme="dark"]) .highlight .bp { color: #2FBCCD } /* Name.Builtin.Pseudo */
:where([data-theme="dark"]) .highlight .fm { color: #71ADFF } /* Name.Function.Magic */
:where([data-theme="dark"]) .highlight .vc { color: #40FFFF } /* Name.Variable.Class */
:where([data-theme="dark"]) .highlight .vg { color: #40FFFF } /* Name.Variable.Global */
:where([data-theme="dark"]) .highlight .vi { color: #40FFFF } /* Name.Variable.Instance */
:where([data-theme="dark"]) .highlight .vm { color: #40FFFF } /* Name.Variable.Magic */
:where([data-theme="dark"]) .highlight .il { color: #51B2FD } /* Literal.Number.Integer.Long */

/* -- small screens ------------------------------------------------------------------- */
/* Small screens: the sidebar starts closed and opens over the page with the ☰ button. */
@media (max-width: 768px) {
  .sidebar { display: none; width: min(85vw, 320px); transform: none; box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15); z-index: 250; }
  .page-container.sidebar-open .sidebar { display: block; transform: none; }
  .content-container { position: static; width: 100%; height: auto; overflow: visible; padding: 0 16px; }
  .site-tagline, .header-links { display: none; }
  .page-container:not(.sidebar-open) .show-sidebar-btn { display: flex; top: 70px; left: auto; right: 12px; }
  .page-container.sidebar-open .show-sidebar-btn { display: none; }
}