.favicon-generator{max-width:720px}.favicon-generator__title{font-family:var(--font-serif);letter-spacing:-.03em;margin-bottom:var(--space-lg);margin-top:var(--space-xl);font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:400}.favicon-grid{margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;display:grid}.favicon-card{padding:var(--space-md);text-align:center;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:.75rem;display:flex}.favicon-card__preview{background:repeating-conic-gradient(#ffffff0f 0% 25%,#0000 0% 50%) 0 0/16px 16px;border-radius:8px;justify-content:center;align-items:center;width:96px;height:96px;display:flex;overflow:hidden}.favicon-card__preview canvas{image-rendering:auto}.favicon-card__info{flex-direction:column;gap:.125rem;display:flex}.favicon-card__size{color:var(--color-text);font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9375rem;font-weight:500}.favicon-card__desc{font-family:var(--font-alfabet);text-transform:uppercase;letter-spacing:.02em;color:var(--color-text-muted);font-size:.625rem;font-weight:900}.favicon-card__download{color:#000;height:32px;font-family:var(--font-alfabet);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);background-color:#fff;border:none;border-radius:2rem;justify-content:center;align-items:center;padding:0 1.25rem;font-size:.625rem;font-weight:900;display:inline-flex}.favicon-card__download:hover{color:#fff;background-color:#000;transform:scale(1.05)}.favicon-generator__snippet{margin-top:var(--space-md)}@media (width<=480px){.favicon-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=360px){.favicon-grid{grid-template-columns:1fr}}