/* Shared by the public site and the editor preview.
   "Graphite notebook": cool paper/graphite, one muted ink-blue accent used only
   for interaction, Literata for reading, JetBrains Mono for code. */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/vendor/fonts/literata-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/vendor/fonts/literata-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/vendor/fonts/literata-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/vendor/fonts/literata-latin-ext-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/vendor/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* paper */
  --bg: #f7f7f5;
  --surface: #eeefec;
  --fg: #2a2e35;
  --strong: #15181d;
  --muted: #6b717b;
  --faint: #9ca1a8;
  --border: #dfe1e3;
  --accent: #2f6a8a;
  --accent-soft: #2f6a8a14;
  --mark: #f3dd8a80;
  --selection: #2f6a8a2e;
  --active-line: #0000000a;
  --code-bg: #eeefec;
  --hl-keyword: #6f4e95;
  --hl-string: #3f7356;
  --hl-number: #9a5b2b;
  --hl-title: #2f6a8a;
  --hl-comment: #9ca1a8;
  --c-blue: 63, 111, 156;
  --c-teal: 46, 120, 116;
  --c-green: 70, 122, 76;
  --c-amber: 160, 110, 40;
  --c-red: 170, 72, 72;
  --c-violet: 110, 86, 160;
  --c-grey: 110, 116, 124;

  --font-text: "Literata", Charter, "Iowan Old Style", Georgia, serif;
  --font-ui: "Literata", Charter, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 45rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1e22;
    --surface: #24272c;
    --fg: #c8ccd2;
    --strong: #e4e6e9;
    --muted: #868c95;
    --faint: #5f656e;
    --border: #2f3238;
    --accent: #8fb0c6;
    --accent-soft: #8fb0c61a;
    --mark: #e8c65a2e;
    --selection: #8fb0c633;
    --active-line: #ffffff07;
    --code-bg: #24272c;
    --hl-keyword: #b9a3d9;
    --hl-string: #a3c4a6;
    --hl-number: #d6b48c;
    --hl-title: #8fb0c6;
    --hl-comment: #6b717b;
    --c-blue: 143, 176, 198;
    --c-teal: 132, 190, 182;
    --c-green: 150, 190, 150;
    --c-amber: 214, 180, 120;
    --c-red: 214, 140, 140;
    --c-violet: 185, 163, 217;
    --c-grey: 150, 156, 164;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1e22;
  --surface: #24272c;
  --fg: #c8ccd2;
  --strong: #e4e6e9;
  --muted: #868c95;
  --faint: #5f656e;
  --border: #2f3238;
  --accent: #8fb0c6;
  --accent-soft: #8fb0c61a;
  --mark: #e8c65a2e;
  --selection: #8fb0c633;
  --active-line: #ffffff07;
  --code-bg: #24272c;
  --hl-keyword: #b9a3d9;
  --hl-string: #a3c4a6;
  --hl-number: #d6b48c;
  --hl-title: #8fb0c6;
  --hl-comment: #6b717b;
  --c-blue: 143, 176, 198;
  --c-teal: 132, 190, 182;
  --c-green: 150, 190, 150;
  --c-amber: 214, 180, 120;
  --c-red: 214, 140, 140;
  --c-violet: 185, 163, 217;
  --c-grey: 150, 156, 164;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--font-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }
code, pre, .cm-editor { font-variant-ligatures: none; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 0.15s, color 0.15s; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- site chrome */
.site { max-width: calc(var(--measure) + 48px); margin: 0 auto; padding: 0 24px; min-height: 100vh; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 0 0; }
.site-title { font-weight: 600; font-size: 1rem; color: var(--strong); text-decoration: none; }
.site-title:hover { color: var(--strong); }
.site-nav { display: flex; align-items: center; gap: 20px; font-size: 0.94rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--strong); }
.theme-toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px -4px 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; align-self: center; }
.theme-toggle:hover { color: var(--strong); }
.site-main { flex: 1; padding: 72px 0 96px; }
.site-footer { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0 48px; color: var(--faint); font-size: 0.88rem; }
.site-footer a { color: var(--faint); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-intro { color: var(--muted); font-size: 1.12rem; line-height: 1.6; margin: 0 0 56px; max-width: 30rem; }
.page-title { font-size: 2rem; font-weight: 350; color: var(--strong); letter-spacing: -0.01em; margin: 0 0 40px; }
.empty { color: var(--muted); }

/* ---------- index */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-item { margin: 0 0 36px; }
.post-link { display: inline; color: var(--strong); font-size: 1.3rem; font-weight: 450; line-height: 1.35; text-decoration: none; }
.post-link:hover { color: var(--accent); }
.post-item time { display: block; margin-top: 4px; color: var(--faint); font-size: 0.9rem; }
.post-excerpt { margin: 8px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.badge { font-size: 0.85rem; font-style: italic; color: var(--muted); font-weight: 400; }
.tag-cloud { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 1.05rem; }
.tag-cloud .count { color: var(--faint); font-size: 0.9rem; margin-left: 2px; }
.draft-banner, .fm-error { padding: 10px 14px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 0.92rem; margin-bottom: 40px; }
.fm-error { color: rgb(var(--c-red)); }

/* ---------- article */
.article-header { margin-bottom: 48px; }
.article-title {
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--strong);
  margin: 0 0 18px;
  text-wrap: balance;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--faint); font-size: 0.92rem; }
.article-tags { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.94rem; }
.article-footer { margin-top: 32px; font-size: 0.94rem; }
.article-footer a, .article-tags a { color: var(--muted); text-decoration: none; }
.article-footer a:hover, .article-tags a:hover { color: var(--accent); }

.article-body { font-family: var(--font-text); font-size: 1.1875rem; line-height: 1.7; color: var(--fg); overflow-wrap: break-word; hanging-punctuation: first; }
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote, .article-body pre, .article-body table, .article-body figure, .article-body .callout, .article-body .katex-display { margin: 0 0 1.35em; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 {
  color: var(--strong); line-height: 1.3; margin: 2.2em 0 0.7em; scroll-margin-top: 24px; font-weight: 550;
}
.article-body h1 { font-size: 1.6rem; font-weight: 400; }
.article-body h2 { font-size: 1.35rem; font-weight: 450; }
.article-body h3 { font-size: 1.12rem; }
.article-body h4, .article-body h5, .article-body h6 { font-size: 1rem; }
.article-body strong { font-weight: 600; color: var(--strong); }
.article-body a { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li { margin: 0.3em 0; padding-left: 0.2em; }
.article-body li::marker { color: var(--faint); }
.article-body li > ul, .article-body li > ol { margin: 0.3em 0; }
.article-body img, .article-body video { display: block; max-width: 100%; height: auto; border-radius: 4px; margin: 0 auto; }
.article-body p > img:only-child { margin: 0.4em auto; }
.article-body audio { width: 100%; }
.article-body iframe.pdf-embed { width: 100%; height: 80vh; border: 1px solid var(--border); border-radius: 4px; }
.article-body hr { border: 0; height: auto; margin: 2.6em 0; text-align: center; }
.article-body hr::after { content: "* * *"; color: var(--faint); letter-spacing: 0.5em; }
.article-body blockquote { margin-left: 0; padding: 0 0 0 1.2em; border-left: 2px solid var(--border); color: var(--muted); font-style: italic; }
.article-body mark { background: var(--mark); color: inherit; padding: 0.05em 0.15em; border-radius: 3px; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 0.92em; display: block; overflow-x: auto; }
.article-body th, .article-body td { border-bottom: 1px solid var(--border); padding: 8px 14px 8px 0; text-align: left; vertical-align: top; }
.article-body th { color: var(--strong); font-weight: 600; }
.article-body :not(pre) > code { font-family: var(--font-mono); font-size: 0.8em; background: var(--code-bg); color: var(--strong); padding: 0.15em 0.4em; border-radius: 4px; }
.article-body pre { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.65; background: var(--code-bg); padding: 16px 20px; border-radius: 6px; overflow-x: auto; }
.article-body pre code { font-family: inherit; }
.article-body pre.mermaid { background: none; padding: 0; text-align: center; }
.article-body .katex { font-size: 1.05em; }
.article-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.article-body .contains-task-list { list-style: none; padding-left: 0.2em; }
.article-body .task-list-item input { margin: 0 0.6em 0 0; accent-color: var(--muted); vertical-align: -1px; }
.article-body .task-list-item label { cursor: default; }
.article-body .task-list-item:has(input:checked) { color: var(--muted); }
.article-body .internal-link.unresolved { text-decoration: none; }
.article-body a.tag { color: var(--muted); text-decoration: none; }
.article-body a.tag:hover { color: var(--accent); }
.article-body .footnote-ref { font-size: 0.7em; line-height: 0; }
.article-body .footnote-ref a { color: var(--muted); text-decoration: none; padding: 0 0.1em; }
.article-body .footnote-ref a:hover { color: var(--accent); }
.article-body .footnotes-sep { margin: 2.5em 0 1em; }
.article-body .footnotes-sep::after { content: none; }
.article-body .footnotes { font-size: 0.9rem; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--border); padding-top: 1em; }
.article-body .footnotes-sep + .footnotes { border-top: 0; padding-top: 0; }
.article-body .footnotes ol { padding-left: 1.2em; }
.article-body .footnote-backref { text-decoration: none; color: var(--faint); }

/* highlight.js: low-chroma */
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type, .hljs-meta .hljs-keyword { color: var(--hl-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: var(--hl-string); }
.hljs-number, .hljs-built_in, .hljs-symbol, .hljs-bullet, .hljs-variable.language_ { color: var(--hl-number); }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--hl-title); }
.hljs-comment, .hljs-quote, .hljs-meta, .hljs-deletion { color: var(--hl-comment); font-style: italic; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ---------- callouts (> [!type] Title): neutral panel, tinted icon + title */
.callout { --c: var(--c-blue); padding: 14px 18px; border-radius: 6px; background: var(--surface); font-size: 0.95em; }
.callout-title { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.95rem; color: rgb(var(--c)); }
.callout-title p { margin: 0; }
.callout-icon { width: 17px; height: 17px; flex: none; opacity: 0.9; }
.callout-content { margin-top: 6px; }
.callout-content > :last-child { margin-bottom: 0; }
.callout-content:empty { display: none; }
details.callout > summary { cursor: pointer; list-style: none; }
details.callout > summary::-webkit-details-marker { display: none; }
details.callout > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; opacity: 0.7; }
details.callout[open] > summary::after { transform: rotate(45deg); }
.callout-abstract, .callout-tip { --c: var(--c-teal); }
.callout-success { --c: var(--c-green); }
.callout-question, .callout-warning { --c: var(--c-amber); }
.callout-failure, .callout-danger, .callout-bug { --c: var(--c-red); }
.callout-example { --c: var(--c-violet); }
.callout-quote { --c: var(--c-grey); }

/* ---------- login */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login { width: min(320px, 100%); display: flex; flex-direction: column; gap: 10px; }
.login .site-title { margin-bottom: 24px; font-size: 1.4rem; font-weight: 400; }
.login label { font-size: 0.92rem; color: var(--muted); }
.login input { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--strong); }
.login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login button { font: inherit; font-weight: 600; padding: 9px 12px; border: 0; border-radius: 6px; background: var(--strong); color: var(--bg); cursor: pointer; margin-top: 8px; }
.login-error { color: rgb(var(--c-red)); font-size: 0.92rem; margin: 0; }