/* A little illustrated stationery page, inside the existing sunlit room. */
#promises-dialog{width:min(550px,calc(100% - 20px));max-height:calc(100dvh - 20px);border:1px solid #e5a391;border-radius:26px;background:#fff9ee;box-shadow:0 0 0 3px #fff6e9,0 18px 70px #51352940}
#promises-dialog::backdrop{background:#583e2d45;backdrop-filter:blur(2px)}
.promises-page{position:relative;isolation:isolate;padding:26px 24px 0;background:radial-gradient(ellipse at 0 0,#ffe5d680,transparent 45%),radial-gradient(ellipse at 100% 80%,#f4ecd780,transparent 45%),#fffaf0}
.promises-page:before{content:"";position:absolute;inset:6px;z-index:-1;border:1px solid #efb6a4;border-radius:20px;pointer-events:none}
.promises-close{z-index:2;background:#fffaf0;border:1px solid #edc6b2;color:#784c43;right:13px;top:13px}
.promises-heading{text-align:center;padding:22px 0 0}
.promises-title-row{position:relative;display:flex;align-items:center;justify-content:center;min-height:68px;padding:0 58px;margin-bottom:0}
.promises-title-flower{position:absolute;left:0;top:-2px;width:62px;height:76px;object-fit:contain;pointer-events:none}
.promises-title-heart{position:absolute;right:1%;top:15px;width:62px;height:45px;object-fit:contain;pointer-events:none}
.promises-title-row #promises-title{margin:0;white-space:nowrap;min-width:0}
.promises-title-flower:not([src]),.stamp-flower:not([src]){visibility:hidden}
#promises-title{margin:0 0 8px;font-family:"PMingLiU","Songti TC","Noto Serif TC",serif;font-size:40px;line-height:1.4;font-weight:700;letter-spacing:0;color:#59352d;outline:none}
.promises-intro{font-size:14px;line-height:1.8;margin:0 0 18px;color:#7f5b4e;text-wrap:balance}
.promise-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.promise-card{position:relative;min-width:0;border:1px solid #eeb6a1;border-radius:18px 15px 19px 16px;background:linear-gradient(145deg,#fffdf8,#fff4e8);box-shadow:inset 0 0 0 3px #fffaf1,0 3px 8px #8a59360b;transition:transform .18s ease,box-shadow .18s ease}
.promise-card[open]{transform:translateY(-2px);box-shadow:inset 0 0 0 3px #fffaf1,0 7px 14px #8a59361c;border-color:#dc9588}
.promise-card summary{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 9px 10px;cursor:pointer;list-style:none;border-radius:inherit;min-height:174px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.promise-card summary::-webkit-details-marker{display:none}
.promise-card summary:focus-visible{outline:3px solid #8d4945;outline-offset:3px}
.promise-art{display:flex;align-items:center;justify-content:center;width:100%;height:96px;margin-bottom:6px}
.promise-art img{display:block;width:132px;max-width:100%;height:96px;object-fit:contain}
.promise-art img:not([src]){visibility:hidden}
.promise-art.art-failed:before{content:"✿";font-size:35px;color:#d19a79}
.promise-name{display:block;max-width:100%;font-family:"DFKai-SB","BiauKai","KaiTi",serif;font-size:18px;line-height:1.5;text-align:center;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.promise-toggle{display:grid;place-items:center;width:26px;height:26px;margin-top:7px;border:1px solid #f0c3b4;border-radius:50%;background:#ffe9df;color:#a55951;font-size:21px;line-height:1}
.promise-toggle:before{content:"+"}.promise-card[open] .promise-toggle:before{content:"−"}
.promise-description{margin:0;padding:0 14px 30px;color:#715045;font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.promise-paw{position:absolute;bottom:11px;right:13px;width:20px;height:20px;fill:#ce8290;transform:rotate(12deg)}
.promise-card[open] .promise-paw{animation:promise-paw-in .2s ease-out}
.promises-art-status{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;color:#8b6054;font-size:12px;line-height:1.6;text-align:center;margin:10px 0 0}
.promises-art-status p{margin:0}.promises-art-status button{min-height:44px;border:1px solid #d6a093;background:#fffaf0;border-radius:99px;padding:7px 13px;font-size:13px}
.promises-invitation{text-align:center;padding:0 3px}
.promises-invitation .promises-meeting{display:flex;align-items:center;justify-content:center;gap:10px;font-family:"STXingkai","華文行楷","DFKai-SB",serif;font-size:26px;color:#804a3d;letter-spacing:2px;margin:15px 0 3px}
.meeting-lettering{position:relative;display:inline-block;width:clamp(192px,50vw,260px);height:48px;flex:none}
.meeting-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:transparent;white-space:nowrap;letter-spacing:.12em;font-size:28px}
.meeting-lettering>img{display:block;width:100%;height:100%;object-fit:contain;transform:rotate(-2deg);pointer-events:none}
.meeting-lettering>img:not([src]){visibility:hidden}.meeting-lettering.art-failed .meeting-copy{color:#804a3d}
.meeting-underline{position:absolute;bottom:-5px;left:2%;width:96%;height:10px;fill:none;stroke:#e89b9b;stroke-width:1.8;stroke-linecap:round;transform:rotate(-1deg);pointer-events:none}
.meeting-heart{width:29px;height:35px;fill:none;stroke:#804a3d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(10deg)}
.promises-footer{position:relative;text-align:center;padding:12px 0 24px}
.promises-stamp-scene{position:relative;display:flex;align-items:center;justify-content:center;min-height:105px;margin:3px 0 12px}
.promises-stamp-scene .promise-stamp{margin:0;flex:none}
.stamp-flower{position:absolute;width:68px;height:68px;object-fit:contain;pointer-events:none;bottom:14px}
.stamp-flower-left{left:6%}.stamp-flower-right{right:10%}
.promise-stamp{position:relative;display:grid;place-items:center;width:104px;height:104px;margin:0 auto 12px;padding:0;border:1.5px solid #d9b3a2;border-radius:50%;background:transparent;color:#cfa994;cursor:pointer;transform:rotate(-9deg);transition:color .18s,border-color .18s,background .18s}
.promise-stamp:focus-visible{outline:3px solid #8d4945;outline-offset:4px}
.promise-stamp svg{width:70%;height:70%;fill:transparent;stroke:currentColor;stroke-width:.8}
.promises-stamped .promise-stamp{color:#cf6f8a;border-color:#cf6f8a;background:#ffe7e65c}
.promises-stamped .promise-stamp svg{fill:currentColor;stroke:none;animation:promise-stamp-in .24s ease-out}
.promises-stamped .promise-stamp:after{content:"✧";position:absolute;right:-22px;top:9px;color:#cf6f8a;font-size:29px}
.promises-question{font-size:14px;line-height:1.8;margin:0 0 14px;color:#795549;text-wrap:balance}
.promise-action{position:relative;z-index:1;width:100%;min-height:54px;border:1px solid #fffdf5;outline:1px solid #eab5a7;outline-offset:2px;border-radius:99px;background:linear-gradient(165deg,#ee94a5,#d65b7e);box-shadow:inset 0 0 0 2px #ffd4d744,0 4px 10px #b8776918;color:#fff;font-weight:700;font-size:18px;letter-spacing:1px;padding:12px 10px;display:flex;align-items:center;justify-content:center;gap:10px}
.promise-action svg{width:23px;height:23px;fill:currentColor}.promise-action:hover{filter:brightness(1.04)}.promise-action:active{transform:translateY(1px)}.promise-action:focus-visible{outline:3px solid #8d4945;outline-offset:5px}
.promises-footer-cat{position:absolute;bottom:9px;left:-19px;z-index:2;width:64px;height:auto;pointer-events:none}
.promises-footer-cat:not([src]){visibility:hidden}
.promises-stamp-note{font-size:12px;color:#a4516d;margin:0 0 9px;line-height:1.6;min-height:20px}
@keyframes promise-paw-in{from{opacity:0;transform:translateY(4px) rotate(12deg)}to{opacity:1;transform:translateY(0) rotate(12deg)}}
@keyframes promise-stamp-in{from{transform:scale(1.12);opacity:.4}to{transform:scale(1);opacity:1}}
@media(max-width:599px){.promises-page{padding:24px 16px 0}.promises-heading{padding:22px 0 0}#promises-title{font-size:clamp(25px,7.3vw,38px);letter-spacing:0}.promises-title-row{min-height:62px;padding:0 44px}.promises-title-flower{width:clamp(42px,11.5vw,62px);height:clamp(56px,14.5vw,78px);left:0;top:0}.promises-title-heart{width:clamp(38px,11.5vw,56px);height:38px;right:-2px;top:16px}.promises-close{width:44px;height:44px;right:9px;top:9px}.promises-intro{font-size:13px;margin-bottom:15px}.promise-cards{gap:10px}.promise-card summary{padding:10px 7px;min-height:172px}.promise-art,.promise-art img{height:88px}.promise-name{font-size:17px;min-height:51px;display:flex;align-items:center;justify-content:center}.promise-description{padding:0 11px 29px;font-size:14px}.promises-question{font-size:13px}.promises-invitation .promises-meeting{font-size:25px}.promises-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}.promise-stamp{width:clamp(72px,20vw,100px);height:clamp(72px,20vw,100px)}.promise-stamp svg{width:70%;height:70%}.promise-action{font-size:17px}.promises-footer-cat{width:55px;left:-12px}.stamp-flower{width:60px;height:60px}.stamp-flower-left{left:6.5%}.stamp-flower-right{right:8%}.promises-stamp-scene{min-height:105px}}
@media(max-width:359px){.promises-page{padding-left:12px;padding-right:12px}#promises-title{font-size:25px}.promises-title-flower{width:42px;height:56px}.promises-title-heart{width:38px;height:32px}.promises-title-row{padding:0 35px}.promise-name{font-size:16px}.promise-cards{gap:8px}.promise-art,.promise-art img{height:80px}.promise-action{font-size:16px}.meeting-lettering{height:43px}.meeting-heart{width:25px;height:31px}}
@media(prefers-reduced-motion:reduce){.promise-card,.promise-stamp{transition:none}.promise-card[open],.promise-action:active{transform:none}.promise-card[open] .promise-paw,.promises-stamped .promise-stamp svg{animation:none}}