@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ink:#d7dfE5;--soft:#9aaab9;--blue:#9ab5cd}*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden}body{background:#090f17;color:var(--ink);font-family:'DM Sans',sans-serif;isolation:isolate}.atmosphere{position:fixed;inset:0;background:radial-gradient(ellipse at 76% 35%,#26405566,transparent 54%),linear-gradient(120deg,#090d14,#0b1420);z-index:-3}.atmosphere:after{content:'';position:absolute;inset:0;opacity:.06;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}main{min-height:100svh;max-width:1500px;padding:30px clamp(25px,6vw,90px) 24px;margin:auto;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#a2aebb}header>span:last-child{font-size:8px;color:#667585}.tiny-heart{color:#b29095;font-size:14px}.layout{flex:1;display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;padding:35px 0}.letter{max-width:470px;animation:arrive 2s ease both}.kicker{font-size:9px;color:#8da7bd;letter-spacing:2.3px;margin:0 0 22px}h1{font:400 clamp(48px,5.3vw,78px)/1.04 Georgia,serif;letter-spacing:-2.5px;margin:0 0 24px}h1 em{font-weight:400;color:var(--blue)}.opening{font-size:13px;color:#bdcad5;margin:0 0 19px}.body-copy{font-size:12px;line-height:1.8;color:var(--soft);max-width:425px}.body-copy p{margin:0 0 13px}.body-copy .closing{color:#b5c4d0;margin-top:20px}.closing strong{font-weight:400;color:#e0e6eb}.signature{font:italic 17px Georgia,serif;color:#b6c3cf;margin:24px 0 0}.signature span{font-size:14px;color:#718697;margin-left:10px}.scene{height:560px;position:relative;animation:arrive 3s ease both}.window{position:absolute;inset:0 4% 95px;border:12px solid #0c131d;box-shadow:0 0 0 1px #3d536455,0 20px 80px #0008,inset 0 0 70px #000;overflow:hidden;background:linear-gradient(#182e40,#233b4d 60%,#111e2b)}.glass{position:absolute;inset:0;background:linear-gradient(115deg,#829fb00d,transparent 40%,#aac3d10c);backdrop-filter:blur(2px)}.outside{position:absolute;inset:48% 0 0;filter:blur(9px);background:linear-gradient(transparent,#08121d)}.outside i{position:absolute;width:6px;height:9px;background:#c7ac79;border-radius:50%;box-shadow:0 0 16px #e7b67e;bottom:25%;left:15%;opacity:.6}.outside i:nth-child(2){left:42%;bottom:45%;background:#a9ccdb}.outside i:nth-child(3){left:60%;bottom:12%}.outside i:nth-child(4){left:80%;bottom:35%}.outside i:nth-child(5){left:95%;bottom:17%}.moon{position:absolute;width:65px;height:65px;right:18%;top:12%;border-radius:50%;background:#a9c1cf12;box-shadow:0 0 65px #a2cbe61c;filter:blur(9px)}.crossbar{position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#0b1420 48% 51%,transparent 51%),linear-gradient(0deg,transparent 61%,#0b1420 61% 63%,transparent 63%)}.droplets{position:absolute;inset:-40% 0;background-image:repeating-linear-gradient(100deg,transparent 0 27px,#abcada22 28px,#b8d0e008 29px,transparent 30px 63px);background-size:83px 130px;animation:rain 9s linear infinite;opacity:.5}.sill{position:absolute;left:0;right:0;bottom:91px;height:17px;background:linear-gradient(#3a4752,#121c29);box-shadow:0 17px 35px #0008}.bunny{position:absolute;width:260px;height:260px;bottom:99px;right:-5px;background:url('bunny.png') 100% 0/200% 200%;filter:brightness(.57) saturate(.4) drop-shadow(0 10px 15px #0009);transform-origin:bottom;animation:breathe 7s ease-in-out infinite}.tear{position:absolute;left:43%;top:43%;height:9px;width:4px;background:#a9d3e9aa;border-radius:60% 20% 60% 50%;animation:tear 11s ease-in infinite}.polaroid{position:absolute;width:135px;padding:9px 9px 19px;background:#b5bbc0;bottom:109px;left:10%;transform:rotate(-12deg);box-shadow:0 6px 15px #0009}.polaroid img{width:100%;height:118px;object-fit:cover;filter:saturate(.25) brightness(.6);animation:memory 16s ease-in-out infinite alternate}.polaroid span{display:block;font:italic 9px Georgia,serif;color:#3e4952;margin-top:9px;text-align:center}.envelope{position:absolute;width:150px;height:85px;bottom:94px;left:24%;transform:rotate(9deg);background:linear-gradient(150deg,#83909c,#5c6b78);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:0 10px 15px #0008}.envelope:before{content:'';position:absolute;inset:0;background:#9aa5af;clip-path:polygon(0 0,100% 0,50% 57%)}.envelope span{position:absolute;bottom:12px;left:16px;font:italic 10px Georgia,serif;color:#2c3946}.envelope b{position:absolute;top:28px;left:65px;border-radius:50%;background:#5b414a;color:#aa8896;padding:3px 6px;font-weight:400}.camera{position:absolute;width:78px;bottom:97px;left:-3%;filter:saturate(.25) brightness(.5);transform:rotate(-8deg)}.lamp{position:absolute;right:3%;bottom:110px;width:12px;height:30px;border-radius:2px;background:#baa78a;box-shadow:0 0 70px 25px #d8a35d12}.lamp i{position:absolute;top:-12px;left:4px;width:5px;height:11px;border-radius:90% 20% 50% 50%;background:#f4cb89;box-shadow:0 0 25px #edb76a;animation:candle 5s ease-in-out infinite}.scene-note{position:absolute;bottom:4px;right:5%;text-align:right;color:#748b9e;font:italic 15px/1.6 Georgia,serif}.echoes{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}.echoes span{position:absolute;font:italic 28px Georgia,serif;color:#9ebbd0;opacity:0;animation:drift 30s ease-in-out infinite;white-space:nowrap}.echoes span:nth-child(1){top:10%;left:24%;animation-delay:-5s}.echoes span:nth-child(2){top:88%;left:34%;animation-delay:-16s}.echoes span:nth-child(3){top:16%;right:5%;animation-delay:-22s}.echoes span:nth-child(4){top:72%;left:5%;animation-delay:-12s}footer{display:flex;align-items:center;gap:22px;border-top:1px solid #8296aa22;padding-top:18px}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid #abc7df;outline-offset:7px}#music{border:0;background:none;padding:0;display:flex;align-items:center;gap:13px;text-align:left}#icon{border:1px solid #526779;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10px}#music b{font-size:11px;font-weight:400}#music small{font-size:7px;letter-spacing:1.2px;display:block;color:#778fa3;margin-top:5px}.equalizer{color:#95b1c9;letter-spacing:3px;padding-left:10px;font-size:20px}.playing .equalizer{animation:candle 1s ease-in-out infinite alternate}#music-status{font-size:9px;color:#778c9e;max-width:170px}.last-word{margin:0 0 0 auto;font:italic 13px/1.5 Georgia,serif;color:#8599aa;text-align:right}@keyframes arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes rain{to{background-position:0 260px}}@keyframes breathe{50%{transform:translateY(-3px) rotate(-1deg)}}@keyframes tear{0%,65%{opacity:0;translate:0 0}70%{opacity:.6}95%,100%{opacity:0;translate:1px 25px}}@keyframes memory{to{opacity:.2;filter:saturate(0) brightness(.4)}}@keyframes candle{50%{opacity:.55;transform:scaleY(.85)}}@keyframes drift{0%,100%{opacity:0;transform:translateY(12px)}30%,65%{opacity:.075}90%{opacity:0;transform:translateY(-15px)}}
@media(max-width:700px){main{padding:20px 23px 16px}.layout{display:block;position:relative;padding:30px 0 20px}.letter{position:relative;z-index:2;max-width:none}.kicker{font-size:8px;letter-spacing:1.8px;margin-bottom:16px}h1{font-size:45px;margin-bottom:17px;letter-spacing:-1.7px}.opening{font-size:11px;max-width:270px;margin-bottom:16px}.body-copy{font-size:12px;line-height:1.65;max-width:100%}.body-copy p{margin-bottom:12px}.body-copy .closing{margin-top:16px}.signature{font-size:16px;margin-top:18px}.scene{position:absolute;inset:0;height:auto;pointer-events:none;animation:none;opacity:.2;z-index:0}.window{inset:0 -10px 0 20%;border-width:7px}.bunny{width:140px;height:140px;bottom:0;right:-12px;filter:brightness(.55) saturate(.2)}.polaroid{width:80px;bottom:150px;left:auto;right:6px;opacity:.4}.polaroid img{height:70px}.envelope,.camera,.scene-note,.sill{display:none}.lamp{bottom:20px;right:10px}.body-copy{position:relative}.body-copy p{background:linear-gradient(90deg,#090f1750,transparent)}footer{gap:10px;flex-wrap:wrap;padding-top:14px}#music-status{order:3;margin:0;width:100%;max-width:none;font-size:8px}.last-word{font-size:10px}.equalizer{display:none}header{font-size:8px}header>span:last-child{font-size:7px;letter-spacing:1px}.echoes span{font-size:20px}.echoes span:nth-child(2){left:10%;top:92%}.echoes span:nth-child(3){top:28%}}@media(max-width:700px) and (max-height:740px){main{padding-top:14px;padding-bottom:12px}.layout{padding:19px 0 14px}.kicker{margin-bottom:10px}h1{font-size:38px;margin-bottom:12px}.opening{font-size:10px;margin-bottom:12px}.body-copy{font-size:11px;line-height:1.5}.body-copy p{margin-bottom:10px}.body-copy .closing{margin-top:12px}.signature{margin-top:12px;font-size:14px}footer{padding-top:10px}.bunny{width:115px;height:115px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.echoes span{opacity:.04}.tear{display:none}}
@media(max-width:700px){.scene{opacity:1}.scene .window{opacity:.2}.scene .polaroid{opacity:.12}.scene .bunny{opacity:.8}.scene .lamp{opacity:.45}}
#weather{border:1px solid #809ab044;border-radius:20px;background:#101d2980;color:#9db2c4;padding:9px 12px;font-size:10px;white-space:nowrap}#weather[aria-pressed="false"]{color:#738697;border-color:#6d809633}.echoes span:nth-child(n){display:block;max-width:calc(100vw - 28px);font-size:clamp(18px,2.1vw,29px);letter-spacing:.3px;text-shadow:0 0 20px #a9c7df15;animation-name:random-echo;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform,opacity}@keyframes random-echo{0%,100%{opacity:0;transform:translate3d(0,12px,0)}25%,62%{opacity:var(--echo-opacity,.2)}90%{opacity:0;transform:translate3d(var(--drift-x,8px),-15px,0)}}@media(max-width:700px){#weather{font-size:8px;padding:7px 9px;margin-left:auto}.last-word{display:block;order:4;font-size:9px;margin-left:auto}.echoes span:nth-child(n){font-size:18px}}@media(prefers-reduced-motion:reduce){.echoes span:nth-child(n){animation:none!important;opacity:.1;will-change:auto}.echoes span:nth-child(n+5){display:none}}

@media(max-width:700px){.echoes span:nth-child(n+7){display:none}}