Styles for the counter. Colors are tokens on :root with a dark-mode override, so the page
follows the system theme.
#Tokens
Every color the page uses. Dark mode only redefines these; no rule below changes.
:root {
--bg: #fafafa;
--text: #18181b;
--border: #d4d4d8;
--accent: #4f46e5;
--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0a0a0a;
--text: #fafafa;
--border: #3f3f46;
--accent: #818cf8;
}
}#Layout
The counter sits centered in the viewport, with the buttons either side of the number.
body {
margin: 0;
min-height: 100dvh;
display: grid;
place-items: center;
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
}
.counter {
display: flex;
align-items: center;
gap: 1.5rem;
}#The number uses tabular figures, so its width doesn’t jump as the digits change.
output {
min-width: 3ch;
font-size: 3rem;
font-variant-numeric: tabular-nums;
text-align: center;
}
button {
width: 3rem;
height: 3rem;
font: inherit;
font-size: 1.5rem;
color: var(--text);
background: transparent;
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
}
button:hover,
button:focus-visible {
border-color: var(--accent);
color: var(--accent);
}