:root, .entry-body .fig {
      --fig-drive: oklch(51.4% 0.082 233.3);
      --fig-drive-fill: oklch(51.4% 0.082 233.3 / 0.13);
      --fig-brake: oklch(61% 0.14 57.5);
      --fig-brake-fill: oklch(61% 0.14 57.5 / 0.26);
      --fig-felt: oklch(23.6% 0.018 70.5);
      --fig-grid: oklch(84.2% 0.038 80.6);
      --fig-live: oklch(53.1% 0.157 5.4);
      --ink: oklch(23.6% 0.018 70.5); --ink-soft: oklch(38.6% 0.023 69.7); --ink-mute: oklch(52.7% 0.035 76.7); --ink-faint: oklch(69.8% 0.036 81.9);
      --accent: oklch(53.1% 0.157 5.4); --accent-2: oklch(64.8% 0.153 42.6); --accent-ink: oklch(100% 0 0);
      --accent-wash: oklch(53.1% 0.157 5.4 / 0.10);
      --card: oklch(99.4% 0.008 91.5); --paper: oklch(98.5% 0.01 87.5); --paper-sunk: oklch(94.7% 0.023 87.2);
      --rule: oklch(88.6% 0.033 83.7); --rule-soft: oklch(92.9% 0.025 86.9);
      --f-display: 'Fraunces', 'EB Garamond', Georgia, serif;
      --f-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --f-num: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
    }
    .entry-body .fig {
      background: oklch(98.7% 0.008 98.9); border: 1px solid oklch(86.1% 0.04 86.1); border-left: 5px solid var(--pink, oklch(36.7% 0.111 21.1));
      border-radius: 7px; padding: 28px 34px 24px; margin: 2.4rem 0;
      max-width: none;
    }
    .entry-body .fig .eyebrow {
      font-family: system-ui, sans-serif; font-size: 11.5px; letter-spacing: .17em;
      text-transform: uppercase; color: oklch(52.6% 0.02 78.2); font-weight: 600;
    }
    .entry-body .fig .eyebrow::after {
      content: ""; display: block; height: 1px; background: oklch(86.1% 0.04 86.1); margin: 12px 0 0;
    }
    .entry-body .fig .ftitle {
      font-family: "Iowan Old Style", Charter, Georgia, serif; font-size: 29px; font-weight: 400;
      color: oklch(22.3% 0.01 53); line-height: 1.18; margin: 16px 0 10px;
    }
    .entry-body .fig .fdek {
      font-size: 17px; line-height: 1.44; color: oklch(32.4% 0.016 59.1); margin: 0 0 6px; max-width: 62ch;
    }
    .entry-body .fig .fdek b { color: oklch(22.3% 0.01 53); font-weight: 600; }
    .entry-body .fig svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
    .entry-body .fig figcaption {
      font-size: 15.5px; line-height: 1.5; color: oklch(32.4% 0.016 59.1); margin-top: 14px; max-width: 64ch;
      font-style: normal; border: none; padding: 0; text-align: left;
    }
    .entry-body .fig figcaption b { color: oklch(22.3% 0.01 53); }
    .entry-body .figure.app { max-width: 332px; margin: 2rem auto; }
    .entry-body .figure.app img { width: 100%; height: auto; border: 1px solid oklch(86.1% 0.04 86.1); border-radius: 10px; filter: none; }
    .entry-body .figure.card { max-width: 372px; margin: 2rem auto; }
    .entry-body .figure.card img { width: 100%; height: auto; filter: none; }
    @media (max-width: 700px) {
      .entry-body .fig { margin: 2rem 0; padding: 20px 18px 16px; }
      .entry-body .fig .ftitle { font-size: 23px; }
    }
      /* --- accessibility --- */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
      /* --- interactive cognosis figures --- */
    .entry-body .fig--interactive { min-height: 340px; }
    .fig-controls {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem;
      margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft);
    }
    .ctl { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 12rem; min-width: 10rem; }
    .ctl-label {
      font-family: var(--f-ui); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--ink-mute);
      display: flex; justify-content: space-between; gap: 0.6rem;
    }
    .ctl-val { font-family: var(--f-num); color: var(--ink); font-variant-numeric: tabular-nums; }
    input[type="range"] {
      -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem;
      background: transparent; cursor: pointer; margin: 0;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      height: 5px; border-radius: 3px;
      background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--rule) var(--fill, 0%));
    }
    input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--rule); }
    input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent); }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none; margin-top: -8px;
      width: 21px; height: 21px; border-radius: 50%;
      background: var(--accent); border: 3px solid var(--card);
      box-shadow: 0 1px 4px oklch(0% 0 0 / 0.25);
    }
    input[type="range"]::-moz-range-thumb {
      width: 21px; height: 21px; border-radius: 50%;
      background: var(--accent); border: 3px solid var(--card); box-shadow: 0 1px 4px oklch(0% 0 0 / 0.25);
    }
    .seg { display: inline-flex; flex-wrap: wrap; background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 1.4rem; padding: 2px; gap: 2px; max-width: 100%; }
    .seg button {
      font-family: var(--f-ui); font-size: 0.85rem; color: var(--ink-mute);
      background: transparent; border: 0; border-radius: 1.4rem; padding: 0.42rem 0.9rem; cursor: pointer;
      min-height: 2.2rem; flex: 1 1 auto; transition: background 0.15s ease, color 0.15s ease;
    }
    .seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
    .btn {
      font-family: var(--f-ui); font-size: 0.9rem; color: var(--ink);
      background: var(--card); border: 1px solid var(--rule); border-radius: 0.6rem;
      padding: 0.55rem 0.95rem; cursor: pointer; min-height: 2.6rem;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .btn:hover { border-color: var(--accent); background: var(--accent-wash); }
    .readout {
      font-family: var(--f-ui); font-size: 0.9rem; color: var(--ink-soft);
      margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem;
      background: var(--accent-wash); border: 1px solid var(--rule-soft);
    }
    .readout strong { color: var(--accent); font-weight: 600; }
    .fig-units { display: none; }
    .fig-note {
      font-family: var(--f-ui); font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft);
      margin-top: 0.85rem; padding: 0.65rem 0.85rem; border-radius: 0 0.5rem 0.5rem 0;
      border-left: 3px solid var(--fig-brake); background: var(--fig-brake-fill);
    }
    .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.9rem; }
    .legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--f-ui); font-size: 0.8rem; color: var(--ink-mute); }
    .legend-swatch { width: 1.4rem; height: 0; border-top-width: 3px; border-top-style: solid; }
    .legend-swatch--drive { border-top-color: var(--fig-drive); }
    .legend-swatch--brake { border-top-color: var(--fig-brake); border-top-style: dashed; }
    .legend-swatch--felt  { border-top-color: var(--fig-felt); }
    @media (max-width: 700px) {
      .fig-controls { gap: 1rem; }
      .ctl { flex-basis: 100%; }
    }



.entry-body .fig a { color: var(--fig-drive); }