:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.55; }
body { margin: 0; }
main { max-width: 76rem; margin: auto; padding: 1.5rem; }
h1, h2 { line-height: 1.2; }
a { color: light-dark(#234cad, #a5c1ff); }
fieldset { border: 1px solid #888; border-radius: .5rem; padding: 1rem; min-width: 0; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
input, select, button { font: inherit; padding: .65rem; border: 1px solid #888; border-radius: .3rem; }
input, select { min-width: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid light-dark(#234cad, #a5c1ff); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
#interpretation { font-family: inherit; }
#status, #usage { font-weight: 600; }
@media (max-width: 48rem) { .results { grid-template-columns: 1fr; } }