@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=DM+Sans:wght@400;450;500;550;600&display=swap');

:root{color-scheme:light;--ink:#513d3d;--wine:#7b3445;--muted:#8c7e76;--paper:#fcf8ef;--ease:cubic-bezier(.22,1,.36,1);font-family:'DM Sans',sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;background:#eee8dd}body{margin:0;min-width:300px;min-height:100svh;color:var(--ink);background:#eee8dd;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--wine);outline-offset:7px}button{cursor:pointer}button:disabled{cursor:default}button svg,a svg{width:24px;height:24px}svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.paper-grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.12;filter:url('#grain');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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23n)'/%3E%3C/svg%3E")}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#faf5ec 0,transparent 65%);transition:background 2s,opacity 2s}.masthead{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:33px 5.4vw}.wordmark{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;letter-spacing:-1px;color:var(--ink);text-decoration:none}.wordmark span{color:var(--wine)}.post-route{display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:2.1px;color:#7c706a}.post-route svg{width:73px;height:16px;stroke:#aa9690;stroke-width:.8}main{position:relative;z-index:2;min-height:calc(100svh - 180px)}.arrival{text-align:center;padding:39px 20px 42px;transition:opacity .7s ease,transform 1.1s var(--ease)}.eyebrow{font-size:9px;font-weight:500;letter-spacing:2.6px;color:#957c73;margin:0 0 20px}h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(39px,4.4vw,64px);line-height:1.04;letter-spacing:-1.7px;margin:0}h1 em{font-weight:400;color:var(--wine)}.intro{font-size:12px;color:#9a8b80;margin:19px 0 0;letter-spacing:.15px}.envelope-space{position:relative;width:min(390px,82vw);height:260px;margin:64px auto 0;perspective:1200px;transition:transform 1.1s var(--ease),opacity .8s}.envelope{appearance:none;border:0;background:none;display:block;width:100%;height:245px;padding:0;color:var(--ink);position:relative;transform:rotate(-4deg);transition:transform .65s var(--ease);filter:drop-shadow(0 22px 21px #61442b24)}.envelope:hover{transform:rotate(-2deg) translateY(-6px)}.envelope-back{position:absolute;inset:0;background:#dfcfb6;border-radius:3px;box-shadow:inset 0 1px 2px #a1896240}.peek-paper{position:absolute;inset:12px 17px 9px;background:#fcf8ef;border:1px solid #eee4d6;border-radius:2px;display:grid;place-items:center;transition:transform 1.2s var(--ease) .5s;z-index:1}.peek-paper>span{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;line-height:1.2}.peek-paper em{color:var(--wine)}.envelope-pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(145deg,#e9dbc6,#e4d2b8);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:3px}.envelope-pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(33deg,transparent 49.7%,#b29a7520 50%,transparent 50.4%),linear-gradient(-33deg,transparent 49.7%,#b29a7520 50%,transparent 50.4%)}.envelope-flap{position:absolute;z-index:4;inset:0;background:linear-gradient(175deg,#eee1ce,#e4d4bb);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:50% 0;backface-visibility:hidden;transition:transform .9s cubic-bezier(.4,0,.2,1),filter .9s;filter:drop-shadow(0 2px 1px #80653b22)}.envelope-address{position:absolute;z-index:5;left:31px;bottom:27px;font-family:'Caveat',cursive;font-size:26px;transform:rotate(-3deg);color:#785d53}.seal{width:55px;height:55px;position:absolute;z-index:6;left:calc(50% - 27.5px);top:108px;display:grid;place-items:center;border-radius:45% 51% 46% 48%;background:radial-gradient(circle at 30% 24%,#ad6170,#873b4c 58%,#6e2c3d);box-shadow:0 3px 5px #6a392c33,inset 0 0 0 3px #7f34494d,inset 0 0 0 5px #b569744d;transition:transform .5s,opacity .4s}.seal svg{width:32px;height:32px;stroke:#ddacaa;stroke-width:1;fill:#98556555}.postmark{position:absolute;right:11px;bottom:12px;z-index:5;opacity:.45;transform:rotate(14deg);width:95px;height:73px;color:#886b5d}.postmark svg{width:100%;height:100%;stroke-width:.8}.postmark>span{position:absolute;left:13px;top:23px;width:51px;font-size:7px;letter-spacing:1px;line-height:1.5}.postmark b{font-size:16px;font-weight:400}.open-hint{font-size:11px;color:#9a887b;letter-spacing:.6px;margin:31px 0 0;transition:opacity .4s}.open-hint span{margin-right:7px;font-size:16px;color:var(--wine)}.page-footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:25px;min-height:76px;padding:25px 20px;font-size:8px;letter-spacing:1.9px;color:#9b8b7d}.footer-heart{font-family:Georgia,serif;font-size:19px;color:#a27d7b;line-height:1}.letter-scene{max-width:690px;margin:0 auto;padding:20px 25px 24px;opacity:0;transform:translateY(80px) scale(.92);transition:opacity 1.1s ease,transform 1.4s var(--ease)}.letter-overline{text-align:center;font-size:8px;letter-spacing:2.6px;color:#9a837a;margin:0 0 23px}.letter{position:relative;background:var(--paper);border:1px solid #fff9ed;box-shadow:0 20px 70px #644a2e10,0 2px 4px #644a2e08;padding:30px 58px 33px;outline:none;transition:box-shadow 1.8s}.letter-top{display:flex;align-items:center;justify-content:space-between;color:#ac9688;font-size:7px;letter-spacing:2px}.small-heart{font-family:Georgia,serif;font-size:27px;color:var(--wine);line-height:1;letter-spacing:0}.letter-number{font-size:7px;letter-spacing:1px}.salutation{font-family:'Caveat',cursive;color:var(--wine);font-size:41px;line-height:1.1;margin:29px 0 22px;transform:rotate(-2deg);transform-origin:left}.letter-copy{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1.45;font-weight:500}.letter-copy p{margin:0 0 18px}.signoff{font-family:'Caveat',cursive;font-size:26px;color:var(--wine);margin:24px 0 0;transform:rotate(-2deg)}.signoff p{margin:0}.signoff .afterthought{font-size:20px;margin-top:5px;color:#a5867c}.letter-divider{display:flex;align-items:center;justify-content:center;gap:16px;font-family:Georgia,serif;color:#b5988d;font-size:17px;margin:27px 0 22px}.letter-divider span{width:66px;height:1px;background:#e4d7c8}.surprise-teaser{text-align:center;transition:opacity .35s,transform .4s}.surprise-teaser>p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:#998379;margin:0 0 17px}.button{display:inline-flex;gap:23px;align-items:center;justify-content:center;min-height:49px;padding:14px 24px;border:1px solid var(--wine);border-radius:3px;background:var(--wine);color:#fff8ee;font-size:11px;text-decoration:none;letter-spacing:.5px;box-shadow:0 4px 12px #71304210;transition:transform .3s,background .3s,box-shadow .3s}.button:hover{transform:translateY(-2px);background:#69303e;box-shadow:0 7px 15px #71304220}.button svg{width:17px;height:17px;stroke-width:1.2}.paper-corner{position:absolute;width:25px;height:25px;right:-1px;bottom:-1px;background:linear-gradient(135deg,#f2e9dc 49.5%,#eae3d8 50%);box-shadow:-1px -1px 2px #9a7d5308}.replay{display:block;border:0;background:none;color:#99847a;font-size:10px;letter-spacing:.4px;margin:24px auto 0;padding:10px}.replay span{font-size:17px;margin-right:8px;vertical-align:-1px}.replay:hover{color:var(--wine)}.playlist-reveal{text-align:center;opacity:0;transform:translateY(20px);transition:opacity 1.1s,transform 1.3s var(--ease)}.record-wrap{position:relative;width:124px;height:124px;margin:3px auto 20px}.vinyl{width:118px;height:118px;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle at center,#302e30 0,#302e30 1px,#252427 2px,#252427 3px);box-shadow:0 8px 15px #332b3320;position:relative;animation:record-turn 24s linear infinite;animation-play-state:paused}.vinyl:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#ffffff12,transparent 25%,transparent 50%,#ffffff0c,transparent 75%)}.record-label{background:#a65c68;width:51px;height:51px;border:2px solid #b27079;border-radius:50%;position:relative;display:grid;place-items:center;color:#fff1dc;font-size:6px;letter-spacing:1px}.record-label span{line-height:1.4}.record-label em{font-family:'Caveat',cursive;font-size:16px;letter-spacing:0;font-style:normal}.record-label i{position:absolute;width:4px;height:4px;border-radius:50%;background:#2d2b2c;left:calc(50% - 2px);top:calc(50% - 2px)}.record-spark{position:absolute;color:#a47b69;font-size:22px}.spark-one{right:-16px;top:0}.spark-two{left:-20px;bottom:10px;font-size:16px}.playlist-eyebrow{font-size:8px;letter-spacing:2px;margin:0 0 11px}h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:36px;font-weight:400;line-height:1.05;letter-spacing:-.7px;margin:0}h2 em{color:var(--wine);font-weight:400}.playlist-description{font-size:11px;line-height:1.8;color:#a0867b;margin:15px 0 21px}.playlist-button{gap:12px;padding:14px 22px}.playlist-button>svg{width:19px;height:19px}.playlist-button>svg circle{stroke:none;fill:currentColor}.playlist-button>svg path{stroke:var(--wine);stroke-width:1.3}.external-arrow{font-size:16px;line-height:1;margin-left:12px}.playlist-footnote{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;line-height:1.3;color:#a68a7b;margin:15px auto 0;max-width:260px}.lyric-wall{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.8s;overflow:hidden}.lyric-frame{position:absolute;width:clamp(155px,23vw,330px);overflow:hidden;border-radius:6px;box-shadow:0 9px 28px #50383416;opacity:0;transform:translateY(35px) rotate(var(--rotation));transition:transform 2.3s var(--ease),opacity 1.8s;transition-delay:var(--arrival-delay)}.lyric-frame img{display:block;width:100%;max-height:310px;object-fit:contain}.lyric-frame-0{left:-3%;top:10%;--rotation:-12deg}.lyric-frame-1{right:-2%;top:8%;--rotation:9deg}.lyric-frame-2{left:1%;top:47%;--rotation:7deg}.lyric-frame-3{right:0;top:44%;--rotation:-9deg}.lyric-frame-4{left:-2%;bottom:-8%;--rotation:-8deg}.lyric-frame-5{right:1%;bottom:-10%;--rotation:11deg}.lyric-frame-6{left:22%;top:-17%;--rotation:5deg}.lyric-frame-7{right:20%;bottom:-20%;--rotation:-6deg}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-stage="opening"] .envelope-flap{transform:rotateX(180deg);filter:brightness(.94)}body[data-stage="opening"] .seal{opacity:0;transform:scale(1.1) translateY(-12px)}body[data-stage="opening"] .peek-paper{transform:translateY(-150px)}body[data-stage="opening"] .open-hint{opacity:0}body[data-stage="opening"] .arrival{animation:arrival-away .9s ease 1.1s forwards}body[data-stage="opening"] .envelope-space{transform:translateY(20px)}body[data-stage="opening"] .letter-scene{position:absolute;top:20px;left:0;right:0}body[data-stage="letter"] .letter-scene,body[data-stage="revealing"] .letter-scene,body[data-stage="playlist"] .letter-scene{opacity:1;transform:translateY(0) scale(1)}body[data-stage="letter"] .arrival,body[data-stage="revealing"] .arrival,body[data-stage="playlist"] .arrival{display:none}body[data-stage="revealing"] .surprise-teaser{opacity:0;transform:translateY(-10px)}body[data-stage="playlist"] .playlist-reveal{opacity:1;transform:translateY(0)}body[data-stage="playlist"] .vinyl{animation-play-state:running}body[data-stage="playlist"] .lyric-wall{opacity:1}body[data-stage="playlist"] .lyric-frame{opacity:.7;transform:translateY(0) rotate(var(--rotation))}body[data-stage="playlist"] .ambient{background:radial-gradient(ellipse at 25% 20%,#e9c0b64a,transparent 60%),radial-gradient(ellipse at 80% 80%,#b5becc44,transparent 60%)}body[data-stage="playlist"] .letter{box-shadow:0 20px 80px #583b3b20}body[data-stage="closing"] .letter-scene{opacity:0;transform:translateY(35px) scale(.96)}body[data-stage="closing"] .arrival{opacity:0;position:absolute;inset:0}body[data-stage="closed"] .arrival{animation:arrival-back 1s var(--ease)}
@keyframes arrival-away{to{opacity:0;transform:translateY(25px)}}@keyframes arrival-back{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes record-turn{to{transform:rotate(360deg)}}
@media(min-width:1500px){.arrival{padding-top:65px}.envelope-space{margin-top:85px}.open-hint{margin-top:45px}}
@media(max-width:700px){.masthead{padding:25px 24px}.wordmark{font-size:24px}.post-route{gap:9px;font-size:7px;letter-spacing:1.4px}.post-route svg{width:35px}.arrival{padding:55px 16px 35px}h1{font-size:43px;letter-spacing:-1.4px}.eyebrow{font-size:8px;letter-spacing:2px}.intro{font-size:11px}.envelope-space{width:min(340px,80vw);height:230px;margin-top:68px}.envelope{height:215px}.seal{top:94px;width:50px;height:50px;left:calc(50% - 25px)}.envelope-address{font-size:25px;left:23px;bottom:23px}.postmark{width:84px;height:65px}.postmark>span{left:10px;top:20px;font-size:6px}.open-hint{margin-top:17px}.page-footer{gap:13px;font-size:6px;letter-spacing:1.3px;padding-inline:10px;min-height:70px}.letter-scene{padding:24px 20px 18px}.letter{padding:24px 29px 29px}.letter-overline{font-size:7px;letter-spacing:2px;margin-bottom:20px}.letter-top{font-size:6px;letter-spacing:1.5px}.salutation{font-size:39px;margin-top:25px}.letter-copy{font-size:21px;line-height:1.45}.letter-copy p{margin-bottom:18px}.signoff{font-size:25px}.signoff .afterthought{font-size:19px}.lyric-frame{width:47vw;max-width:260px}.lyric-frame-0{left:-25%;top:6%}.lyric-frame-1{right:-25%;top:18%}.lyric-frame-2{left:-29%;top:41%}.lyric-frame-3{right:-27%;top:58%}.lyric-frame-4{left:-20%;bottom:-2%}.lyric-frame-5{right:-25%;bottom:-10%}.lyric-frame-6,.lyric-frame-7{display:none}body[data-stage="playlist"] .lyric-frame{opacity:.55}.playlist-footnote{font-size:14px}.playlist-description{font-size:10px}}
@media(max-width:360px){h1{font-size:37px}.masthead{padding-inline:17px}.wordmark{font-size:22px}.arrival{padding-top:38px}.letter-scene{padding-inline:14px}.letter{padding-inline:23px}.letter-copy{font-size:20px}.signoff{font-size:23px}.post-route{font-size:6px}.page-footer{gap:8px;font-size:5.5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.lyric-frame{transform:rotate(var(--rotation))!important}.letter-scene{transform:none!important}}

/* Original screenshots, cropped in the layout to preserve every lyric exactly. */
.lyric-frame {
  left: var(--card-x);
  top: var(--card-y);
  right: auto;
  bottom: auto;
  width: clamp(155px, 18vw, 270px);
  aspect-ratio: 1;
  border-radius: 5.6%;
  transform: translate(-50%, calc(-50% + 38px)) rotate(calc(var(--rotation) - 5deg)) scale(calc(var(--card-scale) * .94));
  box-shadow: 0 12px 35px #483b3b24, 0 2px 5px #483b3b10;
  transition: transform 2s var(--ease), opacity 1.6s ease;
  transition-delay: var(--arrival-delay);
}
.lyric-frame img {
  position: absolute;
  max-width: none;
  max-height: none;
  object-fit: fill;
  display: block;
}
.lyric-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, #eee8dd18 15%, transparent 70%);
}
body[data-stage="playlist"] .lyric-frame {
  opacity: .88;
  transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--card-scale));
}
body[data-stage="playlist"] .masthead,
body[data-stage="playlist"] .page-footer {
  text-shadow: 0 1px 8px #fff7e8, 0 1px 12px #fff7e8;
}
@media(max-width:700px) {
  .lyric-frame {
    width: 43vw;
    min-width: 140px;
    max-width: 220px;
    left: calc((var(--card-x) - 50%) * 1.12 + 50%);
  }
  body[data-stage="playlist"] .lyric-frame { opacity: .84; }
}
@media(prefers-reduced-motion:reduce) {
  .lyric-frame,
  body[data-stage="playlist"] .lyric-frame {
    transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--card-scale))!important;
  }
}