*{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}@media (prefers-color-scheme:dark){:root{--bg:hsl(var(--hue),10%,10%);--fg:hsl(var(--hue),10%,90%)}.progress-clock__ring{opacity:0.2}}