.folder-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:1/1;perspective:1100px;display:grid;place-items:center}.folder-halo{position:absolute;width:74%;height:16%;left:13%;top:70%;border-radius:50%;background:#0006;filter:blur(28px);transform:rotate(-8deg)}.folder-object{position:relative;width:76%;height:54%;transform-style:preserve-3d;transform:rotate(-7deg) rotateY(-12deg);transition:transform 1.3s cubic-bezier(.22,1,.36,1)}.folder-back{position:absolute;inset:0;border-radius:25px;background:linear-gradient(140deg,#9bbcff,#4977e4 62%,#2452cb);box-shadow:inset 0 1px 1px #fff9,0 15px 50px #16387944;transform:translateZ(-9px)}.folder-tab{position:absolute;top:-11%;left:0;width:42%;height:25%;border-radius:22px 28px 0 0;background:linear-gradient(120deg,#b2cbff,#648eec);transform:translateZ(-10px)}.folder-sheet{position:absolute;inset:8% 7% 4%;border:1px solid #fff;border-radius:15px;background:#f8f9ff;color:#202a42;padding:23px;font-size:13px;line-height:1.7;box-shadow:0 3px 8px #10234a16;transform:translateY(0) rotate(0);transition:transform 1.45s cubic-bezier(.22,1,.36,1)}.folder-sheet strong{display:block;font-size:17px;letter-spacing:-.04em}.folder-sheet span{display:block;color:#7b86a0;margin-top:8px}.folder-sheet.sheet-two{inset:10% 10% 4%;background:#e8edff}.folder-sheet.sheet-three{inset:13% 12% 4%;background:#dde6fc}.folder-front{position:absolute;inset:21% -1% -1%;border-radius:16px 22px 29px 29px;background:linear-gradient(130deg,#689bff,#386eea 45%,#1a45b5);border-top:1px solid #b8d4ff;box-shadow:inset 0 1px 0 #d2e4ffbb,inset 0 -3px 4px #113b9f66,0 18px 27px #03194544;transform-origin:50% 95%;transform:rotateX(-8deg) translateZ(16px);transition:transform 1.45s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;justify-content:flex-end;padding:9%}.folder-front small{font-size:10px;color:#dce7ff;letter-spacing:.18em}.folder-front b{font-size:clamp(32px,4vw,63px);color:#f1f6ff;font-weight:730;letter-spacing:-.07em;line-height:.96;text-shadow:0 1px 0 #113eab}.folder-open .folder-object{transform:rotate(-3deg) rotateY(-4deg) translateY(6%)}.folder-open .sheet-one{transform:translate(2%,-47%) rotate(-5deg)}.folder-open .sheet-two{transform:translate(-12%,-31%) rotate(-14deg)}.folder-open .sheet-three{transform:translate(16%,-24%) rotate(12deg)}.folder-open .folder-front{transform:rotateX(-27deg) translateZ(30px)}.folder-toggle{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);border:1px solid #505864;background:#181d28;color:#ecf1ff;border-radius:99px;font:inherit;font-size:12px;padding:11px 19px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 22px #0002;transition:background .25s}.folder-toggle:hover{background:#283149}.folder-stage:focus-within .folder-toggle{outline-offset:5px}.demo-cursor{position:absolute;width:29px;right:14%;bottom:8%;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px #0005)}.folder-stage.preview-once .demo-cursor{animation:folder-cursor 3.3s cubic-bezier(.22,1,.36,1) both}.folder-click-ring{position:absolute;bottom:1%;left:50%;width:90px;height:40px;margin-left:-45px;border:1px solid #bed4ff;border-radius:99px;opacity:0;pointer-events:none}.preview-once .folder-click-ring{animation:folder-ring 3.3s ease both}@keyframes folder-cursor{0%{opacity:0;transform:translate(35px,20px)}20%{opacity:1}55%,65%{opacity:1;transform:translate(-120px,5px)}74%{transform:translate(-120px,5px) scale(.88)}86%{opacity:1;transform:translate(-120px,5px)}100%{opacity:0;transform:translate(-130px,5px)}}@keyframes folder-ring{0%,67%{opacity:0;scale:.8}74%{opacity:.8;scale:.95}100%{opacity:0;scale:1.7}}@media(max-width:700px){.folder-sheet{padding:18px;font-size:10px}.folder-sheet strong{font-size:14px}.folder-front b{font-size:47px}.folder-toggle{font-size:11px}.folder-stage{max-width:440px;margin-inline:auto}}@media(prefers-reduced-motion:reduce){.folder-object,.folder-sheet,.folder-front{transition:none}.demo-cursor,.folder-click-ring{display:none}}