.favicon-workspace{overflow:visible}.favicon-mode-switch{background:var(--surface-soft);border-bottom:1px solid var(--line);display:grid;gap:5px;grid-template-columns:repeat(2,minmax(0,1fr));padding:9px 16px}.favicon-mode-switch button{align-items:center;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--text-muted);display:inline-flex;font-size:9px;gap:7px;justify-content:center;min-height:38px;transition:background .15s ease,border-color .15s ease,color .15s ease}.favicon-mode-switch button:hover{color:var(--text)}.favicon-mode-switch button.active{background:var(--surface-solid);border-color:color-mix(in srgb,var(--accent) 25%,var(--line));box-shadow:0 5px 15px color-mix(in srgb,var(--accent) 6%,transparent);color:var(--accent)}.favicon-layout{align-items:start;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);min-height:650px}.favicon-preview-panel{border-right:1px solid var(--line);min-height:650px;min-width:0;padding:16px}.favicon-drop-zone{min-height:610px}.favicon-source-header{align-items:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:11px;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px;padding:9px 10px}.favicon-source-header>div{align-items:center;display:flex;gap:9px;min-width:0}.favicon-source-header>div>span{background:var(--accent-soft);border-radius:9px;color:var(--accent);display:grid;height:31px;place-items:center;width:31px}.favicon-source-header p{display:grid;gap:3px;margin:0;min-width:0}.favicon-source-header small,.favicon-source-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favicon-source-header strong{color:var(--text);font-size:9px}.favicon-source-header small{color:var(--text-faint);font-size:8px}.favicon-source-header button{align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;color:var(--text-muted);display:inline-flex;font-size:8px;gap:5px;min-height:30px;padding:0 9px}.favicon-source-header--text>i{background:var(--accent-soft);border-radius:7px;color:var(--accent);flex:0 0 auto;font:700 7px/1 ui-monospace,monospace;font-style:normal;padding:5px 7px}.favicon-preview-stage{background-color:var(--surface-soft);background-image:radial-gradient(circle,color-mix(in srgb,var(--text-faint) 18%,transparent) .7px,transparent .8px);background-size:14px 14px;border:1px solid var(--line);border-radius:12px;display:grid;gap:36px;min-height:360px;padding:38px 24px;place-items:center}.favicon-preview-card--browser{align-items:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 32px color-mix(in srgb,var(--text) 8%,transparent);display:flex;gap:6px;height:45px;padding:0 13px;width:min(100%,390px)}.favicon-preview-card--browser>i{background:var(--line-strong);border-radius:50%;height:6px;width:6px}.favicon-preview-card--browser>span{align-items:center;color:var(--text-muted);display:flex;font-size:9px;gap:8px;margin-left:9px}.favicon-preview-card--browser img{height:18px;-o-object-fit:contain;object-fit:contain;width:18px}.favicon-preview-sizes{align-items:end;display:flex;gap:clamp(16px,4vw,38px);justify-content:center}.favicon-preview-sizes figure{display:grid;gap:8px;justify-items:center;margin:0}.favicon-preview-sizes figure>span{display:grid;overflow:hidden;place-items:center}.favicon-preview-sizes img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}.favicon-preview-sizes figcaption{color:var(--text-faint);font-size:8px}.favicon-preview-sizes .size-128{height:128px;width:128px}.favicon-preview-sizes .size-64{height:64px;width:64px}.favicon-preview-sizes .size-32{height:32px;width:32px}.favicon-preview-sizes .size-16{height:16px;width:16px}.favicon-assets{display:grid;gap:11px;margin-top:12px}.favicon-assets>header{align-items:end;display:flex;gap:12px;justify-content:space-between}.favicon-assets>header strong{color:var(--text);font-size:10px}.favicon-assets>header small{color:var(--text-faint);font-size:8px}.favicon-assets>div{display:grid;gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}.favicon-assets button{align-items:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:10px;display:grid;gap:8px;grid-template-columns:31px minmax(0,1fr) auto;padding:8px;text-align:left}.favicon-assets button>span{background:var(--accent-soft);border-radius:8px;color:var(--accent);display:grid;height:31px;place-items:center;width:31px}.favicon-assets button>i{display:grid;font-style:normal;gap:3px;min-width:0}.favicon-assets button small,.favicon-assets button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favicon-assets button strong{color:var(--text);font-size:8px}.favicon-assets button small{color:var(--text-faint);font-size:7px}.favicon-assets button>svg{color:var(--text-faint)}.favicon-assets button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.favicon-assets button:hover>svg{color:var(--accent)}.favicon-settings{background:var(--surface-soft);display:grid;min-width:0;position:sticky;top:74px}.favicon-settings>section{border-bottom:1px solid var(--line);display:grid;gap:12px;padding:16px}.favicon-settings>section>header{align-items:center;display:flex;gap:9px}.favicon-settings>section>header>span{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:50%;color:var(--accent);display:grid;flex:0 0 24px;font:750 8px/1 ui-monospace,monospace;height:24px;place-items:center;width:24px}.favicon-settings>section>header>div{display:grid;gap:2px}.favicon-settings>section>header strong{color:var(--text);font-size:10px}.favicon-settings>section>header small{color:var(--text-faint);font-size:8px}.favicon-settings label{color:var(--text-muted);display:grid;font-size:8px;gap:6px}.favicon-settings label>input[type=text],.favicon-settings label>select{background:var(--surface-solid);border:1px solid var(--line);border-radius:9px;color:var(--text);min-height:37px;outline:0;padding:0 10px;width:100%}.favicon-settings label>input[type=text]:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}.favicon-text-settings .favicon-text-input{font-size:19px;font-weight:750;letter-spacing:.06em;min-height:48px!important;text-align:center}.favicon-weight-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.favicon-range>span{display:flex;justify-content:space-between}.favicon-range b{color:var(--accent);font:700 8px/1 ui-monospace,monospace}.favicon-range input{accent-color:var(--accent);width:100%}.favicon-check{align-items:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:9px;grid-template-columns:auto 1fr;min-height:37px;padding:0 10px}.favicon-check input{accent-color:var(--accent)}.favicon-color{align-items:center;background:var(--surface-solid);border:1px solid var(--line);border-radius:9px;grid-template-columns:1fr auto auto;min-height:38px;padding-left:10px}.favicon-color input{background:transparent;border:0;height:26px;padding:2px;width:35px}.favicon-color code{color:var(--text-faint);font-size:8px;min-width:64px;padding-right:9px}.favicon-code-section pre{background:var(--surface-solid);border:1px solid var(--line);border-radius:9px;color:var(--text-muted);font:8px/1.6 ui-monospace,monospace;margin:0;max-height:116px;overflow:auto;padding:10px;white-space:pre-wrap;word-break:break-all}.favicon-code-section details{color:var(--text-muted);font-size:8px}.favicon-code-section summary{cursor:pointer;margin-bottom:8px}.favicon-code-section>button{border:1px solid var(--line);border-radius:8px;font-size:8px;gap:5px;justify-self:end;min-height:30px;padding:0 9px}.favicon-code-section>button,.favicon-export-section button{align-items:center;background:var(--surface-solid);color:var(--text-muted);display:inline-flex}.favicon-export-section button{border:1px solid var(--line);border-radius:9px;font-size:9px;gap:6px;justify-content:center;min-height:39px}.favicon-export-section button.primary-button{background:var(--accent);border-color:var(--accent);color:#fff}.favicon-export-section button:disabled{opacity:.45}.favicon-settings>.workspace-error{margin:12px 16px 16px}@media(max-width:900px){.favicon-layout{grid-template-columns:1fr}.favicon-preview-panel{border-bottom:1px solid var(--line);border-right:0;min-height:auto}.favicon-drop-zone{min-height:350px}.favicon-settings{position:static}}@media(max-width:560px){.favicon-mode-switch{padding:8px 10px}.favicon-preview-panel{padding:10px}.favicon-source-header{align-items:flex-start}.favicon-preview-stage{min-height:300px;padding:28px 12px}.favicon-preview-sizes{gap:14px}.favicon-preview-sizes .size-128{height:88px;width:88px}.favicon-assets>header{align-items:flex-start;flex-direction:column}.favicon-assets>div{grid-template-columns:1fr}}