:root { font: 18px/1.6 system-ui, sans-serif; color: #1c2440; background: #f3f5fc; color-scheme: light; }
body { margin: 0; padding: 3rem 1.25rem; }
.card { max-width: 42rem; margin: auto; padding: clamp(1.5rem, 4vw, 3rem); background: white; border-radius: 1.25rem; box-shadow: 0 1rem 4rem #14295012; }
.eyebrow { color: #586596; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
h1 { line-height: 1.2; font-size: clamp(2rem, 5vw, 3rem); overflow-wrap: anywhere; }
.counter { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; padding-block: 1rem; }
#count { font-weight: 700; font-variant-numeric: tabular-nums; }
button { border: 0; border-radius: .5rem; background: #344bca; color: white; padding: .8rem 1.4rem; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #dd9318; outline-offset: 4px; }
button:hover { background: #263baf; }
.explanation { color: #59637c; font-size: .9rem; }