.proportion-field{--handle-width: .75rem;display:grid;gap:var(--space-1)}.proportion-field .bar-stack{position:relative;height:3rem}.proportion-field .bar{appearance:none;-webkit-appearance:none;display:block;width:100%;height:3rem;margin:0;padding:0;border:1px solid var(--color-accent-border);border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--tint-vinegar) 0 var(--split, 50%),var(--tint-water) var(--split, 50%) 100%);cursor:ew-resize}.proportion-field .bar:focus-visible{outline:2px solid var(--color-accent-border);outline-offset:2px}.proportion-field .bar::-webkit-slider-runnable-track{height:3rem;background:transparent}.proportion-field .bar::-webkit-slider-thumb{-webkit-appearance:none;width:var(--handle-width);height:3rem;background:transparent;cursor:ew-resize}.proportion-field .bar::-moz-range-track{height:3rem;border:0;background:transparent}.proportion-field .bar::-moz-range-thumb{width:var(--handle-width);height:3rem;border:0;background:transparent;cursor:ew-resize}.proportion-field .handle{position:absolute;top:0;bottom:0;left:var(--split, 50%);width:var(--handle-width);transform:translate(-50%);border-radius:var(--radius-sm);background:var(--color-accent);box-shadow:var(--shadow-handle);pointer-events:none}.proportion-field .handle:after{content:"";position:absolute;inset:.9rem .22rem;border-left:1px solid var(--grip-highlight);border-right:1px solid var(--grip-highlight)}.proportion-field .bar:focus-visible+.handle{background:var(--color-accent-text)}.proportion-field .bar-labels{position:absolute;inset:1px;display:flex;align-items:center;pointer-events:none;font-size:var(--text-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em}.proportion-field .side{display:grid;place-items:center;min-width:0;overflow:hidden;white-space:nowrap}.proportion-field .side[data-collapsed=true]{visibility:hidden}.proportion-field .side.start{color:var(--ink-vinegar)}.proportion-field .side.end{color:var(--ink-water)}.proportion-field .spill{display:flex;min-height:1.2rem;font-size:var(--text-xs);color:var(--color-muted)}.proportion-field .spill span{flex:1 1 0}.proportion-field .spill .start{text-align:left}.proportion-field .spill .end{text-align:right}.proportion-field .spill b{font-weight:var(--font-weight-semibold)}.proportion-field .spill .start b{color:var(--ink-vinegar)}.proportion-field .spill .end b{color:var(--ink-water)}.proportion-field .readout{font-family:var(--font-display);font-size:var(--text-md)}.proportion-field .readout b{color:var(--color-accent-text)}.proportion-field .exact{margin-top:var(--space-1)}.proportion-field .exact summary{display:flex;align-items:center;gap:var(--space-1);margin:var(--space-1) 0;color:var(--color-muted);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);cursor:pointer;list-style:none}.proportion-field .exact summary::-webkit-details-marker{display:none}.proportion-field .exact summary:before{content:"▸";transition:transform .15s ease}.proportion-field .exact[open] summary:before{transform:rotate(90deg)}.proportion-field .exact summary:hover,.proportion-field .exact summary:focus-visible{color:var(--color-text)}.proportion-field .exact summary:focus-visible{outline:2px solid var(--color-accent-border);outline-offset:2px}.proportion-field .exact-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);max-width:22rem;margin-top:var(--space-2)}.proportion-field .exact-row .number-field{flex:1 1 6rem;min-width:0}.proportion-field .exact-row .colon{align-self:end;padding-bottom:.6rem;color:var(--color-muted)}@media(max-width:40rem){.proportion-field .exact-row{flex-direction:column;align-items:stretch}.proportion-field .exact-row .colon{display:none}}