:root{--folder-color:#2563eb;--folder-back-color:#1d4ed8;--paper-1:#fff;--paper-2:#f8fafc;--paper-3:#f1f5f9}.folder-wrapper{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:24px 28px 12px;display:inline-flex;position:relative;overflow:visible}.folder{cursor:pointer;outline:none;transition:all .35s cubic-bezier(.16,1,.3,1)}.folder:hover,.folder.open{transform:translateY(-6px)}.folder:hover .paper:first-child,.folder.open .paper:first-child{z-index:5;transform:translate(calc(-115% + var(--magnet-x,0px)),calc(-65% + var(--magnet-y,0px)))rotateZ(-15deg)!important}.folder:hover .paper:first-child:hover,.folder.open .paper:first-child:hover{z-index:25;transform:translate(calc(-115% + var(--magnet-x,0px)),calc(-65% + var(--magnet-y,0px)))rotateZ(-15deg)scale(1.15)!important}.folder:hover .paper:nth-child(2),.folder.open .paper:nth-child(2){z-index:6;height:85%;transform:translate(calc(15% + var(--magnet-x,0px)),calc(-65% + var(--magnet-y,0px)))rotateZ(15deg)!important}.folder:hover .paper:nth-child(2):hover,.folder.open .paper:nth-child(2):hover{z-index:25;transform:translate(calc(15% + var(--magnet-x,0px)),calc(-65% + var(--magnet-y,0px)))rotateZ(15deg)scale(1.15)!important}.folder:hover .paper:nth-child(3),.folder.open .paper:nth-child(3){z-index:7;height:90%;transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-100% + var(--magnet-y,0px)))rotateZ(2deg)!important}.folder:hover .paper:nth-child(3):hover,.folder.open .paper:nth-child(3):hover{z-index:25;transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-100% + var(--magnet-y,0px)))rotateZ(2deg)scale(1.18)!important}@media (max-width:640px){.folder-wrapper{padding:16px 20px 8px}.folder:hover .paper:first-child,.folder.open .paper:first-child{transform:translate(calc(-90% + var(--magnet-x,0px)),calc(-55% + var(--magnet-y,0px)))rotateZ(-12deg)!important}.folder:hover .paper:nth-child(2),.folder.open .paper:nth-child(2){transform:translate(calc(-5% + var(--magnet-x,0px)),calc(-55% + var(--magnet-y,0px)))rotateZ(12deg)!important}.folder:hover .paper:nth-child(3),.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x,0px)),calc(-85% + var(--magnet-y,0px)))rotateZ(2deg)!important}}.folder:hover .folder__front,.folder.open .folder__front{transform:skew(15deg)scaleY(.6)}.folder:hover .right,.folder.open .right{transform:skew(-15deg)scaleY(.6)}.folder__back{background:var(--folder-back-color);border-radius:0 10px 10px;width:110px;height:80px;position:relative;box-shadow:0 10px 25px -5px #00000040}.folder__back:after{z-index:0;content:"";background:var(--folder-back-color);border-radius:5px 5px 0 0;width:36px;height:10px;position:absolute;bottom:98%;left:0}.paper{z-index:2;background:var(--paper-1);border:1px solid #fff6;border-radius:6px;width:78%;height:84%;transition:all .35s cubic-bezier(.16,1,.3,1);position:absolute;bottom:10%;left:50%;overflow:hidden;transform:translate(-50%,10%);box-shadow:0 6px 16px #0003}.paper:nth-child(2){background:var(--paper-2);width:82%;height:78%}.paper:nth-child(3){background:var(--paper-3);width:88%;height:72%}.folder__front{z-index:10;background:var(--folder-color);transform-origin:bottom;border-radius:5px 10px 10px;width:100%;height:100%;transition:all .3s ease-in-out;position:absolute;box-shadow:inset 0 2px 4px #ffffff40,0 4px 12px #00000026}.folder:focus-visible{outline-offset:4px;border-radius:10px;outline:2px solid #fff}
.card-swap-container{transform-origin:50%;perspective:1200px;perspective-origin:50%;position:absolute;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.card{border:1px solid var(--border);background:var(--card);color:var(--card-foreground);will-change:transform,opacity;backface-visibility:hidden;border-radius:24px;position:absolute;top:50%;left:50%;box-shadow:0 10px 25px -5px #0000001f,0 0 0 1px #0000000a}.card img{will-change:auto;transform:none}.dark .card{color:#fff;background:#09090b;border:1px solid #ffffff26;box-shadow:0 16px 36px -6px #000000bf,0 0 0 1px #ffffff0f}@media (max-width:1400px){.card-swap-container{transform:translate(-50%,-50%)scale(.92)}}@media (max-width:1200px){.card-swap-container{transform:translate(-50%,-50%)scale(.85)}}@media (max-width:1024px){.card-swap-container{transform:translate(-50%,-50%)scale(.8)}}@media (max-width:768px){.card-swap-container{transform:translate(-50%,-50%)scale(.7)}}@media (max-width:580px){.card-swap-container{transform:translate(-50%,-50%)scale(.58)}}@media (max-width:440px){.card-swap-container{transform:translate(-50%,-50%)scale(.52)}}@media (max-width:380px){.card-swap-container{transform:translate(-50%,-50%)scale(.46)}}