:root{
    --midnight:#150E2B;
    --dusk:#3B2467;
    --coral:#FF6B4A;
    --golden:#FFB84D;
    --lavender:#C9B6EA;
    --cream:#FFF6EC;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;background:var(--midnight);}
  body{
    font-family:'Sora',sans-serif;
    color:var(--cream);
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    user-select:none;
  }

  /* ---------- sky crossfade layers ---------- */
  .sky{position:fixed;inset:0;transition:opacity 900ms ease;will-change:opacity;}
  .sky.a{z-index:0;}
  .sky.b{z-index:1;opacity:0;}

  .stars{
    position:fixed;inset:0;z-index:2;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 80% 10%, #fff, transparent),
      radial-gradient(1px 1px at 60% 30%, #fff, transparent),
      radial-gradient(1px 1px at 30% 45%, #fff, transparent),
      radial-gradient(2px 2px at 90% 40%, #fff, transparent),
      radial-gradient(1px 1px at 45% 15%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 20% 60%, #fff, transparent),
      radial-gradient(1px 1px at 70% 55%, #fff, transparent);
    opacity:0;
    transition:opacity 1200ms ease;
    pointer-events:none;
  }
  body.starry .stars{opacity:.8;}

  .celestial{
    position:fixed;
    width:46px;height:46px;
    border-radius:50%;
    z-index:3;
    background:radial-gradient(circle at 35% 35%, #fff9ee, var(--golden) 70%);
    box-shadow:0 0 40px 10px rgba(255,184,77,.55);
    transition:left 900ms ease, bottom 900ms ease, opacity 900ms ease, background 900ms ease, box-shadow 900ms ease;
  }
  body.starry .celestial{
    background:radial-gradient(circle at 35% 35%, #fff, #e7e3ff 70%);
    box-shadow:0 0 25px 6px rgba(201,182,234,.6);
  }

  .mountains{
    position:fixed;left:0;right:0;bottom:0;z-index:4;
    width:100%;height:auto;display:block;
    pointer-events:none;
  }

  /* ---------- slides ---------- */
  .slides{position:relative;z-index:5;width:100%;height:100%;}
  .slide{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding:8vh 8vw 22vh;
    opacity:0;
    pointer-events:none;
    transition:opacity 500ms ease;
  }
  .slide.active{opacity:1;pointer-events:auto;}

  .eyebrow{
    font-family:'Sora',sans-serif;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--lavender);
    margin-bottom:1.1rem;
    opacity:.9;
  }
  .headline{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(2rem, 7vw, 3.6rem);
    line-height:1.08;
    letter-spacing:-.01em;
  }
  .headline em{font-style:italic;font-weight:400;color:var(--golden);}
  .sub{
    margin-top:1.3rem;
    font-family:'Sora',sans-serif;
    font-size:clamp(.95rem,2.4vw,1.15rem);
    line-height:1.6;
    color:var(--cream);
    opacity:.88;
    max-width:34rem;
  }
  .bignum{
    font-family:'Fraunces',serif;
    font-weight:900;
    font-size:clamp(4.5rem,22vw,9rem);
    line-height:.95;
    background:linear-gradient(180deg,#fff, var(--golden));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .date-badge{
    font-family:'Sora',sans-serif;
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.08em;
    padding:.5rem 1rem;
    border:1px solid rgba(255,246,236,.35);
    border-radius:999px;
    margin-bottom:1.5rem;
    color:var(--cream);
  }

  .placeholder-card{
    margin-top:1.6rem;
    width:min(88vw,26rem);
    border:1.5px dashed rgba(255,246,236,.45);
    border-radius:20px;
    padding:2.1rem 1.4rem;
    background:rgba(255,246,236,.05);
    backdrop-filter:blur(2px);
  }
  .placeholder-card .icon{font-size:1.6rem;margin-bottom:.6rem;display:block;}
  .placeholder-card .ph-title{
    font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--cream);
  }
  .placeholder-card .ph-hint{
    margin-top:.4rem;font-size:.85rem;color:var(--lavender);opacity:.85;
  }
  .photo-frame{
    margin-top:1.6rem;
    width:min(78vw,20rem);
    aspect-ratio:4/5;
    border-radius:18px;
    border:1.5px dashed rgba(255,246,236,.45);
    background:rgba(255,246,236,.05);
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    gap:.5rem;
  }
  .photo-frame .icon{font-size:2rem;opacity:.8;}
  .photo-frame span{font-size:.85rem;color:var(--lavender);}

  .tap-hint{
    position:fixed;bottom:3.2vh;left:0;right:0;z-index:6;
    text-align:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cream);opacity:.55;
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:.7}}

  /* progress bar */
  .progress{
    position:fixed;top:0;left:0;right:0;z-index:7;
    display:flex;gap:5px;padding:14px 14px 0;
  }
  .progress .seg{
    flex:1;height:3px;border-radius:2px;background:rgba(255,246,236,.25);overflow:hidden;
  }
  .progress .seg .fill{
    display:block;height:100%;width:0%;background:var(--cream);
    transition:width 200ms linear;
  }
  .progress .seg.done .fill{width:100%;}

  /* tap zones */
  .zone{position:fixed;top:0;bottom:0;z-index:8;width:38%;}
  .zone.left{left:0;}
  .zone.right{right:0;width:62%;}

  .signature{
    font-family:'Fraunces',serif;font-style:italic;font-weight:400;
    font-size:1.05rem;color:var(--golden);margin-top:2.2rem;letter-spacing:.02em;
  }

  /* ---------- milestones ---------- */
  .milestones{
    margin-top:1.6rem;
    display:flex;flex-direction:column;gap:.85rem;
    width:min(88vw,28rem);
  }
  .milestone{
    display:flex;align-items:center;gap:.75rem;
    font-family:'Sora',sans-serif;
    font-size:clamp(.9rem,2.2vw,1.05rem);
    color:var(--cream);
    opacity:.9;
    padding:.55rem 0;
    border-bottom:1px solid rgba(255,246,236,.1);
  }
  .milestone:last-child{border-bottom:none;}
  .milestone-icon{font-size:1.2rem;}

  /* ---------- spotlight / toast ---------- */
  .spotlight .headline em{color:var(--coral);}

  .toast .headline em{color:var(--golden);}
  .toast .sub{
    background:rgba(255,246,236,.04);
    border:1px solid rgba(255,246,236,.12);
    border-radius:20px;
    padding:1.8rem 1.6rem;
    max-width:30rem;
    backdrop-filter:blur(2px);
    font-style:italic;
  }

  @media (prefers-reduced-motion: reduce){
    .sky,.celestial,.stars,.slide{transition:none!important;animation:none!important;}
  }