:root{
    --ink:#16273f;
    --ink-soft:#5d7291;
    --card:#fcfdff;
    --blue:#2f7dff;
    --blue-deep:#1560d8;
    --sky:#9ecbff;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { min-height:100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 18px 14px 40px;
    background:
      radial-gradient(1000px 620px at 12% -6%,  #d8ebff 0%, transparent 62%),
      radial-gradient(880px 560px at 96% 4%,   #ccf0ff 0%, transparent 58%),
      radial-gradient(900px 700px at 50% 108%, #cfe4ff 0%, transparent 60%),
      linear-gradient(170deg,#eef7ff 0%,#f4fbff 55%,#e6f1ff 100%);
    background-attachment: fixed;
  }
  /* floating hearts */
  .hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
  .hearts span{
    position:absolute; bottom:-14vh; font-size:22px; opacity:0;
    animation:float linear infinite;
    filter:drop-shadow(0 3px 8px rgba(60,130,240,.30));
  }
  @keyframes float{
    0%   {transform:translateY(0) rotate(0deg) scale(.85); opacity:0}
    12%  {opacity:.85}
    80%  {opacity:.7}
    100% {transform:translateY(-118vh) rotate(28deg) scale(1.08); opacity:0}
  }
  @media (prefers-reduced-motion: reduce){ .hearts{display:none} }
  .card {
    position: relative; z-index: 1;
    width: 100%;
    max-width: 400px;
    margin: auto 0;
    background: var(--card);
    border: 1px solid #e3eefc;
    border-radius: 24px;
    padding: 22px 22px 26px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(47,125,255,.16), 0 4px 14px rgba(22,39,63,.06);
  }
  .art {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    box-shadow: 0 12px 34px rgba(21,96,216,.22);
  }
  h1 { font-size: 1.55rem; margin-top: 18px; letter-spacing: .3px; color: var(--ink); }
  .artist { color: var(--ink-soft); font-size: 1rem; margin-top: 4px; font-weight: 600; }
  .pitch {
    color: var(--ink-soft); font-size: .98rem; line-height: 1.5;
    margin-top: 14px;
  }
  .cta {
    display: block;
    margin-top: 18px;
    background: #1ed760;
    color: #072a12;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
    padding: 16px 10px;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(30,215,96,.35);
    transition: transform .08s ease;
  }
  .cta:active { transform: scale(.97); }
  .cta .sp { display:inline-block; vertical-align:-4px; margin-right:8px; }
  .fine {
    color: var(--ink-soft); font-size: .85rem; margin-top: 13px; line-height: 1.45;
  }
  .alt {
    display: inline-block; margin-top: 14px;
    color: var(--ink-soft); font-size: .85rem;
  }
  .alt a { color: var(--blue-deep); font-weight: 700; }

.art{height:auto}.cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;cursor:pointer}.cta svg{flex:0 0 23px}.cta.apple{margin-top:12px;background:#16273f;color:#fff;box-shadow:0 10px 26px rgba(22,39,63,.15)}.cta:focus-visible{outline:3px solid #1560d8;outline-offset:4px}.cta:hover{transform:translateY(-1px)}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hearts{display:none}}