:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #656d76;
  --link: #0a66c2;
  --border: #d8dee4;
  --code-bg: #f6f8fa;
  --tag-bg: #eef1f4;
  --hl-comment: #6a737d;
  --hl-keyword: #cf222e;
  --hl-string: #0a3069;
  --hl-type: #8250df;
  --hl-number: #0550ae;
  color-scheme: light;
}
/* Dark theme: follows the system unless the visitor picked a theme with the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --fg: #e6e6e6;
    --muted: #9aa4af;
    --link: #6cb6ff;
    --border: #30363d;
    --code-bg: #161b22;
    --tag-bg: #1f252d;
    --hl-comment: #8b949e;
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-type: #d2a8ff;
    --hl-number: #79c0ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115;
  --fg: #e6e6e6;
  --muted: #9aa4af;
  --link: #6cb6ff;
  --border: #30363d;
  --code-bg: #161b22;
  --tag-bg: #1f252d;
  --hl-comment: #8b949e;
  --hl-keyword: #ff7b72;
  --hl-string: #a5d6ff;
  --hl-type: #d2a8ff;
  --hl-number: #79c0ff;
  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: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}
.wrap { max-width: 760px; margin: 0 auto; padding-inline: 16px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--fg); cursor: pointer; opacity: .5; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; border-color: var(--link); color: var(--link); }
.theme-toggle svg { width: 18px; height: 18px; }
/* The icon shows the current mode: auto (follows the system), light or dark */
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-auto, :root[data-theme="dark"] .theme-toggle .icon-auto { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.site-brand { display: flex; flex-direction: column; min-width: 0; }
.site-title { font-size: 1.3rem; font-weight: 700; color: var(--fg); }
.site-description { color: var(--muted); font-size: .9rem; line-height: 1.3; }
main.wrap { padding-block: 24px 40px; }
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
.site-footer .wrap { padding-block: 18px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer p { margin: 8px 0 0; }

h1, h2, h3 { line-height: 1.3; }
.post h1 { font-size: 1.9rem; margin: 0 0 6px; }
.list-heading { font-size: 1.5rem; margin: 0 0 20px; }
.summary { padding-block: 8px 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.summary:last-child { border-bottom: 0; }
.summary h2 { font-size: 1.4rem; margin: 0 0 4px; }
.summary h2 a { color: var(--fg); }
.meta { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.meta time { margin-right: 8px; }
.tag { display: inline-block; background: var(--tag-bg); color: var(--muted); border-radius: 4px; padding: 0 7px; margin: 2px 4px 2px 0; font-size: .8rem; }

.content img { max-width: 100%; height: auto; border-radius: 4px; }
.content p.img { text-align: center; margin: 20px 0; }
.content img[data-broken] { min-width: 120px; min-height: 60px; border: 1px dashed var(--border); color: var(--muted); font-size: .85rem; }
.content blockquote { margin: 16px 0; padding: 4px 16px; border-left: 4px solid var(--border); color: var(--muted); }
.content .embed { position: relative; width: 100%; max-width: 640px; margin: 20px auto; }
.content .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.content .embed-vertical { max-width: 360px; aspect-ratio: 9 / 16; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .86em; }
:not(pre) > code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
pre, .highlight { background: var(--code-bg); border-radius: 6px; }
pre { padding: 12px 14px; overflow-x: auto; line-height: 1.45; -webkit-overflow-scrolling: touch; }
.highlight pre { margin: 0; }
div.highlighter-rouge { margin: 16px 0; }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .95rem; }
.pager .older { margin-left: auto; text-align: right; }

/* rouge: syntax colors come from theme tokens */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp { color: var(--hl-comment); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kt, .highlight .kn, .highlight .nt { color: var(--hl-keyword); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .na { color: var(--hl-string); }
.highlight .nc, .highlight .nf, .highlight .nx { color: var(--hl-type); }
.highlight .mi, .highlight .mf, .highlight .mh { color: var(--hl-number); }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .post h1 { font-size: 1.55rem; }
  .summary h2 { font-size: 1.25rem; }
}


.year { font-size: 1.2rem; margin: 28px 0 8px; }
.archive-item { margin: 6px 0; display: flex; gap: 12px; }
.archive-item time { flex: none; width: 4.5em; color: var(--muted); font-size: .9rem; padding-top: .15em; }

.plot { margin: 20px 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.plot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; font-size: .95rem; }
.plot-controls input { width: 5em; padding: 4px 6px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.plot svg { display: block; width: 100%; height: auto; }
.plot .grid { stroke: var(--border); stroke-width: 1; }
.plot .axis { stroke: var(--muted); stroke-width: 1; }
.plot .tick { fill: var(--muted); font-size: 12px; }
.plot .curve { fill: none; stroke: var(--link); stroke-width: 2; }
.plot .dot { fill: var(--link); }
.plot-seq { margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 36px; font-size: .9rem; }
.share-label { color: var(--muted); margin-right: 2px; }
.share a, .share button { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; line-height: 1.4; cursor: pointer; text-decoration: none; }
.share a:hover, .share button:hover { border-color: var(--link); color: var(--link); text-decoration: none; }
.share .share-native { border-color: var(--link); color: var(--link); }
.share [hidden] { display: none; }

/* Image viewer */
.content p.img a[href$=".png"], .content p.img a[href$=".gif"], .content p.img a[href$=".jpg"] { cursor: zoom-in; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(0, 0, 0, .94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox figure { margin: 0; padding: 56px 16px; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.lightbox img { max-width: 100%; max-height: calc(100% - 28px); object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.lightbox-counter { color: rgba(255, 255, 255, .75); font-size: .85rem; }
.lightbox button { position: absolute; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 400 30px/1 system-ui, sans-serif; cursor: pointer; }
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.lightbox-close { top: 12px; right: 12px; width: 44px; height: 44px; }
.lightbox .lightbox-nav { top: 50%; width: 44px; height: 64px; margin-top: -32px; border-radius: 8px; font-size: 40px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox [hidden] { display: none; }
@media (max-width: 600px) {
  .lightbox .lightbox-nav { top: auto; bottom: 12px; margin-top: 0; }
  .lightbox-prev { left: calc(50% - 56px); }
  .lightbox-next { right: calc(50% - 56px); }
}