:root {
    color-scheme: dark;
    --bg: #1d1d1d;
    --text: rgba(129, 221, 76, .979);
    --accent: #63b434;
    --muted: #a3a3a3;
    --surface: #2f2f2f;
    font-family: "Space Mono", monospace;
    background: var(--bg);
    color: var(--text);
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #d1bd92;
    --text: #000;
    --accent: #805300;
    --muted: #545454;
    --surface: #eee0be;
}
* { box-sizing: border-box; }
body { display: flex; flex-direction: column; min-height: 100vh; max-width: 1600px; margin: auto; padding: 2rem 1rem 0; font-size: .875rem; line-height: 1.5; }
a { color: inherit; text-underline-offset: .25rem; }
a:hover { color: var(--accent); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.brand { flex-shrink: 0; background: var(--accent); color: var(--bg); padding: .25rem; font-weight: bold; text-decoration: none; }
.brand::before { content: "["; }
.brand::after { content: "]"; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-header nav a { color: var(--accent); text-decoration: none; }
.site-header nav a::before { content: "./"; color: var(--muted); }
nav a[aria-current="page"] { text-decoration: underline; }
#theme-toggle { border: 0; background: none; color: var(--text); font: inherit; font-size: 1.5rem; cursor: pointer; }
main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.surface, .sp-content-index-shell, .sp-content-detail-shell { background: var(--surface); padding: 1rem; }
h1, h2, h3, h4 { font-size: 1.125rem; line-height: 1.6; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
ul { padding-left: 1.25rem; }
li { margin-block: .2rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.home-posts { margin-top: 4rem; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { margin-bottom: .75rem; }
.post-list time { display: inline-block; min-width: 9rem; margin-right: 1rem; padding-right: 1rem; color: var(--muted); border-right: 1px solid var(--accent); }
.post-list p { margin-top: .5rem; font-style: italic; }
.portrait { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.skills { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; }
.skills ul { margin-top: 0; }
.blog-layout { display: grid; grid-template-columns: 3fr 1fr; align-items: start; gap: 1rem; }
.taxonomy-links { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.taxonomy-links a, .tag { background: var(--accent); color: var(--bg); padding: 0 .25rem; }
.sp-content-list-item { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.sp-content-list-title { font-size: .875rem; margin-bottom: .5rem; }
.sp-content-list-title::before { content: "# "; color: var(--muted); }
.sp-content-list-summary { font-style: italic; margin-bottom: .5rem; }
.sp-content-list-tags { display: none; }
.sp-content-list-footer, .sp-content-detail-byline { color: var(--muted); }
.sp-content-pagination { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.sp-content-pagination .disabled { color: var(--muted); }
.sp-content-pagination[data-total-pages="1"] { display: none; }
.sp-content-detail-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sp-content-detail-footer { border-top: 1px dashed var(--accent); padding-top: 1rem; margin-top: 2rem; }
.with-sticky-sidebar { display: flex; gap: 1rem; align-items: flex-start; }
/* Override the generator's inline grid widths so its sidebar gap cannot cause overflow. */
.sticky-sidebar-main { flex: 1 1 0 !important; max-width: none !important; min-width: 0; }
.sticky-sidebar-aside { flex: 0 0 12rem !important; max-width: 12rem !important; position: sticky; top: 1rem; }
.sticky-sidebar-mobile-summary { cursor: pointer; margin-bottom: 1rem; }
.sidenav a { display: block; margin-block: .5rem; }
.sp-content-toc-empty { color: var(--muted); }
.sp-content-detail-content h1 { font-size: 1.5rem; }
.sp-content-detail-content h2, .sp-content-detail-content h3 { margin-top: 2rem; }
pre { overflow-x: auto; padding: 1rem; background: var(--bg); }
code { font-family: inherit; }
/* Highlight.js token colors follow the selected site theme. */
.hljs { color: #d4d4d4; }
.hljs-comment, .hljs-quote { color: #a5b09a; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #d7aefb; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #a8d999; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #f3bb7a; }
.hljs-title, .hljs-section, .hljs-type, .hljs-built_in { color: #8fc8f0; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #f0d080; }
.hljs-meta, .hljs-deletion { color: #f09c9c; }
:root[data-theme="light"] .hljs { color: #242424; }
:root[data-theme="light"] .hljs-comment, :root[data-theme="light"] .hljs-quote { color: #52614e; }
:root[data-theme="light"] .hljs-keyword, :root[data-theme="light"] .hljs-selector-tag, :root[data-theme="light"] .hljs-literal { color: #713899; }
:root[data-theme="light"] .hljs-string, :root[data-theme="light"] .hljs-regexp, :root[data-theme="light"] .hljs-addition { color: #326728; }
:root[data-theme="light"] .hljs-number, :root[data-theme="light"] .hljs-symbol, :root[data-theme="light"] .hljs-bullet { color: #8d4700; }
:root[data-theme="light"] .hljs-title, :root[data-theme="light"] .hljs-section, :root[data-theme="light"] .hljs-type, :root[data-theme="light"] .hljs-built_in { color: #155b8c; }
:root[data-theme="light"] .hljs-attr, :root[data-theme="light"] .hljs-attribute, :root[data-theme="light"] .hljs-variable, :root[data-theme="light"] .hljs-template-variable { color: #775000; }
:root[data-theme="light"] .hljs-meta, :root[data-theme="light"] .hljs-deletion { color: #a22e2e; }
img { max-width: 100%; height: auto; }
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
th, td { padding: .5rem; border: 1px dashed var(--accent); }
blockquote { border-left: 2px solid var(--accent); margin-left: 0; padding-left: 1rem; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 5rem 0 2rem; font-size: .75rem; font-weight: bold; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--bg); }
@media (max-width: 48rem) {
    body { padding-top: 1rem; }
    .site-header { flex-wrap: wrap; }
    .site-header nav { order: 3; width: 100%; }
    .blog-layout { grid-template-columns: 1fr; }
    .with-sticky-sidebar { flex-direction: column; }
    .sticky-sidebar-main { width: 100%; }
    .sticky-sidebar-aside { flex: auto !important; max-width: 100% !important; position: static; order: -1; }
    .post-list time { display: block; border: 0; }
    .home-posts { margin-top: 2rem; }
}