:root{--ide-bg:#fff;--ide-surface:#fafafa;--ide-border:#e0e0e0;--ide-text:#000;--ide-text-muted:#777;--ide-text-faint:#bbb;--ide-accent:#000;--ide-code-bg:#fafafa;--ide-gutter:#ccc;--ide-font:"Times New Roman","Times",Georgia,serif;--ide-mono:"SF Mono","Cascadia Mono","Menlo",monospace}.ide-root{background:var(--ide-bg);height:100vh;color:var(--ide-text);font-family:var(--ide-font);flex-direction:column;display:flex;overflow:hidden}.ide-loading-screen{background:var(--ide-bg);height:100vh;font-family:var(--ide-font);color:var(--ide-text);justify-content:center;align-items:center;display:flex}.ide-loading-content{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.ide-loading-spinner{width:36px;height:36px;position:relative}.ide-spinner-ring{border:2px solid var(--ide-border);border-top-color:var(--ide-text);border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}.ide-spinner-inner{border-top-color:var(--ide-text-muted);top:5px;bottom:5px;left:5px;right:5px}.ide-loading-title{color:var(--ide-text);font-size:20px;font-weight:400;font-family:var(--ide-font);letter-spacing:.02em}.ide-loading-prompt{text-align:center}.ide-loading-phrase{color:var(--ide-text);font-size:16px;font-style:italic;font-family:var(--ide-font);letter-spacing:.02em;display:block}.ide-loading-progress-container{text-align:center;width:240px}.ide-loading-progress-bar{background:var(--ide-border);width:100%;height:2px;overflow:hidden}.ide-loading-progress-fill{background:var(--ide-text);height:100%;transition:width .3s}.ide-loading-progress-text{color:var(--ide-text-muted);letter-spacing:.05em;text-transform:uppercase;margin-top:8px;font-size:11px;display:block}.ide-loading-stream-preview{background:var(--ide-code-bg);border:1px solid var(--ide-border);width:480px;max-height:120px;font-family:var(--ide-mono);color:var(--ide-text-muted);text-align:left;white-space:pre-wrap;padding:12px 16px;font-size:10px;line-height:1.5;overflow:hidden;-webkit-mask-image:linear-gradient(#000 50%,transparent 100%);mask-image:linear-gradient(#000 50%,transparent 100%)}.ide-loading-stream-preview pre{font:inherit;color:inherit;margin:0}.ide-header{border-bottom:1px solid var(--ide-border);background:var(--ide-bg);flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.ide-header-left{align-items:center;gap:12px;display:flex}.ide-back-btn{border:1px solid var(--ide-border);cursor:pointer;width:28px;height:28px;color:var(--ide-text-muted);background:0 0;justify-content:center;align-items:center;transition:all .15s;display:flex}.ide-back-btn:hover{color:var(--ide-text);border-color:var(--ide-text)}.ide-header-title{align-items:center;gap:10px;display:flex}.ide-project-name{color:var(--ide-text);letter-spacing:.02em;font-size:14px;font-weight:400}.ide-generating-badge{color:var(--ide-text-muted);background:var(--ide-surface);border:1px solid var(--ide-border);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:4px;padding:2px 8px;font-size:10px;display:inline-flex}.ide-header-center{align-items:center;display:flex}.ide-view-toggle{gap:2px;display:flex}.ide-view-btn{color:var(--ide-text-muted);cursor:pointer;font-size:12px;font-family:var(--ide-font);letter-spacing:.03em;text-transform:uppercase;background:0 0;border:1px solid transparent;align-items:center;gap:5px;padding:5px 12px;transition:all .15s;display:flex}.ide-view-btn:hover{color:var(--ide-text)}.ide-view-btn.active{color:var(--ide-text);border-color:var(--ide-text);background:var(--ide-surface)}.ide-header-right{align-items:center;gap:6px;display:flex}.ide-action-btn{border:1px solid var(--ide-border);cursor:pointer;width:28px;height:28px;color:var(--ide-text-muted);background:0 0;justify-content:center;align-items:center;transition:all .15s;display:flex}.ide-action-btn:hover{color:var(--ide-text);border-color:var(--ide-text)}.ide-action-btn:disabled{opacity:.3;cursor:not-allowed}.ide-body{flex:1;display:flex;overflow:hidden}.ide-editor-panel{border-right:1px solid var(--ide-border);background:var(--ide-bg);flex-direction:column;min-width:0;display:flex;overflow:hidden}.ide-tabs-bar{border-bottom:1px solid var(--ide-border);background:var(--ide-bg);align-items:center;height:36px;padding:0 8px;display:flex}.ide-tabs{align-items:center;gap:0;height:100%;display:flex}.ide-tab{height:100%;color:var(--ide-text-muted);cursor:pointer;font-size:12px;font-family:var(--ide-font);letter-spacing:.02em;background:0 0;border:none;border-bottom:2px solid transparent;align-items:center;gap:6px;padding:0 14px;transition:all .15s;display:flex}.ide-tab:hover{color:var(--ide-text)}.ide-tab.active{color:var(--ide-text);border-bottom-color:var(--ide-text)}.ide-tab-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.ide-tab-action-btn{cursor:pointer;width:24px;height:24px;color:var(--ide-text-muted);background:0 0;border:1px solid transparent;justify-content:center;align-items:center;transition:all .15s;display:flex}.ide-tab-action-btn:hover{color:var(--ide-text);border-color:var(--ide-border)}.ide-code-area{background:var(--ide-code-bg);flex:1;display:flex;overflow:auto}.ide-line-numbers{text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--ide-gutter);font-family:var(--ide-mono);border-right:1px solid var(--ide-border);flex-direction:column;min-width:48px;padding:12px 12px 12px 16px;font-size:12px;line-height:1.6;display:flex}.ide-code-content{font-family:var(--ide-mono);color:var(--ide-text);white-space:pre-wrap;word-break:break-word;background:0 0;border:none;flex:1;margin:0;padding:12px 16px;font-size:12px;line-height:1.6}.ide-cursor{color:var(--ide-text)}.ide-splitter{background:var(--ide-border);flex-shrink:0;width:1px}.ide-preview-panel{background:#fff;flex-direction:column;min-width:0;display:flex;overflow:hidden}.ide-preview-panel.expanded{z-index:100;position:fixed;top:0;bottom:0;left:0;right:0}.ide-preview-header{border-bottom:1px solid var(--ide-border);background:var(--ide-bg);flex-shrink:0;align-items:center;gap:8px;height:36px;padding:0 12px;display:flex}.ide-preview-dots{gap:6px;display:flex}.ide-preview-dots .dot{border:1px solid var(--ide-border);border-radius:50%;width:10px;height:10px}.ide-preview-dots .dot.red{background:#000}.ide-preview-dots .dot.yellow{background:#999}.ide-preview-dots .dot.green{background:#ccc}.ide-preview-url{text-align:center;color:var(--ide-text-muted);background:var(--ide-surface);border:1px solid var(--ide-border);font-size:11px;font-family:var(--ide-mono);letter-spacing:.02em;flex:1;padding:3px 12px}.ide-preview-actions{gap:4px;display:flex}.ide-preview-frame{background:#fff;border:none;flex:1;width:100%}.browse-root{background:var(--ide-bg);height:100vh;color:var(--ide-text);font-family:var(--ide-font);flex-direction:column;display:flex;overflow:hidden}.browse-header{border-bottom:1px solid var(--ide-border);background:var(--ide-bg);flex-shrink:0;align-items:center;gap:8px;height:44px;padding:0 12px;display:flex}.browse-header-left,.browse-header-right{flex-shrink:0;align-items:center;gap:4px;display:flex}.browse-nav-btn{cursor:pointer;width:30px;height:30px;color:var(--ide-text-muted);background:0 0;border:1px solid transparent;justify-content:center;align-items:center;transition:all .15s;display:flex}.browse-nav-btn:hover{color:var(--ide-text);border-color:var(--ide-border)}.browse-nav-btn:disabled{opacity:.3;cursor:not-allowed}.browse-url-bar{background:var(--ide-surface);border:1px solid var(--ide-border);font-family:var(--ide-mono);letter-spacing:.02em;white-space:nowrap;flex:1;align-items:center;gap:0;padding:5px 14px;font-size:12px;display:flex;overflow:hidden}.browse-url-text{color:var(--ide-text-muted)}.browse-url-input{color:var(--ide-text);font-family:inherit;font-size:inherit;background:0 0;border:none;outline:none;flex:1;min-width:0;margin:0;padding:0}.browse-url-loading{color:var(--ide-text-muted);margin-left:8px;font-size:8px}.browse-viewport{background:#fff;flex:1;overflow:hidden}.browse-frame{background:#fff;border:none;width:100%;height:100%}@media (max-width:768px){.ide-body{flex-direction:column}.ide-editor-panel{border-right:none;border-bottom:1px solid var(--ide-border);max-height:40%}.ide-header-center{display:none}.ide-loading-stream-preview{width:100%;max-width:320px}}