:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,sans-serif;line-height:1.45}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{margin:0;max-width:1280px;margin-inline:auto;padding:20px 24px 48px}header.page{gap:6px;margin-bottom:16px;display:grid}header.page h1{margin:0;font-size:1.6rem}header.page p{max-width:80ch;margin:0}nav.pages{flex-wrap:wrap;gap:4px 16px;font-size:.95rem;display:flex}nav.pages a[aria-current]{font-weight:600;text-decoration:none}details.patterns{max-width:80ch;font-size:.875rem}details.patterns ul{columns:3 14ch;margin:6px 0;padding-left:18px}.hint{color:graytext;margin:0;font-size:.875rem}.controls{flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:8px;display:flex}.cards{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;display:grid}.card{border:1px solid color-mix(in srgb, CanvasText 18%, transparent);color:inherit;border-radius:10px;align-content:start;gap:8px;padding:16px;text-decoration:none;display:grid}.card:focus-visible{outline:2px solid accentcolor}@media (hover:hover){.card:hover{border-color:accentcolor}}.card h2{margin:0;font-size:1.15rem}.card p{margin:0}.detail[hidden]{display:none}@media (width<=480px){body{padding:12px 12px 32px}details.patterns ul{columns:2}}