:root{--bg:oklch(17% .02 275);--bg-2:oklch(21.5% .024 275);--bg-3:oklch(27% .028 275);--ink:oklch(97% .01 280);--ink-2:oklch(79% .02 280);--ink-3:oklch(63% .02 280);--line:oklch(100% 0 0/.1);--line-2:oklch(100% 0 0/.16);--accent:oklch(63% .21 18);--accent-press:oklch(55% .2 18);--accent-2:oklch(72% .15 250);--gold:oklch(82% .15 85);--bb-cta:linear-gradient(135deg, #ffcb05, #ff7a2b);--bb-cta-hover:linear-gradient(135deg, #ffd52e, #ff8c3d);--bb-yellow:#ffcb05;--bb-blue:#4fa8ff;--bb-red:#ff6a3d;--bb-holo:linear-gradient(115deg, transparent 18%, #ff008080, #ffd20073, #00dcff80, #a050ff73, transparent 82%);--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:22px;--shadow:0 30px 60px -32px oklch(0% 0 0/.7);--shadow-sm:0 12px 30px -18px oklch(0% 0 0/.6);--font-display:"Bricolage Grotesque", system-ui, sans-serif;--font-body:"Hanken Grotesk", system-ui, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SFMono-Regular", monospace;--font-pixel:var(--font-mono);--app-bg:var(--bg);--surface-page:var(--bg-2);--surface-2:var(--bg-2);--chrome:var(--bg-2);--chrome-2:var(--bg-3);--panel:var(--bg-3);--ink-soft:var(--ink-2);--slot-bg:oklch(13% .015 275);--pocket-seam:var(--line-2);--sheen:oklch(100% 0 0/.5);--ghost:oklch(100% 0 0/.06);--shadow-panel:var(--shadow);--cover-accent:var(--gold);--red:var(--accent);--red-deep:var(--accent-press);--yellow:var(--bb-yellow);--blue:var(--accent-2);--blue-soft:oklch(78% .13 250);--green:oklch(72% .16 150);--pink:oklch(75% .16 0);--purple:oklch(70% .16 300);--cursor:var(--bb-yellow)}*{box-sizing:border-box;min-width:0}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background-color:var(--bg);-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 600px at 82% -8%,oklch(72% .15 250/.16),#0000 60%),radial-gradient(800px 600px at 8% 12%,oklch(63% .21 18/.1),#0000 55%);overflow:hidden}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-weight:700}input,input:focus{font-family:var(--font-body)}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:8px}.app{flex-direction:column;height:100%;display:flex}.topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);border-bottom:1px solid var(--line);z-index:20;background:oklch(17% .02 275/.72);flex-wrap:wrap;align-items:center;gap:14px;padding:12px clamp(14px,3vw,24px);display:flex}.brand{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.brand .ball{flex:none;width:22px;height:22px}.topbar .spacer{flex:1}.workspace{flex:1;grid-template-columns:340px 1fr;min-height:0;display:grid}@media (width<=860px){.workspace{grid-template-rows:1fr;grid-template-columns:1fr}}.btn{font-family:var(--font-display);color:oklch(99% 0 0);background:var(--accent);box-shadow:0 10px 26px -14px var(--accent);border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:600;line-height:1;transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s,box-shadow .18s,border-color .18s,filter .18s;display:inline-flex}.btn:hover{box-shadow:0 16px 34px -16px var(--accent);background:oklch(67% .21 18);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.42;box-shadow:none;cursor:default;filter:grayscale(.3);transform:none}.btn.red{background:var(--accent)}.btn.red:hover{background:oklch(67% .21 18)}.btn.green{color:oklch(16% .02 275);background:oklch(68% .15 150);box-shadow:0 10px 26px -14px oklch(68% .15 150)}.btn.green:hover{background:oklch(73% .16 150)}.btn.gold{background:var(--bb-cta);color:#0a0d14;box-shadow:0 12px 30px -12px #ff961499}.btn.gold:hover{background:var(--bb-cta-hover)}.btn.ghost{color:var(--ink);border-color:var(--line-2);box-shadow:none;background:oklch(100% 0 0/.05)}.btn.ghost:hover{border-color:var(--ink-3);background:oklch(100% 0 0/.09)}.btn.sm{padding:8px 14px;font-size:13px}.icon-btn{border-radius:var(--r-md);border:1px solid var(--line-2);width:38px;height:38px;color:var(--ink);background:oklch(100% 0 0/.05);justify-content:center;align-items:center;padding:0;font-size:18px;transition:background .18s,border-color .18s,transform .12s;display:inline-flex}.icon-btn:hover{border-color:var(--ink-3);background:oklch(100% 0 0/.09)}.icon-btn:active{transform:translateY(1px)}.icon-btn:disabled{opacity:.4;cursor:default}.icon-btn.green{color:#0a0d14;background:oklch(68% .15 150);border-color:#0000}.pixel{font-family:var(--font-mono);letter-spacing:.04em}.badge{font-family:var(--font-mono);letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line);background:oklch(100% 0 0/.05);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;display:inline-flex}.badge.red{color:var(--accent);border-color:oklch(63% .21 18/.4)}.badge.gold{color:var(--bb-yellow);border-color:oklch(82% .15 85/.35)}.val{font-family:var(--font-mono);color:var(--ink);font-size:17px;line-height:1}.panel-search{background:var(--bg-2);color:var(--ink);border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.drawer-head,.search-fab,.drawer-backdrop{display:none}.search-head{flex-direction:column;gap:12px;padding:16px 16px 12px;display:flex}.search-title{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);justify-content:space-between;align-items:center;gap:8px;font-size:11px;display:flex}.link-clear{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bb-yellow);cursor:pointer;background:0 0;border:0;padding:2px 4px;font-size:11px}.link-clear:hover{text-decoration:underline}.rarity-list{grid-template-columns:1fr 1fr;gap:6px;display:grid}.rarity-chk{font-family:var(--font-body);color:var(--ink-2);cursor:pointer;border:1px solid var(--line);-webkit-user-select:none;user-select:none;background:oklch(100% 0 0/.03);border-radius:10px;align-items:center;gap:7px;padding:7px 9px;font-size:12px;transition:border-color .15s,background .15s;display:flex}.rarity-chk:hover{border-color:var(--line-2)}.rarity-chk.on{border-color:var(--accent-2);color:var(--ink);background:oklch(72% .15 250/.14)}.rarity-chk input{width:15px;height:15px;accent-color:var(--accent-2);cursor:pointer;flex:none;margin:0}.rarity-chk span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.mode-toggle{border:1px solid var(--line-2);background:oklch(100% 0 0/.05);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.mode-toggle button{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:0 0;border:0;border-radius:999px;padding:7px 13px;font-size:11px;transition:background .18s,color .18s}.mode-toggle button.on{color:#0a0d14;background:linear-gradient(135deg,#fff,#dfe7f4);font-weight:700}.search-input{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-md);align-items:center;gap:8px;padding:10px 12px;transition:border-color .15s;display:flex}.search-input:focus-within{border-color:var(--accent-2)}.search-input input{color:var(--ink);background:0 0;border:0;outline:0;flex:1;font-size:15px}.search-input input::placeholder{color:var(--ink-3)}.search-input .pi{color:var(--ink-3);font-size:16px}.color-chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line-2);cursor:pointer;border-radius:50%;width:26px;height:26px;padding:0;transition:transform .1s;box-shadow:inset 0 1px 2px #ffffff40}.chip:hover{transform:scale(1.12)}.chip.text{width:auto;font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink);background:oklch(100% 0 0/.06);border-radius:999px;padding:5px 11px;font-size:11px}.results{flex:1;grid-template-columns:repeat(2,1fr);align-content:start;gap:10px;padding:6px 16px 18px;display:grid;overflow-y:auto}.results-hint{color:var(--ink-3);grid-column:1/-1;align-items:center;gap:6px;padding:4px 0;font-size:12.5px;display:flex}.tile{cursor:grab;touch-action:none;border-radius:10px;transition:transform .12s;position:relative}.tile:hover{z-index:2;transform:translateY(-3px)scale(1.02)}.tile.dragging{opacity:.4}.tile img{aspect-ratio:63/88;object-fit:cover;background:var(--slot-bg);width:100%;box-shadow:0 10px 22px -10px #000000b3, inset 0 0 0 1px var(--line);border-radius:10px;display:block}.tile .price{font-family:var(--font-mono);color:var(--ink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:oklch(13% .015 275/.85);border-radius:8px;padding:3px 7px;font-size:13px;line-height:1;position:absolute;bottom:5px;left:5px}.tile .nm{color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:11px;overflow:hidden}.buy{z-index:6;font-family:var(--font-mono);letter-spacing:.06em;color:#0a0d14;background:var(--bb-yellow);cursor:pointer;border:0;border-radius:8px;padding:4px 8px;font-size:10px;font-weight:700;line-height:1;text-decoration:none;display:none;position:absolute;box-shadow:0 6px 16px -6px #ffaa1eb3}.tile .buy{top:6px;right:6px}.card .buy{bottom:8px;left:8px}.tile:hover .buy,.card:hover .buy,.buy:focus-visible{display:inline-flex}.buy:hover{filter:brightness(1.06)}.buy:active{transform:translateY(1px)}.stage{background:radial-gradient(900px 500px at 50% -10%,oklch(72% .15 250/.1),#0000 60%);flex-direction:column;align-items:center;padding:24px;display:flex;position:relative;overflow:auto}.binder-toolbar{flex-wrap:wrap;align-items:center;gap:10px;width:100%;max-width:760px;margin-bottom:14px;display:flex}.binder-toolbar .grow{flex:1}.binder-3d{perspective:1500px;width:100%;max-width:760px;animation:7s ease-in-out infinite binderFloat}.binder-3d:hover{animation-play-state:paused}@keyframes binderFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.binder{border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,#16263f,#0c1626);width:100%;transition:transform .55s cubic-bezier(.16,.84,.44,1),box-shadow .55s;overflow:hidden;transform:rotateX(6deg)rotateY(-9deg);box-shadow:0 48px 90px -34px oklch(0% 0 0/.85),0 14px 32px -20px oklch(0% 0 0/.6),inset 0 0 0 1px oklch(100% 0 0/.06)}.binder:hover,.binder:focus-within{transform:rotateX(0)rotateY(0);box-shadow:0 60px 110px -38px oklch(0% 0 0/.85),inset 0 0 0 1px oklch(100% 0 0/.08)}@media (width<=860px){.panel-search{z-index:60;border-right:1px solid var(--line-2);will-change:transform;width:min(370px,90vw);transition:transform .3s cubic-bezier(.16,.84,.44,1);position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:0 0 70px -8px #000000d9}.panel-search.open{transform:translate(0)}.drawer-head{justify-content:space-between;align-items:center;gap:10px;padding:14px 14px 0;display:flex}.drawer-title{font-family:var(--font-display);color:var(--ink);font-size:18px;font-weight:700}.drawer-close{font-family:var(--font-display);color:#0a0d14;background:var(--bb-cta);cursor:pointer;border:0;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600}.drawer-backdrop{z-index:55;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;background:#00000080;transition:opacity .3s;display:block;position:fixed;inset:0}.drawer-backdrop.on{opacity:1;pointer-events:auto}.search-fab{z-index:50;font-family:var(--font-display);color:#0a0d14;background:var(--bb-cta);cursor:pointer;border:0;border-radius:999px;align-items:center;gap:8px;padding:13px 20px;font-size:15px;font-weight:700;display:inline-flex;position:fixed;bottom:16px;left:16px;box-shadow:0 12px 30px -10px #ff9614b3,0 4px 12px #00000073}.binder-3d{animation:none}.binder,.binder:hover,.binder:focus-within{transform:rotateX(4deg)rotateY(0)}.card .remove{display:inline-flex}.tile,.card{touch-action:pan-y}.results,.stage{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.stage{padding:14px 12px 92px}.binder-toolbar{flex-wrap:nowrap;margin-bottom:10px;padding-bottom:4px;overflow-x:auto}.binder-toolbar .btn{flex:none}.binder-toolbar .grow{display:none}}.titlebar{background:linear-gradient(180deg, var(--cover-accent-2,var(--bg-3)), var(--bg-2));color:var(--ink);border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:12px 16px;display:flex}.titlebar .name{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);background:0 0;border:0;flex:1;min-width:80px;font-size:15px;font-weight:700}.titlebar .name:focus{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:6px}.titlebar .counter{font-family:var(--font-mono);letter-spacing:.06em;white-space:nowrap;color:var(--ink-2);background:oklch(0% 0 0/.28);border-radius:999px;padding:5px 10px;font-size:11px}.page-wrap{padding:18px;position:relative}.page{border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line), inset 0 2px 24px #0000004d;gap:clamp(8px,1.6vw,16px);padding:clamp(10px,2.4vw,20px);animation:.32s both pageIn;display:grid;position:relative}@keyframes pageIn{0%{opacity:0;transform:translateX(var(--page-dir,18px))}to{opacity:1;transform:none}}.slot{aspect-ratio:63/88;background:var(--slot-bg);box-shadow:inset 0 0 0 1px var(--line), inset 0 2px 8px #00000080;border-radius:10px;position:relative}.slot.empty:before{content:"";border:1.5px dashed var(--pocket-seam);background:radial-gradient(circle at 50% 42%, var(--ghost) 0 16%, transparent 17%), linear-gradient(var(--ghost), var(--ghost)) 50% 50% / 46% 1.5px no-repeat;opacity:.8;background-repeat:no-repeat;border-radius:8px;position:absolute;inset:6px}.slot.drop-active{box-shadow:inset 0 0 0 2px var(--accent-2), 0 0 18px -2px var(--accent-2)}.slot.cursor{box-shadow:inset 0 0 0 2px var(--bb-yellow), 0 0 14px -2px oklch(82% .15 85/.7);animation:1.2s ease-in-out infinite alternate cursorPulse}@keyframes cursorPulse{0%{box-shadow:inset 0 0 0 2px var(--bb-yellow), 0 0 8px -2px oklch(82% .15 85/.5)}to{box-shadow:inset 0 0 0 2px var(--bb-yellow), 0 0 18px -1px oklch(82% .15 85/.95)}}.card{transform:rotate(var(--jitter,0deg));cursor:grab;touch-action:none;border-radius:8px;animation:.24s cubic-bezier(.34,1.56,.64,1) both snapIn;position:absolute;inset:5px}@keyframes snapIn{0%{transform:rotate(var(--jitter,0deg)) scale(1.18);opacity:.2}to{transform:rotate(var(--jitter,0deg)) scale(1);opacity:1}}.card img{object-fit:cover;border-radius:8px;width:100%;height:100%;display:block;box-shadow:0 6px 16px -6px #000000a6}.card:after{content:"";mix-blend-mode:screen;pointer-events:none;opacity:.5;background:linear-gradient(115deg,#ffffff38 0%,#0000 30% 70%,#ffffff1f 100%);border-radius:8px;position:absolute;inset:0}.card .remove{border:1px solid var(--line-2);background:var(--accent);color:#fff;z-index:4;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:12px;display:none;position:absolute;top:-8px;right:-8px;box-shadow:0 6px 14px -6px #000000b3}.slot:hover .card .remove{display:inline-flex}.card.holo .holo-layer{pointer-events:none;background:var(--bb-holo);background-size:300% 300%;background-position:var(--mx,50%) var(--my,50%);mix-blend-mode:color-dodge;opacity:.3;border-radius:8px;transition:opacity .2s;position:absolute;inset:0}.card.holo:hover .holo-layer{opacity:.62}.card.holo:hover{transform:rotate(var(--jitter,0deg)) perspective(700px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) scale(1.04);z-index:5}.wp-gallery{--slot-bg:oklch(13% .015 275);--pocket-seam:oklch(100% 0 0/.16);--ghost:oklch(100% 0 0/.06);background-color:#141828}.wp-parchment{--slot-bg:#e6dcc1;--pocket-seam:#3c301838;--ghost:#28201012;background-color:#f4eedb}.wp-blackweb{--slot-bg:#0e0e10;--pocket-seam:#ffffff29;--ghost:#ffffff0f;background-color:#141416}.wp-polka{--slot-bg:#8fb6dd;--pocket-seam:#1428464d;--ghost:#1428461f;background-color:#a8d0f0;background-image:radial-gradient(#fff9 22%,#0000 23%),radial-gradient(#fff9 22%,#0000 23%);background-position:0 0,15px 15px;background-size:30px 30px}.wp-stripes{--slot-bg:#f3b9b9;--pocket-seam:#781e1e47;--ghost:#781e1e1a;background:repeating-linear-gradient(45deg,#ffd6d6 0 18px,#f7a8a8 18px 36px)}.wp-checks{--slot-bg:#ece6d6;--pocket-seam:#3c301838;--ghost:#28201012;background-color:#fbfaf5;background-image:conic-gradient(#e6e0cf 90deg,#0000 90deg 180deg,#e6e0cf 180deg 270deg,#0000 270deg);background-size:38px 38px}.wp-gameboy{--slot-bg:#8bac0f;--pocket-seam:#0f380f80;--ghost:#0f380f33;background-color:#9bbc0f;background-image:repeating-linear-gradient(0deg,#0f380f29 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#0f380f14 0 1px,#0000 1px 3px)}.wp-sky{--slot-bg:#cfe6f7;--pocket-seam:#14284640;--ghost:#1428461a;background:linear-gradient(#a8d0f0,#e8f4ff)}.wp-forest{--slot-bg:#244a2e;--pocket-seam:#ffffff2e;--ghost:#ffffff14;background:linear-gradient(#2f5d3a,#6aa84f)}.wp-sunset{--slot-bg:#e98b6a;--pocket-seam:#5014284d;--ghost:#5014281f;background:linear-gradient(#f8d030,#f85858 70%,#b34b8f)}.pagenav{color:var(--ink);background:var(--bg-2);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:14px;display:flex}.pagenav .dots{flex-wrap:wrap;justify-content:center;gap:6px;max-width:280px;display:flex}.pagenav .dot{border:1px solid var(--line-2);cursor:pointer;background:0 0;border-radius:50%;width:11px;height:11px;padding:0}.pagenav .dot.on{background:var(--bb-yellow);border-color:var(--bb-yellow)}.wp-picker{gap:8px;padding:4px 0;display:flex;overflow-x:auto}.wp-swatch{border:1px solid var(--line-2);cursor:pointer;border-radius:8px;flex:none;width:52px;height:36px;padding:0;position:relative;overflow:hidden}.wp-swatch.on{outline:2px solid var(--bb-yellow);outline-offset:1px}.wp-swatch .lbl{font-family:var(--font-mono);letter-spacing:.04em;color:#fff;background:#0000008c;padding:1px 0;font-size:8px;position:absolute;bottom:0;left:0;right:0}.binder-list{gap:10px;padding:4px 0 8px;display:flex;overflow-x:auto}.mini-binder{border:1px solid var(--line-2);color:#fff;text-align:left;width:96px;box-shadow:var(--shadow-sm);cursor:pointer;border-radius:12px;flex:none;padding:9px 10px;position:relative}.mini-binder.on{outline:2px solid var(--bb-yellow);outline-offset:1px}.mini-binder .mb-name{font-family:var(--font-display);letter-spacing:-.01em;height:31px;font-size:12px;font-weight:700;line-height:1.3;overflow:hidden}.mini-binder .mb-meta{font-family:var(--font-mono);opacity:.85;margin-top:4px;font-size:10px}.mini-binder .mb-del{border:1px solid var(--line-2);background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:11px;display:none;position:absolute;top:-7px;right:-7px}.mini-binder:hover .mb-del{display:flex}.drag-ghost{border-radius:10px;width:120px;transform:rotate(-4deg);box-shadow:0 18px 40px -14px #000000bf}.drag-ghost img{border-radius:10px;width:100%;display:block}.empty-state{text-align:center;color:var(--ink-2);font-family:var(--font-body);padding:30px 16px}.empty-state h2{font-family:var(--font-display);color:var(--ink);margin-bottom:6px}.busy{background:var(--bg-2);color:var(--ink);border:1px solid var(--line-2);font-family:var(--font-mono);letter-spacing:.04em;z-index:50;box-shadow:var(--shadow);border-radius:999px;padding:9px 18px;font-size:12px;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.page,.card,.slot.cursor,.binder-3d{animation:none!important}.binder{transition:none}.card.holo:hover{transform:rotate(var(--jitter,0deg))}}@media (width<=860px){.card{touch-action:pan-y}.card .remove{display:inline-flex}}