* { box-sizing: border-box; }
html { color: #212729; background: #f6f6f2; font: 100%/1.55 system-ui,sans-serif; }
body { margin: 0; }
nav, main { padding: 1.2rem max(1.2rem,calc((100vw - 62rem)/2)); }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; background:#213638; color:white; }
nav a { color:white; text-underline-offset:.24rem; }
main { overflow-x:auto; }
h1 { margin:1.25rem 0; font-size:clamp(2rem,4vw,3rem); line-height:1.1; }
h2 { margin:2rem 0 .6rem; font-size:1.3rem; }
form { margin:1rem 0; }
label { display:block; font-weight:600; margin:.65rem 0; }
input,textarea { display:block; border:1px solid #737d7c; border-radius:.3rem; padding:.6rem; width:min(100%,36rem); font:inherit; background:#fff; }
textarea { min-height:8rem; }
button { font:inherit; font-weight:600; border:0; border-radius:.35rem; padding:.65rem 1rem; color:white; background:#205450; cursor:pointer; }
:focus-visible { outline:3px solid #bf7334; outline-offset:3px; }
table { border-collapse:collapse; width:100%; }
td,th { padding:.6rem; border-bottom:1px solid #ccd2ce; text-align:left; overflow-wrap:anywhere; }
dt { font-weight:600; } dd { margin:0 0 .5rem; font-variant-numeric:tabular-nums; }

html {background:#f4f5f6;color:#17191c}
body:has(aside) {display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100vh}
aside {background:#202428;color:white;padding:2rem 1rem;display:flex;flex-direction:column;gap:.25rem}
aside strong {font-size:1.3rem;letter-spacing:-.035em}
aside small {color:#e2e4e7}
aside nav {display:grid;gap:.2rem;padding:0;background:none;margin:2rem 0}
nav a {padding:.65rem .8rem;text-decoration:none;color:#fff;border-radius:.35rem}
nav a:hover {background:#343b40}
nav a[aria-current] {color:#17191c;background:#ffd400;font-weight:700}
footer {margin-top:auto;font-size:.84rem;overflow-wrap:anywhere}
footer button,.secondary {background:transparent;color:inherit;border:1px solid currentColor}
main {width:100%;max-width:74rem;margin:0 auto;padding:clamp(1.25rem,4vw,4rem)}
body:not(:has(aside)) main {max-width:34rem;margin:8vh auto}
h1 {margin:0 0 2rem;letter-spacing:-.04em} h2 {letter-spacing:-.015em}
main a {color:#194caa;text-underline-offset:.2em}
main form, .ledger {background:white;border:1px solid #d8dbde;border-radius:.6rem;padding:1.25rem}
.ledger {margin-bottom:1rem} .ledger h2 {margin:0 0 1rem}
.metrics,.rows {margin:0}.metrics {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.metrics dt,.rows dt {font-weight:500}.metrics dd {font-size:clamp(1.75rem,4vw,3.2rem);font-weight:750;line-height:1.3}
.rows div {display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid #e5e7eb}
.rows dd {font-weight:700}textarea {width:100%;min-height:12rem}button {background:#ffd400;color:#17191c}
table {background:white} th {background:#e6e9ec} :focus-visible {outline:3px solid #2165c4}
@media(max-width:48rem){body:has(aside){display:block}aside{padding:1rem}aside nav{display:flex;margin:.7rem 0;gap:.25rem}aside footer{display:flex;justify-content:space-between;align-items:center}footer form{margin:0}nav a{padding:.5rem}main{padding:1.25rem}.metrics{gap:.5rem}}