:root{--bg:#f4ecdf;--page:#fffaf2;--pocket:#7626840f;--ink:#35203b;--muted:#7c6a80;--accent:#762684;--on-accent:#fff;--display:"Fraunces", serif;--line:color-mix(in srgb, var(--ink) 12%, transparent);--card-radius:7px;--sell:#1f9d6b;--want:#d9546e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Inter,system-ui,-apple-system,sans-serif}body.no-scroll{overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1}.btn{border:1px solid var(--line);background:var(--page);min-height:42px;color:var(--ink);white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .12s,background .15s,box-shadow .15s;display:inline-flex}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -8px var(--accent);border-color:#0000}.btn.ghost{background:0 0}.btn.danger{color:#c0392b;background:0 0;border-color:#c0392b4d}.btn.small{min-height:34px;padding:0 14px;font-size:14px}.btn.big{min-height:52px;padding:0 26px;font-size:17px}.btn.wide{width:100%}.icon-btn{width:36px;height:36px;color:var(--muted);background:0 0;border:0;border-radius:50%;font-size:16px}.icon-btn:hover{background:var(--pocket)}.link{color:var(--accent);background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.topbar{justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;padding:14px 20px;display:flex}.topbar nav{gap:8px;display:flex}.wordmark{letter-spacing:-.02em;color:var(--accent);font-family:"Baloo 2",sans-serif;font-size:24px;font-weight:800;text-decoration:none}.wordmark:before{content:"";vertical-align:-2px;width:14px;height:20px;box-shadow:3px 3px 0 color-mix(in srgb, currentColor 30%, transparent);background:currentColor;border-radius:3px;margin-right:7px;display:inline-block}.pc{aspect-ratio:55/85;border-radius:var(--card-radius);background:#ddd;width:100%;display:block;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000002e,0 6px 14px -8px #00000059}.pc img{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.pc-text,.pc-demo{text-align:left;background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent) 55%, #fff));color:#2a1830;flex-direction:column;justify-content:flex-end;gap:2px;padding:10% 9%;display:flex;position:absolute;inset:0}.pc-text strong,.pc-demo strong{font-family:var(--display);font-size:clamp(13px,2.2vw,20px);line-height:1.05}.pc-text span{opacity:.8;font-size:11px;font-weight:600}.pc-text em{opacity:.7;font-size:10px;font-style:normal}.pc.big{width:min(260px,62vw);margin:0 auto}.pc.small{width:110px}.pc.tiny{flex:none;width:48px}.holo{pointer-events:none;mix-blend-mode:color-dodge;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%), #ffffff8c, transparent 45%), linear-gradient(115deg, transparent 20%, #ff00aa59 36%, #00dcff59 50%, #ffe6004d 64%, transparent 80%);background-size:100% 100%,250% 250%;background-position:center, var(--mx,50%) var(--my,50%);transition:opacity .25s;position:absolute;inset:0}.pocket:hover .holo,.pc.big .holo{opacity:.6}@media (hover:none){.pocket .holo,.pc.big .holo{opacity:.35;animation:6s ease-in-out infinite alternate drift}}@keyframes drift{0%{background-position:50%,0 0}to{background-position:50%,100% 100%}}.binder-app{background:var(--bg);min-height:100vh;color:var(--ink);background-attachment:fixed;padding-bottom:110px}.binder-app.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.binder-app .topbar .btn.ghost{color:var(--ink);background:color-mix(in srgb, var(--page) 70%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.binder-app.dark .wordmark,.binder-app.dark .cover h1{color:var(--ink)}.cover{text-align:center;background:var(--page);max-width:760px;box-shadow:0 1px 0 var(--line), 0 30px 60px -40px #00000073;border-radius:22px;width:calc(100% - 32px);margin:8px auto 0;padding:36px 28px 30px;position:relative}.cover .eyebrow{color:var(--muted);letter-spacing:.02em;margin:0 0 8px;font-size:13px;font-weight:600}.cover h1{color:var(--accent);letter-spacing:-.02em;overflow-wrap:anywhere;font-size:clamp(30px,6vw,52px)}.cover .bio{max-width:46ch;color:var(--muted);white-space:pre-line;margin:12px auto 0;line-height:1.5}.cover-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex}.sticker{pointer-events:none;filter:drop-shadow(0 2px 2px #00000026);font-size:30px;position:absolute}.tabs{background:color-mix(in srgb, var(--page) 80%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:max-content;max-width:calc(100% - 32px);box-shadow:0 1px 0 var(--line);border-radius:999px;justify-content:center;gap:4px;margin:22px auto 0;padding:4px;display:flex;overflow-x:auto}.tabs button{color:var(--muted);white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600}.tabs button.on{background:var(--accent);color:var(--on-accent)}.tabs .count{opacity:.7;margin-left:2px;font-weight:500}.chips{flex-wrap:wrap;justify-content:center;gap:6px;max-width:760px;margin:14px auto 0;padding:0 16px;display:flex}.chips button{border:1px solid var(--line);background:var(--page);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}.chips button.on{border-color:var(--accent);color:var(--accent)}.pages{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),460px));justify-content:center;gap:26px;max-width:1180px;margin:22px auto 0;padding:0 16px;display:grid}.page{background:var(--page);box-shadow:0 1px 0 var(--line), 0 24px 40px -30px #00000080, inset 10px 0 18px -14px #00000040;border-radius:14px 18px 18px 14px;padding:18px 16px 30px 34px;position:relative}.rings{flex-direction:column;justify-content:space-around;display:flex;position:absolute;top:0;bottom:0;left:9px}.rings span{background:radial-gradient(circle at 35% 35%,#fff,#bfc3cc 55%,#8a8f99);border-radius:50%;width:14px;height:14px;box-shadow:inset 0 0 0 2px #00000014,0 1px 2px #00000040}.grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.page-no{color:var(--muted);font-size:11px;font-weight:600;position:absolute;bottom:9px;right:16px}.pocket{aspect-ratio:55/85;background:var(--pocket);box-sizing:content-box;width:calc(100% - 10px);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);border:0;border-radius:10px;padding:5px;display:block;position:relative}.pocket.filled{cursor:pointer;perspective:600px}.pocket.filled .pc{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .2s}.pocket.filled:after{content:"";pointer-events:none;background:linear-gradient(160deg,#ffffff59,#0000 30% 70%,#ffffff1f);border-radius:10px;position:absolute;inset:0}.pocket.status-want .pc{filter:grayscale(.85)opacity(.55)}.pocket.status-want .pc:after{content:"";border:2px dashed #ffffffe6;border-radius:5px;position:absolute;inset:4px}.pocket:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.pocket.empty.add{color:var(--accent);text-align:center;border:2px dashed color-mix(in srgb, var(--accent) 40%, transparent);background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:12px;font-weight:600;display:flex}.pocket.empty.add span{font-size:28px;line-height:1}.tag{z-index:2;white-space:nowrap;color:#fff;text-overflow:ellipsis;border-radius:999px;max-width:95%;padding:2px 8px;font-size:11px;font-weight:700;position:absolute;bottom:-4px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 2px 6px #0003}.tag.sell{background:var(--sell)}.tag.want{background:var(--want)}.empty-note{text-align:center;color:var(--muted);grid-column:1/-1}.fab{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));background:var(--accent);height:56px;color:var(--on-accent);z-index:20;box-shadow:0 12px 30px -10px var(--accent), 0 2px 6px #0003;border:0;border-radius:999px;align-items:center;gap:6px;padding:0 22px 0 18px;font-size:16px;font-weight:700;display:flex;position:fixed}.fab span{margin-top:-2px;font-size:26px;line-height:1}.foot{flex-direction:column;align-items:center;gap:16px;margin:44px 0 0;padding:0 16px;display:flex}.echoes{color:var(--muted);align-items:center;gap:7px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex}.binder-app.dark .echoes img{filter:brightness(2.4)saturate(.6)}.toast{z-index:60;color:#fff;background:#1d1320;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;animation:.2s pop;position:fixed;bottom:90px;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%,8px)}}.modal{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#140a1973;justify-content:center;align-items:center;padding:16px;animation:.15s fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.sheet{color:#35203b;--page:#fffaf2;--ink:#35203b;--muted:#7c6a80;--pocket:#7626840f;--display:"Fraunces", serif;background:#fffaf2;border-radius:22px;flex-direction:column;width:min(440px,100%);max-height:calc(100dvh - 32px);display:flex;box-shadow:0 30px 80px -20px #00000080}.sheet.wide{width:min(680px,100%)}.sheet-head{justify-content:space-between;align-items:center;padding:18px 16px 6px 22px;display:flex}.sheet-head h2{font-size:22px}.sheet-body{padding:8px 22px 22px;overflow-y:auto}@media (width<=560px){.modal{align-items:flex-end;padding:0}.sheet,.sheet.wide{border-radius:22px 22px 0 0;width:100%;max-height:92dvh;animation:.22s up}.sheet-body{padding-bottom:max(22px, env(safe-area-inset-bottom))}}@keyframes up{0%{opacity:.4;transform:translateY(40px)}}.form{flex-direction:column;gap:14px;display:flex}.form.narrow{max-width:360px}.form label{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.form label small{color:var(--muted);font-weight:500}.form input,.form textarea,.search-box{border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);color:#35203b;background:#fff;border-radius:12px;width:100%;padding:11px 13px;font-size:16px;font-weight:400}.form input:focus,.form textarea:focus,.search-box:focus{outline:2px solid var(--accent);outline-offset:0;border-color:#0000}.prefixed{border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);background:#fff;border-radius:12px;align-items:center;display:flex;overflow:hidden}.prefixed:focus-within{outline:2px solid var(--accent)}.prefixed span{color:var(--muted);white-space:nowrap;padding-left:13px;font-weight:500}.prefixed input{padding-left:2px;border:0!important;outline:none!important}small.good{color:var(--sell)}small.bad,.error{color:#c0392b}.error{margin:0;font-size:14px}.hint{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.switch{text-align:center;color:var(--muted);margin:4px 0 0;font-size:14px}.switch button{color:var(--accent);background:0 0;border:0;padding:0;font-weight:600}.actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.seg{background:var(--pocket);border-radius:14px;gap:4px;padding:4px;display:flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:10px;flex:1;padding:10px 6px;font-size:13px;font-weight:600}.seg button.on{color:var(--ink);background:#fff;box-shadow:0 1px 3px #0000001f}.chip{color:#fff;background:#8a7d8e;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;display:inline-block}.chip.status-sell{background:var(--sell)}.chip.status-want{background:var(--want)}.add-start{gap:12px;display:grid}.big-choice{text-align:left;border:1px solid var(--line);background:#fff;border-radius:16px;grid-template-rows:auto auto;grid-template-columns:48px 1fr;gap:2px 12px;padding:16px;display:grid}.big-choice .emoji{text-align:center;grid-row:span 2;align-self:center;font-size:30px}.big-choice strong{font-size:16px}.big-choice span:last-child{color:var(--muted);font-size:13px}.big-choice:hover{border-color:var(--accent)}.toast-inline{background:color-mix(in srgb, var(--sell) 14%, #fff);color:#176b4a;border-radius:12px;margin:0;padding:10px 14px;font-size:14px;font-weight:600}.crop{flex-direction:column;align-items:center;gap:14px;display:flex}.crop-frame{touch-action:none;cursor:grab;box-shadow:0 0 0 3px var(--accent);background:#222;border-radius:12px;position:relative;overflow:hidden}.crop-frame img{-webkit-user-select:none;user-select:none;pointer-events:none;max-width:none;position:absolute}.crop-thirds{pointer-events:none;background:linear-gradient(90deg,#0000 calc(33.3% - .5px),#ffffff80 33.3%,#0000 calc(33.3% + .5px) calc(66.6% - .5px),#ffffff80 66.6%,#0000 calc(66.6% + .5px)),linear-gradient(#0000 calc(33.3% - .5px),#ffffff80 33.3%,#0000 calc(33.3% + .5px) calc(66.6% - .5px),#ffffff80 66.6%,#0000 calc(66.6% + .5px));position:absolute;inset:0}.zoom{align-items:center;gap:10px;width:250px;font-size:14px;font-weight:600;display:flex}.zoom input{accent-color:var(--accent);flex:1}.crop .actions{width:100%}.match{grid-template-columns:140px 1fr;align-items:start;gap:20px;display:grid}.match-scan{color:var(--muted);flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.match-results{flex-direction:column;gap:14px;display:flex}@media (width<=560px){.match{grid-template-columns:1fr}.match-scan .pc{width:110px}}.result-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;display:grid}.result{text-align:left;background:0 0;border:2px solid #0000;border-radius:12px;flex-direction:column;gap:3px;padding:6px;font-size:12px;display:flex}.result .pc{margin-bottom:4px}.result strong{font-size:13px}.result span{color:var(--muted)}.result em{color:var(--sell);font-style:normal;font-weight:700}.result.likely{border-color:color-mix(in srgb, var(--sell) 50%, transparent);background:color-mix(in srgb, var(--sell) 6%, transparent)}.result:hover{border-color:var(--accent)}.search{flex-direction:column;gap:14px;display:flex}.details .pc.small,.status-step .pc.small{align-self:center}.status-step{flex-direction:column;align-items:stretch;gap:14px;display:flex}.status-step .title{text-align:center;margin:0;font-weight:700}.status-step .title span{color:var(--muted);font-size:14px;font-weight:500}.card-sheet{flex-direction:column;gap:18px;display:flex}.card-info .sub{color:var(--muted);text-align:center;margin:0 0 12px}.card-info .note{color:var(--muted)}.decorate{z-index:40;color:#35203b;--ink:#35203b;--muted:#7c6a80;--pocket:#7626840f;--display:"Fraunces", serif;background:#fffaf2;flex-direction:column;width:min(380px,100%);animation:.2s slide;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-20px 0 60px -20px #0006}@keyframes slide{0%{opacity:0;transform:translate(30px)}}.decorate header{justify-content:space-between;align-items:center;padding:18px 16px 8px 22px;display:flex}.decorate-body{flex-direction:column;flex:1;gap:14px;padding:4px 22px 22px;display:flex;overflow-y:auto}.decorate h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:Inter,sans-serif;font-size:13px}.decorate footer{padding:14px 22px max(14px, env(safe-area-inset-bottom));border-top:1px solid var(--line)}.presets{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.preset{text-align:left;background:0 0;border:2px solid #0000;border-radius:14px;flex-direction:column;gap:6px;padding:6px;font-size:12px;font-weight:600;display:flex}.preset.on{border-color:var(--accent)}.swatch{border-radius:10px;justify-content:center;align-items:center;height:58px;display:flex;box-shadow:inset 0 0 0 1px #00000014}.swatch span{border-left:4px solid;border-radius:5px;width:38%;height:70%;box-shadow:0 2px 6px #00000026}.stickers{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.stickers button{aspect-ratio:1;background:0 0;border:0;border-radius:10px;font-size:22px}.stickers button.on{background:color-mix(in srgb, var(--accent) 16%, transparent);box-shadow:inset 0 0 0 2px var(--accent)}@media (width>=900px){.binder-app.decorating{padding-right:380px}}@media (width<=899px){.decorate{border-radius:22px 22px 0 0;width:100%;height:62dvh;animation:.22s up;top:auto}}.matches h3{margin:6px 0 10px;font-family:Inter,sans-serif;font-size:15px}.matches ul{flex-direction:column;gap:10px;margin:0 0 18px;padding:0;list-style:none;display:flex}.matches li{align-items:center;gap:12px;display:flex}.matches .who{flex-direction:column;flex:1;gap:1px;min-width:0;font-size:13px;display:flex}.matches .who span{color:var(--muted)}.landing{background:radial-gradient(circle at 85% 10%, #f1d9f4 0, transparent 40%), radial-gradient(circle at 10% 90%, #dbe7ff 0, transparent 35%), var(--bg);min-height:100vh}.hero{grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;max-width:1120px;margin:0 auto;padding:48px 24px 64px;display:grid}.hero .eyebrow{color:var(--accent);letter-spacing:.03em;margin:0 0 14px;font-size:14px;font-weight:700}.hero h1{letter-spacing:-.035em;color:#2a1830;font-size:clamp(46px,7.5vw,88px)}.lede{color:var(--muted);max-width:34ch;margin:22px 0 28px;font-size:19px;line-height:1.55}.lede strong{color:var(--ink)}.hero-actions{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.free{color:var(--muted);font-size:14px}.hero-binder{position:relative}.demo-page{background:var(--page);border-radius:16px 20px 20px 16px;padding:20px 18px 22px 38px;position:relative;transform:rotate(2.5deg);box-shadow:0 40px 80px -40px #3c14468c,inset 10px 0 18px -14px #00000040}.demo-page .pocket.filled{cursor:default}.demo-page .pc-demo strong{font-size:18px}.float{filter:drop-shadow(0 4px 6px #00000026);font-size:42px;animation:4s ease-in-out infinite alternate bob;position:absolute}.float.s1{top:-18px;left:-14px}.float.s2{animation-delay:-1.3s;top:30%;right:-18px}.float.s3{animation-delay:-2.4s;bottom:-16px;left:24%}@keyframes bob{to{transform:translateY(-10px)rotate(8deg)}}.features{grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:0 auto;padding:0 24px;display:grid}.features article{background:color-mix(in srgb, var(--page) 85%, transparent);box-shadow:0 1px 0 var(--line);border-radius:20px;padding:26px}.features .emoji{font-size:30px}.features h2{margin:10px 0 8px;font-size:24px}.features p{color:var(--muted);margin:0;line-height:1.55}.closer{text-align:center;flex-direction:column;align-items:center;gap:22px;padding:80px 24px 10px;display:flex}.closer h2{letter-spacing:-.02em;font-size:clamp(30px,5vw,50px)}.landing .foot{padding-bottom:40px}@media (width<=820px){.hero{grid-template-columns:1fr;gap:40px;padding-top:24px}.hero-binder{width:100%;max-width:420px;margin:0 auto}.features{grid-template-columns:1fr}}.plain{flex-direction:column;align-items:flex-start;gap:16px;max-width:520px;margin:0 auto;padding:40px 24px;display:flex}.plain .wordmark{margin-bottom:20px}.loading{place-items:center;min-height:100vh;display:grid}.spinner{border:3px solid var(--pocket);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=560px){.topbar{padding:12px 16px}.cover{padding:30px 20px 24px}.page{padding:12px 10px 26px 26px}.rings{left:6px}.rings span{width:11px;height:11px}.grid{gap:7px}.tabs{width:calc(100% - 32px)}.tabs button{flex:1;padding:9px 6px;font-size:13px}.cover .bio,.cover-actions{z-index:1;position:relative}.sticker{font-size:20px}.pocket{width:calc(100% - 6px);padding:3px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}