/* Interactive figures for the SQLite inference article; site tokens live in revamp.css. */
.post .sql-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.post .sql-stage{min-height:76px;border:1px solid var(--line);border-radius:3px;background:var(--surface-sunk);color:var(--ink-soft);padding:9px 6px;cursor:pointer;text-align:left}
.post .sql-stage[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.post .sql-stage b{display:block;font:600 12px/17px var(--font-sans)}
.post .sql-stage small{display:block;margin-top:6px;font:10px/15px var(--font-mono);color:var(--ink-faint)}
.post .sql-bpe-word{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:100px;border:1px solid var(--line);border-radius:3px;background:var(--surface-sunk);padding:15px}
.post .sql-bpe-word span{display:grid;place-items:center;min-width:38px;min-height:42px;padding:0 8px;border:1px solid var(--line);border-radius:3px;background:var(--surface);font:600 17px var(--font-mono);color:var(--ink)}
.post .sql-bpe-word span.merged{border-color:var(--accent);background:var(--accent-soft)}
.post .sql-bpe-rules{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--ink-faint);font:10px/16px var(--font-mono)}
.post .sql-bpe-rules b{color:var(--accent);font-weight:500}
.post .sql-note{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;color:var(--ink-soft);font:11px/18px var(--font-mono)}
.post .sql-mat-layout{display:grid;grid-template-columns:1fr 1fr .8fr;gap:15px;align-items:start}
.post .sql-mat-label{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font:10px/16px var(--font-mono);margin-bottom:10px}
.post .sql-mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.post .sql-mat-grid span,.post .sql-mat-output{display:grid;place-items:center;min-height:33px;border:1px solid var(--line);background:var(--surface-sunk);border-radius:2px;color:var(--ink);font:12px var(--font-mono)}
.post .sql-mat-grid span.active,.post .sql-mat-output.active{border-color:var(--accent);background:var(--accent-soft)}
.post .sql-mat-control{display:grid;grid-template-columns:18px 1fr 25px;gap:5px;align-items:center;margin-bottom:7px;color:var(--ink-soft);font:11px var(--font-mono)}
.post .sql-mat-control input{width:100%;accent-color:var(--accent)}
.post .sql-mat-control output{text-align:right;color:var(--ink)}
.post .sql-mat-output{margin-bottom:4px}
.post .sql-bench{display:grid;gap:18px}
.post .sql-bench-top{display:flex;justify-content:space-between;color:var(--ink);font:12px var(--font-mono)}
.post .sql-bench-top b{font-weight:600}
.post .sql-bench-track{height:16px;background:var(--surface-sunk);border:1px solid var(--line);border-radius:2px;margin-top:7px;overflow:hidden}
.post .sql-bench-track span{display:block;height:100%;background:var(--accent);opacity:.68}
.post .sql-bench>div:nth-child(2) .sql-bench-track span{opacity:1}
.post .sql-bench p{margin:5px 0 0;color:var(--ink-faint);font:10px/16px var(--font-mono)}
@media(max-width:600px){.post .sql-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.post .sql-mat-layout{grid-template-columns:1fr 1fr;gap:12px}.post .sql-mat-out{grid-column:1/-1}.post .sql-mat-out #matOutputs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.post .sql-mat-output{margin:0}}