* { box-sizing: border-box; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #fafafa; color: #222; }
main { max-width: 480px; margin: 2rem auto; padding: 0 1rem; }
h1 { margin: 0 0 0.25rem; }
.hint { color: #666; }
.counter { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 0.75rem; margin: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
.counter-name { flex: 1; text-transform: capitalize; font-weight: 500; }
.counter-value { background: #eef; padding: 0.25rem 0.6rem; border-radius: 4px; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: center; }
.counter button { padding: 0.4rem 0.8rem; font: inherit; background: #1f6feb; color: white; border: 0; border-radius: 6px; cursor: pointer; }
.counter button:hover { background: #1559c4; }
footer { color: #999; font-size: 0.85rem; text-align: center; margin-top: 1.5rem; }