:root{color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000}
body{color:#fff}
main{width:100%;height:100%;display:grid;place-items:center}
.clock{position:relative;width:min(96vmin,880px);height:min(96vmin,880px);border-radius:50%}
.clock:before,.clock:after{content:"";position:absolute;inset:7%;border:1px solid rgba(255,255,255,.045);border-radius:50%}
.clock:after{inset:23%;border-color:rgba(255,255,255,.07)}
.clock-glow{position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%);filter:blur(10px)}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transition:transform .72s cubic-bezier(.22,.8,.25,1)}
.tick{position:absolute;left:0;top:0;width:max-content;color:#383838;font-size:clamp(7px,1.1vmin,12px);line-height:1;white-space:nowrap;transform-origin:0 0;transition:color .35s,text-shadow .35s}
.tick.passed{color:#555}
.tick.active{z-index:2;color:#fff;font-weight:850;text-shadow:0 0 11px rgba(255,255,255,.7)}
.clock-center{position:absolute;z-index:3;left:50%;top:50%;width:220px;display:grid;gap:8px;text-align:center;transform:translate(-50%,-50%)}
.clock-center strong{font-size:clamp(1.35rem,3.8vmin,2.5rem);font-weight:450;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.clock-center span{color:#777;font-size:clamp(.58rem,1.3vmin,.78rem);letter-spacing:.06em}
@media(max-width:520px){.clock{width:112vmin;height:112vmin}.clock-center{width:145px}.tick{font-size:clamp(6px,2vmin,9px)}}
@media(prefers-reduced-motion:reduce){.ring,.tick{transition:none}}