.binder-section{background:radial-gradient(at 50% 35%,#18120c 0,#090909 40%,#050505 75%)}.binder-set-card{background:radial-gradient(at 100% 0,#231a13,#111 65%)}.binder-stage{outline-offset:8px;padding-inline:65px;position:relative}.binder-cover{perspective:2200px;touch-action:pan-y;background:repeating-linear-gradient(28deg,#161717 0 2px,#1b1c1c 2px 3px);border:2px solid #474747;border-radius:35px;padding:3.3% 2.6%;position:relative;box-shadow:0 22px 42px #000b,inset 0 0 0 5px #131414,inset 0 0 0 7px #393a3a,inset 0 0 0 10px #101111}.binder-cover:before{content:"";pointer-events:none;opacity:.55;border:1px dashed #5c5c5c;border-radius:25px;position:absolute;inset:12px}.binder-cover:after{content:"";background:#161616;border:2px solid #737373;border-radius:4px;width:10px;height:20px;position:absolute;bottom:4px;left:calc(50% - 5px);transform:rotate(12deg)}.binder-spine{background:linear-gradient(90deg,#0007,#2a2a2a 35%,#080808 55%,#222 85%,#0005);border-radius:40%;width:4.6%;position:absolute;inset:2% auto 2% 47.7%;box-shadow:0 0 12px #000}.binder-spread{grid-template-columns:1fr 1fr;gap:5%;display:grid;position:relative}.binder-page{background:#171819;border:1px solid #4d4e4e;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:4px;display:grid;box-shadow:0 2px #777,0 5px #161717,0 7px #414141,0 10px 14px #000}.binder-pocket{aspect-ratio:.7;background:linear-gradient(116deg,#46474850 0,#1c1d1e70 40%,#50515340 100%);border:1px solid #545556;border-bottom:2px solid #131415;min-width:0;padding:7% 5% 6%;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #a9acae80,inset 0 -2px 2px #7775}.binder-pocket:after{content:"";pointer-events:none;z-index:2;background:linear-gradient(125deg,#ffffff14 0%,#ffffff02 25%,#0000 30%,#ffffff0b 70%,#0000 75%);border:1px solid #ffffff10;position:absolute;inset:0}.binder-card{background:#151719;border-radius:4px;width:100%;height:100%;transition:transform .18s;display:block;position:relative;overflow:hidden}.binder-card:hover,.binder-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px;transform:translateY(-2%)}.binder-card-info{bottom:0;color:#fff;font:9px var(--font-mono);opacity:0;background:#000d;flex-wrap:wrap;justify-content:space-between;gap:2px;padding:5px;transition:opacity .2s;display:flex;position:absolute;inset-inline:0}.binder-card:hover .binder-card-info,.binder-card:focus-visible .binder-card-info{opacity:1}.binder-card-fallback{color:#aaa;place-items:center;height:100%;padding:5px;font-size:clamp(7px,1vw,13px);display:grid}.binder-empty-mark{color:#ffffff0f;place-items:center;height:100%;font-size:20px;display:grid}.binder-nav{z-index:10;border:1px solid var(--accent);width:48px;height:48px;color:var(--accent);border-radius:50%;place-items:center;transition:background .2s;display:grid;position:absolute;top:43%}.binder-nav:hover:not(:disabled){background:#ff6b2c20}.binder-nav:disabled{opacity:.25;cursor:default}.binder-nav-prev{left:0}.binder-nav-next{right:0}.binder-nav span{color:#ccc;text-align:center;font:9px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;position:absolute;top:60px}.binder-turn{width:45%;transform-style:preserve-3d;z-index:5;pointer-events:none;position:absolute;top:4.5%;bottom:4.5%}.binder-turn-next{transform-origin:-4.9%;animation:.78s cubic-bezier(.3,.05,.25,1) both binder-next;left:52.2%}.binder-turn-prev{transform-origin:104.9%;animation:.78s cubic-bezier(.3,.05,.25,1) both binder-prev;right:52.2%}.binder-turn-front,.binder-turn-back{backface-visibility:hidden;background:#222;position:absolute;inset:0}.binder-turn-front .binder-page,.binder-turn-back .binder-page{height:100%}.binder-turn-back{transform:rotateY(180deg)}@keyframes binder-next{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes binder-prev{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@media (max-width:640px){.binder-stage{padding-inline:0;padding-bottom:68px}.binder-cover{border-radius:17px;padding:4% 2.6%;box-shadow:0 12px 25px #0009,inset 0 0 0 3px #131414,inset 0 0 0 4px #555}.binder-cover:before{border-radius:12px;inset:5px}.binder-page{gap:1px;padding:1px}.binder-pocket{border-width:.5px;padding:6% 3%}.binder-nav{top:auto;bottom:0}.binder-nav-prev{left:calc(50% - 65px)}.binder-nav-next{right:calc(50% - 65px)}.binder-nav span{display:none}.binder-card{border-radius:2px}.binder-turn{top:5%;bottom:5%}}@media (prefers-reduced-motion:reduce){.binder-card{transition:none}.binder-turn{animation-duration:1ms}}
