.canvas-pair{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}.canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:0}.canvas-wrapper canvas{border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-ground)}.canvas-wrapper figcaption{font-size:.875rem;color:var(--text-color-surface)}.image-controls{display:flex;flex-flow:row nowrap;justify-content:center;gap:.5rem;margin-top:1rem}.image-controls .is-start{display:block}.image-controls .is-pause{display:none}.image-controls.is-running .is-start{display:none}.image-controls.is-running .is-pause{display:block}#fitness-bar{width:100%;height:.5rem;margin-top:.5rem;appearance:none;border:none;border-radius:.25rem;background:var(--draw-color-surface)}#fitness-bar::-webkit-progress-bar{background:var(--draw-color-surface);border-radius:.25rem}#fitness-bar::-webkit-progress-value{background:var(--draw-color-primary);border-radius:.25rem;transition:width 100ms}#fitness-bar::-moz-progress-bar{background:var(--draw-color-primary);border-radius:.25rem}