@import url('./fonts/human.css');
@import url('./fonts/system.css');
:root {color-scheme:light; background:#faf9f6; color:#514738; font-family:system-ui,sans-serif;}
* {box-sizing:border-box;}
body {max-width:920px; margin:auto; padding:38px 52px 100px;}
nav {display:flex; justify-content:space-between;}
a {color:#7f7d73; text-decoration:none; font-size:11px;}
h1 {font:400 clamp(32px,5vw,46px)/1.4 'Held Human',serif; margin:18px 0 24px;}
h2 {font:400 26px/1.5 'Held Human',serif; margin:0 0 16px;}
p {font-size:12px; line-height:2; color:#8c887e;}
.eyebrow {margin-top:72px; font-size:10px; letter-spacing:.06em;}
.controls {display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:24px; font-size:11px;}
button,select {font:11px/1.6 system-ui,sans-serif; background:transparent; color:#79786f; border:0; border-radius:0; padding:10px 0; min-height:40px; cursor:pointer;}
select {border-bottom:1px solid #ddd8ca;}
button:disabled {opacity:.4; cursor:default;}
button:hover,a:hover {color:#48677c;}
button:focus-visible,a:focus-visible,select:focus-visible {outline:1px solid #48677c; outline-offset:5px;}
header {padding-bottom:36px;}
section {padding:38px 0 42px; border-top:1px solid #e8e5dc;}
canvas {display:block; width:100%; height:auto; background:#20211e; margin:24px 0 14px;}
#totals {font-family:'Held System',monospace; font-size:11px; color:#8c887e; margin-top:24px;}
#status {font-size:10px;}#status:empty {display:none;}
[hidden] {display:none!important;}
@media(max-width:600px) {body {padding:25px 26px 70px;}.controls {gap:16px;}.eyebrow {margin-top:52px;}h2 {font-size:24px;}section {padding-top:28px;}}