.binder{--binder-paper:var(--bento-solid);--binder-shade:color-mix(in srgb, var(--ludex-ink) 9%, transparent);background:var(--bento-grain), radial-gradient(120% 90% at 25% 0%, color-mix(in oklab, var(--ludex-ink), white 14%), var(--ludex-ink) 72%);box-shadow:0 40px 70px -30px color-mix(in srgb, var(--ludex-ink) 65%, transparent), 0 12px 24px -12px color-mix(in srgb, var(--ludex-ink) 40%, transparent), inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff0d;border-radius:24px;padding:12px;position:relative}.binder:before{content:"";pointer-events:none;border:1.5px dashed color-mix(in srgb, var(--color-gold) 40%, transparent);border-radius:19px;position:absolute;inset:6px}.binder:after{content:"";pointer-events:none;z-index:75;background:linear-gradient(90deg, var(--ludex-accent-deep), var(--color-ludex) 45%, var(--ludex-accent-light));clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);width:16px;height:64px;position:absolute;top:-8px;right:14%;box-shadow:0 2px 4px #0003}@media (min-width:768px){.binder{width:100%;max-width:max(720px, calc((100dvh - var(--binder-chrome,150px)) * 1.45));margin-inline:auto;padding:20px}}.binder-stage{isolation:isolate;position:relative}.binder-edge{z-index:72;border-radius:24px;width:34px;display:none;position:absolute;top:0;bottom:0}@media (min-width:768px){.binder-edge{display:block}}.binder-edge--prev{left:0}.binder-edge--next{right:0}.binder-edge:before{content:"";opacity:0;width:18px;transition:opacity .2s;position:absolute;top:20px;bottom:20px}.binder-edge--prev:before{background:linear-gradient(90deg, var(--binder-shade), transparent);left:20px}.binder-edge--next:before{background:linear-gradient(270deg, var(--binder-shade), transparent);right:20px}.binder-edge:after{content:"";background:linear-gradient(var(--binder-corner-angle), color-mix(in oklab, var(--binder-paper), var(--ludex-ink) 14%) 50%, transparent 50%);width:18px;height:18px;filter:drop-shadow(-1px -1px 1px color-mix(in srgb, var(--ludex-ink) 18%, transparent));transition:width .2s,height .2s;position:absolute;bottom:20px}.binder-edge--prev:after{--binder-corner-angle:45deg;left:20px}.binder-edge--next:after{--binder-corner-angle:-45deg;right:20px}.binder-edge:hover:not(:disabled):before,.binder-edge:focus-visible:before{opacity:1}.binder-edge:hover:not(:disabled):after,.binder-edge:focus-visible:after{width:34px;height:34px}.binder-edge__chevron{width:40px;height:40px;color:var(--ludex-ink);background:var(--bento-solid);box-shadow:0 8px 18px -6px color-mix(in srgb, var(--ludex-ink) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-gold) 45%, transparent);border-radius:999px;justify-content:center;align-items:center;transition:color .2s,background-color .2s,transform .2s;display:flex;position:absolute;top:50%;translate:0 -50%}.binder-edge--prev .binder-edge__chevron{left:-10px}.binder-edge--next .binder-edge__chevron{right:-10px}.binder-edge:hover:not(:disabled) .binder-edge__chevron,.binder-edge:focus-visible .binder-edge__chevron{color:#fff;background:var(--color-ludex);transform:scale(1.1)}.binder-edge--prev:hover:not(:disabled) .binder-edge__chevron{transform:translate(-2px)scale(1.1)}.binder-edge--next:hover:not(:disabled) .binder-edge__chevron{transform:translate(2px)scale(1.1)}.binder-edge:not(:disabled){cursor:pointer}.binder-edge:disabled{cursor:not-allowed}.binder-edge:focus-visible{outline:2px solid var(--color-ludex);outline-offset:-4px}.binder-chips{scrollbar-width:none;gap:6px;margin-inline:-16px;padding-inline:16px;display:flex;overflow-x:auto}@media (min-width:640px){.binder-chips{flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible}}.binder-meter{background:#00000014;border-radius:999px;width:72px;height:6px;display:inline-block;overflow:hidden}.binder-meter>span{border-radius:inherit;background:var(--color-gold);min-width:2px;height:100%;display:block}.binder-empty{z-index:80;text-align:center;color:var(--ludex-ink);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.binder-empty__card{background:var(--binder-paper);max-width:22rem;box-shadow:0 18px 40px -22px var(--binder-shade), 0 0 0 1px color-mix(in oklab, var(--ludex-ink), transparent 92%);border-radius:1.75rem;flex-direction:column;align-items:center;gap:12px;padding:24px 28px;display:flex}.binder-spread{perspective:2400px;grid-template-columns:1fr;display:grid;position:relative}.binder-spread--double{grid-template-columns:1fr 1fr;column-gap:36px}.binder-page{background:var(--bento-grain), var(--binder-paper);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ludex-ink) 5%, transparent), 0 1px 0 #fff6;border-radius:12px;padding:10px 10px 24px;position:relative}.binder-page--left{background:linear-gradient(270deg, var(--binder-shade), transparent 9%), var(--bento-grain), var(--binder-paper);border-radius:12px 6px 6px 12px}.binder-page--right{background:linear-gradient(90deg, var(--binder-shade), transparent 9%), var(--bento-grain), var(--binder-paper);border-radius:6px 12px 12px 6px}@media (min-width:768px){.binder-page{padding:16px 16px 30px}}.binder-pockets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}@media (min-width:768px){.binder-pockets{gap:14px}}.binder-pocket{aspect-ratio:2.5/3.5;background:color-mix(in srgb, var(--ludex-ink) 5%, transparent);box-shadow:inset 0 1px 3px color-mix(in srgb, var(--ludex-ink) 14%, transparent);border-radius:8px;position:relative}.binder-pocket:after{content:"";pointer-events:none;z-index:60;background:linear-gradient(115deg,#0000 35%,#fff3 47%,#0000 58%);border-radius:9px;position:absolute;inset:-2px}.binder-pocket>button{border-radius:6px;transition:transform .2s}.binder-pocket>button:hover{transform:translateY(-3px)}.binder-pocket>button:focus-visible{outline:2px solid var(--color-ludex);outline-offset:3px}.binder-tag{z-index:61;white-space:nowrap;background:var(--ludex-ink);color:#fff;letter-spacing:.02em;box-shadow:0 2px 6px -2px color-mix(in srgb, var(--ludex-ink) 50%, transparent);border-radius:999px;padding:1px 8px;font-size:10px;font-weight:800;position:absolute;top:-7px;left:50%;transform:translate(-50%)}.binder-tag--new{background:var(--color-ludex)}.binder-tag--missing{background:color-mix(in srgb, var(--ludex-ink) 60%, transparent)}.binder-count,.binder-wanted{pointer-events:none;z-index:61;color:#fff;font-variant-numeric:tabular-nums;box-shadow:0 2px 6px -2px color-mix(in srgb, var(--ludex-ink) 50%, transparent);border-radius:999px;padding:0 7px;font-size:10px;font-weight:800;line-height:17px;position:absolute;bottom:-6px}.binder-count{background:var(--ludex-foil);color:var(--ludex-ink);right:-5px}.binder-wanted{background:color-mix(in oklab, var(--ludex-foil-3), black 30%);left:-5px}.binder-pocket--picked>button{outline:3px solid var(--color-ludex);outline-offset:3px}.binder-pocket--unpickable>button{cursor:not-allowed;opacity:.35}.binder-pocket--unpickable>button:hover{transform:none}.binder-pick{pointer-events:none;z-index:61;background:var(--color-ludex);color:#fff;width:22px;height:22px;box-shadow:0 2px 6px -2px color-mix(in srgb, var(--ludex-ink) 50%, transparent);border-radius:999px;place-items:center;font-size:12px;font-weight:900;display:grid;position:absolute;top:-7px;right:-7px}.binder-pocket--missing>button{opacity:.35;filter:grayscale()contrast(.8);transition:opacity .2s,filter .2s,transform .2s}.binder-pocket--missing>button:hover,.binder-pocket--missing>button:focus-visible{opacity:.75;filter:grayscale(.4)}.binder-folio{text-align:center;color:color-mix(in srgb, var(--ludex-ink) 35%, transparent);font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:11px;font-weight:800;position:absolute;bottom:7px;left:0;right:0}.binder-rings{--ring-hi:color-mix(in oklab, var(--color-gold), white 78%);--ring-mid:color-mix(in oklab, var(--color-gold), white 18%);--ring-lo:color-mix(in oklab, var(--color-gold), black 48%);--ring-hole:color-mix(in oklab, var(--ludex-ink), black 30%);pointer-events:none;z-index:70;flex-direction:column;justify-content:space-between;width:64px;display:flex;position:absolute;top:9%;bottom:9%;left:50%;transform:translate(-50%)}.binder-rings:before{content:"";background:linear-gradient(90deg, var(--ring-lo), var(--ring-hi) 45%, var(--ring-mid) 70%, var(--ring-lo));width:4px;box-shadow:0 0 0 1px color-mix(in srgb, var(--ludex-ink) 40%, transparent);opacity:.85;border-radius:999px;position:absolute;top:-6%;bottom:-6%;left:50%;transform:translate(-50%)}.binder-ring{height:14px;position:relative}.binder-ring:before{content:"";background:radial-gradient(circle, var(--ring-hole) 0 1.8px, var(--ring-lo) 2.4px, var(--ring-hi) 3.2px, var(--ring-mid) 4px, transparent 4.6px) 3px 50% / 10px 10px no-repeat, radial-gradient(circle, var(--ring-hole) 0 1.8px, var(--ring-lo) 2.4px, var(--ring-hi) 3.2px, var(--ring-mid) 4px, transparent 4.6px) calc(100% - 3px) 50% / 10px 10px no-repeat, radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ludex-ink) 28%, transparent), transparent) 50% 9px / 70% 10px no-repeat;position:absolute;inset:0}.binder-ring:after{content:"";background:linear-gradient(180deg, var(--ring-hi) 0%, var(--ring-mid) 30%, var(--ring-lo) 50%, var(--ring-mid) 72%, var(--ring-hi) 100%);-webkit-mask-composite:xor;border-radius:999px;padding:2px;position:absolute;inset:1px 4px 3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.binder-flipper{z-index:65;transform-style:preserve-3d;will-change:transform;position:absolute;top:0;bottom:0}.binder-flipper--right{left:calc(50% + 18px);right:0}.binder-flipper--left{left:0;right:calc(50% + 18px)}.binder-flipper--single{inset:0}.binder-face{backface-visibility:hidden;position:absolute;inset:0}.binder-face>.binder-page{height:100%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ludex-ink) 5%, transparent), 0 18px 30px -12px color-mix(in srgb, var(--ludex-ink) 45%, transparent)}.binder-face--back{transform:rotateY(180deg)}.binder-spread--auto{grid-template-columns:1fr}@media (min-width:768px){.binder-spread--auto{grid-template-columns:1fr 1fr;column-gap:36px}}.binder-pocket--arrival{--arrival-delay:0s;z-index:2}.binder-pocket--arrival-1{--arrival-delay:.14s}.binder-pocket--arrival-2{--arrival-delay:.28s}.binder-pocket--arrival-3{--arrival-delay:.42s}.binder-pocket--arrival-4{--arrival-delay:.56s}.binder-pocket--arrival-5{--arrival-delay:.7s}.binder-pocket--arrival-6{--arrival-delay:.84s}.binder-pocket--arrival-7{--arrival-delay:.98s}.binder-pocket--arrival-8{--arrival-delay:1.12s}.binder-pocket--arrival>button{animation:pocket-arrival .8s cubic-bezier(.2, 1.25, .4, 1) calc(var(--arrival-delay) + .45s) both}.binder-pocket--arrival:before{content:"";pointer-events:none;z-index:59;background:linear-gradient(115deg, transparent 30%, var(--ludex-foil-2) 42%, var(--ludex-foil-3) 50%, var(--ludex-foil-4) 58%, transparent 70%);mix-blend-mode:soft-light;opacity:0;animation:pocket-glint .9s ease-out calc(var(--arrival-delay) + 1.15s) both;background-size:260% 100%;border-radius:8px;position:absolute;inset:0}.binder-pocket--arrival .binder-fresh{animation:fresh-in .5s ease-out calc(var(--arrival-delay) + 1.05s) both}@keyframes pocket-arrival{0%{opacity:0;filter:drop-shadow(0 26px 22px color-mix(in srgb, var(--ludex-ink) 30%, transparent));transform:translateY(-85%)rotate(-8deg)scale(1.22)}35%{opacity:1}to{opacity:1;filter:drop-shadow(0 0 #0000);transform:none}}@keyframes pocket-glint{0%{opacity:.9;background-position:100% 0}to{opacity:0;background-position:0 0}}@keyframes fresh-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.binder-pocket--arrival>button,.binder-pocket--arrival:before,.binder-pocket--arrival .binder-fresh{animation:none}}