:root{--color-bg:#f6f5f0;--color-surface:#fff;--color-surface-muted:#e9e7df;--color-text:#000;--color-text-strong:#2d2d2d;--color-text-muted:#707070;--color-text-faint:#0000004d;--color-primary:#346b33;--color-primary-text:#fff;--color-accent:#456b3b;--color-brand:#4d7f32;--color-border:#cfcdc2;--color-border-input:#00000026;--color-login-from:#f2b53a;--color-login-to:#f7e694;--color-border-login:#c7c7c7;--color-placeholder:#6f6f6f;--color-notice-bg:#fff6e0;--color-notice-border:#42340026;--color-notice-title:#5c3800;--color-notice-text:#99691e;--color-wanted-bg:#fff1d1;--color-wanted-border:#e3a21f;--color-wanted-text:#865f12;--color-tag-photo:#ff9696;--color-tag-field:#53ba6b;--color-tag-friend:#ec96ff;--color-tag-illustration:#95a0d7;--color-viewer:#343434;--color-viewer-frame:#f1f1f1;--color-jar-from:#6caa4b3d;--color-jar-to:#456b3b3d;--color-round-border:#959595;--color-scan-border:#c2c2c2;--color-tag-place:#9bd676;--color-tag-text:#f6f5f0;--font-base:"42dot Sans", system-ui, -apple-system, "Hiragino Sans", sans-serif;--font-display:"Lacquer", var(--font-base);--font-size-xs:10px;--font-size-sm:11px;--font-size-md:12px;--font-size-base:14px;--font-size-lg:15px;--font-size-display:32px;--font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:800;--radius-xs:3px;--radius-card:10px;--radius-button:15px;--radius-login-button:12px;--radius-pill:40px;--shadow-logo:0 1px 2px #00000040;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-base);font-size:var(--font-size-base);background:var(--color-surface-muted);color:var(--color-text)}.app{background:var(--color-bg);flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex}.page{padding:var(--space-4);flex:1;overflow-y:auto}.tabbar{background:var(--color-surface);padding-bottom:env(safe-area-inset-bottom);display:flex}.tab{padding:var(--space-3) var(--space-1);border-radius:var(--radius-xs);text-align:center;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-accent);flex:1;text-decoration:none}.tab.active{padding-top:calc(var(--space-3) + 11px);background:var(--color-bg);color:var(--color-text);margin-top:-11px;position:relative}.tab-icon{width:32px;height:28px;margin:0 auto var(--space-1);background:currentColor;display:block;-webkit-mask:none 50% no-repeat;mask:none 50% no-repeat}.tab-icon-timeline{-webkit-mask-image:url(/images/tab-timeline.svg);mask-image:url(/images/tab-timeline.svg);-webkit-mask-size:21px 13px;mask-size:21px 13px}.tab-icon-capture{-webkit-mask-image:url(/images/tab-capture.png);mask-image:url(/images/tab-capture.png);-webkit-mask-size:31px 31px;mask-size:31px 31px}.tab-icon-binder{-webkit-mask-image:url(/images/tab-binder.png);mask-image:url(/images/tab-binder.png);-webkit-mask-size:28px 28px;mask-size:28px 28px}.tab-icon-fields{-webkit-mask-image:url(/images/tab-fields.svg);mask-image:url(/images/tab-fields.svg);-webkit-mask-size:25px 18px;mask-size:25px 18px}.page:has(>.login){padding:0}.login{min-height:100%;padding:var(--space-5) var(--space-5) 40px;background:linear-gradient(to bottom, var(--color-login-from) 29.8%, var(--color-login-to));color:var(--color-bg);flex-direction:column;display:flex;overflow:hidden}.login-logo{align-items:center;gap:var(--space-3);font-family:var(--font-display);color:var(--color-brand);text-shadow:var(--shadow-logo);margin:0;font-size:48px;font-weight:400;display:flex}.login-logo img{filter:drop-shadow(var(--shadow-logo))}.login-tagline{margin:28px 0 var(--space-1);font-family:var(--font-display);font-size:36px}.login-lead{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0;line-height:20px}.login-stickers{min-height:230px;margin:var(--space-5) calc(var(--space-5) * -1);flex:1;position:relative}.login-stickers img{width:46%;max-width:200px;height:auto;position:absolute;top:50%}.login-stickers img:first-child{left:3%;transform:translateY(-60%)rotate(-16.62deg)}.login-stickers img:last-child{left:57%;transform:translateY(-35%)rotate(14.67deg)}.login-form{gap:var(--space-4);flex-direction:column;display:flex}.login-input{padding:var(--space-2) 9px;border-color:var(--color-border-login);border-radius:var(--radius-xs)}.login-input::placeholder{color:var(--color-placeholder)}.login-primary{width:100%;padding:var(--space-3);border-radius:var(--radius-login-button);background:var(--color-primary);color:var(--color-primary-text);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);border:none;display:block}.login-primary:disabled{opacity:.6}.login-error{padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);background:var(--color-surface);color:#c62828;font-size:var(--font-size-md);margin:0}.btn{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);cursor:pointer;display:inline-flex}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--color-primary);color:var(--color-primary-text);border-color:#0000}.btn-block{width:100%;padding:var(--space-3);border-radius:var(--radius-button);font-size:var(--font-size-base);display:flex}.card{padding:var(--space-4);border-radius:var(--radius-card);background:var(--color-surface)}.card-muted{background:var(--color-bg)}.notice{padding:var(--space-4);border:1px solid var(--color-notice-border);border-radius:var(--radius-card);background:var(--color-notice-bg);color:var(--color-notice-text);font-size:var(--font-size-md)}.notice-title{margin:0 0 var(--space-1);color:var(--color-notice-title);font-size:13px;font-weight:var(--font-weight-semibold)}.page-title{margin:0 0 var(--space-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.section-title{margin:0 0 var(--space-2);font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}.text-muted{color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-light)}.input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-input);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:16px}.tag{padding:0 var(--space-2);border-radius:var(--radius-card);background:var(--color-tag-photo);color:var(--color-tag-text);font-size:var(--font-size-xs);line-height:14px;display:inline-block}.tag-illustration{background:var(--color-tag-illustration)}.tag-place{background:var(--color-tag-place);color:var(--color-surface);font-weight:var(--font-weight-medium);padding:0 11px;line-height:20px}.avatar{color:var(--color-surface);font-weight:var(--font-weight-bold);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.page-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:flex-end;display:flex}.page-header-logo{font-family:var(--font-display);font-size:var(--font-size-display);color:var(--color-brand);text-shadow:var(--shadow-logo);align-items:center;display:flex}.page-header-logo img{filter:drop-shadow(var(--shadow-logo))}.page-header-title{margin:0 0 var(--space-1);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.want-button{height:35px;padding:0 var(--space-4) 0 var(--space-3);border:1px solid var(--color-text);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;align-items:center;gap:6px;display:inline-flex}.want-button.wanted{border-color:var(--color-wanted-border);background:var(--color-wanted-bg);color:var(--color-wanted-text)}.want-button:disabled{opacity:.6;cursor:default}.timeline{gap:var(--space-3);flex-direction:column;display:flex}.timeline-sticker{grid-template-columns:80px 1fr;align-items:center;gap:20px;display:grid}.timeline-thumb{height:80px;padding:var(--space-1);border-radius:var(--radius-card);background:var(--color-bg);justify-content:center;align-items:center;display:flex}.timeline-body{align-items:flex-start;gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.timeline-link{color:inherit;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;display:flex}.timeline-who{align-items:flex-start;gap:var(--space-1);margin-bottom:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);word-break:break-all;display:flex}.timeline-who-lg{align-items:center;gap:var(--space-2);margin-bottom:0}.timeline-who-lg>span:last-child{flex-direction:column;display:flex}.timeline-caption{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.timeline-link .tag{margin-top:var(--space-1)}.timeline-exchange{align-items:flex-start;gap:var(--space-2);color:inherit;flex-direction:column;text-decoration:none;display:flex}.timeline-exchange-title{font-size:13px;font-weight:var(--font-weight-medium)}.timeline-trade{justify-content:center;align-self:stretch;align-items:center;gap:var(--space-4);padding:var(--space-2);border-radius:var(--radius-card);background:var(--color-bg);display:flex}.timeline-trade-item{text-align:center;font-size:var(--font-size-xs);margin:0}.timeline-trade-image{justify-content:center;align-items:center;width:60px;height:53px;margin-bottom:2px;display:flex}.timeline-trade-arrow{font-size:24px;font-weight:var(--font-weight-light)}.segmented{padding:var(--space-1);background:var(--color-surface-muted);border-radius:20px;display:flex}.segmented>*{padding:var(--space-2);color:var(--color-text-strong);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);background:0 0;border:none;border-radius:20px;flex:1}.segmented>.active{background:var(--color-surface);color:var(--color-text)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}label:focus-within:has(>.visually-hidden){outline:2px solid var(--color-primary);outline-offset:2px}.btn.disabled{opacity:.5;cursor:default}.tag-field{background:var(--color-tag-field)}.icon-button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:inline-flex}.capture-modes{margin-bottom:var(--space-3)}.capture-viewer{justify-content:center;align-items:center;gap:var(--space-5);min-height:342px;padding:var(--space-5) var(--space-4);border-radius:var(--radius-button);background:var(--color-viewer);color:var(--color-surface);font-size:var(--font-size-sm);text-align:center;flex-direction:column;display:flex}.capture-viewer p{margin:0}.capture-frame{border:1px dashed var(--color-viewer-frame);border-radius:var(--radius-button);color:#ffffff80;justify-content:center;align-items:center;width:178px;height:180px;display:flex}.capture-shutter{width:63px;margin:var(--space-4) auto 0;cursor:pointer;border-radius:50%;display:block}.capture-files,.capture-files .card{gap:var(--space-3);flex-direction:column;display:flex}.capture-files .section-title{margin:0}.back-header{align-items:center;gap:var(--space-2);margin:var(--space-5) 0 var(--space-4);display:flex}.back-header h1{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.capture-image{height:195px;padding:var(--space-3);border-radius:var(--radius-button);background:repeating-conic-gradient(#e9e9e9 0 25%, #fff 0 50%) 0 0 / 24px 24px;justify-content:center;align-items:center;display:flex}.capture-image img{max-width:100%;max-height:100%}.capture-tags{margin:var(--space-3) 0;gap:6px;display:flex}.capture-caption{gap:var(--space-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);flex-direction:column;display:flex}.capture-caption .input{font-weight:var(--font-weight-bold)}.capture-count{margin:var(--space-1) 0 var(--space-4);text-align:right;color:var(--color-text-faint);font-size:var(--font-size-md);font-weight:var(--font-weight-bold)}.capture-count.over{color:#c62828}.capture-notice{gap:var(--space-2) var(--space-3);grid-template-columns:18px 1fr;display:grid}.capture-notice p{margin:0}.capture-notice .notice-title{margin-bottom:2px}.capture-confirm{align-items:center;gap:var(--space-2);margin-top:var(--space-3);color:var(--color-text);font-size:13px;font-weight:var(--font-weight-medium);grid-column:1/-1;display:flex}.capture-files .capture-confirm{margin-top:0}.capture-confirm input{width:17px;height:17px;accent-color:var(--color-primary);margin:0}.capture-save{margin-top:var(--space-5)}.round-button{border:1px solid var(--color-round-border);background:var(--color-surface);width:30px;height:30px;color:var(--color-text);font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.round-button:disabled{opacity:.4;cursor:default}.round-button-plus{font-size:24px;font-weight:var(--font-weight-light)}.binder-toolbar{justify-content:flex-end;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.binder-toolbar [role=status]{margin-right:auto}.binder-page-number{text-align:center;min-width:36px;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);letter-spacing:.27em}.binder-jar{border:1px solid var(--color-border-input);border-radius:var(--radius-button);background:linear-gradient(to bottom, var(--color-jar-from), var(--color-jar-to));position:relative;overflow:hidden}.binder-jar .konvajs-content{position:relative}.binder-bubbles img{animation:5s ease-in-out infinite alternate bubble-float;position:absolute}.binder-bubbles img:nth-child(2n){animation-duration:3.5s}@keyframes bubble-float{to{transform:translateY(-6px)}}@media (prefers-reduced-motion:reduce){.binder-bubbles img{animation:none}}.binder-dock{padding-top:var(--space-3);background:var(--color-bg);position:sticky;bottom:0}.binder-dock>.btn{margin-bottom:var(--space-3)}.binder-hand-header{justify-content:space-between;align-items:baseline;display:flex}.binder-hand-hint{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.binder-hand{gap:var(--space-3);padding:var(--space-2) 0 var(--space-3);display:flex;overflow-x:auto}.binder-hand-item{width:59px;height:60px;padding:var(--space-1);border:1px solid var(--color-border-input);border-radius:var(--radius-button);background:var(--color-surface);cursor:pointer;flex:none;justify-content:center;align-items:center;display:flex;position:relative}.binder-hand-item img{object-fit:contain}.binder-hand-owner{display:flex;position:absolute;top:-2px;right:-2px}.binder-exchange{margin-top:var(--space-4);text-decoration:none}.progress{border-radius:var(--radius-button);background:var(--color-surface-muted);height:6px;overflow:hidden}.progress>span{border-radius:inherit;background:var(--color-accent);height:100%;transition:width 1s linear;display:block}.or-divider{align-items:center;gap:var(--space-3);margin:var(--space-5) 0;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);display:flex}.or-divider:before,.or-divider:after{background:var(--color-border);content:"";flex:1;height:1px}.exchange-occasion{gap:var(--space-2);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);flex-direction:column;display:flex}.exchange-occasion-help{margin:var(--space-1) 0 var(--space-4);color:var(--color-text-faint);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);justify-content:space-between;align-items:flex-start;display:flex}.exchange-occasion-help .capture-count{margin:0}.exchange-qr{gap:var(--space-3);margin-top:var(--space-3);border-radius:var(--radius-button);text-align:center;flex-direction:column;display:flex}.exchange-qr p{margin:0}.exchange-qr>p:first-child{font-size:var(--font-size-md);font-weight:var(--font-weight-medium)}.exchange-qr-image{width:100%;max-width:220px;image-rendering:pixelated;margin:0 auto}.exchange-status{margin:var(--space-2) 0 0;text-align:center}.exchange-scan{border-color:var(--color-scan-border);font-size:var(--font-size-base)}.exchange-scan-hint{margin-bottom:var(--space-3)}.exchange-scan-hint p{margin:0}.logo{font-family:var(--font-display);font-size:var(--font-size-display);color:var(--color-brand);text-shadow:var(--shadow-logo)}