:root{color-scheme:light;font-family:Manrope,sans-serif;--ink: #603551;--ink-soft: rgba(96, 53, 81, .72);--paper: rgba(255, 251, 255, .96);--accent: #ff5ea8;--accent-deep: #ff3d91;--blush: #ffcade;--rose: #ff8fbe;--gold: #ffca72;--shadow: 0 28px 90px rgba(199, 87, 145, .24)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.92),transparent 24%),radial-gradient(circle at 80% 10%,rgba(255,201,226,.78),transparent 20%),radial-gradient(circle at 50% 75%,rgba(255,215,156,.32),transparent 24%),linear-gradient(145deg,#ffe9f4,#fff3f8 35%,#fff9fc 62%,#ffe4ef)}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}.page-shell{position:relative;overflow:hidden;min-height:100vh}.ambient{position:absolute;width:440px;height:440px;border-radius:50%;filter:blur(16px);opacity:.48;pointer-events:none}.ambient-left{top:-120px;left:-100px;background:radial-gradient(circle,rgba(255,123,184,.42),transparent 70%)}.ambient-right{right:-150px;bottom:-100px;background:radial-gradient(circle,rgba(255,210,114,.34),transparent 72%)}.sparkle-field{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sparkle{position:absolute;width:10px;height:10px;border-radius:999px;background:radial-gradient(circle,#fffffff2 0,#fffffff2 38%,#fff0 65%),radial-gradient(circle,#ff5faea6,#ff5fae00 70%);box-shadow:0 0 18px #ff5fae59;animation:floatSparkle linear infinite}.experience{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:24px}.letter-scene{position:relative;display:grid;place-items:center;width:min(680px,100%);min-height:clamp(520px,calc(100vh - 48px),720px);perspective:2200px}.seal-hint{position:absolute;top:-18px;display:grid;justify-items:center;gap:8px;z-index:6;pointer-events:none;transition:opacity .45s ease,transform .45s ease;animation:driftHint 3.2s ease-in-out infinite}.experience.is-open .seal-hint,.experience.is-animating .seal-hint{opacity:0;transform:translateY(-8px)}.seal-glow{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#ffffffbf,#fff0)}.envelope{position:relative;width:min(580px,100%);aspect-ratio:1 / .82;background:transparent;transform-style:preserve-3d;transition:transform .8s ease}.envelope:hover:not(.opened):not(.opening){transform:translateY(-6px) rotate(-1deg)}.experience.is-animating .envelope{animation:envelopeCombo 1.45s cubic-bezier(.22,.88,.24,1) forwards}.experience.is-open .envelope{transform:translateY(-20px) scale(1.02)}.envelope.is-gone{pointer-events:none;animation:envelopeDismiss .8s .05s cubic-bezier(.58,.02,.8,.28) forwards}.envelope-shadow,.envelope-back,.envelope-front,.envelope-flap{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:36px}.envelope-shadow{inset:auto 9% -8%;height:20%;border-radius:999px;background:radial-gradient(circle,rgba(171,81,122,.34),transparent 68%);filter:blur(18px);transform:translateZ(-1px)}.envelope-back{background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 30%),linear-gradient(180deg,#ffcae1,#f78ab9);box-shadow:var(--shadow)}.envelope-front{clip-path:polygon(0 38%,50% 78%,100% 38%,100% 100%,0 100%);background:linear-gradient(160deg,rgba(255,255,255,.32),transparent 35%),linear-gradient(180deg,#ff9fc7,#ff79b0);box-shadow:var(--shadow);z-index:4}.envelope-heart-seal{position:absolute;top:25%;left:50%;z-index:5;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),transparent 28%),linear-gradient(145deg,#ff8fbe,#ff4f9f);color:#fff;font-family:"DM Serif Display",serif;font-size:2rem;box-shadow:0 16px 30px #ff539e52,inset 0 1px 1px #ffffff6b;transform:translate(-50%) translateY(-50%) scale(1);transition:opacity .25s ease}.experience.is-animating .envelope-heart-seal{animation:sealPop .5s ease forwards}.experience.is-open .envelope-heart-seal{opacity:0}.envelope-flap{transform-origin:top center;transform:rotateX(0);clip-path:polygon(0 0,50% 65%,100% 0,100% 40%,0 40%);background:linear-gradient(180deg,#ffd7e8,#ffafd2);box-shadow:var(--shadow);z-index:3}.opening .envelope-flap,.opened .envelope-flap{animation:flapReveal 1.05s .22s cubic-bezier(.24,.95,.28,1) forwards}.letter-card{position:absolute;left:50%;bottom:14%;z-index:2;width:calc(100% - 60px);padding:28px;border:1px solid rgba(255,255,255,.86);border-radius:30px;background:linear-gradient(180deg,#fffffffa,#fff6fbf0),var(--paper);box-shadow:0 25px 60px #a1567f38;text-align:left;opacity:0;transform:translate(-50%) translateY(32%) scale(.94)}.opening .letter-card,.opened .letter-card{animation:letterLift 1.05s .4s cubic-bezier(.2,.9,.25,1) forwards}.greeting-overlay{position:absolute;left:50%;top:50%;z-index:7;width:min(620px,calc(100vw - 32px));padding:30px;max-height:min(760px,calc(100vh - 48px));border:1px solid rgba(255,255,255,.82);border-radius:34px;background:radial-gradient(circle at top right,rgba(255,218,233,.96),transparent 24%),linear-gradient(180deg,#fffffffa,#fff5faf2);box-shadow:0 28px 90px #a74d7f33,inset 0 1px #ffffffe6;opacity:0;text-align:left;transform:translate(-50%,-44%) scale(.9);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.9,.25,1);pointer-events:none;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(255,94,168,.28) transparent}.greeting-overlay::-webkit-scrollbar{width:10px}.greeting-overlay::-webkit-scrollbar-track{background:transparent;margin:14px 0}.greeting-overlay::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:linear-gradient(180deg,#ff8ac0a6,#ff5ea861) padding-box}.greeting-overlay::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff8ac0d9,#ff5ea894) padding-box}.greeting-overlay.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.letter-tag{display:inline-block;margin-bottom:10px;padding:8px 14px;border-radius:999px;background:#ff5ca81f;color:var(--accent-deep);font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.letter-card h2{margin:0 0 12px;font-family:"DM Serif Display",serif;font-size:clamp(2rem,3vw,2.8rem);line-height:1}.letter-card p{margin:0 0 12px;color:var(--ink-soft);line-height:1.7}.quote-block{margin:8px 0 6px;padding:16px 18px;border:1px solid rgba(255,94,168,.15);border-radius:22px;background:#fff4f9eb;color:var(--ink);font-style:italic}.quote-credit{margin-bottom:14px;color:#603551ad;font-size:.95rem;font-weight:700}.video-trigger-wrap{display:flex;justify-content:center;margin-top:22px}.photo-frame{position:relative;margin-top:18px;overflow:hidden;border-radius:24px;aspect-ratio:16 / 10;border:1px solid rgba(255,92,168,.18);background:linear-gradient(135deg,#ffc7db80,#ffffffe6),repeating-linear-gradient(45deg,#ffffff73 0,#ffffff73 12px,#ffebf473 12px,#ffebf473 24px)}.photo-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff73;pointer-events:none}.photo-frame img,.photo-placeholder{width:100%;height:100%}.photo-frame img{display:block;object-fit:cover}.photo-placeholder{display:grid;place-items:center;gap:6px;padding:24px;color:#5f3553cc;text-align:center}.photo-placeholder span{font-weight:800;letter-spacing:.03em}.photo-placeholder small{color:#5f355394}.video-trigger{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.video-trigger{padding:14px 20px;border-radius:999px;background:linear-gradient(135deg,var(--accent) 0%,#ff8ac0 100%);color:#fff;font-weight:800;letter-spacing:.02em;box-shadow:0 14px 30px #ff4c9d47}.video-trigger:hover,.video-trigger:focus-visible{transform:translateY(-2px)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:24px;background:#5927466b;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fadeIn .35s ease}.video-modal{position:relative;width:min(680px,100%);padding:28px;border:1px solid rgba(255,255,255,.75);border-radius:32px;background:radial-gradient(circle at top right,rgba(255,208,228,.88),transparent 30%),linear-gradient(180deg,#fffcfffa,#fff2f8f0);box-shadow:0 25px 80px #53234147}.video-modal.is-player{width:min(1100px,calc(100vw - 32px));padding:22px}.modal-kicker{display:inline-block;margin-bottom:12px;color:var(--accent-deep);font-size:.82rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.video-modal h3{margin:0 0 10px;font-family:"DM Serif Display",serif;font-size:clamp(2rem,4vw,3.4rem);line-height:.95}.video-modal p{margin:0 0 20px;max-width:640px;color:var(--ink-soft);line-height:1.7}.modal-actions{display:flex;justify-content:center;margin-top:28px}.birthday-video{display:block;width:100%;max-height:calc(100vh - 120px);margin-top:14px;border-radius:24px;background:#000;box-shadow:0 18px 45px #3314273d}@keyframes floatSparkle{0%,to{opacity:.25;transform:translateZ(0) scale(.9)}50%{opacity:1;transform:translate3d(0,-18px,0) scale(1.15)}}@keyframes driftHint{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes envelopeCombo{0%{transform:translateY(0) rotate(0) scale(1)}24%{transform:translateY(-12px) rotate(-2deg) scale(1.02)}52%{transform:translateY(4px) rotate(1.4deg) scale(.985)}72%{transform:translateY(-14px) rotateX(8deg) scale(1.03)}to{transform:translateY(-20px) rotateX(4deg) scale(1.02)}}@keyframes sealPop{0%{opacity:1;transform:translate(-50%) translateY(-50%) scale(1)}65%{opacity:1;transform:translate(-50%) translateY(-66%) scale(1.18)}to{opacity:0;transform:translate(-50%) translateY(-110%) scale(.5)}}@keyframes flapReveal{0%{transform:rotateX(0)}55%{transform:rotateX(126deg)}to{transform:rotateX(180deg)}}@keyframes letterLift{0%{opacity:0;transform:translate(-50%) translateY(32%) scale(.94)}40%{opacity:1}82%{opacity:1;transform:translate(-50%) translateY(-26%) scale(1.02)}to{opacity:1;transform:translate(-50%) translateY(-18%) scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes envelopeDismiss{0%{opacity:1;transform:translateY(-20px) rotateX(4deg) scale(1.02)}to{opacity:0;transform:translateY(-220px) rotateX(18deg) scale(.8)}}@media (max-width: 960px){.letter-scene{min-height:clamp(520px,calc(100vh - 40px),700px)}.greeting-overlay{width:min(620px,calc(100vw - 28px));padding:24px;max-height:calc(100vh - 32px)}}@media (max-width: 640px){.experience{padding:16px}.envelope{aspect-ratio:1 / 1}.envelope-heart-seal{width:64px;height:64px;font-size:1.7rem}.letter-card{bottom:12%;border-radius:24px}.greeting-overlay{width:calc(100vw - 24px);padding:20px;max-height:calc(100vh - 20px);border-radius:26px}.video-modal{padding:22px 16px 16px;border-radius:24px}.video-modal.is-player{width:calc(100vw - 20px);padding:14px}}