@layer base,components,variants;@layer variants{.flip-clock{container-type:inline-size;--flip-h: clamp(56px, 33cqi, 150px);display:flex;align-items:center;justify-content:center;gap:calc(var(--flip-h) * .05);width:100%}.flip-clock--with-hours{--flip-h: clamp(56px, 21cqi, 110px)}.flip-group{display:flex;gap:calc(var(--flip-h) * .035)}.flip-group--ms{--flip-h: calc(clamp(56px, 21cqi, 110px)*.65) ;align-self:flex-end;opacity:.85}.flip-card{position:relative;width:calc(var(--flip-h) * .6875);height:var(--flip-h);perspective:calc(var(--flip-h) * 5);font-family:var(--tk-font-mono);font-size:calc(var(--flip-h) * .5);font-weight:500;color:#fff}.flip-card__top,.flip-card__bottom{position:absolute;left:0;right:0;overflow:hidden;background:var(--tk-card-bg, #1a1a1a);color:var(--tk-face-text, #fff);display:flex;align-items:center;justify-content:center}[data-theme=dark] .flip-card__top,[data-theme=dark] .flip-card__bottom{background:var(--tk-card-bg, #111)}.flip-card__top{top:0;height:50%;border-radius:var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068)) 0 0;border-bottom:1px solid var(--tk-divider-color, rgba(0,0,0,.4));box-shadow:0 1px 2px #0003;align-items:flex-end;padding-bottom:0}.flip-card__top span{transform:translateY(50%)}.flip-card__bottom{bottom:0;height:50%;border-radius:0 0 var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068));box-shadow:0 2px 4px #0000004d;align-items:flex-start;padding-top:0}.flip-card__bottom span{transform:translateY(-50%)}.flip-card__flap{position:absolute;left:0;right:0;height:50%;overflow:hidden;backface-visibility:hidden;background:var(--tk-card-bg, #1a1a1a);color:var(--tk-face-text, #fff);display:flex;align-items:center;justify-content:center}[data-theme=dark] .flip-card__flap{background:var(--tk-card-bg, #111)}.flip-card__flap--front{top:0;border-radius:var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068)) 0 0;transform-origin:bottom center;border-bottom:1px solid var(--tk-divider-color, rgba(0,0,0,.4));align-items:flex-end}.flip-card__flap--front span{transform:translateY(50%)}.flip-card__flap--back{bottom:0;border-radius:0 0 var(--tk-card-radius, calc(var(--flip-h) * .068)) var(--tk-card-radius, calc(var(--flip-h) * .068));transform-origin:top center;transform:rotateX(180deg);align-items:flex-start}.flip-card__flap--back span{transform:translateY(-50%)}.flip-card--flipping .flip-card__flap--front{animation:flip-top var(--tk-flip-speed, .3s) ease-in forwards}.flip-card--flipping .flip-card__flap--back{animation:flip-bottom var(--tk-flip-speed, .3s) .15s ease-out forwards}@keyframes flip-top{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-bottom{0%{transform:rotateX(180deg)}to{transform:rotateX(0)}}.flip-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--flip-h) * .12);padding:0 calc(var(--flip-h) * .02)}.flip-colon__dot{width:calc(var(--flip-h) * .08);height:calc(var(--flip-h) * .08);border-radius:50%;background:var(--tk-text-secondary)}[data-fullscreen] .flip-clock{--flip-h: clamp(80px, 20vh, 220px)}[data-fullscreen] .flip-clock--with-hours{--flip-h: clamp(80px, 15vh, 160px)}.flip-clock--complete .flip-card__top,.flip-clock--complete .flip-card__bottom{animation:flip-flash .6s ease-in-out 3}@keyframes flip-flash{0%,to{opacity:1}50%{opacity:.4}}}