:root{--clockheight: 220px;--radius: 30px;--rotationtime: .55s}.flipper{position:relative;width:100%;min-width:15em;height:100%;transform-style:preserve-3d;perspective:1600px}.gear{position:absolute;top:calc(var(--clockheight) / 3);width:12px;height:calc(var(--clockheight) / 3);background:linear-gradient(to bottom,#000,#666 17%,#7f7f7f 52% 52%,#0c0c0c 53%,#595959 87%,#131313);outline:3px solid #000;z-index:99;transform-style:preserve-3d;transform:translateZ(10px);perspective:0}.gear:nth-child(2){left:calc(100% - 12px)}.top,.bottom{box-shadow:0 6px 6px 1px #00000080,0 2px 2px 1px #ffffff26;border-top:2px solid rgb(102,103,110);border-bottom:2px solid #000}.top{position:relative;width:100%;height:calc(50% - 15px);background-image:linear-gradient(#303135,#38393e);margin-top:10px;margin-bottom:5px;border-top-left-radius:calc(var(--radius) * .65);border-top-right-radius:calc(var(--radius) * .65)}.bottom{position:relative;width:100%;height:calc(50% - 15px);background-image:linear-gradient(#393a3f,#414147);margin-top:5px;margin-bottom:15px;border-bottom-left-radius:calc(var(--radius) * .65);border-bottom-right-radius:calc(var(--radius) * .65)}.text{font-size:140px;display:block;position:absolute;overflow:hidden;width:100%;height:100%;line-height:193px;text-align:center;color:#e2e2e2}.bottom .text{line-height:0}.top.new,.bottom.new{position:absolute;left:0;z-index:12}.top.new{top:0;z-index:1}.top.new .text{backface-visibility:hidden}.bottom.new{position:absolute;top:0;height:calc(100% + -0px);transform:rotateX(.5turn);z-index:1;opacity:0}.flipper.flipping .top.new{transform-origin:bottom center;animation:rotate var(--rotationtime) 1 ease-in-out forwards}.flipper.flipping .bottom.new{animation:rotatebottom var(--rotationtime) 1 ease-in-out forwards}@keyframes rotatebottom{0%{opacity:0}49%{opacity:0}50%{opacity:1}to{opacity:1}}@keyframes rotate{0%{transform:rotateX(0) translateY(0)}to{transform:rotateX(-180deg) translateY(-10px)}}body{margin:0;display:flex;height:100vh;align-items:center;justify-content:center;background-color:#262529;color:#fff;font-family:Roboto Mono,monospace}.clock.svelte-1n46o8q{display:grid;padding:0 12px;grid-template-columns:1fr 1fr 1fr;grid-column-gap:12px;min-width:200px;height:220px;border-radius:30px;background-image:linear-gradient(#0e0e0f,#1a191c 20%,#2c2c34 50%,#14141b);box-shadow:inset 0 -3px 6px 3px #0003,inset 0 4px 8px 3px #0006,0 2px 3px 1px #ffffff4d,0 -2px 4px 4px #38383d80}