:root { --ink:#141414; --mute:#6b6b6b; --line:#e2e2e2; --bg:#fff; }
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.wrap { max-width:680px; margin:0 auto; padding:12vh 20px 80px; }
.logo { display:flex; align-items:center; gap:10px; margin:0; font-size:24px; letter-spacing:-.01em; }
.tag { margin:6px 0 28px; color:var(--mute); }

.ask { display:flex; gap:8px; }
#q {
  flex:1; padding:14px 16px; font:inherit; color:inherit;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
#q:focus { outline:none; border-color:var(--ink); }
#go {
  padding:14px 22px; font:inherit; cursor:pointer; color:#fff;
  background:var(--ink); border:1px solid var(--ink); border-radius:10px;
}
#go[disabled] { opacity:.45; cursor:default; }

.thread { margin:0 0 24px; }
.turn { margin-bottom:20px; }
.turn.you { color:var(--mute); }
.turn.you::before { content:"\203A "; }
.answer { white-space:pre-wrap; }
.again { margin-top:16px; padding:8px 14px; font:inherit; cursor:pointer;
  color:var(--mute); background:none; border:1px solid var(--line); border-radius:8px; }
.again:hover { color:var(--ink); border-color:var(--ink); }
.sources { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.sources h2 { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--mute);
  text-transform:uppercase; letter-spacing:.06em; }
.sources a { display:block; padding:3px 0; color:var(--ink); text-decoration:none; }
.sources a:hover { text-decoration:underline; }
.sources span { color:var(--mute); }
.note, .err { color:var(--mute); }
.err { color:#a11; }