:root{
      --bgA:#fff7fb;
      --bgB:#fff;
      --card:#ffffff;
      --ink:#1a1a1a;
      --muted:#5b5b5b;
      --border:#ead6df;
      --shadow:0 14px 30px rgba(0,0,0,.08);
      --hot:#ff4f7b;
      --hot2:#ff7b5c;
      --radius:22px;
      --max:1100px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(255,79,123,.12), transparent 60%),
        radial-gradient(820px 480px at 85% 10%, rgba(255,123,92,.10), transparent 60%),
        linear-gradient(180deg, var(--bgA), var(--bgB));
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    a{ color:inherit; }
    img{ max-width:100%; height:auto; display:block; }

    .page-shell{
      width:min(var(--max), calc(100% - 32px));
      margin:0 auto;
      padding:24px 0 42px;
    }

    /* HERO */
    .hero{
      text-align:center;
      padding:34px 18px 26px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.85);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .hero-logo{
      width: min(360px, 85vw);
      height:auto;
      display:block;
      margin: 0 auto 14px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,79,123,.10);
      border:1px solid rgba(255,79,123,.18);
      letter-spacing:.12em;
      font-weight:800;
      font-size:.82rem;
      text-transform:uppercase;
      margin-bottom: 12px;
      color:#b0123a;
    }

    .pill-dot{
      width:10px; height:10px; border-radius:50%;
      background: linear-gradient(135deg, var(--hot), var(--hot2));
      box-shadow: 0 0 0 4px rgba(255,79,123,.12);
    }

    .title{
      margin: 8px 0 6px;
      font-size: clamp(1.6rem, 4.8vw, 2.6rem);
      letter-spacing:.06em;
      font-weight:800;
    }

    .subtitle-main{
      margin: 0 0 10px;
      font-size: clamp(1.0rem, 3.2vw, 1.25rem);
      font-weight:700;
      color:#333;
    }

    .subtitle-body{
      margin: 0 auto;
      max-width: 70ch;
      color: var(--muted);
      font-weight:400;
      line-height:1.6;
      font-size: clamp(.95rem, 2.8vw, 1.05rem);
    }

    .hero-buttons{
      margin-top: 18px;
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn-primary, .btn-ghost{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 18px;
      border-radius: 999px;
      text-decoration:none;
      font-weight:800;
      border:1px solid transparent;
      min-height: 44px;
    }

    .btn-primary{
      background: linear-gradient(135deg, var(--hot), var(--hot2));
      color:white;
      box-shadow: 0 12px 18px rgba(255,79,123,.18);
    }

    .btn-ghost{
      background: rgba(255,255,255,.9);
      border-color: rgba(0,0,0,.10);
      color: #1a1a1a;
    }

    /* Race image section */
    .race-section{
      margin: 18px 0 0;
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      background:#fff;
    }

    /* Shared section card look */
    .section-card{
      margin: 22px 0;
      padding: 18px;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow);
    }

    .section-title{
      margin: 0 0 14px;
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: var(--hot);
      text-transform: uppercase;
      text-align:center;
    }

    /* Audio */
    audio{
      width: min(720px, 100%);
      max-width: 100%;
      display:block;
      margin: 0 auto;
    }

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

    .a-btn{
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.15);
      background: #fff;
      cursor: pointer;
      font-weight: 800;
      font-size: 0.95rem;
      min-height:44px;
    }
    .a-btn.primary{
      border:none;
      background: linear-gradient(135deg, var(--hot), var(--hot2));
      color:white;
      box-shadow: 0 10px 18px rgba(255, 79, 123, 0.20);
    }

    /* Share grid */
    .share-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:12px;
    }
    .share-grid a{
      padding:10px 18px;
      border-radius:999px;
      font-weight:800;
      text-decoration:none;
      min-height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:white;
    }

    /* Layout */
    .layout{
      margin-top: 22px;
      display:grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    @media (min-width: 980px){
      .layout{
        grid-template-columns: 1.35fr .85fr;
        align-items:start;
      }
    }

    .card{
      border:1px solid var(--border);
      background: rgba(255,255,255,.92);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .card-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }

    .card-title{
      margin: 0;
      font-size: 1.25rem;
      font-weight: 900;
    }

    .badge{
      padding: 8px 12px;
      border-radius:999px;
      background: rgba(255,79,123,.12);
      border:1px solid rgba(255,79,123,.22);
      color: #b0123a;
      font-weight: 900;
      font-size:.85rem;
      white-space:nowrap;
    }

    /* ✅ Scrolling lyrics block (keeps your theme) */
    .lyrics-scroll{
      max-height: 520px;
      overflow:auto;
      padding: 12px;
      border-radius: 16px;
      border:1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.75);
    }

    .lyrics-section{ margin: 14px 0; }
    .lyrics-label{
      font-weight: 900;
      color: var(--hot);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:.85rem;
      margin-bottom: 6px;
    }
    .lyrics-text{
      white-space: pre-line;
      line-height: 1.6;
      color: #2f2f2f;
      background: rgba(0,0,0,.03);
      border:1px solid rgba(0,0,0,.06);
      border-radius: 14px;
      padding: 14px;
    }

    .side-heading{
      margin: 0 0 10px;
      color: var(--hot);
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight: 900;
      font-size: .9rem;
    }
    .side-title{
      margin: 0 0 12px;
      font-size: 1.25rem;
      line-height: 1.25;
      font-weight: 900;
    }
    .side-copy{
      margin: 0 0 14px;
      color: var(--muted);
      line-height: 1.6;
    }

    .side-list{
      list-style:none;
      padding:0;
      margin: 0 0 14px;
      display:grid;
      gap: 12px;
    }
    .side-list li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      padding: 12px;
      border-radius: 16px;
      background: rgba(0,0,0,.03);
      border:1px solid rgba(0,0,0,.06);
    }
    .side-list span{ font-size: 1.1rem; margin-top:2px; }
    .side-list strong{ color:#111; }

    .tagline{
      margin: 0;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,79,123,.10);
      border:1px solid rgba(255,79,123,.20);
      color: #1a1a1a;
      line-height: 1.5;
    }

    footer{
      margin-top: 18px;
      text-align:center;
      color: rgba(0,0,0,.55);
      font-size: .92rem;
      line-height: 1.45;
      padding: 16px 6px 0;
    }

    :target { scroll-margin-top: 14px; }
  body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}