.live-editor{--le-font-body: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;--le-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--le-bg-base: #f4f4f8;--le-bg-surface: #ffffff;--le-bg-elevated: #eeeef4;--le-bg-hover: #e6e6f0;--le-bg-code: #1a1a2e;--le-text-primary: #12121e;--le-text-secondary: #52526e;--le-text-tertiary: #9090aa;--le-text-ghost: #b8b8cc;--le-text-code: #c8d3f5;--le-accent: #0ea5a0;--le-accent-dim: rgba(14, 165, 160, .08);--le-accent-border: rgba(14, 165, 160, .22);--le-border: #e6e6f0;--le-border-strong: #d4d4e0;--le-radius-sm: 6px;--le-radius-md: 10px;--le-radius-lg: 14px;--le-space-xs: 4px;--le-space-sm: 8px;--le-space-md: 16px;--le-space-lg: 24px;font-family:var(--le-font-body);font-size:13px;color:var(--le-text-primary);background:var(--le-bg-surface);border:1px solid var(--le-border);border-radius:var(--le-radius-lg);overflow:hidden;display:flex;flex-direction:column;max-height:85vh}[data-theme=dark] .live-editor{--le-bg-base: #0c0c12;--le-bg-surface: #131320;--le-bg-elevated: #1a1a2f;--le-bg-hover: #20203a;--le-text-primary: #eeeef4;--le-text-secondary: #8d8da8;--le-text-tertiary: #525270;--le-text-ghost: #3a3a52;--le-border: #20203a;--le-border-strong: #2a2a42}.le-header{display:flex;align-items:center;gap:var(--le-space-sm);padding:0 var(--le-space-md);height:44px;border-bottom:1px solid var(--le-border);background:var(--le-bg-surface);flex-shrink:0}.le-tabs{display:flex;gap:2px}.le-tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--le-radius-sm);border:none;background:transparent;font-family:var(--le-font-body);font-size:13px;font-weight:500;color:var(--le-text-secondary);cursor:pointer;transition:background .12s,color .12s}.le-tab:hover{background:var(--le-bg-elevated);color:var(--le-text-primary)}.le-tab--active{background:var(--le-accent-dim);color:var(--le-accent);border:1px solid var(--le-accent-border)}.le-title{font-size:13px;font-weight:500;color:var(--le-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:var(--le-space-sm);flex:1;min-width:0}.le-toolbar{display:flex;align-items:center;gap:4px;margin-left:auto}.le-toolbar-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--le-radius-sm);border:1px solid var(--le-border);background:var(--le-bg-elevated);font-family:var(--le-font-body);font-size:12px;font-weight:500;color:var(--le-text-secondary);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.le-toolbar-btn:hover{background:var(--le-bg-hover);color:var(--le-text-primary);border-color:var(--le-border-strong)}.le-toolbar-btn--reset:hover{color:#d94f4f;border-color:#d94f4f4d;background:#d94f4f0d}.le-body{display:flex;flex:1;min-height:0;overflow:hidden}.le-divider{width:1px;background:var(--le-border);flex-shrink:0}.le-editor-panel{width:45%;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.le-code-editor{flex:1;display:flex;overflow:hidden;position:relative}.le-code-highlight{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:var(--le-space-md);background:var(--le-bg-code);font-family:var(--le-font-mono);font-size:13px;line-height:1.7;color:var(--le-text-code);white-space:pre-wrap;word-wrap:break-word;overflow:auto;pointer-events:none;-moz-tab-size:2;tab-size:2}.le-code-textarea{position:relative;flex:1;width:100%;height:100%;padding:var(--le-space-md);background:transparent;color:transparent;caret-color:#e0e0f0;font-family:var(--le-font-mono);font-size:13px;line-height:1.7;border:none;resize:none;outline:none;-moz-tab-size:2;tab-size:2;white-space:pre-wrap;word-wrap:break-word;z-index:1}.le-hl-tag{color:#ff7b72}.le-hl-attr{color:#79c0ff}.le-hl-string{color:#a5d6ff}.le-hl-comment{color:#525270;font-style:italic}.le-hl-prop{color:#d2a8ff}.le-hl-num{color:#ffa657}.le-hl-color{color:#7ee787}.le-inspector-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}.le-inspector-scroll{flex:1;overflow-y:auto}.le-inspector-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--le-space-lg);gap:var(--le-space-sm);min-height:200px}.le-inspector-empty-icon{color:var(--le-text-ghost);opacity:.6}.le-inspector-empty-title{font-size:14px;font-weight:600;color:var(--le-text-secondary)}.le-inspector-empty-text{font-size:12px;color:var(--le-text-tertiary);text-align:center;line-height:1.5;max-width:200px}.le-inspector-breadcrumb{display:flex;align-items:center;justify-content:space-between;padding:8px var(--le-space-md);border-bottom:1px solid var(--le-border);background:var(--le-accent-dim);gap:var(--le-space-sm)}.le-inspector-breadcrumb-row{display:flex;align-items:center;gap:4px;overflow:hidden;min-width:0}.le-inspector-element-tag{font-family:var(--le-font-mono);font-size:12px;font-weight:600;color:var(--le-accent);flex-shrink:0}.le-inspector-element-classes{font-family:var(--le-font-mono);font-size:11px;color:var(--le-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.le-inspector-deselect{width:22px;height:22px;border-radius:var(--le-radius-sm);border:none;background:transparent;color:var(--le-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .1s,color .1s}.le-inspector-deselect:hover{background:var(--le-bg-elevated);color:var(--le-text-primary)}.le-inspector-path-full{padding:4px var(--le-space-md);font-family:var(--le-font-mono);font-size:10px;color:var(--le-text-ghost);border-bottom:1px solid var(--le-border)}.le-inspector-section{border-bottom:1px solid var(--le-border)}.le-inspector-section-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px var(--le-space-md);background:transparent;border:none;cursor:pointer;font-family:var(--le-font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--le-text-tertiary);transition:background .1s}.le-inspector-section-header:hover{background:var(--le-bg-elevated);color:var(--le-text-secondary)}.le-inspector-section-body{padding:0 var(--le-space-md) var(--le-space-sm)}.le-inspector-row{display:flex;align-items:center;gap:var(--le-space-sm);min-height:28px;border-left:2px solid transparent;padding:3px 0 3px 2px}.le-inspector-row--modified{border-left-color:var(--le-accent)}.le-inspector-label{font-size:12px;font-weight:500;color:var(--le-text-tertiary);width:80px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.le-inspector-value{flex:1;min-width:0}.le-inspector-text-input{width:100%;padding:3px 6px;border:1px solid transparent;border-radius:4px;background:transparent;font-family:var(--le-font-mono);font-size:12px;color:var(--le-text-primary);outline:none;transition:border-color .1s,background .1s}.le-inspector-text-input:hover{background:var(--le-bg-elevated)}.le-inspector-text-input:focus{border-color:var(--le-accent);background:var(--le-bg-surface)}.le-inspector-select{width:100%;padding:3px 20px 3px 6px;border:1px solid transparent;border-radius:4px;background:transparent;font-family:var(--le-font-body);font-size:12px;color:var(--le-text-primary);cursor:pointer;outline:none;transition:border-color .1s,background .1s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239090aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}.le-inspector-select:hover{background-color:var(--le-bg-elevated)}.le-inspector-select:focus{border-color:var(--le-accent);background-color:var(--le-bg-surface)}.le-inspector-color{display:flex;align-items:center;gap:6px}.le-inspector-color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--le-border);cursor:pointer;padding:1px;background:var(--le-bg-surface);flex-shrink:0}.le-inspector-color .le-inspector-text-input{flex:1}.le-inspector-row--block{flex-direction:column;align-items:flex-start;gap:6px;padding-top:6px;padding-bottom:4px}.le-shadow-presets{display:flex;gap:4px;flex-wrap:wrap;width:100%}.le-shadow-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;border-radius:var(--le-radius-sm);border:1px solid var(--le-border);background:var(--le-bg-elevated);cursor:pointer;font-family:var(--le-font-mono);font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--le-text-tertiary);transition:background .1s,border-color .1s,color .1s;flex:1;min-width:40px}.le-shadow-preset:hover{background:var(--le-bg-hover);color:var(--le-text-secondary);border-color:var(--le-border-strong)}.le-shadow-preset--active{background:var(--le-accent-dim);border-color:var(--le-accent-border);color:var(--le-accent)}.le-shadow-dot{width:22px;height:22px;border-radius:4px;background:var(--le-bg-surface);border:1px solid var(--le-border);display:block;flex-shrink:0}.le-opacity-row{display:flex;align-items:center;gap:8px;width:100%}.le-inspector-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--le-bg-elevated);outline:none;cursor:pointer}.le-inspector-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--le-accent);cursor:pointer;border:2px solid var(--le-bg-surface);box-shadow:0 1px 3px #0003}.le-inspector-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--le-accent);cursor:pointer;border:2px solid var(--le-bg-surface);box-shadow:0 1px 3px #0003}.le-opacity-value{font-family:var(--le-font-mono);font-size:11px;font-weight:600;color:var(--le-accent);width:32px;text-align:right;flex-shrink:0}.le-preview-pane{flex:1;min-width:0;overflow:hidden;background:#fff}.le-preview-iframe{width:100%;height:100%;border:none;display:block}.le-controller-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}.le-controller-scroll{flex:1;overflow-y:auto;padding:var(--le-space-sm) 0}.le-control-group{border-bottom:1px solid var(--le-border)}.le-group-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px var(--le-space-md);background:transparent;border:none;cursor:pointer;font-family:var(--le-font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--le-text-tertiary);transition:background .1s}.le-group-header:hover{background:var(--le-bg-elevated);color:var(--le-text-secondary)}.le-group-chevron{font-size:10px;transition:transform .15s}.le-group-chevron--closed{transform:rotate(-90deg)}.le-group-body{padding:4px var(--le-space-md) var(--le-space-sm);display:flex;flex-direction:column;gap:var(--le-space-sm)}.le-control{display:flex;flex-direction:column;gap:5px}.le-control--toggle{flex-direction:row;align-items:center;justify-content:space-between}.le-control-header{display:flex;align-items:center;justify-content:space-between;gap:var(--le-space-sm)}.le-control-label{font-size:13px;font-weight:500;color:var(--le-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.le-control-value{font-size:12px;font-weight:600;color:var(--le-accent);flex-shrink:0}.le-control-value--mono{font-family:var(--le-font-mono);font-size:11px}.le-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--le-bg-elevated);outline:none;cursor:pointer}.le-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--le-accent);cursor:pointer;border:2px solid var(--le-bg-surface);box-shadow:0 1px 4px #0003}.le-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--le-accent);cursor:pointer;border:2px solid var(--le-bg-surface);box-shadow:0 1px 4px #0003}.le-color-row{display:flex;align-items:center;gap:var(--le-space-sm)}.le-color-input{width:36px;height:28px;border-radius:var(--le-radius-sm);border:1px solid var(--le-border);cursor:pointer;padding:2px;background:var(--le-bg-surface);flex-shrink:0}.le-color-text{flex:1;padding:4px 8px;border:1px solid var(--le-border);border-radius:var(--le-radius-sm);background:var(--le-bg-elevated);font-family:var(--le-font-mono);font-size:12px;color:var(--le-text-primary);outline:none}.le-color-text:focus{border-color:var(--le-accent)}.le-select{width:100%;padding:6px 10px;border:1px solid var(--le-border);border-radius:var(--le-radius-sm);background:var(--le-bg-elevated);font-family:var(--le-font-body);font-size:13px;color:var(--le-text-primary);cursor:pointer;outline:none}.le-select:focus{border-color:var(--le-accent)}.le-toggle{position:relative;width:36px;height:20px;border-radius:10px;background:var(--le-bg-elevated);border:1px solid var(--le-border);cursor:pointer;transition:background .2s,border-color .2s;flex-shrink:0}.le-toggle--on{background:var(--le-accent);border-color:var(--le-accent)}.le-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--le-bg-surface);box-shadow:0 1px 3px #0003;transition:transform .2s}.le-toggle--on .le-toggle-thumb{transform:translate(16px)}.le-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--le-border);border-radius:var(--le-radius-sm);overflow:hidden}.le-stepper-btn{width:32px;height:30px;border:none;background:var(--le-bg-elevated);color:var(--le-text-secondary);font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s;flex-shrink:0}.le-stepper-btn:hover:not(:disabled){background:var(--le-bg-hover);color:var(--le-text-primary)}.le-stepper-btn:disabled{opacity:.35;cursor:not-allowed}.le-stepper-value{flex:1;text-align:center;font-family:var(--le-font-mono);font-size:12px;font-weight:600;color:var(--le-accent);padding:0 4px;border-left:1px solid var(--le-border);border-right:1px solid var(--le-border);height:30px;display:flex;align-items:center;justify-content:center;background:var(--le-bg-surface)}.le-css-output{border-top:1px solid var(--le-border);background:var(--le-bg-code);flex-shrink:0;max-height:200px;display:flex;flex-direction:column}.le-css-output-header{display:flex;align-items:center;justify-content:space-between;padding:6px var(--le-space-md);border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--le-font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#c8d3f566;flex-shrink:0}.le-css-copy-btn{padding:2px 8px;border-radius:4px;border:1px solid rgba(200,211,245,.15);background:#c8d3f50f;font-family:var(--le-font-mono);font-size:10px;font-weight:600;color:#c8d3f580;cursor:pointer;transition:background .1s,color .1s;letter-spacing:.5px;text-transform:uppercase}.le-css-copy-btn:hover{background:#c8d3f51f;color:#c8d3f5e6}.le-css-copy-btn--copied{color:#2dd4bf;border-color:#2dd4bf4d;background:#2dd4bf14}.le-css-output-code{flex:1;overflow-y:auto;margin:0;padding:var(--le-space-sm) var(--le-space-md);font-family:var(--le-font-mono);font-size:12px;line-height:1.6;color:var(--le-text-code);white-space:pre}.le-css-output-empty{padding:var(--le-space-md);font-size:12px;color:#c8d3f540;font-style:italic;text-align:center}@media(max-width:768px){.le-body{flex-direction:column}.le-editor-panel{width:100%;max-height:400px}.le-divider{width:100%;height:1px}}