.favicon-generator{margin:1.5rem 0 4rem}.favicon-workspace{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:1.5rem;display:grid}.favicon-panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;min-width:0;padding:clamp(1rem,2.5vw,1.75rem)}.panel-heading{align-items:center;gap:.7rem;margin:0 0 1rem;font-size:1.15rem;display:flex}.panel-heading>span{background:var(--soft);width:30px;height:30px;color:var(--green);border-radius:50%;place-items:center;font-size:.85rem;display:grid}.favicon-dropzone{text-align:center;background:#fbfdfc;border:2px dashed #b9cbc5;border-radius:16px;align-content:center;place-items:center;gap:.55rem;min-height:220px;padding:1.5rem;display:grid}.favicon-dropzone.dragging{border-color:var(--green);background:var(--soft)}.favicon-dropzone p{margin:0}.favicon-upload{color:var(--green);font-size:2rem}.favicon-selected{border:1px solid var(--line);border-radius:14px;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.8rem;display:grid}.favicon-selected div:nth-child(2){min-width:0;display:grid}.favicon-selected strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.favicon-selected span{color:var(--muted);font-size:.82rem}.source-thumb{border:1px solid var(--line);border-radius:10px;place-items:center;width:56px;height:56px;display:grid;overflow:hidden}.source-thumb img{object-fit:contain;max-width:100%;max-height:100%}.limits{color:var(--muted);margin:.8rem 0 1.6rem;font-size:.82rem}.low-resolution-note{color:#674b10;background:#fff8df;border:1px solid #ead9a3;border-radius:10px;margin:-.8rem 0 1.4rem;padding:.7rem;font-size:.84rem}.favicon-fields{border:0;grid-template-columns:1fr 1fr;gap:.9rem;padding:0;display:grid}.favicon-fields>label{gap:.3rem;font-size:.88rem;font-weight:650;display:grid}.favicon-fields input:not([type=color]):not([type=range]){background:#fff;border:1px solid #b8c8c3;border-radius:10px;width:100%;min-height:46px;padding:.6rem .75rem}.favicon-fields>label:nth-of-type(3),.favicon-fields>label:nth-of-type(4),.favicon-fields>.range-label,.favicon-fields>input[type=range],.favicon-colors{grid-column:1/-1}.favicon-colors{grid-template-columns:1fr 1fr;gap:.9rem;display:grid}.favicon-colors label{gap:.3rem;font-size:.88rem;font-weight:650;display:grid}.favicon-colors label span{border:1px solid #b8c8c3;border-radius:10px;align-items:center;gap:.6rem;min-height:46px;padding:.35rem .6rem;display:flex}.favicon-colors input{background:0 0;border:0;width:38px;height:32px;padding:0}.favicon-colors output{font-family:ui-monospace,monospace;font-weight:500}.favicon-fields .range-label{justify-content:space-between;margin-top:.2rem;display:flex}.favicon-fields input[type=range]{width:100%;accent-color:var(--green)}.run-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.4rem;display:flex}.text-button{color:var(--green);background:0 0;border:0;min-height:44px;padding:.5rem;text-decoration:underline}.status-region{min-height:1.8rem;margin-top:.8rem}.status-region p{margin:0}.status-region progress{width:100%;accent-color:var(--green)}.error-message{color:#8f1616;background:#fff0f0;border:1px solid #efb7b7;border-radius:10px;margin-top:.75rem;padding:.75rem}.local-note{color:#355e55;background:#eff8f4;border-radius:12px;gap:.5rem;margin:.8rem 0 0;padding:.75rem;font-size:.86rem;display:flex}.preview-contexts{grid-template-columns:1fr 1fr;gap:.9rem;display:grid}.preview-context{border-radius:14px;min-height:160px;margin:0;padding:1rem}.preview-context.light{color:#172523;background:#f4f6f5}.preview-context.dark{color:#fff;background:#172523}.preview-context figcaption{margin-bottom:1rem;font-size:.8rem;font-weight:650}.preview-sizes{justify-content:center;align-items:end;gap:1.5rem;display:flex}.preview-sizes>div{justify-items:center;gap:.5rem;font-size:.75rem;display:grid}.favicon-square{place-items:center;display:grid;overflow:hidden;box-shadow:0 0 0 1px #00000026}.favicon-square img{object-fit:contain;max-width:100%;max-height:100%}.size-16{image-rendering:auto;width:16px;height:16px}.size-32{width:32px;height:32px}.package-card{border:1px solid var(--line);border-radius:16px;margin-top:1.5rem;padding:1rem}.package-card h3{margin-bottom:.4rem}.package-card p{color:var(--muted);font-size:.88rem}.download-package{justify-content:center;width:100%}.package-placeholder{color:var(--muted);text-align:center;background:#f3f6f5;border-radius:10px;padding:1rem;font-size:.86rem}.planned-note{color:#5d4c21;background:#fff9e9;border-left:3px solid #d5a340;margin:1rem 0 0;padding:.75rem;font-size:.83rem}.cache-note{color:var(--muted);margin:.8rem 0 0;font-size:.82rem}.spinner{border:2px solid #ffffff73;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite favicon-spin}@keyframes favicon-spin{to{transform:rotate(360deg)}}@media (width<=820px){.favicon-workspace{grid-template-columns:1fr}.favicon-preview{order:2}}@media (width<=520px){.favicon-fields,.favicon-colors,.preview-contexts{grid-template-columns:1fr}.favicon-fields>label,.favicon-fields>.range-label,.favicon-fields>input[type=range],.favicon-colors{grid-column:1}.favicon-selected{grid-template-columns:48px minmax(0,1fr)}.favicon-selected .text-button{grid-column:2;justify-self:start;padding-left:0}.source-thumb{width:48px;height:48px}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}