:root{
  --bg: #fff6fb;
  --accent: #ff6fa3;
  --accent-2: #ffb3d9;
  --muted: #6b4b61;
}
/* Local Pacifico font added by user */
@font-face{
  font-family: 'Pacifico';
  src: url('assets/fonts/Pacifico/Pacifico-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'PlaywriteINGuides';
  src: url('assets/fonts/Playwrite_IN_Guides/PlaywriteINGuides-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
header{
  text-align: center;
  margin-bottom: 28px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,#fff6fb 0%, #fff0f8 100%);
  font-family: 'Pacifico', 'Comfortaa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
}
.page{max-width:900px;margin:0 auto;padding:18px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 12px;position:relative}
.sparkles{font-size:22px;display:inline-flex;gap:8px;align-items:center}
.sparkles span{display:inline-block;transform-origin:center;will-change:transform,opacity;font-size:1.25em;animation: sparkleFloat var(--dur,3.6s) ease-in-out infinite, sparkleTwinkle var(--tw,2.8s) linear infinite;animation-delay: var(--delay,0s), calc(var(--delay,0s) / 1.6);}
.title{font-size:72px;margin:12px 0 8px;color:var(--accent);letter-spacing:0.5px}
.subtitle{margin:0 0 12px;color:#7a4d63}
.choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.choice{background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;padding:12px 20px;border-radius:14px;color:white;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(255,111,163,0.18);transition:transform .12s ease}
.choice:active{transform:translateY(2px)}
.choice.pulse{animation:pop .42s cubic-bezier(.2,.9,.2,1)}
.response{margin-top:14px;font-size:18px}

.carousel-wrap{margin-top:18px}
.carousel-wrap{margin-top:18px}

/* Gallery collage: horizontal scrolling */
.gallery-wrap{margin-top:18px}
.gallery{display:flex;gap:12px;overflow-x:auto;padding:14px;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.gallery.dragging{cursor:grabbing}
.gallery-item{flex:0 0 220px;scroll-snap-align:center;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-item.wide{flex:0 0 360px}
.gallery-item.tall{flex:0 0 260px}

/* hide native scrollbar in a tasteful way */
.gallery::-webkit-scrollbar{height:10px}
.gallery::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:999px}
.gallery::-webkit-scrollbar-track{background:transparent}

.dot{width:10px;height:10px;border-radius:99px;border:none;background:#f3c7d9}
.dot.active{background:var(--accent)}

/* Simple carousel styles (replacement for gallery) */
.carousel-wrap{margin-top:18px}
.carousel{position:relative;display:flex;align-items:center;gap:12px}
.carousel-track-container{overflow:hidden;flex:1}
.carousel-track{display:flex;list-style:none;padding:0;margin:0;transition:transform .45s cubic-bezier(.22,.9,.2,1)}
.carousel-slide{min-width:100%;flex:0 0 100%;display:flex;align-items:center;justify-content:center}
.carousel-slide img{width:100%;object-fit:cover;border-radius:12px}
.carousel-btn{background:rgba(255,255,255,0.9);border:none;padding:10px 12px;border-radius:8px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.carousel-btn:focus{outline:2px solid var(--accent)}
.carousel-nav{display:flex;gap:8px;justify-content:center;margin-top:10px}
.carousel-indicator{width:10px;height:10px;border-radius:99px;border: 1px solid var(--accent);background:#551b33}
.carousel-indicator.current-slide{background:var(--accent)}

@media (min-width:600px){
  .carousel-slide img{height:480px}
}

.future{
  background:linear-gradient(180deg,#fff,#fff6fb);
  margin-top:18px;
  padding:14px;
  border-radius:12px;
  text-align:left;
  font-size:24px;
  font-family:'Pacifico','Comfortaa',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

/* music UI removed */

@media (min-width:600px){
  .title{font-size:72px}
  .slide{height:420px}
}

/* cute floating hearts animation */
.hero::after{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 10% 20%, rgba(255,111,163,0.06) 0 10px, transparent 10px), radial-gradient(circle at 80% 70%, rgba(255,179,217,0.04) 0 18px, transparent 18px);
}

@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

@keyframes pop{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

@keyframes sparkleFloat{
  0%{transform:translateY(0) translateX(0) scale(1); opacity:1}
  40%{transform:translateY(-6px) translateX(var(--x,0px)) scale(1.06); opacity:0.95}
  100%{transform:translateY(0) translateX(calc(var(--x,0px) * -1)) scale(1); opacity:1}
}

@keyframes sparkleTwinkle{
  0%{opacity:0.9; filter:brightness(1)}
  50%{opacity:1; filter:brightness(1.25)}
  100%{opacity:0.9; filter:brightness(1)}
}