:root{color-scheme:light;--ink:#514031;--muted:#87715e;--orange:#cd5435;--green:#347765;--cream:#fff7df;--paper:#fffdf5;--line:#e5cf9e;--shadow:0 8px 22px #674a2310;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:16px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f6d887}body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;background-image:radial-gradient(#aa7e3830 1px,transparent 1px);background-size:22px 22px;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible{outline:3px solid #347765;outline-offset:5px}button:disabled{cursor:default}button,img{user-select:none;-webkit-user-select:none}img{display:block;object-fit:contain;max-width:100%}h1,h2,p{margin:0}h1,h2{font-family:"HanziPen SC","Kaiti SC","STKaiti","KaiTi","PingFang SC",sans-serif;font-weight:800;letter-spacing:.025em}h1{font-size:clamp(1.7rem,5.5vw,2.1rem);line-height:1.4}h1>span{font-size:.76em;font-weight:600}h1 strong{font-size:1.56em;display:block;position:relative;line-height:1.35;margin-top:4px;letter-spacing:.08em}h2{font-size:clamp(1.8rem,6.8vw,2.1rem);line-height:1.42}.orange{color:var(--orange)}.green{color:var(--green)}.storybook{position:relative;width:min(100%,470px);height:100vh;height:100dvh;max-height:1000px;min-height:460px;background:var(--cream);overflow:hidden;isolation:isolate;box-shadow:0 20px 80px #74522324;display:flex;flex-direction:column}.storybook:before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}.book-top{padding:max(20px,env(safe-area-inset-top)) 27px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0;z-index:3}.occasion{font-size:.8rem;letter-spacing:.025em;color:#79613f}.occasion>span{font-size:1.1em;color:var(--orange);margin-right:4px}.postmark{border:1px dashed #bc8b61;border-radius:8px 6px 8px 5px;padding:6px 8px;color:#ac614a;font-size:.8rem;transform:rotate(6deg);letter-spacing:.08em}.pages{position:relative;flex:1;min-height:0;touch-action:pan-y;overflow:hidden}.page{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateX(28px) rotate(.7deg);transition:opacity .36s ease,transform .48s cubic-bezier(.2,.7,.2,1),visibility .48s;scrollbar-width:thin;scrollbar-color:#dbc39a transparent;pointer-events:none}.page.is-active{visibility:visible;opacity:1;transform:none;pointer-events:auto;z-index:1}.page-inner{min-height:100%;padding:20px 28px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.eyebrow{font-size:.85rem;color:var(--muted);letter-spacing:.12em;margin-bottom:12px}.intro{font-size:1rem;line-height:1.8;color:#7c6654;margin-top:10px}.title-star{position:absolute;color:#e4a622;right:-21px;top:0;font-size:.6em;transform:rotate(12deg)}.bear-mail{position:relative;background:none;width:min(100%,320px);margin:2px auto -5px;padding:0;flex:0 0 auto}.cover-art{width:100%;height:auto;max-height:36vh;max-height:36dvh;min-height:190px;position:relative;z-index:1;animation:bob 4s ease-in-out infinite}.halo{position:absolute;left:10%;right:10%;top:20%;bottom:9%;border-radius:50% 46% 48% 43%;background:#f5d87555;transform:rotate(-8deg)}.mail-cta{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:15px;background:#d95839;color:#fff9e9;border-radius:45% 47% 44% 49% / 46% 45% 48% 46%;padding:13px 27px;box-shadow:0 4px 0 #a93f27;font-weight:650;font-size:1rem;transform:rotate(-3deg);transition:transform .2s}.bear-mail:hover .mail-cta,.bear-mail:active .mail-cta{transform:rotate(0) scale(1.04)}.sender{font-size:.8rem;line-height:1.8;color:var(--muted);margin-top:21px}.sender span{display:inline-block;margin-left:10px;font-size:1rem;color:var(--ink);font-weight:650;transform:rotate(-3deg)}.thanks .page-inner{padding-top:12px;padding-bottom:8px}.thanks .eyebrow{margin-bottom:8px}.thanks-notes{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:20px;position:relative;z-index:2}.note{position:relative;display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:15px 16px;border-radius:13px 16px 11px 15px;box-shadow:var(--shadow);border:1px solid #ddca9e55;transition:transform .2s,background .25s;min-height:61px}.note-one{background:#fffef8;transform:rotate(-1.6deg)}.note-two{background:#e8f1dc;transform:rotate(1.4deg)}.note-three{background:#ffe4d5;transform:rotate(-.8deg)}.note:hover,.note[aria-expanded=true]{transform:rotate(0)}.note-number{align-self:flex-start;margin-top:3px;font-family:Georgia,serif;font-style:italic;font-size:1.05rem;color:#aa6b40}.note-content{flex:1;min-width:0}.note-content>strong{font-size:1rem;letter-spacing:.04em;display:block;font-weight:600}.note-copy{font-size:1rem;line-height:1.8;display:none;color:#6d5847;margin-top:7px}.note[aria-expanded=true] .note-copy{display:block;animation:unfold .3s ease}.note-mark{font-size:1.4rem;color:#9c714c;align-self:flex-start;line-height:1.25}.note[aria-expanded=true] .note-mark{font-size:1rem;color:var(--green);padding-top:3px}.book-art-wrap{margin:5px auto -5px;flex-shrink:0;width:min(100%,255px)}.book-art{width:100%;height:auto;max-height:20vh;max-height:20dvh;min-height:100px}.collected{font-size:.82rem;color:var(--muted);min-height:23px;line-height:1.6;margin-top:5px}.wishes .page-inner{padding-top:10px;padding-bottom:10px}.bouquet{padding:0;margin:0;position:relative;background:none;width:min(100%,300px);flex-shrink:0}.celebration-art{width:100%;height:auto;position:relative;z-index:1;max-height:30vh;max-height:30dvh;min-height:170px;animation:bob 4.5s ease-in-out infinite}.flower-label{display:inline-block;background:#fffdf0;border:1px dashed #caad71;padding:5px 11px;font-size:.8rem;transform:rotate(-2deg);color:#7b654f;border-radius:15px;position:relative;z-index:2;top:-7px}.flower-label span{color:var(--orange);margin-left:3px}.wish-copy{font-size:1rem;line-height:1.95;margin:6px 0 0}.wish-copy p+p{font-size:.9rem;color:#7c6654;margin-top:7px}.signature{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:6px}.signature>span{font-size:.8rem;color:var(--muted);letter-spacing:.08em}.signature strong{font-family:"HanziPen SC","Kaiti SC","STKaiti","KaiTi",serif;font-size:1.8rem;font-weight:600;letter-spacing:.12em;transform:rotate(-3deg)}.signature strong span{color:var(--orange);font-size:.78em;margin-left:8px;display:inline-block;transform:rotate(14deg)}.signature time{font-size:.76rem;color:#8b7966;letter-spacing:.025em;margin-top:4px}.book-bottom{flex-shrink:0;position:relative;z-index:3;padding:8px 29px max(17px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--cream) 18%)}.page-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}.nav-button{width:44px;height:42px;border:1px solid #d7bf8e;background:#fffdf4;border-radius:46% 50% 46% 48%;font-size:1.25rem;transition:transform .2s,opacity .2s}.nav-button:active{transform:scale(.9)}.nav-button:disabled{opacity:.28}.nav-button.next{border-color:#ddb456;background:#f8d67f}.page-dots{display:flex;align-items:center;gap:4px}.dot{width:36px;height:40px;background:none;position:relative;padding:0}.dot:after{content:"";position:absolute;left:12px;top:15px;width:10px;height:10px;border-radius:50%;background:#d8c8a8;transition:width .3s,background .3s,left .3s}.dot.active:after{width:22px;left:6px;border-radius:10px;background:#cc633d}.nav-hint{font-size:.76rem;text-align:center;color:#917b61;margin-top:1px;line-height:1.5}.petals{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}.petal{position:absolute;left:var(--x);top:-8%;font-size:var(--size);color:var(--color);will-change:transform,opacity;animation:fall var(--duration) linear forwards;animation-delay:var(--delay)}.toast{position:absolute;bottom:112px;left:22px;right:22px;z-index:10;pointer-events:none;border-radius:16px;background:#fffdf5f5;box-shadow:0 8px 22px #74502520;text-align:center;color:var(--green);font-size:.9rem;line-height:1.6;padding:13px 15px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.toast.visible{opacity:1;transform:none}.no-script{position:fixed;inset:auto 20px 20px;background:white;padding:20px;z-index:20}@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes unfold{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@keyframes fall{0%{transform:translate(0,-20px) rotate(0);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translate(var(--drift),950px) rotate(var(--spin));opacity:0}}
@media(min-width:600px){body{padding:28px}.storybook{height:min(900px,calc(100dvh - 56px));border-radius:30px;border:1px solid #eedbad;min-height:540px}.cover-art{max-height:330px}.celebration-art{max-height:280px}.book-art{max-height:185px}}
@media(max-height:720px){.book-top{padding-top:max(13px,env(safe-area-inset-top));padding-bottom:3px}.page-inner{padding-top:8px;padding-bottom:8px}.eyebrow{margin-bottom:7px}.intro{margin-top:7px}.cover-art{max-height:30dvh;min-height:155px}.sender{margin-top:15px}.book-bottom{padding-top:3px;padding-bottom:max(9px,env(safe-area-inset-bottom))}.thanks-notes{margin-top:13px;gap:9px}.note{padding:13px 14px;min-height:56px}.book-art{max-height:16dvh;min-height:86px}.celebration-art{max-height:24dvh;min-height:140px}.signature{margin-top:11px}.wish-copy{line-height:1.75}h2{font-size:1.8rem}}
@media(max-width:350px){.book-top{padding-left:21px;padding-right:21px}.page-inner{padding-left:21px;padding-right:21px}.title-star{right:-15px}h1{font-size:1.65rem}h2{font-size:1.7rem}.note-content>strong{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.petal{display:none}}