/* LG03: Quern's look, plainly - the Mist ground, ink words, one accent, 48 px targets, readable at any text size. */
:root { color-scheme: light dark; --ground: #f6f6f1; --ink: #1d2320; --ink2: #555c58; --acc: #1f6b55; --bad: #a33a2b;
        --card: #ffffff; --line: #d9dbd3; }
@media (prefers-color-scheme: dark) {
  :root { --ground: #141816; --ink: #eef0ec; --ink2: #b5bbb6; --acc: #7fcbb0; --bad: #f08a7a; --card: #1e2421; --line: #3a423e; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
       font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }
p { margin: 0 0 1rem; }
.quiet, label { color: var(--ink2); }
form { display: grid; gap: 0.75rem; margin: 1rem 0; padding: 1.25rem; background: var(--card);
       border: 1px solid var(--line); border-radius: 1.25rem; }
form[hidden], p[hidden] { display: none; }
input { min-height: 3rem; padding: 0 1rem; font: inherit; color: var(--ink); background: var(--ground);
        border: 1px solid var(--line); border-radius: 0.75rem; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
button { min-height: 3rem; padding: 0 1.5rem; font: inherit; font-weight: 600; border: 0; border-radius: 999px;
         color: var(--ground); background: var(--ink); cursor: pointer; }
button.danger { background: var(--bad); color: #fff; }
button.text { background: transparent; color: var(--acc); padding: 0; justify-self: start; }
button:disabled { opacity: 0.38; cursor: default; }
#status { min-height: 1.5rem; }