*,:after,:before{box-sizing:border-box}:root{color-scheme:light;--surface:#ffffff;--surface-raised:#f6f6f7;--border:#e4e4e7;--text:#18181b;--text-muted:#71717a;--accent:#18181b;--accent-hover:#2b2b31;--accent-contrast:#ffffff;--bubble-user:#1f1f23;--bubble-user-text:#fafafa;--ok:#15803d;--bad:#b91c1c;--focus:#6366f1}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--surface:#0b0b0d;--surface-raised:#151518;--border:#26262b;--text:#ededf0;--text-muted:#8f8f99;--accent:#ededf0;--accent-hover:#ffffff;--accent-contrast:#18181b;--bubble-user:#2a2a31;--bubble-user-text:#fafafa;--ok:#4ade80;--bad:#f87171;--focus:#818cf8}}:root[data-theme=dark]{color-scheme:dark;--surface:#0b0b0d;--surface-raised:#151518;--border:#26262b;--text:#ededf0;--text-muted:#8f8f99;--accent:#ededf0;--accent-hover:#ffffff;--accent-contrast:#18181b;--bubble-user:#2a2a31;--bubble-user-text:#fafafa;--ok:#4ade80;--bad:#f87171;--focus:#818cf8}body,html{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.55;color:var(--text);background:var(--surface)}.shell{display:grid;grid-template-columns:15rem minmax(340px,30rem) 1fr;height:100dvh}@media (max-width:1100px){.shell{grid-template-columns:1fr 1fr}.rail{display:none}}@media (max-width:760px){.shell{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}.rail{display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface-raised);min-width:0}.rail-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600}.rail-head button{padding:.25rem .625rem;font-size:12px}.rail-list{flex:1 1;overflow-y:auto;padding:.5rem;gap:.25rem}.rail-item,.rail-list{display:flex;flex-direction:column}.rail-item{align-items:flex-start;gap:.125rem;width:100%;text-align:left;background:transparent;color:var(--text);border:1px solid transparent;padding:.5rem .625rem}.rail-item:hover{background:var(--surface)}.rail-item.selected .rail-item-title,.rail-item:hover .rail-item-title{color:var(--text)}.rail-item.selected{background:var(--surface);border-color:var(--border)}.rail-item-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.turn{display:flex;flex-direction:column;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.turn:last-of-type{border-bottom:0}.bubble.error{border-color:var(--bad);color:var(--bad)}.versions{font:inherit;font-size:12px;padding:.25rem .5rem;border-radius:.375rem;border:1px solid var(--border);background:var(--surface);color:var(--text);max-width:12rem}.chat{display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0;min-height:0}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}.chat-title{font-weight:600}.chat-log{flex:1 1;min-height:0;overflow-y:auto;padding:1rem;gap:.75rem}.chat-form,.chat-log{display:flex;flex-direction:column}.chat-form{gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);position:relative}.composer{display:flex;gap:.5rem;align-items:flex-end}.chat-form textarea{flex:1 1;resize:none;min-height:2.5rem;max-height:10rem;padding:.5rem .75rem;font:inherit;line-height:1.5;color:inherit;background:var(--surface-raised);border:1px solid var(--border);border-radius:.625rem}.chat-form textarea:focus-visible{outline:2px solid var(--focus);outline-offset:-1px}.bubble{padding:.625rem .875rem;border-radius:.625rem;background:var(--surface-raised);border:1px solid var(--border);white-space:pre-wrap}.bubble.user{background:var(--bubble-user);border-color:transparent;color:var(--bubble-user-text);align-self:flex-end;max-width:85%}.status{font-size:12px;color:var(--text-muted)}.tools{border:1px solid var(--border);border-radius:.625rem;overflow:hidden}.tools>summary{cursor:pointer;padding:.5rem .75rem;background:var(--surface-raised);font-size:12px;color:var(--text-muted)}.tool-row{display:flex;gap:.5rem;align-items:baseline;padding:.375rem .75rem;border-top:1px solid var(--border);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tool-row .mark{width:1rem;flex:none}.tool-row .mark.ok{color:var(--ok)}.tool-row .mark.bad{color:var(--bad)}.tool-row .detail{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button{font:inherit;padding:.5rem .875rem;border-radius:.5rem;border:1px solid transparent;background:var(--accent);color:var(--accent-contrast);cursor:pointer}button.secondary{background:transparent;border-color:var(--border);color:var(--text)}button.secondary:hover:not(:disabled){background:var(--surface-raised)}.button-primary:hover:not(:disabled){background:var(--accent-hover)}button:disabled{opacity:.55;cursor:not-allowed}.preview{display:flex;flex-direction:column;min-width:0;min-height:0}.preview-bar{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-bottom:1px solid var(--border)}.preview-url{flex:1 1;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-empty{flex:1 1;display:grid;place-items:center;color:var(--text-muted);padding:2rem;text-align:center}.auth-shell{display:grid;place-items:center;min-height:100dvh;padding:2rem}.auth-shell h1{font-size:1.5rem;margin:0 0 1.5rem}.live{display:flex;gap:.625rem;align-items:flex-start;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.625rem;background:var(--surface-raised)}.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--focus);margin-top:.45rem;flex:none;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}.live-body{display:flex;flex-direction:column;gap:.125rem;min-width:0}.live-phase{font-size:13px}.live-tool{font-size:11px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.segmented{display:flex;border:1px solid var(--border);border-radius:.5rem;overflow:hidden;flex:none}.segmented button{background:transparent;color:var(--text-muted);border:0;border-radius:0;padding:.375rem .5rem;display:grid;place-items:center}.segmented button:hover{color:var(--text)}.segmented button.selected{background:var(--surface-raised);color:var(--text)}.preview-bar button{display:inline-flex;align-items:center;gap:.375rem}.button-label{font-size:12px}.trace{flex:1 1;display:grid;grid-template-columns:minmax(200px,18rem) 1fr;min-height:0}@media (max-width:900px){.trace{grid-template-columns:1fr;grid-template-rows:12rem 1fr}}.trace-steps{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;background:var(--surface-raised)}.trace-run{width:100%;margin-bottom:.5rem;max-width:none}.trace-empty{padding:.5rem}.trace-step{display:grid;grid-template-columns:2rem 1fr;grid-template-areas:"seq label" "seq phase";gap:0 .5rem;text-align:left;background:transparent;color:var(--text);border:1px solid transparent;padding:.375rem .5rem;border-radius:.375rem}.trace-step.selected,.trace-step:hover{background:var(--surface)}.trace-step.selected{border-color:var(--border)}.trace-step.failed .trace-label{color:var(--bad)}.trace-seq{grid-area:seq;font-size:11px;color:var(--text-muted)}.trace-label,.trace-seq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.trace-label{grid-area:label;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trace-phase{grid-area:phase;font-size:11px;color:var(--text-muted)}.trace-detail{overflow-y:auto;min-height:0;padding:1rem;min-width:0}.trace-head{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}.trace-head p{margin:0}.trace-section{border:1px solid var(--border);border-radius:.5rem;margin-bottom:.625rem}.trace-section>summary{cursor:pointer;padding:.5rem .75rem;font-size:12px;color:var(--text-muted)}.trace-section pre{margin:0;padding:.75rem;border-top:1px solid var(--border);overflow-x:auto;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:30rem;overflow-y:auto}.preview-stage{flex:1 1;display:flex;justify-content:center;align-items:flex-start;background:var(--surface-raised);overflow:auto;min-height:0}.preview-stage.desktop{padding:0}.preview-stage.mobile,.preview-stage.tablet{padding:1.5rem}.device{position:relative;display:flex;flex-direction:column;flex:none;background:#0c0c0f}.device.desktop{width:100%;height:100%;background:transparent}.device.mobile,.device.tablet{width:max-content;border-radius:2.25rem;padding:.75rem;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 1.5rem 3rem rgba(0,0,0,.35)}.device.mobile{border-radius:2.75rem;padding:.625rem}.device-screen{position:relative;overflow:hidden;background:#fff;flex:none}.device.desktop .device-screen{flex:1 1;width:100%;height:100%}.device.tablet .device-screen{border-radius:1.5rem}.device.mobile .device-screen{border-radius:2.15rem}.preview-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;display:block}.preview-frame.loading{opacity:0;pointer-events:none}.device.desktop .preview-frame{border-radius:0}.device.tablet .preview-frame{border-radius:1.5rem}.device.mobile .preview-frame{border-radius:2.15rem}.device-notch{top:.625rem;width:7.5rem;height:1.6rem;background:#0c0c0f;border-radius:0 0 1rem 1rem}.device-camera,.device-notch{position:absolute;left:50%;transform:translateX(-50%);z-index:2}.device-camera{top:.3rem;width:.375rem;height:.375rem;background:#2c2c33;border-radius:50%}.device-home{position:absolute;bottom:.28rem;left:50%;transform:translateX(-50%);width:8rem;height:.25rem;background:rgba(255,255,255,.45);border-radius:999px;z-index:2}.device.tablet .device-home{width:10rem}.trace-controls{display:flex;flex-direction:column;gap:.375rem;padding:.5rem;border-bottom:1px solid var(--border);flex:none}.trace-search{font:inherit;font-size:12px;padding:.375rem .5rem;border-radius:.375rem;border:1px solid var(--border);background:var(--surface);color:var(--text);width:100%}.trace-list{flex:1 1;min-height:0;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:1px}.trace-count{font-size:11px;color:var(--text-muted);padding:0 .125rem}.bubble.user.queued{opacity:.5;display:flex;align-items:center;gap:.625rem}.queued-skip{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border-radius:999px;background:rgba(255,255,255,.18);color:var(--bubble-user-text);border:0}.queued-skip:hover:not(:disabled){background:rgba(255,255,255,.35)}.spinner{animation:spin .9s linear infinite;flex:none}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.skeleton{border-radius:.625rem;background:linear-gradient(90deg,var(--surface-raised) 25%,var(--border) 37%,var(--surface-raised) 63%);background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}.skeleton-turn{display:flex;flex-direction:column;gap:.75rem}.bubble-shape{height:2.5rem}.bubble-shape.user{align-self:flex-end}.preview-loading{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem;text-align:center}.preview-skeleton{width:min(28rem,70%);aspect-ratio:4/3;border-radius:1rem}.preview-loading .status{display:inline-flex;align-items:center;gap:.375rem;margin:0}.rail-item-title{display:flex;align-items:center;gap:.375rem}.rail-item-title .spinner{width:12px;height:12px;opacity:.7}.open-link,.preview-url{display:inline-flex;align-items:center;gap:.375rem}.open-link{text-decoration:none;color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.375rem .625rem;font-size:12px}.open-link:hover{background:var(--surface-raised)}.brand{align-items:center;gap:.5rem;font-weight:600;letter-spacing:-.01em}.brand,.brand-mark{display:inline-flex}.brand-mark{color:var(--accent)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;flex:none;border-radius:.625rem;line-height:0}.icon-button svg{display:block}.rail-head .icon-button{width:1.75rem;height:1.75rem;background:transparent;color:var(--text-muted);border:1px solid var(--border)}.rail-head .icon-button:hover{background:var(--surface);color:var(--text)}.icon-button.send{background:var(--accent);color:var(--accent-contrast);border:0}.icon-button.send:hover:not(:disabled){background:var(--accent-hover)}.icon-button.send:disabled{opacity:.4}.page-skeleton{width:min(26rem,80%);display:flex;flex-direction:column;gap:.625rem;padding:1rem;border:1px solid var(--border);border-radius:.875rem;background:var(--surface)}.page-skeleton .bar{height:.75rem;border-radius:.375rem}.page-skeleton .hero{height:5rem;border-radius:.625rem}.skeleton-row{display:flex;gap:.625rem}.skeleton-row .card{flex:1 1;height:2.75rem;border-radius:.5rem}.loading-phrase{animation:rise .4s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.loading-phrase{animation:none}}.auth-shell .auth-tagline{color:var(--text-muted);margin:-1rem 0 1.5rem}.account{border-top:1px solid var(--border);padding:.625rem .75rem;display:flex;flex-direction:column;gap:.5rem}.account-identity{display:flex;align-items:center;gap:.5rem;min-width:0}.account-name{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segmented.theme{align-self:stretch}.segmented.theme button{flex:1 1}.chat-form.dragging:after{content:"Drop to attach";position:absolute;inset:.375rem;display:grid;place-items:center;border:2px dashed var(--focus);border-radius:.75rem;background:color-mix(in srgb,var(--surface) 90%,transparent);font-size:13px;color:var(--text-muted);pointer-events:none}.attachments{display:flex;flex-wrap:wrap;gap:.375rem}.attachment{display:inline-flex;align-items:center;gap:.375rem;max-width:14rem;padding:.25rem .375rem .25rem .5rem;font-size:12px;background:var(--surface-raised);border:1px solid var(--border);border-radius:.5rem}.attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment button{padding:0;width:1.125rem;height:1.125rem;display:grid;place-items:center;background:transparent;color:var(--text-muted);border:0}.attachment button:hover{background:transparent;color:var(--text)}.attachment button svg{width:12px;height:12px}.attachment.image{border-left:2px solid var(--ok)}.attachment.video{border-left:2px solid var(--focus)}.attachment.pending,.icon-button.attach{color:var(--text-muted)}.icon-button.attach{background:transparent;border:1px solid var(--border)}.icon-button.attach:hover:not(:disabled){background:var(--surface-raised);color:var(--text)}.empty-shell{display:grid;place-items:center;height:100dvh;padding:2rem}.empty-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;max-width:26rem}.empty-card .brand-mark{color:var(--accent)}.empty-card h1{font-size:1.5rem;margin:.5rem 0 0;letter-spacing:-.02em}.empty-card p{margin:0;color:var(--text-muted)}.empty-card .button-primary{margin-top:.5rem;display:inline-flex;align-items:center;gap:.375rem}.empty-shell .account{border:0;position:fixed;bottom:0;left:0;width:15rem}.empty-recent{display:flex;flex-direction:column;gap:.25rem;width:100%;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}.empty-recent .rail-item{border-color:var(--border)}