:root{--bg: #fafafa;--accent: #333333;--warm-grey: #9a9488}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,sans-serif;background:var(--bg);color:#2a2a2a;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.home{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:var(--bg);transition:background-color .8s ease}.mood-input{width:100%;max-width:420px;border:none;border-bottom:1px solid rgba(0,0,0,.18);background:transparent;text-align:center;font-family:Inter,sans-serif;font-weight:300;font-size:1.25rem;color:#2a2a2a;padding:.7rem .5rem;outline:none;letter-spacing:.01em;transition:border-color .4s ease}.mood-input::placeholder{color:#00000052;font-weight:300}.mood-input:focus{border-bottom-color:#0006}.song-card{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:620px;animation:fade-up .9s ease both}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.mood-label{font-size:.78rem;font-weight:400;letter-spacing:.22em;text-transform:lowercase;color:var(--warm-grey);opacity:.85;margin-bottom:1.4rem}.song-title{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(2.4rem,8vw,3.6rem);line-height:1.05;color:var(--accent);margin-bottom:.7rem;transition:color .8s ease}.song-meta{font-size:.86rem;font-weight:400;letter-spacing:.02em;color:var(--warm-grey);margin-bottom:1.6rem}.lyrics-snippet{font-style:italic;font-size:1.02rem;font-weight:300;line-height:1.6;color:#2a2a2a9e;max-width:500px;margin:0 auto 2.2rem}.youtube-wrap{width:100%;max-width:560px;margin:0 auto}.youtube-ratio{position:relative;width:100%;padding-bottom:56.25%;border-radius:10px;overflow:hidden;box-shadow:0 18px 50px -24px #00000073}.youtube-ratio iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.youtube-link{display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 1.5rem;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:#ffffff73;color:#2a2a2a;text-decoration:none;font-size:.92rem;letter-spacing:.01em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .25s ease,background-color .25s ease,border-color .25s ease}.youtube-link:hover{transform:translateY(-1px);background:#ffffffb3;border-color:#0000003d}.youtube-play{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f03;color:#fff;flex-shrink:0}.youtube-play svg{margin-left:2px}.youtube-link-text{font-weight:400}.reset-link{margin-top:2.4rem;background:none;border:none;font-family:Inter,sans-serif;font-size:.8rem;letter-spacing:.04em;color:var(--warm-grey);cursor:pointer;opacity:.7;transition:opacity .3s ease;padding:.3rem .5rem}.reset-link:hover{opacity:1}.error-text{margin-top:1.4rem;font-size:.82rem;color:var(--warm-grey);opacity:.8;animation:fade-up .6s ease both}.is-loading{opacity:.45;transition:opacity .4s ease}.hailey{min-height:100dvh;background:#faf8f5;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem}.hailey-back{position:fixed;top:0;left:0;z-index:10;display:inline-flex;align-items:center;padding:1rem;font-family:Inter,sans-serif;font-size:.85rem;letter-spacing:.02em;line-height:1;color:#d4a0a0;text-decoration:none;transition:opacity .4s ease}.hailey-back:hover{opacity:.7}.hailey-back:focus-visible{outline:1px solid #d4a0a0;outline-offset:3px}.letter-scene{display:grid;place-items:center;perspective:1600px}.letter-scene>.envelope,.letter-scene>.letter{grid-area:1 / 1}.envelope{position:relative;width:340px;height:224px;margin:0;padding:0;border:none;border-radius:9px;background:#f3e8dd;cursor:pointer;transform-style:preserve-3d;box-shadow:inset 0 1px #fff9,0 30px 55px -30px #b07c7c8c;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .9s ease}.envelope:hover{transform:translateY(-5px)}.envelope:focus-visible{outline:2px solid #d4a0a8;outline-offset:8px}.envelope__flap{position:absolute;top:0;left:0;width:100%;height:58%;background:#efe0d3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transform:rotateX(0);transition:transform 1s cubic-bezier(.5,0,.2,1);backface-visibility:hidden;z-index:2}.envelope__seal{position:absolute;top:84%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#e1aeb5,#cf8e98);box-shadow:inset 0 0 0 1px #ffffff59,inset 0 0 0 5px #cf8e9859,0 4px 10px -3px #b06e7880;transition:opacity .4s ease}.envelope__hint{position:absolute;bottom:16%;left:0;width:100%;text-align:center;font-family:Cormorant Garamond,serif;font-style:italic;font-size:1.05rem;letter-spacing:.02em;color:#d4a0a8;transition:opacity .5s ease;z-index:1}.letter-scene.is-open .envelope{transform:scale(.96) translateY(8px);opacity:0;pointer-events:none}.letter-scene.is-open .envelope__flap{transform:rotateX(-180deg)}.letter-scene.is-open .envelope__seal,.letter-scene.is-open .envelope__hint{opacity:0}.letter{width:min(640px,90vw);padding:5rem 3.6rem 4.25rem;background:#fffdfa;border-radius:6px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 40px 70px -45px #b07c7c8c;opacity:0;transform:translateY(26px) scale(.985);visibility:hidden;transition:opacity 1.1s ease .45s,transform 1.1s cubic-bezier(.22,1,.36,1) .45s,visibility 0s linear 1.55s}.letter-scene.is-open .letter{min-height:calc(100dvh + 2.5rem);opacity:1;transform:translateY(0) scale(1);visibility:visible;transition:opacity 1.1s ease .55s,transform 1.1s cubic-bezier(.22,1,.36,1) .55s,visibility 0s linear 0s}.letter__opener{font-family:Cormorant Garamond,serif;font-style:italic;font-weight:300;font-size:1.5rem;line-height:1.6;color:#d4a0a8;margin:0 auto 2.9rem;max-width:480px}.letter__body{font-family:Inter,sans-serif;font-weight:300;font-size:1.1rem;line-height:1.95;color:#888;margin:0 auto 2.3rem;max-width:440px}.letter__line{width:100%;max-width:200px;height:1px;background:#d4a0a0;border:none;margin:2.4rem auto 1.8rem;opacity:.7}.letter__footer{font-family:Inter,sans-serif;font-size:.75rem;color:#ccc;letter-spacing:.05em}.letter [data-reveal]{opacity:0;transform:translateY(10px)}.letter-scene.is-open .letter [data-reveal]{opacity:1;transform:translateY(0);transition:opacity 1.9s ease,transform 1.9s cubic-bezier(.22,1,.36,1)}.letter-scene.is-open .letter [data-reveal]:nth-child(1){transition-delay:.9s}.letter-scene.is-open .letter [data-reveal]:nth-child(2){transition-delay:1.8s}.letter-scene.is-open .letter [data-reveal]:nth-child(3){transition-delay:2.7s}.letter-scene.is-open .letter [data-reveal]:nth-child(4){transition-delay:3.6s}.letter-scene.is-open .letter [data-reveal]:nth-child(5){transition-delay:4.5s}.letter-scene.is-open .letter [data-reveal]:nth-child(6){transition-delay:5.4s}.letter-scene.is-open .letter [data-reveal]:nth-child(7){transition-delay:6.3s}.letter__line[data-reveal]{opacity:0}.letter-scene.is-open .letter__line[data-reveal]{opacity:.7}@media (prefers-reduced-motion: reduce){.envelope,.envelope__flap,.letter,.letter [data-reveal]{transition-duration:1ms;transition-delay:0s}}@media (max-width: 480px){.envelope{width:300px;height:198px}.letter{padding:2.8rem 1.8rem 2.2rem}.lyrics-snippet{font-size:.96rem}}