: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:16px; margin:0 0 32px;
  letter-spacing:-.01em; }
.logo .mark { display:block; height:88px; width:auto; }
.logo .word { font:600 46px/1 Georgia, "Times New Roman", serif; letter-spacing:-.02em; }

@media (max-width:520px) {
  .logo { gap:12px; }
  .logo .mark { height:64px; }
  .logo .word { font-size:34px; }
}

.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 { display:flex; margin-bottom:18px; }
.turn.you { justify-content:flex-end; }

.bubble { max-width:82%; padding:12px 16px; border-radius:18px; }
.turn.you .bubble { background:#f2f2f2; border-bottom-right-radius:6px; }
.turn.gran .bubble { background:#fff; border:1px solid var(--line);
  border-bottom-left-radius:6px; }

.face { flex:none; width:34px; height:34px; margin-right:10px; border-radius:50%;
  border:1px solid var(--line); background:#fff; }

.when { margin:2px 0 0 46px; font-size:12px; color:var(--mute); }
.turn.you + .when { margin:2px 0 0; text-align:right; }

.capped { margin:0 0 14px; padding:10px 14px; font-size:14px; color:var(--mute);
  background:#fafafa; border:1px solid var(--line); border-radius:10px; }
.again.inline { display:block; margin-top:10px; }
.fineprint { margin-top:28px; font-size:12px; color:var(--mute); text-align:center; }
.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); }
.src { font-size:12px; color:var(--mute); text-decoration:none;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.src:hover { color:var(--ink); border-color:var(--ink); }
.note, .err { color:var(--mute); }
.err { color:#a11; }