/* Shared color knobs for the vector replicas. Independent of the site palette. */
.engine-crop {
  --engine-accent: #fff;
  --engine-ink: #f3f3f3;
  --engine-muted: #aaa;
  background: transparent;
  aspect-ratio: 574 / 150;
}
.engine-panel { display: block; width: 100%; height: auto; overflow: visible; color: var(--engine-ink); font-family: Mono, monospace; font-weight: 400; letter-spacing: 0; }
.engine-panel text { fill: currentColor; stroke: none; }
.engine-panel path, .engine-panel circle, .engine-panel rect { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.engine-panel .engine-frame { stroke: var(--engine-accent); stroke-opacity: .65; stroke-width: 1; }
.engine-panel .engine-dial-track { stroke: var(--engine-muted); stroke-opacity: .42; stroke-width: 2; }
.engine-panel .engine-dial-arc { stroke: var(--engine-accent); stroke-width: 2.5; }
.engine-panel .engine-dial-pointer { stroke: var(--engine-accent); stroke-width: 2.6; }
.engine-panel .engine-muted { fill: var(--engine-muted); }
.engine-panel .engine-marker, .engine-panel .engine-selected { fill: var(--engine-accent); stroke: none; }
.engine-panel .engine-solid { fill: currentColor; stroke: none; }
.engine-panel .engine-inverse { fill: #080808; }
#engine-dialog .engine-crop { overflow: visible; }