:root { color-scheme: light; --ink:#213c34; --muted:#7b8279; --green:#214f40; --lime:#d9ecb9; --paper:#f8f9f5; --line:#e3e7df; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea { font:inherit; } button,a,input,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:wait; opacity:.55; } a { color:inherit; } button { color:inherit; } [hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #91b277; outline-offset:4px; } button:disabled { cursor:not-allowed; } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.boot { min-height:100dvh; display:flex; align-items:center; justify-content:center; gap:14px; color:var(--muted); } .brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; font-size:21px; font-weight:600; letter-spacing:-.8px; line-height:1.2; } .brand-mark { font-size:42px; line-height:1; color:var(--lime); font-weight:400; } .brand-sub { display:block; font-size:8px; font-weight:500; letter-spacing:3.6px; margin-top:7px; opacity:.67; } .brand-dark { color:var(--ink); } .brand-dark .brand-mark { color:var(--ink); }
.auth-layout { min-height:100dvh; display:grid; grid-template-columns:1.06fr 1fr; background:#fff; } .auth-story { position:relative; overflow:hidden; background:#e9efdf; padding:45px 52px; min-height:820px; display:flex; flex-direction:column; } .story-copy { margin-top:92px; position:relative; z-index:1; } .eyebrow { font-size:10px; font-weight:650; letter-spacing:1.9px; color:#798b70; } h1,h2,p { margin:0; } .story-copy h1 { margin:24px 0; font-size:clamp(42px,4.6vw,70px); font-weight:450; line-height:1.08; letter-spacing:-3.3px; } em { font-family:Georgia,"Times New Roman",serif; font-weight:400; } .story-copy p { line-height:1.8; font-size:15px; color:#64705d; } .story-footer { margin-top:auto; padding-top:24px; position:relative; z-index:1; color:#69775f; font-size:11px; display:flex; align-items:center; gap:9px; }
.knowledge-art { height:260px; max-width:480px; position:relative; margin:15px auto 15px; width:100%; } .orbit { position:absolute; border:1px solid #c4d1b8; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-25deg); } .orbit-one { width:350px; height:180px; } .orbit-two { width:210px; height:260px; transform:translate(-50%,-50%) rotate(-40deg); } .art-center { color:var(--green); background:#d4e1c5; border:9px solid #e1ead7; border-radius:50%; width:100px; height:100px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; font-size:68px; } .art-note { position:absolute; z-index:1; background:#fcfdf8; border:1px solid #dce5d2; padding:15px 17px; border-radius:10px; font-size:11px; box-shadow:0 6px 20px #3c553009; display:flex; align-items:center; gap:12px; } .art-note span { font-size:19px; color:#6f885e; } .note-one { top:27px; left:15px; transform:rotate(-5deg); } .note-two { bottom:26px; right:0; transform:rotate(4deg); } .art-dot { position:absolute; width:9px; height:9px; background:#a8bd94; border-radius:50%; } .dot-one { top:56px; right:55px; } .dot-two { bottom:39px; left:85px; }
.auth-panel { padding:70px 40px; display:flex; justify-content:center; align-items:center; } .auth-form-wrap { width:100%; max-width:370px; } .small-label { font-size:10px; letter-spacing:1.7px; color:#93a085; font-weight:600; } .auth-form-wrap h2 { font-size:36px; letter-spacing:-1.4px; font-weight:500; margin:20px 0 12px; } .muted { color:var(--muted); line-height:1.6; } #auth-form { margin-top:36px; } label { display:block; font-size:12px; font-weight:550; margin-bottom:10px; } input { width:100%; border:1px solid #dfe5db; border-radius:7px; padding:14px; background:#fff; color:var(--ink); } input::placeholder { color:#a0a79c; } #auth-form input { margin-bottom:23px; } .password-label { display:flex; align-items:baseline; justify-content:space-between; } .text-button { border:0; background:none; padding:0; color:#4c7255; font-weight:550; font-size:12px; } .text-button:hover { text-decoration:underline; } .button { border:0; border-radius:7px; padding:13px 20px; display:inline-flex; justify-content:center; align-items:center; gap:18px; font-weight:550; font-size:12px; min-height:44px; transition:background .18s,transform .18s; } .primary { background:var(--green); color:#fff; } .primary:hover:not(:disabled) { background:#163e30; transform:translateY(-1px); } .auth-submit { width:100%; justify-content:space-between; margin-top:3px; padding:16px 18px; } .auth-submit span { font-size:19px; } .auth-switch { text-align:center; font-size:12px; color:var(--muted); margin:25px 0 0; } .auth-switch button { margin-left:5px; } .auth-footnote { border-top:1px solid var(--line); margin-top:45px; padding-top:23px; text-align:center; color:#959c90; font-size:11px; } .auth-footnote span { margin-right:7px; } .field-hint { margin-top:-12px; margin-bottom:20px; color:var(--muted); font-size:11px; } .form-error { background:#fff0eb; color:#a04636; font-size:12px; padding:12px; line-height:1.5; border-radius:5px; margin-bottom:16px; }
.workspace { min-height:100dvh; display:flex; } .sidebar { width:255px; position:fixed; inset:0 auto 0 0; background:#173d34; color:#d2dfd2; padding:31px 21px 16px; display:flex; flex-direction:column; } .sidebar .brand { font-size:19px; padding:0 8px; } .sidebar .brand-mark { font-size:37px; } .sidebar .brand-sub { font-size:7px; letter-spacing:3.4px; } .new-task { background:var(--lime); color:#284333; margin:35px 0 31px; width:100%; justify-content:flex-start; gap:12px; } .new-task:hover { background:#e5f4cb; } .new-task span { font-size:21px; font-weight:400; } .nav-label { display:block; font-size:9px; color:#8ca498; letter-spacing:1.7px; font-weight:600; padding-left:12px; } .nav-item { display:flex; width:100%; align-items:center; gap:12px; border:0; background:none; color:#a6bdad; padding:13px 12px; margin-top:5px; border-radius:6px; text-align:left; font-size:12px; } .nav-item.active { color:#e4eedc; background:#ffffff0c; } .nav-item:hover { background:#ffffff12; } .nav-item>span:first-child { font-size:18px; width:19px; text-align:center; } .nav-count { margin-left:auto; font-size:10px; color:#c3d0bc; background:#ffffff0b; border:1px solid #ffffff12; border-radius:4px; padding:2px 5px; } .history-heading { display:flex; align-items:center; justify-content:space-between; margin:32px 0 9px; } .icon-button { border:0; background:none; color:inherit; border-radius:5px; width:32px; height:32px; font-size:20px; display:grid; place-items:center; flex-shrink:0; } .icon-button:hover { background:#ffffff12; } .task-history { flex:1; overflow:auto; min-height:70px; } .history-empty { padding:6px 12px; font-size:11px; line-height:1.6; color:#8aa395; } .history-task { width:100%; border:0; background:transparent; color:#a6bdad; padding:10px 12px; border-radius:5px; display:flex; align-items:center; gap:9px; text-align:left; font-size:11px; } .history-task:hover,.history-task.selected { background:#ffffff0c; color:#edf4e8; } .history-task .history-text { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .history-state { width:5px; height:5px; background:#749c7b; border-radius:50%; flex-shrink:0; } .history-state.running,.history-state.queued { background:#d4dfa5; animation:breathe 1.6s infinite; } .history-state.failed { background:#d3977b; } .sidebar-bottom { padding-top:18px; } .connection { border:1px solid #ffffff12; border-radius:6px; padding:11px; font-size:10px; color:#aec6ac; display:flex; align-items:center; gap:8px; margin-bottom:19px; } .status-dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:#a2bb78; flex-shrink:0; } .account { border-top:1px solid #ffffff14; padding-top:18px; display:flex; gap:10px; align-items:center; } .avatar { width:33px; height:33px; border-radius:50%; background:#3d5a45; color:#e4edce; display:grid; place-items:center; font-size:11px; font-weight:500; } .account-info { min-width:0; flex:1; } .account-info strong { font-size:11px; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account-info>span { font-size:9px; color:#8ca69a; display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main-shell { margin-left:255px; flex:1; min-width:0; min-height:100dvh; display:flex; flex-direction:column; } .topbar { height:77px; border-bottom:1px solid var(--line); padding:0 43px; display:flex; align-items:center; justify-content:space-between; } .breadcrumb { font-size:11px; color:#989e92; display:flex; gap:14px; } .breadcrumb span { color:#bec5b6; } .breadcrumb strong { color:#52674e; font-weight:450; } .workspace-label { display:flex; align-items:center; gap:7px; font-size:10px; color:#89947e; } .workspace-label .status-dot { width:5px; height:5px; } main { width:100%; max-width:1080px; margin:auto; padding:47px 55px 70px; flex:1; } .intro { margin-top:21px; } .intro h1 { font-size:clamp(40px,4.4vw,62px); line-height:1.12; letter-spacing:-2.5px; font-weight:450; margin:20px 0 19px; } .intro h1 em { color:#668359; } .intro p { color:var(--muted); font-size:13px; line-height:1.7; }
.composer { margin-top:34px; border:1px solid #d8e0d0; background:#fff; border-radius:12px; box-shadow:0 7px 25px #274b3110; overflow:hidden; } .composer:focus-within { border-color:#91aa7c; box-shadow:0 0 0 3px #b9d49f1c; } .composer textarea { display:block; resize:vertical; min-height:145px; width:100%; border:0; outline:none; padding:23px 24px 10px; background:none; color:var(--ink); font-size:14px; line-height:1.7; } .composer textarea:focus-visible { outline:none; } .composer textarea::placeholder { color:#9aa28f; } .composer-footer { padding:15px 18px 17px 23px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .source-pill { display:flex; align-items:center; gap:7px; font-size:10px; color:#7e8e70; } .source-pill>span:first-child { font-size:16px; } .composer .primary { min-height:40px; padding:11px 16px; font-size:11px; } .composer .primary>span { font-size:17px; }
.suggestions-heading { display:flex; justify-content:space-between; align-items:center; margin-top:35px; margin-bottom:15px; font-size:9px; letter-spacing:1.3px; color:#8c9781; font-weight:600; } .suggestions-heading>span:last-child { letter-spacing:0; font-weight:400; font-size:10px; color:#a0a895; } .suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; } .suggestion { position:relative; border:1px solid var(--line); background:transparent; text-align:left; padding:18px 16px 22px; border-radius:8px; min-height:159px; transition:background .2s,border-color .2s; } .suggestion:hover { background:#edf2e4; border-color:#c8d7bc; } .suggestion-icon { display:flex; align-items:center; justify-content:center; color:#738b5f; border-radius:6px; background:#eaf0df; width:29px; height:29px; font-size:18px; margin-bottom:15px; } .suggestion strong { display:block; font-size:11px; font-weight:550; margin-bottom:7px; } .suggestion>span:not(.suggestion-icon):not(.suggestion-arrow) { display:block; font-size:10px; line-height:1.7; color:#8a9480; max-width:170px; } .suggestion-arrow { position:absolute; right:14px; top:19px; color:#9caa8a; font-size:15px; } .grounding-note { display:flex; align-items:center; justify-content:center; gap:9px; color:#99a18e; font-size:10px; margin-top:35px; } .grounding-note>span { font-size:18px; color:#849c70; } .workspace-footer { margin:0 43px; border-top:1px solid var(--line); padding:21px 0; font-size:8px; letter-spacing:1.4px; color:#a3ab98; display:flex; justify-content:space-between; } .workspace-footer>span { font-size:10px; letter-spacing:0; color:#a0a896; }
.notice { border:1px solid #e0d9b9; background:#f8f5e9; border-radius:7px; padding:14px 17px; color:#847647; font-size:12px; line-height:1.7; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; gap:15px; } .error-notice { background:#fff1eb; color:#a2513c; border-color:#f1d5c9; } .error-notice .text-button { color:inherit; font-size:20px; }
.result-view { padding-top:15px; } .section-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; } .status-badge { display:inline-block; font-size:10px; padding:6px 10px; border-radius:20px; background:#eaf0e0; color:#6c8357; text-transform:capitalize; } .status-badge.running,.status-badge.queued { background:#efeedc; color:#8d8552; } .status-badge.failed { background:#f6e7df; color:#ad7058; } .result-prompt { font-size:29px; line-height:1.4; font-weight:500; letter-spacing:-.7px; overflow-wrap:anywhere; margin:20px 0 16px; white-space:pre-wrap; } .result-meta { display:flex; gap:10px; color:#99a08e; font-size:10px; margin-bottom:34px; flex-wrap:wrap; } .task-progress { display:flex; align-items:center; gap:18px; border:1px solid var(--line); padding:27px; border-radius:10px; background:#fff; margin:25px 0 30px; } .loading-orbit { display:grid; place-items:center; color:#77985e; font-size:38px; animation:spin 8s linear infinite; } .task-progress strong { font-weight:500; font-size:13px; } .task-progress p { color:var(--muted); font-size:11px; margin-top:8px; line-height:1.6; } .answer-card { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:25px; } .answer-toolbar { border-bottom:1px solid #edf0e8; padding:17px 25px; display:flex; align-items:center; justify-content:space-between; } .answer-toolbar>div { display:flex; align-items:center; gap:9px; } .answer-toolbar strong { font-size:11px; font-weight:500; } .answer-toolbar .text-button { font-size:10px; } .answer-mark { color:#809c66; font-size:22px; } .prose { padding:25px; line-height:1.85; font-size:13px; color:#4d5b48; overflow-wrap:anywhere; } .prose>:first-child { margin-top:0; } .prose>:last-child { margin-bottom:0; } .prose p { margin:0 0 16px; } .prose h1,.prose h2,.prose h3,.prose h4 { font-weight:550; color:#284331; margin:26px 0 12px; line-height:1.4; } .prose h1 { font-size:24px; } .prose h2 { font-size:20px; } .prose h3 { font-size:16px; } .prose ul,.prose ol { padding-left:23px; margin:10px 0 19px; } .prose li { padding-left:4px; margin:6px 0; } .prose code { font-family:"SFMono-Regular",Consolas,monospace; background:#f0f3eb; padding:3px 5px; border-radius:3px; font-size:11px; } .prose pre { background:#f0f3eb; overflow:auto; padding:16px; border-radius:6px; } .prose pre code { padding:0; } .prose table { display:block; overflow:auto; border-collapse:collapse; margin:18px 0; font-size:11px; } .prose td,.prose th { padding:10px; border:1px solid var(--line); text-align:left; } .prose th { background:#f4f6ef; } .prose blockquote { border-left:3px solid #bccda8; margin:20px 0; padding:5px 18px; color:#7a8a6a; } .prose a { color:#426e45; text-underline-offset:3px; } .secondary { border:1px solid #d9e1cf; background:#f2f5eb; color:#657c51; margin-top:7px; } .secondary:hover { background:#e5edd9; } .artifacts-section { margin:30px 0; } .artifacts-section h2 { font-size:12px; font-weight:550; margin-bottom:12px; } .artifacts { display:flex; flex-wrap:wrap; gap:10px; } .artifact { text-decoration:none; border:1px solid var(--line); border-radius:7px; background:#fff; padding:13px 15px; font-size:11px; display:flex; align-items:center; gap:13px; } .artifact:hover { border-color:#a7bb92; } .artifact small { color:var(--muted); font-size:9px; display:block; margin-top:4px; } .artifact strong { font-weight:500; overflow-wrap:anywhere; }
.library-view { padding-top:17px; } .library-view h1 { font-weight:450; font-size:42px; letter-spacing:-1.8px; margin:20px 0 15px; } .title-dot { color:#93a476; } .section-description { color:var(--muted); font-size:12px; line-height:1.7; } .library-toolbar { display:flex; justify-content:space-between; align-items:center; margin:36px 0 17px; gap:20px; } .library-toolbar>span { font-size:11px; color:#7c8b6d; } .search-box { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:6px; background:#fff; margin:0; padding:0 10px; } .search-box span { color:#8c9d7e; font-size:22px; } .search-box input { border:0; padding:10px 2px; border-radius:0; font-size:11px; width:160px; background:none; } .library-table-wrap { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:auto; } .library-table { border-collapse:collapse; width:100%; text-align:left; } .library-table th { font-size:8px; letter-spacing:1px; color:#96a08b; padding:17px 20px; font-weight:550; background:#fafbf7; } .library-table td { font-size:11px; color:#8b9680; padding:18px 20px; border-top:1px solid #edf0e8; } .library-table td:first-child { color:#4c6145; overflow-wrap:anywhere; } .file-icon { display:inline-grid; place-items:center; border:1px solid #dfe8d5; background:#f5f8ee; color:#8a9e75; width:27px; height:31px; border-radius:4px; margin-right:13px; vertical-align:middle; font-size:15px; } .library-note { font-size:10px; color:#99a18e; line-height:1.8; margin-top:20px; } .empty-state { text-align:center; padding:40px; color:var(--muted); font-size:12px; }
.activity-section { border:1px solid var(--line); background:#fff; border-radius:10px; margin:0 0 25px; overflow:hidden; }
.activity-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 21px; border-bottom:1px solid #edf0e8; }
.activity-header h2 { font-size:12px; font-weight:550; }
.activity-connection { color:#8b9680; font-size:10px; text-align:right; }
.activity-connection.is-live { color:#5b8451; }
.activity-connection.is-live::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#89a86e; margin-right:6px; animation:breathe 1.6s infinite; }
.activity-feed { list-style:none; margin:0; padding:17px 20px; max-height:310px; overflow:auto; overscroll-behavior:contain; }
.activity-event { display:flex; gap:12px; align-items:flex-start; padding:10px 0; position:relative; }
.activity-marker { width:7px; height:7px; border-radius:50%; background:#b5c9a6; margin-top:5px; flex-shrink:0; position:relative; }
.activity-event:not(:last-child)::before { content:''; position:absolute; left:3px; top:23px; bottom:-5px; width:1px; background:#e3eadd; }
.activity-event.is-current .activity-marker { background:#7c9d60; box-shadow:0 0 0 4px #eaf1e1; animation:breathe 1.6s infinite; }
.activity-content { flex:1; min-width:0; }
.activity-content strong { display:block; font-size:11px; line-height:1.6; font-weight:500; }
.activity-detail { margin:6px 0 0; color:#819074; font:10px/1.7 "SFMono-Regular",Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; padding:8px 10px; border-radius:5px; background:#f6f8f1; }
.activity-time { color:#9aa58f; font-variant-numeric:tabular-nums; font-size:9px; white-space:nowrap; padding-top:3px; }
.activity-failed .activity-marker { color:#a2513c; background:#f7dfd5; width:13px; height:13px; margin-left:-3px; margin-right:-3px; font-size:10px; text-align:center; line-height:13px; }
.activity-failed .activity-content strong { color:#a2513c; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes breathe { 50% { opacity:.3; } }
@media(min-width:1500px) { main { padding-top:65px; } .intro { margin-top:35px; } }
@media(max-width:1050px) { .sidebar { width:225px; padding-left:15px; padding-right:15px; } .main-shell { margin-left:225px; } main { padding:35px 30px 50px; } .topbar { padding:0 30px; } .workspace-label { display:none; } .auth-story { padding:40px 34px; } .story-copy h1 { letter-spacing:-2px; } .suggestion { padding-left:12px; padding-right:12px; } }
@media(max-width:760px) { .auth-layout { grid-template-columns:1fr; } .auth-story { min-height:0; padding:24px; } .auth-story .brand { font-size:18px; } .story-copy { margin-top:30px; } .story-copy h1 { font-size:38px; margin:17px 0; line-height:1.05; } .story-copy h1 br:nth-of-type(2) { display:none; } .story-copy p,.knowledge-art,.story-footer,.story-copy .eyebrow { display:none; } .auth-panel { padding:35px 25px; } .auth-form-wrap h2 { font-size:30px; } .sidebar { position:static; width:100%; padding:18px; } .workspace { flex-direction:column; } .sidebar .brand { font-size:17px; } .sidebar .brand-mark { font-size:31px; } .sidebar .brand-sub { font-size:6px; margin-top:4px; } .new-task { position:absolute; top:18px; right:18px; width:auto; margin:0; padding:9px 12px; min-height:36px; font-size:10px; gap:7px; } .new-task span { font-size:16px; } .sidebar nav { display:flex; gap:8px; margin-top:18px; } .sidebar nav .nav-label { display:none; } .nav-item { margin:0; width:auto; flex:1; font-size:11px; padding:9px; } .sidebar-bottom { padding:12px 0 0; } .connection,.account-info>span { display:none; } .account { border-top:0; padding:0 6px; } .account .avatar { width:24px; height:24px; font-size:9px; } .account-info { flex:initial; } #logout { margin-left:auto; } .history-heading { margin-top:14px; margin-bottom:3px; } .task-history { max-height:90px; min-height:0; } .history-task { padding:7px 10px; } .history-empty { padding-top:4px; font-size:10px; } .main-shell { margin-left:0; min-height:75dvh; } .topbar { height:51px; padding:0 22px; } main { padding:28px 22px 42px; } .intro { margin-top:6px; } .intro h1 { font-size:43px; } .intro p { font-size:12px; max-width:280px; } .composer { margin-top:26px; } .composer textarea { font-size:13px; padding:19px; min-height:135px; } .composer-footer { padding:12px; gap:7px; } .source-pill { font-size:9px; } .composer .primary { font-size:10px; gap:10px; padding:10px 11px; } .suggestions-heading { margin-top:28px; } .suggestions-heading>span:last-child { display:none; } .suggestions { grid-template-columns:1fr; gap:9px; } .suggestion { min-height:87px; padding:18px 33px 18px 59px; } .suggestion-icon { position:absolute; left:16px; top:24px; margin:0; } .suggestion strong { font-size:12px; } .suggestion>span:not(.suggestion-icon):not(.suggestion-arrow) { max-width:none; } .workspace-footer { margin:0 22px; font-size:7px; padding:18px 0; } .workspace-footer>span { display:none; } .grounding-note { font-size:9px; } .result-prompt { font-size:24px; } .prose { padding:20px; font-size:12px; } .answer-toolbar { padding:14px 20px; } .library-view h1 { font-size:33px; } .library-table th,.library-table td { padding:14px 12px; } .library-table td:first-child { min-width:160px; } .file-icon { display:none; } .search-box input { width:130px; } .library-toolbar { gap:10px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }