:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101a22; color: #f4f6f8; }
main { max-width: 70rem; margin: 3rem auto; padding: 0 1rem; }
h1 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: .2em; }
p, time, dt { color: #b8c9d1; }
a { color: #b5ecd1; }
.brand { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
select { margin: 1rem .5rem; padding: .5rem; }
article { border-top: 1px solid #45606e; padding: 1rem 0; }
h2 { margin: .35rem 0; font-size: 1.2rem; }
dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(7rem,1fr)); gap: .5rem; }
dd { margin: .25rem 0; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: .5rem; margin: 1.5rem 0; }
.tabs button { background: #172a35; color: #f4f6f8; border: 1px solid #45606e; padding: .65rem 1rem; border-radius: .45rem; font: inherit; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: #f1cd82; color: #101a22; }
.good { color: #8df0a4; }
dd small { display: block; color: #b8c9d1; font-size: .76em; font-weight: normal; }
#comparison { padding: .25rem 1rem; border-left: .2rem solid #789aa8; margin-bottom: 1.5rem; }
.actual { font-weight: 650; }