:root{
  --bg:#fff7fb;
  --card:#ffffff;
  --text:#2a1230;
  --muted:#7b4b76;
  --accent:#ff5bb7;
  --accent-2:#ff8fcb;
  --border:#ffd3e8;
  --cream:#fffafc;
  --shadow: 0 18px 45px rgba(255, 91, 183, .16), 0 2px 10px rgba(42, 18, 48, .08);
  --ease-pop: cubic-bezier(.2,.9,.25,1);
  --ease-soft: cubic-bezier(.2,.7,.2,1);
  --heart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'%3E%3Cpath d='M14 22C6.6 16.9 2 12.9 2 8.3 2 5.4 4.3 3 7.2 3c1.8 0 3.5.8 4.6 2.2C12.9 3.8 14.6 3 16.4 3 19.3 3 21.6 5.4 21.6 8.3 21.6 12.9 17 16.9 14 22Z' fill='%23ff5bb7'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(255, 202, 233, .55) 0%, rgba(255, 202, 233, 0) 62%),
    radial-gradient(900px 520px at 88% 10%, rgba(255, 220, 243, .55) 0%, rgba(255, 220, 243, 0) 58%),
    radial-gradient(700px 520px at 50% 100%, rgba(255, 229, 245, .45) 0%, rgba(255, 229, 245, 0) 60%),
    radial-gradient(circle at 18px 18px, rgba(255, 140, 202, .18) 2px, rgba(255, 140, 202, 0) 2.6px),
    radial-gradient(circle at 42px 42px, rgba(255, 140, 202, .12) 2px, rgba(255, 140, 202, 0) 2.6px),
    linear-gradient(180deg, #fff7fb 0%, #ffeef7 100%);
  background-size: auto, auto, auto, 60px 60px, 60px 60px, auto;
  color:var(--text);
  font:16px/1.5 ui-rounded, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}

/* Cute animated glitter (lightweight) */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.9;
}
body::before{
  background:
    radial-gradient(circle at 20px 20px, rgba(255, 91, 183, .18) 1.5px, rgba(255, 91, 183, 0) 2.2px),
    radial-gradient(circle at 70px 40px, rgba(255, 143, 203, .16) 1.5px, rgba(255, 143, 203, 0) 2.2px),
    radial-gradient(circle at 42px 76px, rgba(255, 255, 255, .40) 1.2px, rgba(255, 255, 255, 0) 2px);
  filter: blur(.2px);
  animation: glitter-drift 14s linear infinite;
}
body::after{
  background:
    radial-gradient(circle at 30px 30px, rgba(255, 255, 255, .28) 1px, rgba(255, 255, 255, 0) 2px),
    radial-gradient(circle at 95px 70px, rgba(255, 91, 183, .10) 1.2px, rgba(255, 91, 183, 0) 2.4px);
  background-size: 160px 160px;
  animation: glitter-drift-2 22s linear infinite;
  opacity:.65;
}
@keyframes glitter-drift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-120px,-120px,0); }
}
@keyframes glitter-drift-2{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(160px,-160px,0); }
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{
  position:sticky;top:0;
  background:rgba(255, 245, 251, .82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
  z-index: 1000;
  box-shadow: 0 10px 24px rgba(255, 91, 183, .10);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{
  font-weight:900;
  text-decoration:none;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__text{
  background: linear-gradient(180deg, var(--text) 0%, rgba(42, 18, 48, .85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__bow{
  width:18px;
  height:14px;
  position:relative;
  display:inline-block;
  filter: drop-shadow(0 3px 6px rgba(255, 91, 183, .25));
}
.brand__bow::before,
.brand__bow::after{
  content:"";
  position:absolute;
  top:0;
  width:10px;
  height:10px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 28%, rgba(255,255,255,0) 29%),
              linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border:1px solid rgba(255, 91, 183, .45);
  border-radius: 10px 10px 10px 2px;
}
.brand__bow::before{left:0; transform: rotate(-18deg);}
.brand__bow::after{right:0; transform: rotate(18deg) scaleX(-1);}
.brand__bow{
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 28%, rgba(255,255,255,0) 29%),
              linear-gradient(180deg, #ffd2ea 0%, #ff96cd 100%);
  border:1px solid rgba(255, 91, 183, .45);
  border-radius:999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  animation: bow-pop 2.6s var(--ease-soft) infinite;
}
@keyframes bow-pop{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.04); }
}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.hero{padding:22px 0 10px}
.muted{color:var(--muted)}
.hero__desc{
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 91, 183, .22);
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 140, 202, .14) 2px, rgba(255, 140, 202, 0) 2.6px),
    radial-gradient(circle at 42px 42px, rgba(255, 140, 202, .10) 2px, rgba(255, 140, 202, 0) 2.6px),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,245,251,.86) 100%);
  background-size: 60px 60px, 60px 60px, auto;
  box-shadow: 0 18px 45px rgba(255, 91, 183, .12), 0 2px 10px rgba(42, 18, 48, .08);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(42, 18, 48, .92);
  font-size: clamp(14px, 2.1vw, 18px);
  line-height: 1.45;
  position: relative;
}
.hero__desc::before{
  content:"✦ ✦ ✦";
  position:absolute;
  top:-10px;
  left:14px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 91, 183, .22);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 30px rgba(255, 91, 183, .10);
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(255, 91, 183, .95);
}
.hero__desc::after{
  /* tiny ribbon/bow sticker */
  content:"";
  position:absolute;
  right: 12px;
  top: -12px;
  width: 28px;
  height: 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 28%, rgba(255,255,255,0) 29%),
    linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border: 1px solid rgba(255, 91, 183, .35);
  box-shadow: 0 16px 34px rgba(255, 91, 183, .18);
  transform: rotate(10deg);
}
@media(max-width:719px){
  .hero__desc{ letter-spacing: .06em; }
}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
.chip{
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;color:var(--muted);
  background:rgba(255, 255, 255, .78);
  box-shadow: 0 8px 18px rgba(255, 91, 183, .08);
  transition: transform .16s var(--ease-pop), box-shadow .16s var(--ease-pop), border-color .16s var(--ease-pop);
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(255, 91, 183, .45); box-shadow: 0 14px 26px rgba(255, 91, 183, .12); }
.chip:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(255, 91, 183, .08); }
.chip:focus-visible{ outline: 3px solid rgba(255, 91, 183, .22); outline-offset: 2px; }
.chip--active{
  color:var(--text);
  border-color:rgba(255,91,183,.55);
  box-shadow:0 0 0 3px rgba(255,91,183,.10), 0 10px 24px rgba(255, 91, 183, .10);
  background:
    radial-gradient(circle at 16px 10px, rgba(255,255,255,.85) 0 7px, rgba(255,255,255,0) 8px),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,245,251,.90) 100%);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items:start;
}

.moment{
  grid-column: span 12;
  --ty: 0px;
  --rot: 0deg;
  --mx: 0px;
  --in: 14px; /* reveal offset */
  opacity: 0;
  transform: translate3d(var(--mx), calc(var(--ty) + var(--in)), 0) rotate(var(--rot));
  transition: opacity .42s var(--ease-soft), transform .48s var(--ease-pop);
  will-change: transform, opacity;
  position: relative;
}
.moment.is-visible{
  opacity: 1;
  --in: 0px;
}
@media(min-width:720px){ .moment{grid-column: span 6;} }
@media(min-width:980px){ .moment{grid-column: span 4;} }

/* Collage variations (slight scatter) */
.moment--a{--ty: 6px;  --mx: -4px; --rot: -1.6deg; --z: 2;}
.moment--b{--ty: -8px; --mx: 6px;  --rot: 2.1deg;  --z: 4;}
.moment--c{--ty: 10px; --mx: -6px; --rot: 1.2deg;  --z: 1;}
.moment--d{--ty: -12px;--mx: 4px;  --rot: -2.0deg; --z: 5;}
.moment--e{--ty: 8px;  --mx: 8px;  --rot: 2.6deg;  --z: 3;}
.moment--f{--ty: -6px; --mx: -8px; --rot: -2.7deg; --z: 2;}
@media(min-width:980px){
  .moment--b{grid-column: span 5;}
  .moment--d{grid-column: span 5;}
  .moment--c{grid-column: span 3;}
  .moment--f{grid-column: span 3;}
}
/* Mobile: keep it clean and fast */
@media(max-width:719px){
  .moment{ --rot: 0deg; --mx: 0px; }
}
.moment__link{display:block;text-decoration:none}
.moment__frame{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.moment__frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 91, 183, .35) 0%, rgba(255, 143, 203, .25) 35%, rgba(255,255,255,0) 70%);
  pointer-events:none;
  opacity:.85;
}
.moment__frame::after{
  /* little "tape" */
  content:"";
  position:absolute;
  top:10px;
  left:12px;
  width:64px;
  height:22px;
  transform: rotate(-7deg);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.55) 0 6px,
      rgba(255,255,255,.35) 6px 12px
    ),
    linear-gradient(180deg, rgba(255, 210, 240, .65) 0%, rgba(255, 246, 252, .65) 100%);
  border: 1px solid rgba(255, 91, 183, .22);
  border-radius: 6px;
  box-shadow: 0 10px 18px rgba(255, 91, 183, .12);
  opacity: .9;
  pointer-events:none;
}
.moment--b .moment__frame::after{ top: 14px; left: auto; right: 14px; transform: rotate(10deg); width: 58px; }
.moment--d .moment__frame::after{ top: auto; bottom: 14px; left: 18px; transform: rotate(-12deg); width: 70px; }
.moment--f .moment__frame::after{ top: 12px; left: 22px; transform: rotate(14deg); width: 54px; }
.moment__link:hover .moment__frame{
  transform: translateY(-3px) rotate(0deg);
  border-color: rgba(255, 91, 183, .55);
  box-shadow: 0 26px 60px rgba(255, 91, 183, .20), 0 3px 12px rgba(42, 18, 48, .10);
}
.moment__link:hover{transform: rotate(0deg) translateY(0);}
.moment__link{transform: none;}

/* Polaroid-ish extra frame */
.moment__frame{
  outline: 8px solid rgba(255, 255, 255, .55);
  outline-offset: -8px;
}

/* a touch of "handmade" wobble edges */
.moment__frame{
  box-shadow:
    0 18px 45px rgba(255, 91, 183, .14),
    0 2px 10px rgba(42, 18, 48, .08),
    0 0 0 1px rgba(255, 91, 183, .08) inset;
}
.moment__media{
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 140, 202, .16) 2px, rgba(255, 140, 202, 0) 2.6px),
    radial-gradient(circle at 42px 42px, rgba(255, 140, 202, .10) 2px, rgba(255, 140, 202, 0) 2.6px),
    linear-gradient(135deg, rgba(255, 233, 245, .92) 0%, rgba(255, 250, 252, .95) 60%);
  background-size: 60px 60px, 60px 60px, auto;
  border-bottom: 1px solid rgba(255, 211, 232, .9);
  position: relative;
}
.moment__media img,
.moment__media video{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio: var(--ar, 4 / 5);
}
.moment__media video{filter:saturate(1.05) contrast(1.02)}
.moment__play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.moment__play::before{
  content:"";
  width:54px;height:54px;
  border-radius:999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 91, 183, .35);
  box-shadow: 0 14px 30px rgba(255, 91, 183, .18);
}
.moment__link:active .moment__frame{
  transform: translateY(-1px) scale(.995);
}
.moment__link:focus-visible .moment__frame{
  outline: 3px solid rgba(255, 91, 183, .22);
  outline-offset: 2px;
}
.moment__play::after{
  content:"";
  position:absolute;
  width:0;height:0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent rgba(255, 91, 183, .95);
  transform: translateX(2px);
}
.moment__body{padding:12px 12px 14px; position:relative}
.moment__title{font-weight:800}
.moment__caption{margin-top:6px;color:var(--muted);display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.moment__meta{margin-top:10px;font-size:13px}

/* Different aspect ratios per variation */
.moment--a{--ar: 4/5;}
.moment--b{--ar: 3/4;}
.moment--c{--ar: 1/1;}
.moment--d{--ar: 16/10;}
.moment--e{--ar: 4/5;}
.moment--f{--ar: 3/5;}

/* Slight overlap on desktop for a messy collage feel */
@media(min-width:980px){
  .moment{ z-index: var(--z, 1); }
  .moment--b{ margin-top: -10px; }
  .moment--d{ margin-top: -16px; }
  .moment--f{ margin-top: -8px; }
}
@media(max-width:979px){
  .moment{ z-index: auto; margin-top: 0; }
}

.viewer{
  width:min(920px, calc(100vw - 24px));
  border: none;
  padding: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 40px 120px rgba(42, 18, 48, .25);
  --viewer-open-ms: 220;
  --viewer-close-ms: 180;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  filter: blur(2px);
}
.viewer::backdrop{
  background: rgba(42, 18, 48, .45);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity calc(var(--viewer-open-ms) * 1ms) var(--ease-soft);
}
.viewer[open]{
  transition:
    opacity calc(var(--viewer-open-ms) * 1ms) var(--ease-soft),
    transform calc(var(--viewer-open-ms) * 1ms) var(--ease-pop),
    filter calc(var(--viewer-open-ms) * 1ms) var(--ease-soft);
}
.viewer.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.viewer.is-closing{
  transition:
    opacity calc(var(--viewer-close-ms) * 1ms) var(--ease-soft),
    transform calc(var(--viewer-close-ms) * 1ms) var(--ease-soft),
    filter calc(var(--viewer-close-ms) * 1ms) var(--ease-soft);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  filter: blur(2px);
}
.viewer.is-open::backdrop{ opacity: 1; }
.viewer__inner{position:relative}
.viewer__media{background: var(--cream); border-bottom: 1px solid rgba(255, 211, 232, .9)}
.viewer__media img,
.viewer__media video{
  width:100%;
  height:auto;
  display:block;
  max-height: 70vh;
  object-fit: contain;
}
.viewer__text{padding:14px 16px 18px}
.viewer__title{font-weight:900; font-size:18px}
.viewer__caption{margin-top:6px}
.card{
  grid-column:span 12;
  background:rgba(255, 255, 255, .86);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
@media(min-width:720px){ .card{grid-column:span 6;} }
@media(min-width:980px){ .card{grid-column:span 4;} }
.card__media{
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 140, 202, .16) 2px, rgba(255, 140, 202, 0) 2.6px),
    radial-gradient(circle at 42px 42px, rgba(255, 140, 202, .10) 2px, rgba(255, 140, 202, 0) 2.6px),
    linear-gradient(135deg, rgba(255, 233, 245, .92) 0%, rgba(255, 250, 252, .95) 60%);
  background-size: 60px 60px, 60px 60px, auto;
  border-bottom: 1px solid rgba(255, 211, 232, .9);
}
.card__media img,.card__media video{width:100%;height:260px;display:block;object-fit:cover}
.card__body{padding:12px 12px 14px}
.card__title{font-weight:700}
.card__caption{margin-top:6px;color:var(--muted)}
.card__meta{margin-top:10px;font-size:13px}
.empty{
  border:1px dashed rgba(255, 91, 183, .24);
  border-radius:18px;
  padding:18px;
  background:rgba(255, 255, 255, .70);
  box-shadow: 0 14px 30px rgba(255, 91, 183, .10);
}
.sep{border:0;border-top:1px solid var(--border);margin:24px 0}
.sep{
  position: relative;
}
.sep::after{
  content:"♡";
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -55%);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 91, 183, .18);
  background: rgba(255,255,255,.80);
  color: rgba(255, 91, 183, .95);
  font-weight: 900;
  letter-spacing: .22em;
  box-shadow: 0 14px 30px rgba(255, 91, 183, .10);
}
.socials-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  margin:10px 0 22px;
}
.social-card{
  grid-column: span 12;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  text-decoration:none;
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 140, 202, .14) 2px, rgba(255, 140, 202, 0) 2.6px),
    radial-gradient(circle at 42px 42px, rgba(255, 140, 202, .10) 2px, rgba(255, 140, 202, 0) 2.6px),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,245,251,.88) 100%);
  background-size: 60px 60px, 60px 60px, auto;
  box-shadow: 0 18px 45px rgba(255, 91, 183, .12), 0 2px 10px rgba(42, 18, 48, .08);
  transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), border-color .18s var(--ease-pop);
}
.social-card__left{display:flex;align-items:center;gap:12px;min-width:0}
.social-card__text{min-width:0}
.social-card__name{font-weight:900;letter-spacing:.2px}
.social-card__hint{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width: 72vw}
.social-card__go{
  font-weight:800;
  color: rgba(255, 91, 183, .95);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255, 91, 183, .20);
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.social-badge{
  width:42px;height:42px;
  border-radius:14px;
  position: relative;
  display:grid;
  place-items:center;
  font-weight:1000;
  letter-spacing:.4px;
  color: rgba(42, 18, 48, .92);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,0) 31%),
    linear-gradient(180deg, rgba(255, 175, 221, .9) 0%, rgba(255, 120, 195, .85) 100%);
  border: 1px solid rgba(255, 91, 183, .35);
  box-shadow: 0 14px 28px rgba(255, 91, 183, .16);
}
.social-badge::after{
  content:"♡";
  position:absolute;
  right:-6px;
  bottom:-6px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255, 91, 183, .22);
  color: rgba(255, 91, 183, .95);
  font-size: 12px;
  box-shadow: 0 10px 20px rgba(255, 91, 183, .14);
}
.social-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 91, 183, .50);
  box-shadow: 0 26px 60px rgba(255, 91, 183, .18), 0 3px 12px rgba(42, 18, 48, .10);
}
.social-card:active{ transform: translateY(-1px) scale(.995); }
.social-card:focus-visible{ outline: 3px solid rgba(255, 91, 183, .22); outline-offset: 3px; }
@media(min-width:720px){ .social-card{grid-column: span 6;} }
@media(min-width:980px){ .social-card{grid-column: span 4;} }

.socials-grid--compact .social-card{ padding:12px 12px; border-radius:16px; }
.socials-grid--compact .social-badge{ width:38px;height:38px;border-radius:13px; }
.socials-grid--compact .social-card__go{ padding:7px 10px; }
.footer{margin-top:40px;border-top:1px solid var(--border);padding:18px 0}
.pager{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px;gap:12px;flex-wrap:wrap}
.pager a{text-decoration:none;color:var(--accent)}
.pager a:hover{text-decoration:underline}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  body::before, body::after{ animation: none !important; }
  .moment{ opacity: 1; transform: none; }
}

/* Random hearts layer + cursor hearts (JS-driven) */
.bg-hearts{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.bg-heart{
  position: absolute;
  width: var(--s, 22px);
  height: var(--s, 22px);
  background-image: var(--heart-icon);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--o, .18);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg));
  filter: drop-shadow(0 10px 18px rgba(255, 91, 183, .10));
  will-change: transform;
}
/* Heart stream like falling stars (JS-driven) */
.heart-stream{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  contain: layout paint style;
}
.stream-heart{
  position: fixed;
  left: 0;
  top: 0;
  width: var(--hs, 18px);
  height: var(--hs, 18px);
  background-image: var(--heart-icon);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: var(--ho, .55);
  transform: translate3d(-9999px, -9999px, 0) rotate(var(--hr, 0deg)) scale(var(--hx, 1));
  filter: drop-shadow(0 12px 20px rgba(255, 91, 183, .14));
  will-change: transform, opacity;
}
.stream-heart::before{
  /* tail (shooting-star vibe) */
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tail, 46px));
  height: 2px;
  transform: translate(-6px, -50%) rotate(var(--tailr, 20deg));
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 91, 183, .00) 0%,
    rgba(255, 91, 183, .35) 45%,
    rgba(255, 255, 255, .55) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(.2px);
  opacity: .65;
  pointer-events:none;
}
.sparkle{
  position: fixed;
  left: 0;
  top: 0;
  width: var(--ss, 10px);
  height: var(--ss, 10px);
  pointer-events: none;
  z-index: 1999;
  opacity: .55;
  transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--sr));
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 35%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255, 143, 203, .75) 0%, rgba(255, 91, 183, .55) 100%);
  clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%);
  filter: drop-shadow(0 14px 20px rgba(255, 91, 183, .16));
  animation: sparkle-pop 1.1s var(--ease-soft) forwards;
}
@keyframes sparkle-pop{
  from{ opacity: .55; transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--sr)) scale(1); }
  to{ opacity: 0; transform: translate3d(var(--sx), calc(var(--sy) - 16px), 0) rotate(var(--sr)) scale(.7); }
}

@media (max-width: 719px){
  .heart-stream{ display: none; }
}