/* Components for ML Inside Weird Things. Site typography, colors, and layout come from revamp.css. */
.post .prose p{margin:0 0 24px;color:var(--ink-soft)}
.post .prose p.lede{font:300 22px/34px var(--font-serif);color:var(--ink);margin:0 0 30px}
.post .prose strong{color:var(--ink);font-weight:600}
.post .blog-body h2{scroll-margin-top:24px}
.post .blog-body figure{margin:34px 0}
.post .figure{border:1px solid var(--line);background:var(--surface);padding:20px;border-radius:5px;overflow:hidden}
.post .figurehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;font-family:var(--font-sans)}
.post .figurehead strong{color:var(--ink);font-size:14px;font-weight:600}
.post .figurehead span{color:var(--ink-faint);font:12px/18px var(--font-mono)}
.post .blog-body figcaption{margin-top:9px}
.post .ctarow{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 34px}
.post .wt-cta{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);background:var(--accent);color:var(--bg);padding:9px 14px;min-height:40px;border-radius:3px;text-decoration:none;font:500 12px/18px var(--font-mono)}
.post .wt-cta:hover{opacity:.86;color:var(--bg)}
.post .wt-cta.secondary{background:transparent;color:var(--accent)}
.post .wt-cta.secondary:hover{color:var(--ink)}
.post .drawlayout{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.post .drawpad{display:block;width:100%;aspect-ratio:1;background:white;border:1px solid var(--line);touch-action:none;cursor:crosshair;border-radius:3px}
.post .pixelgrid{display:grid;grid-template-columns:repeat(28,1fr);gap:1px;padding:1px;aspect-ratio:1;background:#d5dad6;border:1px solid #d5dad6;overflow:hidden}
.post .pixelgrid span{display:block;background:#fff;min-width:0}
.post .drawnote{margin:10px 0 0;color:var(--ink-faint);font:11px/17px var(--font-mono)}
.post .controlrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.post .smallbtn{border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink);font:11px/18px var(--font-mono);border-radius:3px;padding:5px 10px;cursor:pointer}
.post .smallbtn:hover{border-color:var(--accent)}
.post .diagram{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.post .block{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:70px;padding:8px 5px;text-align:center;border:1px solid var(--line);background:var(--surface-sunk);color:var(--ink-soft);cursor:pointer;border-radius:3px}
.post .block.active{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.post .block b{font:500 11px/15px var(--font-sans)}
.post .block small{font:10px/14px var(--font-mono);margin-top:5px}
.post .detail{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;min-height:65px;color:var(--ink-soft);font:13px/20px var(--font-sans)}
.post .convwrap{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.post .matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.post .kernel{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:126px}
.post .cell{display:grid;place-items:center;aspect-ratio:1;background:var(--surface-sunk);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:11px var(--font-mono)}
.post .cell.hot{border-color:var(--accent);background:var(--accent-soft)}
.post .convresult{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;color:var(--ink-soft);font:11px/18px var(--font-mono);overflow-wrap:anywhere}
.post .convresult strong{color:var(--accent)}
.post .statgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:32px 0}
.post .stat{border-top:1px solid var(--line);padding-top:10px}
.post .stat b{display:block;color:var(--ink);font:300 25px/32px var(--font-serif)}
.post .stat span{display:block;color:var(--ink-faint);font:11px/16px var(--font-mono);margin-top:5px}
.post .callout{border-left:2px solid var(--accent);background:var(--surface);padding:15px 17px;margin:32px 0;color:var(--ink-soft);font:14px/23px var(--font-sans)}
.post .callout strong{color:var(--ink)}
@media(max-width:600px){.post .figure{padding:12px}.post .figurehead{display:block}.post .figurehead span{display:block;margin-top:3px}.post .drawlayout{gap:8px}.post .diagram{grid-template-columns:repeat(2,minmax(0,1fr))}.post .convwrap{grid-template-columns:1fr}.post .kernel{max-width:150px}.post .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}