:root { --bg: #fbfbfa; --text: #1d1d1f; --line: rgba(0,0,0,.14); --accent: #5b5bd6; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg: #141416; --text: #ececf0; --line: rgba(255,255,255,.16); } }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 17px; margin: 0; flex: 1; }
button { font: inherit; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
main { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: 16px; padding: 16px; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } }
#face { aspect-ratio: 3 / 4; max-height: 62vh; border-radius: 14px; overflow: hidden; background: #000; }
#canvas:empty { display: none; }
#canvas { margin-top: 12px; min-height: 120px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#transcript { height: 50vh; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#input { margin-top: 8px; border-radius: 12px; overflow: hidden; }
/* the conversation parts read these (Agent OS THEME_VARS); your colours, everywhere */
#talk, #stage { --aos-bg: var(--bg); --aos-text: var(--text); --aos-line: var(--line); --aos-accent: var(--accent); --aos-surface: transparent; }
.dim { opacity: .7; font-size: 13px; }
details { margin-top: 12px; } details input { font: inherit; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: inherit; }