.binder-export__canvas{background:linear-gradient(180deg, var(--accent) 0%, var(--bg) 640px);width:1080px;color:var(--fg);flex-direction:column;gap:30px;padding:44px 48px 36px;font-family:Roboto,sans-serif;display:flex}.binder-export__header{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.binder-export__heading{flex-direction:column;gap:6px;min-width:0;padding-top:6px;display:flex}.binder-export__eyebrow{letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb, var(--accent-fg,#fff) 82%, transparent);font-size:16px;font-weight:600}.binder-export__title{color:var(--accent-fg,#fff);overflow-wrap:anywhere;margin:0;font-size:44px;font-weight:700;line-height:1.1}.binder-export__meta{color:color-mix(in srgb, var(--accent-fg,#fff) 78%, transparent);font-size:17px;font-weight:500}.binder-export__qr{background:#ffffffe6;border-radius:14px;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;padding:10px;display:flex;box-shadow:0 8px 24px #0000002e}.binder-export__qr .friend-qr__svg{border:none;border-radius:6px;width:128px;max-width:none}.binder-export__qr-caption{letter-spacing:.06em;text-transform:uppercase;color:#333;font-size:11px;font-weight:600}.binder-export__pages{flex-direction:column;gap:26px;display:flex}.binder-export__page{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 72%, transparent), color-mix(in srgb, var(--bg-raised) 50%, transparent));border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);border-radius:20px;padding:22px 26px 26px;position:relative;box-shadow:0 12px 32px #00000024,inset 0 1px #ffffff47}.binder-export__page-head{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.binder-export__page-name{color:var(--fg);font-size:20px;font-weight:600}.binder-export__page-number{color:var(--fg-subtle);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}.binder-export__grid{grid-template-columns:repeat(var(--binder-export-cols,3), 1fr);gap:14px;display:grid}.binder-export__pocket{aspect-ratio:5/7;background:color-mix(in srgb, var(--fg) 4%, transparent);border:1.5px dashed color-mix(in srgb, var(--fg) 20%, transparent);border-radius:12px;position:relative;overflow:hidden}.binder-export__pocket--filled{border-style:solid;border-color:color-mix(in srgb, var(--fg) 14%, transparent);background:color-mix(in srgb, var(--fg) 6%, transparent);box-shadow:inset 0 0 0 1px #ffffff2e}.binder-export__card{object-fit:cover;border-radius:8px;width:91%;height:91%;display:block;position:absolute;inset:4.5%}.binder-export__tile{background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg-subtle);border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;inset:4.5%}.binder-export__footer{flex-direction:column;align-items:center;gap:7px;margin-top:6px;display:flex}.binder-export__footer-row{align-items:center;gap:10px;display:flex}.binder-export__footer-text{color:var(--fg-muted);font-size:20px;font-weight:600;line-height:1}.binder-export__footer-url{color:var(--fg);font-size:15px;font-weight:600;line-height:1}.binder-export__footer-url-dim{opacity:.4}.binder-export__logo{width:auto;height:34px;display:block}
.binder-detail{flex-direction:column;gap:14px;display:flex}.binder-detail__back{color:var(--fg-muted);align-self:flex-start;align-items:center;gap:4px;font-size:.8125rem;text-decoration:none;transition:color .15s;display:inline-flex}.binder-detail__back:hover{color:var(--fg)}@media (min-width:900px){.binder-detail__back{display:none}}.binder-detail__header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.binder-detail__title-group{flex-direction:column;gap:2px;min-width:0;display:flex}.binder-detail__title{overflow-wrap:anywhere;margin:0;font-size:1.25rem;font-weight:600}.binder-detail__count{color:var(--fg-muted);font-size:.8125rem}.binder-detail__actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.binder-detail__icon-btn{background:color-mix(in srgb, var(--fg) 8%, transparent);border:1px solid color-mix(in srgb, var(--fg) 20%, transparent);width:36px;height:36px;color:var(--fg);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:inline-flex}.binder-detail__icon-btn:hover{background:color-mix(in srgb, var(--fg) 14%, transparent);border-color:color-mix(in srgb, var(--fg) 33%, transparent)}.binder-detail__primary-btn{background:var(--accent);border:1px solid color-mix(in srgb, var(--accent-fg) 30%, transparent);color:var(--accent-fg,#fff);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.8125rem;font-weight:600;transition:opacity .15s;display:inline-flex}.binder-detail__primary-btn:hover{opacity:.9}@media (max-width:639px){.binder-detail__primary-btn{padding:8px 10px}.binder-detail__primary-btn span{display:none}}.binder-detail__toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.binder-detail__toolbar-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.binder-detail__toggle-btn{border:1px solid color-mix(in srgb, var(--fg) 16%, transparent);color:var(--fg-muted);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-family:inherit;font-size:.8125rem;font-weight:600;text-decoration:none;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.binder-detail__toggle-btn:hover{background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg)}.binder-detail__toggle-btn--active{background:color-mix(in srgb, var(--accent) 14%, transparent);border-color:color-mix(in srgb, var(--accent) 45%, transparent);color:var(--fg)}@media (max-width:899px){.binder-detail__toggle-btn--spread{display:none}}.binder-detail__notice{background:color-mix(in srgb, var(--fg) 6%, transparent);border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);color:var(--fg);border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;font-size:.8125rem;font-weight:500;animation:.15s binder-fade-in;display:flex}.binder-detail__notice--error{background:#ef44441a;border-color:#ef444466}.binder-detail__notice button{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;padding:2px;display:inline-flex}.binder-detail__notice button:hover{opacity:1}.binder-detail__move-banner{background:color-mix(in srgb, var(--accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);color:var(--fg);border-radius:10px;align-items:center;gap:10px;padding:9px 12px;font-size:.8125rem;font-weight:500;animation:.15s binder-fade-in;display:flex}.binder-detail__move-banner svg{color:var(--accent);flex-shrink:0}.binder-detail__move-banner span{flex:1}.binder-detail__move-banner button{border:1px solid color-mix(in srgb, var(--fg) 20%, transparent);color:var(--fg);cursor:pointer;background:0 0;border-radius:6px;padding:4px 10px;font-family:inherit;font-size:.75rem;font-weight:600}.binder-detail__move-banner button:hover{background:color-mix(in srgb, var(--fg) 8%, transparent)}.binder-detail__pages{justify-content:center;align-items:flex-start;gap:18px;width:100%;display:flex}.binder-detail__pages--spread .binder-page{max-width:calc(50% - 9px)}.binder-detail__drag-preview{filter:drop-shadow(0 16px 28px #00000059);pointer-events:none;width:150px;transform:rotate(-2deg)scale(1.04)}.binder-detail__drag-preview .binder-pocket{background:color-mix(in srgb, var(--bg-raised) 92%, transparent)}.binder-page{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 72%, transparent), color-mix(in srgb, var(--bg-raised) 46%, transparent));border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);-webkit-backdrop-filter:blur(14px);border-radius:20px;width:100%;padding:18px;position:relative;box-shadow:0 14px 36px #00000024,inset 0 1px #ffffff3d}.binder-page--cols-2{max-width:440px}.binder-page--cols-3{max-width:640px}.binder-page--cols-4{max-width:820px}.binder-page__header{margin-bottom:10px}.binder-page__grid{grid-template-columns:repeat(var(--binder-cols,3), minmax(0, 1fr));gap:10px;display:grid}@media (min-width:640px){.binder-page__grid{gap:12px}}.binder-pocket{aspect-ratio:5/7;background:color-mix(in srgb, var(--fg) 4%, transparent);border:1.5px dashed color-mix(in srgb, var(--fg) 20%, transparent);touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:12px;outline:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s,opacity .15s;position:relative}.binder-pocket__inner{border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;inset:4.5%;overflow:hidden}.binder-pocket__card{object-fit:cover;border-radius:8px;width:100%;height:100%;display:block}.binder-pocket__index{color:var(--fg-subtle);opacity:.7;font-variant-numeric:tabular-nums;font-size:.6875rem;font-weight:600;position:absolute;top:6px;left:8px}.binder-pocket__add{background:color-mix(in srgb, var(--fg) 6%, transparent);width:40px;height:40px;color:var(--fg-subtle);opacity:0;border-radius:50%;justify-content:center;align-items:center;transition:opacity .15s,transform .15s;display:inline-flex;transform:scale(.85)}.binder-pocket__unavailable{text-align:center;width:100%;height:100%;color:var(--fg-muted);background:color-mix(in srgb, var(--fg) 6%, transparent);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px;font-size:.6875rem;display:flex}.binder-pocket__unavailable-code{color:var(--fg);overflow-wrap:anywhere;font-weight:600}.binder-pocket__price{color:#fff;pointer-events:none;background:#000000b8;border-radius:999px;padding:2px 6px;font-size:.6875rem;font-weight:700;line-height:1.3;position:absolute;bottom:7%;right:7%}.binder-pocket__missing-chip{color:#fff;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;background:#000000bf;border-radius:999px;padding:2px 8px;font-size:.625rem;font-weight:700;position:absolute;top:8%;left:50%;transform:translate(-50%)}.binder-pocket--filled{border-style:solid;border-color:color-mix(in srgb, var(--fg) 14%, transparent);background:color-mix(in srgb, var(--fg) 6%, transparent);box-shadow:inset 0 0 0 1px #ffffff29}.binder-pocket--interactive{cursor:pointer}.binder-pocket--interactive:hover,.binder-pocket--interactive:focus-visible{border-color:color-mix(in srgb, var(--accent) 60%, transparent)}.binder-pocket--interactive:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent)}.binder-pocket--interactive.binder-pocket--empty:hover .binder-pocket__add,.binder-pocket--interactive.binder-pocket--empty:focus-visible .binder-pocket__add{opacity:1;transform:scale(1)}.binder-pocket--interactive.binder-pocket--filled:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000002e,inset 0 0 0 1px #ffffff29}.binder-pocket--missing .binder-pocket__card{filter:grayscale()brightness(.72);opacity:.55}.binder-pocket--highlight{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);animation:1.1s ease-in-out 2 binder-pulse}.binder-pocket--move-source{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);transform:translateY(-3px)}.binder-pocket--move-target{cursor:crosshair;border-color:color-mix(in srgb, var(--accent) 45%, transparent);border-style:dashed}.binder-pocket--dragging{opacity:.35}.binder-pocket--over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent)}.binder-placeholder-tile{background:color-mix(in srgb, var(--fg) 8%, transparent);width:100%;height:100%;color:var(--fg-subtle);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.625rem;display:flex}.binder-placeholder-tile--failed{color:var(--fg-muted)}.binder-placeholder-tile__text{padding:0 6px}.binder-nav{flex-direction:column;gap:6px;display:flex}.binder-nav__row{align-items:center;gap:10px;display:flex}.binder-nav__arrow{border:1px solid color-mix(in srgb, var(--fg) 16%, transparent);background:color-mix(in srgb, var(--bg-raised) 40%, transparent);width:38px;height:38px;color:var(--fg);cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex}.binder-nav__arrow:hover:not(:disabled){background:color-mix(in srgb, var(--fg) 10%, transparent)}.binder-nav__arrow:disabled{opacity:.3;cursor:default}.binder-nav__titles{justify-content:center;gap:18px;min-width:0;display:flex}.binder-nav__title-block{flex-direction:column;align-items:center;min-width:0;max-width:100%;display:flex}.binder-nav__title{max-width:100%;color:var(--fg);cursor:default;background:0 0;border:none;border-radius:8px;align-items:center;gap:6px;padding:2px 8px;font-family:inherit;font-size:1rem;font-weight:600;display:inline-flex}.binder-nav__title svg{color:var(--fg-subtle);opacity:0;flex-shrink:0;transition:opacity .15s}.binder-nav__title--editable{cursor:text}.binder-nav__title--editable:hover,.binder-nav__title--editable:focus-visible{background:color-mix(in srgb, var(--fg) 6%, transparent)}.binder-nav__title--editable:hover svg,.binder-nav__title--editable:focus-visible svg{opacity:1}.binder-nav__title-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.binder-nav__rename{display:flex}.binder-nav__rename-input{border:1.5px solid var(--accent);background:color-mix(in srgb, var(--bg-raised) 40%, transparent);width:220px;max-width:60vw;color:var(--fg);text-align:center;border-radius:8px;outline:none;padding:4px 8px;font-family:inherit;font-size:1rem;font-weight:600}.binder-nav__strip{scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;justify-content:safe center;gap:6px;min-width:0;padding:2px;display:flex;overflow-x:auto}.binder-nav__strip::-webkit-scrollbar{display:none}.binder-nav__strip--fade-start{-webkit-mask-image:linear-gradient(90deg,#0000,#000 36px);mask-image:linear-gradient(90deg,#0000,#000 36px)}.binder-nav__strip--fade-end{-webkit-mask-image:linear-gradient(270deg,#0000,#000 36px);mask-image:linear-gradient(270deg,#0000,#000 36px)}.binder-nav__strip--fade-start.binder-nav__strip--fade-end{-webkit-mask-image:linear-gradient(90deg,#0000,#000 36px calc(100% - 36px),#0000);mask-image:linear-gradient(90deg,#0000,#000 36px calc(100% - 36px),#0000)}.binder-nav__chip{border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);min-width:32px;height:28px;color:var(--fg-muted);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;padding:0 8px;font-family:inherit;font-size:.75rem;font-weight:600;transition:background .12s,color .12s,border-color .12s;position:relative}.binder-nav__chip:hover{background:color-mix(in srgb, var(--fg) 8%, transparent);color:var(--fg)}.binder-nav__chip--filled:after{content:"";background:var(--accent);border-radius:50%;width:5px;height:5px;position:absolute;top:4px;right:4px}.binder-nav__chip--active{background:var(--fg);border-color:var(--fg);color:var(--bg)}.binder-nav__chip--active:after{background:var(--bg)}.binder-stats{background:color-mix(in srgb, var(--bg-raised) 55%, transparent);border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);border-radius:14px;flex-direction:column;gap:12px;padding:14px 16px;animation:.15s binder-fade-in;display:flex}.binder-stats__fill{flex-direction:column;gap:6px;display:flex}.binder-stats__fill-track{background:color-mix(in srgb, var(--fg) 10%, transparent);border-radius:999px;height:6px;overflow:hidden}.binder-stats__fill-bar{border-radius:inherit;background:var(--accent);height:100%;transition:width .3s}.binder-stats__fill-text{color:var(--fg-muted);font-variant-numeric:tabular-nums;font-size:.75rem}.binder-stats__tiles{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:0;display:grid}.binder-stats__tile{background:color-mix(in srgb, var(--fg) 4%, transparent);border-radius:10px;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.binder-stats__tile dt{letter-spacing:.04em;text-transform:uppercase;color:var(--fg-subtle);font-size:.6875rem;font-weight:600}.binder-stats__tile dd{color:var(--fg);font-variant-numeric:tabular-nums;margin:0;font-size:1rem;font-weight:700}.binder-search{flex:260px;max-width:420px;position:relative}.binder-search__field{border:1px solid color-mix(in srgb, var(--fg) 15%, transparent);background:color-mix(in srgb, var(--bg-raised) 30%, transparent);border-radius:999px;align-items:center;gap:8px;padding:7px 10px;transition:border-color .15s;display:flex}.binder-search__field:focus-within{border-color:var(--accent)}.binder-search__icon{color:var(--fg-muted);flex-shrink:0}.binder-search__input{min-width:0;color:var(--fg);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:.8125rem}.binder-search__input::placeholder{color:var(--fg-subtle)}.binder-search__input::-webkit-search-cancel-button{display:none}.binder-search__clear{color:var(--fg-muted);cursor:pointer;background:0 0;border:none;padding:0;display:inline-flex}.binder-search__results{z-index:30;background:color-mix(in srgb, var(--bg-raised) 96%, #000 4%);border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);border-radius:12px;max-height:320px;margin:0;padding:6px;list-style:none;animation:.12s binder-fade-in;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 32px #00000052}.binder-search__empty{color:var(--fg-muted);padding:10px;font-size:.8125rem}.binder-search__result{width:100%;color:var(--fg);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-family:inherit;display:flex}.binder-search__result:hover,.binder-search__result:focus-visible{background:color-mix(in srgb, var(--fg) 8%, transparent);outline:none}.binder-search__result-kind{background:color-mix(in srgb, var(--fg) 8%, transparent);letter-spacing:.04em;text-transform:uppercase;text-align:center;min-width:40px;color:var(--fg-muted);border-radius:6px;flex-shrink:0;padding:2px 6px;font-size:.625rem;font-weight:700}.binder-search__result-text{flex-direction:column;min-width:0;display:flex}.binder-search__result-label{text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:600;overflow:hidden}.binder-search__result-detail{color:var(--fg-muted);font-size:.6875rem}.binder-share{display:inline-flex;position:relative}.binder-share__btn{background:color-mix(in srgb, var(--fg) 8%, transparent);border:1px solid color-mix(in srgb, var(--fg) 20%, transparent);color:var(--fg);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;font-size:.8125rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.binder-share__btn:hover{background:color-mix(in srgb, var(--fg) 14%, transparent);border-color:color-mix(in srgb, var(--fg) 33%, transparent)}@media (max-width:639px){.binder-share__btn{padding:8px 10px}.binder-share__label{display:none}}.binder-share__note{z-index:30;background:var(--fg);width:max-content;max-width:260px;color:var(--bg);border-radius:10px;padding:8px 11px;font-size:.75rem;font-weight:500;line-height:1.4;animation:.15s binder-fade-in;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #0000003d}.binder-pocket-drawer__head{align-items:center;gap:12px;padding:16px 16px 8px;display:flex}.binder-pocket-drawer__thumb{aspect-ratio:5/7;background:color-mix(in srgb, var(--fg) 6%, transparent);border-radius:8px;flex-shrink:0;width:60px;overflow:hidden}.binder-pocket-drawer__thumb img{object-fit:cover;width:100%;height:100%;display:block}.binder-pocket-drawer__titles{flex:1;min-width:0}.binder-pocket-drawer__title{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.0625rem;font-weight:600;overflow:hidden}.binder-pocket-drawer__subtitle{color:var(--fg-muted);margin:2px 0 0;font-size:.8125rem}.binder-pocket-drawer__close{border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);background:color-mix(in srgb, var(--fg) 8%, transparent);width:32px;height:32px;color:var(--fg-muted);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.binder-pocket-drawer__actions{flex-direction:column;gap:4px;padding:8px 12px 16px;display:flex}.binder-pocket-drawer__action{width:100%;color:var(--fg);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;gap:12px;padding:12px;font-family:inherit;font-size:.9375rem;font-weight:500;transition:background .12s;display:flex}.binder-pocket-drawer__action svg{color:var(--fg-muted);flex-shrink:0}.binder-pocket-drawer__action:hover{background:color-mix(in srgb, var(--fg) 8%, transparent)}.binder-pocket-drawer__action--danger,.binder-pocket-drawer__action--danger svg{color:#ef4444}.binder-pocket-drawer__hint{color:var(--fg-subtle);margin-left:auto;font-size:.75rem}.binder-pocket-drawer__plus{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;margin-left:auto;padding:2px 8px;font-size:.6875rem;font-weight:700}.binder-settings__head{justify-content:space-between;align-items:center;padding-right:16px;display:flex}.binder-settings__close{border:1px solid color-mix(in srgb, var(--fg) 10%, transparent);background:color-mix(in srgb, var(--fg) 8%, transparent);width:32px;height:32px;color:var(--fg-muted);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;margin-top:12px;display:inline-flex}.binder-settings__warn{color:var(--fg);background:#f59e0b24;border:1px solid #f59e0b73;border-radius:8px;margin:0;padding:8px 10px;font-size:.75rem;line-height:1.45}@keyframes binder-fade-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes binder-pulse{0%,to{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent)}}