.distance-sum-explorer{--role-right:var(--diagram-third);--role-left:var(--emphasis);--step-caption-min-height:0}.distance-sum-explorer *,.distance-sum-explorer :before,.distance-sum-explorer :after{box-sizing:border-box}.distance-sum-modes,.distance-sum-presets{flex-wrap:wrap;gap:.6rem;display:flex}.distance-sum-modes{margin-bottom:1rem}.distance-sum-explorer button{white-space:normal;min-height:48px}.distance-sum-explorer button[aria-pressed=true]{outline-offset:2px;outline:2px solid}.distance-sum-position{text-align:center;margin:.6rem 0;font-size:1.1rem}.distance-sum-readings{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}.distance-sum-reading{border-radius:var(--radius-small);border:1px solid;gap:.3rem;padding:.6rem;display:grid}.distance-sum-reading span{font-size:.85rem}.distance-sum-reading strong{font-variant-numeric:tabular-nums;font-size:1.05rem}.distance-sum-color-0{color:var(--role-right)}.distance-sum-color-1{color:var(--role-left)}.distance-sum-view svg{width:100%;max-width:660px;height:auto;margin:1rem auto 0;display:block;overflow:visible}.distance-sum-draggable{touch-action:pan-y;cursor:ew-resize}.distance-sum-view svg text{text-anchor:middle;font-family:var(--font-body)}.distance-sum-whole{stroke:var(--highlight);stroke-width:13px}.distance-sum-guide{stroke:var(--muted);stroke-width:1px;stroke-dasharray:4 4}.distance-sum-bracket{stroke:currentColor;stroke-width:2.5px;fill:none}.distance-sum-length{fill:currentColor;font-size:26px;font-weight:700}.distance-sum-axis{stroke:var(--ink);stroke-width:1.5px;fill:none}.distance-sum-tick{fill:var(--muted);font-size:20px}.distance-sum-endpoint{fill:var(--ink);font-size:23px;font-weight:700}.distance-sum-fixed{fill:currentColor}.distance-sum-point{fill:var(--ink);stroke:var(--surface);stroke-width:2.5px}.distance-sum-point-label{fill:var(--ink);font-size:26px;font-weight:700}.distance-sum-total{text-align:center;font-variant-numeric:tabular-nums;margin:.6rem 0;font-size:1.05rem}.distance-sum-total strong{color:var(--emphasis);display:inline-block}.distance-sum-reason{border-radius:var(--radius-small);background:var(--surface-soft);min-height:3.8em;margin:.5rem 0;padding:.6rem .8rem}.distance-sum-inputs{margin:.8rem 0}.distance-sum-inputs input{touch-action:pan-y;width:100%;min-height:48px;margin:.3rem 0;display:block}.distance-sum-presets .button{flex:76px;padding:.5rem}.distance-sum-note{color:var(--muted);font-size:.85rem;line-height:1.7}@media (width<=480px){.distance-sum-explorer .stage-body{padding:.75rem}.distance-sum-explorer .stage-heading{padding:.9rem}.distance-sum-modes .button{flex:100px;padding:.5rem;font-size:.85rem}.distance-sum-reading{padding:.45rem}.distance-sum-reading strong{font-size:.95rem}.distance-sum-reason{min-height:5.2em}}