/* Blog architecture figures. See usage guide at the top of figures.js. */
.post figure.fig-wrap { margin: 40px 0; }
.fig {
  --f-bg:#12151b; --f-bg2:#181c25; --f-line:#262c38; --f-ink:#e8ecf3; --f-mut:#98a2b3;
  --f-or:#ff7a1a; --f-bl:#5b8cff; --f-gr:#3ddc97; --f-rd:#ff5d6c; --f-ye:#ffe27a;
  background: var(--f-bg); color: var(--f-ink); border: 1px solid var(--f-line);
  border-radius: 16px; overflow: hidden; font-family: var(--font-text, system-ui, sans-serif);
  box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 10px 30px -18px rgb(0 0 0 / .5);
}
.fig__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--f-line); background: var(--f-bg2); }
.fig__chip { font: 500 12px/1 var(--font-mono, ui-monospace, monospace); color: var(--f-or); background: rgb(255 122 26 / .12); border: 1px solid rgb(255 122 26 / .35); padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.fig__title { font: 600 15px/1.3 var(--font-text, system-ui, sans-serif); color: var(--f-ink); }
.fig__body { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig__body svg { display: block; width: 100%; height: auto; }
.fig__body svg text { font-family: var(--font-text, system-ui, sans-serif); }
.fig .t-mono { font-family: var(--font-mono, ui-monospace, monospace) !important; }
.fig .t-hand { font-family: "Kalam", "Caveat", "Comic Sans MS", cursive !important; }
.fig .t-name { font-weight: 600; fill: var(--f-ink); }
.fig .t-mut { fill: var(--f-mut); }
.fig .t-verb { font-style: italic; fill: #cfd6e4; }
.fig .edge--flow { animation: fig-flow 1.4s linear infinite; }
@keyframes fig-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .fig .edge--flow { animation: none; display: none; } }
figcaption.fig__cap { margin: 14px 2px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2, #2b2f36); max-width: 68ch; }
figcaption.fig__cap strong { color: var(--ink, #0b0c0e); }
figcaption.fig__cap em { color: var(--muted, #5d6470); }

/* console figure */
.fig-console { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; min-width: 0; }
.fig-panel { background: #0d1015; border: 1px solid var(--f-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fig-panel h4 { margin: 0; font: 600 14px/1.3 var(--font-text, system-ui, sans-serif); color: var(--f-ink); }
.fig-panel p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--f-mut); max-width: none; }
.fig-panel__screen { background: #090b0f; border: 1px solid var(--f-line); border-radius: 8px; padding: 10px; min-height: 150px; }
.fig-strip { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.fig-strip__it { flex: 1 0 64px; border: 1px solid var(--f-line); border-radius: 8px; padding: 8px 6px; text-align: center; font: 500 12px/1.3 var(--font-mono, monospace); color: var(--f-mut); }
.fig-strip__it b { display: block; color: var(--f-ink); font-weight: 600; font-size: 13px; margin-bottom: 2px; font-family: var(--font-text, sans-serif); }
.fig-strip__it.is-done { border-color: rgb(61 220 151 / .5); background: rgb(61 220 151 / .08); }
.fig-strip__it.is-now { border-color: var(--f-or); background: rgb(255 122 26 / .1); }
.fig-log { font: 400 12.5px/1.75 var(--font-mono, monospace); color: #cfd6e4; }
.fig-log div { display: flex; gap: 8px; white-space: nowrap; overflow-x: auto; }
.fig-log .c-ok { color: var(--f-gr); } .fig-log .c-info { color: var(--f-bl); } .fig-log .c-warn { color: var(--f-or); } .fig-log .c-err { color: var(--f-rd); }
.fig-log .c-dim { color: #667085; }
.fig-chart svg { width: 100%; height: auto; display: block; }

/* phones figure: real screenshots in phone frames */
.fig-phones { display: flex; gap: 14px; min-width: 640px; justify-content: center; align-items: flex-start; padding: 6px 2px; }
.fig-phone { flex: 1 1 0; min-width: 0; max-width: 170px; display: flex; flex-direction: column; gap: 8px; }
.fig-phone__frame { border: 3px solid #2f3646; border-radius: 22px; background: #000; overflow: hidden; line-height: 0; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .7); }
.fig-phone__frame img { width: 100%; height: auto; display: block; }
.fig-phone__step { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--font-text, sans-serif); color: var(--f-ink); }
.fig-phone__step span { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--f-or); color: #0b0c0e; font-size: 12px; display: grid; place-items: center; }
.fig-phone p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--f-mut); max-width: none; }

/* play/pause on animated figures */
.fig__play { margin-left: auto; font: 600 12px/1 var(--font-text, system-ui, sans-serif); color: var(--f-ink); background: #232a38; border: 1px solid #3a4254; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.fig__play:hover { background: #2c3446; }
/* steps figure */
.fig .st-node .st-ring { transition: stroke .3s, fill .3s; }
.fig .st-node.is-on .st-ring { stroke: #8b95ff; stroke-width: 2.4; fill: #1d2140; filter: drop-shadow(0 0 10px rgb(139 149 255 / .55)); }
.fig .st-link { transition: stroke .3s; }
.fig .st-link.is-on { stroke: #8b95ff; stroke-width: 2.4; }
.st-ui { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 6px; min-width: 600px; }
.st-panel { background: #0d1015; border: 1px solid var(--f-line); border-left: 3px solid #8b95ff; border-radius: 10px; padding: 12px 14px; min-height: 78px; }
.st-k { display: block; font: 600 11.5px/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #8b95ff; margin-bottom: 6px; }
.fig .st-t { margin: 0; font-size: 14px; line-height: 1.55; color: #dfe4ee; max-width: none; }
.fig .st-dots { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.st-dots::before { content: ""; position: absolute; left: 6%; right: 6%; top: 13px; height: 1px; background: #2f3646; }
.fig .st-dots li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; margin: 0; padding: 0; }
.fig .st-dots li::before, .fig .st-dots li::marker { content: none; }
.st-dots button { width: 27px; height: 27px; border-radius: 50%; border: 1px solid #3a4254; background: #12151b; color: var(--f-mut); font: 600 12px/1 var(--font-mono, monospace); cursor: pointer; position: relative; z-index: 1; }
.st-dots span { font-size: 11.5px; color: var(--f-mut); text-align: center; line-height: 1.25; }
.st-dots li.is-done button { border-color: #5b6478; color: var(--f-ink); }
.st-dots li.is-on button { background: #8b95ff; border-color: #8b95ff; color: #0b0c0e; }
.st-dots li.is-on span { color: var(--f-ink); font-weight: 600; }
/* new parts on an incremental board */
.fig .node--new rect, .fig .node--new path { stroke: #8b95ff; }
.fig .node--new { filter: drop-shadow(0 0 8px rgb(139 149 255 / .45)); }
/* stats figure */
.fx-stats { display: flex; flex-direction: column; gap: 12px; min-width: 600px; }
.fx-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.fx-cards.is-chain .fx-card:not(:last-child)::after { content: "\2192"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: #6b7590; font-size: 13px; }
.fx-card { position: relative; background: #0d1015; border: 1px solid var(--f-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.fx-card small { font: 600 10.5px/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--f-mut); }
.fx-card b { font: 650 20px/1.15 var(--font-mono, monospace); color: var(--f-ink); letter-spacing: -.02em; }
.fx-card span { font: 400 11.5px/1.3 var(--font-mono, monospace); color: #7b86a0; }
.fx-card.is-hi { border-color: var(--f-or); background: rgb(255 122 26 / .08); }
.fx-card.is-hi b { color: #ffb27a; }
.fx-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.fx-code { background: #090b0f; border: 1px solid var(--f-line); border-radius: 10px; overflow: hidden; }
.fx-code__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--f-line); font: 500 11.5px/1 var(--font-mono, monospace); color: var(--f-mut); }
.fx-code__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a4254; }
.fx-code__bar span { margin-left: 6px; }
.fig .fx-code pre { margin: 0; padding: 10px 12px; background: none; border: 0; font: 400 12px/1.65 var(--font-mono, monospace); color: #cfd6e4; white-space: pre; overflow-x: auto; }
.fx-note { background: rgb(255 122 26 / .07); border: 1px solid rgb(255 122 26 / .45); border-radius: 10px; padding: 12px 14px; }
.fx-note b { display: block; color: #ffb27a; font-size: 13.5px; margin-bottom: 4px; }
.fig .fx-note p { margin: 0; font-size: 13px; line-height: 1.55; color: #dfe4ee; max-width: none; }