:root {
  --bg: #f7f6f2; --card: #ffffff; --ink: #1d1d1b; --muted: #5b5b57; --line: #dcdad2; --accent: #1f5f8b;
  --yes: #1d7a46; --partial: #a86a00; --later: #3d5a99; --elsewhere: #6b4c9a; --no: #b23a3a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16171a; --card: #1f2126; --ink: #ecebe6; --muted: #a8a7a0; --line: #33363d; --accent: #7fb4dc; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
h1 { font-size: 2rem; margin: 0 0 8px; }
.lede { color: var(--muted); margin: 0 0 24px; }
.ask { display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.ask label { font-weight: 600; margin-top: 8px; }
.ask select, .ask input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
.ask button { font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; margin-top: 8px; }
.ask button[disabled] { opacity: .6; cursor: wait; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.examples-label { color: var(--muted); font-size: 14px; margin-right: 4px; }
.ask .chip { font: inherit; font-size: 14px; font-weight: 500; margin: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; }
.ask .chip:hover { border-color: var(--accent); }
.answer { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 12px; padding: 20px; }
.answer.tone-yes { border-left-color: var(--yes); }
.answer.tone-partial { border-left-color: var(--partial); }
.answer.tone-later { border-left-color: var(--later); }
.answer.tone-elsewhere { border-left-color: var(--elsewhere); }
.answer.tone-no { border-left-color: var(--no); }
.asked { color: var(--muted); margin: 0 0 4px; }
.verdict { margin: 0 0 4px; font-size: 1.5rem; }
.confidence { margin: 0 0 12px; font-weight: 600; }
.close-call { background: rgba(168, 106, 0, .12); border-radius: 8px; padding: 10px 12px; }
.runner-up, .meta { color: var(--muted); font-size: 15px; }
.rule a { color: var(--accent); }
.error { margin-top: 24px; background: rgba(178, 58, 58, .12); border-radius: 8px; padding: 12px 14px; }
.thinking { margin-top: 24px; color: var(--muted); }
.disclaimer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.disclaimer h2 { font-size: 1.05rem; color: var(--ink); }
.disclaimer a { color: var(--accent); }