* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    }

    :root {
      --bg1: #fff7fb;
      --bg2: #ffe3ee;
      --bg3: #edf8f0;
      --pink1: #ffb8d1;
      --pink2: #f39bbb;
      --text1: #7c4a61;
      --text2: #9a6880;
      --glass: rgba(255, 255, 255, 0.12);
      --glass-strong: rgba(255, 255, 255, 0.2);
      --border: rgba(255, 255, 255, 0.46);
      --shadow: 0 20px 60px rgba(210, 140, 170, 0.2);
      --refract-a: rgba(255, 255, 255, 0.72);
      --refract-b: rgba(255, 255, 255, 0.24);
      --block-opa-top: 0.08;
      --block-opa-bottom: 0.02;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.85) 0%, transparent 20%),
        radial-gradient(circle at 80% 15%, rgba(200, 255, 220, 0.22) 0%, transparent 22%),
        radial-gradient(circle at 78% 70%, rgba(255, 196, 220, 0.25) 0%, transparent 24%),
        linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
      color: var(--text1);
    }

    .bg-blur {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.35) 0%, transparent 25%),
        radial-gradient(circle at 82% 22%, rgba(255, 182, 193, 0.20) 0%, transparent 20%),
        radial-gradient(circle at 55% 80%, rgba(220, 255, 230, 0.18) 0%, transparent 28%);
      filter: blur(22px);
    }

    .petals {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    .petal {
      position: absolute;
      top: -12vh;
      width: 18px;
      height: 18px;
      background: radial-gradient(circle at 30% 30%, #fff8fb 0%, #ffd1e1 58%, #f5a8c2 100%);
      border-radius: 70% 0 70% 0;
      opacity: 0.85;
      box-shadow: 0 0 10px rgba(255, 182, 193, 0.22);
      will-change: transform;
    }

    @keyframes fall {
      0% {
        transform: translate3d(0, -12vh, 0) rotate(0deg);
      }
      25% {
        transform: translate3d(12px, 26vh, 0) rotate(90deg);
      }
      50% {
        transform: translate3d(-10px, 56vh, 0) rotate(180deg);
      }
      75% {
        transform: translate3d(14px, 84vh, 0) rotate(270deg);
      }
      100% {
        transform: translate3d(-6px, 114vh, 0) rotate(360deg);
      }
    }

    .wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      padding: 40px 16px 90px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      padding: 38px 26px 28px;
      text-align: center;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, var(--block-opa-top)) 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, var(--block-opa-bottom)) 100%
      );
      border: 1px solid var(--border);
      backdrop-filter: blur(8px) saturate(185%) brightness(1.05) contrast(1.04);
      -webkit-backdrop-filter: blur(8px) saturate(185%) brightness(1.05) contrast(1.04);
      box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.28) 0%, transparent 34%),
        radial-gradient(circle at bottom right, rgba(255, 204, 222, 0.08) 0%, transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
      z-index: 0;
    }

    .hero::after,
    .panel::after,
    .music-card::after {
      content: "";
      position: absolute;
      inset: -24% -10%;
      pointer-events: none;
      background: linear-gradient(
        120deg,
        transparent 10%,
        var(--refract-a) 30%,
        var(--refract-b) 44%,
        var(--refract-a) 55%,
        transparent 74%
      );
      filter: blur(8px);
      transform: translateX(-38%) skewX(-12deg);
      mix-blend-mode: screen;
      opacity: 0.58;
      z-index: 1;
      transition: transform 0.45s ease, opacity 0.45s ease;
      animation: liquidFlow 6.8s ease-in-out infinite;
    }

    .hero > *,
    .panel > *,
    .music-card > * {
      position: relative;
      z-index: 2;
    }

    .avatar-wrap {
      position: relative;
      width: 146px;
      height: 146px;
      margin: 0 auto 18px;
      border-radius: 50%;
      padding: 6px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 210, 228, 0.45));
      box-shadow:
        0 14px 34px rgba(243, 155, 187, 0.18),
        0 0 0 8px rgba(255, 255, 255, 0.10);
    }

    .avatar {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.75);
      background: rgba(255, 255, 255, 0.55);
    }

    .halo {
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
      filter: blur(12px);
      z-index: -1;
    }

    .badge {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      margin-bottom: 14px;
      font-size: 0.92rem;
      color: #a15e77;
      background: rgba(255, 255, 255, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.34);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    h1 {
      font-size: clamp(2rem, 6vw, 3.8rem);
      color: #b95f82;
      text-shadow: 0 4px 18px rgba(255, 255, 255, 0.55);
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }

    .subtitle {
      font-size: 1.04rem;
      color: var(--text2);
      margin-bottom: 10px;
    }

    .profile-line {
      font-size: 1rem;
      color: #906278;
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .social-btn {
      position: relative;
      overflow: hidden;
      text-decoration: none;
      color: #7e3e59;
      padding: 12px 20px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255, 176, 208, 0.3), rgba(166, 240, 207, 0.2));
      border: 1px solid rgba(255, 255, 255, 0.58);
      backdrop-filter: blur(14px) saturate(200%) brightness(1.05);
      -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.05);
      box-shadow:
        0 12px 28px rgba(223, 118, 166, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .social-btn::before {
      content: "";
      position: absolute;
      inset: -45% -55%;
      pointer-events: none;
      background: linear-gradient(
        112deg,
        transparent 10%,
        rgba(255, 255, 255, 0.86) 32%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.82) 62%,
        transparent 82%
      );
      transform: translateX(-130%) skewX(-18deg);
      mix-blend-mode: screen;
      opacity: 0.62;
      animation: socialFlow 3.2s ease-in-out infinite;
    }

    .social-btn > * {
      position: relative;
      z-index: 1;
    }

    .social-btn:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow:
        0 18px 36px rgba(223, 118, 166, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .icon-btn {
      width: 52px;
      height: 52px;
      padding: 0;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
    }

    .social-icon {
      width: 28px;
      height: 28px;
      display: block;
      object-fit: contain;
      background: transparent;
      mix-blend-mode: normal;
      filter: none;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .grid {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .panel {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 22px 20px;
      background: linear-gradient(
        145deg,
        rgba(255, 255, 255, var(--block-opa-top)),
        rgba(255, 255, 255, var(--block-opa-bottom))
      );
      border: 1px solid rgba(255, 255, 255, 0.36);
      backdrop-filter: blur(7px) saturate(180%) brightness(1.05);
      -webkit-backdrop-filter: blur(7px) saturate(180%) brightness(1.05);
      box-shadow:
        0 14px 30px rgba(214, 157, 184, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 72%);
      z-index: 0;
    }

    .panel h2 {
      font-size: 1.08rem;
      color: #b85f82;
      margin-bottom: 12px;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .panel p,
    .panel li {
      color: #7e5769;
      line-height: 1.82;
      font-size: 0.86rem;
    }

    .panel ul {
      list-style: none;
    }

    .panel li + li {
      margin-top: 4px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
      justify-content: center;
    }

    .tag {
      position: relative;
      overflow: hidden;
      padding: 8px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 208, 228, 0.28));
      border: 1px solid rgba(255, 255, 255, 0.52);
      color: #894d66;
      font-size: 0.9rem;
      box-shadow:
        0 0 12px rgba(255, 156, 201, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
      animation: tagGlow 2.8s ease-in-out infinite;
    }

    .tag::before {
      content: "";
      position: absolute;
      inset: -40% -30%;
      pointer-events: none;
      background: linear-gradient(
        110deg,
        transparent 18%,
        rgba(255, 255, 255, 0.68) 38%,
        rgba(255, 255, 255, 0.05) 52%,
        transparent 66%
      );
      transform: translateX(-120%) skewX(-16deg);
      animation: tagFlow 2.6s linear infinite;
    }

    @keyframes socialFlow {
      0% {
        transform: translateX(-150%) skewX(-18deg);
        opacity: 0;
      }
      8% {
        opacity: 0.55;
      }
      92% {
        opacity: 0.55;
      }
      100% {
        transform: translateX(160%) skewX(-18deg);
        opacity: 0;
      }
    }

    @keyframes liquidFlow {
      0% {
        transform: translateX(-42%) skewX(-12deg);
        opacity: 0.45;
      }
      50% {
        transform: translateX(22%) skewX(-12deg);
        opacity: 0.75;
      }
      100% {
        transform: translateX(-42%) skewX(-12deg);
        opacity: 0.45;
      }
    }

    .tags .tag:nth-child(2)::before {
      animation-delay: 0.45s;
    }

    .tags .tag:nth-child(3)::before {
      animation-delay: 0.9s;
    }

    .tags .tag:nth-child(4)::before {
      animation-delay: 1.35s;
    }

    @keyframes tagFlow {
      0% {
        transform: translateX(-120%) skewX(-16deg);
      }
      100% {
        transform: translateX(130%) skewX(-16deg);
      }
    }

    @keyframes tagGlow {
      0%,
      100% {
        box-shadow:
          0 0 10px rgba(255, 156, 201, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.56);
      }
      50% {
        box-shadow:
          0 0 18px rgba(255, 156, 201, 0.52),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }
    }

    .music-card {
      margin-top: 18px;
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 22px 20px;
      background: linear-gradient(
        145deg,
        rgba(255, 255, 255, var(--block-opa-top)),
        rgba(255, 255, 255, var(--block-opa-bottom))
      );
      border: 1px solid rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(7px) saturate(180%) brightness(1.05);
      -webkit-backdrop-filter: blur(7px) saturate(180%) brightness(1.05);
      box-shadow:
        0 16px 36px rgba(214, 157, 184, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.36);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .panel:hover,
    .music-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.62);
      box-shadow:
        0 22px 50px rgba(214, 157, 184, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.66);
    }

    .hero:hover::after,
    .panel:hover::after,
    .music-card:hover::after {
      opacity: 0.82;
      animation-duration: 4.2s;
    }

    .music-card h2 {
      color: #b85f82;
      margin-bottom: 12px;
      font-size: 1.08rem;
    }

    .spotify-embed {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.03);
    }

    .spotify-embed iframe {
      width: 100%;
      min-height: 352px;
      border: 0;
      display: block;
    }

    .footer {
      text-align: center;
      margin-top: 24px;
      color: rgba(132, 92, 111, 0.78);
      font-size: 0.82rem;
      line-height: 1.6;
      text-shadow: 0 1px 6px rgba(255,255,255,0.6);
    }

    .footer-main {
      display: block;
    }

    .footer-song {
      font-style: italic;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .footer-sub {
      margin-top: 2px;
      color: rgba(118, 87, 103, 0.85);
    }

    .footer-maker {
      color: #1f5a43;
      text-decoration: none;
      font-weight: 700;
    }

    .footer-maker:hover {
      text-decoration: underline;
    }

    .reveal-block {
      opacity: 0;
      transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: opacity, transform;
    }

    .reveal-block.from-top {
      transform: translateY(-54px) scale(0.985);
    }

    .reveal-block.from-bottom {
      transform: translateY(54px) scale(0.985);
    }

    .reveal-block.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .wrap {
        padding: 22px 12px 70px;
      }

      .hero {
        padding: 30px 18px 22px;
        border-radius: 28px;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      .panel,
      .music-card {
        border-radius: 24px;
      }

      .spotify-embed iframe {
        min-height: 300px;
      }

      .avatar-wrap {
        width: 124px;
        height: 124px;
      }

      .cta-row {
        gap: 10px;
      }

      .social-btn {
        width: 100%;
        text-align: center;
      }

      .social-btn.icon-btn {
        width: 52px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal-block,
      .reveal-block.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .tag,
      .tag::before,
      .social-btn,
      .social-btn::before {
        animation: none !important;
      }

      .hero::after,
      .panel::after,
      .music-card::after {
        animation: none !important;
      }
    }