:root {
  color-scheme: light dark;
  --bg: #ffffff; --text: #1a1a1a; --muted: #4a4a4a; --link: #0b57d0; --border: #767676;
  --surface: #f4f5f7; --focus: #0b57d0; --error-fg: #a50e0e; --error-bg: #fdecea;
  --ok-border: #1e6e3a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --text: #ececec; --muted: #b8b8b8; --link: #8ab4f8; --border: #8a8a8a;
    --surface: #1e1e1e; --focus: #8ab4f8; --error-fg: #ffb4ab; --error-bg: #3b1412;
    --ok-border: #7bd194;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 1rem/1.5 system-ui, sans-serif;
}
main, footer { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
main { padding-top: 1.5rem; }
footer { padding-top: 1rem; padding-bottom: 2rem; color: var(--muted); }
footer p { margin: 0.25rem 0; }
footer a { display: inline-block; padding-block: 0.5rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
h2.plain { font-size: 1rem; margin: 1rem 0 0.25rem; }
h3 { font-size: 1rem; font-weight: bold; margin: 0 0 0.25rem; }
code, pre { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
a { color: var(--link); text-decoration: underline; }
a, button, textarea, pre, summary, #result { outline-offset: 2px; }
a:focus-visible, button:focus-visible, textarea:focus-visible, pre:focus-visible,
summary:focus-visible, .chip:focus-visible, #result:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 1; padding: 0.75rem 1rem;
  background: var(--bg); border: 2px solid var(--link);
}
.skip:focus { top: 0.5rem; }
label { display: block; font-weight: bold; margin: 1.5rem 0 0.25rem; }
textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--border); border-radius: 4px; padding: 0.5rem;
}
textarea[aria-invalid="true"] { border-color: var(--error-fg); }
textarea:disabled { background: var(--surface); color: var(--muted); }
#q-hint, #q-count, #sugg-hint { margin: 0.25rem 0; color: var(--muted); font-size: 0.9375rem; }
#q-count.error, p.error { color: var(--error-fg); font-weight: bold; }
p.error:empty { display: none; }
button {
  min-width: 44px; min-height: 44px; width: 100%; font: inherit; font-weight: bold;
  color: var(--bg); background: var(--link); border: 2px solid var(--link);
  border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; margin-top: 0.5rem;
}
button:disabled { background: var(--surface); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
button[aria-disabled="true"] { cursor: progress; }
.chip, button.secondary {
  display: inline-flex; align-items: center; min-height: 44px; width: auto; padding: 0.5rem 1rem;
  color: var(--link); background: var(--bg); border: 2px solid var(--link); border-radius: 4px;
  font-weight: bold; text-decoration: none; text-align: left; overflow-wrap: anywhere;
}
button.secondary { margin-top: 0; }
#suggestions form, .try form { margin: 0.5rem 0 0; }
#suggestions .chip, .try .chip { display: flex; width: 100%; }
.ready { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.ready:empty { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#result { margin-top: 1.5rem; scroll-margin-top: 0.5rem; }
#result:empty { margin: 0; }
.state {
  position: relative; padding: 0.5rem 1rem; border-left: 4px solid var(--border);
  background: var(--surface);
}
.state-answer { border: 2px solid var(--ok-border); border-left-width: 4px; }
.state-answer h2 { font-size: 1.5rem; }
.state-error { background: var(--error-bg); color: var(--error-fg); border-left-color: var(--error-fg); }
.state-note { background: var(--surface); color: var(--text); border-left-color: var(--link); }
.state-error a { color: inherit; }
.state .links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.state .links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem;
  border: 2px solid var(--link); border-radius: 4px; font-weight: bold; text-decoration: none;
}
.state-error .links a { border-color: currentColor; }
.elapsed { color: var(--muted); font-size: 0.9375rem; }
.icon {
  float: left; margin: 0.125rem 0.5rem 0 0; width: 1.25rem; height: 1.25rem;
  border: 2px solid currentColor; border-radius: 50%; font-size: 0.875rem; line-height: 1;
  text-align: center; font-weight: bold;
}
.icon:empty { display: none; }
.found { display: block; font-size: 1rem; font-weight: normal; color: var(--text); }
.try { margin-top: 1rem; }
.passages { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.passages li { margin-bottom: 1.5rem; }
article { border: 2px solid var(--border); border-radius: 4px; padding: 0.75rem; }
.meta { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.caption { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.875rem; }
pre.passage {
  margin: 0.25rem 0 0; padding: 0.75rem; background: var(--surface); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto;
  font-size: 0.9375rem; line-height: 1.45; border-radius: 0 4px 4px 0;
  border-left: 4px solid var(--link);
}
pre.passage code { font: inherit; }
details.receipts { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 4px; }
details.receipts summary {
  min-height: 44px; padding: 0.625rem 1rem; cursor: pointer; font-weight: bold;
}
details.receipts dl { margin: 0; padding: 0 1rem 0.5rem; }
details.receipts dt { font-weight: bold; margin-top: 0.5rem; }
details.receipts dd { margin: 0; overflow-wrap: anywhere; }
details.receipts dd p { margin: 0; }
details.receipts ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
details.receipts ul.receipt-links { padding: 0 1rem 0.75rem 2.25rem; }
dl.figures { margin: 0 0 1.5rem; }
dl.figures > div { padding: 0.75rem 0; border-top: 1px solid var(--border); }
dl.figures dt { font-weight: bold; }
dl.figures dd { margin: 0; overflow-wrap: anywhere; }
dd.value { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin: 0.25rem 0; }
dd.basis { color: var(--muted); font-size: 0.9375rem; }
ul.findings, ul.decisions { margin: 0.25rem 0 1.5rem; padding-left: 1.25rem; }
.when { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) {
  dl.figures > div {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: start;
  }
  dl.figures dt, dl.figures dd.basis { grid-column: 1; }
  dl.figures dd.value { grid-column: 2; grid-row: 1 / span 2; text-align: right; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .chip, button, summary { transition: background-color 120ms, color 120ms; }
}
.chip:hover, button.secondary:hover { background: var(--surface); }
button:hover:not(:disabled):not(.secondary):not(.chip) { filter: brightness(0.92); }
@media (forced-colors: active) {
  article, button, textarea, details.receipts, .chip { border-color: CanvasText; }
  .state-error, .state-note, .state { background: Canvas; }
  .state, pre.passage { border-left-color: CanvasText; }
}