:root{--color-background: oklch(.98 .012 80);--color-background-secondary: oklch(.96 .015 75);--color-surface: oklch(.99 .008 80);--color-surface-hover: oklch(.96 .015 75);--color-surface-active: oklch(.94 .018 72);--color-surface-muted: oklch(.96 .015 75);--color-surface-elevated: oklch(.99 .008 80);--color-artifact-bg: #ffffff;--color-border: oklch(.88 .012 70);--color-border-muted: oklch(.91 .01 72);--color-border-subtle: oklch(.94 .008 74);--color-border-strong: oklch(.78 .015 65);--color-accent: oklch(.62 .16 35);--color-accent-hover: oklch(.56 .18 35);--color-accent-muted: oklch(.91 .04 40);--color-accent-soft: oklch(.95 .02 40 / .5);--color-accent-tint: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));--color-focus-ring: oklch(.62 .16 35 / .3);--color-on-accent: oklch(.99 0 0);--color-text-primary: oklch(.22 .025 50);--color-text-secondary: oklch(.5 .02 55);--color-text-muted: oklch(.65 .015 58);--color-text-faint: oklch(.75 .01 60);--color-success: #4f7a52;--color-warning: #b8862a;--color-error: #b04030;--color-mcp: #4a6b8a;--color-toast-success: #4f7a52;--color-toast-error: #b04030;--color-overlay: oklch(.22 .025 50 / .45);--shadow-soft: 0 1px 2px oklch(.3 .02 45 / .04);--shadow-card: 0 1px 2px oklch(.3 .02 45 / .04), 0 4px 16px oklch(.3 .02 45 / .06);--shadow-elevated: 0 2px 4px oklch(.3 .02 45 / .05), 0 12px 32px oklch(.3 .02 45 / .1);--shadow-inset-soft: inset 0 0 0 1px var(--color-border-subtle);--font-display: "Fraunces Variable", "Times New Roman", serif;--font-sans: "Geist Variable", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;--font-size-display-2xl: 64px;--font-size-display-xl: 48px;--font-size-display-lg: 36px;--font-size-display-md: 28px;--font-size-body-lg: 17px;--font-size-body: 15px;--font-size-body-sm: 13px;--font-size-body-xs: 11px;--font-size-mono: 13px;--font-size-mono-sm: 11px;--leading-heading: 1.1;--leading-ui: 1.4;--leading-body: 1.6;--leading-snug: 1.5;--tracking-heading: -.015em;--tracking-tight: -.005em;--tracking-normal: 0;--tracking-wide: .04em;--tracking-label: .08em;--tracking-eyebrow: .18em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 48px;--space-10: 56px;--space-12: 80px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 999px;--size-control-xs: 28px;--size-control-sm: 32px;--size-control-md: 40px;--size-titlebar-height: 64px;--layout-agent-width: 392px;--layout-pipeline-width: 296px;--layout-parity-width: 432px;--duration-fastest: 80ms;--duration-faster: .12s;--duration-fast: .18s;--duration-base: .24s;--ease-out: cubic-bezier(.2, .8, .25, 1);--color-bg-primary: var(--color-background);--color-bg-secondary: var(--color-background-secondary);--color-bg-tertiary: var(--color-surface-active);--space-sm: var(--space-2);--space-md: var(--space-4);--space-lg: var(--space-6);--border-radius: var(--radius-md)}[data-theme=dark]{--color-background: oklch(.18 .01 60);--color-background-secondary: oklch(.21 .012 58);--color-surface: oklch(.23 .014 56);--color-surface-hover: oklch(.27 .016 54);--color-surface-active: oklch(.31 .018 52);--color-surface-muted: oklch(.21 .012 58);--color-surface-elevated: oklch(.25 .015 55);--color-artifact-bg: #1c1c1c;--color-border: oklch(.32 .012 55);--color-border-muted: oklch(.28 .01 56);--color-border-subtle: oklch(.25 .008 58);--color-border-strong: oklch(.42 .014 50);--color-text-primary: oklch(.92 .008 80);--color-text-secondary: oklch(.74 .01 70);--color-text-muted: oklch(.6 .012 65);--color-text-faint: oklch(.5 .012 62);--color-overlay: oklch(.1 .01 60 / .6);--shadow-card: 0 1px 2px oklch(0 0 0 / .4), 0 4px 16px oklch(0 0 0 / .3)}*{margin:0;padding:0;box-sizing:border-box}*:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{display:contents}::selection{background:#c9644233}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.1)}.logo{display:flex;align-items:center;gap:var(--space-md);font-size:24px;font-weight:500}.logo-icon{width:40px;height:40px;background:var(--color-accent);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:#fff}.header-right{display:flex;align-items:center;gap:var(--space-lg);color:var(--color-text-secondary);font-size:14px}.convex-badge{display:flex;align-items:center;gap:var(--space-sm)}.status-dot{width:8px;height:8px;background:var(--color-success);border-radius:50%}.input-section{display:flex;gap:var(--space-md);padding:var(--space-lg)}.source-button{background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius);color:var(--color-text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-sm);font-family:inherit;font-size:14px;transition:background .15s ease}.source-button:hover{background:var(--color-bg-tertiary)}.source-button input[type=file]{display:none}.input-field{flex:1;background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius);color:var(--color-text-primary);font-size:16px;font-family:inherit;transition:border-color .15s ease}.input-field:focus{outline:none;border-color:var(--color-accent)}.input-field::placeholder{color:var(--color-text-secondary)}.generate-button{background:var(--color-accent);border:none;padding:var(--space-md) 40px;border-radius:var(--border-radius);color:#fff;font-size:16px;cursor:pointer;font-weight:500;font-family:inherit;transition:opacity .15s ease}.generate-button:hover:not(:disabled){opacity:.92}.generate-button:disabled{opacity:.4;cursor:not-allowed}.help-text{padding:0 var(--space-lg);display:flex;justify-content:space-between;color:var(--color-text-secondary);font-size:13px;margin-top:-12px;font-family:var(--font-mono)}.main-content{flex:1;display:flex;padding:var(--space-lg);gap:var(--space-lg);overflow:hidden;min-height:0}.sidebar{width:320px;display:flex;flex-direction:column;gap:var(--space-lg);overflow-y:auto}.section{background:var(--color-bg-secondary);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.1)}.section-header{padding:var(--space-md) var(--space-lg);font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--font-mono)}.file-tree{padding:var(--space-md)}.folder,.file{padding:6px var(--space-md);display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-secondary);font-size:14px;font-family:var(--font-mono)}.folder.expanded{color:var(--color-text-primary)}.subfolder{padding-left:var(--space-lg)}.file.indent{padding-left:48px}button.file{background:transparent;border:none;text-align:left;width:100%;cursor:pointer;font-family:inherit;font-size:14px;transition:background .12s ease,color .12s ease}button.file:hover{background:#ffffff0a;color:var(--color-text-primary)}.file.selected,button.file.selected{background:#d977571f;color:var(--color-text-primary);border-left:2px solid var(--color-accent);padding-left:46px}.preview-body{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}.preview-body .preview-iframe{width:100%;height:100%;border:none;background:#fff}.editor-shell{display:flex;flex-direction:column;height:100%;min-height:0;background:#1e1e1e}.editor-toolbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:var(--color-bg-tertiary);flex-shrink:0}.editor-path{font-family:var(--font-mono);font-size:12px;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}.editor-lang{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-secondary);padding:2px 6px;border-radius:3px;background:#ffffff0a}.editor-status{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:2px 8px;border-radius:3px}.editor-status-dirty{background:#f3c96929;color:#f3c969}.editor-status-saved{background:#22c55e24;color:var(--color-success)}.editor-error{padding:8px 14px;font-size:12px;color:#ff7b72;background:#ff7b7214;border-bottom:1px solid rgba(255,123,114,.2);font-family:var(--font-mono);flex-shrink:0}.editor-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--color-text-secondary);padding:32px;background:var(--color-bg-secondary);border-radius:var(--border-radius)}.editor-empty-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:#5b6470;margin-bottom:12px}.editor-footer{padding:6px 14px;font-size:11px;color:var(--color-text-secondary);font-family:var(--font-mono);border-top:1px solid rgba(255,255,255,.06);background:var(--color-bg-tertiary);flex-shrink:0}@media(max-width:900px){.files-workspace-grid{grid-template-columns:1fr!important;grid-auto-rows:auto;overflow-y:auto}}.handoff-button{background:var(--color-bg-tertiary);border:1px solid rgba(255,255,255,.1);padding:var(--space-md);border-radius:var(--border-radius);color:var(--color-text-primary);cursor:pointer;font-size:16px;font-family:inherit;margin:var(--space-md);display:block;width:calc(100% - 2 * var(--space-md));transition:background .15s ease}.handoff-button:hover{background:#c964421a}.center-section{flex:1;display:flex;flex-direction:column;gap:var(--space-lg);min-width:0}.preview-section{flex:1;background:var(--color-bg-secondary);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;min-height:0}.preview-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:var(--space-lg)}.preview-tabs{display:flex;gap:var(--space-lg);margin-left:auto}.tab{color:var(--color-text-secondary);cursor:pointer;font-size:14px;background:none;border:none;font-family:inherit;padding:4px 8px;border-radius:4px}.tab.active{color:var(--color-text-primary)}.tab:hover{background:#ffffff0a}.preview-content{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-md);color:var(--color-text-secondary)}.preview-iframe{flex:1;width:100%;border:none;background:#fff;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.cost-section{background:var(--color-bg-secondary);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.1);padding:var(--space-lg);display:flex;justify-content:space-between;align-items:center}.cost-label{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);font-family:var(--font-mono)}.cost-value{font-size:20px;font-weight:500;font-family:var(--font-mono)}.right-panel{width:280px;display:flex;flex-direction:column;gap:var(--space-lg);overflow-y:auto}.pipeline-item{padding:var(--space-md) var(--space-lg);display:flex;align-items:center;gap:var(--space-md);color:var(--color-text-secondary);font-size:14px}.pipeline-item.active{color:var(--color-text-primary)}.pipeline-dot{width:8px;height:8px;background:var(--color-text-secondary);border-radius:50%;flex-shrink:0}.pipeline-item.active .pipeline-dot{background:var(--color-success)}.pipeline-item.failed .pipeline-dot{background:#ff7b72}.pipeline-item.running .pipeline-dot{background:#f3c969;animation:pipeline-pulse 1s ease-in-out infinite}@keyframes pipeline-pulse{0%,to{opacity:1}50%{opacity:.4}}.parity-section{padding:var(--space-lg)}.parity-status{font-size:24px;font-weight:500;margin-bottom:var(--space-sm);font-family:var(--font-mono)}.parity-subtitle{color:var(--color-text-secondary);font-size:14px;font-family:var(--font-mono)}.tools-item{padding:var(--space-md) var(--space-lg);color:var(--color-text-primary);font-size:14px;cursor:pointer;background:none;border:none;display:block;width:100%;text-align:left;font-family:inherit;transition:background .15s ease}.tools-item:hover{background:#ffffff0a}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.agent-chat-rail{width:248px;flex-shrink:0;display:flex;flex-direction:column;background:var(--color-bg-secondary);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.1);overflow:hidden;min-height:0}.agent-chat-rail-inner{display:flex;flex-direction:column;height:100%;min-height:0}.agent-chat-brand{display:flex;align-items:center;gap:10px;padding:var(--space-md) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.08)}.agent-chat-brand-mark{width:28px;height:28px;border-radius:6px;background:var(--color-accent);color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.5px}.agent-chat-brand-word{font-size:14px;font-weight:500;color:var(--color-text-primary);letter-spacing:-.01em}.agent-chat-section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg) 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-secondary);font-family:var(--font-mono)}.agent-chat-add{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--color-text-secondary);width:20px;height:20px;border-radius:4px;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s ease,color .15s ease}.agent-chat-add:hover{background:#ffffff0f;color:var(--color-text-primary)}.agent-chat-thread-list{flex:1;overflow-y:auto;list-style:none;padding:4px var(--space-sm) var(--space-md);margin:0;display:flex;flex-direction:column;gap:2px;min-height:0}.agent-chat-thread{width:100%;text-align:left;background:transparent;border:none;border-left:2px solid transparent;padding:10px 12px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-family:inherit;color:var(--color-text-secondary);transition:background .15s ease,color .15s ease}.agent-chat-thread:hover{background:#ffffff0a;color:var(--color-text-primary)}.agent-chat-thread.active{background:#c9644214;border-left-color:var(--color-accent);color:var(--color-text-primary)}.agent-chat-thread-title{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.agent-chat-thread-meta{font-size:11px;font-family:var(--font-mono);color:var(--color-text-secondary);letter-spacing:.02em}.agent-chat-composer{border-top:1px solid rgba(255,255,255,.08);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.agent-chat-composer-input{width:100%;resize:none;background:var(--color-bg-tertiary);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--color-text-primary);font-family:inherit;font-size:13px;padding:8px 10px;transition:border-color .15s ease}.agent-chat-composer-input:focus{outline:none;border-color:var(--color-accent)}.agent-chat-composer-input::placeholder{color:var(--color-text-secondary)}.agent-chat-composer-send{align-self:flex-end;background:var(--color-accent);border:none;color:#fff;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:6px 14px;border-radius:4px;cursor:pointer;transition:opacity .15s ease}.agent-chat-composer-send:disabled{opacity:.35;cursor:not-allowed}.agent-chat-composer-send:hover:not(:disabled){opacity:.92}