.folder,.folder *,.folder :before,.folder :after{box-sizing:border-box}.folder{--folder-width:clamp(14rem, 25vw, 22rem);--folder-height:calc(var(--folder-width) * .71);--paper-line:#dfe0dd;width:var(--folder-width);height:var(--folder-height);color:inherit;font:inherit;cursor:pointer;perspective:58rem;-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:0;padding:0;display:block;position:relative}.folder--amber{--back-top:#dc922d;--back-bottom:#cb7620;--front-top:#f5b34a;--front-bottom:#e7962d;--front-shadow:#914d0e6b;--label:#fff8ea;--label-muted:#fff8eab8;--ring:#d69a4b}.folder--graphite{--back-top:#343532;--back-bottom:#212220;--front-top:#30312f;--front-bottom:#1f201e;--front-shadow:#0808076b;--label:#f4f4f1;--label-muted:#f4f4f185;--ring:#777972}.folder--pearl{--back-top:#dedfdb;--back-bottom:#c8cac5;--front-top:#fbfbf9;--front-bottom:#e2e3df;--front-shadow:#6f716c40;--label:#343532;--label-muted:#3435328c;--ring:#bfc1bc}.folder__object{transform-origin:50% 82%;transform-style:preserve-3d;will-change:transform;transition:transform .62s cubic-bezier(.16,1,.3,1);position:absolute;inset:11% 0 0;transform:translate(0,0)rotateX(.001deg)}.folder__back{background:linear-gradient(150deg, var(--back-top), var(--back-bottom));border-radius:.55rem .7rem .95rem .95rem;position:absolute;inset:26% 1.5% 9%;box-shadow:inset 0 1px #ffffff40,inset 0 -.65rem 1.2rem #221f1914}.folder__back:before{content:"";background:linear-gradient(155deg, var(--back-top), var(--back-bottom));clip-path:polygon(0 0,76% 0,100% 100%,0 100%);border-radius:.72rem .72rem 0 0;width:40%;height:42%;position:absolute;top:-23%;left:0}.folder__back:after{content:"";opacity:.8;background:#fff3;border-radius:999px;height:.08rem;position:absolute;inset:.38rem .3rem auto}.folder__papers{z-index:1;transform-style:preserve-3d;position:absolute;inset:10% 5% 15%}.paper{transform-origin:50% 100%;will-change:transform, opacity;background:linear-gradient(145deg,#fff 0 65%,#f3f3f1 100%);border:1px solid #595b5612;border-radius:.65rem .65rem .4rem .4rem;width:48%;height:76%;display:block;position:absolute;bottom:0;left:50%;overflow:hidden;box-shadow:0 .7rem 1.5rem -.9rem #2a2b2857}.paper:before{content:"";background:repeating-linear-gradient(to bottom, var(--paper-line) 0, var(--paper-line) .19rem, transparent .19rem, transparent .57rem);opacity:.78;border-radius:.2rem;position:absolute;inset:18% 14%}.paper--rear{opacity:.92;width:42%;height:72%;transition:transform .56s cubic-bezier(.2,.82,.24,1),opacity .42s;transform:translate3d(-52%,-5%,2px)rotate(-2deg)scale(.94)}.paper--left{width:46%;height:88%;transition:transform .67s cubic-bezier(.18,1.34,.26,1);transform:translate(-82%)rotate(-8deg)scale(.96)}.paper--right{width:50%;height:90%;transition:transform .71s cubic-bezier(.18,1.34,.26,1) 35ms;transform:translate3d(-20%,0,1px)rotate(9deg)scale(.96)}.folder__front{z-index:2;background:radial-gradient(circle at 74% 32%, #fff3, transparent 34%), linear-gradient(145deg, var(--front-top), var(--front-bottom));height:62%;box-shadow:inset 0 1px 0 #ffffff61, inset 0 -.95rem 1.6rem #36312714, 0 1.1rem 1.5rem -1rem var(--front-shadow);transform-origin:50% 100%;will-change:transform;border:1px solid #ffffff3d;border-radius:.55rem .55rem 1rem 1rem;transition:transform .65s cubic-bezier(.16,1,.3,1);position:absolute;bottom:7%;left:0;right:0;overflow:hidden;transform:translateZ(7px)rotateX(.001deg)}.folder__front:after{content:"";filter:blur(.45rem);opacity:.55;background:linear-gradient(100deg,#0000,#ffffff38,#0000);width:34%;transition:transform .9s cubic-bezier(.16,1,.3,1);position:absolute;top:-35%;bottom:-35%;left:28%;transform:translate(-120%)skew(-12deg)}.folder__label{color:var(--label);letter-spacing:-.025em;text-align:left;text-shadow:0 1px #00000014;gap:.2rem;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.47rem,.58vw,.62rem);font-weight:500;line-height:1;display:grid;position:absolute;bottom:16%;left:5.5%}.folder__label small{color:var(--label-muted);font:inherit;font-size:.78em}.folder:is(:hover,:focus,:active) .folder__object{transform:translate(0,0)rotateX(.001deg)}.folder:is(:hover,:focus,:active) .paper--rear{opacity:1;transform:translate3d(-52%,-65%,2px)rotate(-1deg)scale(.98)}.folder:is(:hover,:focus,:active) .paper--left{transform:translate(-86%,-58%)rotate(-7deg)scale(1)}.folder:is(:hover,:focus,:active) .paper--right{transform:translate3d(-18%,-47%,1px)rotate(10deg)scale(1)}.folder:is(:hover,:focus,:active) .folder__front{transform:translate3d(0,.5%,10px)rotateX(-9deg)scaleX(1.018)scaleY(.91)}.folder:is(:hover,:focus,:active) .folder__front:after{transform:translate(245%)skew(-12deg)}.folder:focus-visible:after{content:"";border:2px solid var(--ring);opacity:.85;border-radius:1.35rem;position:absolute;inset:4% -3% -2%}.folder:active .folder__object{transform:translateY(-1%)rotateX(1deg)scale(.985)}@media (prefers-reduced-motion:reduce){.folder__object,.folder__front,.folder__front:after,.paper{transition-duration:.01ms!important;transition-delay:0s!important}}