/* Blog: post list and article pages. */
.blog{max-width:900px}
/* bilingual article bodies: show only the block matching <html lang> (set by site.js) */
html[lang="en"] .t-sr,html:not([lang="en"]) .t-en{display:none}
.posts{display:grid;gap:16px;margin-top:20px}
.post{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--edge);border-radius:7px;background:var(--card);box-shadow:0 5px 0 var(--edge);padding:16px 20px 18px;transition:transform .08s,box-shadow .08s}
.post:hover{border-color:var(--link)}.post:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.post b{display:block;font:600 19px/1.3 Unbounded,sans-serif;margin:4px 0 8px}.post .ps{color:var(--mute);font-size:15px}
.pm{font-size:13px;font-weight:600;color:var(--mute);margin:0}
.back{margin:0 0 14px}.back:last-child{margin:18px 0 0}.back a{color:var(--link);font-weight:700;text-decoration:none}.back a:hover{text-decoration:underline}
.art h1{font:600 clamp(22px,4vw,30px)/1.25 Unbounded,sans-serif;margin:6px 0 16px}
.art h2{font:600 18px/1.3 Unbounded,sans-serif;margin:30px 0 8px}
.art h3{font-size:16px;margin:20px 0 4px}
.art p,.art li{font-size:16.5px;line-height:1.65;max-width:72ch}.art .lead{font-size:18px}
.art ul,.art ol{padding-left:24px}.art li{margin:5px 0}
.art code{font-size:.92em;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px}
.art figure{margin:20px 0}.art figcaption{font-size:13.5px;color:var(--mute);margin-top:6px}
.dg{border:2px solid var(--edge);border-radius:8px;background:var(--card);padding:8px;overflow-x:auto}.dg svg{display:block;width:100%;min-width:600px;height:auto}
.dg .bx{fill:var(--card);stroke:var(--edge);stroke-width:2}.dg .in{fill:var(--acc);fill-opacity:.18;stroke:var(--acc);stroke-width:1.5}
.dg .in2{fill:var(--link);fill-opacity:.12;stroke:var(--link);stroke-width:1.5}
.dg .jk{fill:var(--ink)}.dg .cb{fill:none;stroke:var(--root);stroke-width:3.5;stroke-linecap:round}
.dg .fl{fill:none;stroke:var(--mute);stroke-width:1.5;stroke-dasharray:4 4}
.dg .nb{fill:var(--root)}.dg .nt{fill:#fff;font-weight:700}
.dg text{fill:var(--ink)}.dg .t{font-weight:700}.dg .s{fill:var(--mute)}
.note{border-left:4px solid var(--acc);background:rgba(224,173,47,.12);padding:10px 14px;border-radius:0 7px 7px 0;margin:16px 0}
.note p{margin:0}
.tw{overflow-x:auto}.tb{width:100%;border-collapse:collapse;font-size:15px}.tb td,.tb th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}

/* interactive pieces inside posts (static/js/blog_widgets.js) */
.mgo{background:var(--acc);color:var(--accink);border:2px solid var(--edge);border-radius:7px;padding:6px 14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--edge)}
.mgo:active{transform:translateY(3px);box-shadow:none}
.hw{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(220px,1fr);gap:22px;align-items:start}
@media (max-width:760px){.hw{grid-template-columns:1fr}}
.hw .dg svg{min-width:0}
.steps{margin:0 0 10px;padding-left:22px}
#howsvg .fl{stroke-dasharray:6 6;animation:flow 1.1s linear infinite;opacity:.7}@keyframes flow{to{stroke-dashoffset:-24}}
#howsvg .xs,#howsvg .wf{transform-box:fill-box;transform-origin:center}
#howsvg.on .xs{animation:gvib 2.4s ease-out}
#howsvg .wf{stroke-dasharray:7 5;transform:scaleY(.06);animation:flow .5s linear infinite}
#howsvg.on .wf{animation:flow .5s linear infinite,wfa 2.4s ease-out}
@keyframes wfa{0%{transform:scaleY(1.4)}100%{transform:scaleY(.06)}}
@keyframes gvib{0%{transform:translateY(0)}3%{transform:translateY(-2.4px)}6%{transform:translateY(2.2px)}9%{transform:translateY(-2px)}12%{transform:translateY(1.8px)}16%{transform:translateY(-1.5px)}20%{transform:translateY(1.3px)}26%{transform:translateY(-1px)}34%{transform:translateY(.8px)}44%{transform:translateY(-.5px)}60%{transform:translateY(.3px)}100%{transform:translateY(0)}}
.types .ai{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:16px 0;border-top:2px dashed var(--line)}.types .ai:first-child{border-top:0;padding-top:4px}
.an{font:600 20px Unbounded,sans-serif;color:var(--acc);line-height:1.3}.art .ai h3{font:600 17px Unbounded,sans-serif;margin:0 0 2px}.art .ai p{margin:0 0 8px}
.art .ai .am{font-size:13px;color:var(--mute);font-weight:600}.art .ai .aw{font-size:14.5px;color:var(--mute);margin:0}.ai .aw b{color:var(--ink)}
@media (max-width:520px){.types .ai{grid-template-columns:1fr;gap:2px}}
.gv{border:2px solid var(--edge);border-radius:8px;background:var(--card);padding:8px;margin-bottom:8px}.gv svg{width:100%;height:auto}.gc{transition:r .5s cubic-bezier(.2,.8,.2,1)}
.tb tr.cur td{background:rgba(224,173,47,.22)}
dl.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 22px;margin:8px 0 0}dl.opts div{margin:0}
.opts dt{font-weight:700}.opts dd{margin:2px 0 0;color:var(--mute);font-size:15px}