:root{--fg-primary:var(--main-primary);--fg-primary-hover:var(--main-primary-hover);--fg-text:#1e293b;--fg-text-muted:#64748b;--fg-bg:#fff;--fg-bg-secondary:#f8fafc;--fg-border:#e2e8f0;--fg-border-hover:#cbd5e1;--fg-radius:var(--main-radius);--fg-radius-lg:var(--main-radius-lg);--fg-shadow:var(--main-shadow-sm);--fg-upload-border:#cbd5e1;--fg-upload-bg:#f8fafc80;--fg-browser-bg:#f1f5f9;--fg-browser-tab-bg:#fff;--fg-browser-tab-inactive:#e2e8f0;--fg-browser-dot-1:#ef4444;--fg-browser-dot-2:#f59e0b;--fg-browser-dot-3:#22c55e}._fg-container{max-width:960px;margin:0 auto}._fg-editor-grid{gap:var(--main-space-5);grid-template-columns:280px 1fr;align-items:start;display:grid}._fg-panel{background:var(--fg-bg);border-radius:var(--fg-radius-lg);border-style:solid;border-width:1px;border-color:var(--fg-border);box-shadow:var(--fg-shadow);overflow:hidden}._fg-panel-header{padding:var(--main-space-3) var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--fg-border);background:var(--fg-bg-secondary);justify-content:space-between;align-items:center;display:flex}._fg-panel-title{font-size:var(--main-text-sm);color:var(--fg-text);font-weight:600}@media (max-width:768px){._fg-container{padding-left:.75rem;padding-right:.75rem}._fg-editor-grid{gap:var(--main-space-4);grid-template-columns:1fr}._fg-panel-header{padding:var(--main-space-3)}}@media (max-width:480px){._fg-container{padding-left:.5rem;padding-right:.5rem}}._fg-upload{max-width:500px;margin:var(--main-space-8) auto;border-style:dashed;border-width:2px;border-color:var(--fg-upload-border);border-radius:var(--fg-radius-lg);background:var(--fg-upload-bg);cursor:pointer;touch-action:manipulation;transition:border-color .2s,background-color .2s}._fg-upload.dragover{border-color:var(--fg-primary);background:#6366f10a}@media (hover:hover){._fg-upload:hover{border-color:var(--fg-primary);background:#6366f10a}}._fg-upload-inner{padding:var(--main-space-10) var(--main-space-6);justify-content:center;align-items:center;gap:var(--main-space-3);flex-direction:column;display:flex}@media (max-width:480px){._fg-upload{margin:var(--main-space-5) auto}._fg-upload-inner{padding:var(--main-space-8) var(--main-space-4)}}._fg-upload-icon{color:var(--fg-text-muted);opacity:.6}._fg-upload-text{font-size:var(--main-text-base);color:var(--fg-text);text-align:center;font-weight:500}._fg-upload-hint{font-size:var(--main-text-xs);color:var(--fg-text-muted)}._fg-browser-mockup{margin:var(--main-space-4);border-radius:var(--fg-radius-lg);border-style:solid;border-width:1px;border-color:var(--fg-border);box-shadow:var(--fg-shadow);overflow:hidden}._fg-browser-bar{align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);background:var(--fg-browser-bg);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--fg-border);display:flex}._fg-browser-dots{flex-shrink:0;gap:6px;display:flex}._fg-browser-dots span{border-radius:50%;width:10px;height:10px}._fg-browser-dots span:first-child{background:var(--fg-browser-dot-1)}._fg-browser-dots span:nth-child(2){background:var(--fg-browser-dot-2)}._fg-browser-dots span:nth-child(3){background:var(--fg-browser-dot-3)}._fg-browser-tabs{flex:1;gap:2px;min-width:0;display:flex}._fg-browser-tab{border-radius:6px 6px 0 0;align-items:center;gap:6px;min-width:0;max-width:160px;padding:4px 12px;font-size:11px;display:flex}._fg-browser-tab-active{background:var(--fg-browser-tab-bg)}._fg-tab-icon{width:16px;height:16px;image-rendering:pixelated;flex-shrink:0}._fg-tab-title{color:var(--fg-text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._fg-tab-title-dimmed{color:var(--fg-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._fg-browser-address{padding:var(--main-space-2) var(--main-space-3);background:var(--fg-browser-tab-bg)}._fg-browser-url{color:var(--fg-text-muted);background:var(--fg-bg-secondary);border-radius:var(--fg-radius);border-style:solid;border-width:1px;border-color:var(--fg-border);padding:4px 10px;font-size:11px;display:block}._fg-size-grid{gap:var(--main-space-3);padding:var(--main-space-4);grid-template-columns:repeat(4,1fr);display:grid}._fg-size-item{align-items:center;gap:var(--main-space-1);padding:var(--main-space-3);border-radius:var(--fg-radius);background:var(--fg-bg-secondary);border-style:solid;border-width:1px;border-color:var(--fg-border);flex-direction:column;justify-content:center;min-height:80px;display:flex}._fg-size-canvas{image-rendering:pixelated;background-image:linear-gradient(45deg,#f1f5f9 25%,#0000 25%),linear-gradient(-45deg,#f1f5f9 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f1f5f9 75%),linear-gradient(-45deg,#0000 75%,#f1f5f9 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;max-width:64px;max-height:64px}._fg-size-label{color:var(--fg-text-muted);font-size:10px;font-weight:600;font-family:var(--main-font-mono)}._fg-size-desc{color:var(--fg-primary);font-size:9px;font-weight:500}._fg-download-section{padding:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--fg-border)}._fg-download-grid{gap:var(--main-space-2);grid-template-columns:1fr 1fr;display:grid}._fg-download-btn{align-items:center;gap:var(--main-space-2);padding:var(--main-space-3);border-radius:var(--fg-radius);border-style:solid;border-width:1px;border-color:var(--fg-border);background:var(--fg-bg);min-height:48px;color:var(--fg-text);cursor:pointer;text-align:left;touch-action:manipulation;transition:border-color .15s,box-shadow .15s;display:flex}@media (hover:hover){._fg-download-btn:hover{border-color:var(--fg-primary);box-shadow:0 2px 8px #6366f126}}._fg-download-btn svg{color:var(--fg-primary);flex-shrink:0}._fg-download-info{flex-direction:column;min-width:0;display:flex}._fg-download-format{font-size:var(--main-text-sm);color:var(--fg-text);font-weight:600}._fg-download-desc{color:var(--fg-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}._fg-download-all{background:var(--fg-primary);border-color:var(--fg-primary);color:#fff;grid-column:1/-1}@media (hover:hover){._fg-download-all:hover{opacity:.9;border-color:var(--fg-primary);box-shadow:0 2px 8px #6366f14d}}._fg-download-all svg,._fg-download-all ._fg-download-format,._fg-download-all ._fg-download-desc{color:#fff}._fg-download-all ._fg-download-desc{opacity:.85}@media (max-width:768px){._fg-browser-tab{max-width:120px;padding:4px 8px}._fg-size-grid{gap:var(--main-space-2);padding:var(--main-space-3);grid-template-columns:repeat(4,1fr)}._fg-size-item{padding:var(--main-space-2);min-height:72px}._fg-download-section{padding:var(--main-space-3)}}@media (max-width:640px){._fg-size-grid{grid-template-columns:repeat(3,1fr)}._fg-download-grid{grid-template-columns:1fr}._fg-browser-mockup{margin:var(--main-space-3)}}@media (max-width:480px){._fg-size-grid{grid-template-columns:repeat(2,1fr)}._fg-size-canvas{max-width:56px;max-height:56px}._fg-browser-tabs ._fg-browser-tab+._fg-browser-tab{display:none}._fg-download-desc{white-space:normal;text-overflow:clip;line-height:1.3;overflow:visible}}._fg-btn-change{border-radius:var(--fg-radius);border-style:solid;border-width:1px;border-color:var(--fg-border);background:var(--fg-bg);width:32px;height:32px;color:var(--fg-text-muted);cursor:pointer;justify-content:center;align-items:center;display:inline-flex}@media (hover:hover){._fg-btn-change:hover{color:var(--fg-primary);border-color:var(--fg-primary)}}._fg-source-preview{padding:var(--main-space-4);align-items:center;gap:var(--main-space-2);flex-direction:column;display:flex}._fg-source-canvas-wrap{aspect-ratio:1;border-radius:var(--fg-radius);border-style:solid;border-width:1px;border-color:var(--fg-border);background-image:linear-gradient(45deg,#f1f5f9 25%,#0000 25%),linear-gradient(-45deg,#f1f5f9 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f1f5f9 75%),linear-gradient(-45deg,#0000 75%,#f1f5f9 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}._fg-source-canvas{image-rendering:auto;max-width:100%;max-height:100%}._fg-source-info{font-size:var(--main-text-xs);color:var(--fg-text-muted);text-align:center}._fg-settings{padding:var(--main-space-4);gap:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--fg-border);flex-direction:column;display:flex}._fg-setting-group{gap:var(--main-space-2);flex-direction:column;display:flex}._fg-setting-label{font-size:var(--main-text-xs);color:var(--fg-text-muted);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;font-weight:600;display:flex}._fg-shape-options{gap:var(--main-space-2);display:flex}._fg-shape-btn{border-radius:var(--fg-radius);border-style:solid;border-width:2px;border-color:var(--fg-border);background:var(--fg-bg);cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;width:44px;height:44px;transition:border-color .15s;display:flex}@media (hover:hover){._fg-shape-btn:hover{border-color:var(--fg-border-hover)}}._fg-shape-btn.active{border-color:var(--fg-primary);background:#6366f10d}._fg-shape-icon{background:var(--fg-primary);opacity:.7;width:20px;height:20px;display:block}._fg-shape-btn.active ._fg-shape-icon{opacity:1}._fg-shape-square{border-radius:2px}._fg-shape-rounded{border-radius:5px}._fg-shape-circle{border-radius:50%}._fg-bg-options{gap:var(--main-space-2);flex-direction:column;display:flex}._fg-bg-option{align-items:center;gap:var(--main-space-2);cursor:pointer;font-size:var(--main-text-sm);color:var(--fg-text);touch-action:manipulation;min-height:32px;display:flex}._fg-bg-option input[type=radio]{accent-color:var(--fg-primary)}._fg-bg-swatch{border-style:solid;border-width:1px;border-color:var(--fg-border);border-radius:4px;flex-shrink:0;width:24px;height:24px}._fg-bg-transparent{background-image:linear-gradient(45deg,#e2e8f0 25%,#0000 25%),linear-gradient(-45deg,#e2e8f0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e8f0 75%),linear-gradient(-45deg,#0000 75%,#e2e8f0 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}._fg-bg-text{font-size:var(--main-text-sm)}._fg-color-input{cursor:pointer;border:0 #0000;border-radius:4px;flex-shrink:0;width:28px;height:28px;padding:0}._fg-color-input::-webkit-color-swatch-wrapper{padding:0}._fg-color-input::-webkit-color-swatch{border-style:solid;border-width:1px;border-color:var(--fg-border);border-radius:4px}._fg-padding-value{font-weight:400;font-size:var(--main-text-xs);color:var(--fg-primary)}._fg-range-input{-webkit-appearance:none;appearance:none;background:var(--fg-border);cursor:pointer;touch-action:manipulation;border-radius:3px;outline:none;width:100%;height:6px}._fg-range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--fg-primary);cursor:pointer;border-style:none;border-width:0;border-radius:50%;width:22px;height:22px;box-shadow:0 1px 3px #0003}._fg-range-input::-moz-range-thumb{background:var(--fg-primary);cursor:pointer;border-style:none;border-width:0;border-radius:50%;width:22px;height:22px;box-shadow:0 1px 3px #0003}@media (max-width:768px){._fg-source-preview{padding:var(--main-space-3)}._fg-source-canvas-wrap{max-width:240px;max-height:240px;margin:0 auto}._fg-settings{padding:var(--main-space-3);gap:var(--main-space-3)}}