:root{--degHour: 0;--degMin: 0;--degSec: 0;--hdigiColor: #000000ff;--htmlBg: transparent}html{background:var(--htmlBg)}.clock{width:500px;height:500px;background:#ddf6ffff center center no-repeat;position:relative;border-radius:50%;margin:auto}.h-hand,.m-hand,.s-hand{position:absolute;transform-origin:bottom;border-radius:40%}.h-hand{width:16px;height:160px;background:#999;top:calc(50% - 160px);left:calc(50% - 8px);rotate:var(--degHour)}.m-hand{width:10px;height:220px;background:#999;top:calc(50% - 220px);left:calc(50% - 5px);rotate:var(--degMin)}.s-hand{width:4px;height:200px;background:#0bd;top:calc(50% - 200px);left:calc(50% - 2px);rotate:var(--degSec)}.s-hand:after{border-radius:50%;display:block;content:"";width:3px;height:3px;background:#0bd;position:absolute;bottom:-1.5px;left:-1.5px}.sec-mark{width:10px;position:absolute;transform-origin:bottom;top:calc(50% - 2px);left:calc(50% + 230px);border-width:2px;border-style:solid;border-color:#f0f;margin:none}.min-mark{width:28px;position:absolute;transform-origin:bottom;top:calc(50% - 230px);left:calc(50% - 15px);border-width:2px;border-style:solid;border-color:#00f;rotate:45deg;margin:none}.sec-bar{width:1px;height:225px;position:absolute;transform-origin:50% 0%;top:50%;left:calc(50% - 1px);border-width:1px;border-style:solid;border-color:#0f0;background-color:#0f0;border-radius:1px;transform:rotate(var(--degSec));margin:0;padding:0}.min-bar{width:3px;height:215px;position:absolute;transform-origin:50% 0%;top:50%;left:calc(50% - 2px);border-width:1px;border-style:solid;border-color:#00f;background-color:#00f;border-radius:2px;transform:rotate(var(--degMin));margin:0;padding:0}.hour-bar{width:7px;height:150px;position:absolute;transform-origin:50% 0%;top:50%;left:calc(50% - 4px);border-width:1px;border-style:solid;border-color:red;background-color:red;border-radius:4px;transform:rotate(var(--degHour));margin:0;padding:0}.per1m-mark{width:0px;height:10px;position:absolute;transform-origin:50% 0%;border-width:1px;border-style:solid;border-color:#00f;background-color:#00f;margin:0;padding:0}.per5m-mark{width:3px;height:10px;position:absolute;transform-origin:50% 0%;border-width:1px;border-style:solid;border-color:#00f;background-color:#00f;margin:0;padding:0}.hdigi{top:calc(50% - 25px);left:calc(50% - 25px);position:absolute;color:var(--hdigiColor)}.hdigi>p{font-size:40px;width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:0;padding:0}div.icon{height:32px;width:32px;position:relative;margin:15px;overflow:hidden;display:inline-block}div.icon div.gear:before{content:"";width:18px;height:18px;background:transparent;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;border:5px dotted #333;position:absolute;left:-10px;top:-10px;z-index:-1}div.icon div.gear{width:8px;height:8px;background:transparent;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;border:6px solid #333;position:absolute;left:4px;top:4px}.canvas-wrap{margin:0;display:flex;justify-content:center;align-items:flex-start;height:100%;background-color:transparent;font-size:0}.canvas-target{width:100%;max-width:500px;min-width:200px;aspect-ratio:1 / 1;background-color:transparent;display:flex;justify-content:center;align-items:center;padding:0;box-sizing:border-box}body{padding:1rem;font-family:Helvetica Neue,Helvetica,Hiragino Sans,Arial,Yu Gothic,Meiryo,sans-serif}