.point-ruler { max-width: 680px; margin-block: 16px; }
.ruler-axis, .ruler-tick { stroke: #596560; stroke-width: 3; }
.ruler-marker { fill: #24574c; stroke: #fff; stroke-width: 3; }
.point-ruler text { fill: #26332e; font: 26px system-ui, sans-serif; }
.point-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; list-style: none; }
.point-labels li { text-align: center; font-size: 13px; }
.point-labels span { display: block; }
.point-measurement { margin-block: 24px; padding-block-end: 20px; border-bottom: 1px solid #a6b0a9; }
.point-slider-wrap input { width: 100%; min-height: 48px; accent-color: #24574c; }
.point-slider-wrap output { display: block; }
.point-optional summary { min-height: 48px; padding-block: 12px; cursor: pointer; }