.patterns{gap:var(--s-5);display:grid}.pattern-library{gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));display:grid}.pattern-library article,.custom-pattern{border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-4);gap:var(--s-3);display:grid}.pattern-example,.custom-grid{grid-template-columns:repeat(5,1fr);gap:2px;width:150px;display:grid}.pattern-example span{aspect-ratio:1;background:var(--paper);border:1px solid var(--line-strong)}.pattern-example .marked{background:var(--dauber)}.custom-grid{gap:4px;width:min(100%,320px)}.custom-grid button{aspect-ratio:1;border:1px solid var(--line-strong);background:var(--paper);min-height:32px;color:var(--ink);font:inherit;border-radius:4px}.custom-grid button[aria-pressed=true]{background:var(--dauber);color:var(--paper)}.grid-3 .pattern-example,.grid-3 .custom-grid{grid-template-columns:repeat(3,1fr)}.grid-4 .pattern-example,.grid-4 .custom-grid{grid-template-columns:repeat(4,1fr)}.grid-6 .pattern-example,.grid-6 .custom-grid{grid-template-columns:repeat(6,1fr)}.grid-7 .pattern-example,.grid-7 .custom-grid{grid-template-columns:repeat(7,1fr)}