@property --primary-light-angle{syntax: "<angle>"; inherits: false; initial-value: -75deg;}@property --dark-edge-angle{syntax: "<angle>"; inherits: false; initial-value: 105deg;}:root{--minute-marker-opacity: 1;--inner-shadow-opacity: 1;--outer-shadow-opacity: 1;--reflection-opacity: .5;--glossy-opacity: .3;--hour-number-opacity: 1;--hour-number-color: rgba(50, 50, 50, .9);--minute-marker-color: rgba(80, 80, 80, .5);--hand-color: rgba(50, 50, 50, .9);--second-hand-color: rgba(255, 107, 0, 1);--shadow-layer1-opacity: .1;--shadow-layer2-opacity: .1;--shadow-layer3-opacity: .1}.inspiration{position:fixed;top:20px;text-align:center;font-size:14px;color:#323232cc;z-index:100}.inspiration a{color:#323232e6;text-decoration:none;transition:color .3s ease}.inspiration a:hover{color:#000000e6;text-decoration:underline}.glass-clock-container{position:relative;width:350px;height:350px;display:flex;justify-content:center;align-items:center;z-index:2;margin-top:20px}.glass-effect-wrapper{position:relative;z-index:2;border-radius:50%;background:transparent;pointer-events:none;transition:all .4s cubic-bezier(.25,1,.5,1);perspective:1000px;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}.glass-effect-shadow{--shadow-offset: 3em;position:absolute;width:calc(100% + var(--shadow-offset));height:calc(100% + var(--shadow-offset));top:calc(0% - var(--shadow-offset) / 2);left:calc(0% - var(--shadow-offset) / 2);filter:blur(10px);-webkit-filter:blur(10px);pointer-events:none;z-index:1;transition:all .4s cubic-bezier(.25,1,.5,1);opacity:1}.glass-effect-shadow:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,#0006,#0003);width:calc(100% - var(--shadow-offset) - .25em);height:calc(100% - var(--shadow-offset) - .25em);top:calc(var(--shadow-offset) - .5em);left:calc(var(--shadow-offset) - .875em);padding:.125em;box-sizing:border-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;overflow:visible;opacity:.8;box-shadow:0 10px 30px #0000000d,0 15px 25px #0000000d,0 20px 40px #0000000d}.glass-clock-face{--border-width: clamp(2px, .0625em, 4px);position:relative;width:350px;height:350px;border-radius:50%;background-color:#ffffff08;background-image:linear-gradient(-75deg,#ffffff03,#ffffff0a,#ffffff03);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);box-shadow:inset 0 .4em .4em #0000001a,inset 0 -.4em .4em #ffffff80,10px 5px 10px rgba(0,0,0,var(--shadow-layer1-opacity)),10px 20px 20px rgba(0,0,0,var(--shadow-layer2-opacity)),10px 55px 50px rgba(0,0,0,var(--shadow-layer3-opacity));z-index:3;overflow:hidden;pointer-events:auto;cursor:pointer;transition:all .4s cubic-bezier(.25,1,.5,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,box-shadow}.glass-clock-face:after{content:"";position:absolute;z-index:10;inset:0;border-radius:50%;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--primary-light-angle) at 50% 50%,rgba(255,255,255,1),rgba(255,255,255,.2) 5% 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.2) 60% 95%,rgba(255,255,255,1)),linear-gradient(180deg,#ffffffe6,#ffffff80);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #ffffffe6,0 0 12px #fffc;transition:all .4s cubic-bezier(.25,1,.5,1),--primary-light-angle .5s ease;opacity:.9;will-change:background,box-shadow}.glass-edge-highlight{position:absolute;width:350px;height:350px;border-radius:50%;top:0;left:0;border:1px solid rgba(255,255,255,.8);box-shadow:0 0 10px #ffffff80;z-index:8;pointer-events:none;opacity:.6}.glass-edge-highlight-outer{position:absolute;width:356px;height:356px;border-radius:50%;top:-3px;left:-3px;border:1px solid rgba(255,255,255,.7);box-shadow:0 0 10px #ffffff80;z-index:7;pointer-events:none;opacity:.6}.glass-edge-shadow{position:absolute;width:350px;height:350px;border-radius:50%;top:0;left:0;box-shadow:inset -5px 5px 15px #0000004d,inset -8px 8px 20px #0003;z-index:7;pointer-events:none;opacity:var(--inner-shadow-opacity)}.glass-dark-edge{position:absolute;z-index:9;inset:0;border-radius:50%;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--dark-edge-angle) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:all .4s cubic-bezier(.25,1,.5,1),--dark-edge-angle .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) #0003;opacity:var(--inner-shadow-opacity);will-change:background}.glass-glossy-overlay{position:absolute;width:350px;height:350px;border-radius:50%;top:0;left:0;background:linear-gradient(135deg,#ffffffe6,#ffffffb3 15%,#ffffff80 25%,#ffffff4d,#fff3,#ffffff1a);pointer-events:none;z-index:6;mix-blend-mode:overlay;opacity:var(--glossy-opacity);filter:blur(10px)}.glass-reflection-overlay{position:absolute;width:330px;height:330px;border-radius:50%;top:10px;left:10px;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.1) 60%,transparent 100%);pointer-events:none;z-index:15;mix-blend-mode:overlay;opacity:.7;transform:rotate(-15deg);filter:blur(10px)}.glass-reflection{position:absolute;width:350px;height:175px;top:0;left:0;background:linear-gradient(to bottom,#ffffffb3,#fff6 40%,#fff0);border-radius:175px 175px 0 0;pointer-events:none;z-index:10;mix-blend-mode:soft-light;opacity:var(--reflection-opacity);filter:blur(10px)}.glass-effect-wrapper:hover .glass-effect-shadow{opacity:.9}.glass-effect-wrapper:hover .glass-effect-shadow:after{opacity:.85}.glass-effect-wrapper:hover .glass-reflection-overlay{opacity:.8}.glass-effect-wrapper:active{transform:scale3d(.97,.97,1)}.glass-effect-wrapper:active .glass-clock-face{box-shadow:inset 0 .4em .4em #0000001a,inset 0 -.4em .4em #fff6,0 5px 20px #0000001a,0 10px 30px #0000001a,0 15px 40px #0000001a}.glass-effect-wrapper:active .glass-clock-face:after{--primary-light-angle: -75deg}.glass-effect-wrapper:active .glass-effect-shadow{filter:blur(clamp(25px,1.25em,50px));-webkit-filter:blur(clamp(25px,1.25em,50px));width:calc(115% + var(--shadow-offset));height:calc(115% + var(--shadow-offset))}.glass-effect-wrapper:active .glass-effect-shadow:after{opacity:.9;top:calc(var(--shadow-offset) - .7em);background:linear-gradient(180deg,#00000080,#0000004d)}.clock-center-blur{position:absolute;width:36px;height:36px;top:157px;left:157px;background-color:#ffffff59;border-radius:50%;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:16;pointer-events:none;box-shadow:0 0 20px #fff6,inset 0 0 8px #fff9}.clock-hour-marks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:14}.minute-marker{position:absolute;width:1px;height:10px;background-color:var(--minute-marker-color);top:10px;left:175px;transform-origin:center 165px;box-shadow:0 0 2px #ffffff4d;opacity:var(--minute-marker-opacity)}.clock-number{position:absolute;font-size:16px;font-weight:500;color:var(--hour-number-color);text-align:center;width:30px;height:20px;line-height:20px;text-shadow:0 1px 1px rgba(255,255,255,.5);z-index:15;opacity:var(--hour-number-opacity);transition:opacity .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.clock-logo img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.clock-date{position:absolute;text-align:center;height:auto;line-height:1;text-shadow:0 1px 1px rgba(255,255,255,.3);z-index:15;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.clock-timezone{position:absolute;color:#323232cc;text-align:center;height:auto;line-height:1;text-shadow:0 1px 1px rgba(255,255,255,.3);z-index:15;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}.clock-hand{position:absolute;transform-origin:center bottom;bottom:175px;left:175px;z-index:15;will-change:transform}.hour-hand{width:6px;height:70px;background-color:var(--hand-color);margin-left:-3px;border-radius:3px;box-shadow:0 0 5px #0000004d}.minute-hand{width:4px;height:100px;background-color:var(--hand-color);margin-left:-2px;border-radius:2px;box-shadow:0 0 5px #0000004d}.clock-center-dot{position:absolute;width:12px;height:12px;background:var(--second-hand-color);border-radius:50%;top:169px;left:169px;z-index:17;box-shadow:0 0 8px #ff6b0066}.second-hand-container{position:absolute;width:2px;height:120px;top:55px;left:174px;transform-origin:1px 120px;z-index:17;will-change:transform}.second-hand{position:absolute;width:2px;height:120px;background-color:var(--second-hand-color);bottom:0;left:0;box-shadow:0 0 5px #ff6b0080}.second-hand-counterweight{position:absolute;width:6px;height:14px;background-color:var(--second-hand-color);bottom:-14px;left:-2px;border-radius:0 0 4px 4px;box-shadow:0 0 5px #ff6b0080}.second-hand-shadow{position:absolute;width:2px;height:120px;top:55px;left:174px;transform-origin:1px 120px;z-index:14;filter:blur(2px);opacity:.3;will-change:transform}.second-hand-shadow:before{content:"";position:absolute;width:2px;height:120px;background:transparent;bottom:0;left:0;box-shadow:0 0 5px 1px #00000026}.second-hand-shadow:after{content:"";position:absolute;width:8px;height:16px;background:transparent;bottom:-16px;left:-3px;box-shadow:0 0 5px 1px #00000026}.attribution{position:fixed;bottom:20px;left:50%;transform:translate(-50%);font-size:12px;color:#323232b3;text-align:center;z-index:100}.attribution a{color:#323232e6;text-decoration:none;transition:color .3s ease}.attribution a:hover{color:#000000e6}.keyboard-info{position:fixed;bottom:40px;left:50%;transform:translate(-50%);font-size:12px;color:#323232b3;text-align:center;z-index:100}.keyboard-info kbd{background-color:#ffffffb3;border:1px solid rgba(0,0,0,.2);border-radius:3px;padding:1px 4px;font-family:monospace}.tweakpane-container{position:fixed;top:20px;right:20px;z-index:1000;background:#ffffffe6;border-radius:5px;padding:5px;box-shadow:0 2px 10px #0000001a;min-width:250px;display:none}