.alignment-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.alignment-fig { margin: 0; }
.alignment-fig svg { width: 100%; height: auto; }
/* Drawn at 1:1 so the pixel ticks are real pixels. */
.alignment-fig .alignment-ruler { width: 340px; height: 32px; max-width: none; }
.alignment-star { max-width: 16rem; }
.alignment-fig figcaption { font-size: var(--step--1); color: var(--fg-dim); margin-top: var(--space-2); }
.alignment-fig code { font-family: var(--font-mono); }
.alignment-reg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); max-width: 12rem; }
.alignment-sub { font-size: var(--step-1); margin-top: var(--space-5); }
.alignment-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); border: 1px solid var(--line); }
.alignment-patch { font-size: var(--step--1); color: var(--fg-dim); padding: var(--space-2); }
.alignment-patch code { display: block; font-family: var(--font-mono); color: var(--fg); }
.alignment-chip { display: block; height: 2.5rem; margin-bottom: var(--space-1); }
.alignment-rulerfig { margin-top: var(--space-5); max-width: 40rem; }
.alignment-cm { height: 1.25rem; width: 9cm; max-width: 100%; margin-top: var(--space-2);
  background: repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px 1mm) bottom / 100% 0.375rem no-repeat,
    repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px 1cm) bottom / 100% 100% no-repeat; }
.alignment-toggle { margin-top: var(--space-4); }
.alignment-crop { position: fixed; width: 1.5rem; height: 1.5rem; pointer-events: none; z-index: 50; border: 0 solid var(--fg-dim); }
.alignment-tl { top: var(--space-2); left: var(--space-2); border-top-width: 1px; border-left-width: 1px; }
.alignment-tr { top: var(--space-2); right: var(--space-2); border-top-width: 1px; border-right-width: 1px; }
.alignment-bl { bottom: var(--space-2); left: var(--space-2); border-bottom-width: 1px; border-left-width: 1px; }
.alignment-br { bottom: var(--space-2); right: var(--space-2); border-bottom-width: 1px; border-right-width: 1px; }
.alignment-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: repeating-linear-gradient(0deg, rgb(0 192 192 / 0.35) 0 1px, transparent 1px 8px), /* avoid-ai-design-ignore: C1 (baseline and column guides, not decoration) */
    repeating-linear-gradient(90deg, rgb(192 0 192 / 0.12) 0 calc(100% / 12 - 1rem), transparent 0 calc(100% / 12)); }
.alignment-overlay[hidden] { display: none; }