:root {
  color-scheme: dark;
  --bg: #080b0f;
  --panel: #10151c;
  --panel-2: #141a22;
  --panel-3: #0c1117;
  --line: #252d38;
  --line-soft: #1a222c;
  --text: #f2f4f7;
  --muted: #8d98a6;
  --muted-2: #b8c1cc;
  --green: #65dca8;
  --green-bg: #163a2d;
  --purple-bg: #2a2147;
  --amber: #efc36c;
  --red: #ff9898;
  --blue: #91bbff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: radial-gradient(circle at 78% -12%, rgba(86, 138, 112, .11), transparent 34rem), var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(31px, 4.3vw, 54px); line-height: 1.03; letter-spacing: -.052em; }
h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.035em; }
.subtle { color: var(--muted); font-size: 12px; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; padding: 0 14px; color: var(--text); background: transparent; text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; transition: 150ms ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .5; transform: none; }
.button-primary { border-color: #58bb92; background: var(--green); color: #071d15; }
.button-primary:hover { background: #83ebbd; }
.button-secondary { border-color: var(--line); background: var(--panel); }
.button-secondary:hover, .button-quiet:hover { border-color: #3c4857; background: var(--panel-2); }
.button-quiet { color: var(--muted-2); }
.button-danger { border-color: #64303a; background: #3b1d23; color: #ffb6b6; }
.icon-button { width: 27px; height: 27px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { background: var(--panel-2); color: var(--text); }
.status-pill, .badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted-2); white-space: nowrap; font-size: 10px; font-weight: 760; }
.status-pill { min-height: 30px; padding: 0 11px; }
.badge { min-height: 25px; padding: 0 9px; }
.status-dot { width: 7px; height: 7px; border-radius: 99px; background: #6f7884; box-shadow: 0 0 0 3px rgba(111,120,132,.12); }
.success { border-color: #295b48; background: rgba(22,58,45,.75); color: #9aebc9; }
.success .status-dot { background: var(--green); }
.warning { border-color: #5a4927; background: #352b18; color: #f5d58e; }
.warning .status-dot { background: var(--amber); }
.error { border-color: #64313a; background: #3a1d23; color: #ffadad; }
.error .status-dot { background: var(--red); }
.neutral { color: var(--muted-2); }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(21,27,35,.98), rgba(12,17,23,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.44); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 27px; border: 1px solid #356e58; border-radius: 15px; background: linear-gradient(145deg, #1d4d3a, #102a21); color: #acf2d4; font-size: 15px; font-weight: 800; letter-spacing: -.05em; }
.brand-mark-small { width: 34px; height: 34px; margin: 0; border-radius: 10px; font-size: 10px; }
.login-card h1 { font-size: 36px; }
.login-copy { color: var(--muted-2); line-height: 1.6; }
.login-form { display: grid; gap: 12px; margin-top: 28px; }
.login-form label { color: var(--muted-2); font-size: 12px; font-weight: 700; }
input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #090d12; color: var(--text); padding: 0 13px; }
.form-error { margin: 2px 0 0; color: var(--red); font-size: 12px; }

.topbar { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 24px; border-bottom: 1px solid rgba(37,45,56,.8); background: rgba(8,11,15,.82); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); font-size: 13px; font-weight: 760; cursor: pointer; }
.product-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 11px; background: #0b1016; }
.product-nav-button { min-height: 34px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 0 11px; font-size: 11px; font-weight: 720; cursor: pointer; }
.product-nav-button:hover, .product-nav-button.active { background: var(--panel-2); color: var(--text); }
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: 9px; font-weight: 850; }
.nav-icon.greedy, .project-logo.greedy { border-color: #346951; background: var(--green-bg); color: #9aecbe; }
.nav-icon.alongtail, .project-logo.alongtail { border-color: #504180; background: var(--purple-bg); color: #c9bcff; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.notice { position: fixed; top: 76px; left: 50%; z-index: 30; width: min(92vw, 620px); transform: translateX(-50%); padding: 12px 14px; border: 1px solid #66333c; border-radius: 11px; background: #3c1e24; color: #ffb7b7; box-shadow: 0 18px 40px rgba(0,0,0,.3); font-size: 12px; }
.notice.info { border-color: #315477; background: #172b40; color: #b6d6f5; }

.page { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 62px 0 78px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.hero > div > p:last-child { max-width: 680px; margin: 0; color: var(--muted-2); line-height: 1.65; }
.card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(155deg, var(--panel-2), var(--panel)); box-shadow: 0 15px 45px rgba(0,0,0,.14); }
.runtime-card { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; margin-bottom: 18px; }
.runtime-account { display: flex; align-items: center; gap: 13px; }
.account-avatar { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #34414f; border-radius: 12px; background: #0c1218; color: #dde5ec; font-weight: 800; }
.runtime-account strong { display: block; margin-bottom: 3px; font-size: 13px; }
.runtime-account span { color: var(--muted); font-size: 11px; }
.runtime-actions, .device-login { display: flex; align-items: center; gap: 10px; }
.device-login { flex: 1; justify-content: flex-end; }
.device-login > div { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 10px; }
.device-login code { color: #b3f1d7; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.project-card { min-height: 400px; display: flex; flex-direction: column; padding: 25px; }
.project-card-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 42px; }
.project-logo { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 14px; font-size: 15px; font-weight: 850; }
.project-card p:not(.eyebrow) { color: var(--muted-2); line-height: 1.6; }
.project-stats { margin: auto 0 21px; border-top: 1px solid var(--line-soft); }
.project-stats div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 11px; }
.project-stats dt { color: var(--muted); }.project-stats dd { margin: 0; color: var(--muted-2); text-align: right; }.project-open { width: 100%; }
.activity-card { margin-top: 18px; padding: 0 24px; }
.activity-card summary { min-height: 70px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-size: 13px; font-weight: 730; }
.activity-card summary::-webkit-details-marker { display: none; }.activity-card summary .eyebrow { display: block; }
.event-list { margin: 0; padding: 0; list-style: none; }.event-item { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.event-item strong { display: block; margin-bottom: 3px; font-size: 11px; }.event-item p { margin: 0; color: var(--muted-2); font-size: 11px; }.event-item time { color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }
.events-empty { padding: 32px 0; border-top: 1px solid var(--line-soft); color: var(--muted); text-align: center; font-size: 11px; }

.project-page { height: calc(100vh - 64px); min-height: 650px; display: grid; grid-template-rows: 84px minmax(0, 1fr); }
.project-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: #0a0e13; }
.project-identity { display: flex; align-items: center; gap: 13px; }.project-identity .project-logo { width: 42px; height: 42px; border-radius: 12px; }
.project-identity h1 { margin: 0; font-size: 23px; letter-spacing: -.035em; }.project-heading-actions { display: flex; align-items: center; gap: 9px; }
.workspace-shell { min-height: 0; display: grid; grid-template-columns: 220px minmax(420px, 1fr) minmax(320px, 380px); }
.task-sidebar, .context-pane { min-height: 0; background: #0b1016; }.task-sidebar { border-right: 1px solid var(--line); padding: 15px 12px; overflow-y: auto; }
.new-task { width: 100%; margin-bottom: 20px; }.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 8px; color: var(--muted); font-size: 10px; font-weight: 740; text-transform: uppercase; letter-spacing: .09em; }
.task-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }.task-button { width: 100%; display: block; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted-2); padding: 9px 10px; text-align: left; cursor: pointer; }
.task-button:hover, .task-button.active { border-color: var(--line); background: var(--panel); }.task-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.task-button span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.sidebar-empty { padding: 20px 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.chat-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 58px minmax(0,1fr) auto; background: var(--bg); position: relative; }.chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 15px 9px 18px; border-bottom: 1px solid var(--line-soft); }
.chat-toolbar > div:first-child { min-width: 0; }.chat-toolbar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 730; }.chat-toolbar small { display: block; margin-top: 3px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 8px; }
.model-controls { display: flex; align-items: center; gap: 6px; }.model-controls label { min-height: 33px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); color: var(--muted); padding: 0 7px 0 9px; font-size: 9px; font-weight: 700; }.model-controls select { max-width: 145px; border: 0; outline: 0; background: transparent; color: var(--muted-2); font-size: 10px; font-weight: 680; }.model-controls option { background: var(--panel-2); color: var(--text); }
.transcript { min-height: 0; overflow-y: auto; padding: 28px clamp(18px, 4vw, 54px); scrollbar-color: #36414e transparent; }.transcript-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.transcript-empty .project-logo { margin-bottom: 18px; }.transcript-empty strong { margin-bottom: 8px; font-size: 14px; }.transcript-empty > p { max-width: 390px; margin-bottom: 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.sample-prompts { width: min(100%, 430px); display: grid; gap: 7px; }.sample-prompt { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3); color: var(--muted-2); padding: 9px 12px; text-align: left; font-size: 10px; cursor: pointer; }.sample-prompt:hover { border-color: #3f6957; color: var(--text); }
.message-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0 auto 18px; max-width: 760px; }.message-row.user { align-items: flex-end; }.message-label { padding: 0 4px; color: #707b88; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.message-bubble { max-width: min(90%, 650px); border: 1px solid var(--line); border-radius: 4px 14px 14px; background: #0e131a; color: var(--muted-2); padding: 11px 13px; overflow-wrap: anywhere; font-size: 12px; line-height: 1.58; }.message-row.user .message-bubble { border-color: #315f4d; border-radius: 14px 4px 14px 14px; background: rgba(22,58,45,.74); color: #daf5e8; white-space: pre-wrap; }
.tool-row { max-width: 760px; display: flex; align-items: center; gap: 8px; margin: -5px auto 16px; padding: 0 4px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }.tool-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green); }.tool-row.failed .tool-dot { background: var(--red); }.tool-row.running .tool-dot { background: var(--amber); animation: pulse 1.2s infinite; }
.thinking { display: flex; gap: 5px; }.thinking i { width: 6px; height: 6px; border-radius: 99px; background: #73808d; animation: pulse 1.1s ease-in-out infinite; }.thinking i:nth-child(2) { animation-delay: 140ms; }.thinking i:nth-child(3) { animation-delay: 280ms; } @keyframes pulse { 0%,70%,100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.composer { margin: 0 clamp(15px, 3vw, 40px) 18px; border: 1px solid #2b3540; border-radius: 14px; background: #0b1016; box-shadow: 0 12px 30px rgba(0,0,0,.2); }.composer:focus-within { border-color: #3f745f; box-shadow: 0 0 0 3px rgba(101,220,168,.07); }.composer textarea { width: 100%; min-height: 68px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text); padding: 13px 14px 6px; line-height: 1.5; }.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 8px 8px 14px; }.composer-footer span { color: var(--muted); font-size: 9px; }
.chat-locked { grid-row: 2 / 4; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,11,15,.96); text-align: center; }.chat-locked p { max-width: 330px; color: var(--muted); font-size: 11px; }.lock-orb { width: 48px; height: 48px; margin-bottom: 18px; border: 1px solid #365f50; border-radius: 16px; background: radial-gradient(circle at 35% 30%, #7be5b9, #286b52 25%, #10261e 70%); }

.context-pane { border-left: 1px solid var(--line); overflow: hidden; display: grid; grid-template-rows: auto auto auto minmax(0,1fr); }.context-tabs { display: grid; grid-template-columns: repeat(3,1fr); padding: 10px 10px 0; border-bottom: 1px solid var(--line-soft); }.context-tab { min-height: 34px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 10px; font-weight: 740; cursor: pointer; }.context-tab:hover, .context-tab.active { color: var(--text); }.context-tab.active { border-bottom-color: var(--green); }
.context-filebar { min-height: 40px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); background: var(--panel-3); }.context-filebar code { color: #c9d1da; font-size: 10px; }.context-filebar span { color: var(--muted); font-size: 8px; }
.setup-summary { display: grid; gap: 7px; padding: 12px 13px 0; }.setup-state { display: grid; grid-template-columns: 8px 1fr; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #0d1218; }.setup-state-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 99px; background: var(--green); }.setup-state.error .setup-state-dot { background: var(--red); }.setup-state.warning .setup-state-dot { background: var(--amber); }.setup-state strong { display: block; margin-bottom: 2px; font-size: 9px; }.setup-state span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.setup-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.setup-metrics div { padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0d1218; }.setup-metrics strong { display: block; font-size: 12px; }.setup-metrics span { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.cli-search { display: flex; align-items: center; gap: 7px; padding: 10px 13px 0; }.cli-search input { height: 34px; font-size: 10px; }.cli-search span { color: var(--muted); font-size: 8px; white-space: nowrap; }.document-content { min-height: 0; overflow-y: auto; padding: 15px 16px 28px; scrollbar-color: #35404c transparent; }
.markdown-body { color: var(--muted-2); font-size: 10px; line-height: 1.6; }.markdown-body > :first-child { margin-top: 0; }.markdown-body > :last-child { margin-bottom: 0; }.markdown-body p { margin: 0 0 .9em; }.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--text); line-height: 1.28; letter-spacing: -.015em; }.markdown-body h1 { margin: 0 0 .75em; font-size: 16px; }.markdown-body h2 { margin: 1.35em 0 .6em; padding-bottom: .35em; border-bottom: 1px solid var(--line); font-size: 13px; }.markdown-body h3 { margin: 1.25em 0 .45em; font-size: 11px; }.markdown-body h4 { font-size: 10px; }.markdown-body ul, .markdown-body ol { margin: 0 0 .9em; padding-left: 1.5em; }.markdown-body li + li { margin-top: .35em; }.markdown-body a { color: var(--blue); }.markdown-body strong { color: var(--text); }.markdown-body code { border: 1px solid #2c3641; border-radius: 4px; background: #080c11; color: #d9e1e8; padding: .1em .3em; font-family: ui-monospace, monospace; font-size: .9em; }.markdown-body pre { max-width: 100%; overflow-x: auto; border: 1px solid #29343f; border-radius: 8px; background: #080c11; padding: 10px; }.markdown-body pre code { border: 0; background: transparent; padding: 0; white-space: pre; }.markdown-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }.markdown-body th, .markdown-body td { border: 1px solid #303b47; padding: 5px 7px; text-align: left; }.markdown-body th { background: var(--panel-2); color: var(--text); }

@media (max-width: 1080px) { .workspace-shell { grid-template-columns: 190px minmax(400px,1fr) 320px; }.topbar { grid-template-columns: auto 1fr auto; }.product-nav { justify-self: center; } }
@media (max-width: 880px) { .workspace-shell { grid-template-columns: 180px minmax(0,1fr); }.context-pane { position: fixed; right: 0; top: 148px; bottom: 0; width: min(88vw,380px); z-index: 15; box-shadow: -20px 0 50px rgba(0,0,0,.35); }.project-heading { padding-right: 15px; }.project-heading-actions .button { display: none; }.project-grid { grid-template-columns: 1fr; }.runtime-card { align-items: flex-start; flex-direction: column; }.runtime-actions { width: 100%; justify-content: space-between; } }
@media (max-width: 650px) { .topbar { grid-template-columns: auto 1fr; padding: 0 13px; }.product-nav { display: none; }.topbar-actions { justify-self: end; }.status-pill { display: none; }.page { width: min(100% - 28px, 560px); padding-top: 38px; }.hero { display: block; }.hero .button { margin-top: 20px; }.workspace-shell { grid-template-columns: 1fr; }.task-sidebar { display: none; }.project-heading { height: 76px; }.project-page { grid-template-rows: 76px minmax(0,1fr); height: calc(100vh - 64px); }.chat-toolbar { align-items: flex-start; flex-direction: column; height: auto; }.chat-pane { grid-template-rows: auto minmax(0,1fr) auto; }.model-controls { width: 100%; }.model-controls label { flex: 1; justify-content: space-between; }.model-controls select { max-width: 110px; }.transcript { padding: 22px 14px; }.composer { margin: 0 10px 10px; }.context-pane { top: 140px; }.login-card { padding: 28px 23px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } }