@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap";:root{--bg: #0b0d14;--surface: #12151f;--surface2: #181c28;--border: #1f2435;--border2: #2a3048;--accent: #4fc3f7;--accent2: #00b4d8;--text: #cdd6f4;--text-dim: #6b7a9e;--text-muted: #3d4666;--ok: #a6e3a1;--error: #f38ba8;--warn: #f9e2af;--toolbar-h: 44px;--font: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased}.playground{display:flex;flex-direction:column;height:100%;overflow:hidden}.toolbar{display:flex;align-items:center;height:var(--toolbar-h);padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border);gap:4px;flex-shrink:0;position:relative;z-index:100}.toolbar-logo{display:flex;align-items:center;gap:7px;margin-right:8px;flex-shrink:0}.toolbar-logo-mark{width:20px;height:20px;background:var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toolbar-logo-mark svg{display:block}.toolbar-logo-text{font-size:11px;font-weight:600;color:var(--text);letter-spacing:.08em;white-space:nowrap}.toolbar-logo-text span{color:var(--accent)}.toolbar-divider{width:1px;height:20px;background:var(--border2);margin:0 8px;flex-shrink:0}.template-picker{position:relative;flex-shrink:0}.template-trigger{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font);font-size:11px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s;white-space:nowrap;-webkit-user-select:none;user-select:none}.template-trigger:hover,.template-trigger.open{border-color:var(--accent);background:#1a1e2e}.template-trigger-chevron{color:var(--text-dim);transition:transform .15s;display:flex}.template-trigger.open .template-trigger-chevron{transform:rotate(180deg)}.template-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:4px;min-width:200px;box-shadow:0 16px 48px #0009,0 0 0 1px #4fc3f70f;animation:dropIn .12s ease;z-index:200}@keyframes dropIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.template-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;cursor:pointer;transition:background .1s}.template-option:hover{background:#4fc3f712}.template-option.active{background:#4fc3f71a}.template-option-icon{width:28px;height:28px;border-radius:5px;background:var(--border2);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}.template-option-info{flex:1;min-width:0}.template-option-name{font-size:11px;font-weight:600;color:var(--text);letter-spacing:.04em}.template-option-desc{font-size:10px;color:var(--text-dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-option.active .template-option-name{color:var(--accent)}.toolbar-spacer{flex:1}.status-badge{display:flex;align-items:center;gap:6px;padding:0 10px;height:24px;border-radius:12px;font-size:10px;font-weight:500;letter-spacing:.06em;background:var(--surface2);border:1px solid var(--border);flex-shrink:0;transition:all .2s}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-badge.ok{border-color:#a6e3a133;color:var(--ok)}.status-badge.ok .status-dot{background:var(--ok);box-shadow:0 0 6px var(--ok)}.status-badge.error{border-color:#f38ba833;color:var(--error)}.status-badge.error .status-dot{background:var(--error);box-shadow:0 0 6px var(--error)}.status-badge.building{color:var(--text-dim)}.status-badge.building .status-dot{background:var(--accent);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 4px var(--accent)}50%{opacity:.3;box-shadow:none}}.icon-btn{position:relative;width:28px;height:28px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s,border-color .12s;flex-shrink:0}.icon-btn:hover{color:var(--text);background:var(--surface2);border-color:var(--border2)}.icon-btn:hover .tooltip{opacity:1;pointer-events:none;transform:translate(-50%) translateY(0)}.icon-btn.danger:hover{color:var(--error);border-color:#f38ba833}.run-btn{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:var(--accent);border:none;border-radius:6px;color:#0b0d14;font-family:var(--font);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;transition:background .12s,transform .08s;flex-shrink:0;white-space:nowrap}.run-btn:hover{background:#73d4f9}.run-btn:active{transform:scale(.97)}.run-btn-hint{font-size:9px;font-weight:400;opacity:.6;letter-spacing:0}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background:#1e2235;border:1px solid var(--border2);color:var(--text);font-size:10px;padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:300}.icon-btn.copied{color:var(--ok)!important;border-color:#a6e3a133!important}.github-link{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid transparent;color:var(--text-dim);text-decoration:none;transition:color .12s,background .12s,border-color .12s;flex-shrink:0;position:relative}.github-link:hover{color:var(--text);background:var(--surface2);border-color:var(--border2)}.github-link:hover .tooltip{opacity:1;transform:translate(-50%) translateY(0)}.panels{display:flex;flex:1;overflow:hidden}.sidebar{width:190px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:32px;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--text-muted);border-bottom:1px solid var(--border);flex-shrink:0}.sidebar-add-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .12s,background .12s}.sidebar-add-btn:hover{color:var(--text);background:var(--border2)}.file-tree{flex:1;overflow-y:auto;padding:6px 0}.file-tree::-webkit-scrollbar{width:4px}.file-tree::-webkit-scrollbar-track{background:transparent}.file-tree::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.file-tree-dir{display:flex;align-items:center;gap:5px;padding:3px 12px;font-size:11px;color:var(--text-dim);font-weight:500;cursor:default}.file-tree-file{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 24px;font-size:11px;color:var(--text-dim);cursor:pointer;border-radius:0;transition:background .1s,color .1s;border-left:2px solid transparent}.file-tree-file:hover{background:#ffffff08;color:var(--text)}.file-tree-file.active{color:var(--text);background:#4fc3f70f;border-left-color:var(--accent)}.editor-panel{flex:1;min-width:0;border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.editor-tab-bar{display:flex;align-items:center;height:32px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);gap:4px;flex-shrink:0}.editor-tab{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);padding:0 10px;height:24px;border-radius:4px;cursor:pointer;transition:color .1s}.editor-tab:hover{color:var(--text)}.editor-tab.active{background:#4fc3f714;color:var(--accent);border:1px solid rgba(79,195,247,.15)}.editor-tab-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.editor-body{flex:1;overflow:hidden}.preview-panel{flex:1;min-width:0;background:#0d0f18;display:flex;flex-direction:column;overflow:hidden}.preview-tab-bar{display:flex;align-items:center;height:32px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.preview-tab-bar span{font-size:11px;color:var(--text-dim)}.preview-body{flex:1;position:relative;overflow:hidden}.preview-body iframe{width:100%;height:100%;border:none;background:transparent}.error-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b0d14eb;display:flex;align-items:flex-start;padding:20px;overflow:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.error-box{background:#f38ba80f;border:1px solid rgba(243,139,168,.2);border-radius:8px;padding:16px;font-size:12px;color:var(--error);white-space:pre-wrap;word-break:break-word;width:100%;line-height:1.6;-webkit-user-select:text;user-select:text}.preview-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);font-size:11px}