* { box-sizing:border-box; }
html, body { margin:0; }

:root[data-theme=light] { --bg:#FFFFFF; --text:#111111; --muted:#5F5F5F; --faint:#8E8E8E; --line:#EAEAEA; --mark:#FFE14D; --on-mark:#111111; --code:#F5F5F2; }
:root[data-theme=dark]  { --bg:#121212; --text:#ECECEC; --muted:#A6A6A6; --faint:#767676; --line:#2A2A2A; --mark:#FFE14D; --on-mark:#111111; --code:#1C1C1C; }

body { min-height:100vh; background:var(--bg); color:var(--text); font:400 16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--text); text-decoration:underline; text-decoration-color:var(--mark); text-decoration-thickness:3px; text-underline-offset:2px; }
a:hover { background:var(--mark); color:var(--on-mark); }
a:focus-visible, button:focus-visible { outline:2px solid var(--text); outline-offset:3px; border-radius:2px; }
::selection { background:var(--mark); color:var(--on-mark); }

.wrap { max-width:680px; margin:0 auto; padding:clamp(36px,7vw,64px) 20px 56px; }

.masthead { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.wordmark { font-weight:600; }
.toggle { appearance:none; border:0; background:none; padding:0; color:var(--faint); font:inherit; font-size:14px; cursor:pointer; }
.toggle:hover { color:var(--text); }

.blog-index-head { margin:clamp(36px,7vw,56px) 0 28px; }
.blog-index-head h1 { font-size:22px; font-weight:600; line-height:1.3; margin:0 0 6px; }
.blog-index-head p { color:var(--muted); margin:0; max-width:56ch; }

.post-list { list-style:none; margin:0; padding:0; }
.post-list li { padding:0 0 24px; }
.post-list h2 { font-size:17px; font-weight:500; line-height:1.4; margin:0 0 3px; }
.post-list p { color:var(--muted); font-size:15px; margin:0; max-width:62ch; text-wrap:pretty; }
.post-list time { display:block; color:var(--faint); font-size:13px; margin-top:4px; }

.pager { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 0; font-size:15px; }
.pager-prev, .pager-next { flex:0 0 auto; min-width:5.5em; }
.pager-next { text-align:right; }
.pager-nums { display:flex; gap:10px; }
.pager-num.is-current { color:var(--faint); }

.article { margin:clamp(36px,7vw,56px) 0 0; }
.article-meta { color:var(--faint); font-size:14px; margin:0; }
.article h1 { font-size:clamp(26px,5vw,34px); font-weight:650; line-height:1.15; letter-spacing:-.015em; margin:8px 0 10px; text-wrap:balance; }
.article-tags { display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 32px; color:var(--faint); font-size:14px; }
.article-tags .tag::before { content:'#'; }
.prose { font-size:17px; line-height:1.65; max-width:66ch; }
.prose h2 { font-size:21px; font-weight:600; line-height:1.3; margin:40px 0 12px; }
.prose h3 { font-size:18px; font-weight:600; line-height:1.3; margin:30px 0 10px; }
.prose p { margin:0 0 18px; text-wrap:pretty; }
.prose ul, .prose ol { margin:0 0 18px; padding-left:1.3em; }
.prose li { margin:0 0 6px; }
.prose blockquote { margin:0 0 18px; padding:0 0 0 16px; border-left:3px solid var(--mark); color:var(--muted); }
.prose img { max-width:100%; height:auto; border-radius:3px; }
.prose code { font:400 .86em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--code); border-radius:3px; padding:1px 5px; }
.prose pre.highlight, .prose div.highlight { margin:0 0 22px; }
.prose .highlight pre, .prose pre.highlight { overflow-x:auto; padding:14px 16px; border-radius:4px; background:var(--code); }
.prose .highlight code, .prose pre.highlight code { font:400 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:none; padding:0; }
.article-back { display:inline-block; margin:36px 0 0; }

.colophon { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:56px; color:var(--faint); font-size:13px; }
.colophon a { color:var(--faint); }
.colophon a:hover { color:var(--on-mark); }

:root[data-theme=light] .highlight table td { padding: 5px; }
:root[data-theme=light] .highlight table pre { margin: 0; }
:root[data-theme=light] .highlight .cm {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .cp {
  color: #999999;
  font-weight: bold;
}
:root[data-theme=light] .highlight .c1 {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
:root[data-theme=light] .highlight .c, :root[data-theme=light] .highlight .ch, :root[data-theme=light] .highlight .cd, :root[data-theme=light] .highlight .cpf {
  color: #999988;
  font-style: italic;
}
:root[data-theme=light] .highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
:root[data-theme=light] .highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
:root[data-theme=light] .highlight .ge {
  color: #000000;
  font-style: italic;
}
:root[data-theme=light] .highlight .gr {
  color: #aa0000;
}
:root[data-theme=light] .highlight .gh {
  color: #999999;
}
:root[data-theme=light] .highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
:root[data-theme=light] .highlight .go {
  color: #888888;
}
:root[data-theme=light] .highlight .gp {
  color: #555555;
}
:root[data-theme=light] .highlight .gs {
  font-weight: bold;
}
:root[data-theme=light] .highlight .gu {
  color: #aaaaaa;
}
:root[data-theme=light] .highlight .gt {
  color: #aa0000;
}
:root[data-theme=light] .highlight .kc {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kd {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kn {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kp {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kr {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .kt {
  color: #445588;
  font-weight: bold;
}
:root[data-theme=light] .highlight .k, :root[data-theme=light] .highlight .kv {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .mf {
  color: #009999;
}
:root[data-theme=light] .highlight .mh {
  color: #009999;
}
:root[data-theme=light] .highlight .il {
  color: #009999;
}
:root[data-theme=light] .highlight .mi {
  color: #009999;
}
:root[data-theme=light] .highlight .mo {
  color: #009999;
}
:root[data-theme=light] .highlight .m, :root[data-theme=light] .highlight .mb, :root[data-theme=light] .highlight .mx {
  color: #009999;
}
:root[data-theme=light] .highlight .sa {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .sb {
  color: #d14;
}
:root[data-theme=light] .highlight .sc {
  color: #d14;
}
:root[data-theme=light] .highlight .sd {
  color: #d14;
}
:root[data-theme=light] .highlight .s2 {
  color: #d14;
}
:root[data-theme=light] .highlight .se {
  color: #d14;
}
:root[data-theme=light] .highlight .sh {
  color: #d14;
}
:root[data-theme=light] .highlight .si {
  color: #d14;
}
:root[data-theme=light] .highlight .sx {
  color: #d14;
}
:root[data-theme=light] .highlight .sr {
  color: #009926;
}
:root[data-theme=light] .highlight .s1 {
  color: #d14;
}
:root[data-theme=light] .highlight .ss {
  color: #990073;
}
:root[data-theme=light] .highlight .s, :root[data-theme=light] .highlight .dl {
  color: #d14;
}
:root[data-theme=light] .highlight .na {
  color: #008080;
}
:root[data-theme=light] .highlight .bp {
  color: #999999;
}
:root[data-theme=light] .highlight .nb {
  color: #0086B3;
}
:root[data-theme=light] .highlight .nc {
  color: #445588;
  font-weight: bold;
}
:root[data-theme=light] .highlight .no {
  color: #008080;
}
:root[data-theme=light] .highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
:root[data-theme=light] .highlight .ni {
  color: #800080;
}
:root[data-theme=light] .highlight .ne {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nf, :root[data-theme=light] .highlight .fm {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nl {
  color: #990000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .nn {
  color: #555555;
}
:root[data-theme=light] .highlight .nt {
  color: #000080;
}
:root[data-theme=light] .highlight .vc {
  color: #008080;
}
:root[data-theme=light] .highlight .vg {
  color: #008080;
}
:root[data-theme=light] .highlight .vi {
  color: #008080;
}
:root[data-theme=light] .highlight .nv, :root[data-theme=light] .highlight .vm {
  color: #008080;
}
:root[data-theme=light] .highlight .ow {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .o {
  color: #000000;
  font-weight: bold;
}
:root[data-theme=light] .highlight .w {
  color: #bbbbbb;
}
:root[data-theme=light] .highlight {
  background-color: #f8f8f8;
}
:root[data-theme=dark] .highlight table td { padding: 5px; }
:root[data-theme=dark] .highlight table pre { margin: 0; }
:root[data-theme=dark] .highlight, :root[data-theme=dark] .highlight .w {
  color: #d0d0d0;
  background-color: #151515;
}
:root[data-theme=dark] .highlight .err {
  color: #151515;
  background-color: #ac4142;
}
:root[data-theme=dark] .highlight .c, :root[data-theme=dark] .highlight .ch, :root[data-theme=dark] .highlight .cd, :root[data-theme=dark] .highlight .cm, :root[data-theme=dark] .highlight .cpf, :root[data-theme=dark] .highlight .c1, :root[data-theme=dark] .highlight .cs {
  color: #505050;
}
:root[data-theme=dark] .highlight .cp {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .nt {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .o, :root[data-theme=dark] .highlight .ow {
  color: #d0d0d0;
}
:root[data-theme=dark] .highlight .p, :root[data-theme=dark] .highlight .pi {
  color: #d0d0d0;
}
:root[data-theme=dark] .highlight .gi {
  color: #90a959;
}
:root[data-theme=dark] .highlight .gd {
  color: #ac4142;
}
:root[data-theme=dark] .highlight .gh {
  color: #6a9fb5;
  background-color: #151515;
  font-weight: bold;
}
:root[data-theme=dark] .highlight .k, :root[data-theme=dark] .highlight .kn, :root[data-theme=dark] .highlight .kp, :root[data-theme=dark] .highlight .kr, :root[data-theme=dark] .highlight .kv {
  color: #aa759f;
}
:root[data-theme=dark] .highlight .kc {
  color: #d28445;
}
:root[data-theme=dark] .highlight .kt {
  color: #d28445;
}
:root[data-theme=dark] .highlight .kd {
  color: #d28445;
}
:root[data-theme=dark] .highlight .s, :root[data-theme=dark] .highlight .sb, :root[data-theme=dark] .highlight .sc, :root[data-theme=dark] .highlight .dl, :root[data-theme=dark] .highlight .sd, :root[data-theme=dark] .highlight .s2, :root[data-theme=dark] .highlight .sh, :root[data-theme=dark] .highlight .sx, :root[data-theme=dark] .highlight .s1 {
  color: #90a959;
}
:root[data-theme=dark] .highlight .sa {
  color: #aa759f;
}
:root[data-theme=dark] .highlight .sr {
  color: #75b5aa;
}
:root[data-theme=dark] .highlight .si {
  color: #8f5536;
}
:root[data-theme=dark] .highlight .se {
  color: #8f5536;
}
:root[data-theme=dark] .highlight .nn {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .nc {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .no {
  color: #f4bf75;
}
:root[data-theme=dark] .highlight .na {
  color: #6a9fb5;
}
:root[data-theme=dark] .highlight .m, :root[data-theme=dark] .highlight .mb, :root[data-theme=dark] .highlight .mf, :root[data-theme=dark] .highlight .mh, :root[data-theme=dark] .highlight .mi, :root[data-theme=dark] .highlight .il, :root[data-theme=dark] .highlight .mo, :root[data-theme=dark] .highlight .mx {
  color: #90a959;
}
:root[data-theme=dark] .highlight .ss {
  color: #90a959;
}