.folder-float{--ff-w:220px;--ff-h:156px;--ff-r:14px;--ff-tab:16px;--ff-back:#1c1b19;--ff-front:#2a2926;--ff-paper:#d6a848;--ff-item:#111;--ff-item-ink:#f6f3ee;--ff-label:#f6f3ee;--ff-spread:168px;--ff-lift:22px;--ff-angle:34deg;--ff-rest:16deg;--ff-open:.52s;--ff-close:.312s;--ff-stagger:45ms;--ff-n:3;--ff-spring:cubic-bezier(.34, 1.56, .64, 1);--ff-ease-out:cubic-bezier(.23, 1, .32, 1);width:var(--ff-w);padding-top:var(--ff-tab);font-family:inherit;font-size:13px;font-weight:500;line-height:1;display:inline-block;position:relative}.folder-float__folder{width:var(--ff-w);height:var(--ff-h);position:relative}.folder-float__back{z-index:0;border-radius:var(--ff-r);background:var(--ff-back);transform-origin:50% 100%;position:absolute;inset:0;transform:perspective(600px)rotateX(8deg)}.folder-float__back:before{content:"";top:calc(-1 * var(--ff-tab));width:42%;height:calc(var(--ff-tab) + var(--ff-r));border-radius:var(--ff-r) var(--ff-r) 0 0;background:inherit;position:absolute;left:0}.folder-float__paper{z-index:1;background:var(--ff-paper);opacity:0;height:50%;transition:transform var(--ff-close) var(--ff-ease-out), opacity var(--ff-close) ease;border-radius:6px;position:absolute;top:10%;left:8%;right:8%;transform:translateY(10px)}.folder-float__front{z-index:2;box-sizing:border-box;border-radius:var(--ff-r);background:linear-gradient(180deg, color-mix(in srgb, var(--ff-front) 88%, #fff), var(--ff-front) 62%);height:76%;color:var(--ff-label);transform:perspective(600px) rotateX(calc(-1 * var(--ff-rest)));transform-origin:50% 100%;transition:transform var(--ff-open) var(--ff-ease-out);flex-direction:column;justify-content:flex-end;gap:5px;padding:14px 16px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -10px 24px #00000038}.folder-float__label{letter-spacing:-.02em;font-size:13px;font-weight:600}.folder-float__sub{letter-spacing:.04em;opacity:.55;font-size:11px}.folder-float__trigger{z-index:3;border-radius:var(--ff-r);cursor:pointer;background:0 0;border:0;height:76%;margin:0;padding:0;position:absolute;bottom:0;left:0;right:0}.folder-float[data-open] .folder-float__front{transform:perspective(600px) rotateX(calc(-1 * var(--ff-angle)))}.folder-float[data-open] .folder-float__paper{opacity:1;transition:transform var(--ff-open) var(--ff-ease-out), opacity .2s ease;transform:translateY(0)}.folder-float__items{top:var(--ff-tab);z-index:1;width:0;height:0;position:absolute;left:50%}.folder-float__item{background:var(--ff-item);height:34px;color:var(--ff-item-ink);font:inherit;white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none;transition:transform var(--ff-close) var(--ff-ease-out), opacity .16s ease;border:0;border-radius:17px;margin:0;padding:0 14px;position:absolute;top:0;left:50%;transform:translate(-50%,44px)scale(.6);box-shadow:0 4px 12px #0000001f}.folder-float[data-open] .folder-float__item{opacity:1;transform:translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1);pointer-events:auto;transition:transform var(--ff-open) var(--ff-spring) calc(var(--i) * var(--ff-stagger)), opacity .16s ease calc(var(--i) * var(--ff-stagger))}.folder-float__drift{animation:folder-float-drift calc(2.4s + var(--i) * .45s) ease-in-out infinite;animation-delay:calc(var(--i) * -.8s);animation-play-state:paused;display:block}.folder-float[data-open] .folder-float__drift{animation-play-state:running}@keyframes folder-float-drift{0%,to{translate:0}50%{translate:0 -3px}}@media (hover:hover) and (pointer:fine){.folder-float[data-open] .folder-float__item:hover{scale:1.05}}@media (prefers-reduced-motion:reduce){.folder-float__front,.folder-float__paper,.folder-float__item{transition:opacity .2s}.folder-float[data-open] .folder-float__front{transform:perspective(600px) rotateX(calc(-1 * var(--ff-rest)))}.folder-float__paper{transform:none}.folder-float__drift{animation:none}}