:root{color-scheme:dark;background:#050505;color:#c6c6c6;font-family:monospace}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
main{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:100svh;background:radial-gradient(ellipse at center,#131313 0%,#080808 47%,#020202 100%);isolation:isolate}
.clock{position:absolute;left:50%;top:50%;width:128vmin;height:128vmin;transform:translate(-50%,-50%);max-width:1400px;max-height:1400px;fill:none;stroke:#777;opacity:calc(.16 + var(--pulse,0)*.1);pointer-events:none;z-index:-2}
.rim{stroke-width:1.1}.inner-rim{stroke-width:.5;opacity:.45}
.mark{stroke-width:1;opacity:.55}.mark.major{stroke-width:2;opacity:.9}
.hand{transform-origin:500px 500px;stroke-linecap:square}
.hour{stroke-width:6;stroke:#858585}.minute{stroke-width:3;stroke:#939393}.second{stroke-width:1.3;stroke:#c8c8c8}.hub{fill:#999;stroke:none}
.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 17%,#0003 55%,#000b 100%)}
#timer{font:normal clamp(30px,7.6vw,108px)/1 monospace;letter-spacing:.035em;font-variant-numeric:tabular-nums;white-space:nowrap;padding:20px;color:#bfbfbf;text-shadow:0 0 25px #000,0 0 7px #000;user-select:none}
#sound{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));right:max(25px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#777;cursor:pointer;padding:12px;opacity:.65;touch-action:manipulation}
#sound:hover,#sound:focus-visible{opacity:1;color:#ddd}
#sound:focus-visible{outline:1px solid #777;outline-offset:3px}
#sound svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.sound-waves{display:none}#sound[aria-pressed="true"] .sound-waves{display:block}#sound[aria-pressed="true"] .sound-muted{display:none}
#sound[aria-busy="true"]{opacity:.25}
#sound:disabled{opacity:.2;cursor:default}
#error{position:absolute;bottom:80px;right:25px;max-width:260px;margin:0;font:11px/1.6 monospace;color:#999}
[hidden]{display:none!important}
@media(max-width:600px){.clock{width:150vmin;height:150vmin}#timer{font-size:8vw;letter-spacing:.01em;padding:10px}}
@media(prefers-reduced-motion:reduce){.clock{opacity:.18}}