.local-time-clock-app{--clock-size:3vw;--gap:calc(var(--clock-size) * 0.05);--clock-segment-w:calc(var(--clock-size) * 4 + var(--gap) * 3);--clock-segment-h:calc(var(--clock-size) * 6 + var(--gap) * 5);font-family:sans-serif;text-align:center;display:flex;gap:var(--gap);align-items:center;justify-content:center}.local-time-clock-app.is-timer{--clock-size:2.5rem;width:100%;height:100%;position:absolute;inset:0}.local-time-clock-app>div{display:flex;flex-wrap:wrap;gap:var(--gap);width:var(--clock-segment-w);height:var(--clock-segment-h)}.local-time-clock-app>div:nth-of-type(2){margin-right:calc(var(--clock-size) / 2)}.clock{--w:47%;--h:3px;--dur:0.4s;position:relative;width:var(--clock-size);height:var(--clock-size);border-radius:50%;flex-shrink:0;background:linear-gradient(225deg,hsl(var(--muted)) 10%,hsl(var(--background)));box-shadow:-2px 2px 6px hsl(var(--muted)),2px -2px 6px hsl(var(--background))}.clock,.dark .clock{border:2px solid hsl(var(--border))}.dark .clock{background:linear-gradient(225deg,#1a1a1a 10%,#2a2a2a);box-shadow:-2px 2px 6px #1a1a1a,2px -2px 6px #2a2a2a}.clock:after,.clock:before{position:absolute;content:"";top:calc(50% - var(--h) * .5);left:50%;transform-origin:0 50%;width:var(--w);height:var(--h);border-radius:9999px;transition:calc(var(--dur) * 1s) ease-in-out;transform:rotate(calc(var(--angle) * 1deg))}.dark .clock:after,.dark .clock:before{background:hsl(var(--foreground))}:not(.dark) .clock:after,:not(.dark) .clock:before{background:hsl(var(--primary))}.clock:before{--angle:var(--hour-angle)}.clock:after{--angle:var(--minute-angle)}@media (max-width:900px){.local-time-clock-app:not(.is-timer){--clock-size:5vw}}@media (max-width:700px){.clock{--h:2px;border:1px solid hsl(var(--border))}}@media (max-width:500px){.local-time-clock-app:not(.is-timer){--clock-size:8vw}.clock{--h:1px;--w:50%}}