.key{display:grid;row-gap:3px;width:min(var(--reading-max,800px),100%);max-width:var(--reading-max,800px);margin-bottom:24px}.key>div{width:100%;display:flex;height:36px;align-items:center;justify-content:center}.key span{margin-left:3px}.key .years{background-color:orange;color:#212121}.key .months{background-color:#ff0;color:#212121}.key .days{background-color:green}.key .hours{background-color:#00f}.key .minutes{background-color:indigo}.key .seconds{background-color:#fff;color:#212121}svg.clock{width:min(100%,60vh);margin-bottom:24px;margin-left:0;margin-right:0;display:block;transform:rotate(-90deg);transform-origin:center center}svg.clock circle{fill:transparent;stroke-width:9px;stroke-dashoffset:0;transition:stroke-dashoffset .2s cubic-bezier(.68, -.55, .27, 1.55)}#center{fill:red}#years{stroke:orange}#months{stroke:yellow}#days{stroke:green}#hours{stroke:blue}#minutes{stroke:indigo}#seconds{stroke:white}.display-time{font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:-.02em;text-align:left;text-shadow:none;font-size:var(--fs-2xl);line-height:var(--lh-tight);margin-bottom:18px}