.spacing-control { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin-top: 12px; color: var(--secondary); font-size: 14px; }
.spacing-control output { color: var(--primary); font-family: var(--zine-mono); font-size: 18px; }
.spacing-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
.spacing-panel { min-width: 0; }
.spacing-caption { color: var(--secondary); font-size: 14px; }
.spacing-axis { display: block; width: 100%; height: auto; margin: 4px auto; }
.spacing-baseline, .spacing-reference { fill: none; stroke: var(--secondary); stroke-width: 1; }
.spacing-dot { fill: var(--secondary); }
.spacing-selected { fill: var(--accent); }
.spacing-neighbor { fill: var(--theme); stroke: var(--accent); stroke-width: 2; }
.spacing-gap { fill: none; stroke: var(--accent); stroke-width: 2; }
.spacing-number { fill: var(--primary); font-family: var(--zine-mono); font-size: 18px; }
.spacing-annotation { fill: var(--secondary); font-family: var(--zine-mono); font-size: 18px; }
.spacing-annotation--gap { fill: var(--accent); }
.spacing-readout { color: var(--primary); font-family: var(--zine-mono); font-size: 14px; line-height: 1.7; }
.float-spacing :is(button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) { .spacing-panels { grid-template-columns: minmax(0, 1fr); gap: 20px; } .spacing-axis { max-width: 380px; } }