body { font-family: system-ui, sans-serif; max-width: 760px; margin: 0 auto;
       padding: 1rem; background: #0f1115; color: #e8e8e8; }
h1 { font-size: 1.2rem; }
#log { border: 1px solid #2a2f3a; border-radius: 8px; padding: 1rem;
       min-height: 50vh; margin-bottom: 1rem; }
.msg { margin: .6rem 0; }
.user { color: #7bd88f; }
.bot { color: #cbd5e1; }
.status { color: #93c5fd; font-style: italic; }
.steps { font-size: .85rem; margin: .3rem 0; }
.step { color: #93c5fd; font-style: italic; margin: .1rem 0; }
.step.think { color: #c4b5fd; font-style: normal; }
.steps.done .step { color: #64748b; }   /* dim once finished */
.steps.err .step  { color: #ff6b6b; }
.draft { background: #171a21; border: 1px solid #2a2f3a; border-radius: 8px;
         padding: .8rem; }
.opt { margin: .4rem 0; }
.why { color: #a8b0bf; font-size: .85rem; }
.src a { color: #6ea8fe; font-size: .8rem; }
.ungrounded { color: #d88f7b; font-size: .8rem; }
.err { color: #ff6b6b; }
.controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.toolbar { margin-bottom: .8rem; }
input, select, button { background: #171a21; color: #e8e8e8;
  border: 1px solid #2a2f3a; border-radius: 6px; padding: .5rem; }
#prompt { flex: 1; min-width: 240px; }
#num { width: 4rem; }
button { cursor: pointer; }