@import "https://fonts.googleapis.com/css?family=BenchNine:300,400";.lock-container{box-sizing:border-box;container-type:size}.clock-container{aspect-ratio:1;background:#111;border-radius:50%;width:47.5cqw;height:47.5cqw;font-family:BenchNine,sans-serif;position:absolute;overflow:hidden;transform:translate(59.5%,95.2%);container-type:size}.clock-container .spear{z-index:200;background:red;width:50%;height:1px;position:absolute;top:49.8%;left:50%;box-shadow:0 3px 3px #0006}.clock-container .spear:after{content:"";border:7px solid #0000;border-right-color:red;position:absolute;top:-6.5px;right:0}.clock-container .spear:before{content:"";border:7px solid #0000;border-left-color:red;position:absolute;top:-6.5px}.clock-container .clock-analog{z-index:5;background:#fff;border-radius:50%;width:100%;height:100%;position:absolute;box-shadow:inset 0 0 25px 3px #000;container-type:size}.clock-container .clock-analog .dail,.clock-container .clock-analog .second,.clock-container .clock-analog .minute,.clock-container .clock-analog .hour,.clock-container .clock-analog .days{z-index:100;width:20px;height:20px;margin:auto;font-size:2cqw;transition:all .2s ease-in .2s;position:absolute;inset:0;transform:rotate(90deg)}.clock-container .clock-analog .dail span,.clock-container .clock-analog .second span,.clock-container .clock-analog .minute span,.clock-container .clock-analog .hour span,.clock-container .clock-analog .days span{text-align:center;transform-origin:50%;z-index:5;width:20px;height:20px;line-height:20px;position:absolute}.clock-container .clock-analog .dail span:after{content:"";opacity:.4;background:#fff;border-radius:50%;width:1cqw;height:1cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.clock-container .clock-analog .dail{z-index:110}.clock-container .clock-analog .second{z-index:120;font-size:4cqw}.clock-container .clock-analog .minute{z-index:130;color:#fff;font-size:4cqw}.clock-container .clock-analog .hour{z-index:140;font-size:5cqw}.clock-container .clock-analog .days{z-index:150;color:#fff;font-size:4cqw}.clock-container .clock-analog .dail:after{content:"";background:#333;border-radius:50%;width:100cqw;height:100cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 25px 2px #000}.clock-container .clock-analog .second:after{content:"";background:#a6a6a6;border-radius:50%;width:93cqw;height:93cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 15px 2px #0009}.clock-container .clock-analog .minute:after{content:"";background:#333;border-radius:50%;width:80cqw;height:80cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 25px 2px #000}.clock-container .clock-analog .hour:after{content:"";background:#a6a6a6;border-radius:50%;width:60cqw;height:60cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 15px 2px #0009}.clock-container .clock-analog .days:after{content:"";background:#333;border-radius:50%;width:40cqw;height:40cqw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 15px 2px #0009}.clock-container .clock-analog .dail span{color:#fff0}.clock-container .clock-analog .dail span:nth-child(5n+1):after{width:4cqw}.clock-container .clock-digital{z-index:7;background:#090909;border-radius:220px 0 0 220px;width:50%;height:100%;position:absolute;box-shadow:5px 0 15px #000}.clock-container .clock-digital .round-border{z-index:5;border:3.2cqw solid #8e0a0a;border-right:none;border-radius:460px 0 0 460px;width:100%;height:100%;position:absolute}.clock-container .clock-digital .unlock{text-align:right;color:#fff;width:90%;font-size:11cqw;position:absolute;top:50%;right:5%;transform:translateY(-50%)}.clock-container .clock-digital .target-day{text-align:right;color:#fff;width:80%;font-size:4.5cqw;position:absolute;bottom:22%;right:5%}.clock-container .clock-digital .seconds,.clock-container .clock-digital .minutes,.clock-container .clock-digital .hours,.clock-container .clock-digital .days{text-align:right;color:#fff;width:40%;font-size:4cqw;position:absolute;top:19%;right:5%}.clock-container .clock-digital .seconds{top:4%}.clock-container .clock-digital .minutes{top:12%}.clock-container .clock-digital .hours{top:21%}.clock-container .clock-digital .days{top:32%}.clock-lock{aspect-ratio:1;flex:none;align-self:flex-start;width:100%;position:relative}.clock-lock>svg{width:100%;height:100%;position:absolute;inset:0}.clock-lock .clock-window{border-radius:50%;width:41.5%;height:41.5%;position:absolute;top:47.5%;left:31%;overflow:hidden}.clock-lock .clock-window .clock-container{width:100cqw;height:100cqw;top:0;left:0;transform:none}