/* Blog pages (generated by tools/blog/build.mjs). Builds on style.css's tokens. */
:root {
  --prose: #d9d9e6;
  --code-bg: rgba(255, 255, 255, .035);
  --tok-keyword: #c792ea; --tok-string: #a6e3a1; --tok-number: #ffb86c; --tok-comment: #6f7596;
  --tok-function: #82aaff; --tok-type: #ffd166; --tok-builtin: #00e0c6; --tok-literal: #ff79c6;
  --tok-operator: #89ddff; --tok-punct: #8a8aa3; --tok-property: #82aaff; --tok-tag: #ff79c6;
  --tok-attr: #ffd166; --tok-variable: #f78c6c; --tok-meta: #a48bff;
  --cjk: "Noto Sans TC", "PingFang TC", "Hiragino Sans", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}
:root[data-theme="light"] {
  --prose: #2a2a38;
  --code-bg: rgba(20, 20, 60, .04);
  --tok-keyword: #8a3fc4; --tok-string: #2a7f3b; --tok-number: #b35c00; --tok-comment: #7a7f99;
  --tok-function: #2f59d6; --tok-type: #9a6500; --tok-builtin: #007d73; --tok-literal: #c42a7a;
  --tok-operator: #1f6f99; --tok-punct: #6c6c86; --tok-property: #2f59d6; --tok-tag: #c42a7a;
  --tok-attr: #9a6500; --tok-variable: #b8431c; --tok-meta: #6a48f0;
}

.blog-main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 118px 0 30px; }
.blog-page { font-family: "Space Grotesk", var(--cjk); }

/* index + tag pages */
.blog-head { margin-bottom: 26px; }
.blog-head h1 {
  font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1.05; letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.blog-head .muted { margin: 10px 0 18px; }
.feed-link { font-size: .8rem; color: var(--a2); white-space: nowrap; }
.tag-chips a { font-size: .85rem; padding: 6px 14px; border-radius: 999px; background: var(--card); color: var(--muted); border: 1px solid var(--border); transition: color .2s, border-color .2s; }
.tag-chips a:hover { color: var(--fg); }
.tag-chips a.on { color: var(--fg); border-color: var(--a1); }
.tag-chips small { color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: .75em; margin-left: 2px; }
.year { font-size: .9rem; font-weight: 500; color: var(--muted); margin: 30px 0 12px; display: flex; align-items: center; gap: 12px; }
.year::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.empty-posts { text-align: center; }

/* a post */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 20; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--a1), var(--a2));
}
.post-head { margin-bottom: 30px; }
.back { display: inline-block; font-size: .85rem; color: var(--muted); margin-bottom: 26px; transition: color .2s, transform .2s; }
.back:hover { color: var(--a2); transform: translateX(-3px); }
.post-head .kicker { font-size: .85rem; color: var(--a2); margin-bottom: 10px; }
.post-head h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.tags a { font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--a2); }
.tags a:hover { text-decoration: underline; text-underline-offset: 3px; }

.toc { margin: 0 0 30px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.toc summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.toc ol { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
.toc li.toc-3 { padding-left: 16px; font-size: .95em; }
.toc a { color: var(--muted); transition: color .2s; }
.toc a:hover { color: var(--fg); }

/* typography */
.prose {
  color: var(--prose); font-size: 1.08rem; line-height: 1.8; overflow-wrap: break-word;
  text-autospace: normal; text-spacing-trim: normal; hanging-punctuation: allow-end; line-break: strict;
}
.prose:lang(zh), .post:lang(zh) .prose { line-height: 1.95; letter-spacing: .02em; }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { color: var(--fg); line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: 90px; position: relative; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.28rem; margin-top: 1.7em; }
.prose h4 { font-size: 1.08rem; margin-top: 1.5em; }
.prose h1 { font-size: 2rem; }
.anchor { margin-left: .35em; color: var(--muted); opacity: 0; font-weight: 400; transition: opacity .2s; text-decoration: none !important; }
.prose :is(h1, h2, h3, h4, h5, h6):hover .anchor, .anchor:focus-visible { opacity: .7; }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--a1); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.prose a:hover { color: var(--a2); text-decoration-color: var(--a2); }
.prose strong { color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li, .prose li > ul, .prose li > ol { margin-top: .35em; }
.prose li::marker { color: var(--a2); }
.prose ul.tasks { list-style: none; padding-left: .2em; }
.prose li.task input { accent-color: var(--a2); margin-right: .4em; transform: translateY(1px); }
.prose hr { border: 0; text-align: center; margin: 2.2em 0; }
.prose hr::after { content: "✦  ✦  ✦"; color: var(--muted); letter-spacing: .4em; white-space: pre; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.prose figure:not(.code) { margin-inline: 0; }
.prose figure:not(.code) img { margin: 0 auto; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .6); }
.prose figcaption { text-align: center; color: var(--muted); font-size: .88rem; margin-top: .6em; }
.prose blockquote { border-left: 3px solid var(--a1); padding: .2em 0 .2em 1.1em; color: var(--muted); }
.prose kbd {
  font-family: "JetBrains Mono", monospace; font-size: .82em; padding: .1em .45em; border-radius: 6px;
  border: 1px solid var(--border); border-bottom-width: 2px; background: var(--code-bg); color: var(--fg);
}
.prose :not(pre) > code {
  font-family: "JetBrains Mono", monospace; font-size: .86em; padding: .12em .4em; border-radius: 6px;
  background: var(--code-bg); border: 1px solid var(--border); color: var(--fg); overflow-wrap: anywhere;
}
.prose del { color: var(--muted); }

/* callouts: > [!NOTE] etc. */
.callout { --c: var(--a1); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-left: 3px solid var(--c); border-radius: 10px; padding: .85em 1.1em; background: color-mix(in srgb, var(--c) 7%, transparent); }
.callout > * + * { margin-top: .6em; }
.callout-title { font-weight: 700; color: var(--c); font-size: .92em; letter-spacing: .02em; }
.callout-title::before { content: "ℹ  "; white-space: pre; }
.callout-tip { --c: var(--a2); } .callout-tip .callout-title::before { content: "✦  "; }
.callout-important { --c: #c792ea; } .callout-important .callout-title::before { content: "❖  "; }
.callout-warning { --c: #ffb86c; } .callout-warning .callout-title::before { content: "⚠  "; }
.callout-caution { --c: #ff6b81; } .callout-caution .callout-title::before { content: "⛔  "; }
:root[data-theme="light"] .callout-warning { --c: #b35c00; }
:root[data-theme="light"] .callout-caution { --c: #d42a4f; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.5; }
.prose th, .prose td { padding: .6em .9em; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--fg); background: var(--code-bg); font-weight: 500; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }

/* code blocks */
figure.code { margin-inline: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--code-bg); overflow: hidden; position: relative; }
figure.code figcaption {
  display: flex; align-items: center; gap: 10px; padding: .45em .6em .45em 1em; margin: 0; text-align: left;
  border-bottom: 1px solid var(--border); font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--muted);
}
.code-title { color: var(--fg); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-lang { text-transform: lowercase; }
figure.code pre { overflow-x: auto; padding: 1em 1.1em; font-family: "JetBrains Mono", monospace; font-size: .86rem; line-height: 1.65; tab-size: 2; scrollbar-width: thin; }
.copy {
  font: inherit; font-size: .74rem; color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: 6px; padding: .15em .6em; cursor: pointer; transition: color .2s, border-color .2s;
}
.copy:hover, .copy:focus-visible { color: var(--fg); border-color: var(--a1); outline: none; }
figure.code > .copy { position: absolute; top: .55em; right: .6em; opacity: 0; font-family: "JetBrains Mono", monospace; }
figure.code:hover > .copy, figure.code > .copy:focus-visible { opacity: 1; }
@media (hover: none) { figure.code > .copy { opacity: 1; } }
.tok-keyword { color: var(--tok-keyword); } .tok-string { color: var(--tok-string); } .tok-number { color: var(--tok-number); }
.tok-comment { color: var(--tok-comment); font-style: italic; } .tok-function { color: var(--tok-function); }
.tok-type { color: var(--tok-type); } .tok-builtin { color: var(--tok-builtin); } .tok-literal { color: var(--tok-literal); }
.tok-operator { color: var(--tok-operator); } .tok-punct { color: var(--tok-punct); } .tok-property { color: var(--tok-property); }
.tok-tag { color: var(--tok-tag); } .tok-attr { color: var(--tok-attr); } .tok-variable { color: var(--tok-variable); } .tok-meta { color: var(--tok-meta); }
.tok-inserted { color: #5af2a5; background: rgba(90, 242, 165, .08); display: inline-block; width: 100%; }
.tok-deleted { color: #ff6b81; background: rgba(255, 107, 129, .08); display: inline-block; width: 100%; }

/* footnotes */
.fn a { text-decoration: none !important; font-family: "JetBrains Mono", monospace; font-size: .75em; color: var(--a2); padding: 0 .15em; }
.footnotes { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.footnotes ol { padding-left: 1.4em; }
.fn-back { text-decoration: none !important; }
:target { scroll-margin-top: 90px; }
.footnotes li:target, .prose :target { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--a2) 22%, transparent); } 100% { background: transparent; } }

/* post footer */
.post-foot { margin-top: 3em; padding: 0; text-align: left; font-size: 1rem; color: inherit; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-nav a { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; transition: border-color .25s, transform .25s; }
.post-nav a:hover { border-color: var(--a1); transform: translateY(-2px); }
.post-nav small { color: var(--muted); font-size: .76rem; }
.post-nav-next { text-align: right; grid-column: 2; }
.post-meta { margin-top: 20px; font-size: .78rem; color: var(--muted); }
.post-meta a { color: var(--a2); }
.post-meta kbd { font-family: inherit; border: 1px solid var(--border); border-radius: 4px; padding: 0 .35em; }
.post-meta code { color: var(--fg); }
footer a { color: var(--a2); }

@media (max-width: 560px) {
  .blog-main { padding-top: 100px; }
  .prose { font-size: 1.02rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { grid-column: 1; }
  .prose ul, .prose ol { padding-left: 1.2em; }
}
@media print {
  #sky, .nav, footer, .progress, .copy, .post-nav, .toc { display: none !important; }
  .blog-main { padding: 0; width: 100%; }
  .prose { color: #000; }
}