.favicon-hero{padding-bottom:38px}.favicon-hero .lead code{font-size:.92em}.favicon-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;align-items:start;padding-top:18px}.favicon-builder{display:grid;gap:16px}.favicon-panel,.favicon-preview-panel{border:1px solid var(--line);background:var(--panel);border-radius:18px;box-shadow:var(--shadow)}.favicon-panel{padding:20px}.panel-heading>div{display:flex;gap:13px;align-items:flex-start}.panel-heading h2,.preview-head h2{margin:0;font-size:1.22rem}.panel-heading p,.preview-note{margin:4px 0 0;color:var(--muted);font-size:.9rem}.step-number{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:10px;background:var(--accent-soft);color:var(--brand);font-weight:900}.source-tabs{display:flex;gap:8px;margin:18px 0 14px}.source-tab{border:1px solid var(--line);background:var(--soft);color:var(--muted);border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}.source-tab.active{color:var(--text);border-color:color-mix(in srgb,var(--brand) 55%,var(--line));background:var(--accent-soft)}.favicon-drop{display:grid;place-items:center;text-align:center;min-height:190px;border:1px dashed color-mix(in srgb,var(--brand) 55%,var(--line));border-radius:15px;background:var(--code-bg);padding:24px;cursor:pointer;transition:.15s border-color,.15s background}.favicon-drop:hover,.favicon-drop.dragover{border-color:var(--brand2);background:color-mix(in srgb,var(--accent-soft) 60%,var(--code-bg))}.favicon-drop input{position:absolute;opacity:0;pointer-events:none}.drop-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--accent-soft);color:var(--brand);font-size:1.5rem;font-weight:900;margin-bottom:10px}.favicon-drop small{display:block;color:var(--muted);margin-top:5px}.file-meta{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:.86rem}.field-label{display:block;color:var(--muted);font-size:.86rem;font-weight:750;margin-bottom:7px}.favicon-input{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--code-bg);color:var(--text);padding:13px 14px;font-size:1.3rem;outline:0}.favicon-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--focus)}.quick-glyphs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.quick-glyphs button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);cursor:pointer;font-size:1.05rem}.quick-glyphs button:hover{border-color:var(--brand)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}.control-grid label{min-width:0}.control-grid label>span{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.84rem;font-weight:750;margin-bottom:7px}.control-grid input[type=color]{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:4px;cursor:pointer}.control-grid select{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--code-bg);color:var(--text);padding:0 10px}.range-control{grid-column:1/-1}.range-control input{width:100%;accent-color:var(--brand)}.range-control output{color:var(--text)}.check-control{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.check-control input{accent-color:var(--brand)}.check-control span{margin:0!important;color:var(--text)!important}.package-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.package-list span{display:flex;justify-content:space-between;gap:8px;border:1px solid var(--line);background:var(--code-bg);border-radius:10px;padding:10px 11px;color:var(--muted);font-size:.84rem}.package-list b{color:var(--text);font-weight:800}.generate-button{width:100%;margin-top:2px}.favicon-status{color:var(--muted);font-size:.86rem;margin:11px 0 0}.favicon-status[data-kind=success]{color:var(--brand2)}.favicon-status[data-kind=error]{color:var(--danger)}.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.favicon-preview-panel{padding:20px;position:sticky;top:88px}.preview-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.preview-head>span{border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:var(--muted);font-size:.78rem;font-weight:800}.browser-preview{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:18px 0;background:var(--code-bg)}.browser-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--line)}.browser-bar span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.55}.browser-address{display:flex;align-items:center;gap:10px;margin:12px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:.84rem}.browser-address canvas{image-rendering:auto;flex:0 0 32px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-grid figure{margin:0;border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--code-bg)}.checker{height:72px;display:grid;place-items:center;border-radius:9px;background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.checker.large{height:150px}.preview-grid canvas{max-width:100%;height:auto}.preview-grid figure:nth-child(3) canvas,.preview-grid figure:nth-child(4) canvas{width:112px;height:112px}.preview-grid figcaption{margin-top:8px;font-weight:850;font-size:.86rem}.preview-grid figcaption span{display:block;color:var(--muted);font-weight:500;font-size:.76rem}.preview-note{margin-top:13px}.favicon-code-wrap{max-width:1160px}.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.favicon-code{height:260px}.faq-list{display:grid;gap:9px;margin-top:16px}.faq-list details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 15px}.faq-list summary{cursor:pointer;font-weight:850;padding:14px 0}.faq-list p{color:var(--muted);margin:0 0 14px}.source-section[hidden],#installCode[hidden]{display:none!important}@media(max-width:900px){.favicon-workspace{grid-template-columns:1fr}.favicon-preview-panel{position:static}.code-grid{grid-template-columns:1fr}}@media(max-width:620px){.control-grid,.package-list,.download-actions,.preview-grid{grid-template-columns:1fr}.control-grid .range-control,.control-grid .check-control{grid-column:auto}.source-tabs{display:grid;grid-template-columns:1fr 1fr}.favicon-panel,.favicon-preview-panel{padding:16px}.checker.large{height:130px}}