.flip-clock{--flip-tile:var(--color-text);--flip-digit-color:var(--color-bg)}html:not([data-theme]) .flip-clock,[data-theme=cocoa] .flip-clock,[data-theme=starry-nights] .flip-clock,[data-theme=rose-noir] .flip-clock,[data-theme=midnight-blue] .flip-clock,[data-theme=twilight-forest] .flip-clock{--flip-tile:var(--color-bg);--flip-digit-color:var(--color-text)}.flip-clock-wrap{container-type:inline-size}.flip-clock{--flip-w:clamp(1.25rem, calc(100cqi / 10.6), 3.6rem);--flip-h:calc(var(--flip-w) * 1.45);--flip-gap:calc(var(--flip-w) * .08);justify-content:center;align-items:flex-start;gap:calc(var(--flip-w) * .35);perspective:600px;display:flex}.flip-unit{flex-direction:column;align-items:center;gap:8px;display:flex}.flip-unit__digits{gap:var(--flip-gap);display:flex}.flip-unit__label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);font-size:clamp(.62rem,2.4cqi,.78rem);font-weight:700}.flip-digit{width:var(--flip-w);height:var(--flip-h);font-family:var(--font-heading);font-weight:800;font-size:calc(var(--flip-h) * .66);font-variant-numeric:tabular-nums;color:var(--flip-digit-color);border-radius:calc(var(--flip-w) * .12);display:block;position:relative;box-shadow:0 2px 6px #00000040}.flip-digit__half{background:var(--flip-tile);backface-visibility:hidden;width:100%;height:50%;position:absolute;left:0;overflow:hidden}.flip-digit__half>span{justify-content:center;align-items:center;width:100%;height:200%;line-height:1;display:flex;position:absolute;left:0}.flip-digit__half--top{border-radius:inherit;transform-origin:bottom;border-bottom-right-radius:0;border-bottom-left-radius:0;top:0}.flip-digit__half--top>span{top:0}.flip-digit__half--bottom{border-radius:inherit;transform-origin:top;border-top:max(1px, calc(var(--flip-h) * .012)) solid var(--color-surface);border-top-left-radius:0;border-top-right-radius:0;bottom:0}.flip-digit__half--bottom>span{top:-100%}.flip-digit__flap-top{z-index:2;animation:.3s ease-in forwards flip-top}.flip-digit__flap-bottom{z-index:2;animation:.3s ease-out .3s forwards flip-bottom;transform:rotateX(90deg)}@keyframes flip-top{to{transform:rotateX(-90deg)}}@keyframes flip-bottom{to{transform:rotateX(0)}}@media (prefers-reduced-motion:reduce){.flip-digit__flap-top,.flip-digit__flap-bottom{animation-duration:1ms;animation-delay:0s}}.flip-clock__done{text-align:center;color:var(--color-text);font-weight:700}