@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

  :root{
    --bg-1:#fdf3f6;
    --bg-2:#f2eafb;
    --bg-3:#fff7ec;
    --pink:#ffd7e6;
    --pink-deep:#ee94b8;
    --pink-line:#e878a8;
    --cream:#fffaf3;
    --cat:#ffffff;
    --cat-shade:#e9e2f2;
    --cat-line:#5b4a67;
    --ink:#4a3752;
    --ink-soft:#816e8e;
    --green:#0c5c3d;
    --green-light:#8fd3ab;
    --gold:#d8ae57;
    --apricot:#f2a15e;
    --tomato:#e2604f;
    --card:#ffffff;
    --shadow: 0 14px 34px rgba(120, 90, 130, .14);
    --shadow-sm: 0 6px 16px rgba(120,90,130,.12);
    --radius: 26px;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 12% 8%, var(--bg-3), transparent 45%),
      radial-gradient(circle at 90% 15%, var(--pink), transparent 40%),
      linear-gradient(180deg, var(--bg-1), var(--bg-2) 55%, var(--bg-1));
    overflow-x:hidden;
    position:relative;
    -webkit-overflow-scrolling:touch;
  }
  h1,h2,h3,.display{
    font-family:'Fredoka', 'Quicksand', sans-serif;
    font-weight:600;
    color:var(--ink);
    margin:0;
  }
  p{ margin:0; line-height:1.6; color:var(--ink-soft); }
  section{ position:relative; padding:90px 20px; max-width:1080px; margin:0 auto; }
  .eyebrow{
    display:inline-block;
    font-family:'Quicksand',sans-serif;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--pink-line);
    background:rgba(238,148,184,.12);
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:14px;
  }
  .section-title{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom:10px; }
  .section-sub{ max-width:520px; margin-bottom:44px; font-size:1.02rem; }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  /* ---------- floating ambient background ---------- */
  #ambient{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .floatie{
    position:absolute;
    opacity:.55;
    animation-name:drift;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    will-change:transform;
  }
  @keyframes drift{
    0%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-38px) rotate(12deg); }
    100%{ transform:translateY(0) rotate(0deg); }
  }
  .fl-heart{ width:16px; height:16px; background:var(--pink-deep); position:relative; transform:rotate(45deg); border-radius:2px 12px 2px 12px; }
  .fl-heart:before,.fl-heart:after{ content:""; position:absolute; width:16px; height:16px; background:var(--pink-deep); border-radius:50%; }
  .fl-heart:before{ left:-8px; }
  .fl-heart:after{ top:-8px; }
  .fl-star{ width:14px; height:14px; background:var(--gold); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
  .fl-spark{ width:8px; height:8px; background:var(--pink-line); border-radius:50%; box-shadow:0 0 8px 2px rgba(232,120,168,.5); }
  .fl-petal{ width:14px; height:10px; background:var(--pink); border-radius:60% 10% 60% 10%; }

  /* ---------- top bar ---------- */
  .hero{ padding-top:70px; text-align:center; }
  .hero .eyebrow{ margin-bottom:18px; }
  .hero h1{ font-size:clamp(2.3rem, 6vw, 4rem); line-height:1.08; }
  .hero .tagline{ font-family:'Fredoka',sans-serif; font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--pink-line); margin-top:14px; }
  .hero-stage{ position:relative; max-width:340px; margin:44px auto 30px; }
  .hero-cat-wrap{ position:relative; z-index:2; }

  /* ---------- buttons ---------- */
  .btn{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:1.02rem;
    letter-spacing:.01em;
    border:none;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg, var(--pink-line), var(--pink-deep));
    padding:16px 34px;
    border-radius:999px;
    box-shadow:0 10px 26px rgba(232,120,168,.38);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    touch-action:manipulation;
    min-height:52px;
    -webkit-user-select:none;
    user-select:none;
  }
  .btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 30px rgba(232,120,168,.46); }
  .btn:active{ transform:translateY(0) scale(.98); }
  .btn.ghost{
    background:transparent;
    color:var(--pink-line);
    border:2px solid var(--pink-line);
    box-shadow:none;
  }
  .btn.green{ background:linear-gradient(135deg,var(--green), #12734d); box-shadow:0 10px 26px rgba(12,92,61,.32); }

  /* ---------- surprise card ---------- */
  .surprise-wrap{ text-align:center; margin-top:8px; }
  .surprise-card{
    max-width:560px;
    margin:34px auto 0;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:40px 34px;
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateY(26px) scale(.96);
    max-height:0;
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), max-height .6s ease, padding .6s ease, margin .6s ease;
    pointer-events:none;
  }
  .surprise-card.show{
    opacity:1; transform:translateY(0) scale(1); max-height:900px; pointer-events:auto;
  }
  .surprise-card:before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 90% -10%, var(--pink) 0%, transparent 55%);
    z-index:0;
  }
  .surprise-card h3{ position:relative; z-index:1; font-size:1.5rem; margin-bottom:14px; }
  .surprise-card p{ position:relative; z-index:1; font-size:1.05rem; color:var(--ink); }
  .surprise-card .sign{ display:block; margin-top:18px; font-family:'Fredoka',sans-serif; color:var(--pink-line); font-size:1.05rem; }

  /* ---------- cat svg system ---------- */
  .cat-svg{ display:block; }
  .cat-body{ fill:var(--cat); stroke:var(--cat-line); stroke-width:2.4; }
  .cat-ear-inner{ fill:var(--pink); }
  .cat-blush{ fill:var(--pink-deep); opacity:.55; }
  .cat-eye{ fill:var(--cat-line); }
  .cat-mouth{ fill:none; stroke:var(--cat-line); stroke-width:2.2; stroke-linecap:round; }
  .cat-whisker{ stroke:var(--cat-line); stroke-width:1.6; stroke-linecap:round; opacity:.6; }
  .cat-card .cat-svg{ animation:catBob 4.5s ease-in-out infinite; }
  @keyframes catBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
  .cat-blink{ animation:blink 5.2s ease-in-out infinite; transform-origin:center; }
  @keyframes blink{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.08);} }
  .cat-tail{ animation:tailwag 3.4s ease-in-out infinite; transform-origin:bottom left; }
  @keyframes tailwag{ 0%,100%{ transform:rotate(0deg);} 50%{ transform:rotate(8deg);} }

  /* ---------- cat cafe grid ---------- */
  .cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px; }
  .cat-card{
    background:var(--card); border-radius:22px; box-shadow:var(--shadow-sm);
    padding:22px 16px 20px; text-align:center; position:relative; cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  .cat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
  .cat-card .name{ font-family:'Fredoka',sans-serif; font-weight:600; margin-top:10px; font-size:1rem; }
  .cat-card .role{ font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
  .speech{
    position:absolute; top:-6px; left:50%; transform:translate(-50%,-100%) scale(.8);
    background:#fff; border-radius:16px; padding:8px 14px; font-size:.82rem; font-weight:600;
    color:var(--pink-line); box-shadow:var(--shadow-sm); white-space:nowrap;
    opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none;
    font-family:'Quicksand',sans-serif;
  }
  .speech:after{ content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:12px; height:12px; background:#fff; clip-path:polygon(0 0,100% 0,50% 100%); }
  .cat-card.pop .speech{ opacity:1; transform:translate(-50%,-108%) scale(1); }
  .cat-card.pop .cat-svg{ animation:catPop .5s ease; }
  @keyframes catPop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.12) rotate(-3deg);} 100%{ transform:scale(1);} }

  /* ---------- food section ---------- */
  .food-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
  .food-card{
    background:var(--card); border-radius:22px; padding:26px 20px; text-align:center;
    box-shadow:var(--shadow-sm); cursor:pointer; position:relative;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  .food-card:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow); }
  .food-card svg{ width:76px; height:76px; }
  .food-card h4{ font-family:'Fredoka',sans-serif; margin:12px 0 4px; font-size:1.05rem; }
  .food-msg{
    margin-top:8px; font-size:.86rem; color:var(--pink-line); font-weight:700; min-height:18px;
    opacity:0; transform:translateY(6px); transition:all .3s ease;
  }
  .food-card.show .food-msg{ opacity:1; transform:translateY(0); }

  /* ---------- timeline ---------- */
  .timeline-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
  .tl-card{
    background:var(--card); border-radius:20px; padding:24px 20px; box-shadow:var(--shadow-sm);
    cursor:pointer; position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  .tl-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .tl-num{ font-family:'Fredoka',sans-serif; font-size:.78rem; color:var(--pink-line); font-weight:700; letter-spacing:.08em; }
  .tl-title{ font-family:'Fredoka',sans-serif; font-size:1.08rem; margin-top:8px; }
  .tl-detail{
    font-size:.88rem; color:var(--ink-soft); margin-top:10px; max-height:0; overflow:hidden;
    opacity:0; transition:all .35s ease;
  }
  .tl-card.open .tl-detail{ max-height:200px; opacity:1; }
  .tl-hint{ font-size:.75rem; color:var(--pink-line); margin-top:10px; font-weight:600; }

  /* ---------- cake / candles ---------- */
  .cake-section{ text-align:center; }
  .cake-wrap{ display:inline-block; position:relative; margin-top:20px; }
  .candles{ display:flex; justify-content:center; gap:6px; margin-bottom:2px; }
  .candle{
    box-sizing:content-box;
    width:10px; height:34px; background:linear-gradient(180deg,var(--pink),var(--pink-deep)); border-radius:4px;
    position:relative; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none;
    padding:0 9px; background-clip:content-box;
  }
  .flame{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    width:10px; height:16px; background:radial-gradient(circle at 50% 70%, #ffe28a, #f2a15e 70%);
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    animation:flick 1s ease-in-out infinite alternate;
    transition:opacity .3s ease, transform .3s ease;
  }
  @keyframes flick{ 0%{ transform:translateX(-50%) scale(1) rotate(-3deg);} 100%{ transform:translateX(-50%) scale(1.1) rotate(3deg);} }
  .candle.out .flame{ opacity:0; transform:translateX(-50%) scale(.3); }
  .candle.out:after{ content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:2px; height:10px; background:#bbb; opacity:.5; }
  .cake-body{ margin-top:6px; }
  .wish-msg{
    margin-top:22px; font-family:'Fredoka',sans-serif; font-size:1.15rem; color:var(--pink-line);
    opacity:0; transform:translateY(10px); transition:all .5s ease;
  }
  .wish-msg.show{ opacity:1; transform:translateY(0); }
  .make-wish-hint{ font-size:.85rem; color:var(--ink-soft); margin-top:14px; }

  /* ---------- final section ---------- */
  .final{ text-align:center; padding-bottom:calc(130px + env(safe-area-inset-bottom)); }
  .final h2{ font-size:clamp(2rem,5vw,3rem); }
  .final .sub{ max-width:480px; margin:14px auto 0; font-size:1.05rem; }
  .final .btn{ margin-top:34px; }
  .made-by{
    margin-top:38px; font-family:'Fredoka',sans-serif; font-size:.88rem; color:var(--pink-line);
    opacity:.75; letter-spacing:.02em;
  }

  /* ---------- floating corner cat ---------- */
  #corner-cat{
    position:fixed;
    bottom:calc(22px + env(safe-area-inset-bottom));
    right:calc(22px + env(safe-area-inset-right));
    z-index:50;
    width:64px; height:64px; border-radius:50%; background:var(--card);
    box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:2px solid var(--pink); transition:transform .3s ease;
    touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  #corner-cat:hover{ transform:scale(1.08) rotate(-4deg); }
  #corner-cat svg{ width:42px; height:42px; }
  #corner-bubble{
    position:fixed;
    bottom:calc(96px + env(safe-area-inset-bottom));
    right:calc(22px + env(safe-area-inset-right));
    z-index:50; max-width:230px;
    background:#fff; border-radius:18px 18px 4px 18px; padding:14px 16px; font-size:.88rem;
    font-weight:600; color:var(--pink-line); box-shadow:var(--shadow); font-family:'Quicksand',sans-serif;
    opacity:0; transform:translateY(10px) scale(.9); transform-origin:bottom right;
    transition:all .35s cubic-bezier(.2,.8,.2,1); pointer-events:none;
  }
  #corner-bubble.show{ opacity:1; transform:translateY(0) scale(1); }

  /* ---------- confetti canvas ---------- */
  #confetti-canvas{ position:fixed; inset:0; pointer-events:none; z-index:60; }

  /* ---------- misc deco ---------- */
  .divider{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 8px; }
  .divider span{ width:6px; height:6px; border-radius:50%; background:var(--pink-line); opacity:.5; }

  @media (max-width:600px){
    section{ padding:56px 16px; }
    .hero{ padding-top:56px; }
    .hero-stage{ max-width:230px; margin:32px auto 24px; }
    .btn{ width:100%; max-width:320px; }
    .cat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .cat-card{ padding:16px 10px 14px; }
    .food-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .food-card{ padding:18px 12px; }
    .food-card svg{ width:56px; height:56px; }
    .timeline-grid{ grid-template-columns:1fr; }
    .surprise-card{ padding:30px 22px; }
    #corner-cat{ width:56px; height:56px; }
    #corner-cat svg{ width:36px; height:36px; }
    .final{ padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  }

  @media (max-width:360px){
    .cat-grid, .food-grid{ grid-template-columns:1fr 1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  }