:root{--bg:#fff;--bg-soft:#f7f8fa;--bg-elev:#fff;--border:#e4e7ec;--border-strong:#d0d5dd;--text:#1f2329;--text-soft:#646a73;--text-muted:#8f959e;--accent:#5b4dff;--accent-soft:#5b4dff1a;--danger:#e5484d;--danger-soft:#e5484d1a;--ok:#18a058;--warn:#f5a623;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0}body{overflow:hidden}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.toolbar{background:var(--bg-elev);border-bottom:1px solid var(--border);z-index:20;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex;position:relative}.toolbar-left,.toolbar-right{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.logo{color:var(--text);white-space:nowrap;align-items:center;gap:6px;font-size:16px;font-weight:700;display:flex}.logo-mark{color:var(--accent);font-size:20px}.btn{border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text);white-space:nowrap;border-radius:6px;padding:6px 12px;font-size:13px;transition:all .15s}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{opacity:.9;color:#fff}.btn.small{padding:3px 8px;font-size:12px}.examples-dropdown{position:relative}.dropdown-menu{background:var(--bg-elev);border:1px solid var(--border);z-index:30;border-radius:8px;flex-direction:column;min-width:220px;margin-top:4px;padding:4px;display:flex;position:absolute;top:100%;left:0;box-shadow:0 8px 24px #0000001f}.dropdown-item{text-align:left;background:0 0;border:none;border-radius:6px;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;display:flex}.dropdown-item:hover{background:var(--bg-soft)}.dropdown-item strong{color:var(--text);font-size:13px}.dropdown-item span{color:var(--text-muted);font-size:11px}.seg-group{align-items:center;gap:6px;display:flex}.seg-group>label{color:var(--text-muted);font-size:12px}.seg-group select{border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--text);border-radius:6px;padding:5px 8px;font-size:13px}.seg{border:1px solid var(--border-strong);border-radius:6px;display:inline-flex;overflow:hidden}.seg button{background:var(--bg-elev);color:var(--text-soft);border:none;padding:5px 10px;font-size:12px}.seg button.active{background:var(--accent-soft);color:var(--accent)}.toast{background:var(--text);color:#fff;white-space:nowrap;border-radius:6px;padding:6px 14px;font-size:12px;animation:.2s toast-in;position:absolute;bottom:-40px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.workspace{flex:1;min-height:0;display:flex;overflow:hidden}.pane{flex-direction:column;flex:1;min-width:0;display:flex}.editor-pane{border-right:1px solid var(--border)}.pane-header{color:var(--text-soft);border-bottom:1px solid var(--border);background:var(--bg-soft);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;font-weight:600;display:flex}.pane-hint{color:var(--text-muted);font-size:11px;font-weight:400}.pane-body{flex:1;min-height:0;position:relative;overflow:auto}.editor,.editor .cm-editor{height:100%}.editor .cm-scroller{padding:8px 0}.preview{background:var(--bg);flex-direction:column;height:100%;display:flex}.preview-canvas{flex:1;justify-content:center;align-items:center;min-height:0;padding:24px;display:flex;overflow:auto}.preview-canvas svg{max-width:100%;height:auto}.preview-canvas:empty:before{content:"在左侧输入代码";color:var(--text-muted)}.standard-output{white-space:pre-wrap;word-break:break-word;background:var(--bg-soft);color:var(--text);border-radius:6px;margin:0;padding:12px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:13px}.error-panel{border-top:1px solid var(--border);background:#fef2f2;flex-direction:column;gap:4px;max-height:35%;padding:8px 12px;display:flex;overflow:auto}.error-item{color:#9f1239;align-items:flex-start;gap:8px;font-size:12px;display:flex}.error-item.render-error pre{white-space:pre-wrap;margin:0;font-family:ui-monospace,monospace;font-size:11px}.error-tag{background:var(--danger);color:#fff;border-radius:4px;flex-shrink:0;padding:1px 6px;font-size:11px;font-weight:600}.source-output{border-top:1px solid var(--border);background:var(--bg-soft);flex-direction:column;flex-shrink:0;height:200px;display:flex}.source-header{color:var(--text-soft);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:6px 12px;font-size:12px;display:flex}.source-output pre{white-space:pre-wrap;color:var(--text);flex:1;margin:0;padding:10px 12px;font-family:JetBrains Mono,Fira Code,ui-monospace,monospace;font-size:12px;overflow:auto}