:root { color-scheme: light dark; font: 16px/1.6 system-ui, sans-serif; color: #183436; background: #edf2f1; }
* { box-sizing: border-box; }
body { max-width: 960px; margin: auto; padding: 24px; }
header { padding: 14px 0 22px; border-bottom: 3px solid #277174; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.03em; }
h2 { font-size: 1.25rem; margin-top: 0; } h3 { font-size: 1rem; }
.eyebrow { letter-spacing: .12em; font-size: .75rem; font-weight: 700; }
.synthetic { font-weight: 600; } small { font-weight: 400; }
section, main > details { background: #fff; border: 1px solid #c1d1cf; border-radius: 10px; margin-top: 20px; padding: 20px; }
label { display: block; margin-top: 12px; font-weight: 600; }
button, input, textarea { font: inherit; }
input, textarea { max-width: 100%; padding: 10px; border: 1px solid #638583; border-radius: 6px; }
button, .candidate { border: 1px solid #638583; background: #f2f7f5; color: #173c3b; padding: 10px 14px; border-radius: 6px; cursor: pointer; min-height: 44px; }
button:hover { background: #dcecea; } button:disabled { cursor: wait; opacity: .5; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #bd7207; outline-offset: 3px; }
.actions, .search-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.search-line input { flex: 1; min-width: 140px; }
.candidate { display: block; text-align: left; width: 100%; margin-top: 8px; }
.candidate[aria-pressed="true"] { border: 2px solid #126667; background: #e1efeb; }
.bad, #error { color: #9e3028; } .good { color: #145d38; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .83rem; }
table { border-collapse: collapse; width: 100%; } th, td { border-bottom: 1px solid #c1d1cf; text-align: left; padding: 8px; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 8px 0; }
a { color: #005a85; } footer { font-size: .8rem; padding: 24px 0; }
@media (max-width: 520px) { body { padding: 14px; } section { padding: 14px; } .actions button { flex-grow: 1; } }
@media (prefers-color-scheme: dark) {
  :root { color: #e0ece8; background: #142424; } section, main > details { background: #203231; border-color: #567370; }
  button, .candidate { color: #e2ede9; background: #28433f; } button:hover, .candidate[aria-pressed="true"] { background: #375952; }
  a { color: #a1d6f5; } .bad, #error { color: #ffa49c; } .good { color: #a2e4b9; }
}