.page.patterns-page,.page.pattern-detail-page{max-width:960px}.patterns-intro{max-width:40rem}.page ul.pattern-grid{color:inherit;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),320px));gap:24px;margin:8px 0 0;padding:0;list-style:none;display:grid}.page ul.pattern-grid>li{margin-bottom:0}.pattern-card{border:1px solid var(--line);background:#fff;min-width:0}.pattern-card-link{height:100%;color:inherit;flex-direction:column;padding:16px;text-decoration:none;display:flex}.pattern-card-preview{aspect-ratio:1;background:var(--panel);border:1px solid var(--line);justify-content:center;align-items:center;margin-bottom:14px;display:flex;overflow:hidden}.pattern-card-preview svg{width:100%;height:100%;display:block}.pattern-card h2{color:var(--ink);margin:0 0 6px;font-family:Georgia,Times New Roman,serif;font-size:1.15rem;font-weight:700}.pattern-card-size{color:var(--muted);margin:0 0 12px;font-size:.95rem}.pattern-card-attribution,.pattern-attribution{color:var(--muted);margin:0 0 8px;font-size:.95rem}.pattern-like-button{border:1px solid var(--ink);min-height:44px;color:var(--ink);font:inherit;cursor:pointer;background:#fff;justify-content:center;align-items:center;margin:0;padding:10px 16px;font-size:.95rem;display:inline-flex}.pattern-like-button:hover:not(:disabled){background:var(--panel)}.pattern-like-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.pattern-like-button:disabled{opacity:.7;cursor:wait}.pattern-like-button[aria-pressed=true]{background:var(--ink);color:#fff}.pattern-card-cta{color:var(--ink);margin-top:auto;font-size:.95rem;font-weight:600}.pattern-back{margin-bottom:8px}.pattern-back a{color:var(--muted);font-size:.95rem;text-decoration:none}.pattern-back a:hover{color:var(--ink)}.pattern-meta{color:var(--muted);margin-bottom:16px}.pattern-detail-preview{border:1px solid var(--line);background:#fff;max-width:min(100%,28rem);margin:8px 0 24px;padding:12px}.pattern-detail-preview svg{width:100%;height:auto;display:block}.pattern-actions{flex-wrap:wrap;align-items:stretch;gap:12px;display:flex}.pattern-actions .page-action{margin:0}@media (max-width:390px){.pattern-actions .page-action,.pattern-actions .pattern-like-button{text-align:center;flex:100%}}