*{box-sizing:border-box}html{background:#fffbf2}body{margin:0;color:#5e534a;font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif}header{text-align:center;padding:clamp(30px,5vw,76px) 20px clamp(28px,4vw,58px)}h1{margin:0;line-height:0}h1 img{width:min(430px,78vw);height:auto;mix-blend-mode:multiply}main{max-width:1230px;width:90%;margin:0 auto 70px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(30px,4vw,64px) clamp(13px,2.5vw,40px)}button{font:inherit;color:inherit;cursor:pointer}.gift{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px}.wrapping{display:grid;place-items:center;width:100%;aspect-ratio:1.12}.wrapping img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .22s ease}.gift:hover img{transform:translateY(-4px) rotate(-1.8deg)}.gift:active img{transform:scale(.96)}.name{font-size:clamp(14px,1.24vw,18px);letter-spacing:.065em;font-weight:550}.gift:focus-visible,.close:focus-visible{outline:2px dashed #a88187;outline-offset:5px;border-radius:5px}dialog{border:1px solid #c9b8aa;background:#fffbf2;border-radius:18px;width:min(840px,94vw);max-height:94dvh;padding:0;color:inherit}dialog::backdrop{background:#504a4255;backdrop-filter:blur(3px)}body:has(dialog[open]){overflow:hidden}.paper{padding:22px;position:relative}.close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid #c8b6ae;background:#f7e6df;border-radius:50%;font:22px sans-serif}.paper h2{text-align:center;margin:3px 40px 18px;font-size:23px}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pair figure{margin:0;text-align:center;background:#f5eee3;border-radius:10px;padding:12px 7px 8px}.pair figure+figure{background:#eaf1e7}.pair img{width:100%;height:min(55vh,510px);object-fit:contain}figcaption{font-size:13px;margin-top:6px}dialog[open]{animation:open .22s ease-out}@keyframes open{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:900px){main{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){main{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){main{width:89%;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.paper{padding:17px 8px 10px}.paper h2{font-size:19px}.pair{gap:5px}.pair img{height:min(54vw,320px)}.pair figure{padding:6px 3px}.name{font-size:14px}header{padding:32px 12px}.wrapping{aspect-ratio:1.12}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@font-face{font-family:soft;src:url(assets/han.font)}@font-face{font-family:hand;src:url(assets/hand.font)}
html{background:#f9e7e5}body{font-family:soft,"Kaiti SC",serif;background-image:radial-gradient(ellipse at center,#fff7dc 0 2.5px,transparent 3px),radial-gradient(ellipse at center,#fff6dc 0 1.5px,transparent 2px);background-size:27px 29px,27px 29px;background-position:0 0,13px 14px;min-height:100vh;padding-bottom:1px}header{padding:32px 16px 38px}h1 img{width:min(374px,76vw);max-height:180px;object-fit:contain;mix-blend-mode:normal}.signature{font-size:15px;letter-spacing:.08em;margin:8px auto 16px}.signature i,.english,h2 em,.clock time{font-family:hand,"Bradley Hand",cursive}.clock{width:max-content;min-width:184px;margin:auto;border:1.5px solid #907a72;border-radius:16px 13px 18px 12px;background:#fff2be;box-shadow:3px 4px #b5cfc1;transform:rotate(-1deg);padding:6px 21px 7px}.clock small{font-size:12px;letter-spacing:.1em}.clock time{display:block;font-size:clamp(42px,4vw,58px);font-variant-numeric:tabular-nums;line-height:1.04;color:#745960;letter-spacing:.045em}main{background:#fff7dddb;border:1px solid #c7ab9659;border-radius:30px;padding:clamp(14px,3vw,40px);gap:32px 22px}.gift{gap:3px}.name{font-size:clamp(17px,1.5vw,22px);font-weight:500}.english,h2 em{font-size:17px;color:#775f70;line-height:1.15}.gift:nth-child(3n) .english{color:#546d69}.wrapping{mix-blend-mode:multiply}.paper h2 em{display:block;font-style:normal;margin-top:4px}dialog{background:transparent;border:0;box-shadow:none;overflow:visible}dialog::backdrop{background:#64556377;backdrop-filter:blur(6px)}.paper{background:linear-gradient(130deg,#fff4e6cd,#f4e2ef80);border:1px solid #fffaf4c9;border-radius:35px 12px 32px 11px;box-shadow:0 18px 50px #53405337}.pair{align-items:center}.pair figure{position:relative;background:#fff7df;transform:rotate(-2deg);border:1px solid #bbab98;box-shadow:2px 4px 0 #90788a22}.pair figure:before{content:'';position:absolute;top:-7px;left:38%;width:24%;height:17px;background:repeating-linear-gradient(45deg,#f5bbbfcc 0 4px,#fbdbd7cc 4px 8px);transform:rotate(4deg)}.pair figure+figure{background:transparent;border:0;box-shadow:none;transform:rotate(4deg)}.pair figure+figure:before{display:none}.pair figure+figure img{filter:drop-shadow(5px 8px 5px #64506355)}.close{z-index:2}.spark{pointer-events:none;position:absolute;left:48%;top:52%;color:#fff1a4;text-shadow:0 0 6px #ffcab7;font:32px serif;animation:burst .9s ease-out forwards}@keyframes burst{0%{opacity:0;transform:scale(.15)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(80deg) scale(.55)}}@media(max-width:480px){main{width:94%;gap:24px 10px}.english{font-size:14px}.signature{font-size:13px}}@media(prefers-reduced-motion:reduce){.spark{display:none}}
body{-webkit-touch-callout:none;user-select:none}img{-webkit-user-drag:none}.pair figure{justify-self:center;width:fit-content;max-width:100%;padding:5px}.pair img{display:block;width:auto;height:auto;max-width:100%;max-height:60dvh}.pair figure+figure{padding:0}.pair{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}dialog{max-height:95dvh;overflow-y:auto}progress{display:block;appearance:none;border:0;border-radius:10px;margin:8px auto;width:155px;height:7px;background:#f4dbe5}progress::-webkit-progress-bar{background:#f4dbe5;border-radius:10px}progress::-webkit-progress-value{background:linear-gradient(90deg,#a9ceba,#edacbf);border-radius:10px}progress[hidden]{display:none}dialog[open] .paper{animation:unfold .72s cubic-bezier(.2,.85,.25,1)}dialog[open] .paper:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 32%,#fff7dabc 49%,transparent 62%);background-size:300% 100%;animation:shine .9s both}.spark:nth-child(3n){color:#f6b3dd}.spark:nth-child(3n + 1){color:#b4f9ef}@keyframes unfold{0%{opacity:0;transform:perspective(750px) rotateX(25deg) rotateZ(-6deg) scale(.45)}70%{transform:perspective(750px) rotateX(-3deg) scale(1.015)}100%{opacity:1;transform:none}}@keyframes shine{from{background-position:100% 0;opacity:1}to{background-position:0 0;opacity:0}}@media(max-width:480px){.pair img{max-height:62dvh;height:auto}.pair figure{padding:3px}.paper{padding:16px 10px 20px}}