:root{color:#111;background:#f6f6f4;font-family:system-ui,sans-serif}body{margin:0}.app{gap:16px;max-width:560px;margin:0 auto;padding:24px 16px 48px;display:grid}h1{margin:0;font-size:1.5rem}.field{gap:6px;font-weight:600;display:grid}#url{font:inherit;border:1px solid #bbb;border-radius:8px;padding:10px 12px;font-weight:400}.hint{color:#555;overflow-wrap:anywhere;margin:-8px 0 0;font-size:.9rem}fieldset{border:0;flex-wrap:wrap;align-items:center;gap:12px;margin:0;padding:0;display:flex}legend{margin-bottom:6px;font-weight:600}.style-list{grid-template-columns:repeat(8,1fr);gap:6px;width:100%;display:grid}.style{aspect-ratio:1;cursor:pointer;background-position:50%;background-size:cover;border:2px solid #0000;border-radius:8px;padding:18%}.style img{object-fit:contain;width:100%;height:100%}.style[aria-pressed=true]{border-color:#111}#shuffle,#download{font:inherit;cursor:pointer;background:#fff;border:1px solid #111;border-radius:8px;padding:10px 16px}#download{color:#fff;background:#111}#download:disabled{opacity:.4;cursor:not-allowed}.preview{aspect-ratio:1;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50%/24px 24px;border-radius:12px;place-items:center;display:grid}.preview canvas{width:100%;height:auto}.status{min-height:1.5em;margin:0}.status[data-state=ok]{color:#17692e}.status[data-state=error]{color:#a4161a}.footer{color:#555;margin:0;font-size:.85rem}.footer a{color:inherit}@media (width<=480px){.style-list{grid-template-columns:repeat(4,1fr)}}