.fp-editor{--fp-bg-app:#f5f5f5;--fp-bg-panel:#fff;--fp-bg-elevated:#ffffffeb;--fp-bg-hover:#f0f0f0;--fp-border:#e5e5e5;--fp-text:#1e1e1e;--fp-text-dim:#666;--fp-accent:#0074d9;--fp-accent-soft:#0074d91a;--fp-shadow-pop:0 8px 24px #0000001f;--fp-danger:#d32f2f;--fp-danger-soft:#fdecec;--fp-warn-bg:#fff7e0;--fp-warn-text:#8a6d1a;background:var(--fp-bg-panel);width:100%;height:100%;color:var(--fp-text);grid-template:"top top top"48px"tools canvas props"1fr/48px 1fr 240px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:13px;line-height:1.4;display:grid}@media (prefers-color-scheme:dark){.fp-editor:not([data-theme=light]){--fp-bg-app:#181818;--fp-bg-panel:#252526;--fp-bg-elevated:#2d2d2deb;--fp-bg-hover:#3a3a3a;--fp-border:#3a3a3a;--fp-text:#ccc;--fp-text-dim:#999;--fp-accent:#0d99ff;--fp-accent-soft:#0d99ff26;--fp-shadow-pop:0 8px 24px #0000008c;--fp-danger:#e05555;--fp-danger-soft:#e055551f;--fp-warn-bg:#f0c0401f;--fp-warn-text:#d8b13a}}.fp-editor[data-theme=dark]{--fp-bg-app:#181818;--fp-bg-panel:#252526;--fp-bg-elevated:#2d2d2deb;--fp-bg-hover:#3a3a3a;--fp-border:#3a3a3a;--fp-text:#ccc;--fp-text-dim:#999;--fp-accent:#0d99ff;--fp-accent-soft:#0d99ff26;--fp-shadow-pop:0 8px 24px #0000008c;--fp-danger:#e05555;--fp-danger-soft:#e055551f;--fp-warn-bg:#f0c0401f;--fp-warn-text:#d8b13a}.fp-editor *,.fp-editor :after,.fp-editor :before{box-sizing:border-box}:where(.fp-editor) button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}:where(.fp-editor) button:disabled{cursor:default}:where(.fp-editor) button:focus-visible{outline:2px solid var(--fp-accent);outline-offset:1px}.fp-canvas-mount{overflow:hidden}.fp-canvas-mount,.fp-canvas-view{grid-area:canvas;min-width:0;min-height:0;position:relative}.fp-canvas-view{background-color:var(--fp-bg-app)}.fp-topbar{background:var(--fp-bg-panel);border-bottom:1px solid var(--fp-border);grid-area:top;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;display:flex}.fp-topbar-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--fp-text);flex:1 1 0;overflow:hidden}.fp-topbar-actions,.fp-topbar-history{align-items:center;gap:4px;display:flex}.fp-topbar-btn{width:28px;height:28px;color:var(--fp-text);border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.fp-topbar-btn:hover:not(:disabled){background:var(--fp-bg-hover)}.fp-topbar-btn:disabled{opacity:.5}.fp-topbar-separator{background:var(--fp-border);width:1px;height:16px;margin:0 4px}.fp-topbar-export{display:inline-flex;position:relative}.fp-export-panel{z-index:20;background:var(--fp-bg-elevated);border:1px solid var(--fp-border);width:220px;box-shadow:var(--fp-shadow-pop);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--fp-text);border-radius:10px;flex-direction:column;gap:6px;padding:12px;font-size:12px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.fp-export-row{align-items:center;gap:8px;display:flex}.fp-export-label{text-transform:uppercase;letter-spacing:.5px;color:var(--fp-text-dim);font-size:11px}.fp-seg{background:var(--fp-bg-app);border-radius:6px;gap:2px;padding:2px;display:flex}.fp-seg-btn{height:24px;color:var(--fp-text-dim);border-radius:4px;flex:1 1 0;font-size:12px}.fp-seg-btn:hover:not(:disabled){color:var(--fp-text)}.fp-seg-btn:disabled{opacity:.5}.fp-seg-btn-active,.fp-seg-btn-active:hover{background:var(--fp-accent);color:#fff}.fp-export-value{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 32px}.fp-export-confirm{background:var(--fp-accent);color:#fff;border-radius:6px;height:28px;font-size:12px}.fp-floating-options{z-index:10;background:var(--fp-bg-elevated);border:1px solid var(--fp-border);box-shadow:var(--fp-shadow-pop);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:10px;align-items:center;gap:8px;padding:6px 10px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.fp-option-group{gap:4px}.fp-option-btn,.fp-option-group{align-items:center;display:inline-flex}.fp-option-btn{border:1px solid var(--fp-border);background:var(--fp-bg-panel);height:28px;color:var(--fp-text);border-radius:6px;justify-content:center;padding:0 10px;font-size:12px}.fp-option-btn:hover{background:var(--fp-bg-hover)}.fp-option-btn-active,.fp-option-btn-active:hover{border-color:var(--fp-accent);color:var(--fp-accent);background:var(--fp-accent-soft)}.fp-zoom-controls{z-index:10;background:var(--fp-bg-elevated);border:1px solid var(--fp-border);box-shadow:var(--fp-shadow-pop);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;align-items:center;gap:2px;padding:3px 6px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.fp-zoom-btn{width:24px;height:24px;color:var(--fp-text);border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.fp-zoom-btn:hover{background:var(--fp-bg-hover)}.fp-zoom-value{text-align:center;min-width:44px;height:24px;color:var(--fp-text);border-radius:999px;padding:0 4px;font-size:12px}.fp-zoom-value:hover{background:var(--fp-bg-hover)}.fp-toolbar{background:var(--fp-bg-panel);border-right:1px solid var(--fp-border);flex-direction:column;grid-area:tools;gap:2px;padding:4px 0}.fp-tool-btn,.fp-toolbar{align-items:center;display:flex}.fp-tool-btn{width:40px;height:40px;color:var(--fp-text);border-radius:6px;justify-content:center}.fp-tool-btn:hover{background:var(--fp-bg-hover)}.fp-tool-btn-active,.fp-tool-btn-active:hover{background:var(--fp-accent-soft);color:var(--fp-accent)}.fp-tool-btn-label{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fp-side-panel{background:var(--fp-bg-panel);border-left:1px solid var(--fp-border);flex-direction:column;grid-area:props;min-height:0;display:flex}.fp-side-panel .fp-layers-panel,.fp-side-panel .fp-props-panel{grid-area:unset;border-left:none}.fp-side-panel .fp-props-panel{flex:auto;min-height:0}.fp-props-panel{background:var(--fp-bg-panel);border-left:1px solid var(--fp-border);flex-direction:column;grid-area:props;gap:12px;padding:12px;font-size:12px;display:flex;overflow-y:auto}.fp-props-canvas,.fp-props-multi,.fp-props-object{flex-direction:column;gap:10px;display:flex}.fp-props-readonly{justify-content:space-between;align-items:center;gap:8px;display:flex}.fp-color-field-label,.fp-number-field-label,.fp-props-readonly-label,.fp-text-field-label{color:var(--fp-text-dim)}.fp-props-multi-count,.fp-props-readonly-value{color:var(--fp-text)}.fp-color-field{flex-direction:column;gap:6px;display:flex}.fp-color-field-value{color:var(--fp-text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.fp-number-field,.fp-text-field{flex-direction:column;gap:4px;display:flex}.fp-number-field input{border:1px solid var(--fp-border);width:100%;height:28px;font:inherit;color:inherit;background:var(--fp-bg-panel);border-radius:4px;padding:0 8px}.fp-number-field input:focus{border-color:var(--fp-accent);box-shadow:0 0 0 1px var(--fp-accent);outline:none}.fp-text-field textarea{border:1px solid var(--fp-border);min-height:64px;font:inherit;color:inherit;background:var(--fp-bg-panel);resize:vertical;border-radius:4px;padding:6px 8px}.fp-text-field textarea:focus{border-color:var(--fp-accent);box-shadow:0 0 0 1px var(--fp-accent);outline:none}.fp-props-group{flex-direction:column;gap:6px;display:flex}.fp-props-group-label{color:var(--fp-text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.fp-props-style-toggles{flex-wrap:wrap;gap:6px;display:flex}.fp-props-align-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.fp-props-align-grid .fp-props-toggle{padding:0 4px}.fp-props-align-grid .fp-props-toggle:disabled{opacity:.5}.fp-props-toggle{border:1px solid var(--fp-border);background:var(--fp-bg-panel);height:26px;color:var(--fp-text);border-radius:6px;padding:0 10px;font-size:12px}.fp-props-toggle:hover{background:var(--fp-bg-hover)}.fp-props-toggle-active,.fp-props-toggle-active:hover{border-color:var(--fp-accent);color:var(--fp-accent);background:var(--fp-accent-soft)}.fp-props-delete{border:1px solid var(--fp-danger);background:var(--fp-bg-panel);height:30px;color:var(--fp-danger);border-radius:6px;padding:0 12px;font-size:12px}.fp-props-delete:hover{background:var(--fp-danger-soft)}.fp-props-locked-hint{background:var(--fp-warn-bg);color:var(--fp-warn-text);border-radius:4px;padding:6px 8px}.fp-filter-field{flex-direction:column;gap:4px;display:flex}.fp-filter-field-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.fp-filter-field-label,.fp-filter-field-value{color:var(--fp-text-dim)}.fp-filter-field-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.fp-filter-field input[type=range]{width:100%;accent-color:var(--fp-accent);margin:0}.fp-color-palette{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.fp-swatch{cursor:pointer;border:1px solid #00000040;border-radius:4px;width:20px;height:20px;padding:0}.fp-swatch:hover{box-shadow:0 0 0 2px #0000001f}.fp-swatch-active,.fp-swatch-active:hover{box-shadow:0 0 0 2px var(--fp-bg-panel),0 0 0 4px var(--fp-accent)}.fp-color-custom{cursor:pointer;background:0 0;border:1px solid #00000040;border-radius:4px;width:20px;height:20px;padding:0}.fp-color-custom::-webkit-color-swatch-wrapper{padding:0}.fp-color-custom::-webkit-color-swatch{border:none;border-radius:3px}.fp-color-custom::-moz-color-swatch{border:none;border-radius:3px}.fp-layers-panel{background:var(--fp-bg-panel);border-left:1px solid var(--fp-border);flex-direction:column;flex:0 auto;grid-area:props;min-height:0;max-height:45%;font-size:12px;display:flex}.fp-layers-header,.fp-layers-panel{border-bottom:1px solid var(--fp-border)}.fp-layers-header{color:var(--fp-text-dim);text-transform:uppercase;letter-spacing:.5px;flex:none;padding:8px 12px;font-size:11px}.fp-layers-empty{color:var(--fp-text-dim);text-align:center;padding:16px 12px}.fp-layers-list{flex:auto;min-height:0;margin:0;padding:4px;list-style:none;overflow-y:auto}.fp-layer-item{height:28px;color:var(--fp-text);cursor:default;-webkit-user-select:none;user-select:none;border-top:2px solid #0000;border-bottom:2px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:0 6px;display:flex}.fp-layer-item:hover{background:var(--fp-bg-hover)}.fp-layer-item-selected,.fp-layer-item-selected:hover{background:var(--fp-accent-soft);color:var(--fp-accent)}.fp-layer-item-hidden .fp-layer-item-icon,.fp-layer-item-hidden .fp-layer-item-name{opacity:.4}.fp-layer-item-drop-above{border-top-color:var(--fp-accent)}.fp-layer-item-drop-below{border-bottom-color:var(--fp-accent)}.fp-layer-item-icon{color:var(--fp-text-dim);flex:none}.fp-layer-item-selected .fp-layer-item-icon{color:inherit}.fp-layer-item-name{text-overflow:ellipsis;white-space:nowrap;flex:1 1 0;min-width:0;overflow:hidden}.fp-layer-btn{width:22px;height:22px;color:var(--fp-text-dim);border-radius:4px;flex:none;justify-content:center;align-items:center;display:inline-flex}.fp-layer-btn:hover{background:var(--fp-bg-hover)}.fp-layer-btn-active,.fp-layer-btn-active:hover{color:var(--fp-accent)}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.demo-shell{height:100%;position:relative}.demo-upload{z-index:10;cursor:pointer;background:#fff;border:1px solid #d0d0d0;border-radius:4px;padding:4px 12px;position:absolute;top:8px;right:248px}.demo-upload:hover{background:#f0f0f0}body{background:#f5f5f5}@media (prefers-color-scheme:dark){body{background:#181818}}