/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
/*!r:1787213097730*/
.ratio__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:62ch;margin-block-end:var(--space-l)}.ratio__controls{display:flex;flex-wrap:wrap;gap:var(--space-l);align-items:center;margin-block-end:var(--space-m)}.ratio__control{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:var(--step--1);font-weight:600}.ratio__control input[type=range]{inline-size:12rem;max-inline-size:100%}.ratio__accent-note{font-size:var(--step--1);font-weight:600;color:var(--accent-strong)}.ratio__sample{display:flex;overflow:hidden;min-block-size:7rem;border:1px solid var(--line);border-radius:var(--radius-m)}.ratio__seg{display:flex;align-items:center;justify-content:center;font-size:var(--step--1);font-weight:700;text-align:center;padding:var(--space-2xs);overflow:hidden;white-space:nowrap;transition:flex-basis .15s}.ratio__seg--dom{background:var(--surface-2);color:var(--ink)}.ratio__seg--sec{background:color-mix(in srgb,var(--accent) 32%,var(--surface));color:var(--ink)}.ratio__seg--acc{background:var(--accent);color:var(--on-accent)}.ratio__readout{font-size:var(--step-0);color:var(--ink);min-block-size:1.6em;margin-block-start:var(--space-m);padding:var(--space-s);background:var(--accent-soft);border-radius:var(--radius-s);max-inline-size:64ch}.ratio__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.ratio__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.ratio__alt[open] summary{margin-block-end:var(--space-s)}@media (prefers-reduced-motion:reduce){.ratio__seg{transition:none}}