/* Shared look of every animated figure: paper-white panel, the page font, the paper's palette. */
:root {
  --paper: #ffffff;
  --ink: #1b1b1e;
  --ink-2: #4a4f5c;
  --muted: #8c8c8c;
  --grid: #e9e9e9;
  --rule: #d9dbe0;
  --leap: #2171b5;
  --local: #d62728;
  --regime-hi: #6a51a3;
  --regime-lo: #238b45;
  --basin-a: #114d68;
  --basin-b: #b26aa8;
  --data: #ea0700;
  --ref: #535353;
  --accent: #156082;
  --chip: #f2f4f7;
  --serif: "Google Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); overflow: hidden; }
.fig { position: relative; width: 100%; aspect-ratio: var(--aspect, 16 / 9); max-width: 100%; }
.fig canvas, .fig svg.layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig svg.layer { overflow: visible; }
svg text { font-family: var(--serif); fill: var(--ink); }
svg .lbl { font-size: 15.5px; fill: var(--ink-2); }
svg .ttl { font-size: 18px; font-weight: 500; fill: var(--ink); }
svg .sub { font-size: 15.5px; fill: var(--ink-2); }
svg .tick { font-size: 13.5px; fill: #555b66; }
svg .axis { stroke: #5a5f69; stroke-width: 1; fill: none; }
svg .gridline { stroke: var(--grid); stroke-width: 1; fill: none; }
svg .halo { paint-order: stroke; stroke: #ffffff; stroke-width: 3.5px; stroke-linejoin: round; }
svg .cap { font-size: 16.5px; fill: var(--ink-2); }
svg .cap-em { font-weight: 500; fill: var(--ink); font-size: 18px; }
.controls { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 5; }
.controls button {
  font-family: var(--serif); font-size: 14px; color: var(--ink-2); background: #fff;
  border: 1px solid #cfd4dc; border-radius: 6px; padding: 4px 10px; cursor: pointer; line-height: 1.2;
}
.controls button:hover { background: #f4f6f9; }
.controls button:focus-visible, .seg button:focus-visible { outline: 2px solid var(--leap); outline-offset: 2px; }
.controls .icon { width: 30px; height: 28px; padding: 0; display: grid; place-items: center; }
.controls .icon svg { width: 14px; height: 14px; fill: currentColor; }
/* segmented control for stages and panels: a gray track, the current one filled in LEAP blue */
.seg { position: absolute; left: 1.6%; top: 2.2%; z-index: 5; display: flex; gap: 2px; padding: 3px;
  background: #f3f4f6; border: 1px solid #d4d7dc; border-radius: 999px; }
.seg button { font-family: var(--serif); font-size: clamp(10px, 1.45vw, 15px); color: #4a4a4a; background: transparent;
  border: 0; border-radius: 999px; padding: .38em 1.05em; cursor: pointer; line-height: 1.2; white-space: nowrap;
  transition: background-color .25s, color .25s; }
.seg button:hover { color: #1b1b1e; }
.seg button[aria-current="step"], .seg button[aria-selected="true"] { color: #fff; background: var(--leap); }
@media (prefers-reduced-motion: reduce) { .controls .icon { outline: 1px dashed var(--muted); } }
/* narrow frames: keep the drawing, show only the current stage, let the page caption carry the text */
@media (max-width: 600px) {
  svg .cap { display: none; }
  .seg button:not([aria-current="step"]):not([aria-selected="true"]) { display: none; }
  .controls { right: 4px; bottom: 4px; transform: scale(.8); transform-origin: bottom right; }
}