/* Native demonstrations, opt-in for batch 6 references. */
.spacing-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 20px; }
.spacing-controls[hidden], .spacing-lab [hidden] { display: none; }
.spacing-controls label { font-size: 15px; font-weight: 600; }
.spacing-controls input[type="range"] { width: 220px; max-width: 100%; min-height: 44px; accent-color: var(--blue); }
.spacing-controls select { min-height: 48px; padding: 8px 12px; max-width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.spacing-checkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.spacing-checkbox input { width: 20px; height: 20px; accent-color: var(--blue); }
.spacing-controls :is(input,select):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wrap-sample { font: 400 28px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; width: 9ch; max-width: 100%; margin-block: 12px; background: var(--blue-soft); white-space: normal; word-break: normal; overflow-wrap: normal; }
.spacing-lab .reference-demo { overflow: visible; }
.spacing-lab output { font-size: 14px; line-height: 22px; color: var(--muted); }
.spacing-lab .wrap-result, .spacing-lab .metric-result { display: block; margin-top: 8px; }
.spacing-lab .wrap-result[hidden], .spacing-lab .metric-result[hidden] { display: none; }
.metric-sample { display: block; width: fit-content; margin-block: 12px; font: 400 38px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space: pre; }
.font-comparison { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.metric-n { font: 400 38px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media(max-width:640px) {
 .spacing-controls { flex-direction: column; align-items: flex-start; }
 .spacing-controls input[type="range"] { width: 100%; }
 .spacing-lab .reference-demo { display: block; }
 .wrap-sample { font-size: 26px; }
 .metric-sample { font-size: 32px; }
}
/* Keep the full character identity visible in the narrow breadcrumb. */
.reference-page .breadcrumb { overflow: visible; }
.reference-page .breadcrumb ol { width: 100%; flex-wrap: wrap; row-gap: 8px; }
.reference-page .breadcrumb [aria-current="page"] { max-width: 100%; white-space: normal; overflow: visible; }
.reference-page .symptom-list { margin: 0; max-width: 75ch; }
.reference-page .symptom-list > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.reference-page .symptom-list dt { font-weight: 650; margin-bottom: 6px; }
.reference-page .symptom-list dd { margin: 0; color: var(--muted); line-height: 1.6; }