@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body{color:#18181b;-webkit-font-smoothing:antialiased;background-color:#f4f4f5;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex}.workspace-container{flex:1;width:100%;height:calc(100vh - 64px);display:flex;overflow:hidden}.panel-column{background-color:#fff;flex-direction:column;flex:1;height:100%;display:flex;position:relative;overflow:hidden}.panel-column.left{border-right:1px solid #e5e7eb}.panel-header{z-index:10;background-color:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:48px;min-height:48px;padding:0 16px;display:flex}.panel-title-group{align-items:center;gap:12px;display:flex}.panel-title{color:#09090b;letter-spacing:-.01em;font-size:15px;font-weight:700}.header-actions{align-items:center;gap:10px;display:flex}.target-selector{background-color:#f4f4f5;border:1px solid #e4e4e7;border-radius:6px;align-items:center;padding:2px;display:flex}.target-btn{color:#71717a;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:3px 8px;font-size:11.5px;font-weight:500;transition:all .15s}.target-btn:hover{color:#18181b}.target-btn.active{color:#4f46e5;background-color:#fff;font-weight:600;box-shadow:0 1px 2px #0000000d}.status-badge{border-radius:9999px;align-items:center;gap:6px;padding:2.5px 10px;font-size:12px;font-weight:600;line-height:1;transition:all .2s;display:inline-flex}.status-badge .dot{border-radius:50%;width:7px;height:7px}.status-badge.running{color:#15803d;background-color:#dcfce7}.status-badge.running .dot{background-color:#22c55e;animation:2s ease-in-out infinite pulse-dot;box-shadow:0 0 0 2px #22c55e33}.status-badge.error{color:#b91c1c;background-color:#fee2e2}.status-badge.error .dot{background-color:#ef4444}.status-badge.compiling{color:#b45309;background-color:#fef3c7}.status-badge.compiling .dot{background-color:#f59e0b}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.copy-btn{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;align-items:center;gap:6px;padding:4px 12px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.copy-btn:hover{color:#111827;background-color:#f9fafb;border-color:#9ca3af}.copy-btn.copied{color:#16a34a;background-color:#f0fdf4;border-color:#86efac}.preview-container{background-color:#000;border-bottom:1px solid #27272a;width:100%;height:48%;min-height:240px;position:relative;overflow:hidden}.preview-container canvas{display:block;width:100%!important;height:100%!important}.preview-overlay-error{color:#f87171;z-index:20;backdrop-filter:blur(4px);background-color:#18181beb;flex-direction:column;justify-content:center;padding:24px;font-family:Fira Code,monospace;font-size:12.5px;line-height:1.5;display:flex;position:absolute;inset:0;overflow:auto}.preview-overlay-error .error-title{color:#ef4444;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;font-weight:700;display:flex}.editor-container{background-color:#18181b;flex:1;width:100%;height:52%;position:relative;overflow:hidden}.editor-container .cm-editor{width:100%;height:100%}.editor-container .cm-scroller{font-family:Fira Code,JetBrains Mono,Menlo,Monaco,monospace;overflow:auto}.bottom-bar{z-index:30;background-color:#fff;border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:64px;min-height:64px;padding:0 20px;display:flex}.examples-group{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.examples-label{color:#4b5563;font-size:13.5px;font-weight:500}.example-pills{align-items:center;gap:8px;display:flex}.pill-btn{color:#1f2937;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .15s}.pill-btn:hover{background-color:#f9fafb;border-color:#9ca3af}.pill-btn.active{color:#111827;background-color:#f3f4f6;border-color:#6b7280;font-weight:600}.action-group{align-items:center;gap:16px;display:flex}.auto-convert-toggle{color:#4b5563;cursor:pointer;user-select:none;align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.auto-convert-toggle input[type=checkbox]{accent-color:#6366f1;cursor:pointer;width:15px;height:15px}.convert-btn{color:#fff;cursor:pointer;background-color:#6366f1;border:none;border-radius:8px;align-items:center;gap:8px;padding:9px 22px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex;box-shadow:0 1px 3px #6366f14d}.convert-btn:hover{background-color:#4f46e5;transform:translateY(-.5px);box-shadow:0 2px 6px #4f46e566}.convert-btn:active{transform:translateY(0)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#18181b}::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#52525b}