*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
  }
  
  body{
    background:#ffe6ef;
    color:#444;
    text-align:center;
    scroll-behavior:smooth;
    overflow-x:hidden;
  }

  /* FORMS (shared) */
  .form{
    margin-top:20px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .label{
    font-weight:600;
    color:#6a0022;
  }

  .input,
  .textarea{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(176,0,58,.25);
    outline:none;
    background:rgba(255,255,255,.85);
    transition:.2s;
  }

  .input:focus,
  .textarea:focus{
    border-color:#ff5fa2;
    box-shadow:0 0 0 4px rgba(255,95,162,.18);
  }

  .btn{
    border:none;
    cursor:pointer;
    padding:12px 16px;
    border-radius:14px;
    background:#b0003a;
    color:#fff;
    font-weight:700;
    transition:.2s;
  }

  .btn:hover{
    transform:translateY(-1px);
    background:#9a0032;
  }

  .btn:active{
    transform:translateY(0px);
  }

  .btn.btn-ghost{
    background:transparent;
    color:#b0003a;
    border:1px solid rgba(176,0,58,.35);
  }

  .btn.btn-ghost:hover{
    background:rgba(176,0,58,.06);
  }
  
  /* HERO */
  .hero{
    min-height:100vh;
    background:
      linear-gradient(rgba(255,182,193,.3),rgba(255,105,180,.3)),
      url('https://picsum.photos/1400/900');
    background-size:cover;
    background-attachment:fixed;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  
  .hero-box{
    background:rgba(255,255,255,.75);
    padding:60px 50px;
    border-radius:30px;
    backdrop-filter:blur(6px);
    animation:fadeUp 1.5s ease;
  }
  
  .tag{
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:14px;
  }
  
  .hero h1{
    font-size:4.5em;
    color:#b0003a;
    margin:15px 0;
  }
  
  .hero h1 span{
    color:#ff5fa2;
  }
  
  .subtitle{
    font-style:italic;
    opacity:.8;
  }
  
  /* STORY */
  .story{
    background:#fff;
  }
  
  section{
    padding:100px 20px;
  }
  
  .story h2,
  .gallery h2{
    font-size:2.5em;
    margin-bottom:40px;
  }
  
  .timeline{
    max-width:850px;
    margin:auto;
    text-align:left;
  }
  
  .timeline-item{
    background:#ffe6ef;
    padding:30px;
    border-radius:20px;
    margin-bottom:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    transition:.4s;
  }
  
  .timeline-item:hover{
    transform:translateY(-6px);
  }
  
  .timeline-item h3{
    color:#b0003a;
    margin-bottom:10px;
  }
  
  /* GALLERY */
  .gallery{
    background:#ffe6ef;
  }
  
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
  }
  
  .grid img{
    width:100%;
    border-radius:18px;
    transition:.5s;
  }
  
  .grid img:hover{
    transform:scale(1.08);
  }
  
  /* QUOTE */
  .quote{
    background:linear-gradient(135deg,#ff9aa2,#fad0c4);
    color:#fff;
  }
  
  .quote h2{
    max-width:800px;
    margin:auto;
    font-weight:300;
    line-height:1.5;
  }
  
  /* FOOTER */
  footer{
    background:#b0003a;
    color:#fff;
    padding:40px;
  }

  /* LOGIN PAGE */
  .login{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
    background:
      linear-gradient(rgba(255,182,193,.28),rgba(255,105,180,.18)),
      url('https://picsum.photos/1400/900?blur=2');
    background-size:cover;
    background-position:center;
  }

  .login-box{
    width:min(520px, 100%);
    background:rgba(255,255,255,.86);
    border-radius:30px;
    padding:50px 40px;
    backdrop-filter:blur(7px);
    box-shadow:0 14px 34px rgba(0,0,0,.14);
    text-align:center;
  }

  .login-box h1{
    font-size:2.2em;
    color:#b0003a;
    margin:14px 0 6px;
  }

  .hint{
    margin-top:14px;
    opacity:.75;
    font-size:.95em;
  }

  /* COMMENTS */
  .comments{
    background:#fff;
  }

  .comments-box{
    max-width:850px;
    margin:0 auto;
    background:#ffe6ef;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.10);
    text-align:left;
  }

  .comments-head{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:10px;
  }

  .comments-user{
    margin:0;
    color:#6a0022;
  }

  .comment-list{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .comment-item{
    background:rgba(255,255,255,.8);
    border:1px solid rgba(176,0,58,.12);
    border-radius:18px;
    padding:14px 16px;
  }

  .comment-meta{
    display:flex;
    gap:10px;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:6px;
  }

  .comment-name{
    font-weight:800;
    color:#b0003a;
  }

  .comment-time{
    font-size:.9em;
    opacity:.65;
  }

  .comment-text{
    margin:0;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-word;
  }

  /* MUSIC FAB (shown if autoplay is blocked) */
  .music-fab{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:9999;
    padding:12px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(176,0,58,.92);
    color:#fff;
    font-weight:800;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    cursor:pointer;
    backdrop-filter:blur(6px);
  }

  .music-fab:hover{
    background:rgba(154,0,50,.95);
  }

  .music-fab:active{
    transform:translateY(1px);
  }
  
  /* FLOWER FALLING */
  #petals span{
    position:fixed;
    top:-10px;
    color:pink;
    font-size:20px;
    animation:fall linear infinite;
  }
  
  @keyframes fall{
    to{
      transform:translateY(110vh) rotate(360deg);
    }
  }
  
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(40px)}
    to{opacity:1; transform:translateY(0)}
  }