:root{--pink: #FFD6E0;--blue: #B8D8F8;--cream: #FFF9F5;--ink: #3a3a3a;--ink-soft: #6b6b6b;--white: #ffffff;--font-display: "Dancing Script", cursive;--font-body: "Lora", serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg,var(--pink) 0%,var(--blue) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}img{max-width:100%;height:auto;display:block}.petals-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0}.lang-toggle{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;box-shadow:0 2px 8px #00000014;font-family:var(--font-body);font-size:.9rem}.lang-toggle__btn{padding:4px 8px;border-radius:999px;color:var(--ink-soft);font-weight:600;min-width:44px;min-height:32px}.lang-toggle__btn--active{background:var(--white);color:var(--ink);box-shadow:0 1px 3px #0000001a}.lang-toggle__sep{color:var(--ink-soft);opacity:.5}.mute-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;box-shadow:0 2px 8px #00000014;font-size:1.1rem;transition:transform .15s ease}.mute-toggle:hover{transform:scale(1.05)}.nav-controls{display:inline-flex;align-items:center;gap:8px}.nav-controls__btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;box-shadow:0 2px 8px #00000014;font-size:1.25rem;color:var(--ink);transition:transform .15s ease,opacity .15s ease}.nav-controls__btn:hover:not(:disabled){transform:scale(1.05)}.nav-controls__btn:disabled{opacity:.35;cursor:not-allowed}.envelope-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;position:relative}.envelope{position:relative;width:340px;height:220px;background:transparent;border:none;cursor:pointer;transform:rotate(-2deg);transition:transform .2s ease;perspective:800px}.envelope:hover{transform:rotate(-2deg) scale(1.02)}.envelope__body{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffe4ec;border-radius:6px;box-shadow:0 12px 32px #0000002e;clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%)}.envelope__flap{position:absolute;top:0;left:0;right:0;height:50%;background:#fcd3dd;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform 1s ease-in-out;z-index:2;backface-visibility:hidden}.envelope__seal{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:56px;color:#d63b5c;text-shadow:0 4px 8px rgba(0,0,0,.2);pointer-events:none;z-index:3;transition:opacity .4s ease,transform .4s ease}.envelope__card{position:absolute;top:8px;right:8px;bottom:8px;left:8px;background:var(--cream);border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:1;transform:translateY(0) scale(1);opacity:0;transition:transform 1.2s ease-out,opacity .4s ease,scale 1s ease-in-out}.envelope__card-mark{font-family:var(--font-display);font-size:4rem;color:var(--ink);opacity:.5}.envelope-screen__hint{font-family:var(--font-body);font-style:italic;color:var(--ink-soft);font-size:1rem;animation:hintPulse 2s ease-in-out infinite;position:relative;z-index:1}.envelope-screen__skip{position:absolute;bottom:24px;right:24px;font-family:var(--font-body);font-size:.85rem;color:var(--ink-soft);text-decoration:underline;opacity:.7}.envelope-screen__skip:hover{opacity:1}.envelope-screen--opening .envelope__seal{opacity:0;transform:translate(-50%,-50%) scale(.6);transition-duration:.4s}.envelope-screen--opening .envelope__flap{transform:rotateX(180deg);transition-delay:.3s}.envelope-screen--opening .envelope__card{opacity:1;transform:translateY(-120%) scale(2.5);transition-delay:1s,1s,1.6s;transition-duration:1.2s,.4s,1s}.envelope-screen--opening{animation:screenFade .5s ease-in-out 2.5s forwards}@keyframes screenFade{to{opacity:0}}@keyframes hintPulse{0%,to{opacity:.6}50%{opacity:1}}@media (max-width: 480px){.envelope{width:280px;height:180px}.envelope__seal{font-size:48px}}@media (prefers-reduced-motion: reduce){.envelope__flap,.envelope__card,.envelope__seal{transition:none!important}.envelope-screen--opening{animation:screenFade .3s ease-in-out forwards}}.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;gap:24px}.landing__photos{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.landing__photo{background:var(--white);padding:10px 10px 28px;border-radius:4px;box-shadow:0 8px 24px #00000026;opacity:0}.landing__photo img{width:140px;height:168px;object-fit:cover;display:block;border-radius:2px;filter:saturate(0) brightness(1.5) contrast(.7);animation:develop 1.5s ease-out forwards}.landing__photo--0 img{animation-delay:1s}.landing__photo--1 img{animation-delay:1.4s}.landing__photo--0{--tilt: -7deg;transform:translate(-120vw) rotate(0);animation:slideInLeft 1.4s ease-out 0s forwards}.landing__photo--1{--tilt: 6deg;transform:translate(120vw) rotate(0);animation:slideInRight 1.4s ease-out .4s forwards;margin-left:-16px}@keyframes slideInLeft{to{opacity:1;transform:translate(0) rotate(var(--tilt))}}@keyframes slideInRight{to{opacity:1;transform:translate(0) rotate(var(--tilt))}}@media (max-width: 480px){.landing__photo{padding:8px 8px 22px}.landing__photo img{width:110px;height:132px}.landing__photo--1{margin-left:-12px}}.landing__title{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,5rem);font-weight:700;color:var(--ink);opacity:0;transform:translateY(20px);animation:fadeUp 1.4s ease-out 1.8s forwards}.landing__subtitle{font-family:var(--font-body);font-style:italic;font-size:clamp(1rem,2.4vw,1.25rem);color:var(--ink-soft);max-width:32ch;opacity:0;animation:fadeUp 1.4s ease-out 2.4s forwards}.landing__verse{margin-top:16px;max-width:36ch;padding:16px 20px;background:#ffffff8c;border-radius:12px;font-style:italic;color:var(--ink);opacity:0;animation:fadeUp 1.4s ease-out 3s forwards}.landing__verse cite{display:block;margin-top:8px;font-style:normal;font-size:.9rem;color:var(--ink-soft)}.landing__hint{margin-top:16px;font-family:var(--font-body);font-size:clamp(.9rem,2.2vw,1.05rem);color:var(--ink-soft);font-style:italic;opacity:0;animation:fadeUp 1.4s ease-out 3.6s forwards}.landing__play{margin-top:8px;padding:16px 40px;font-family:var(--font-display);font-size:1.5rem;background:var(--white);color:var(--ink);border-radius:999px;box-shadow:0 0 #ffd6e0b3;opacity:0;animation:fadeUp 1.4s ease-out 4.2s forwards,glow 2.4s ease-in-out 4.2s infinite;transition:transform .15s ease}.landing__play:hover{transform:scale(1.05)}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 #ffd6e0b3,0 4px 16px #00000014}50%{box-shadow:0 0 0 16px #ffd6e000,0 4px 16px #00000014}}@keyframes develop{to{filter:saturate(1) brightness(1) contrast(1)}}@media (prefers-reduced-motion: reduce){.landing__photo--0,.landing__photo--1{animation:none;opacity:1;transform:rotate(var(--tilt))}.landing__photo img{animation:none;filter:none}.landing__title,.landing__subtitle,.landing__verse,.landing__hint,.landing__play{animation:none;opacity:1;transform:none}}.memory-card-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;background:#00000026;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:50;animation:overlayFade .3s ease-out}.memory-card{background:var(--white);padding:16px 16px 20px;border-radius:6px;box-shadow:0 12px 40px #00000040;max-width:320px;width:90%;cursor:pointer;transform:translateY(-30px);opacity:0;animation:cardIn .5s ease-out .1s forwards}.memory-card__photo{width:100%;aspect-ratio:4 / 5;overflow:hidden;background:#0000000d;border-radius:4px;margin-bottom:12px}.memory-card__photo img{width:100%;height:100%;object-fit:cover;display:block}.memory-card__caption{font-family:var(--font-body);font-style:italic;font-size:1rem;line-height:1.5;color:var(--ink);text-align:center}.memory-card__hint{margin-top:8px;font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft);text-align:center;font-style:italic}@keyframes cardIn{to{transform:translateY(0);opacity:1}}@keyframes overlayFade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.memory-card,.memory-card-overlay{animation:none;opacity:1;transform:none}}.memory-wall{display:flex;flex-direction:column;gap:12px;padding:12px;background:#ffffff80;border-radius:12px;max-height:70vh;overflow-y:auto}.memory-wall__item{background:var(--white);padding:8px 8px 10px;border-radius:4px;box-shadow:0 4px 12px #00000014;text-align:center;cursor:pointer;transition:transform .15s ease}.memory-wall__item:hover{transform:translateY(-2px)}.memory-wall__photo{width:100%;aspect-ratio:4 / 5;overflow:hidden;border-radius:2px;margin-bottom:6px}.memory-wall__photo img{width:100%;height:100%;object-fit:cover;display:block}.memory-wall__caption{font-family:var(--font-body);font-style:italic;font-size:.78rem;line-height:1.4;color:var(--ink)}@media (max-width: 899px){.memory-wall{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:100%;max-width:100vw;box-sizing:border-box}.memory-wall__item{flex-shrink:0;width:140px;scroll-snap-align:start}}.puzzle{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 16px 48px;gap:24px}.puzzle__main{display:flex;flex-direction:column;align-items:center;gap:16px}.puzzle__heading{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.4rem);color:var(--ink)}.puzzle__progress{font-family:var(--font-body);font-size:1rem;color:var(--ink-soft)}.puzzle__board{position:relative;background:#fff6;border:2px dashed rgba(58,58,58,.25);border-radius:8px;transition:transform .6s ease-out,box-shadow .6s ease-out}.puzzle__board--complete{transform:scale(1.05);box-shadow:0 0 60px #ffd6e0b3}.puzzle__slot{position:absolute;border:1px dashed rgba(58,58,58,.18);box-sizing:border-box}.puzzle__tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:360px;max-width:100%;box-sizing:border-box;padding:12px;background:#ffffff59;border-radius:12px}.puzzle__piece{border-radius:4px;box-shadow:0 2px 6px #0000001a;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:none}.puzzle__piece--dragging{cursor:grabbing;z-index:10;box-shadow:0 6px 18px #0003}.puzzle__piece--placed{cursor:default;pointer-events:none;box-shadow:none}.puzzle--dimmed .puzzle__main{opacity:.3;transition:opacity .3s ease;pointer-events:none}.puzzle__completion{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px;animation:completionFade .6s ease-out 1.5s both}.puzzle__transition-line{font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2rem);color:var(--ink);text-align:center}.puzzle__continue{padding:14px 32px;font-family:var(--font-display);font-size:1.3rem;background:var(--white);color:var(--ink);border-radius:999px;box-shadow:0 4px 16px #00000014;transition:transform .15s ease}.puzzle__continue:hover{transform:scale(1.05)}@keyframes completionFade{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 900px){.puzzle{flex-direction:row;align-items:flex-start;justify-content:center;gap:32px;padding:32px}.puzzle__main{flex:0 0 auto}.memory-wall{width:300px;position:sticky;top:24px}}@media (prefers-reduced-motion: reduce){.puzzle__board,.puzzle__completion{transition:none;animation:none}}.voice-memo--card{display:flex;align-items:center;gap:16px;width:100%;max-width:420px;margin:24px auto;padding:16px 20px;background:var(--white);border-radius:12px;box-shadow:0 4px 20px #00000014;animation:voiceMemoPulse 2.4s ease-in-out infinite}@keyframes voiceMemoPulse{0%,to{box-shadow:0 4px 20px #00000014,0 0 #ffd6e080}50%{box-shadow:0 4px 20px #00000014,0 0 0 12px #ffd6e000}}.voice-memo__play{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--ink);transition:transform .15s ease}.voice-memo__play:hover{transform:scale(1.05)}.voice-memo__body{flex:1;display:flex;flex-direction:column;gap:6px}.voice-memo__invite{font-family:var(--font-body);font-style:italic;font-size:.95rem;color:var(--ink)}.voice-memo__progress{width:100%;height:4px;background:#00000014;border-radius:2px;overflow:hidden}.voice-memo__progress-bar{height:100%;background:var(--pink);transition:width .1s linear}.voice-memo__time{font-family:var(--font-body);font-size:.75rem;color:var(--ink-soft)}.voice-memo--mini{position:fixed;right:16px;bottom:16px;width:64px;height:64px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 6px 20px #ffd6e080;z-index:30;transition:transform .15s ease}.voice-memo--mini:hover{transform:scale(1.05)}@media (max-width: 480px){.voice-memo--mini{width:56px;height:56px;right:12px;bottom:12px}}@media (prefers-reduced-motion: reduce){.voice-memo--card{animation:none}}.scrapbook{margin:48px 0 24px;text-align:center}.scrapbook__heading{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.2rem);color:var(--ink);margin-bottom:24px}.scrapbook__strip{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.scrapbook__item{flex:0 0 auto;width:240px;background:var(--white);padding:12px 12px 16px;border-radius:6px;box-shadow:0 6px 20px #0000001a;scroll-snap-align:start}.scrapbook__item img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:3px;display:block}.scrapbook__item figcaption{margin-top:8px;font-family:var(--font-body);font-style:italic;font-size:.85rem;color:var(--ink-soft);text-align:center}@media (max-width: 480px){.scrapbook__item{width:200px}}.letter{max-width:680px;margin:0 auto;padding:48px 24px 96px;background:var(--cream);min-height:100vh;box-shadow:0 0 40px #0000000d}.letter__header{text-align:center;margin-bottom:40px}.letter__header h1{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4rem);color:var(--ink);font-weight:700}.letter__body{display:flex;flex-direction:column;gap:24px}.letter__paragraph{font-family:var(--font-body);font-size:1.1rem;line-height:1.9;color:var(--ink)}.letter__figure{margin:16px 0}.letter__figure img{width:100%;border-radius:12px;box-shadow:0 6px 20px #0000001a}.letter__figure figcaption{margin-top:8px;font-style:italic;font-size:.95rem;color:var(--ink-soft);text-align:center}.letter__verse{margin:56px auto 32px;max-width:36ch;padding:20px 24px;background:#ffd6e059;border-left:4px solid var(--pink);border-radius:6px;font-style:italic;text-align:center}.letter__verse cite{display:block;margin-top:10px;font-style:normal;font-size:.9rem;color:var(--ink-soft)}.letter__footer{text-align:center;margin-top:32px}.letter__footer p{font-family:var(--font-display);font-size:1.6rem;color:var(--ink)}.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease-out,transform .8s ease-out}.reveal.is-visible{opacity:1;transform:translateY(0)}.app{min-height:100vh;width:100%;position:relative;overflow-x:hidden}.app__screen{position:relative;z-index:1}.app__corner-controls{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:8px;z-index:10}.app__nav-controls{position:fixed;top:16px;left:16px;display:flex;align-items:center;z-index:10}@media (max-width: 480px){.app__corner-controls{top:12px;right:12px}.app__nav-controls{top:12px;left:12px}}