:root{
      --bg:#FFF7FB;
      --text:#0b0b0b;
      --accent:#F7C6D5; /* soft pink */
      --muted:#6b6b6b;
      --card-bg: rgba(255,255,255,0.88);
    }

    @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&display=swap');

    html,body{height:100%;margin:0;font-family:Georgia, 'Times New Roman', serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}

    html,body{
      font-family: "Lexend", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      height:100vh;
      margin:0;
      background: linear-gradient(180deg, rgba(255,250,253,1) 0%, var(--bg) 100%);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background 420ms ease;
      overflow-x:hidden;
    }

    /* subtle floating heart decorations */
    .hearts{
      position:fixed;right:8vw;top:12vh;pointer-events:none;z-index:0;opacity:0.9
    }
    .hearts svg{width:72px;height:72px;display:block;margin-bottom:10px;filter:drop-shadow(0 6px 18px rgba(231,160,185,0.18));transform-origin:center;animation:float 6s ease-in-out infinite}
    .hearts svg:nth-child(2){width:56px;animation-duration:7.5s;opacity:0.85}
    .hearts svg:nth-child(3){width:44px;animation-duration:5.5s;opacity:0.75}
    @keyframes float{0%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(6deg)}100%{transform:translateY(0) rotate(-6deg)}}

    .card{
      position:relative;
      max-width:720px;
      width:calc(100% - 48px);
      padding:clamp(22px,4vw,44px);
      background:var(--card-bg);
      border-radius:20px;
      
      backdrop-filter: blur(8px);
      text-align:center;
      margin:0 auto;
      z-index:1;
      border:1px solid rgba(255,255,255,0.6);
      
    }

    h1{
      font-family: "Playwrite GB S", cursive;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      margin:0 0 10px;
      font-size:clamp(20px,3.2vw,34px);
      /* font-family: 'Brush Script MT', 'Pacifico', cursive, Georgia; */
      letter-spacing:0.4px;
      color:var(--text);
    }

    .lead{
      margin:0 0 10px;
      font-size:clamp(14px,1.6vw,18px);
      color:var(--muted);
      line-height:1.45;
    }

    .smallLead{
      margin:0 0 10px;
      font-size:13px;
      color:var(--muted);
      line-height:1.45;
    }
    
    #bigHeart {
      font-size: 48px;
      color: #e74c3c;
      transition: transform 0.3s ease;
      background-color: transparent;
    }

    .meta{margin-top:12px;font-size:14px;color:var(--muted)}

    .note{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        margin-top:14px;
        font-size:16px;
        color:var(--muted);
    }

    /* sparkles */
    .sparkles{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
    .sparkles span{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,200,220,0.8);animation:twinkle 4s ease-in-out infinite;filter:blur(1px)}
    @keyframes twinkle{0%,100%{opacity:0.2;transform:scale(0.6)}50%{opacity:1;transform:scale(1)}}

    @keyframes softGlow{
      0%{box-shadow:0 14px 50px rgba(194,123,155,0.12),0 0 22px rgba(255,170,200,0.18),0 0 42px rgba(255,170,200,0.10)}
      50%{box-shadow:0 14px 50px rgba(194,123,155,0.12),0 0 30px rgba(255,170,200,0.30),0 0 60px rgba(255,170,200,0.22)}
      100%{box-shadow:0 14px 50px rgba(194,123,155,0.12),0 0 22px rgba(255,170,200,0.18),0 0 42px rgba(255,170,200,0.10)}
    }

    /* breakpoints for responsive margins */
    @media (max-width:420px){
      .card{
        padding:20px;
        border-radius:16px;
        width:calc(100% - 80px); /* margin 40px kiri-kanan pada layar kecil (lebih lebar) */
      }
      .hearts{right:6vw;top:6vh}
    }

    @media (min-width:421px) and (max-width:768px){
      .card{width:calc(100% - 64px)}
    }

    @media (min-width:769px){
      .card{width:calc(100% - 96px)}
    }