@font-face{font-family:Cormorant;src:url('assets/cormorant.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491}
@font-face{font-family:Cormorant;src:url('assets/cormorant-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Nunito;src:url('assets/nunito.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0400-045F,U+0490-0491}
@font-face{font-family:Nunito;src:url('assets/nunito-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
:root{color-scheme:dark;--space:#08060e;--pearl:#fff1ec;--rose:#ef9ebd;--soft:#edccd9}
*{box-sizing:border-box}
html{background:var(--space);scrollbar-color:#785066 var(--space)}
body{margin:0;background:var(--space);color:var(--pearl);font-family:Nunito,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#b96589;color:#fff}
.space{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 14% 17%,#26152f 0,transparent 47%),radial-gradient(ellipse at 86% 82%,#311026 0,transparent 44%),#08060e}
.nebula{position:absolute;inset:-25%;opacity:.74;background:radial-gradient(ellipse at 74% 26%,#29153166 0,transparent 38%),radial-gradient(ellipse at 32% 80%,#44142f44 0,transparent 35%);transform:rotate(-24deg)}
#cats{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
main{position:relative;display:grid;place-items:center;min-height:100svh;padding:28px 6px;isolation:isolate}
.heart{position:relative;width:min(94vw,570px);height:770px;max-width:100%;filter:drop-shadow(0 20px 55px #03010880)}
.heart-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.heart-halo{fill:none;stroke:#e66aab;stroke-width:5;opacity:.35;filter:blur(15px)}
.letter{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding-top:115px;margin:0 auto;width:80%;text-wrap:pretty}
h1{font-family:Cormorant,Georgia,serif;font-size:57px;line-height:.98;font-weight:500;letter-spacing:-.025em;margin:0 0 19px;text-wrap:balance;color:var(--pearl)}
p{margin:0}
.birthday,.grown-up,.boss-line{font-size:17px;line-height:1.55;font-weight:400}
.birthday{margin-bottom:19px;color:var(--pearl)}
.grown-up{color:var(--soft);margin-bottom:5px}
strong{font-weight:600;color:var(--pearl)}
.boss-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--soft);margin-bottom:17px}
.boss{display:block;width:84px;height:84px;border-radius:14px;object-fit:cover;background:#08060e;box-shadow:0 8px 18px #09040d55}
.love{font-family:Cormorant,Georgia,serif;font-size:30px;line-height:1.08;font-weight:500;letter-spacing:-.015em;margin-bottom:15px;color:var(--pearl)}
.princess{display:block;width:88px;height:88px;object-fit:cover;border-radius:18px;transform:rotate(-5deg);box-shadow:0 9px 24px #03010870}
@media(max-width:600px){
  main{padding:20px 4px;min-height:100svh}
  .heart{width:98vw;height:720px}
  .letter{padding-top:103px;width:82%}
  h1{font-size:clamp(38px,11.5vw,49px);margin-bottom:17px}
  .birthday,.grown-up,.boss-line{font-size:clamp(14px,4.18vw,17px);line-height:1.5}
  .birthday{margin-bottom:16px}
  .grown-up{margin-bottom:4px}
  .boss-line{gap:10px;margin-bottom:16px}
  .boss{width:76px;height:76px;border-radius:13px}
  .love{font-size:clamp(22px,6.15vw,26px);line-height:1.1;max-width:100%;margin-bottom:14px}
  .princess{width:80px;height:80px;border-radius:16px}
}
@media(max-width:350px){.heart{height:680px}.letter{padding-top:98px}h1{margin-bottom:16px}.birthday{margin-bottom:14px}.boss{width:70px;height:70px}.love{font-size:22px}.princess{width:74px;height:74px}}
@media(min-width:601px) and (max-height:840px){main{padding:14px 6px}.heart{height:745px}.letter{padding-top:107px}h1{font-size:52px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
