:root{--clock-ink:#a63232;color-scheme:dark;background:#090909;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 50% 44%,#161616 0,#0d0d0d 47%,#080808 100%);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.clock{width:min(94vw,150vh,1500px);width:min(94vw,150svh,1500px);container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:4.5cqw}
.time-case{width:100%;padding:1.35cqw;border:1px solid #292929;border-radius:2.3cqw;background:linear-gradient(145deg,#1c1c1c,#111 55%,#161616);box-shadow:0 2px 1px #ffffff08 inset,0 2.5cqw 5cqw #0009,0 .5cqw 1cqw #000}
.time-row{display:grid;grid-template-columns:1fr 5.8% 1fr;align-items:center}
.flip{position:relative;isolation:isolate;perspective:1200px;border-radius:1.25cqw;background:#222;box-shadow:0 2px 2px #000c,0 0 0 1px #000;--face-height:37cqw;color:var(--clock-ink);font-variant-numeric:tabular-nums;overflow:visible}
.time-card{height:var(--face-height);font-size:32cqw;font-weight:650;letter-spacing:-1.5cqw}
.half{position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(#292929,#222);border-radius:1.15cqw 1.15cqw 0 0}
.half span{position:absolute;left:0;width:100%;height:var(--face-height);display:flex;align-items:center;justify-content:center;padding-right:1cqw;line-height:1;transform:scaleX(.93);text-shadow:0 2px 1px #0006}
.upper{top:0;transform-origin:center bottom}
.upper span{top:0}
.lower{bottom:0;transform-origin:center top;background:linear-gradient(#222,#262626);border-radius:0 0 1.15cqw 1.15cqw}
.lower span{bottom:0}
.flip::after{content:"";position:absolute;z-index:5;left:0;right:0;top:calc(50% - 1px);height:2px;background:#0a0a0a;box-shadow:0 1px 0 #ffffff05;pointer-events:none}
.flip::before{content:"";position:absolute;z-index:6;left:-.22cqw;top:calc(50% - 1.3cqw);width:.48cqw;height:2.6cqw;border-radius:2px;background:linear-gradient(90deg,#080808,#5b5b5b,#171717);box-shadow:calc(43.35cqw) 0 0 #353535;pointer-events:none}
.flap-upper{z-index:3;visibility:hidden}
.flap-lower{z-index:4;visibility:hidden;transform:rotateX(90deg)}
.flipping .flap-upper{visibility:visible;animation:flip-top 280ms cubic-bezier(.45,.05,.8,.5) forwards}
.flipping .flap-lower{visibility:visible;animation:flip-bottom 310ms 280ms cubic-bezier(.15,.5,.35,1) both}
@keyframes flip-top{to{transform:rotateX(-90deg);filter:brightness(.5)}}
@keyframes flip-bottom{from{transform:rotateX(90deg);filter:brightness(.5)}to{transform:rotateX(0);filter:brightness(1)}}
.colon{height:100%;display:flex;flex-direction:column;gap:7cqw;align-items:center;justify-content:center}
.colon i{width:1.25cqw;height:1.25cqw;border-radius:50%;background:var(--clock-ink);box-shadow:0 1px 2px #000}
.date-case{width:88%;display:grid;grid-template-columns:2.65fr .9fr 2.35fr 1.2fr;gap:1.05cqw;padding:1cqw;border:1px solid #252525;border-radius:1.35cqw;background:linear-gradient(145deg,#191919,#101010);box-shadow:0 1.2cqw 2.5cqw #0009}
.date-card{--face-height:8.7cqw;height:var(--face-height);font-size:2.95cqw;font-weight:600;letter-spacing:.055cqw;color:var(--clock-ink);border-radius:.6cqw}
.date-card .half{border-radius:.6cqw .6cqw 0 0;background:linear-gradient(#252525,#202020)}
.date-card .lower{border-radius:0 0 .6cqw .6cqw;background:linear-gradient(#202020,#242424)}
.date-card .half span{transform:none;padding:0 .4cqw}
.date-card::before{display:none}
.day{font-size:4.4cqw;letter-spacing:0;color:var(--clock-ink)}
.year{font-size:2.7cqw}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.notice{font-size:16px;color:var(--clock-ink);text-align:center}
@media(orientation:portrait){.clock{width:95vw;gap:8cqw}.date-case{width:96%}.date-card{--face-height:11cqw;font-size:3.1cqw}.day{font-size:4.7cqw}.year{font-size:2.9cqw}}
@media(prefers-reduced-motion:reduce){.flipping .flap-upper,.flipping .flap-lower{animation:none;visibility:hidden}}