@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Golos+Text:wght@400;500;600&display=swap');

:root{color-scheme:light;--ink:#4d3238;--muted:#846c70;--rose:#9e4c60;--paper:#fff9ed;--background:#ead5d0;--serif:'Cormorant Garamond',Georgia,serif;--body:'Golos Text',Arial,sans-serif;--hand:'Caveat',cursive}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--ink);font-family:var(--body);font-size:14px;background-image:radial-gradient(ellipse at 50% 25%,#f4e5df 0,transparent 65%);min-height:100dvh}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--rose);outline-offset:5px}button{-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237b4d42' opacity='.35' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.topline{max-width:1440px;margin:auto;display:flex;justify-content:space-between;padding:28px 48px;font-size:11px;letter-spacing:.05em;color:var(--muted)}main{max-width:1200px;margin:auto;padding:0 40px}.intro{text-align:center;padding:42px 0 16px}.handwritten{font-family:var(--hand)}.salutation{font-size:29px;color:var(--rose);margin:0 0 14px;transform:rotate(-5deg)}h1{font-family:var(--serif);font-size:clamp(50px,6.7vw,88px);font-weight:500;line-height:.99;letter-spacing:-.045em;margin:0}h1 em{color:var(--rose);font-weight:400}.intro-copy{color:var(--muted);line-height:1.9;margin:23px 0 20px;font-size:13px}.music{display:inline-flex;gap:12px;align-items:center;background:#ffffff52;border:1px solid #bc8c9459;border-radius:40px;padding:11px 18px;font-size:11px;transition:background .2s}.music:hover{background:#ffffff90}.music-icon{font-size:20px}.music-bars{display:flex;gap:2px;align-items:center;height:14px}.music-bars i{width:2px;height:4px;background:var(--rose)}.playing .music-bars i{animation:bars .8s ease-in-out infinite alternate}.playing .music-bars i:nth-child(2){animation-delay:-.3s}.playing .music-bars i:nth-child(3){animation-delay:-.6s}.playing .music-bars i:nth-child(4){animation-delay:-.2s}.music-credit{font-size:10px;color:var(--muted);margin:9px 0 0}.status{font-size:12px;color:var(--rose);min-height:0}.status:empty{display:none}.desk{position:relative;padding-top:40px}.desk-note{display:block;text-align:right;margin:0 20px 15px 0;font-size:25px;transform:rotate(4deg);color:var(--rose)}.letters{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 35px;max-width:920px;margin:auto}.envelope{grid-column:span 2;position:relative;aspect-ratio:1.52;background:var(--env);border:0;padding:0;isolation:isolate;box-shadow:0 12px 18px -10px #704c4e5c,0 2px 3px #704c4e15;transform:rotate(var(--tilt));transition:transform .35s,box-shadow .35s;animation:arrive .8s backwards;animation-delay:var(--delay)}.envelope:nth-child(4){grid-column:2 / span 2}.envelope:nth-child(5){grid-column:4 / span 2}.envelope:hover{transform:translateY(-8px) rotate(0);box-shadow:0 20px 25px -12px #704c4e6b}.envelope::before{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.5%,#9e7c5c1c 50%,transparent 50.6%),linear-gradient(-32deg,transparent 49.5%,#9e7c5c1c 50%,transparent 50.6%);z-index:-1}.flap{position:absolute;inset:0;background:linear-gradient(155deg,#ffffff40,#00000006);clip-path:polygon(0 0,100% 0,50% 61%);filter:drop-shadow(0 2px 1px #00000015);border-top:1px solid #ffffff75}.seal{position:absolute;width:42px;height:42px;left:calc(50% - 21px);top:calc(52% - 21px);display:grid;place-items:center;background:var(--seal);color:#fff2e8;border-radius:48% 46% 49% 43%;box-shadow:inset 0 0 0 3px #ffffff20,inset 0 0 0 5px #0000000b,0 3px 5px #4d32382b;font-family:var(--serif);font-style:italic;font-size:23px;transform:rotate(-8deg)}.env-caption{position:absolute;bottom:12px;left:10px;right:10px;text-align:center;font-family:var(--hand);font-size:clamp(19px,2vw,25px);line-height:1.1}.env-number{position:absolute;top:10px;left:13px;font-size:10px;opacity:.55}.opened-mark{position:absolute;right:11px;top:10px;font-size:10px;opacity:.65}.desk-bottom{display:flex;justify-content:space-between;max-width:920px;margin:36px auto 0;font-size:10px;color:var(--muted)}.tiny-heart{padding:0 8px;color:var(--rose)}footer{display:flex;align-items:center;justify-content:space-between;max-width:920px;margin:30px auto 0;padding:22px 0 26px;border-top:1px solid #9d73782b}footer .handwritten{font-size:25px;color:var(--rose)}.footer-note{font-size:10px;color:var(--muted)}dialog{border:0;background:transparent;padding:28px 16px;width:min(100%,650px);max-height:93dvh;color:var(--ink);overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#49303775;backdrop-filter:blur(7px)}dialog[open]{animation:letter-in .45s both}.letter-sheet{position:relative;padding:40px 48px 26px;background:var(--paper);box-shadow:0 24px 90px #21101242;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,#b7927c08 32px)}.close{position:absolute;top:8px;right:12px;border:0;background:transparent;font-size:30px;width:44px;height:44px;color:var(--muted)}.letter-kicker{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}.letter-art{font-family:var(--hand);font-size:48px;line-height:1;color:var(--rose);margin-bottom:10px}h2{font-family:var(--serif);font-size:42px;line-height:1.05;font-weight:500;letter-spacing:-.025em;margin:0 0 24px}.letter-body{line-height:1.9;font-size:14px}.letter-body p{margin:0 0 17px}.quote{font-family:var(--hand);font-size:36px;color:var(--rose);line-height:1.2!important;margin:24px 0!important}.signature{font-size:30px;color:var(--rose);text-align:right;margin:25px 0}.letter-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #b8947a38;padding-top:18px}.letter-nav button{background:none;border:0;padding:10px 0;font-size:11px}.letter-nav span{font-size:10px;color:var(--muted)}body.modal-open{overflow:hidden}#date-form{margin-top:24px}#date-form>label:first-child{font-family:var(--serif);font-size:26px}.date-options{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 18px}.date-option{border:1px solid #cdb6ad;background:transparent;border-radius:8px;padding:10px 12px;font-size:12px}.date-option[aria-pressed=true]{background:var(--rose);color:white;border-color:var(--rose)}.date-label{display:block;font-size:11px;color:var(--muted);margin-bottom:9px}input[type=date]{display:block;width:100%;min-height:46px;color:var(--ink);background:#fffdf6;border:1px solid #cdb6ad;border-radius:5px;padding:10px;appearance:none}.primary{background:var(--rose);color:#fffaf5;width:100%;border:0;padding:15px 14px;margin-top:13px;border-radius:5px}.copy-button{background:none;border:1px solid #ba8b93;border-radius:5px;padding:11px 14px;font-size:12px}.send-hint{font-size:12px;color:var(--muted);line-height:1.6}#date-confirmation{line-height:1.7;margin-bottom:5px}textarea{width:100%;min-height:90px;margin-top:12px;padding:12px;border:1px solid #cdb6ad;background:#fffdf6;line-height:1.6;color:var(--ink)}@keyframes arrive{from{opacity:0;transform:translateY(25px) rotate(var(--tilt))}to{opacity:1;transform:rotate(var(--tilt))}}@keyframes letter-in{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes bars{to{height:14px}}
@media(min-width:1450px){.intro{padding-top:65px}.desk{padding-top:50px}.letters{gap:38px 45px}}
@media(max-width:640px){.topline{padding:22px 20px;font-size:9px;gap:14px}main{padding:0 22px}.intro{padding-top:32px}.salutation{font-size:26px}h1{font-size:55px}.intro-copy{font-size:12px;margin-top:21px}.desk{padding-top:26px}.desk-note{font-size:23px;margin-right:10px;margin-bottom:24px}.letters{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.envelope,.envelope:nth-child(4),.envelope:nth-child(5){grid-column:auto}.envelope:nth-child(5){width:calc(50% - 10px);grid-column:1 / -1;justify-self:center}.env-caption{font-size:20px;bottom:9px}.seal{width:33px;height:33px;left:calc(50% - 16.5px);top:calc(49% - 16.5px);font-size:19px}.env-number,.opened-mark{font-size:8px;top:7px}.env-number{left:9px}.desk-bottom{font-size:9px;gap:10px;margin-top:30px}footer{align-items:flex-start;gap:10px;margin-top:24px;padding-top:19px}footer .handwritten{font-size:23px}.footer-note{font-size:9px;max-width:100px;line-height:1.6;text-align:right}.letter-sheet{padding:35px 25px 23px}h2{font-size:37px}.letter-body{font-size:13px}.letter-nav button{font-size:10px}.letter-kicker{margin-bottom:22px}.quote{font-size:31px}dialog{padding:12px;max-height:95dvh}.letter-art{font-size:40px}}
.flap{transform-origin:top;transition:transform .4s ease}.seal{transition:opacity .2s}.opening{transform:translateY(-8px) rotate(0);z-index:2}.opening .flap{transform:perspective(600px) rotateX(155deg)}.opening .seal{opacity:0}
dialog{scrollbar-width:none;-ms-overflow-style:none}dialog::-webkit-scrollbar{display:none;width:0;height:0}
.bear-sticker{position:absolute;z-index:3;border:0;background:none;padding:0;width:116px;right:-15px;bottom:-35px;transform:rotate(9deg);transition:transform .25s;filter:drop-shadow(0 5px 4px #704c4e26)}.bear-sticker img{display:block;width:100%;height:auto}.bear-sticker:hover{transform:rotate(0) translateY(-4px)}.secret-heart{border:0;background:none;padding:10px;margin-left:12px;color:var(--rose);font-size:23px;vertical-align:middle;animation:heart-breathe 2s ease-in-out infinite}.secret-message{font-family:var(--hand);font-size:27px;color:var(--rose);margin:20px 0}.secret-art{display:block;width:135px;height:auto;margin:0 auto 16px}.sticker-note{position:relative;text-align:center;margin:0 auto 25px;padding:16px 20px;max-width:320px;background:var(--paper);box-shadow:0 6px 18px #704c4e18;transform:rotate(-2deg);font-family:var(--hand);font-size:25px;color:var(--rose)}footer{flex-wrap:wrap}footer .secret-message{flex-basis:100%}.love-spark{position:fixed;pointer-events:none;font-size:21px;z-index:30;color:var(--rose);animation:love-rise 1.3s ease-out forwards}@keyframes heart-breathe{50%{transform:scale(1.12)}}@keyframes love-rise{to{opacity:0;transform:translate(var(--drift),-110px) rotate(20deg)}}
@media(max-width:640px){.bear-sticker{width:81px;right:-9px;bottom:-25px}.secret-art{width:110px}.sticker-note{font-size:23px;max-width:270px}}
.bear-sticker{bottom:65px}
@media(min-width:641px){.desk-note{margin-bottom:40px}.bear-sticker{bottom:80px}}
@media(max-width:640px){.seal{top:calc(31% - 16.5px)}.env-caption{font-size:18px;bottom:10px}}
.bear-corner{position:absolute;z-index:5;right:0;bottom:65px;width:100px}
.bear-corner .bear-sticker{position:relative;inset:auto;width:100%;display:block;transform:rotate(7deg)}
.bear-corner .bear-sticker:hover{transform:rotate(0)}
.bear-corner .sticker-note{position:absolute;right:0;bottom:calc(100% + 12px);width:250px;max-width:calc(100vw - 48px);margin:0;padding:16px 20px;border-radius:12px 12px 4px 12px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px) scale(.97);transform-origin:bottom right;transition:opacity 160ms ease-out,transform 160ms ease-out,visibility 160ms;line-height:1.25;font-size:25px;box-shadow:0 8px 28px #704c4e25}
.bear-corner .sticker-note.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sticker-note::after{content:'';position:absolute;bottom:-7px;right:30px;width:14px;height:14px;background:var(--paper);transform:rotate(45deg)}
:root{--muted:#775d63}
html{scrollbar-gutter:stable}
h1,h2{text-wrap:balance}p{text-wrap:pretty}
.intro-copy{font-size:14px}.music{min-height:44px;font-size:12px}.music-credit{font-size:11px}
.letter-body{font-size:16px;line-height:1.8}.letter-kicker{font-size:11px}.date-option{min-height:44px}.letter-nav button{min-height:44px;font-size:12px}.letter-nav span{font-size:12px;flex-shrink:0}.secret-heart{min-width:44px;min-height:44px;animation:none}.secret-message{animation:letter-in 250ms both}
.letter-sheet{padding:40px 40px 24px}dialog{width:min(calc(100% - 24px),650px);padding:16px 12px;max-height:94dvh}
@media(min-width:641px){.bear-corner{right:8px;bottom:80px;width:112px}.intro{padding-top:32px}.desk{padding-top:28px}}
@media(max-width:640px){
  main{padding:0 24px}.topline{padding:20px 24px;font-size:10px;line-height:1.5;align-items:flex-start}.topline span:last-child{text-align:right;flex-shrink:0}
  .intro{padding-top:28px}h1{font-size:clamp(39px,12vw,64px);line-height:1.04}.intro-copy{font-size:13px;line-height:1.8}.salutation{margin-bottom:16px}
  .desk{padding-top:28px}.desk-note{margin-bottom:28px}.letters{gap:32px 22px}.envelope{min-height:112px;aspect-ratio:1.4}.envelope:nth-child(5){width:calc(50% - 11px)}.env-caption{font-size:19px;bottom:12px;line-height:1.05}.seal{top:calc(30% - 16.5px)}
  .bear-corner{right:0;bottom:62px;width:76px}.bear-corner .sticker-note{font-size:23px;width:230px}
  .desk-bottom{font-size:10px;line-height:1.6;gap:16px;margin-top:32px}.desk-bottom>span{min-width:0}.desk-bottom>span:last-child{text-align:right}
  footer{margin-top:24px;padding:20px 0 24px;align-items:center;gap:8px}footer>.handwritten{max-width:calc(100% - 56px);font-size:24px}footer .secret-message{margin:12px 0 0;font-size:25px}
  .letter-sheet{padding:36px 24px 20px}h2{font-size:36px}.letter-body{font-size:15px}.letter-kicker{padding-right:22px;font-size:10px}.letter-art{font-size:36px}.secret-art{width:100px}.signature{margin:20px 0}.letter-nav{gap:8px}.letter-nav button{font-size:11px}.letter-nav span{font-size:11px}.date-options{gap:8px}.date-option{flex:1;padding:10px 8px}.send-hint{font-size:13px}
}
@media(max-width:640px){.envelope{width:100%;aspect-ratio:auto;min-height:120px}}
@media(max-width:350px){.topline{font-size:9px;gap:10px}.env-caption{font-size:17px}.letter-sheet{padding-left:20px;padding-right:20px}.letter-nav button{font-size:10px}.date-options{flex-direction:column}.date-option{width:100%}}
/* The camera settles on the whole desk; individual envelopes stay anchored. */
.topline{padding-top:20px;padding-bottom:16px}
.intro{padding:12px 0 8px}.salutation{font-size:26px;margin-bottom:8px}h1{font-size:clamp(42px,4.7vw,64px);line-height:1.02}.intro-copy{margin:14px 0 12px;font-size:13px;line-height:1.65}.music{padding:8px 16px;min-height:40px}.music-credit{margin-top:6px}
.desk{padding-top:24px;transform-origin:50% 42%;animation:desk-approach 1100ms cubic-bezier(.16,1,.3,1) both}.desk-note{font-size:25px;margin-bottom:28px}
.letters{max-width:1000px;gap:32px 42px;padding:12px 8px 0}
.envelope,.envelope:hover,.envelope.opening{animation:none;transform:rotate(var(--tilt));transition:box-shadow 180ms ease-out;z-index:auto}
.envelope:hover{box-shadow:0 12px 24px -10px #704c4e70,0 0 0 1px #a7757c35}.envelope.opening{z-index:2}.envelope:active{transform:rotate(var(--tilt))}
.paper-insert{position:absolute;inset:-9px 12px 10px;background:var(--paper);border:1px solid #a78b6e26;box-shadow:0 1px 3px #704c4e18;transform:rotate(-1deg);z-index:-2;background-image:repeating-linear-gradient(0deg,transparent 0 17px,#b7927c12 18px)}
.envelope::after{content:'';position:absolute;inset:3px;border:1px solid #ffffff45;pointer-events:none}
.postage{position:absolute;right:12px;top:10px;width:34px;height:43px;border:2px dotted #b6938c;background:#fffaf1bf;color:#9d6a6e;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(4deg);box-shadow:0 1px 2px #704c4e10}.postage>span{font-family:var(--serif);font-size:21px;line-height:1}.postage small{font-family:var(--body);font-size:6px;margin-top:4px;letter-spacing:.08em}
.envelope-tape{position:absolute;left:28px;top:-14px;width:44px;height:17px;transform:rotate(-20deg);background:repeating-linear-gradient(90deg,#f7ecda99 0 3px,#e7d3ad50 3px 4px);border:1px solid #ffffff45;clip-path:polygon(2% 0,98% 0,100% 13%,97% 26%,100% 40%,97% 55%,100% 72%,98% 100%,0 100%,3% 80%,0 65%,3% 48%,0 30%);pointer-events:none}
.opened-mark{right:auto;left:13px;top:27px;font-size:9px}.env-caption{bottom:16px}.desk-bottom,footer{max-width:1000px}.desk-bottom{margin-top:32px}
.letter-sheet::after{content:'';position:absolute;bottom:0;right:0;width:28px;height:28px;background:linear-gradient(135deg,#e9d8c0 48%,#f8efdf 51%);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none}
.letter-kicker::after{content:' ♡';color:var(--rose)}
@keyframes desk-approach{from{opacity:.35;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(max-width:640px){
  .topline{padding:16px 24px 8px}.intro{padding-top:12px}.salutation{font-size:24px;margin-bottom:8px}h1{font-size:clamp(35px,10.7vw,48px)}.intro-copy{font-size:12px;margin:12px 0}.intro-copy br{display:none}.music{min-height:40px}.music-credit{font-size:10px}
  .desk{padding-top:24px}.desk-note{font-size:23px;margin-bottom:22px}.letters{padding:10px 4px 0;gap:30px 22px}.envelope{min-height:126px}.env-caption{bottom:13px;font-size:19px}.postage{width:25px;height:32px;right:8px;top:7px}.postage>span{font-size:16px}.postage small{font-size:5px;margin-top:2px}.seal{top:calc(40% - 16.5px)}.opened-mark{left:9px;top:22px;font-size:7px}.envelope-tape{width:32px;height:14px;left:21px;top:-11px}.paper-insert{inset:-7px 9px 9px}.bear-corner{bottom:62px;width:71px}
}
@media(max-width:350px){.env-caption{font-size:17px}.postage{right:6px}.envelope{min-height:126px}.desk-note{font-size:21px}}
.paper-insert{bottom:auto;height:18px}
@media(min-width:641px){.desk-note{margin-bottom:44px}}
.envelope.envelope-flight{position:fixed;z-index:51;margin:0;min-height:0;aspect-ratio:auto;pointer-events:none;transition:none;transform-origin:center;outline:none}
.envelope-backdrop{position:fixed;inset:0;z-index:50;background:#49303755;backdrop-filter:blur(3px)}
.transition-source{visibility:hidden}
.envelope-flight .envelope-tape{transform-origin:left bottom}.envelope-flight .flap{backface-visibility:visible}
dialog[open]{animation:paper-unfold 320ms cubic-bezier(.23,1,.32,1) both}
@keyframes paper-unfold{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.word{animation:word-in 420ms ease-out backwards}
@keyframes word-in{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.together{font-size:26px;color:var(--rose);margin:0 0 10px;transform:rotate(-2deg)}
.together:not([hidden]){display:block}
.share-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.share-links .copy-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
@media(prefers-color-scheme:dark){
  :root{--background:#2a1d21;--muted:#c3aaae;--rose:#e29aaa}
  body{color:#f3e4e0;background-image:radial-gradient(ellipse at 50% 25%,#43292f 0,transparent 65%)}
  .paper-grain{opacity:.08}
  .topline,.intro-copy,.desk-bottom,footer .handwritten{color:#d9c3c6}
  .music{background:#ffffff14;border-color:#e29aaa59}.music:hover{background:#ffffff26}
  .letter-sheet,.sticker-note{--ink:#4d3238;--muted:#775d63;--rose:#9e4c60;color:#4d3238}
  .envelope-backdrop{background:#0008}
}
@media(prefers-color-scheme:dark){dialog::backdrop{background:#0009}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}dialog::backdrop{backdrop-filter:none}}