*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-0:#0a0a0a;--bg-1:#0f0f0f;--bg-2:#141414;--bg-3:#1a1a1a;--border:#1f1f1f;--border-2:#2a2a2a;--text-0:#fafafa;--text-1:#d4d4d4;--text-2:#8a8a8a;--text-3:#525252;--accent:#fafafa;--accent-muted:#a3a3a3;--select:#f97316;--select-muted:#f9731614;--hover:#f97316;--hover-muted:#f973160d;--font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;--font-mono:"Geist Mono", "SF Mono", "Menlo", "Monaco", monospace}.editor-root{background:var(--bg-0);width:100vw;height:100vh;color:var(--text-1);font-family:var(--font-sans);font-feature-settings:"cv11", "ss01";letter-spacing:-.005em;flex-direction:column;display:flex}.editor-header{background:var(--bg-0);border-bottom:1px solid var(--border);z-index:200;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 20px;display:flex;position:relative;overflow:visible}.editor-logo{color:var(--text-0);letter-spacing:-.015em;font-size:13px;font-weight:600;font-family:var(--font-sans);align-items:center;gap:8px;display:flex}.editor-logo svg{color:var(--text-1)}.editor-logo-text{color:var(--text-2);font-weight:500}.editor-logo-sep{color:var(--text-3);margin:0 -2px;font-size:14px;font-weight:400}.editor-name-btn{color:var(--text-0);font-size:13px;font-weight:600;font-family:var(--font-sans);letter-spacing:-.015em;cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:5px;padding:2px 5px;transition:background .1s,color .1s;display:flex}.editor-name-btn:hover{background:var(--bg-3)}.editor-name-pencil{color:var(--text-3);opacity:0;flex-shrink:0;transition:opacity .15s}.editor-name-btn:hover .editor-name-pencil{opacity:1}.editor-name-input{border:none;border-bottom:1px solid var(--border-2);color:var(--text-0);font-size:13px;font-weight:600;font-family:var(--font-sans);letter-spacing:-.015em;background:0 0;border-radius:0;outline:none;width:140px;padding:2px 0;transition:border-color .15s}.editor-name-input:focus{border-bottom-color:var(--text-2)}.editor-header-actions{align-items:center;gap:4px;display:flex}.editor-action-group{align-items:center;gap:2px;display:flex}.editor-action-divider{background:var(--border-2);flex-shrink:0;width:1px;height:16px;margin:0 6px}.editor-ghost-btn{color:var(--text-3);cursor:pointer;letter-spacing:-.005em;white-space:nowrap;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;gap:5px;padding:5px 9px;font-family:inherit;font-size:12px;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.editor-ghost-btn:hover:not(:disabled){background:var(--bg-2);color:var(--text-1)}.editor-ghost-btn:disabled{opacity:.3;cursor:default}.editor-inspect-btn--active{color:#fb923c;background:#f973161a}.editor-inspect-btn--active:hover{color:#fdba74;background:#f9731626}.editor-save-wrap{display:inline-flex;position:relative}.editor-save-btn{background:var(--bg-2);color:var(--text-3);cursor:default;letter-spacing:-.005em;white-space:nowrap;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.editor-save-btn--active{color:#111;cursor:pointer;background:#f5f5f5;border-color:#e5e5e5}.editor-save-btn--active:hover{background:#fff}.editor-save-btn--saving{opacity:.6;cursor:default}.editor-save-dot{background:#f59e0b;border-radius:50%;flex-shrink:0;width:5px;height:5px}.editor-more-wrap{position:relative}.editor-more-menu{background:var(--bg-2);border:1px solid var(--border-2);z-index:9999;border-radius:8px;min-width:200px;padding:4px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #0006}.editor-more-item{text-align:left;width:100%;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;font-family:inherit;font-size:12.5px;transition:all .1s;display:flex}.editor-more-item:hover{background:var(--bg-3);color:var(--text-0)}.editor-recent-item--active{color:var(--text-1)}.editor-recent-label{color:inherit;font-weight:500}.editor-recent-time{color:var(--text-3);flex-shrink:0;font-size:11px}.editor-share-btn{color:var(--text-3);cursor:pointer;letter-spacing:-.005em;background:0 0;border:none;border-radius:6px;align-items:center;gap:5px;padding:5px 9px;font-family:inherit;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.editor-share-btn:hover{background:var(--bg-2);color:var(--text-1)}.editor-share-btn--copied{color:#4ade80}.editor-body{flex:1;display:flex;overflow:hidden}.editor-panel{border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.editor-panel:last-child{border-right:none}.editor-panel--code{background:var(--bg-1)}.editor-panel--preview{background:var(--bg-0);flex:1;min-width:0}.editor-panel--properties{background:var(--bg-1);overflow-y:auto}.panel-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-0);background:var(--bg-0);border-bottom:1px solid var(--border);font-size:10px;font-weight:500;font-family:var(--font-mono);flex-shrink:0;justify-content:space-between;align-items:center;min-height:34px;padding:8px 12px 8px 16px;display:flex}.panel-label-group,.panel-label-title{align-items:center;gap:6px;display:inline-flex}.panel-collapse-btn{width:22px;height:22px;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;transition:all .12s;display:inline-flex}.panel-collapse-btn:hover{background:var(--bg-2);color:var(--text-0)}.panel-resizer{cursor:col-resize;z-index:5;background:0 0;flex:0 0 4px;transition:background .15s;position:relative}.panel-resizer:after{content:"";background:var(--border);transition:background .15s;position:absolute;inset:0 1px}.panel-resizer:hover:after,.panel-resizer:active:after{background:var(--select)}.panel-rail{background:var(--bg-1);border-right:1px solid var(--border);color:var(--text-2);cursor:pointer;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;border-left:none;flex-direction:column;flex:0 0 32px;justify-content:flex-start;align-items:center;gap:10px;padding-top:14px;font-size:10px;font-weight:500;transition:all .15s;display:flex}.panel-rail:hover{background:var(--bg-2);color:var(--text-0)}.panel-rail--right{border-right:none;border-left:1px solid var(--border)}.panel-rail span{writing-mode:vertical-rl;-webkit-user-select:none;user-select:none;transform:rotate(180deg)}.kbd-tooltip{z-index:100;border:1px solid var(--border-2);color:var(--text-1);font-size:11px;font-family:var(--font-sans);white-space:nowrap;pointer-events:none;background:#0a0a0a;border-radius:6px;align-items:center;gap:8px;padding:5px 8px;animation:.12s ease-out kbd-fade;display:inline-flex;position:fixed;box-shadow:0 4px 12px #0006}.kbd-tooltip--bottom{transform:translate(-50%)}.kbd-tooltip--top{transform:translate(-50%,-100%)}.kbd-tooltip--right{transform:translateY(-50%)}.kbd-tooltip--left{transform:translate(-100%,-50%)}.kbd-tooltip kbd{background:var(--bg-2);border:1px solid var(--border-2);min-width:18px;height:18px;font-family:var(--font-mono);color:var(--text-0);border-radius:4px;justify-content:center;align-items:center;padding:0 5px;font-size:10.5px;display:inline-flex}@keyframes kbd-fade{0%{opacity:0;transform-origin:50%}to{opacity:1}}.code-panel{background:var(--bg-1);flex:1;overflow:hidden}.preview-panel{background-color:#fafafa;background-image:linear-gradient(90deg,#00000008 1px,#0000 1px),linear-gradient(#00000008 1px,#0000 1px);background-size:24px 24px;flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-scroll{isolation:isolate;flex:1;overflow:auto;transform:translateZ(0)}.preview-relative{cursor:default;min-height:100%;position:relative}.preview-relative--select,.preview-relative--select *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='%23f97316' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l7.5 18 2.5-8 8-2.5L3 3z'/></svg>") 3 3,pointer!important}.preview-mount{z-index:0;color:#111;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;position:relative}.preview-mount>*{box-sizing:border-box;width:100%}.preview-highlight{pointer-events:none;z-index:10;outline:1.5px solid var(--select);outline-offset:0;background:var(--select-muted);transition:all 80ms;position:absolute}.preview-hover{pointer-events:none;z-index:9;outline:1.5px solid var(--select);background:var(--hover-muted);position:absolute}.preview-badge{pointer-events:none;z-index:11;font-family:var(--font-mono);letter-spacing:0;color:#fff;white-space:nowrap;border-top-left-radius:3px;border-top-right-radius:3px;padding:2px 6px;font-size:10.5px;font-weight:500;line-height:1.4;position:absolute;transform:translateY(-100%)}.preview-badge--select,.preview-badge--hover{background:var(--select)}.preview-error{background:var(--bg-2);color:#f87171;font-size:13px;font-family:var(--font-mono);border:1px solid #3a1f1f;border-radius:8px;margin:20px;padding:24px}.preview-error strong{text-transform:uppercase;letter-spacing:.1em;color:#fca5a5;margin-bottom:8px;font-size:12px;display:block}.preview-error pre{background:var(--bg-0);white-space:pre-wrap;word-break:break-word;color:#fecaca;border-radius:6px;padding:12px;font-size:12px;line-height:1.6;overflow-x:auto}.props-empty{text-align:center;height:100%;color:var(--text-3);flex-direction:column;justify-content:center;align-items:center;padding:32px 24px;display:flex}.props-empty svg{opacity:.9;margin-bottom:20px}.props-empty-title{font-size:13px;font-weight:600;color:var(--text-1)!important;margin-bottom:6px!important;line-height:1.4!important}.props-empty-sub{color:var(--text-3)!important;font-size:12px!important;line-height:1.6!important}.props-empty-icon{color:var(--text-1);background:var(--bg-2);border:1px solid var(--border-2);border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:14px;font-size:20px;display:flex}.props-empty p{color:var(--text-1);max-width:220px;font-size:12.5px;line-height:1.6}.props-empty p strong{color:var(--text-0);font-weight:500}.props-panel{padding:16px}.props-tag-badge{font-size:11px;font-family:var(--font-mono);background:var(--bg-2);color:var(--text-0);border:1px solid var(--border-2);letter-spacing:-.01em;border-radius:4px;margin-bottom:18px;padding:3px 8px;display:inline-block}.props-section{margin-bottom:22px}.props-section-title{text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);border-bottom:1px solid var(--border);font-size:10px;font-weight:500;font-family:var(--font-mono);margin-bottom:10px;padding-bottom:6px}.prop-field{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.prop-label{color:var(--text-2);white-space:nowrap;letter-spacing:-.005em;min-width:78px;font-size:12px}.prop-text-input{background:var(--bg-2);border:1px solid var(--border-2);color:var(--text-0);font-size:12px;font-family:var(--font-mono);letter-spacing:-.01em;border-radius:6px;outline:none;flex:1;padding:6px 9px;transition:all .15s}.prop-text-input:focus{border-color:var(--text-2);background:var(--bg-3)}.prop-text-input::placeholder{color:var(--text-3)}.prop-text-input--hex{flex:0 0 80px}.prop-color-wrapper{flex:1;align-items:center;gap:6px;display:flex}.prop-color-input{border:1px solid var(--border-2);background:var(--bg-2);cursor:pointer;border-radius:6px;flex-shrink:0;width:28px;height:28px;padding:2px}.prop-select{background:var(--bg-2);border:1px solid var(--border-2);color:var(--text-0);cursor:pointer;letter-spacing:-.005em;border-radius:6px;outline:none;flex:1;padding:6px 9px;font-family:inherit;font-size:12px;transition:all .15s}.prop-select:focus{border-color:var(--text-2);background:var(--bg-3)}.code-panel .monaco-editor,.code-panel .monaco-editor .margin,.code-panel .monaco-editor-background{background-color:var(--bg-1)!important}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border:2px solid var(--bg-0);background:#2a2a2a;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}