:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666;
  --line: #e3e3e3;
  --link: #0b61c9;
  --accent: #f5f5f3;
  --code-bg: #f4f4f4;
  --maxw: 720px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a; --fg: #e6e6e6; --muted: #9aa0a6; --line: #2c2e33;
    --link: #6ea8fe; --accent: #1e2024; --code-bg: #23252a;
  }
}
* { 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, Arial, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-head {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 1.2rem 1rem;
  border-bottom: 1px solid var(--line);
}
.site-title { font-weight: 700; letter-spacing: -.01em; }
.site-link {
  font-size: .88rem; font-weight: 600; color: #fff; background: var(--link);
  padding: .45rem .8rem; border-radius: 7px; white-space: nowrap; flex-shrink: 0;
}
.site-link:hover { text-decoration: none; filter: brightness(1.08); }

main { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }

/* index */
.index-intro { color: var(--muted); margin: .5rem 0 2rem; }
.year { font-size: 1.05rem; color: var(--muted); border-bottom: 1px solid var(--line);
        padding-bottom: .3rem; margin: 2rem 0 .6rem; font-weight: 600; }
.post-index { list-style: none; padding: 0; margin: 0; }
.post-index li { display: flex; justify-content: space-between; gap: 1rem;
                 align-items: baseline; padding: .35rem 0; }
.post-index a { font-weight: 500; }
.idx-date { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* post */
.back { display: inline-block; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.post-title { font-size: 1.9rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4rem; }
.post-date { color: var(--muted); font-size: 1.05rem; font-weight: 500; margin: 0 0 2rem;
             font-variant-numeric: tabular-nums; }
.post-body { word-wrap: break-word; }
.post-body p { margin: 1rem 0; }
.post-body h1, .post-body h2, .post-body h3 { line-height: 1.25; margin: 2rem 0 .6rem; }
.post-body img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1.4rem auto; }
.post-body img.zoomable { cursor: zoom-in; }

/* image expansion modal */
.lightbox { position: fixed; inset: 0; z-index: 1000; padding: 2.5vmin;
            background: rgba(0,0,0,.92); cursor: zoom-out;
            display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 96vw; max-height: 96vh; width: auto; height: auto;
                object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.post-body figure { margin: 1.4rem 0; }
.post-body figcaption { color: var(--muted); font-size: .85rem; text-align: center; margin-top: .4rem; }
.post-body pre { background: var(--code-bg); padding: 1rem; border-radius: 6px;
                 overflow-x: auto; font-size: .85rem; line-height: 1.5; }
.post-body code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; font-size: .88em; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { border-left: 3px solid var(--line); margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem; color: var(--muted); }
.post-body table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.post-body td, .post-body th { border: 1px solid var(--line); padding: .4rem .6rem; }
.post-body iframe { max-width: 100%; }
.post-body ul, .post-body ol { padding-left: 1.4rem; }

/* comments */
.comments { margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.comments h2 { font-size: 1.15rem; margin: 0 0 1.2rem; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment-list { margin-left: 1.2rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.comment { padding: .9rem 0; }
.c-meta { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .2rem; }
.c-author { font-weight: 600; font-size: .92rem; }
.c-date { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.c-body { font-size: .95rem; }
.c-body p { margin: .4rem 0; }

.site-foot { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 3rem;
             border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }