:root{
      --pink-1: #FFD8E6;
      --pink-2: #FFB3D2;
      --magenta: #FF6FA1;
      --peach: #FFD1B3;
      --violet: #B98BFF;
      --glass: rgba(255,255,255,0.10);
      --glass-2: rgba(255,255,255,0.06);
      --accent: #ff3e6c;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:'Poppins',sans-serif;background:#111; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

    /* Full background: multiple images + gradients */
    .bg {
      position:fixed; inset:0; z-index:-3; overflow:hidden;
      background:
        radial-gradient(1200px 600px at 10% 10%, rgba(255,240,245,0.35), transparent 10%),
        radial-gradient(1000px 700px at 90% 90%, rgba(240,230,255,0.28), transparent 10%),
        linear-gradient(135deg, rgba(255,210,225,0.18), rgba(218,185,255,0.12));
      display:block;
      pointer-events:none;
    }

    /* Soft blurred photos behind */
    .photo-layer {
      position:fixed; inset:0; z-index:-2;
      background-image:
        url('https://images.unsplash.com/photo-1508341597140-0b2a6dc2a4a9?auto=format&fit=crop&w=2000&q=70'),
        url('https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=2000&q=70');
      background-size: cover, cover;
      background-position: center center, center top;
      filter: blur(8px) saturate(1.05) brightness(0.75);
      transform: scale(1.05);
      opacity:0.95;
    }

    /* soft overlay to tint everything premium pink */
    .tint {
      position:fixed; inset:0; z-index:-1;
      background: linear-gradient(120deg, rgba(255,182,193,0.25), rgba(185,125,255,0.18));
      mix-blend-mode: overlay;
      pointer-events:none;
    }

    /* Center container */
    .wrap {
      min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px;
    }

    .card {
      width: min(920px, 92%);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border-radius:20px;
      padding:36px;
      box-shadow: 0 10px 40px rgba(10,6,20,0.6);
      backdrop-filter: blur(12px) saturate(1.1);
      border: 1px solid rgba(255,255,255,0.06);
      position:relative;
      overflow:visible;
    }

    header {
      display:flex; gap:18px; align-items:center; justify-content:center; flex-direction:column;
      text-align:center;
      margin-bottom:6px;
    }

    .logo {
      width:96px;height:96px;border-radius:28px;
      background: linear-gradient(135deg,var(--pink-1),var(--pink-2));
      display:flex; align-items:center; justify-content:center;
      font-family:'Great Vibes', cursive; font-size:36px; color:#fff;
      box-shadow: 0 6px 20px rgba(255,105,180,0.18), inset 0 -6px 14px rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    h1 {
      margin:0; font-family:'Great Vibes',cursive; font-size:48px; color: #fff4fb;
      text-shadow: 0 4px 30px rgba(255,160,180,0.18);
    }

    .subtitle {
      margin-top:6px; font-weight:500; color: #ffeaf2; opacity:0.95;
      letter-spacing:0.2px;
    }

    /* message list area */
    #messages { margin-top:18px; display:flex; flex-direction:column; gap:12px; align-items:center; padding:10px 22px; }

    .line {
      width:100%;
      max-width:780px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:14px;
      padding:14px 18px;
      font-size:1.12rem; color:#fff;
      opacity:0; transform:translateY(24px) scale(0.99);
      transition: all 700ms cubic-bezier(.2,.9,.25,1);
      box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 -6px 20px rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(6px);
    }

    .line.show { opacity:1; transform:translateY(0) scale(1); }

    .line .emoji { margin-right:8px; font-size:1.18rem; }

    .controls { margin-top:22px; display:flex; gap:12px; justify-content:center; align-items:center; }

    .btn {
      padding:12px 28px; border-radius:999px; border:0; cursor:pointer; font-weight:600;
      background: linear-gradient(90deg,var(--magenta),var(--accent)); color:white;
      box-shadow: 0 8px 28px rgba(255,50,110,0.18);
      transform:translateZ(0); transition: transform .22s ease, box-shadow .22s ease;
    }
    .btn:active{ transform:scale(.98); }
    .btn.ghost {
      background:transparent; color: #fff; border:1px solid rgba(255,255,255,0.06);
      box-shadow:none;
    }

    /* final reveal panel */
    .reveal {
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50;
      pointer-events:none; opacity:0; transition: opacity .45s ease;
    }
    .reveal.show { opacity:1; pointer-events:auto; }

    .reveal-card {
      max-width:880px; width:95%; padding:36px; border-radius:20px; text-align:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      box-shadow: 0 30px 90px rgba(10,6,20,0.65);
      border:1px solid rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
    }

    .reveal-card h2{
      margin:6px 0 12px 0; font-family:'Great Vibes',cursive; font-size:64px; color:#fff6fb;
      text-shadow: 0 10px 40px rgba(255,120,160,0.18);
    }
    .reveal-card p{ margin:0; font-size:1.25rem; color:#ffeef6; }

    /* small subtitle */
    .small {
      margin-top:12px; font-size:1rem; color:#ffdff0; opacity:0.95;
    }

    /* heart styling created by JS */
    .heart {
      position:fixed; width:36px; height:36px; transform-origin:center;
      pointer-events:none; z-index:45;
      will-change: transform, opacity;
      filter: drop-shadow(0 6px 20px rgba(255,80,140,0.18));
    }
    .heart svg { width:100%; height:100%; display:block; }

    /* helper: tiny sparkle behind */
    .spark {
      position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.9);
      box-shadow:0 6px 20px rgba(255,255,255,0.5);
      animation: sparkle 1.6s linear infinite;
      opacity:0.9; transform:translate(-50%,-50%);
    }
    @keyframes sparkle {
      0%{ transform:translateY(0) scale(.9); opacity:1;}
      100%{ transform:translateY(-18px) scale(1.6); opacity:0;}
    }

    /* media */
    @media (max-width:520px){
      h1{ font-size:32px }
      .reveal-card h2{ font-size:44px }
      .logo{ width:76px;height:76px;font-size:30px;border-radius:18px;}
    }