:root{
  --pink:#ff8fab;
  --pink-deep:#ff4d8d;
  --pink-pale:#ffc2d1;
  --cream:#fffaf7;
  --cream-2:#fff1f5;
  --purple:#c49bff;
  --mint:#a7e8d8;
  --honey:#ffd166;
  --blue:#7ec8e3;
  --text:#5a2a3a;
  --card:#ffffff;
  --shadow: 0 12px 30px rgba(255,77,141,0.15), 0 4px 12px rgba(90,42,58,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Nunito', system-ui, sans-serif;
  color:var(--text);
  background-color: var(--cream);
  /* dotted cream pink pattern */
  background-image:
    radial-gradient(#ffb7d5 2.2px, transparent 2.4px),
    radial-gradient(#ffd6e7 1.6px, transparent 1.8px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  min-height:100vh;
  overflow-x:hidden;
}

/* floating hearts background */
.hearts{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1;
}
.hearts span{
  position:absolute; color:#ffb3c6; opacity:0.55; font-size:22px;
  animation: float 14s linear infinite;
}
.hearts span:nth-child(1){ left:5%; top:10%; animation-delay:0s; font-size:28px}
.hearts span:nth-child(2){ left:18%; top:65%; animation-delay:-2s; color:#ff8fab}
.hearts span:nth-child(3){ left:32%; top:20%; animation-delay:-5s}
.hearts span:nth-child(4){ left:48%; top:75%; animation-delay:-3s; color:#c49bff; opacity:0.4}
.hearts span:nth-child(5){ left:62%; top:12%; animation-delay:-7s}
.hearts span:nth-child(6){ left:78%; top:55%; animation-delay:-4s}
.hearts span:nth-child(7){ left:88%; top:22%; animation-delay:-6s; color:#ffd166}
.hearts span:nth-child(8){ left:42%; top:88%; animation-delay:-9s}
@keyframes float{
  0%{ transform: translateY(0) rotate(0deg) scale(1); opacity:0}
  10%{opacity:0.6}
  90%{opacity:0.6}
  100%{ transform: translateY(-100vh) rotate(12deg) scale(1.2); opacity:0}
}

/* header */
.hero{
  text-align:center;
  padding:46px 18px 18px;
  max-width:900px; margin:0 auto;
}
.badge{
  display:inline-block;
  background: white;
  border:2px solid #ffc2d1;
  color:#ff4d8d;
  border-radius:999px;
  padding:6px 16px;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:900;
  box-shadow: 0 6px 16px rgba(255,77,141,0.12);
}
.hero h1{
  margin:14px 0 6px;
  font-weight:900;
  font-size: clamp(38px, 7vw, 64px);
  line-height:1;
  letter-spacing:-0.02em;
  font-family: 'Nunito', sans-serif;
  text-shadow: 0 4px 0 #ffe5ec, 0 8px 24px rgba(255,77,141,0.25);
}
.hero h1 .pink{ color: var(--pink-deep); }
.hero h1 .cream{
  color: #ff8fab;
  -webkit-text-stroke: 2.5px #5a2a3a;
  paint-order: stroke fill;
}
.hero h1 .heart{ color:#ff4d8d; font-size:0.9em; display:inline-block; animation: pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.subtitle{
  margin:8px 0 18px;
  font-size:18px;
  color:#7a3a4e;
  font-family: 'Comfortaa', cursive;
}
.subtitle b{ color:#ff4d8d}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
}
.pill{
  border:none; border-radius:999px; padding:10px 18px; font-weight:800; cursor:pointer;
  font-family:inherit; font-size:14px;
  transition:.2s;
}
.pill.secondary{
  background:#5a2a3a; color:white; box-shadow: var(--shadow);
}
.pill.secondary:hover{ transform: translateY(-2px); background:#6d3447}
.pill.volume{
  background:white; border:2px solid #ffc2d1; display:flex; align-items:center; gap:8px; box-shadow: var(--shadow);
}
.pill.volume input{ accent-color:#ff4d8d; width:110px}
.hint{ font-size:12.5px; color:#8a5a6a; background: #fff0f5; padding:6px 10px; border-radius:999px; border:1px dashed #ffb3c6}
.hint code{ background:#ff4d8d; color:white; padding:1px 6px; border-radius:6px}

/* container & grid */
.container{ max-width:1150px; margin:0 auto; padding: 12px 18px 80px}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr;} }

/* card */
.card{
  background: var(--card);
  border-radius:28px;
  overflow:hidden;
  border: 2.5px solid #ffe5ec;
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s;
  position:relative;
}
.card:hover{ transform: translateY(-6px) rotate(-0.4deg); border-color: #ffb3c6; box-shadow: 0 18px 40px rgba(255,77,141,0.22)}
.card:focus-visible{ outline:3px solid #ff4d8d; outline-offset:2px}
.card.playing{
  border-color: #ff4d8d;
  box-shadow: 0 0 0 4px #ffd6e7, 0 18px 40px rgba(255,77,141,0.28);
  transform: translateY(-4px) scale(1.01);
}
.card.playing .img-wrap::after{
  content:"♡ now playing ♡";
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  background:#ff4d8d; color:white; font-size:12px; font-weight:900;
  padding:5px 12px; border-radius:999px; letter-spacing:0.04em;
  box-shadow: 0 4px 12px rgba(255,77,141,0.4);
}
.img-wrap{
  position:relative; aspect-ratio: 4 / 4.6; overflow:hidden; background: linear-gradient(135deg, #fff0f5, #ffe5ec);
}
.img-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease, filter .3s;
}
.card:hover img{ transform: scale(1.06)}
.card.playing img{ filter: saturate(1.15) brightness(1.02)}
.tag{
  position:absolute; top:12px; left:12px;
  font-size:12px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; color:white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tag.hot{ background:#ff4d8d}
.tag.purple{ background:#c49bff}
.tag.honey{ background:#ffb703; color:#5a2a3a}
.tag.blue{ background:#7ec8e3}
.tag.rose{ background:#fb6f92}
.tag.mint{ background:#6ec8a8}

.play-btn{
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px; border-radius:50%;
  border: none; background: rgba(255,255,255,0.92);
  color:#ff4d8d; font-size:22px;
  display:grid; place-items:center;
  box-shadow: 0 8px 20px rgba(255,77,141,0.35);
  opacity:0; transform: scale(0.85);
  transition:.2s;
  cursor:pointer;
}
.card:hover .play-btn{ opacity:1; transform: scale(1)}
.card.playing .play-btn{
  opacity:1; transform: scale(1);
  background: #ff4d8d; color:white;
  animation: throb .9s ease-in-out infinite;
}
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.bars{
  position:absolute; bottom:12px; right:12px;
  display:flex; gap:3px; align-items:end; height:22px;
  opacity:0; transition:.2s;
}
.bars i{
  width:4px; background:#ff4d8d; border-radius:999px; display:block; height:6px;
}
.card.playing .bars{ opacity:1}
.card.playing .bars i{ animation: bar 0.6s ease-in-out infinite}
.card.playing .bars i:nth-child(1){ animation-delay:0s; }
.card.playing .bars i:nth-child(2){ animation-delay:.12s; height:14px}
.card.playing .bars i:nth-child(3){ animation-delay:.24s; height:18px}
.card.playing .bars i:nth-child(4){ animation-delay:.06s; height:10px}
@keyframes bar{0%,100%{height:6px}50%{height:18px}}

.info{ padding:14px 16px 16px}
.info h3{
  margin:0; font-size:19px; font-weight:900; display:flex; align-items:center; gap:6px;
}
.info h3 span{ color:#ff4d8d}
.info p{ margin:6px 0 10px; font-size:13.8px; color:#8a5a6a; line-height:1.4; font-weight:600}
.meta{ display:flex; gap:8px; flex-wrap:wrap}
.meta span{
  font-size:12px; font-weight:800; background:#fff0f5; border:1px solid #ffd6e7;
  padding:4px 8px; border-radius:999px; color:#9a4a62;
}

/* howto */
.howto{
  margin-top:34px;
  background: white;
  border:2.5px solid #ffd6e7;
  border-radius:24px;
  padding:22px 20px;
  box-shadow: var(--shadow);
  text-align:center;
}
.howto h2{ margin:0 0 10px; font-size:20px; color:#ff4d8d}
.howto ol{ text-align:left; max-width:720px; margin:0 auto; color:#6b3444; font-weight:600; line-height:1.6}
.howto code{ background:#5a2a3a; color:#ffd6e7; padding:2px 7px; border-radius:8px; font-size:13px}
.howto .example{
  margin-top:12px; display:inline-block; background:#fff1f5; border:1.5px dashed #ffb3c6;
  padding:8px 12px; border-radius:12px; font-size:13px; color:#8a5a6a; font-family: ui-monospace, monospace;
}
.howto .example span{ color:#ff4d8d; font-weight:800}

/* player bar */
.player{
  position:fixed; left:50%; bottom:16px; transform: translateX(-50%);
  width:min(580px, calc(100% - 20px));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border:2.5px solid #ffd6e7;
  border-radius:999px;
  box-shadow: 0 12px 32px rgba(255,77,141,0.22), 0 4px 12px rgba(90,42,58,0.08);
  padding:10px 14px 10px 18px;
  display:flex; align-items:center; z-index:20;
}
.player-inner{ display:flex; justify-content:space-between; align-items:center; width:100%; gap:14px}
.now{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:14px; color:#5a2a3a; min-width:0}
.now .dot{ width:10px; height:10px; border-radius:50%; background:#ff4d8d; box-shadow:0 0 0 6px #ffd6e7; animation: dotpulse 1s infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 6px #ffd6e7}50%{box-shadow:0 0 0 9px #ffe5ec}}
#nowText{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mini{
  border:2px solid #ffd6e7; background:#ff4d8d; color:white; width:38px; height:38px; border-radius:50%;
  cursor:pointer; font-size:14px; font-weight:900; display:grid; place-items:center;
  transition:.18s; flex-shrink:0;
  box-shadow: 0 4px 10px rgba(255,77,141,0.25);
}
.mini:hover{ transform:scale(1.08); background:#ff6b9d; border-color:#ffb3c6}
.mini:active{ transform:scale(0.96)}
.player-controls{ display:flex; gap:10px; align-items:center}

/* loop pill — fixed */
.loop-btn{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid #ffc2d1;
  background: white;
  color:#9a4a62;
  padding:0 14px 0 12px;
  height:38px;
  border-radius:999px;
  font-family: inherit;
  font-size:13px; font-weight:900; letter-spacing:0.06em;
  cursor:pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 12px rgba(255,77,141,0.12);
  white-space:nowrap;
  position:relative;
}
.loop-btn:hover{ transform: translateY(-1px); border-color:#ff8fab; box-shadow: 0 6px 16px rgba(255,77,141,0.18)}
.loop-btn:active{ transform: scale(0.98)}
.loop-icon{ font-size:14px; line-height:1; transition: transform .3s}
.loop-text{ font-size:12.5px}
.loop-dot{
  width:8px; height:8px; border-radius:50%;
  background:#cdd1d8; margin-left:2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
  transition: background .22s, box-shadow .22s, transform .22s;
}
.loop-btn.active{
  background:#ff4d8d; color:white; border-color:#ff4d8d;
  box-shadow: 0 6px 16px rgba(255,77,141,0.32), 0 0 0 4px #ffe5ec;
}
.loop-btn.active .loop-dot{
  background:#fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.35), 0 0 8px rgba(255,255,255,0.8);
  animation: dotPulse 1.1s ease-in-out infinite;
}
.loop-btn.active .loop-icon{ animation: spinOnce .5s ease}
@keyframes dotPulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.25); opacity:0.9}}
@keyframes spinOnce{from{transform:rotate(-20deg) scale(0.9)} to{transform:rotate(0) scale(1)}}
.loop-btn:not(.active):hover .loop-icon{ transform: rotate(18deg)}

@media (max-width: 420px){
  .player{ padding:8px 10px 8px 14px}
  .now{ font-size:13px; gap:8px}
  .loop-text{ display:none}
  .loop-btn{ padding:0 12px; gap:6px}
  .loop-dot{ display:none}
}

.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(20px);
  background:#5a2a3a; color:white; padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:.3s; z-index:30;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0)}

footer{ text-align:center; padding: 16px 12px 90px; color:#9a6a7a; font-size:13px; font-weight:600}
footer span{ color:#ff4d8d}