.pattern-preview.hourglass-flip-preview{display:grid;place-items:center;height:168px;padding:18px;overflow:hidden;isolation:isolate;background:transparent}.pattern-preview.hourglass-flip-preview.pattern-preview--inspector{height:auto;min-height:224px;padding:28px}.hourglass-flip-demo{display:inline-grid;grid-template-columns:92px minmax(0,auto);align-items:center;justify-content:center;gap:6px;min-width:220px;min-height:100px;padding:14px 26px 14px 14px;border:1px solid color-mix(in srgb,var(--hourglass-accent) 28%,transparent);border-radius:18px;color:var(--hourglass-text);background:var(--hourglass-surface);box-shadow:0 14px 34px -26px color-mix(in srgb,var(--hourglass-accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}.hourglass-flip-demo__label{min-width:64px;color:var(--hourglass-text);font-size:.9rem;font-weight:700;line-height:1;white-space:nowrap;text-shadow:0 0 12px color-mix(in srgb,var(--hourglass-accent) 22%,transparent)}.hourglass-flip{display:grid;place-items:center;width:92px;height:92px;contain:layout paint}.hourglass-flip__rotor{display:grid;place-items:center;width:64px;height:64px;transform-origin:50% 50%}.hourglass-flip--real .hourglass-flip__rotor{transform:rotate(var(--hourglass-turns,0deg));transition:transform .7s cubic-bezier(.45,.05,.3,1)}.hourglass-flip--fade .hourglass-flip__rotor{animation:hourglassFadeSettle var(--hourglass-drain) ease-in-out infinite}.hourglass-flip svg{display:block;width:64px;height:64px;overflow:visible}.hourglass-flip__glass{fill:none;stroke:var(--hourglass-accent);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hourglass-accent) 42%,transparent))}.hourglass-flip__cap{fill:var(--hourglass-shell);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--hourglass-shell) 34%,transparent))}.hourglass-flip__sand{fill:var(--hourglass-fill);transform-box:fill-box}.hourglass-flip__stream{opacity:0;stroke:var(--hourglass-fill);stroke-width:2.4;stroke-linecap:round}.hourglass-flip--real .hourglass-flip__sand--bottom{transform:translateY(36px)}.hourglass-flip--real.is-reversed .hourglass-flip__sand--top{transform:translateY(-36px)}.hourglass-flip--real.is-reversed .hourglass-flip__sand--bottom{transform:translateY(0)}.hourglass-flip--real.is-draining .hourglass-flip__stream{opacity:1}.hourglass-flip--real.is-draining.is-forward .hourglass-flip__sand--top{transform:translateY(36px);transition:transform var(--hourglass-drain) linear}.hourglass-flip--real.is-draining.is-forward .hourglass-flip__sand--bottom,.hourglass-flip--real.is-draining.is-reversed .hourglass-flip__sand--top{transform:translateY(0);transition:transform var(--hourglass-drain) linear}.hourglass-flip--real.is-draining.is-reversed .hourglass-flip__sand--bottom{transform:translateY(-36px);transition:transform var(--hourglass-drain) linear}.hourglass-flip--fade .hourglass-flip__sand--top{animation:hourglassFadeDrain var(--hourglass-drain) ease-in-out infinite}.hourglass-flip--fade .hourglass-flip__sand--bottom{animation:hourglassFadeFill var(--hourglass-drain) ease-in-out infinite}.hourglass-flip--fade .hourglass-flip__stream{animation:hourglassFadeStream var(--hourglass-drain) ease-in-out infinite}@keyframes hourglassFadeSettle{0%,6%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1.04)}93%{opacity:0;transform:scale(1.04)}94%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes hourglassFadeDrain{0%{transform:translateY(0)}70%,93%{transform:translateY(36px)}93.5%,to{transform:translateY(0)}}@keyframes hourglassFadeFill{0%{transform:translateY(36px)}70%,93%{transform:translateY(0)}93.5%,to{transform:translateY(36px)}}@keyframes hourglassFadeStream{0%,5%{opacity:0}66%,8%{opacity:1}70%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.hourglass-flip__rotor,.hourglass-flip__sand,.hourglass-flip__stream{animation:none;transition:none}.hourglass-flip--fade .hourglass-flip__sand,.hourglass-flip--real .hourglass-flip__rotor,.hourglass-flip--real .hourglass-flip__sand{transform:none}.hourglass-flip__stream{opacity:0}}