*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: #1a1a1a; background: #f6f6f4; overflow-wrap: anywhere; }
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; padding: .5rem 1rem; background: #1f3a5f; }
nav a, nav .link { color: #fff; padding: .5rem 0; }
h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
.subnav a { margin-right: 1rem; }
a, .link { color: #1f3a5f; }
.link { background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; padding: .5rem 0; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.row > input, .row > select { flex: 1 1 10rem; min-width: 0; }
.inline { display: inline; }
.card { background: #fff; border: 1px solid #d8d8d4; border-radius: 6px; padding: .75rem; margin-bottom: .75rem; }
.list, .plain { list-style: none; margin: 0; padding: 0; }
label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: normal; }
input, select, button { font: inherit; padding: .6rem; min-height: 2.75rem; max-width: 100%; }
input, select { border: 1px solid #999; border-radius: 4px; width: 100%; }
input[type=checkbox] { width: auto; min-height: 0; }
button:not(.link) { background: #1f3a5f; color: #fff; border: 0; border-radius: 4px; cursor: pointer; padding: .6rem 1rem; }
.error { background: #fde8e8; border: 1px solid #c0392b; padding: .75rem; border-radius: 4px; }
.muted { color: #666; font-size: .9rem; }
.badge { background: #8a5a00; color: #fff; border-radius: 3px; padding: 0 .4rem; font-size: .8rem; }
.hit { display: flex; gap: .75rem; }
.hit .thumb { flex: 0 0 4.5rem; }
.hit img { width: 4.5rem; height: auto; min-height: 5.5rem; background: #eee; display: block; }
.snippet { margin: .25rem 0 0; }
mark { background: #ffe58a; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .6rem 1.25rem; background: #1f3a5f; color: #fff; border-radius: 4px; text-decoration: none; }
.btn.alt { background: #fff; color: #1f3a5f; border: 1px solid #1f3a5f; }
.viewer { overflow: auto; touch-action: pan-x pan-y pinch-zoom; background: #eee; border: 1px solid #d8d8d4; max-height: 80vh; }
.viewer img { display: block; width: 100%; height: auto; }
.viewer.zoomed img { width: 200%; max-width: none; }
.banner { background: #fff4d6; border: 1px solid #8a5a00; padding: .75rem; border-radius: 4px; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; padding: 0; background: none; }
.pager .btn, .pager span { flex: 1; }
.ocr { white-space: pre-wrap; margin: .5rem 0 0; font: inherit; }
.answer { white-space: pre-line; }
.section { margin-bottom: 1rem; }
.section > summary { cursor: pointer; list-style-position: outside; }
.section > summary h2 { display: inline; font-size: 1.2rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.badge.outcome-answered { background: #2d6a3e; }
.badge.outcome-uncited, .badge.outcome-unavailable { background: #a33; }
.badge.outcome-not_found, .badge.outcome-no_hits { background: #666; }