.cal-fig { margin: 1.6em 0; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-fig .cal-svg { width: 100%; min-width: 560px; display: block; }
.prose .cal-fig { margin: 1.6em 0; }

.cal-svg .body { fill: #f3f1ec; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cal-svg .slider { fill: #e2ded6; stroke: var(--ink); stroke-width: 2; }
.cal-svg .screen { fill: #d9e4d2; stroke: var(--ink); stroke-width: 1.2; }
.cal-svg .lcd { font-family: var(--mono); font-size: 20px; font-weight: 600; fill: #1f2a1a; }
.cal-svg .btn { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.cal-svg .wheel { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.cal-svg .lock { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.cal-svg .rod { fill: #f3f1ec; stroke: var(--ink); stroke-width: 1.6; }
.cal-svg .tick { stroke: var(--ink); stroke-width: 1; }
.cal-svg .part { fill: #c9ddf0; stroke: #2f5f8f; stroke-width: 2; stroke-linejoin: round; }
.cal-svg .hatch { stroke: #2f5f8f; stroke-width: 0.8; }
.cal-svg .dim { stroke: var(--accent); stroke-width: 1.4; }
.cal-svg .arr { marker-start: url(#cal-arrow); marker-end: url(#cal-arrow); }
.cal-svg .ldr { stroke: var(--ink); stroke-width: 1; }
.cal-svg text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink); }
.cal-svg text.sm { font-size: 13px; }
.cal-svg text.acc { fill: var(--accent-ink); }
.cal-svg .bad { stroke: #b8441c; stroke-width: 2.5; fill: none; }