:root{--bg-primary: #1e1e1e;--bg-secondary: #252526;--bg-tertiary: #2d2d30;--border-color: #3e3e42;--text-primary: #cccccc;--text-secondary: #858585;--accent: #007acc;--accent-hover: #005a9e;--success: #4ec9b0;--error: #f48771;--header-height: 48px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden}.playground{height:100vh;display:flex;flex-direction:column}.toolbar{height:var(--header-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px}.toolbar-left h1{font-size:18px;font-weight:600;color:var(--text-primary)}.toolbar-right{display:flex;align-items:center;gap:12px}.btn{padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:13px;text-decoration:none;transition:background .2s;height:32px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}.btn:hover{background:var(--bg-primary)}.btn-primary{background:var(--accent);border-color:var(--accent);font-weight:500}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none;height:40px}.checkbox-label input[type=checkbox]{cursor:pointer;margin:0}.content{flex:1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.editor-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);overflow:hidden}.panel-header{min-height:40px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13px;font-weight:500}#editor{flex:1;overflow:auto}.output-panel{display:flex;flex-direction:column;overflow:hidden}.tabs{display:flex;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);min-height:40px}.tabs-extra,.tab{padding:0 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:13px;transition:all .2s;height:40px;display:flex;align-items:center}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--text-primary);border-bottom-color:var(--accent)}.tab-content{flex:1;position:relative;overflow:hidden}.output{display:none;position:absolute;inset:0;padding:16px;margin:0;overflow:auto;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.output.active{display:block}.output.error{color:var(--error)}.output.success{color:var(--success)}.cm-editor{height:100%;font-size:14px}.cm-scroller{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace}@media(max-width:768px){.content{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.editor-panel{border-right:none;border-bottom:1px solid var(--border-color)}.toolbar-right{gap:8px}.checkbox-label span{display:none}}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}