/* willytai.com article explainers. Tokens from Willy Tai Design System v2.0 (tokens.css):
   light = Ink & Oxblood, dark = Warm Graphite + Brass. Scenes colour with var(--ex-*).
   Dark --ex-c2 is the lifted plum, so no category shares the brass accent. */
figure.explainer{
  --ex-bg:#F2ECE3; --ex-card:#FAF8F5; --ex-ink:#1A1A1A; --ex-text:#33302B; --ex-muted:#6E6760; --ex-line:#CFC5B2;
  --ex-accent:#6E2532; --ex-on-accent:#FAF8F5; --ex-fill:#6E2532;
  --ex-ok:#3F7D4E; --ex-warn:#96691A; --ex-bad:#B4442E;
  --ex-c1:#4A5A66; --ex-c2:#B99A5B; --ex-c3:#33544A; --ex-on-c2:#1A1A1A;
  --ex-sans:'Archivo',system-ui,sans-serif; --ex-serif:'Source Serif 4',Georgia,serif; --ex-mono:'IBM Plex Mono',ui-monospace,monospace;
  margin:34px 0 30px;
}
[data-theme="dark"] figure.explainer{
  --ex-bg:#2C2925; --ex-card:#22201D; --ex-ink:#EFE9DF; --ex-text:#E3DDD2; --ex-muted:#9E958A; --ex-line:#4A463F;
  --ex-accent:#C9A868; --ex-on-accent:#22201D; --ex-fill:#6E2532;
  --ex-ok:#6FBF83; --ex-warn:#E0A94A; --ex-bad:#E16E58;
  --ex-c1:#7C93A0; --ex-c2:#B08AA6; --ex-c3:#7BB59E; --ex-on-c2:#22201D;
}
figure.explainer .ex-static{display:block;width:100%;height:auto;border:1px solid var(--ex-ink)}
figure.explainer.ex-live .ex-static{display:none}
figure.explainer .ex-stage{background:var(--ex-bg);border:1px solid var(--ex-ink);color:var(--ex-text)}
figure.explainer .ex-stage:focus-visible{outline:2px solid var(--ex-accent);outline-offset:3px}
figure.explainer .ex-stage svg.ex-svg{display:block;width:100%;height:auto;background:var(--ex-bg);border:0}
.ex-svg text{font-family:var(--ex-sans);fill:var(--ex-text)}
.ex-svg .ex-mono{font-family:var(--ex-mono)}
.ex-svg .ex-serif{font-family:var(--ex-serif)}
figure.explainer .ex-cap{display:grid;padding:14px 18px 0;border-top:1px solid var(--ex-line)}
figure.explainer .ex-cap p{grid-area:1/1;margin:0;visibility:hidden;font-family:var(--ex-serif);font-size:16.5px;line-height:1.55;color:var(--ex-text);max-width:none}
figure.explainer .ex-cap p.on{visibility:visible}
figure.explainer .ex-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 18px 16px}
figure.explainer .ex-btn{min-height:44px;min-width:44px;padding:0 14px;background:transparent;border:1px solid var(--ex-ink);border-radius:0;color:var(--ex-ink);font:600 12.5px/1 var(--ex-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
figure.explainer .ex-btn:hover{border-color:var(--ex-accent);color:var(--ex-accent)}
figure.explainer .ex-btn:focus-visible{outline:2px solid var(--ex-accent);outline-offset:2px}
figure.explainer .ex-btn:disabled{opacity:.35;cursor:default;border-color:var(--ex-ink);color:var(--ex-ink)}
figure.explainer .ex-play{background:var(--ex-accent);border-color:var(--ex-accent);color:var(--ex-on-accent);padding:0 16px}
figure.explainer .ex-play:hover{color:var(--ex-on-accent);opacity:.88}
figure.explainer .ex-ticks{display:flex;gap:4px;margin-left:auto}
figure.explainer .ex-ticks i{display:block;width:18px;height:4px;background:var(--ex-line)}
figure.explainer .ex-ticks i.done{background:var(--ex-ink)}
figure.explainer .ex-ticks i.on{background:var(--ex-accent)}
figure.explainer .ex-count{font:12.5px/1 var(--ex-mono);color:var(--ex-muted);font-variant-numeric:tabular-nums;min-width:3.4em;text-align:right}
@media(max-width:639px){
  body figure.explainer{width:100vw;margin-left:calc(50% - 50vw);margin-right:0} /* outranks an article's own .art figure margins */
  figure.explainer .ex-stage,figure.explainer .ex-static{border-left:0;border-right:0}
  figure.explainer .ex-cap{padding:12px 20px 0}
  figure.explainer .ex-cap p{font-size:16px;line-height:1.5}
  figure.explainer .ex-bar{padding:10px 20px 14px;gap:6px}
  figure.explainer .ex-t{display:none}
  figure.explainer figcaption{padding-left:20px;padding-right:20px}
}
@media(max-width:399px){figure.explainer .ex-ticks{display:none}figure.explainer .ex-count{margin-left:auto}}
@media print{
  figure.explainer .ex-stage{display:none!important}
  figure.explainer .ex-static{display:block!important;break-inside:avoid}
  figure.explainer{width:auto;margin:18px 0}
}