@layer components{:root:has(.az-crate){--az-head:64px;scroll-padding-top:var(--az-head)}@media (max-width:640px){:root:has(.az-crate){--az-head:54px}}.az-crate{--step:16svh;overflow-x:clip;height:calc(100svh + 25 * var(--step))}.crate-snap{position:absolute;top:calc(var(--i) * var(--step) + var(--az-head));left:0;width:1px;height:1px;scroll-snap-align:start}.crate-stage{--p:0;--v:0;--size:min(300px,36svh);position:relative;width:100%;height:calc(var(--size) * 1.12);touch-action:pan-y;cursor:grab;user-select:none}.crate-stage[data-dragging]{cursor:grabbing}.crate-stage[data-dragging] .crate-sleeve{translate:none}@media (max-width:800px){.crate-stage{--size:min(56vw,32svh)}}.crate-stack{position:absolute;inset:0}.crate-record{--d:calc(var(--i) - var(--p));--a:max(var(--d),calc(var(--d) * -1));--near:clamp(-1,var(--d),1);--lift:clamp(0,calc(1 - var(--a)),1);--s:max(var(--v),calc(var(--v) * -1));--gap:calc(0.14 + var(--s) * 0.12);--wave:calc(sin(calc(var(--d) * 1.1)) * var(--v) * var(--size) * 0.07);position:absolute;bottom:0;left:calc(50% - var(--size) / 2);z-index:calc(100 - var(--a) * 10);width:var(--size);height:var(--size);transform-origin:50% 100%;transform:translate(calc(var(--near) * var(--size) * .66 + (var(--d) - var(--near)) * var(--size) * var(--gap)),calc(var(--lift) * var(--size) * -.08 + var(--wave))) scale(calc(1 - min(var(--a), 5) * .07));opacity:clamp(0,calc(6 - var(--a)),1);will-change:transform}.crate-sleeve{position:absolute;inset:0;display:block;box-shadow:0 1px 0 rgba(32,36,35,.08),0 calc(var(--lift) * 22px + 8px) calc(var(--lift) * 24px + 18px) -14px rgba(32,36,35,.4);transition:translate .5s var(--ease-expo);-webkit-user-drag:none}.crate-sleeve:is(:hover,:focus-visible){translate:0 -4px}.crate-chip{position:relative;width:100%;height:100%;font-size:calc(var(--size) * .5)}.crate-chip:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#f7f8f5;opacity:calc(min(var(--a), 4) * .1);pointer-events:none}@media (prefers-reduced-motion:no-preference){.crate-caption{animation:crate-caption .5s var(--ease-expo) both}}@keyframes crate-caption{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:no-preference){:root:has(.az-crate){scroll-snap-type:y proximity}}}