:root{--ink:#fff8f4;--muted:#e6c7be;--rose:#d9918c;--rose-deep:#8d3448;--gold:#d7b37a;--wine:#2a0f1b;--night:#0e090d;--paper:#fff4ea;--paper-ink:#3d1f25;--shadow:#00000070;--font-body:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:Georgia, "Times New Roman", serif}*{box-sizing:border-box}html{background:var(--night);min-height:100%}body{min-height:100%;color:var(--ink);font-family:var(--font-body);background:linear-gradient(120deg,#ffffff09 0 1px,#0000 1px 120px),linear-gradient(#140b12 0%,#2a0f1b 52%,#0e090d 100%);margin:0}button{font:inherit}.letter-stage{place-items:center;min-height:100svh;padding:clamp(28px,5vw,72px);display:grid;position:relative;overflow:hidden}.letter-stage:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0e090de0,#0000 30% 70%,#0e090dcc),linear-gradient(#0e090d1a,#0e090de0);position:absolute;inset:0}.ambient{opacity:.45;pointer-events:none;border:1px solid #d7b37a29;width:42vmin;height:70vmin;position:absolute;transform:rotate(24deg)}.ambient-left{top:8vmin;left:-18vmin}.ambient-right{bottom:6vmin;right:-20vmin;transform:rotate(-18deg)}.hero{z-index:1;text-align:center;justify-items:center;gap:18px;width:min(720px,100%);display:grid;position:relative}.eyebrow,.letter-date{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:600}h1,h2{font-family:var(--font-display);letter-spacing:0}h1{text-wrap:balance;max-width:690px;margin:0;font-size:clamp(3.6rem,9vw,7.5rem);font-weight:700;line-height:.88}.intro{max-width:520px;color:var(--muted);margin:0;font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.7}.envelope-scene{aspect-ratio:1.28;perspective:1200px;place-items:center;width:min(390px,76vw);margin:clamp(12px,3vh,34px) 0 4px;display:grid}.envelope{aspect-ratio:1.42;width:100%;max-width:360px;filter:drop-shadow(0 32px 34px var(--shadow));transition:transform .9s cubic-bezier(.2,.72,.2,1);position:relative;transform:translateY(0)rotateX(0)}.envelope-back,.envelope-front,.envelope-flap,.letter-peek,.seal{position:absolute}.envelope-back{background:linear-gradient(145deg,#6d2437,#381421 70%);border:1px solid #ffe8da2e;border-radius:10px;inset:12% 0 0}.letter-peek{background:linear-gradient(180deg, #ffffffdb, #fff4eaf2), var(--paper);border-radius:8px 8px 3px 3px;height:50%;transition:transform .95s cubic-bezier(.16,1,.3,1);bottom:36%;left:8%;right:8%;transform:translateY(46%);box-shadow:0 12px 26px #0f070947}.letter-peek:before,.letter-peek:after{content:"";background:#3d1f252e;height:1px;position:absolute;left:14%;right:14%}.letter-peek:before{top:34%}.letter-peek:after{top:52%}.envelope-front{z-index:3;background:linear-gradient(34deg,#0000 49.4%,#ffe8da29 50%,#0000 50.6%),linear-gradient(-34deg,#0000 49.4%,#ffe8da29 50%,#0000 50.6%),linear-gradient(145deg,#7b2c42,#401521 76%);border:1px solid #ffe8da2e;border-top:0;border-radius:0 0 10px 10px;inset:34% 0 0}.envelope-flap{z-index:4;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#9e4057,#571d30);border-radius:10px 10px 0 0;height:46%;transition:transform .8s cubic-bezier(.2,.74,.18,1);top:12%;left:0;right:0}.seal{z-index:5;background:linear-gradient(135deg,#ffffff38,#0000 42%),linear-gradient(145deg,#d7b37a,#a76d55);border:1px solid #fff4ea59;border-radius:999px;width:48px;height:48px;transition:opacity .32s,transform .64s;top:53%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 24px #00000042}.seal:before{content:"";border:1px solid #3d1f2538;border-radius:999px;position:absolute;inset:15px}.open-letter{color:#fff8f4;cursor:pointer;background:#ffffff14;border:1px solid #d7b37a75;border-radius:999px;min-height:48px;padding:14px 22px;transition:transform .18s,background-color .18s,border-color .18s;box-shadow:0 16px 36px #0000003d}.open-letter:hover,.open-letter:focus-visible{background:#ffffff21;border-color:#d7b37ae6;outline:none;transform:translateY(-2px)}.revealed-letter{z-index:1;width:min(680px,100%);color:var(--paper-ink);background:linear-gradient(180deg, #ffffffb8, #fff4eaf0), var(--paper);opacity:0;visibility:hidden;border:1px solid #ffffff85;border-radius:18px;max-height:0;margin:20px auto 0;padding:clamp(28px,6vw,58px);transition:max-height .9s,visibility 0s linear 1s;position:relative;overflow:hidden;transform:translateY(34px)scale(.98);box-shadow:0 32px 80px #00000057}.revealed-letter:focus{outline-offset:6px;outline:2px solid #d7b37aeb}.revealed-letter h2{color:#33161e;margin:10px 0 20px;font-size:clamp(2.2rem,6vw,4rem);line-height:.95}.revealed-letter p{margin:0 0 18px;font-size:clamp(1rem,2vw,1.13rem);line-height:1.82}.memory-photo{background:#fffbf6d1;border:1px solid #5d25311f;border-radius:10px;width:min(100%,360px);margin:8px auto 30px;padding:10px 10px 14px;transform:rotate(-1.2deg);box-shadow:0 18px 36px #3d1f2529,inset 0 2px #ffffffe6}.memory-photo img{aspect-ratio:4/5;object-fit:cover;border:1px solid #3d1f251a;border-radius:7px;width:100%;display:block}.memory-photo figcaption{color:#6d3b43;font-family:var(--font-display);text-align:center;margin-top:10px;font-size:clamp(1.1rem,3vw,1.35rem);line-height:1.2}.revealed-letter .signature{color:#5d2531;font-family:var(--font-display);padding-top:12px;font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.08}.export-actions{border:0;border-top:1px solid #5d25311f;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;min-width:0;margin-top:30px;padding-top:22px;display:flex}.export-label{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.export-button{color:#5d2531;cursor:pointer;background:#ffffff7a;border:1px solid #5d25313d;border-radius:999px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:11px 16px;transition:transform .18s,border-color .18s,background-color .18s;display:inline-flex}.export-button:hover,.export-button:focus-visible{background:#ffffffb8;border-color:#5d253185;outline:none;transform:translateY(-1px)}.export-button:disabled{cursor:wait;opacity:.62;transform:none}.export-icon{stroke-width:1.9px;flex:none;width:20px;height:20px}.export-status{color:#6d3b43;text-align:center;flex-basis:100%;min-height:18px;margin:0;font-size:.86rem;line-height:1.35}.letter-stage.is-open{align-content:start}.letter-stage.is-open .hero{transform:translateY(-6px)}.letter-stage.is-open .envelope{transform:translateY(-10px)rotateX(4deg)}.letter-stage.is-open .envelope-flap{z-index:1;transform:rotateX(178deg)}.letter-stage.is-open .letter-peek{transform:translateY(-28%)}.letter-stage.is-open .seal{opacity:0;transform:translate(-50%,-50%)scale(.72)}.letter-stage.is-open .revealed-letter,.revealed-letter.letter-open{opacity:1;visibility:visible;max-height:1200px;transition:max-height .9s,visibility;overflow:visible;transform:translateY(0)scale(1)}.revealed-letter.letter-settled{opacity:1;visibility:visible;max-height:none;transition:none;overflow:visible;transform:translateY(0)scale(1)}.letter-stage.is-open .open-letter{pointer-events:none;opacity:.72}@media (width<=640px){.letter-stage{place-items:start center;padding:26px 18px 44px}.hero{gap:14px}h1{font-size:clamp(3.1rem,17vw,5rem)}.envelope-scene{width:min(320px,82vw);margin-top:8px}.revealed-letter{border-radius:14px}.memory-photo{width:min(100%,320px);margin-bottom:24px;transform:rotate(-.6deg)}.export-actions{margin-top:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.letter-stage.is-open .envelope{transform:none}}@media print{@page{margin:16mm}html,body{min-height:auto;color:var(--paper-ink);background:#fff4ea}.letter-stage{background:#fff4ea;min-height:auto;padding:0;display:block;overflow:visible}.letter-stage:before,.ambient,.hero,.export-actions{display:none}#love-letter{width:100%;max-width:none;color:var(--paper-ink);box-shadow:none;opacity:1;visibility:visible;background:#fff4ea;border:0;border-radius:0;max-height:none;margin:0;padding:0;overflow:visible;transform:none}.memory-photo,.memory-photo img{break-inside:avoid}}