.binder-shelf{margin:36px 0 42px}
.binder-shelf-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.binder-shelf-heading h2{margin:0 0 8px;font-family:Sora,sans-serif;font-size:22px;letter-spacing:-.6px;color:#e8ede3}
.binder-shelf-heading p{margin:0;color:#b6c5b5;font-size:14px;line-height:1.6}
.binder-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px;align-items:start}
.binder-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:290px;padding:25px 22px 24px 34px;border:0;border-radius:5px 13px 13px 5px;color:#f0f3e8;background:linear-gradient(100deg,#071e14 0 5%,#142f21 9%,#203e2b 15%,#173624 78%,#244332);box-shadow:4px 6px 0 #07130e,7px 11px 22px #0003,inset -2px 0 0 #aec49124;cursor:pointer;text-align:center}
.binder-cover::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:repeating-linear-gradient(40deg,transparent 0 3px,#ffffff02 4px 5px);pointer-events:none}
.binder-cover-spine{position:absolute;inset:0 auto 0 11px;width:11px;background:linear-gradient(90deg,#0004,#ffffff07,#0002);border-left:1px solid #8caa7730;border-right:1px solid #05170d88}
.binder-cover-window{display:grid;place-items:center;width:83px;aspect-ratio:2/3;margin-bottom:20px;border:1px solid #cedec142;border-radius:5px;background:#d1e0cd0a;box-shadow:0 3px 6px #0004;overflow:hidden;color:#c4d8b1}
.binder-cover-window img{display:block;width:100%;height:100%;object-fit:contain;background:#172d20}
.binder-cover-window svg{width:29px;height:29px;stroke-width:1.35}
.binder-cover-name{font-family:Sora,sans-serif;font-size:17px;line-height:1.45;overflow-wrap:anywhere;max-width:100%}
.binder-cover-count{margin-top:9px;font-size:13px;color:#c2d2b8;font-variant-numeric:tabular-nums}
.binder-cover-empty{background:linear-gradient(100deg,#0c1e15,#163322);box-shadow:4px 6px 0 #06130c,7px 11px 22px #0002}
.binder-cover-empty .binder-cover-window{height:66px;width:66px;aspect-ratio:auto;border-radius:50%;box-shadow:none;border-color:#b9d4a12b}
.binder-cover-empty-copy{max-width:25ch;margin:12px 0 22px;line-height:1.65;font-size:13px;color:#bbcdb3}
.binder-cover-create{display:flex;align-items:center;gap:8px;color:#d1e3b7;font-weight:650;font-size:13px}
.binder-cover-create svg{width:16px;height:16px}
.binder-cover:focus-visible,.binder-back:focus-visible,.binder-pocket button:focus-visible,.binder-pocket-remove:focus-visible{outline:2px solid #d7edb0;outline-offset:5px}
.binder-cover:hover{filter:brightness(1.08)}
.binder-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin:0 0 30px}
.binder-heading h1{margin:16px 0 8px;font-family:Sora,sans-serif;letter-spacing:-1px;font-size:32px;line-height:1.3;color:#eff3e8;overflow-wrap:anywhere}
.binder-heading p{margin:0;font-size:14px;color:#bdd0b5;font-variant-numeric:tabular-nums}
.binder-back{display:inline-flex;align-items:center;gap:8px;padding:4px 0;border:0;background:transparent;color:#c0d3b6;cursor:pointer;font-size:13px;line-height:1.6}
.binder-back svg{height:17px;width:17px}
.binder-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.binder-actions .button{margin:0}
.binder-book{max-width:540px;margin-inline:auto;position:relative;display:flex;gap:15px;padding:20px 20px 19px 37px;border-radius:7px 18px 18px 7px;background:linear-gradient(100deg,#122b1d,#254732 14%,#1a3827 65%,#284a34);box-shadow:0 4px 0 #08180f,0 20px 40px #0003;perspective:1800px;isolation:isolate}
.binder-book::before{content:"";position:absolute;inset:12px 11px 10px 23px;border-radius:4px 11px 11px 4px;background:#0a1d1259;box-shadow:0 1px 0 #bcd49e2a;pointer-events:none;z-index:-1}
.binder-binding{position:absolute;top:0;bottom:0;left:9px;width:22px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;z-index:4;pointer-events:none}
.binder-binding i{display:block;width:18px;height:28px;border:3px solid #778f75;border-right-color:#bec9ac;border-left-color:#334535;border-radius:50%;box-shadow:0 1px 3px #0009}
.binder-leaf{position:relative;flex:1;min-width:0;backface-visibility:hidden;transform-style:preserve-3d;background:linear-gradient(100deg,#70877418,#a8b69b13 50%,#8ca68221);padding:15px 13px 27px;border-radius:3px 8px 8px 3px;box-shadow:2px 3px 0 #61765c36,3px 4px 0 #c4d3b31f,inset 0 0 0 1px #cbdcba26}
.binder-book.has-2-leaves{max-width:1040px;width:100%;padding-left:20px;gap:29px}
.binder-book.has-2-leaves .binder-binding{left:calc(50% - 11px);background:linear-gradient(90deg,transparent,#04170e69,transparent)}
.binder-book.has-2-leaves .binder-leaf:first-of-type{border-radius:8px 3px 3px 8px;box-shadow:-2px 3px 0 #61765c36,-3px 4px 0 #c4d3b31f,inset 0 0 0 1px #cbdcba26}
.binder-pocket-grid{display:grid;grid-template-columns:repeat(var(--binder-columns,3),minmax(0,1fr));gap:12px}
.binder-pocket{position:relative;min-width:0;aspect-ratio:2/3;padding:7px;border-radius:4px;background:linear-gradient(115deg,#ebf5e504,transparent 45%,#dcecd814);box-shadow:inset 0 0 0 1px #d3e4c838,inset 0 3px 0 #dfead428,inset 0 -2px 4px #0004;isolation:isolate}
.binder-pocket::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,transparent 0 57%,#f2faed08 58%,#f2faed0c 67%,transparent 69%);box-shadow:inset 0 -1px 0 #d2dfb738}
.binder-pocket.is-empty>button{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#b6c8ac;cursor:pointer;background:transparent;border:0;border-radius:3px}
.binder-pocket.is-empty svg{height:22px;width:22px;opacity:.75}
.binder-pocket.is-empty strong{font-weight:500;font-size:12px;line-height:1.6;text-align:center}
.binder-pocket-remove{position:absolute;right:9px;bottom:9px;z-index:9;height:28px;width:28px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#10241dee;color:#e2eadd;cursor:pointer;opacity:0;transition:opacity .15s}
.binder-pocket-remove svg{width:14px;height:14px}
.binder-pocket:hover .binder-pocket-remove,.binder-pocket:focus-within .binder-pocket-remove{opacity:1}
.binder-leaf-number{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:11px;color:#c0d0b5;font-variant-numeric:tabular-nums}
body .binder-pocket .card-wrap{display:block;height:100%;width:100%;margin:0;min-width:0;transform:none!important}
body .binder-pocket .card-wrap::part(base){height:100%;width:100%;margin:0;background:transparent;box-shadow:none;border:0;padding:0;border-radius:6px;overflow:visible}
body .binder-pocket .card-wrap::part(body){height:100%;padding:0}
body .binder-pocket .card-wrap .collectible-card{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;min-height:0;aspect-ratio:2/3;box-sizing:border-box;padding:4px;border-radius:6px;box-shadow:0 2px 3px #0004;overflow:hidden;transform:none!important}
body .binder-pocket .card-wrap .card-art,body .binder-pocket .card-wrap .collectible-card:has(.card-art[data-image-universe="mounts"]) .card-art{inset:4px 4px auto;width:calc(100% - 8px);height:58%;border-radius:3px}
body .binder-pocket .card-wrap .card-body,body .binder-pocket .card-wrap .collectible-card:has(.card-art[data-image-universe="mounts"]) .card-body{height:39%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:2px;padding:6px 5px 5px;box-sizing:border-box;border-radius:3px}
body .binder-pocket .card-wrap .card-title{grid-row:2;align-self:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;white-space:normal;font-size:clamp(11px,1.05vw,15px);line-height:1.2;margin:0;text-align:center}
body .binder-pocket .card-wrap .card-category{grid-row:1;font-size:8px;line-height:1.3;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}
body .binder-pocket .card-wrap .card-bottom{grid-row:3;display:flex;justify-content:space-between;gap:4px;min-height:11px;margin:0;padding:3px 0 0;font-size:8px;line-height:1.3}
body .binder-pocket .card-wrap .card-number,body .binder-pocket .card-wrap .rarity-label{font-size:8px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body .binder-pocket .card-wrap .card-number{max-width:40%}
body .binder-pocket .card-wrap .card-topline{top:5px;left:5px;right:5px;gap:3px}
body .binder-pocket .card-wrap .card-universe{font-size:7px;padding:2px 3px;line-height:12px;min-height:16px;max-width:calc(100% - 20px)}
body .binder-pocket .card-wrap .rarity-mark{width:18px;min-width:18px;height:18px;font-size:8px}
body .binder-pocket .card-wrap .collectible-card[data-rarity="L"]::before,body .binder-pocket .card-wrap .collectible-card[data-rarity="L"]::after{top:62%;border-radius:0 0 6px 6px;animation:none}
.binder-pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin:28px 0 12px}
.binder-pagination .button{margin:0}
.binder-pagination>span{font-size:13px;line-height:1.6;color:#c1d3b7;font-variant-numeric:tabular-nums;text-align:center;min-width:100px}
.binder-picker-copy{margin:0 0 20px;line-height:1.7;color:#c0cfb7}
.binder-picker .search-input{width:100%;margin-bottom:22px}
.binder-picker-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:52vh;overflow:auto;padding:3px}
.binder-picker-row{display:grid;grid-template-columns:20px 42px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid #9bb88830;border-radius:9px;cursor:pointer;min-width:0}
.binder-picker-row:has(input:checked){background:#31502e6b;border-color:#bddc9b6b}
.binder-picker-row input{width:17px;height:17px;accent-color:#c3dda6;margin:0}
.binder-picker-card{display:block;width:42px;height:63px;overflow:hidden;border-radius:3px;background:#23432b}
.binder-picker-card img{width:100%;height:100%;object-fit:contain}
.binder-picker-card svg{width:24px;height:24px;margin:18px 9px;color:#b9cea8}
.binder-picker-name{font-size:13px;line-height:1.5;font-weight:550;overflow-wrap:anywhere}
.binder-picker-status{grid-column:2/-1;color:#c5d7b8;font-size:11px;line-height:1.4}
.binder-picker-status:empty{display:none}
.binder-picker-empty{grid-column:1/-1;text-align:center;padding:35px 20px;line-height:1.7}
.binder-picker-empty p{margin:12px 0 0;color:#b9cbb0}
.binder-missing{padding:30px 0}
.binder-missing p{margin-bottom:24px}
@media(max-width:1099px){.binder-cover-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px}.binder-pocket-grid{gap:15px}.binder-book{max-width:540px;margin:auto}.binder-heading h1{font-size:29px}body .binder-pocket .card-wrap .card-title{font-size:clamp(13px,1.6vw,18px)}body .binder-pocket .card-wrap .card-category{font-size:9px}body .binder-pocket .card-wrap .card-number,body .binder-pocket .card-wrap .rarity-label{font-size:9px}}
@media(max-width:760px){.binder-shelf-heading,.binder-heading{align-items:flex-start;flex-direction:column;gap:20px}.binder-actions{justify-content:flex-start;gap:12px}.binder-shelf-heading h2{font-size:21px}.binder-cover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 16px}.binder-cover{min-height:275px;padding:22px 14px 20px 24px}.binder-cover-name{font-size:15px}.binder-cover-window{width:70px;margin-bottom:17px}.binder-cover-spine{left:7px;width:8px}.binder-heading h1{font-size:26px}.binder-book{padding:12px 11px 12px 28px;gap:12px;border-radius:6px 13px 13px 6px}.binder-binding{left:4px;width:18px}.binder-binding i{width:15px;height:23px;border-width:2px}.binder-leaf{padding:11px 9px 25px}.binder-pocket-grid{gap:10px}.binder-pocket{padding:5px}.binder-pagination{gap:12px}.binder-pagination .button{font-size:12px;min-height:42px;padding:10px 12px}.binder-pagination>span{font-size:12px;min-width:72px}.binder-picker-list{grid-template-columns:1fr}.binder-picker-row{grid-template-columns:20px 42px minmax(0,1fr)}body .binder-pocket .card-wrap .card-title{font-size:13px}body .binder-pocket .card-wrap .card-category{font-size:8px}body .binder-pocket .card-wrap .card-number,body .binder-pocket .card-wrap .rarity-label{font-size:8px}}
@media(max-width:559px){.binder-pocket-grid{gap:12px}.binder-pagination .button{font-size:0;padding:10px;min-width:44px;gap:0}.binder-pagination .button svg{width:20px;height:20px}.binder-pagination>span{font-size:13px}.binder-pocket.is-empty strong{font-size:12px}body .binder-pocket .card-wrap .card-art{height:57%}body .binder-pocket .card-wrap .card-body{height:40%;padding:7px 5px 4px}body .binder-pocket .card-wrap .card-title{font-size:13px}body .binder-pocket .card-wrap .card-topline{top:5px;left:4px;right:4px}body .binder-pocket .card-wrap .card-universe{max-width:calc(100% - 22px);font-size:7px}body .binder-pocket .card-wrap .card-category{font-size:8px}.binder-cover-empty-copy{font-size:12px}.binder-cover-create{font-size:12px}.binder-pocket-remove{opacity:1;width:22px;height:22px;right:7px;bottom:7px;transform:translateY(30%)}}
@media(hover:none),(pointer:coarse){.binder-cover:hover{filter:none}.binder-pocket-remove{opacity:1}.binder-cover,.binder-pocket-remove{transition:none}}
@media(prefers-reduced-motion:reduce){.binder-cover,.binder-pocket-remove,.binder-leaf{transition:none!important;animation:none!important}}

.binder-picker-row{content-visibility:auto;contain-intrinsic-size:auto 90px}
.binder-picker-list{overscroll-behavior:contain}
.binder-cover,.binder-back,.binder-pagination button,.binder-pocket button{touch-action:manipulation}
.binder-cover-window{border-color:color-mix(in srgb,var(--binder-color,#698b70),#d4e5c0 45%)}
.binder-cover-spine{background:linear-gradient(90deg,#0004,color-mix(in srgb,var(--binder-color,#698b70),transparent 75%),#0002)}
.binder-heading h1,.binder-cover-name{text-wrap:balance}

.binder-view{max-width:1040px;margin-inline:auto;scroll-margin-top:106px}
@media(max-width:760px){.binder-view{scroll-margin-top:146px}}

body .binder-pocket .card-wrap .card-title{min-height:0;max-height:100%}