/* Shared look for the blog's interactive graphics (posts/<post>/embed/*.html). Blog palette, light/dark, transparent when
   embedded in a post (the post's paper shows through), padded paper page when opened on its own. */
:root{--bg:#F6F5F0;--panel:#FBFAF6;--ink:#1B2026;--muted:#5E646B;--rule:#DCD9CF;--grid:#E7E4DA;--accent:#1F5E8C;
  --c1:#1F5E8C;--c2:#C2541B;--c3:#2D7A4B;--c4:#6B4BA1;--c5:#A33A3A;--c6:#8A6D1E;--good:#2D7A4B;--bad:#A33A3A;--hi:#F2C46D;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121619;--panel:#191E22;--ink:#E8E6E0;--muted:#9AA0A6;--rule:#2C3338;--grid:#232A2F;--accent:#7FB6E0;
  --c1:#7FB6E0;--c2:#F08A4B;--c3:#6CC28E;--c4:#B49BE0;--c5:#E07B7B;--c6:#D9B95E;--good:#6CC28E;--bad:#E07B7B;--hi:#8A6A2A;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121619;--panel:#191E22;--ink:#E8E6E0;--muted:#9AA0A6;--rule:#2C3338;--grid:#232A2F;--accent:#7FB6E0;
  --c1:#7FB6E0;--c2:#F08A4B;--c3:#6CC28E;--c4:#B49BE0;--c5:#E07B7B;--c6:#D9B95E;--good:#6CC28E;--bad:#E07B7B;--hi:#8A6A2A;color-scheme:dark}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Archivo",system-ui,sans-serif;-webkit-text-size-adjust:100%}
.embedded body{background:transparent}
.ix{max-width:1100px;margin:0 auto;padding:20px 16px 28px}
.embedded .ix{padding:2px 0 6px;max-width:none}
.ix h2{font:600 1.15rem/1.25 "Archivo",system-ui,sans-serif;margin:0 0 .2rem;letter-spacing:-.005em}
.ix .sub{color:var(--muted);margin:0 0 .9rem;font-size:.93rem;max-width:46rem}
.mono,.num{font-family:"Roboto Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px 22px;margin:0 0 14px}
.ctl label{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--muted);margin-bottom:2px}
.ctl label b{color:var(--ink);font:500 .9rem "Roboto Mono",monospace;white-space:nowrap}
.ctl input[type=range]{width:100%;accent-color:var(--accent);margin:4px 0 0}
.ctl select,.ix button,.ix input[type=number]{font:inherit;font-size:.9rem;color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:6px;padding:5px 9px}
.ctl select{width:100%}
.ix button{cursor:pointer}
.ix button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ix :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.presets .lab{font:500 11.5px "Roboto Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:0 0 14px}
.stat{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:9px 12px}
.stat .k{font-size:.78rem;color:var(--muted);line-height:1.3}
.stat .v{font:600 1.35rem/1.2 "Roboto Mono",monospace;margin-top:2px}
.stat .v small{font-size:.75rem;font-weight:400;color:var(--muted)}
.stat.good .v{color:var(--good)}.stat.bad .v{color:var(--bad)}
.chartbox{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:6px 4px 2px;overflow-x:auto}
.chartbox svg{display:block;width:100%;height:auto;min-width:var(--minw,0px);font-family:"Roboto Mono",monospace}
.gl{stroke:var(--grid);stroke-width:1}
.ax{stroke:var(--muted);stroke-width:1}
.tk{fill:var(--muted);font-size:11.5px}
.at{fill:var(--ink);font:600 12.5px "Archivo",system-ui,sans-serif}
.lbl{font-size:12px;fill:var(--ink)}
.lbl.m{fill:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.84rem;color:var(--muted);margin:8px 2px 0}
.legend i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.note{color:var(--muted);font-size:.8rem;line-height:1.45;margin:10px 2px 0;max-width:60rem}
.note a{color:inherit}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:720px){.row2{grid-template-columns:1fr}}
table.ixt{border-collapse:collapse;width:100%;font-size:.88rem}
table.ixt th{font:600 11px "Roboto Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right;border-bottom:1px solid var(--ink);padding:5px 8px}
table.ixt td{text-align:right;border-bottom:1px solid var(--rule);padding:5px 8px;font-family:"Roboto Mono",monospace}
table.ixt th:first-child,table.ixt td:first-child{text-align:left}