/* Ink sketches sit on the page; controls borrow the workshop ruler. */
.service-mechanism{margin:19px 0 20px;color:var(--ink);width:100%;max-width:440px}
.mechanism-boundary{font:9px/1.5 var(--mono);color:var(--muted);letter-spacing:.015em}
.mechanism-drawing{display:block;width:100%;height:132px;overflow:visible;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mechanism-drawing path,.mechanism-drawing circle,.mechanism-drawing rect{vector-effect:non-scaling-stroke}
.mechanism-tire{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.mechanism-paper{fill:var(--paper)}
.mechanism-fine{stroke-width:.75;opacity:.65}
.mechanism-red{stroke:var(--red);stroke-width:1.35}
.mechanism-guide{stroke:var(--ink);stroke-width:.7;opacity:.3;stroke-dasharray:2 4}
.mechanism-spring{stroke:var(--red);stroke-width:1.55}
.mechanism-ghost{stroke-width:.8;opacity:.14;stroke-dasharray:2 4}
.mechanism-contact{stroke:var(--red);stroke-width:3;stroke-linecap:butt}
.mechanism-controls{display:grid;grid-template-columns:minmax(0,1fr) max-content;column-gap:17px;align-items:end}
.mechanism-adjust{min-width:0}
.mechanism-label{display:flex;align-items:baseline;min-height:14px;font:10px/1.4 var(--sans)}
.mechanism-label label{color:var(--ink);white-space:nowrap}
.mechanism-reading{font:9px/1.4 var(--mono);color:var(--muted);text-align:left}
.mechanism-adjust input{display:block;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:44px;margin:0;cursor:ew-resize;touch-action:pan-y;border:0;border-radius:0;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 8px) center/100% 8px no-repeat}
.mechanism-adjust input::-webkit-slider-runnable-track{height:1px;background:var(--rule)}
.mechanism-adjust input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:23px;margin-top:-11px;border:0;border-radius:0;background:var(--red);box-shadow:0 0 0 3px var(--paper)}
.mechanism-adjust input::-moz-range-track{height:1px;background:var(--rule);border:0}
.mechanism-adjust input::-moz-range-thumb{width:7px;height:23px;border:0;border-radius:0;background:var(--red);box-shadow:0 0 0 3px var(--paper)}
.mechanism-adjust input:focus-visible{outline:1px solid var(--red);outline-offset:2px}
.mechanism-play{display:grid;grid-template-columns:14px auto;align-items:center;justify-content:center;gap:6px;width:max-content;min-width:44px;min-height:44px;font:10px/1.2 var(--mono);white-space:nowrap;color:var(--red);border-bottom:1px solid var(--rule);background:none}
.mechanism-play svg{grid-area:1/1;width:14px;height:14px;stroke-width:1.2}
.mechanism-play span,.mechanism-play:after{grid-area:1/2}
.mechanism-play:after{content:attr(data-action);visibility:hidden}
.mechanism-play:hover,.mechanism-play:focus-visible{color:var(--ink);border-bottom-color:var(--red)}
.mechanism-play:active{background:rgba(216,46,24,.05)}
.service-mechanism.is-playing .mechanism-play{border-bottom-color:var(--red)}
@media(max-width:760px){.service-mechanism{margin-block:16px 18px}.mechanism-drawing{height:125px}.mechanism-controls{column-gap:12px}.mechanism-boundary{font-size:8px}.mechanism-reading{font-size:8px}}
@media(max-width:360px){.mechanism-controls{column-gap:8px}.mechanism-play{font-size:9px}}
@media(forced-colors:active){.mechanism-drawing{color:CanvasText}.mechanism-tire,.mechanism-paper{fill:Canvas;stroke:CanvasText}.mechanism-red,.mechanism-spring,.mechanism-contact{stroke:Highlight}.mechanism-play{color:ButtonText}.mechanism-guide,.mechanism-ghost{opacity:.6}.mechanism-adjust input{appearance:auto;-webkit-appearance:auto;background:none}.mechanism-adjust input::-webkit-slider-thumb{appearance:auto;-webkit-appearance:auto;box-shadow:none}.mechanism-adjust input::-moz-range-thumb{background:Highlight;box-shadow:none}}