:root{
    --rose:#e8a3b4; --rose-deep:#c9677f; --blush:#fde8ee; --blush-2:#f8d3dd;
    --rosegold:#b76e79; --silver:#c9ccd3; --silver-dark:#8d929c;
    --ink:#3d2a33; --muted:#7a6470; --card:#ffffffcc;
    --radius:22px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink); line-height:1.6;
    background:
      radial-gradient(1200px 600px at 50% -10%, #fff 0%, transparent 60%),
      linear-gradient(180deg,var(--blush) 0%, #fbeff3 45%, #eef0f4 100%);
    min-height:100vh;
  }
  /* soft glitter */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 64% 34%, #ffd6e2 50%, transparent 51%),
      radial-gradient(1px 1px at 30% 52%, #fff 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 88% 60%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 8% 76%, #ffd6e2 50%, transparent 51%),
      radial-gradient(2px 2px at 46% 88%, #fff 50%, transparent 51%);
    background-size: 320px 320px;
  }
  main,footer{position:relative; z-index:1}
  .wrap{width:min(1080px,100%); margin:0 auto; padding:0 20px}
  h1,h2,h3{font-family:"Cinzel",Georgia,serif; line-height:1.15; margin:0 0 .5em; letter-spacing:.02em}
  a{color:var(--rose-deep)}

  /* HERO */
  .hero{padding:34px 0 28px; text-align:center}
  .eyebrow{
    display:inline-flex; align-items:center; gap:.5em; font-weight:800; font-size:.78rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--rosegold);
    background:#fff9; border:1px solid #f1c6d1; padding:.45em 1em; border-radius:999px;
  }
  .hero h1{
    font-size:clamp(2.1rem, 9vw, 3.9rem); font-weight:800; margin:.55em 0 .3em;
    background:linear-gradient(100deg,#9c4f5e 0%,#d98a9c 30%,#b76e79 55%,#8d929c 80%,#5d616b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .lede{font-size:1.08rem; color:var(--muted); max-width:34ch; margin:0 auto}

  .coin-stage{perspective:1400px; margin:26px auto 10px; width:min(78vw,380px); aspect-ratio:1}
  .coin{
    position:relative; width:100%; height:100%; border-radius:50%;
    transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.7,.2,1);
    cursor:pointer; border:0; padding:0; background:none;
    animation:float 5s ease-in-out infinite;
  }
  .coin.flipped{transform:rotateY(180deg)}
  .coin .face{
    position:absolute; inset:0; border-radius:50%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    box-shadow:0 26px 50px -18px #9c4f5e88, 0 0 0 6px #ffffff66, 0 0 0 7px #e9b9c5;
  }
  .coin .face img{width:100%; height:100%; display:block; border-radius:50%}
  .coin .back{transform:rotateY(180deg)}
  .coin::after{ /* shine sweep */
    content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,#ffffff70 48%,transparent 60%);
    background-size:250% 100%; animation:shine 4.5s ease-in-out infinite; mix-blend-mode:soft-light;
  }
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
  @keyframes shine{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
  .flip-hint{
    margin-top:14px; font-size:.9rem; color:var(--muted); background:none; border:0; cursor:pointer; font:inherit;
    display:inline-flex; gap:.4em; align-items:center; padding:.5em 1em; border-radius:999px;
  }
  .flip-hint:hover{background:#fff8}

  /* CARDS */
  section.card{
    background:var(--card); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid #ffffff; border-radius:var(--radius);
    box-shadow:0 14px 40px -24px #9c4f5e66; padding:26px 22px; margin:0 0 18px;
  }
  section.card h2{font-size:1.45rem; color:#8a4655}
  section.card p{margin:.4em 0 .8em}
  .grid{display:grid; gap:18px}
  .tag{
    display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--silver-dark); margin-bottom:.4em;
  }
  /* placeholder to fill in */
  .todo{
    background:#fff3c4; border:1px dashed #d8b14a; color:#6b5418; border-radius:8px;
    padding:.05em .4em; font-style:italic;
  }

  .facts{list-style:none; padding:0; margin:.6em 0 0; display:grid; gap:10px}
  .facts li{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #f3dbe2; border-radius:14px; padding:12px 14px}
  .facts .ico{flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:1.05rem;
    background:linear-gradient(135deg,#f9d7df,#d8dbe1)}
  .facts b{display:block; font-size:.95rem}
  .facts span{color:var(--muted); font-size:.92rem}

  .editions{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
  .edition{text-align:center; background:#fff; border:1px solid #f3dbe2; border-radius:16px; padding:14px 10px}
  .edition img{width:100%; max-width:150px; aspect-ratio:1; border-radius:50%; box-shadow:0 10px 24px -12px #0005}
  .edition b{display:block; margin-top:8px; font-size:.95rem}
  .edition small{color:var(--muted)}

  .doge{
    background:linear-gradient(135deg,#fff6e0 0%,#fde8ee 100%) !important;
    display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  }
  .doge-badge{
    flex:0 0 72px; height:72px; border-radius:50%; display:grid; place-items:center;
    font-family:"Cinzel",serif; font-weight:800; font-size:2rem; color:#fff;
    background:radial-gradient(circle at 35% 30%,#f3d27a,#c2a633 70%); box-shadow:inset 0 -4px 0 #a88a22, 0 8px 20px -8px #a88a22;
  }
  .doge-body{flex:1 1 220px}
  .btn{
    display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:800;
    padding:.85em 1.3em; border-radius:999px; color:#fff;
    background:linear-gradient(135deg,#d98a9c,#b76e79); box-shadow:0 10px 24px -10px #b76e79;
  }
  .btn:active{transform:translateY(1px)}
  .btn.silver{background:linear-gradient(135deg,#b7bbc4,#7d828c); box-shadow:0 10px 24px -10px #7d828c}

  .partners-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:8px}
  .partner{display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid #f3dbe2; border-radius:16px; padding:16px}
  .partner b{display:block; color:#8a4655}

  footer{text-align:center; padding:26px 20px 40px; color:var(--muted); font-size:.88rem}
  footer .mini{width:42px; height:42px; border-radius:50%; display:block; margin:0 auto 10px; box-shadow:0 6px 14px -6px #0005}

  @media (min-width: 860px){
    .hero{display:grid; grid-template-columns:1.05fr 1fr; align-items:center; text-align:left; gap:30px; padding:56px 0 40px}
    .hero .lede{margin:0}
    .coin-stage{margin:0 auto; width:min(40vw,420px)}
    .hero-copy .actions{justify-content:flex-start}
    .grid.two{grid-template-columns:1.15fr 1fr}
    section.card{padding:32px 30px; margin:0}
    .grid{gap:22px; margin-bottom:22px}
  }
  .actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px}
  @media (prefers-reduced-motion: reduce){ .coin,.coin::after{animation:none} .coin{transition:none} }

  /* ===== TRAIL ===== */
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 0}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Cinzel",serif; font-weight:800}
  .brand img{width:34px; height:34px; border-radius:50%; box-shadow:0 4px 10px -4px #0005}
  .pill{font-size:.78rem; font-weight:800; color:var(--rosegold); background:#fff9; border:1px solid #f1c6d1; padding:.35em .8em; border-radius:999px; white-space:nowrap}
  .progress{margin:14px 0 4px}
  .progress-bar{height:10px; border-radius:999px; background:#ffffffaa; border:1px solid #f1c6d1; overflow:hidden}
  .progress-bar span{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#d98a9c,#b76e79 60%,#9aa0aa); transition:width .6s}
  .progress-meta{display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); margin-top:6px; font-weight:600}
  .steps{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; counter-reset:s}
  .steps a{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; background:#fff; border:1px solid #f3dbe2; border-radius:16px; padding:14px 14px; transition:transform .15s, box-shadow .15s}
  .steps a:hover{transform:translateY(-1px); box-shadow:0 10px 24px -16px #9c4f5e}
  .num{flex:0 0 38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:"Cinzel",serif; font-weight:800; color:#8a4655; background:linear-gradient(135deg,#f9d7df,#d8dbe1)}
  .steps li.done .num{background:linear-gradient(135deg,#d98a9c,#b76e79); color:#fff}
  .steps li.done .num::after{content:"✓"} .steps li.done .num b{display:none}
  .step-txt{flex:1; min-width:0} .step-txt b{display:block; font-size:1rem} .step-txt small{color:var(--muted)}
  .reward{display:inline-flex; align-items:center; gap:.35em; font-size:.74rem; font-weight:800; white-space:nowrap;
    color:#7a5a12; background:linear-gradient(135deg,#fff3c4,#f6e3a1); border:1px dashed #d8b14a; padding:.3em .65em; border-radius:999px}
  .reward.big{font-size:.9rem; padding:.55em 1em}
  .reward i{font-style:normal; font-weight:600; opacity:.8}
  .notice{font-size:.85rem; color:#6b5418; background:#fff8dc; border:1px solid #f0dc9a; border-radius:14px; padding:12px 14px; margin-top:14px}
  .step-hero{text-align:center; padding:22px 0 8px}
  .step-hero .kicker{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--rosegold)}
  .step-hero h1{font-size:clamp(1.8rem,7.5vw,2.8rem); margin:.35em 0 .4em; color:#8a4655}
  .step-hero .art{width:min(46vw,190px); aspect-ratio:1; border-radius:50%; margin:6px auto 14px; display:block; box-shadow:0 18px 36px -16px #9c4f5e88, 0 0 0 5px #ffffff88}
  .stepnav{display:flex; gap:10px; justify-content:space-between; align-items:center; margin:20px 0 6px}
  .btn.ghost{background:#fff; color:#8a4655; box-shadow:none; border:1px solid #f1c6d1}
  .btn.next{flex:1; justify-content:center; max-width:340px; margin-left:auto}
  .checklist{padding-left:0; list-style:none; margin:.6em 0 0; display:grid; gap:10px}
  .checklist li{background:#fff; border:1px solid #f3dbe2; border-radius:14px; padding:12px 14px}
  .checklist b{color:#8a4655}
  .claim{display:grid; gap:10px; margin-top:10px}
  .claim input{font:inherit; padding:.85em 1em; border-radius:14px; border:1px solid #e6c3cd; background:#f7f2f4; color:#9a8a91}
  .claim button{font:inherit; font-weight:800; padding:.85em 1em; border-radius:999px; border:0; background:#d9cfd3; color:#fff; cursor:not-allowed}
  .page{max-width:720px}
  @media (min-width:860px){ .page section.card{margin-bottom:22px} }

  .step-txt .reward{margin-top:6px}
  .chev{font-size:1.6rem; color:#d9a3b1; line-height:1}
  /* ===== Garden Love green accent ===== */
  :root{ --leaf:#5f9e6e; --leaf-deep:#3f7a50; --mint:#e6f3e8; }
  section.card.leafy{border-left:4px solid #9fcfab; background:linear-gradient(135deg,#ffffffd9 60%,#eef8f0d9)}
  section.card.leafy .tag{color:var(--leaf-deep)}
  .verse{margin:14px 0 4px; padding:14px 16px; border-radius:14px; background:var(--mint); border-left:4px solid var(--leaf);
    font-family:"Cinzel",Georgia,serif; font-weight:600; color:var(--leaf-deep); line-height:1.45}
  .btn.green{background:linear-gradient(135deg,#7dbb8a,#4f8c5f); box-shadow:0 10px 24px -10px #4f8c5f}
  footer .sym{letter-spacing:.3em; margin-bottom:4px}
  footer a{color:var(--leaf-deep)}
  .eyebrow{color:var(--leaf-deep); border-color:#cfe6d4}