:root{--card-width:250px;--card-height:350px;--mini-card-width:62.5px;--mini-card-height:87.5px;--slot-padding:4px;--slot-width:calc(var(--card-width) + var(--slot-padding)*2);--slot-height:calc(var(--card-height) + var(--slot-padding)*2);--mini-slot-width:calc(var(--mini-card-width) + var(--slot-padding)*2);--mini-slot-height:calc(var(--mini-card-height) + var(--slot-padding)*2);--binder-padding:12px}.binder-wrapper{perspective:2000px;justify-content:center;width:100%;display:flex}.binder{width:calc(var(--binder-padding)*2 + 4*var(--slot-width));background:linear-gradient(135deg,#fff 0%,#fafafa 55%,#f3f4f6 100%);border:3px solid #d1d5db;border-radius:12px;margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #0000000d,0 8px 24px #0000001f}.binder:before{content:"";z-index:10;pointer-events:none;background:linear-gradient(#0000 0%,#9ca3af 5%,#d1d5db 6%,#9ca3af 7%,#0000 8% 22%,#9ca3af 23%,#d1d5db 24%,#9ca3af 25%,#0000 26% 40%,#9ca3af 41%,#d1d5db 42%,#9ca3af 43%,#0000 44% 56%,#9ca3af 57%,#d1d5db 58%,#9ca3af 59%,#0000 60% 74%,#9ca3af 75%,#d1d5db 76%,#9ca3af 77%,#0000 78% 92%,#9ca3af 93%,#d1d5db 94%,#9ca3af 95%,#0000 96%);width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.binder-page{padding:var(--binder-padding);grid-template-columns:repeat(4,var(--slot-width));grid-template-rows:repeat(2,var(--slot-height));justify-content:center;place-items:center;gap:0;display:grid}@media (max-width:1024px){.binder-page{padding:8px}}@media (max-width:767px){.binder{width:calc(12px*2 + 4*var(--mini-slot-width))}.binder-page{grid-template-columns:repeat(4,var(--mini-slot-width));grid-template-rows:repeat(6,var(--mini-slot-height));padding:6px}}.binder-slot{padding:var(--slot-padding);background:#f3f4f6d9;border:1px solid #1118271f;border-radius:0;justify-content:center;align-items:center;width:100%;height:100%;transition:background .2s;display:flex}.binder-slot:hover{background:#e5e7ebe6}.binder-slot-empty{background:#ffffffe6;border:1px dashed #1118272e;border-radius:0;width:100%;height:100%}.binder-page-container{position:relative;overflow:hidden}.page-flip-enter{animation:.4s ease-out forwards pageFlipIn}.page-flip-exit{animation:.3s ease-in forwards pageFlipOut}.page-flip-enter-reverse{animation:.4s ease-out forwards pageFlipInReverse}.page-flip-exit-reverse{animation:.3s ease-in forwards pageFlipOutReverse}@keyframes pageFlipOut{0%{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(-15deg)}}@keyframes pageFlipIn{0%{opacity:0;transform:rotateY(15deg)}to{opacity:1;transform:rotateY(0)}}@keyframes pageFlipOutReverse{0%{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(15deg)}}@keyframes pageFlipInReverse{0%{opacity:0;transform:rotateY(-15deg)}to{opacity:1;transform:rotateY(0)}}.binder-page-number{text-align:center;color:#11182799;letter-spacing:.1em;text-transform:uppercase;padding:8px 0;font-size:.85rem;font-weight:500}.binder-nav{justify-content:center;align-items:center;gap:16px;padding:12px 0 16px;display:flex}.binder-nav button{color:#111827;cursor:pointer;background:#ffffffe6;border:1px solid #11182726;border-radius:8px;padding:8px 20px;font-weight:500;transition:all .2s}.binder-nav button:hover:not(:disabled){background:#f3f4f6}.binder-nav button:disabled{opacity:.3;cursor:not-allowed}