:root{--bg-top: #e2edea;--bg-bottom: #c8ddd8;--bg-motif: #a9c8c1;--envelope: #fbfaf6;--envelope-shade: #e7e3d8;--envelope-line: #d8d2c3;--kraft: #cdb891;--kraft-deep: #b39c72;--ink: #7d6a4c;--blossom: #f4c3c9;--blossom-light: #fde7e8;--blossom-deep: #e0919c;--stamen: #d9a24b;--leaf: #9fb87c;--leaf-deep: #6f9153;--twine: #d7c7a2;--text: #5b5147;--greeting-ink: #5f424a;--greeting-ink-light: #9a5f68;--accent: #efe2b8;--font-script: "Parisienne", cursive;--font-hand: "La Belle Aurore", cursive;--font-serif: "Cormorant Garamond", serif;--font-label: "Outfit", system-ui, sans-serif;--card-w: min(90vw, 366px);color-scheme:light}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(130% 100% at 50% 0%,var(--bg-top) 0%,var(--bg-bottom) 78%),var(--bg-bottom);background-attachment:fixed;color:var(--text);font-family:var(--font-label);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;inset:0;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.sky-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.stage{position:relative;z-index:2;display:grid;place-items:center}.postcard{position:relative;width:var(--card-w);aspect-ratio:40 / 54;border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--bg-top) 70%,#fff) 0%,var(--bg-bottom) 100%);box-shadow:0 30px 70px -28px #283c3a80,0 2px #ffffff80 inset;perspective:1100px;overflow:hidden;isolation:isolate}.pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at center,var(--bg-motif) 0 1.1px,transparent 1.6px),radial-gradient(circle at center,var(--bg-motif) 0 1.1px,transparent 1.6px);background-size:26px 26px,26px 26px;background-position:0 0,13px 13px;-webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.6));mask-image:linear-gradient(to bottom,#000,#0009)}.postcard:after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--bg-motif) 60%,transparent);border-radius:6px;pointer-events:none;z-index:6}.greeting-slot{position:absolute;top:3%;left:4%;right:4%;height:16%;display:grid;place-items:center;z-index:9}.greeting-slot .writing{width:100%;max-width:100%;height:auto;display:block;overflow:visible}.envelope{position:absolute;inset:33% 7% 6%;z-index:3;transform-style:preserve-3d}.env-back{position:absolute;inset:0;z-index:1;border-radius:9px;background:linear-gradient(180deg,var(--envelope) 0%,var(--envelope-shade) 100%);box-shadow:0 14px 30px -14px #28323073,0 1px #ffffffb3 inset}.letter{position:absolute;left:8%;right:8%;top:6%;height:116%;z-index:2;border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--kraft) 92%,#fff) 0%,var(--kraft) 40%,var(--kraft-deep) 100%);box-shadow:0 8px 18px -8px #3c2d1980;padding:8% 9% 0;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(20%);will-change:transform}.letter__hand{display:flex;flex-direction:column;align-items:center;gap:.28em;margin-bottom:.6em;opacity:.42}.letter__hand-line{height:0;border-bottom:1.5px solid var(--ink);font-family:var(--font-hand);font-size:0;line-height:0}.letter__hand-line{border-bottom-style:dotted;border-bottom-width:2px;opacity:.35}.letter__message{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(.86rem,3.6vw,1.04rem);line-height:1.42;color:color-mix(in srgb,var(--ink) 88%,#2a2116);max-width:26ch;opacity:0}.letter__from{margin-top:.5em;font-family:var(--font-script);font-size:clamp(1.3rem,6vw,1.7rem);color:color-mix(in srgb,var(--ink) 80%,#33280f);line-height:1;opacity:0}.letter__from small{display:block;font-family:var(--font-label);font-weight:400;letter-spacing:.28em;text-transform:uppercase;font-size:.5rem;opacity:.6;margin-bottom:.2em;padding-left:.28em}.env-pocket{position:absolute;left:0;right:0;bottom:0;height:50%;z-index:3;border-radius:0 0 9px 9px;background:linear-gradient(180deg,var(--envelope) 0%,var(--envelope-shade) 120%);box-shadow:0 -6px 12px -8px #28323059,0 1px #fff9 inset;clip-path:polygon(0 8%,50% 0,100% 8%,100% 100%,0 100%)}.env-pocket:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 48%,color-mix(in srgb,var(--envelope-line) 70%,transparent) 49% 50%,transparent 51%),linear-gradient(-115deg,transparent 48%,color-mix(in srgb,var(--envelope-line) 70%,transparent) 49% 50%,transparent 51%);opacity:.7}.env-flap{position:absolute;top:0;left:0;right:0;height:52%;z-index:4;transform-origin:top center;transform:rotateX(0);transform-style:preserve-3d;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,var(--envelope) 0%,color-mix(in srgb,var(--envelope) 88%,var(--envelope-shade)) 100%);box-shadow:0 6px 10px -6px #28323066;backface-visibility:hidden;will-change:transform}.env-flap:after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,var(--envelope-shade),color-mix(in srgb,var(--envelope-shade) 80%,var(--kraft)));transform:rotateX(180deg);backface-visibility:hidden}.blossoms{position:absolute;top:auto;bottom:3%;left:-8%;width:30%;height:auto;z-index:8;filter:drop-shadow(0 8px 14px rgba(90,60,65,.28))}.blossoms .blossom,.blossoms .bud,.blossoms .leaf,.blossoms .wash{transform-box:fill-box;transform-origin:center}.tag-group{position:absolute;right:3%;top:40%;width:24%;z-index:9;transform-origin:50% 0}.tag-group .twine{position:absolute;top:-14%;left:50%;transform:translate(-50%);width:46%;height:auto}.tag-card{position:relative;margin-top:34%;border-radius:3px;background:linear-gradient(180deg,var(--kraft) 0%,var(--kraft-deep) 100%);color:color-mix(in srgb,var(--ink) 70%,#2a2013);font-family:var(--font-label);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:clamp(.5rem,2.4vw,.62rem);text-align:center;box-shadow:0 4px 8px -4px #3c2d198c;padding:.5em .2em .5em .34em}.tag-card:before{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--kraft-deep) 60%,#000)}.gems{position:absolute;right:7%;top:62%;z-index:9;display:flex;gap:5px}.gem{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 20%,color-mix(in srgb,var(--accent) 80%,#fff) 45%,color-mix(in srgb,var(--accent) 70%,var(--twine)));box-shadow:0 1px 2px #50462880,0 0 5px #ffffffb3}.gem:nth-child(2){transform:translateY(4px) scale(.8)}.gem:nth-child(3){transform:translateY(-2px) scale(.9)}.hint{position:absolute;bottom:3.5%;left:0;right:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--font-label);font-weight:400;letter-spacing:.26em;text-transform:uppercase;font-size:.56rem;color:color-mix(in srgb,var(--text) 70%,transparent);padding-left:.26em}.hint__dot{width:6px;height:6px;border-radius:50%;background:var(--greeting-ink-light);box-shadow:0 0 color-mix(in srgb,var(--greeting-ink-light) 60%,transparent);animation:pulse 2.2s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--greeting-ink-light) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}to{box-shadow:0 0 0 0 transparent}}.open-btn{position:absolute;inset:0;z-index:20;border:none;background:transparent;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent}.open-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--greeting-ink-light) 70%,transparent)}.replay{position:fixed;z-index:5;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.2em;border-radius:999px;border:1px solid color-mix(in srgb,var(--greeting-ink-light) 40%,transparent);background:color-mix(in srgb,#fff 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:color-mix(in srgb,var(--text) 85%,transparent);font-family:var(--font-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.58rem;cursor:pointer;opacity:0;transition:color .2s,border-color .2s,transform .15s}.replay:hover{color:var(--greeting-ink);border-color:var(--greeting-ink-light)}.replay:active{transform:translate(-50%) scale(.96)}.replay:focus-visible{outline:2px solid var(--greeting-ink-light);outline-offset:3px}.replay svg{width:13px;height:13px}.reduced .hint__dot{animation:none}