:root{color-scheme:light;--paper:#f8f7f3;--ink:#27282a;--muted:#62615d;--line:#c8c3bb;--copper:#9c592d;--error:#8c3020}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 ui-sans-serif,system-ui,sans-serif}
button,input,select{font:inherit}
a{color:var(--copper)}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.skip{position:absolute;left:8px;top:-40px;background:var(--ink);color:#fff;padding:8px}
.skip:focus{top:8px}
.frame{width:min(440px,calc(100% - 20px));margin:0 auto;padding:12px 0 16px}
h1{margin:0 0 8px;font-size:22px;line-height:1.2}
h2{margin:0 0 8px;font-size:18px;line-height:1.3}
p,ul{margin:0 0 8px}
.note,.limits,.sources,.credit{color:#3f403c;font-size:13px;line-height:1.45}
label{display:grid;gap:4px;margin:0 0 10px;font-size:14px;font-weight:700}
input,select{width:100%;min-width:0;min-height:44px;padding:8px 10px;border:1px solid #928e87;border-radius:3px;background:#fff;color:var(--ink)}
input[aria-invalid=true],select[aria-invalid=true]{border:2px solid var(--error)}
.error{color:var(--error);font-size:13px;font-weight:700}
.error:empty{display:none}
.actions{display:flex;gap:16px;align-items:center;margin:4px 0 12px}
button{min-height:44px;padding:8px 14px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}
button.secondary{background:transparent;color:var(--ink);border:0;border-bottom:1px solid currentColor;padding:8px 0}
button:disabled{opacity:.5}
.result{margin:0 0 12px;padding-top:8px;border-top:1px solid var(--line)}
.total{font-size:40px;line-height:1;font-weight:700;color:var(--copper);font-variant-numeric:tabular-nums}
.equation{font-variant-numeric:tabular-nums}
.sources,.credit{margin-top:8px}