* {
				border: var(--main-radius);
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			:root {
				--hue: 223;
				--bg: hsl(var(--hue), 10%, 90%);
				--fg: hsl(var(--hue), 10%, 10%);
				font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
			}

			body,
			button {
				color: #000;
				font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
			}

			body {
				background-color: var(--main-bg-color);
				height: 97vh;
				display: grid;
				place-items: center;
			}

			.progress-clock {
				display: grid;
				justify-content: center;
				align-content: center;
				position: relative;
				text-align: center;
				width: 16em;
				height: 16em;
			}

			.progress-clock__time-date,
			.progress-clock__time-digit,
			.progress-clock__time-colon,
			.progress-clock__time-ampm {
				transition: color 0.2s linear;
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
			}

			.progress-clock__time-date,
			.progress-clock__time-digit {
				background: transparent;
			}

			.progress-clock__time-date,
			.progress-clock__time-ampm {
				grid-column: 1 / 6;
			}

			.progress-clock__time-date {
				font-size: 0.75em;
				line-height: 1.33;
			}

			.progress-clock__time-digit,
			.progress-clock__time-colon {
				font-size: 2em;
				font-weight: 400;
				grid-row: 2;
			}

			.progress-clock__time-colon {
				line-height: 1.275;
			}

			.progress-clock__time-ampm {
				cursor: default;
				grid-row: 3;
			}

			.progress-clock__rings {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.progress-clock__ring {
				opacity: 0.1;
			}

			.progress-clock__ring-fill {
				transition:
					opacity 0s 0.3s linear,
					stroke-dashoffset 0.3s ease-in-out;
			}

			.progress-clock__ring-fill--360 {
				opacity: 0;
				stroke-dashoffset: 0;
				transition-duration: 0.3s;
			}

			[data-group]:focus {
				outline: transparent;
			}

			[data-units] {
				transition: opacity 0.2s linear;
			}

			[data-group="d"]:focus,
			[data-group="d"]:hover {
				color: hsl(333, 90%, 55%);
			}

			[data-group="h"]:focus,
			[data-group="h"]:hover {
				color: hsl(33, 90%, 55%);
			}

			[data-group="m"]:focus,
			[data-group="m"]:hover {
				color: hsl(213, 90%, 55%);
			}

			[data-group="s"]:focus,
			[data-group="s"]:hover {
				color: hsl(273, 90%, 55%);
			}

			[data-group]:focus~.progress-clock__rings [data-units],
			[data-group]:hover~.progress-clock__rings [data-units] {
				opacity: 0.2;
			}

			[data-group="d"]:focus~.progress-clock__rings [data-units="d"],
			[data-group="d"]:hover~.progress-clock__rings [data-units="d"],
			[data-group="h"]:focus~.progress-clock__rings [data-units="h"],
			[data-group="h"]:hover~.progress-clock__rings [data-units="h"],
			[data-group="m"]:focus~.progress-clock__rings [data-units="m"],
			[data-group="m"]:hover~.progress-clock__rings [data-units="m"],
			[data-group="s"]:focus~.progress-clock__rings [data-units="s"],
			[data-group="s"]:hover~.progress-clock__rings [data-units="s"] {
				opacity: 1;
			}

			/* Dark theme */
			@media (prefers-color-scheme: dark) {
				:root {
					--bg: hsl(var(--hue), 10%, 10%);
					--fg: hsl(var(--hue), 10%, 90%);
				}

				.progress-clock__ring {
					opacity: 0.2;
				}
			}