*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f172a;--bg-panel: #1e293b;--bg-editor: #1e293b;--border: #334155;--text: #e2e8f0;--text-muted: #94a3b8;--accent: #6366f1;--accent-hover: #818cf8;--error: #ef4444;--success: #10b981;--header-height: 48px;--tab-height: 36px}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}#app{height:100vh;display:flex;flex-direction:column}.header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0}.header-left{display:flex;align-items:center;gap:12px}.logo{font-size:16px;font-weight:700;color:var(--accent);letter-spacing:-.5px}.logo span{color:var(--text-muted);font-weight:400}.example-select{padding:4px 8px;background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:13px;cursor:pointer}.example-select:focus{outline:none;border-color:var(--accent)}.header-right{display:flex;align-items:center;gap:8px}.btn{padding:5px 12px;font-size:13px;border:1px solid var(--border);border-radius:4px;background:var(--bg-panel);color:var(--text);cursor:pointer;display:flex;align-items:center;gap:4px;transition:border-color .15s}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.panels{flex:1;display:flex;min-height:0}.panel{flex:1;display:flex;flex-direction:column;min-width:0}.panel+.panel{border-left:1px solid var(--border)}.tabs{height:var(--tab-height);display:flex;align-items:center;padding:0 8px;gap:2px;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0}.tab{padding:4px 12px;font-size:12px;color:var(--text-muted);background:none;border:none;border-radius:4px;cursor:pointer;transition:color .15s,background .15s}.tab:hover,.tab.active{color:var(--text);background:var(--bg-panel)}.editor-container{flex:1;overflow:hidden}.editor-container .cm-editor{height:100%}.editor-container .cm-editor .cm-scroller{font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:13px;line-height:1.6}.editor-container .cm-editor.cm-focused{outline:none}.preview-container{flex:1;background:#fff;overflow:hidden}.preview-container iframe{width:100%;height:100%;border:none}.output-container{flex:1;overflow:auto;padding:12px 16px;background:var(--bg-editor)}.output-container pre{font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}.error-banner{padding:8px 16px;background:#ef44441a;border-top:1px solid var(--error);color:var(--error);font-size:13px;font-family:SF Mono,monospace;flex-shrink:0;max-height:120px;overflow-y:auto}.console-container{flex:1;overflow:auto;padding:8px 16px;background:var(--bg-editor)}.console-entry{font-family:SF Mono,monospace;font-size:12px;padding:2px 0;border-bottom:1px solid rgba(51,65,85,.3);color:var(--text-muted)}.console-entry.error{color:var(--error)}.console-entry.warn{color:#f59e0b}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);padding:8px 20px;background:var(--success);color:#fff;border-radius:6px;font-size:13px;animation:toast-in .3s ease,toast-out .3s ease 1.7s forwards;z-index:1000}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}@media (max-width: 768px){.panels{flex-direction:column}.panel+.panel{border-left:none;border-top:1px solid var(--border)}}