.hb{--hb-cream: #efe3d0;--hb-cream-deep: #e3d3ba;--hb-paper: #faf4e9;--hb-ink: #4a3f30;--hb-blue: #5b7f9e;--hb-blue-deep: #3f5f7a;--hb-line: #d8c8ad;background:#cdbfa6;min-height:100vh;padding:20px 0 60px;font-family:Noto Sans TC,system-ui,sans-serif;color:var(--hb-ink)}.hb-toolbar{max-width:480px;margin:0 auto 16px;display:flex;gap:8px;padding:0 12px;align-items:center}.hb-toolbar .spacer{flex:1}.hb-btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;background:var(--hb-blue);color:#fff;box-shadow:0 3px 8px #3f5f7a4d}.hb-btn.ghost{background:#ffffffb3;color:var(--hb-ink)}.hb-page{position:relative;width:min(480px,calc(100vw - 24px));aspect-ratio:3 / 4;margin:0 auto 18px;background:var(--hb-paper);border-radius:10px;box-shadow:0 8px 24px #4a3f3040;overflow:hidden;padding:26px 24px;display:flex;flex-direction:column}.hb-page:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(200,180,145,.12) 1px,transparent 1px);background-size:14px 14px;pointer-events:none}.hb-page>*{position:relative;z-index:1}.hb-eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--hb-blue);font-weight:700}.hb-title{font-size:40px;font-weight:900;line-height:1.05;color:var(--hb-blue-deep);font-family:Georgia,"Noto Serif TC",serif}.hb-sub{font-size:14px;color:var(--hb-ink);opacity:.8}.hb-h2{font-size:18px;font-weight:900;color:var(--hb-blue-deep);display:flex;align-items:center;gap:8px}.hb-tape{display:inline-block;background:var(--hb-cream-deep);padding:5px 14px;font-size:13px;font-weight:700;transform:rotate(-1.5deg);box-shadow:0 1px 3px #4a3f3026;color:var(--hb-ink)}.hb-stamp{border:2px solid var(--hb-blue);color:var(--hb-blue);border-radius:50%;width:76px;height:76px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:800;line-height:1.25;transform:rotate(8deg);opacity:.85}.hb-timeline{display:flex;flex-direction:column;gap:0}.hb-tl-item{display:flex;gap:12px}.hb-tl-rail{display:flex;flex-direction:column;align-items:center;flex:none}.hb-tl-dot{width:11px;height:11px;border-radius:50%;background:var(--hb-blue);margin-top:5px}.hb-tl-line{width:2px;flex:1;background:var(--hb-line)}.hb-tl-body{padding-bottom:14px;flex:1}.hb-tl-time{font-size:11.5px;font-weight:800;color:var(--hb-blue)}.hb-tl-name{font-size:14.5px;font-weight:700}.hb-tl-note{font-size:11.5px;opacity:.7;line-height:1.4}.hb-checklist{display:flex;flex-direction:column;gap:7px}.hb-check{display:flex;gap:8px;align-items:baseline;font-size:13px}.hb-box{width:13px;height:13px;border:1.5px solid var(--hb-blue);border-radius:3px;flex:none}.hb-box-note{background:#5b7f9e14;border:1px dashed var(--hb-blue);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.55}.hb-stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hb-stamp-cell{aspect-ratio:1;border:1.5px dashed var(--hb-line);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--hb-line)}.hb-wave{margin-top:auto;height:40px;opacity:.5}@media print{.hb{background:#fff;padding:0}.hb-toolbar{display:none}.hb-page{width:100%;max-width:none;margin:0;border-radius:0;box-shadow:none;break-after:page;page-break-after:always}@page{size:A5 portrait;margin:8mm}}@font-face{font-family:jf-openhuninn;src:url(/fonts/jf-openhuninn.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--bg: #fbf6ec;--card: #fffdf7;--ink: #4a4036;--muted: #a3968a;--line: #f0e6d6;--pine: #3fa98e;--pine-deep: #2c7a66;--pine-soft: #ddf1e9;--pine-ink: #2c7a66;--sun: #e98a55;--sun-soft: #fdeadc;--amber: #c98a2e;--amber-soft: #faf0d7;--gold: #f2b95b;--cat-food: #f9a8b8;--cat-food-ink: #c2465f;--cat-food-soft: #fdecef;--cat-sight: #8ec9e8;--cat-sight-ink: #2e6e96;--cat-sight-soft: #e8f4fb;--cat-culture: #c3b2e8;--cat-culture-ink: #6a4fa3;--cat-culture-soft: #f1ecfa;--cat-exp: #a8dfc5;--cat-exp-ink: #2e7d5b;--cat-exp-soft: #e9f7f0;--clay-shadow: 0 6px 16px rgba(122, 100, 70, .12), inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(122, 100, 70, .07);--clay-shadow-sm: 0 3px 8px rgba(122, 100, 70, .12), inset 0 1.5px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(122, 100, 70, .07);--clay-shadow-color: 0 6px 16px rgba(122, 100, 70, .18), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .08);--r-card: 26px;--r-btn: 999px;--r-input: 20px;--bounce: cubic-bezier(.34, 1.56, .64, 1);--font: "jf-openhuninn", "Noto Sans TC", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--bg)}body{color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;text-wrap:pretty}.screen{display:flex;flex-direction:column;min-height:100dvh;max-width:520px;margin:0 auto;background:radial-gradient(circle at 88% -4%,rgba(168,223,197,.35) 0 140px,transparent 141px),radial-gradient(circle at -6% 30%,rgba(249,168,184,.18) 0 120px,transparent 121px),radial-gradient(circle at 105% 70%,rgba(142,201,232,.18) 0 130px,transparent 131px),var(--bg)}@media(min-width:1024px){.screen.wide{max-width:none}}.wrap{padding-left:20px;padding-right:20px}.h1{font-size:26px;font-weight:900;line-height:1.35}.cap{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.14em}.muted{color:var(--muted)}.num{font-variant-numeric:tabular-nums}.row{display:flex;align-items:center}.between{justify-content:space-between}.col{display:flex;flex-direction:column}.card{background:var(--card);border:none;border-radius:var(--r-card);box-shadow:var(--clay-shadow)}.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r-btn);border:none;background:var(--card);box-shadow:var(--clay-shadow-sm);font-family:var(--font);font-size:14px;font-weight:500;color:var(--ink);min-height:40px;cursor:pointer;transition:transform .15s var(--bounce),box-shadow .15s}.chip:active{transform:scale(.94)}.chip.on{background:var(--pine);color:#fff;font-weight:700;box-shadow:var(--clay-shadow-color)}.seg{display:flex;background:#f1e9d8;border-radius:var(--r-btn);padding:5px;gap:4px;box-shadow:inset 0 2px 5px #7a644624}.segbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:var(--r-btn);border:none;background:transparent;font-family:var(--font);font-size:14px;font-weight:500;color:var(--muted);min-height:44px;cursor:pointer;transition:transform .15s var(--bounce)}.segbtn:active{transform:scale(.95)}.segbtn.on{background:var(--card);color:var(--pine-ink);font-weight:700;box-shadow:0 3px 8px #7a644629,inset 0 1.5px #ffffffe6}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:var(--r-btn);font-size:11.5px;font-weight:700;white-space:nowrap}.tag.tcard{background:var(--pine-soft);color:var(--pine-ink)}.tag.tcash{background:var(--amber-soft);color:var(--amber)}.tag.ttix{background:var(--sun-soft);color:var(--sun)}.tag.toff{background:#f0e9da;color:#8a8068}.tag.tfood{background:var(--cat-food-soft);color:var(--cat-food-ink)}.tag.tsight{background:var(--cat-sight-soft);color:var(--cat-sight-ink)}.tag.tculture{background:var(--cat-culture-soft);color:var(--cat-culture-ink)}.tag.texp{background:var(--cat-exp-soft);color:var(--cat-exp-ink)}.cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;border:none;border-radius:var(--r-btn);background:var(--pine);color:#fff;font-family:var(--font);font-size:17px;font-weight:800;box-shadow:0 8px 20px #3fa98e59,inset 0 2px #ffffff59,inset 0 -4px #0000001a;cursor:pointer;transition:transform .18s var(--bounce),box-shadow .18s}.cta:active{transform:scale(.97)}.cta:disabled{opacity:.6;cursor:default}.cta.sun{background:var(--sun);box-shadow:0 8px 20px #e98a5559,inset 0 2px #ffffff59,inset 0 -4px #0000001a}.claybtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:none;border-radius:999px;background:var(--card);box-shadow:var(--clay-shadow-sm);color:var(--pine-ink);font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;transition:transform .15s var(--bounce)}.claybtn:active{transform:scale(.88)}.claybtn:disabled{opacity:.35;cursor:default}.claybtn.danger{color:var(--cat-food-ink)}.tabbar{display:flex;background:#fffdf7f5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -4px 20px #7a64461f,inset 0 1.5px #ffffffe6;border-radius:26px 26px 0 0;padding:8px 8px calc(10px + env(safe-area-inset-bottom));position:sticky;bottom:0;z-index:20}.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--muted);padding:4px 0;min-height:44px;background:none;border:none;font-family:var(--font);cursor:pointer;text-decoration:none;transition:transform .18s var(--bounce)}.tab:active{transform:scale(.9)}.tab.on{color:var(--pine-ink);font-weight:800}.ticon{width:22px;height:22px;display:block}.input{display:flex;align-items:center;gap:10px;background:var(--card);border:none;border-radius:var(--r-input);box-shadow:inset 0 2px 6px #7a64461f,0 1px #ffffffb3;padding:0 16px;min-height:52px}.input input,.input select,.input textarea{flex:1;border:none;outline:none;font-family:var(--font);font-size:15px;background:transparent;min-width:0;color:var(--ink)}.field-label{font-size:13px;font-weight:800}.sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#4a40366b;display:flex;align-items:flex-end;justify-content:center}.sheet{display:flex;flex-direction:column;width:100%;max-width:520px;max-height:86dvh;background:var(--bg);border-radius:30px 30px 0 0;box-shadow:0 -10px 36px #4a40364d,inset 0 2px #fffc;padding:10px 20px 24px;gap:14px;animation:sheet-in .32s var(--bounce)}@keyframes sheet-in{0%{transform:translateY(60%)}to{transform:translateY(0)}}.sheet-handle{width:44px;height:5px;border-radius:99px;background:#e3d8c2;align-self:center;flex:none}.clay-progress{height:16px;border-radius:999px;background:#f1e9d8;box-shadow:inset 0 2px 5px #7a644629;overflow:hidden}.clay-progress>div{height:100%;border-radius:999px;background:var(--pine);box-shadow:inset 0 2px #fff6;transition:width .6s var(--bounce);min-width:0}.collect-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 12px;border-radius:22px;background:var(--card);box-shadow:var(--clay-shadow-sm);border:none;font-family:var(--font);cursor:pointer;text-align:center;transition:transform .18s var(--bounce)}.collect-card:active{transform:scale(.94)}.collect-card.locked{filter:grayscale(1);opacity:.55}.collect-emoji{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:inset 0 2px 4px #7a64461f}@keyframes unlock-pop{0%{transform:scale(.4)}55%{transform:scale(1.18) rotate(4deg)}75%{transform:scale(.94) rotate(-2deg)}to{transform:scale(1)}}.unlock-pop{animation:unlock-pop .55s var(--bounce)}.badge-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:20px;background:var(--card);box-shadow:var(--clay-shadow-sm);text-align:center}.badge-cell.locked{filter:grayscale(1);opacity:.45}.goldbag{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:none;border-radius:999px;background:var(--gold);color:#6b4a12;font-family:var(--font);font-size:13px;font-weight:800;box-shadow:0 4px 10px #f2b95b73,inset 0 2px #ffffff80,inset 0 -3px #00000014;cursor:pointer;transition:transform .15s var(--bounce)}.goldbag:active{transform:scale(.93)}.anchor-chip{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:18px;background:var(--cat-food-soft);color:var(--cat-food-ink);box-shadow:var(--clay-shadow-sm);font-size:12.5px;font-weight:800}.buffer-pill{align-self:center;padding:3px 12px;border-radius:999px;background:#f0e9da;color:#8a8068;font-size:11px;font-weight:700}.buffer-pill.tight{background:var(--cat-food-soft);color:var(--cat-food-ink)}.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:99px;animation:spin .8s linear infinite}.spinner.dark{border-color:#4a403633;border-top-color:var(--pine)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes celebrate-in{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.1);opacity:1}to{transform:scale(1)}}.celebrate{animation:celebrate-in .5s var(--bounce)}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.sheet,.unlock-pop,.celebrate{animation:none}.chip,.segbtn,.cta,.claybtn,.tab,.collect-card,.goldbag,.clay-progress>div{transition:none}}