.favicon-reset-frame{border:1px solid var(--svg-line);width:100%;color:var(--svg-dim);font:inherit;cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:6px;margin-top:11px;padding:8px;font-size:8px;display:flex}.favicon-reset-frame:hover{border-color:var(--svg-green);color:var(--svg-green)}.favicon-image-stage{aspect-ratio:1;width:min(40%,160px);position:relative}.favicon-image-stage>img{object-fit:contain;height:100%;width:100%!important;display:block!important}.favicon-image-drag-overlay{touch-action:none;cursor:grab;width:100%;height:100%;position:absolute;inset:0}.favicon-image-drag-overlay.dragging{cursor:grabbing}.favicon-image-drag-overlay circle{fill:none;stroke:#7cffb2a6;stroke-width:4px;stroke-dasharray:12 10}.favicon-image-drag-overlay g{color:var(--svg-green);filter:drop-shadow(0 0 5px #7cffb273)}.favicon-image-drag-overlay g svg{overflow:visible}.favicon-drag-hint{color:var(--svg-dim);align-items:center;gap:5px;margin-top:10px;font-size:8px;display:flex}.favicon-drag-hint svg{color:var(--svg-orange)}@media (width<=720px){.favicon-image-stage{width:min(48%,140px)}}.favicon-context-board{border-bottom:1px solid var(--svg-soft);background:#0d130f;gap:0;display:grid}.favicon-preview-section{border-bottom:1px solid var(--svg-soft);padding:12px}.favicon-preview-section:last-child{border-bottom:0}.favicon-preview-section>header{color:var(--svg-dim);letter-spacing:.07em;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:8px;display:flex}.favicon-preview-section>header>span{color:var(--svg-paper);align-items:center;gap:6px;display:flex}.favicon-preview-section>header small{color:var(--svg-dim-2);letter-spacing:0;font-size:7px}.favicon-context-icon{object-fit:cover;border-radius:4px;flex:none;width:18px;height:18px;display:block}.favicon-context-icon.framed{box-sizing:border-box;background:#e8f0eb;border:1px solid #0f18122e;border-radius:5px;padding:3px}.favicon-browser-grid,.favicon-search-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.favicon-browser-window{color:#202923;background:#f8faf8;border:1px solid #33423a;font-family:Arial,sans-serif;font-size:7px;overflow:hidden}.favicon-browser-window.dark{color:#e7ede8;background:#1a211d;border-color:#3c4a43}.browser-tabs{background:#e9eee9;align-items:center;height:25px;padding:0 6px;display:flex}.dark .browser-tabs{background:#252e29}.browser-tab{text-overflow:ellipsis;white-space:nowrap;background:#fff;border-radius:5px 5px 0 0;align-items:center;gap:5px;min-width:0;max-width:130px;padding:5px 7px 4px;display:flex;overflow:hidden}.dark .browser-tab{background:#19201c}.browser-tab .favicon-context-icon{border-radius:3px;width:12px;height:12px}.browser-tab .favicon-context-icon.framed{padding:2px}.browser-tabs>i{opacity:.35;border:1px solid;border-radius:50%;width:8px;height:8px;margin-left:6px}.browser-address{color:#69766e;border:1px solid #d5ddd6;border-radius:8px;align-items:center;gap:5px;margin:5px 6px;padding:4px 6px;font-size:6px;display:flex}.dark .browser-address{color:#9ba89f;border-color:#3f4b44}.browser-content{gap:3px;min-height:41px;padding:7px 8px;display:grid}.browser-content span{color:#78877e;font-size:6px}.browser-content strong{font-size:9px;font-weight:600}.favicon-search-result{color:#202124;background:#fff;border:1px solid #cfd9d1;min-height:95px;padding:10px;font-family:Arial,sans-serif}.favicon-search-result.dark{color:#e8ede9;background:#202723;border-color:#3a463e}.favicon-search-result>div{align-items:center;gap:7px;margin-bottom:8px;font-size:8px;display:flex}.favicon-search-result .favicon-context-icon{border-radius:50%;width:22px;height:22px}.favicon-search-result .favicon-context-icon.framed{padding:4px}.favicon-search-result small{color:#5f705f;font-size:6px}.dark .favicon-search-result small{color:#a2b4a6}.favicon-search-result strong{color:#286b3e;margin-bottom:4px;font-size:11px;font-weight:500;display:block}.dark .favicon-search-result strong{color:#8bcf95}.favicon-search-result p{color:#4e5b52;margin:0;font-size:7px;line-height:1.45}.dark .favicon-search-result p{color:#c1cac3}.favicon-device-grid{grid-template-columns:1fr 1fr .9fr;gap:8px;display:grid}.favicon-phone{color:#1b231e;background:#f5f7f4;border:1px solid #55635a;border-radius:18px;align-content:start;justify-items:center;min-height:154px;padding:8px;font-family:Arial,sans-serif;display:grid;position:relative;overflow:hidden}.favicon-phone.ios{background:linear-gradient(145deg,#dfeae7,#fbfaf3 55%,#d5f0de)}.favicon-phone.android{color:#eef5ef;background:linear-gradient(145deg,#19231d,#3f6750)}.phone-notch{background:#17201b;border-radius:0 0 8px 8px;width:42%;height:8px;position:absolute;top:0}.phone-time{font-size:6px;font-weight:700;position:absolute;top:8px;left:10px}.phone-app,.android-app{justify-items:center;gap:4px;margin-top:30px;font-size:7px;display:grid}.phone-app .favicon-context-icon,.android-app .favicon-context-icon{border-radius:10px;width:38px;height:38px}.phone-app .favicon-context-icon.framed,.android-app .favicon-context-icon.framed{padding:6px}.phone-dock{background:#ffffff61;border-radius:10px;gap:8px;padding:6px 10px;display:flex;position:absolute;bottom:18px}.phone-dock i{background:#ffffffa8;border-radius:50%;width:9px;height:9px}.favicon-phone>small,.favicon-desktop>small{color:inherit;opacity:.68;font-size:6px;position:absolute;bottom:5px;right:8px}.android-status{font-size:6px;position:absolute;top:7px;left:9px}.android-card{color:#17251c;background:#e9f8eb;border:1px solid #93be9f;gap:2px;width:88%;margin-top:15px;padding:7px;font-size:6px;display:grid}.android-card strong{font-size:8px}.favicon-desktop{color:#dfe8e1;background:#111813;border:1px solid #3b4a41;min-height:154px;font-family:Arial,sans-serif;position:relative;overflow:hidden}.desktop-strip{background:#1d2820;border-bottom:1px solid #344339;align-items:center;gap:5px;height:20px;padding:0 6px;font-size:6px;display:flex}.desktop-strip .favicon-context-icon{border-radius:2px;width:11px;height:11px}.desktop-strip .favicon-context-icon.framed{padding:2px}.desktop-strip>span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.desktop-strip>i{background:#829489;border-radius:50%;width:5px;height:5px;margin-left:auto}.desktop-strip>i+i{background:#ff8a5b;margin-left:1px}.desktop-card{background:#18221b;border:1px solid #3b4b41;align-items:center;gap:7px;margin:24px 8px;padding:8px;display:flex}.desktop-card .favicon-context-icon{border-radius:7px;width:28px;height:28px}.desktop-card .favicon-context-icon.framed{padding:4px}.desktop-card div{gap:3px;font-size:6px;display:grid}.desktop-card b{font-size:8px}.favicon-treatment{grid-template-columns:1fr 1fr;gap:5px;margin-top:8px;display:grid}.favicon-treatment button{border:1px solid var(--svg-line);color:var(--svg-dim);background:var(--svg-panel);font:inherit;cursor:pointer;padding:8px 5px;font-size:8px}.favicon-treatment button.active{color:var(--svg-green);background:#132019;border-color:#3f6e56}.favicon-generator .favicon-canvas{min-height:180px}.favicon-generator .favicon-canvas img{width:min(40%,160px)}@media (width<=720px){.favicon-preview-section{padding:10px}.favicon-browser-grid,.favicon-search-grid{grid-template-columns:1fr}.favicon-device-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.favicon-phone,.favicon-desktop{min-height:135px}.favicon-phone{border-radius:14px;padding:6px}.phone-app .favicon-context-icon,.android-app .favicon-context-icon{width:31px;height:31px}.favicon-generator .favicon-canvas{min-height:160px}.favicon-generator .favicon-canvas img{width:min(48%,140px)}}.favicon-package-panel{border-bottom:1px solid var(--svg-soft);background:#101713;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.favicon-package-intro,.favicon-setup{padding:13px}.favicon-package-intro{border-right:1px solid var(--svg-soft)}.favicon-package-intro>span,.favicon-setup-head>span{color:var(--svg-paper);letter-spacing:.08em;align-items:center;gap:7px;font-size:9px;display:flex}.favicon-package-intro>span svg{color:var(--svg-orange)}.favicon-package-intro p{color:var(--svg-dim);margin:7px 0 10px;font-size:8px;line-height:1.55}.favicon-package-files{flex-wrap:wrap;gap:4px;margin-bottom:11px;display:flex}.favicon-package-files code{color:#9eb5a7;background:#0d130f;border:1px solid #2f4036;padding:3px 4px;font-size:7px}.favicon-package-download,.favicon-copy-code{border:1px solid var(--svg-green);color:#07140d;background:var(--svg-green);cursor:pointer;justify-content:center;align-items:center;gap:6px;width:100%;padding:9px;font-family:Space Grotesk,sans-serif;font-size:9px;font-weight:700;display:flex}.favicon-package-download:disabled{opacity:.6;cursor:wait}.favicon-package-download:not(:disabled):hover{background:#a0ffca}.favicon-setup-head{gap:4px;display:grid}.favicon-setup-head small{color:var(--svg-dim-2);font-size:7px;line-height:1.45}.favicon-setup-tabs{flex-wrap:wrap;gap:4px;margin:10px 0 8px;display:flex}.favicon-setup-tabs button{border:1px solid var(--svg-line);color:var(--svg-dim);font:inherit;cursor:pointer;background:0 0;padding:5px 6px;font-size:7px}.favicon-setup-tabs button.active{color:var(--svg-green);background:#132019;border-color:#3f6e56}.favicon-setup pre{border:1px solid var(--svg-line);color:#c8d5cb;white-space:pre-wrap;background:#0b100d;min-height:86px;max-height:138px;margin:0 0 8px;padding:9px;font:8px/1.55 IBM Plex Mono,monospace;overflow:auto}.favicon-copy-code{border-color:var(--svg-line);color:var(--svg-paper);background:0 0;font-family:IBM Plex Mono,monospace;font-weight:400}.favicon-copy-code:hover{border-color:var(--svg-green);color:var(--svg-green)}@media (width<=720px){.favicon-package-panel{grid-template-columns:1fr}.favicon-package-intro{border-right:0;border-bottom:1px solid var(--svg-soft)}.favicon-setup-tabs{gap:3px}.favicon-setup-tabs button{padding:5px}.favicon-setup pre{max-height:170px}}.favicon-grid .generator-preview>.generator-panel-head{order:1}.favicon-grid .favicon-canvas{order:2}.favicon-grid .favicon-package-panel{order:3}.favicon-grid .generator-export{order:4}.favicon-grid .favicon-context-board{border-top:1px solid var(--svg-soft);order:5}