.timer-dial { position: relative; width: min(100%, 22rem); aspect-ratio: 1; }
.timer-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: none; stroke: var(--line); stroke-width: 4; }
.timer-progress { fill: none; stroke: var(--accent-red); stroke-width: 4; stroke-linecap: butt; stroke-dasharray: 578.05; stroke-dashoffset: 0; }
.timer-readout { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.timer-digits { font-size: clamp(3.2rem, 14vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.timer-custom { display: flex; align-items: center; gap: 0.5rem; }
.timer-custom input { width: 5rem; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.timer-custom input::-webkit-inner-spin-button, .timer-custom input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.timer.is-last .timer-digits, .timer.is-last .timer-progress { color: var(--accent-red); }
.timer.is-done .timer-digits { color: var(--accent-red); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.timer:fullscreen { display: grid; place-content: center; background: var(--paper); border: 0; }
.timer:fullscreen .timer-dial { width: min(80vh, 90vw); }
.timer:fullscreen .timer-digits { font-size: min(16vh, 18vw); }
.timer:fullscreen .segmented, .timer:fullscreen .timer-custom, .timer:fullscreen .check { display: none; }