.pattern-note{max-width:72ch;line-height:1.65}
.pattern-options{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;width:100%;min-width:0;margin-top:.75rem}
.pattern-options:empty{display:none}
.pattern-field{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0;font-size:.85rem}
.pattern-field-label{font-weight:600}
.pattern-select{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:.55rem;min-height:2.5rem;padding:.4rem 1.7rem .4rem .6rem;max-width:100%}
.pattern-select option{color:#151515;background:#fff}
.pattern-navigation{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.pattern-current{font-size:.85rem;margin:0;line-height:1.5}
.pattern-color-input{width:3rem;height:2.5rem;border:1px solid currentColor;border-radius:.5rem;background:transparent;padding:.2rem;cursor:pointer}
.pattern-presets{display:flex;flex-wrap:wrap;gap:.4rem}
.pattern-presets .quiet-button{display:inline-flex;align-items:center;gap:.4rem}
.pattern-presets [aria-pressed=true]{outline:2px solid currentColor;outline-offset:1px}
.pattern-swatch{height:.8rem;width:.8rem;border:1px solid #777;border-radius:50%;flex-shrink:0}
.pattern-range{width:min(10rem,40vw);accent-color:currentColor;min-height:2.5rem}
.pattern-range-value{min-width:2.7rem;font-variant-numeric:tabular-nums}
.pattern-intensity{display:grid;grid-template-columns:1fr auto;width:min(100%,22rem);gap:0 .5rem}
.pattern-intensity .pattern-range{width:100%;grid-column:1/-1;grid-row:2}
.pattern-intensity .pattern-range-value{grid-column:2;grid-row:1;text-align:right}
.pattern-remaining{font-size:.85rem;font-variant-numeric:tabular-nums}
.pattern-options button,.pattern-options select,.pattern-color-input{touch-action:manipulation}
.pattern-options :focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(max-width:480px){.pattern-options{gap:.6rem}.pattern-navigation{width:100%}.pattern-navigation .pattern-field{flex:1}.pattern-navigation .pattern-select{width:100%}.pattern-navigation .pattern-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pattern-presets .quiet-button{padding:.45rem .6rem}.pattern-current{width:100%}}
/* Match selects to adjacent pill buttons instead of relying on native menu sizing. */
.pattern-navigation > button{height:auto;min-height:44px}
@media(max-width:420px){.tool-stage .pattern-select{font-size:.8125rem;padding-left:11px}}