:root { font-family: ui-sans-serif, system-ui, sans-serif; color: #dce5ef; background: #0b1016; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1100px; padding: 24px; }
.product-header, .observer-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow, .runtime-meta, .scope-note { color: #8fa1b4; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
h1 { margin: 4px 0 0; }
.scope-note { max-width: 34rem; text-align: right; }
.connect-card, .observer-shell { margin-top: 24px; border: 1px solid #263445; border-radius: 14px; background: #111923; padding: 20px; }
.connect-card { display: grid; gap: 14px; }
label { display: grid; gap: 6px; }
label.checkbox { display: flex; align-items: center; }
input, textarea, button { font: inherit; }
input, textarea { width: 100%; border: 1px solid #34485f; border-radius: 8px; background: #0b1118; color: inherit; padding: 10px 12px; }
button { border: 0; border-radius: 8px; padding: 9px 13px; cursor: pointer; }
button.primary { background: #4f8cff; color: #fff; }
button.secondary { background: #253448; color: #dce5ef; }
button.danger { background: #a33e4e; color: #fff; }
.runtime-identity { display: grid; gap: 4px; }
.connection-state, .capability-bar { border-radius: 999px; padding: 6px 10px; background: #1b2938; color: #a9bdd1; }
.connection-state.connected { color: #8ce0aa; }
.capability-bar { margin: 18px 0; display: inline-block; font-size: .86rem; }
.transcript { display: grid; gap: 12px; }
.cell { border-left: 3px solid #40546b; background: #0d151e; border-radius: 6px; padding: 12px 14px; }
.cell.kind-assistant { border-color: #5f8fff; }
.cell.kind-user { border-color: #4db98a; }
.cell.kind-diff { border-color: #c69a4b; }
.cell.kind-approval, .cell.kind-mcp { border-color: #c078d4; }
.cell.kind-subagent { border-color: #68b6c8; }
.cell.state-failed { border-color: #d65c68; }
.cell-title { margin: 0 0 8px; font-size: .82rem; color: #aebed0; text-transform: uppercase; letter-spacing: .06em; }
.plain-body, .markdown-code { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.55 ui-monospace, SFMono-Regular, monospace; }
.markdown-paragraph { margin: .4em 0; white-space: pre-wrap; }
.markdown-heading { margin: .5em 0; }
.markdown-list { margin: .4em 0; }
.request-actions, .runtime-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.runtime-controls .composer { flex: 1 1 100%; }
.observer-error { color: #ff9ca8; }
@media (prefers-color-scheme: light) {
:root { color: #17212c; background: #f5f7fa; }
.connect-card, .observer-shell { background: #fff; border-color: #d9e0e8; }
input, textarea, .cell { background: #f8fafc; color: #17212c; border-color: #cbd5e0; }
button.secondary { background: #e4ebf3; color: #17212c; }
}