:root { color-scheme: light dark; --muted: #6b7280; --user: #eef2ff; --error: #b91c1c; }
@media (prefers-color-scheme: dark) { :root { --muted: #9ca3af; --user: #1e293b; --error: #f87171; } }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: Canvas; color: CanvasText; }
main { box-sizing: border-box; display: flex; flex-direction: column; max-width: 46rem; min-height: 100vh; margin: 0 auto; padding: 1rem; }
h1 { margin: 0; font-size: 1.5rem; }
.note { margin: 0 0 1rem; color: var(--muted); font-size: .875rem; }
#log { flex: 1; }
.msg { margin: .5rem 0; padding: .5rem .75rem; border-radius: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.user { background: var(--user); }
.error { color: var(--error); }
.msg small { display: block; margin-top: .25rem; color: var(--muted); }
form { position: sticky; bottom: 0; display: flex; gap: .5rem; padding: .5rem 0; background: Canvas; }
textarea { flex: 1; padding: .5rem; font: inherit; resize: vertical; }
button { padding: 0 1rem; font: inherit; }