.flip-clock-scene{--bg-body:#27272a;--housing-body:#18181b;--housing-face:#09090b;--card-bg:#222224;--card-bg-light:#2a2a2c;--text-color:#f0f0f0;--card-width:140px;--card-height:200px;--font-size:160px;--border-radius:8px;--spacing-group:40px;--spacing-digit:8px;--flip-speed:.6s;--bounce-speed:.2s;--shadow-rest:.05;--shadow-peak:.32;--panel-flat-tint:linear-gradient(to bottom, #ffffff05, #00000008);min-height:100dvh;font-family:var(--font-anton), "Anton", sans-serif;perspective:2000px;background-color:#181818;background-image:radial-gradient(circle at 50% 0,#282828 0%,#080808 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}@media (max-width:1024px){.flip-clock-scene{--card-width:100px;--card-height:150px;--font-size:110px;--spacing-group:24px}}@media (max-width:600px){.flip-clock-scene{--card-width:64px;--card-height:96px;--font-size:72px;--spacing-group:14px;--spacing-digit:5px;perspective:1200px}}.flip-clock-scene .clock-housing{align-items:center;gap:var(--spacing-group);transform-style:preserve-3d;background:#222224;border-radius:24px;padding:40px 50px;display:flex;position:relative;transform:rotateX(5deg);box-shadow:0 50px 100px -20px #000000b3,0 30px 60px -30px #00000080,inset 0 0 0 1px #00000080}.flip-clock-scene .clock-housing:before{content:"";opacity:.3;pointer-events:none;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");border-radius:24px;position:absolute;inset:0}@media (max-width:600px){.flip-clock-scene .clock-housing{border-radius:18px;padding:22px}}.flip-clock-scene .digit-group{gap:var(--spacing-digit);background:#000;border:1px solid #ffffff0d;border-radius:12px;padding:8px;display:flex;position:relative;box-shadow:inset 0 2px 8px #000}.flip-clock-scene .flip-unit{width:var(--card-width);height:var(--card-height);background-color:var(--card-bg);border-radius:var(--border-radius);perspective:1000px;transform-style:preserve-3d;position:relative}.flip-clock-scene .flip-unit:before{content:"";z-index:20;background:linear-gradient(90deg,#252525,#3a3a3a,#282828);border-radius:2px;width:4px;height:12px;position:absolute;top:50%;left:-6px;transform:translateY(-50%);box-shadow:1px 0 2px #00000080,inset 0 1px 1px #ffffff1f,inset 0 -1px 1px #0000004d}.flip-clock-scene .flip-unit:after{content:"";z-index:20;background:linear-gradient(90deg,#282828,#3a3a3a,#252525);border-radius:2px;width:4px;height:12px;position:absolute;top:50%;right:-6px;transform:translateY(-50%);box-shadow:-1px 0 2px #00000080,inset 0 1px 1px #ffffff1f,inset 0 -1px 1px #0000004d}.flip-clock-scene .card-half{background-color:var(--card-bg);backface-visibility:hidden;width:100%;height:50%;position:absolute;left:0;overflow:hidden}.flip-clock-scene .card-top{border-radius:var(--border-radius) var(--border-radius) 0 0;transform-origin:bottom;background-color:var(--card-bg-light);z-index:1;border-bottom:1px solid #000c;top:0}.flip-clock-scene .card-bottom{border-radius:0 0 var(--border-radius) var(--border-radius);transform-origin:top;background-color:var(--card-bg);z-index:1;border-top:1px solid #ffffff0d;justify-content:center;align-items:flex-end;display:flex;bottom:0}.flip-clock-scene .card-num{width:100%;height:200%;color:var(--text-color);font-size:var(--font-size);text-align:center;font-weight:700;line-height:var(--card-height);letter-spacing:-4px;font-variant-numeric:tabular-nums;position:absolute;left:0}.flip-clock-scene .card-top .card-num{top:0}.flip-clock-scene .card-bottom .card-num{bottom:0}.flip-clock-scene .leaf{width:100%;height:50%;transform-style:preserve-3d;transform-origin:bottom;z-index:10;will-change:transform;position:absolute;top:0;left:0}.flip-clock-scene .card-half,.flip-clock-scene .leaf-front,.flip-clock-scene .leaf-back{background-image:var(--panel-flat-tint);box-shadow:none;background-size:100% 100%}.flip-clock-scene .leaf-front{border-radius:var(--border-radius) var(--border-radius) 0 0;background-color:var(--card-bg-light);backface-visibility:hidden;z-index:2;border-bottom:1px solid #000c;position:absolute;inset:0;overflow:hidden;transform:translateZ(.01px)}.flip-clock-scene .leaf-back{border-radius:0 0 var(--border-radius) var(--border-radius);background-color:var(--card-bg);backface-visibility:hidden;z-index:1;border-top:1px solid #ffffff0d;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0;overflow:hidden;transform:rotateX(180deg)translateZ(.01px)}.flip-clock-scene .leaf-front:after{content:"";opacity:var(--shadow-rest);background:linear-gradient(#0000,#000000a6);position:absolute;inset:0}.flip-clock-scene .leaf-back:after{content:"";opacity:var(--shadow-rest);background:linear-gradient(#000000a6,#0000);position:absolute;inset:0}.flip-clock-scene .static-bottom:after{content:"";opacity:.08;background:linear-gradient(#000000c7,#00000014);position:absolute;inset:0}.flip-clock-scene .static-top:after{content:"";opacity:0;background:#000;position:absolute;inset:0}.flip-clock-scene .flipping{animation:flipClockDown var(--flip-speed) ease-in-out forwards}@keyframes flipClockDown{0%{transform:rotateX(0)}99%{transform:rotateX(-179.85deg)}to{transform:rotateX(-179.85deg)}}.flip-clock-scene .flipping .leaf-front:after{animation:flipClockFrontLeafShadow var(--flip-speed) ease-in-out both}.flip-clock-scene .flipping .leaf-back:after{animation:flipClockBackLeafShadow var(--flip-speed) ease-in-out both}.flip-clock-scene .flip-active .static-bottom:after{animation:flipClockStaticBottomShadow var(--flip-speed) cubic-bezier(.32, 0, .18, 1) both}@keyframes flipClockFrontLeafShadow{0%{opacity:var(--shadow-rest)}35%{opacity:.56}70%{opacity:.3}to{opacity:var(--shadow-rest)}}@keyframes flipClockBackLeafShadow{0%{opacity:.52}45%{opacity:.36}78%{opacity:.12}to{opacity:var(--shadow-rest)}}@keyframes flipClockStaticBottomShadow{0%{opacity:.08}30%{opacity:var(--shadow-peak)}72%{opacity:.14}to{opacity:.08}}.flip-clock-scene .clock-separator{opacity:.8;flex-direction:column;justify-content:center;gap:1rem;height:120px;padding:1rem 0;display:flex}.flip-clock-scene .clock-dot{background-color:#1f1f1f;border-radius:9999px;width:.75rem;height:.75rem;box-shadow:inset 0 1px 2px #000c,0 1px 1px #ffffff1a}.flip-clock-scene .clock-overlay-sheen{pointer-events:none;z-index:40;mix-blend-mode:overlay;background-image:linear-gradient(#ffffff0d,#0000);border-radius:24px;position:absolute;inset:0}.flip-clock-scene .clock-overlay-ring{pointer-events:none;z-index:50;border-radius:24px;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff1a,inset 0 1px #ffffff40}.clock-controls{z-index:100;color:#e7e7ea;-webkit-backdrop-filter:blur(6px);background:linear-gradient(#0a0a0cb8,#0a0a0c00);flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;padding:16px 20px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;position:fixed;top:0;left:0;right:0}.clock-control-group{align-items:center;gap:10px;display:flex}.clock-control-label{letter-spacing:.14em;text-transform:uppercase;color:#ffffff73;font-size:11px;font-weight:600}.clock-select-wrap{align-items:center;gap:10px;display:flex}.clock-select{appearance:none;color:#f0f0f0;cursor:pointer;background:#ffffff0f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid #ffffff1f;border-radius:9px;outline:none;padding:8px 30px 8px 12px;font-size:13px;font-weight:500;transition:border-color .15s,background-color .15s}.clock-select:hover{background-color:#ffffff1a;border-color:#ffffff3d}.clock-select:focus-visible{border-color:#fff6}.clock-select option{color:#f0f0f0;background:#1a1a1c}.clock-offset{font-variant-numeric:tabular-nums;color:#ffffff80;min-width:56px;font-size:12px}.clock-swatches{align-items:center;gap:8px;display:flex}.clock-swatch{cursor:pointer;border:2px solid #ffffff2e;border-radius:50%;width:22px;height:22px;padding:0;transition:transform .12s,border-color .12s;position:relative}.clock-swatch:hover{transform:scale(1.12)}.clock-swatch.is-active{border-color:#fff;box-shadow:0 0 0 2px #ffffff40}.clock-swatch-custom{background:conic-gradient(red,#ffae00,#fbff00,#00ff37,#00fffb,#0040ff,#c800ff,red);overflow:hidden}.clock-swatch-custom input[type=color]{opacity:0;cursor:pointer;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}@media (max-width:600px){.clock-controls{gap:10px 18px;padding:12px 14px}.clock-control-label,.clock-offset{display:none}}.flip-clock-scene.is-embedded{perspective:1400px;--card-width:clamp(34px, 9.5vw, 82px);--card-height:clamp(46px, 12.5vw, 106px);--font-size:clamp(46px, 13vw, 108px);--spacing-group:clamp(6px, 1.6vw, 22px);--spacing-digit:clamp(3px, .7vw, 8px);background:0 0;width:100%;min-height:0;padding:8px 0 0;position:relative;inset:auto}.flip-clock-scene.is-embedded .digit-group{padding:clamp(4px,1vw,8px)}.flip-clock-scene.is-embedded .clock-separator{gap:clamp(8px,3vw,22px);height:auto;padding:0}.flip-clock-scene.is-embedded .clock-dot{width:clamp(5px,1.4vw,12px);height:clamp(5px,1.4vw,12px)}.flip-clock-scene.is-embedded .clock-housing{max-width:100%;padding:clamp(7px,1.8vw,14px) clamp(10px,3vw,18px);transform:none;box-shadow:0 1px 2px #00000014,0 8px 24px -12px #00000040,inset 0 0 0 1px #00000080}.clock-controls.is-embedded{z-index:1;-webkit-backdrop-filter:none;color:inherit;background:0 0;justify-content:flex-start;padding:4px 0 0;position:relative;top:auto;left:auto;right:auto}.clock-controls.is-embedded .clock-control-label{color:var(--muted-foreground,#787882e6)}.clock-controls.is-embedded .clock-offset{color:var(--muted-foreground,#787882cc)}.clock-controls.is-embedded .clock-select{color:inherit;background-color:#7878821a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border-color:#78788247}.clock-controls.is-embedded .clock-swatch{border-color:#78788259}.clock-controls.is-embedded .clock-swatch.is-active{border-color:currentColor;box-shadow:0 0 0 2px #78788240}.clock-embed-enter{animation:.5s cubic-bezier(.22,1,.36,1) both clock-embed-enter}@keyframes clock-embed-enter{0%{opacity:0;filter:blur(2px);transform:translateY(6px)scale(.96)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.clock-embed-enter{animation-duration:1ms}}.hero-flip{perspective:1400px}.hero-flip-inner{transform-style:preserve-3d;transform-origin:50%;will-change:transform;transition:transform .85s cubic-bezier(.5,0,.2,1);display:grid;position:relative}.hero-flip.is-flipped .hero-flip-inner{transform:rotateX(-180deg)}.hero-flip-face{backface-visibility:hidden;grid-area:1/1;width:100%;min-width:0;position:relative}.hero-flip-front{flex-direction:column;display:flex}.hero-flip-back{transform:rotateX(180deg)}.hero-flip:not(.is-flipped) .hero-flip-back,.hero-flip.is-flipped .hero-flip-front{pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.hero-flip-inner{transition-duration:1ms}}