@font-face{font-family:Birthday WenKai;font-style:normal;font-weight:400 500;font-display:swap;src:url(./birthday-wenkai-BG3sPSIl.woff2) format("woff2")}@font-face{font-family:Birthday WenKai;font-style:normal;font-weight:600 900;font-display:swap;src:url(./birthday-wenkai-bold-CJzXNSmW.woff2) format("woff2")}:root{font-family:Birthday WenKai,Kaiti SC,STKaiti,PingFang SC,sans-serif;color:#594536;background:#e8ece3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--paper: #fff9ec;--ink: #594536;--muted: #887965;--mint: #9bbca5;--mint-dark: #66856d;--peach: #edb29d}*{box-sizing:border-box}body{margin:0;min-width:280px;background:#e8ece3;color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #58755d;outline-offset:5px}button,p,h1,h2{margin:0}button{border:0}img{display:block;max-width:100%}.icon{width:24px;height:24px;flex-shrink:0}.app-shell{width:min(100%,440px);margin:0 auto;min-height:100svh;position:relative;overflow:clip;background-color:var(--paper);background-image:radial-gradient(#dfc8a454 .85px,transparent .95px),radial-gradient(#dfc8a43d .7px,transparent .85px);background-position:16px 19px,42px 51px;background-size:73px 83px,97px 103px;padding:max(19px,env(safe-area-inset-top)) 25px max(18px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;gap:10px;min-height:38px;width:100%}.page-name{font-size:18px;font-weight:700;flex:1}.header-detail{font-size:17px;letter-spacing:1px;white-space:nowrap;font-weight:700}.header-detail>.icon{color:#c98e78;width:19px}.icon-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;width:44px;height:44px;padding:10px;border-radius:50%}.topbar .icon-button{margin-left:-10px}.screen{animation:screen-in .35s ease both}.welcome{text-align:center;display:flex;flex-direction:column;min-height:calc(100svh - 95px)}.welcome-heading{position:relative;margin-top:clamp(24px,5svh,44px)}.welcome h1{font-size:clamp(58px,18vw,76px);font-weight:700;letter-spacing:3px;line-height:1.13;transform:rotate(-3deg)}.pencil-line{display:block;width:100px;height:12px;margin:12px auto 13px;border-top:4px solid #9eae8b;border-radius:50%;transform:rotate(-7deg)}.subtitle{font-size:18px;line-height:1.5;letter-spacing:.7px}.birthday-art{width:calc(100% + 36px);height:auto;max-width:none;margin:auto -18px;padding-top:12px;padding-bottom:7px;aspect-ratio:4 / 3;object-fit:contain;mix-blend-mode:multiply}.welcome-actions{padding:10px 6px 3px}.invitation{font-size:17px;margin-bottom:20px}.primary-button.primary-button{display:block;width:100%;padding:0 22px;min-height:59px;border-radius:34px;background:var(--mint);color:#263e2e;border:1.5px solid #688872;box-shadow:inset 0 2px #ffffff78,0 5px #7b967d,0 8px 13px #5945360d;font-family:inherit;font-size:22px;font-weight:700;transition:transform .18s,box-shadow .18s,background-color .18s}.primary-button.primary-button:hover:not(:disabled){background:#aac9b0;transform:translateY(-1px)}.primary-button.primary-button:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px #fff5,0 1px #7b967d}.primary-button.primary-button:disabled{opacity:1;background:#e7e4d7;border-color:#d1cbbb;color:#928875;box-shadow:0 3px #d4ccbc}.primary-button>span{display:block;width:100%}.button-content{display:flex;justify-content:center;align-items:center;gap:13px}.button-content .icon{width:20px;height:20px}.footnote{color:var(--muted);font-size:14px;letter-spacing:.5px;margin-top:23px;line-height:1.5}.sparkles{pointer-events:none;position:absolute;inset:0;color:#dbaa69}.sparkles .icon{position:absolute;width:18px;height:18px}.sparkles .icon:nth-child(1){left:3%;top:50%;transform:rotate(-10deg)}.sparkles .icon:nth-child(2){right:6%;top:23%;width:21px;height:21px}.sparkles .icon:nth-child(3){right:0;bottom:0;width:12px;height:12px}.quiz{display:flex;flex-direction:column;min-height:calc(100svh - 99px);padding-bottom:6px}.progress{display:flex;gap:4px;margin:22px 0 29px}.progress span{flex:1;height:9px;border-radius:5px;background:#e8e0cf;transition:background-color .25s}.progress .filled{background:var(--mint)}.progress .current{outline:1px solid #8eab90;outline-offset:1px}.question-body{animation:screen-in .3s ease}.photo-card{position:relative;background:#fffdfa;border:1px solid #e7dece;border-radius:5px;padding:12px 12px 0;box-shadow:0 4px 9px #59453612;margin:0 5px}.washi-tape{position:absolute;width:83px;height:27px;top:-14px;left:calc(50% - 42px);background:#ecb69fa6;background-image:radial-gradient(#fff8edbf 1.5px,transparent 1.7px);background-size:12px 12px;transform:rotate(-10deg);clip-path:polygon(1% 0,99% 3%,96% 15%,100% 28%,96% 45%,100% 58%,96% 78%,100% 99%,0 96%,4% 79%,0 65%,4% 49%,0 34%,4% 18%);z-index:1}.photo-button{padding:0;background:#f4f0e6;display:block;width:100%;height:clamp(200px,34svh,306px);border-radius:2px;overflow:hidden}.photo-button img{height:100%;width:100%;object-fit:contain}.photo-caption{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;line-height:36px;color:#827260}.photo-caption .icon{width:13px;height:13px}.photo-error{height:clamp(200px,34svh,306px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#f4f0e6}.photo-error button{background:#fff9ec;border:1px solid #c4b59b;padding:9px 20px;border-radius:20px}.question-title{font-size:23px;line-height:1.45;text-align:center;margin:24px 0 17px;font-weight:700;outline:none;overflow-wrap:anywhere}.options{display:grid;gap:12px;padding:0 5px}.option{min-height:57px;width:100%;display:flex;align-items:center;gap:15px;text-align:left;padding:9px 18px;border:1.4px solid #a1907a;border-radius:22px;background:#fffdfa;box-shadow:0 3px #e5dac7;font-size:19px;line-height:1.4;transition:background .18s,transform .18s,border-color .18s}.option:not(:disabled):active{transform:translateY(2px)}.option-letter{display:inline-flex;justify-content:center;align-items:center;width:31px;height:31px;border-radius:50%;flex-shrink:0;background:#e3e8d7;font-size:20px}.option>.icon{margin-left:auto;width:20px;height:20px}.option.is-correct{background:#e3edde;border-color:#7f9b7a;box-shadow:0 3px #c1d3b9}.option.is-wrong{background:#fff0e6;border-color:#c88f79;animation:gentle-shake .3s ease}.option.is-wrong .option-letter{background:#f1d5c4}.option:disabled{color:var(--ink);-webkit-text-fill-color:var(--ink)}.quiz-actions{margin-top:auto;padding:0 5px}.feedback{text-align:center;font-size:14px;line-height:1.5;min-height:48px;padding:13px 0;color:var(--muted)}.feedback.wrong{color:#a95d44}.feedback.correct{color:#527344}.envelope{min-height:calc(100svh - 99px);text-align:center;display:flex;flex-direction:column}.envelope-heading{margin:clamp(66px,12svh,110px) -5px 0}.envelope h1{font-size:clamp(27px,7.7vw,33px);line-height:1.4;font-weight:700}.envelope-art-wrap{position:relative;flex:1;display:flex;align-items:center;margin:0 -15px}.envelope-art-button{display:block;padding:0;width:100%;background:transparent;position:relative;transition:transform .3s;isolation:isolate}.envelope-art-button>img{mix-blend-mode:multiply;position:relative;z-index:2;width:100%;height:auto;transform:rotate(4.5deg)}.emerging-paper{position:absolute;left:23%;top:29%;width:53%;height:50%;background:#fffefa;border:1px solid #ddcfb4;opacity:0;transform:translateY(0);z-index:1;box-shadow:0 4px 10px #59453610;display:grid;place-items:center;color:#d89e89;border-radius:3px}.envelope-actions{padding:10px 6px 6px}.is-opening .envelope-art-button{animation:envelope-open .85s ease both}.is-opening .emerging-paper{animation:paper-rise .85s ease both}.letter{min-height:calc(100svh - 99px);padding-top:40px;display:flex;flex-direction:column}.letter-heading{position:relative;text-align:center}.letter h1{font-size:39px;letter-spacing:1px;transform:rotate(-3deg)}.letter-paper{position:relative;margin:42px 0 34px;background:#fffdf7;padding:37px 24px 30px;box-shadow:0 5px 14px #59453612;border:1px solid #eee1ca}.letter-paper:after,.letter-paper:before{content:"";position:absolute;left:-1px;right:-1px;height:7px;background:#fffdf7;clip-path:polygon(0 40%,4% 0,8% 50%,12% 10%,16% 55%,20% 0,24% 50%,28% 0,32% 50%,36% 0,40% 50%,44% 0,48% 50%,52% 0,56% 50%,60% 0,64% 50%,68% 0,72% 50%,76% 0,80% 50%,84% 0,88% 50%,92% 0,96% 50%,100% 0,100% 100%,0 100%)}.letter-paper:before{top:-5px}.letter-paper:after{bottom:-5px;transform:rotate(180deg)}.letter-paper .washi-tape{left:auto;right:-9px;top:-7px;transform:rotate(26deg)}.letter-text{font-size:21px;line-height:2;letter-spacing:.6px;background-image:repeating-linear-gradient(transparent 0,transparent 40px,#eadac666 40px,#eadac666 42px);white-space:pre-wrap;overflow-wrap:anywhere}.letter-text p+p{margin-top:42px}.letter-heart{display:block;width:30px;height:30px;color:#dca58f;margin:28px auto 5px;fill:#f4d5c5}.letter-actions{text-align:center;margin-top:auto;padding:14px 0}.restart-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border-bottom:1px solid #a5b49c;padding:12px 18px;font-size:18px;color:#617b5f}.restart-button .icon{width:17px;height:17px}dialog{color:var(--ink);font-family:inherit}dialog::backdrop{background:#372f24a3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.success-dialog{width:min(335px,calc(100% - 44px));border:1px solid #dcd0b9;border-radius:26px;background:var(--paper);padding:28px 25px;overflow:visible;box-shadow:0 15px 70px #241b2538}.success-dialog[open]{animation:modal-in .35s ease both}.success-content{display:flex;flex-direction:column;align-items:center;text-align:center}.success-heart{position:relative;width:130px;height:64px;display:grid;place-items:center}.success-heart>.icon{width:56px;height:56px;fill:#efc0ad;color:#b77e65;transform:rotate(-8deg)}.success-content h2{font-size:31px;margin:13px 0}.success-content>p{font-size:18px;line-height:1.8;margin-bottom:27px}.photo-viewer{padding:0;border:0;background:#272821;color:#fffaf0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0}.viewer-toolbar{height:72px;padding:max(10px,env(safe-area-inset-top)) 13px 8px 19px;display:flex;align-items:center;justify-content:space-between;gap:5px}.viewer-toolbar>span{font-size:15px}.viewer-toolbar>div{display:flex;align-items:center}.viewer-button{font-size:14px;background:#ffffff17;color:inherit;border:1px solid #ffffff40;border-radius:20px;padding:9px 11px;white-space:nowrap}.viewer-scroll{height:calc(100% - 117px - env(safe-area-inset-top));width:100%;overflow:auto;overscroll-behavior:contain}.viewer-scroll img{width:100%;height:100%;object-fit:contain;max-width:none}.viewer-scroll.is-zoomed img{width:160%;height:auto;object-fit:initial}.viewer-hint{text-align:center;font-size:13px;line-height:45px;color:#d4d0c3}@keyframes screen-in{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}@keyframes gentle-shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes envelope-open{0%{transform:rotate(0)}25%{transform:scale(1.02)}60%{transform:translateY(22px);opacity:1}to{transform:translateY(45px);opacity:0}}@keyframes paper-rise{0%{opacity:0;transform:translateY(0)}40%{opacity:1}to{opacity:1;transform:translateY(-130px) rotate(-3deg)}}@media(min-width:600px){body{padding:24px 0}.app-shell{min-height:852px;border:1px solid #d9cfba;border-radius:9px;box-shadow:0 10px 45px #41513d12}.welcome,.quiz,.envelope,.letter{min-height:747px}.welcome-heading{margin-top:32px}.birthday-art{max-height:335px}.photo-button,.photo-error{height:293px}.envelope-heading{margin-top:86px}}@media(max-height:740px)and (max-width:599px){.welcome-heading{margin-top:15px}.welcome h1{font-size:57px}.birthday-art{max-height:250px}.welcome-actions{padding-top:0}.invitation{margin-bottom:15px}.footnote{margin-top:16px}.progress{margin:14px 0 25px}.question-title{margin-top:18px;font-size:21px}.quiz-actions{padding-bottom:4px}.envelope-heading{margin-top:46px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}