@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

  *{margin:0;padding:0;box-sizing:border-box}

  :root{
    --bg:#faf8f6;--surface:#ffffff;
    --ink:#1a1a1a;--ink-soft:#4a4a4a;--ink-muted:#8a8a8a;--ink-faint:#c4c4c4;
    --line:#e8e6e3;
    --accent:#e8b4c4;--accent-deep:#c77d95;
    --accent-2:#b8a5d9;--accent-2-deep:#8b5cf6;
    --accent-bg:#f5ebee;--accent-2-bg:#efebf5;
    /* New brand accent (replaces netflix red) — pink → purple */
    --nf-pink:#ff4fb8;--nf-purple:#8b3fe8;
    --nf-grad:linear-gradient(100deg,#ff4fb8 0%,#a855f7 50%,#8b3fe8 100%);
    --warm:#f0d5a8;--green:#a3d977;
    --radius-lg:20px;--radius-md:12px;
  }

  html,body{
    width:100%;height:100%;
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);color:var(--ink);
    /* CRITICAL: no scroll anywhere */
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:'ss01','cv11';
    line-height:1.5;
  }

  /* Soft ambient background glow */
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(circle at 20% 30%, #e8b4c412 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, #b8a5d910 0%, transparent 40%);
  }

  /* ===== PAGE SYSTEM ===== */
  .page{
    position:fixed;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(20px,5vh,50px) clamp(20px,4vw,40px);
    gap:clamp(18px,3vh,28px);
    opacity:0;pointer-events:none;
    transform:scale(.96) translateY(14px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    z-index:1;
    /* Never allow scroll on a page */
    overflow:hidden;
  }
  .page.active{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);z-index:10}
  .page.exit-left{opacity:0;transform:scale(.92) translateX(-50px)}

  /* ===== TYPE SCALE ===== */
  .display{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(2rem,5.5vw,3.8rem);line-height:1.08;letter-spacing:-0.025em;
  }
  .display em{font-style:italic;font-weight:300}
  .h2{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.18;letter-spacing:-0.02em;
  }
  .h2 em{font-style:italic;font-weight:300}
  .eyebrow{
    font-size:.7rem;font-weight:500;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ink-muted);
  }
  .lede{
    font-size:clamp(.95rem,1.8vw,1.1rem);color:var(--ink-soft);
    max-width:520px;line-height:1.6;
  }

  /* ===== ANIMATIONS ===== */
  @keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.08)}70%{transform:scale(1)}}
  @keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes rubberBand{0%{transform:scale(1,1)}30%{transform:scale(1.25,.75)}40%{transform:scale(.75,1.25)}50%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.05)}75%{transform:scale(1.05,.95)}100%{transform:scale(1,1)}}
  @keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
  @keyframes popIn{0%{opacity:0;transform:scale(.5) translateY(30px)}60%{opacity:1;transform:scale(1.06) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
  @keyframes zoomBounce{0%{opacity:0;transform:scale(.3) rotate(-8deg)}50%{opacity:1;transform:scale(1.1) rotate(2deg)}75%{transform:scale(.96) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  @keyframes gentleFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}
  @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

  /* Entrance animation for simple elements */
  .page.active .anim{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
  .page.active .anim-d1{animation-delay:.08s}
  .page.active .anim-d2{animation-delay:.18s}
  .page.active .anim-d3{animation-delay:.28s}
  .page.active .anim-d4{animation-delay:.38s}

  /* ===== PAGE 1 — HERO ===== */
  .p-hero{background:linear-gradient(135deg,#fdf2f8,#faf5ff,#f5f3ff)}
  .p-hero::before{
    content:'';position:absolute;inset:-50%;
    background:radial-gradient(ellipse at 30% 50%,#f9a8d422,transparent 50%),
               radial-gradient(ellipse at 70% 30%,#c4b5fd1a,transparent 50%);
    animation:aurora 8s ease-in-out infinite alternate;pointer-events:none;
  }
  @keyframes aurora{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-3%,2%) rotate(3deg)}}
  .hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px);text-align:center;max-width:900px;padding:0 16px}
  .hero-eyebrow{font-size:clamp(.72rem,1.4vw,.85rem);letter-spacing:.28em}
  .hero-title{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(3.2rem,13vw,6rem);line-height:.98;letter-spacing:-0.03em;
    color:var(--ink);text-wrap:balance;margin:0;
  }
  .hero-ch{display:inline-block;will-change:transform,opacity}
  .hero-cat{margin-left:.18em}
  .hero-cat iconify-icon{font-size:.82em;vertical-align:-.08em;display:inline-block;transform-origin:50% 90%;animation:catWiggle 3.6s ease-in-out infinite}
  @keyframes catWiggle{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(-9deg)}88%{transform:rotate(9deg)}94%{transform:rotate(-4deg)}}
  @media (prefers-reduced-motion: reduce){ .hero-cat iconify-icon{animation:none} }
  .hero-sub{
    font-size:clamp(1rem,2.1vw,1.3rem);color:var(--ink-soft);
    max-width:560px;line-height:1.55;
  }
  .hero-note{font-size:.84rem;color:var(--ink-muted);max-width:460px;line-height:1.5;margin-top:2px;font-style:italic}
  .hero-note iconify-icon{color:var(--accent-2-deep);vertical-align:-2px}

  /* Typewriter cursor — blinks next to currently typing element */
  .type-cursor{
    display:inline-block;width:3px;height:.85em;
    background:var(--accent-deep);vertical-align:middle;
    margin-left:4px;animation:cblink .6s step-end infinite;
  }
  .type-cursor.hide{display:none}
  .typed{white-space:pre-wrap}
  /* Orange icon — pops in after title finishes typing */
  .orange-pop{
    display:inline-block;vertical-align:middle;margin-left:10px;
    font-size:.9em;
    opacity:0;transform:scale(.3) rotate(-20deg);
    transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .orange-pop.show{opacity:1;transform:scale(1) rotate(0)}
  /* Hide helper used for next button until typing finishes */
  .hide{opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
  .hide.show{opacity:1;pointer-events:auto;transform:translateY(0)}
  /* (hero-icon circle removed — replaced by inline orange icon after typing) */

  /* Rocket launch button — flies RIGHT then explodes */
  .rocket-btn{position:relative;overflow:visible}
  .rocket-icon{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .rocket-btn:hover .rocket-icon{transform:translate(4px,-2px) rotate(30deg)}
  .rocket-btn .rocket-icon{transform:rotate(45deg)} /* Icon points up-right by default */
  .rocket-btn.launching{
    animation:rocketShake .35s ease-in-out, rocketFlyRight .9s .35s cubic-bezier(.4,.02,.7,.9) forwards;
    pointer-events:none;
  }
  @keyframes rocketShake{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(-4px,2px) rotate(-2deg)}
    40%{transform:translate(4px,-2px) rotate(2deg)}
    60%{transform:translate(-3px,3px) rotate(-2deg)}
    80%{transform:translate(3px,-3px) rotate(2deg)}
  }
  @keyframes rocketFlyRight{
    0%  {transform:translate(0,0) rotate(0) scale(1);opacity:1}
    15% {transform:translate(30px,-8px) rotate(-4deg) scale(1);opacity:1}
    70% {transform:translate(calc(60vw),-40px) rotate(-8deg) scale(.95);opacity:1}
    95% {transform:translate(calc(75vw),-50px) rotate(-8deg) scale(.9);opacity:1}
    100%{transform:translate(calc(75vw),-50px) rotate(-8deg) scale(.9);opacity:0}
  }
  /* Rocket exhaust — streams behind the button as it flies right */
  .rocket-exhaust{
    position:fixed;z-index:99998;pointer-events:none;
    width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle,#fde68a,#f59e0b 40%,#ef444455,transparent 80%);
    animation:exhaustTrail 1s ease-out forwards;
    filter:blur(1.5px);
  }
  @keyframes exhaustTrail{
    0%{opacity:.95;transform:scale(1)}
    100%{opacity:0;transform:scale(.2) translate(-50px,20px)}
  }

  /* ===== LILY BLAST — full-screen WHITE flower explosion ===== */
  /* Pure white flash to mark the moment of impact */
  .lily-flash{
    position:fixed;inset:0;z-index:99997;pointer-events:none;
    background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 25%, rgba(255,255,255,.25) 50%, transparent 80%);
    animation:lilyFlash 2.6s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes lilyFlash{
    0%  {opacity:0;transform:scale(.3)}
    20% {opacity:1;transform:scale(1.2)}
    60% {opacity:.5}
    100%{opacity:0;transform:scale(1.4)}
  }

  .lily{
    position:fixed;z-index:99999;pointer-events:none;
    will-change:transform,opacity;
    filter:drop-shadow(0 3px 12px rgba(0,0,0,.1)) brightness(1.05);
    color:#fff;
  }
  .lily.sym{
    color:#fff;
    text-shadow:0 0 3px rgba(0,0,0,.15),0 3px 12px rgba(0,0,0,.18);
    font-family:'Fraunces',serif;font-weight:300;
  }
  /* Tint emoji flowers toward white with mix-blend + filter */
  .lily.emo{filter:drop-shadow(0 3px 12px rgba(0,0,0,.12)) saturate(.2) brightness(1.35)}
  /* Lily radiating outward from explosion center */
  @keyframes lilyBurst{
    0%  {transform:translate(0,0) rotate(0) scale(0);opacity:0}
    12% {opacity:1;transform:translate(calc(var(--dx)*.18), calc(var(--dy)*.18)) scale(1.25)}
    75% {opacity:1}
    100%{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9);opacity:0}
  }
  /* Lilies raining down across the full viewport width */
  @keyframes lilyRain{
    0%  {transform:translateY(-12vh) translateX(0) rotate(0);opacity:0}
    8%  {opacity:1}
    92% {opacity:1}
    100%{transform:translateY(112vh) translateX(var(--drift,0px)) rotate(var(--spin,540deg));opacity:0}
  }
  /* Lilies sweeping sideways across the screen */
  @keyframes lilyDrift{
    0%  {transform:translate(-10vw, var(--sy,0px)) rotate(0);opacity:0}
    10% {opacity:1}
    90% {opacity:1}
    100%{transform:translate(110vw, var(--sy,0px)) rotate(var(--spin,360deg));opacity:0}
  }

  /* ===== "PLAY OUR SONG" FLOATING BUTTON ===== */
  .song-toggle{
    position:fixed;bottom:22px;right:22px;z-index:99999;
    padding:10px 18px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-soft);
    border-radius:100px;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
    box-shadow:0 4px 18px rgba(199,125,149,.12);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,color .3s,background .3s,box-shadow .3s;
  }
  .song-toggle:hover{transform:scale(1.06);border-color:var(--accent-deep);color:var(--accent-deep);box-shadow:0 6px 24px rgba(199,125,149,.22)}
  .song-toggle iconify-icon{font-size:1.05rem;color:var(--accent-deep)}
  .song-toggle.playing{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-deep);pointer-events:none}
  .song-toggle.playing iconify-icon{animation:musicBob 1.2s ease-in-out infinite}
  @keyframes musicBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-10deg)}75%{transform:translateY(-3px) rotate(10deg)}}

  /* ===== LYRICS OVERLAY ===== */
  .lyrics-overlay{
    position:fixed;inset:0;z-index:99990;
    background:rgba(26,26,26,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:28px;
    opacity:0;pointer-events:none;
    transition:opacity .5s ease;
  }
  .lyrics-overlay.show{opacity:1;pointer-events:auto}
  .lyrics-card{
    background:var(--surface);padding:clamp(28px,5vw,48px);border-radius:24px;
    max-width:640px;width:100%;min-height:180px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    border:1px solid var(--line);
  }
  .lyric-line{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;text-align:center}
  .lyric-word{
    display:inline-block;
    opacity:0;transform:scale(.3) translateY(20px);
    transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1);
  }
  .lyric-word.show{opacity:1;transform:scale(1) translateY(0)}
  .lyric-line.intro .lyric-word,
  .lyric-line.outro .lyric-word{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:clamp(1rem,2.2vw,1.3rem);color:var(--ink-muted);
  }
  .lyric-line.lyric .lyric-word{
    font-family:'Fraunces',serif;font-weight:500;font-style:italic;
    font-size:clamp(1.4rem,3.4vw,2rem);color:var(--accent-deep);letter-spacing:-0.01em;
  }
  .lyric-line.cringe .lyric-word{
    font-family:'Fraunces',serif;font-weight:700;
    font-size:clamp(1.8rem,4.5vw,2.8rem);color:var(--ink);letter-spacing:.04em;
    animation:cringeBounce .45s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes cringeBounce{
    0%{transform:scale(.2) rotate(-10deg)}
    50%{transform:scale(1.2) rotate(5deg)}
    100%{transform:scale(1) rotate(0)}
  }

  /* ===== NEXT BUTTON ===== */
  .btn-next{
    margin-top:8px;padding:14px 34px;border:none;border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.95rem;font-weight:600;
    letter-spacing:.004em;cursor:pointer;color:#fff;
    background:linear-gradient(100deg,#ff4fb8 0%,#a855f7 55%,#8b3fe8 100%);
    display:inline-flex;align-items:center;gap:9px;
    box-shadow:0 8px 22px rgba(139,63,232,.28);
    transition:transform .4s var(--ease-silk), box-shadow .4s var(--ease-smooth), filter .4s;
  }
  .btn-next:hover{transform:translateY(-2px);box-shadow:0 13px 32px rgba(139,63,232,.42);filter:saturate(1.08)}
  .btn-next:active{transform:translateY(0) scale(.98)}
  .btn-next iconify-icon{font-size:1.05rem}
  .btn-next .btn-arrow{transition:transform .4s var(--ease-silk)}
  .btn-next:hover .btn-arrow{transform:translateX(4px)}

  /* ===== PAGE 2 — CASE FILE ===== */
  .p-board{background:var(--bg)}
  .board-wrap{max-width:720px;width:100%;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
  .board-header{display:flex;flex-direction:column;gap:10px}
  .board-list{display:flex;flex-direction:column;width:100%;margin-top:6px}
  .board-item{
    display:grid;grid-template-columns:40px 1fr;gap:20px;align-items:center;
    padding:clamp(14px,2.2vh,22px) 0;border-top:1px solid var(--line);
  }
  .board-item:last-child{border-bottom:1px solid var(--line)}
  /* board-item entrance handled by Anime.js (animateCards) */
  .board-icon{
    width:42px;height:42px;border-radius:12px;background:var(--accent-bg);
    color:var(--accent-deep);display:flex;align-items:center;justify-content:center;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .board-item:hover .board-icon{transform:scale(1.08) rotate(-4deg)}
  .board-icon iconify-icon{font-size:1.35rem}
  /* Themed icon tiles per observation */
  .icon-fruit{background:#fbe4f0;color:#d6336c}
  .icon-fruit iconify-icon{font-size:1.6rem}
  .icon-nails{background:#efe4fb;color:#7c2fd6}
  .icon-milk{background:#f6e8fb;color:#a21caf}
  .board-content h3{
    font-family:'Fraunces',serif;font-weight:500;font-size:1.15rem;
    margin-bottom:6px;letter-spacing:-0.01em;line-height:1.35;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .board-content p{color:var(--ink-soft);font-size:.92rem;line-height:1.58}
  .board-content p em{color:var(--accent-deep);font-style:italic}
  /* Small tag next to heading */
  .tag-pill{
    font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);
    background:var(--accent-bg);padding:3px 9px;border-radius:100px;
  }
  /* Pink/purple highlight in heading */
  .hl-yellow{
    position:relative;display:inline-block;color:#a21caf;font-weight:600;
    padding:0 4px;
  }
  .hl-yellow::before{
    content:'';position:absolute;inset:8% -2% 0 -2%;z-index:-1;
    background:#f5b8e6;opacity:.6;border-radius:3px;transform:skew(-4deg);
  }
  /* Inline reference pill */
  .ref-pill{
    display:inline-flex;align-items:center;gap:5px;
    font-family:'Inter',sans-serif;font-size:.72rem;font-weight:500;
    letter-spacing:.01em;color:#7c2fd6;
    background:#efe4fb;padding:3px 9px;border-radius:100px;
    border:1px solid #d6b8f5;margin-left:6px;vertical-align:middle;
  }
  .ref-pill iconify-icon{font-size:.85rem}

  /* Inline icon next to text */
  .inline-icon{font-size:1rem;vertical-align:middle;margin-left:2px;display:inline-block}

  /* Polaroid photo frame */
  .polaroid{
    display:inline-flex;flex-direction:column;align-items:center;
    background:#fff;padding:8px 8px 16px;border-radius:4px;
    box-shadow:0 6px 16px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
    transform:rotate(-2.5deg);transform-origin:top left;
    margin-top:12px;max-width:180px;
    transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
  }
  .polaroid:hover{transform:rotate(-1deg) translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.08)}
  .polaroid img{
    width:160px;height:180px;object-fit:cover;border-radius:2px;
    background:var(--accent-bg);
  }
  .polaroid-placeholder{
    display:none;width:160px;height:180px;border-radius:2px;
    flex-direction:column;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,#fff4e6,#fed7aa);
    color:#9a3412;font-family:'Inter',sans-serif;font-size:.7rem;text-align:center;
    padding:12px;line-height:1.35;
  }
  .polaroid-placeholder iconify-icon{font-size:2.4rem}
  .polaroid-placeholder code{background:rgba(255,255,255,.5);padding:1px 6px;border-radius:4px;font-size:.72rem}
  .polaroid-caption{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:.78rem;color:var(--ink-muted);margin-top:10px;letter-spacing:.01em;
  }

  /* ===== MAGGI EXPLOSION BUTTON ===== */
  .maggi-btn{position:relative;overflow:visible}
  .maggi-icon{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .maggi-btn:hover .maggi-icon{transform:rotate(-12deg) scale(1.1)}
  .maggi-btn.exploding{
    animation:maggiShake .35s ease-in-out, maggiBurst .6s .35s cubic-bezier(.5,-0.2,.8,.2) forwards;
    pointer-events:none;
  }
  @keyframes maggiShake{
    0%,100%{transform:translate(0,0)}
    20%{transform:translate(-4px,2px) rotate(-3deg)}
    40%{transform:translate(4px,-2px) rotate(3deg)}
    60%{transform:translate(-3px,3px) rotate(-3deg)}
    80%{transform:translate(3px,-3px) rotate(3deg)}
  }
  @keyframes maggiBurst{
    0%{transform:scale(1);opacity:1}
    40%{transform:scale(1.3);opacity:1;filter:brightness(1.4)}
    100%{transform:scale(.3);opacity:0}
  }
  /* ===== MAGGI PACKET — brand-accurate styled mini-packet ===== */
  .maggi-packet{
    position:fixed;z-index:99999;pointer-events:none;
    width:72px;height:96px;border-radius:8px;
    /* Maggi yellow background with red accent edge */
    background:
      linear-gradient(180deg, #fde047 0%, #facc15 72%, #eab308 100%);
    box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 -2px 0 rgba(0,0,0,.12),inset 0 2px 0 rgba(255,255,255,.3);
    border:2px solid #dc2626;
    will-change:transform,opacity;
    overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:6px 4px;
  }
  /* Red "MAGGI" logo lozenge at top */
  .maggi-packet::before{
    content:'MAGGI';
    display:block;width:56px;height:18px;
    background:#dc2626;color:#fff;border-radius:3px;
    font-family:'Inter',sans-serif;font-size:.6rem;font-weight:900;letter-spacing:.08em;
    text-align:center;line-height:18px;
    box-shadow:0 1px 0 rgba(0,0,0,.15);
  }
  /* Sub-text in middle */
  .maggi-packet::after{
    content:'2-Minute';
    display:block;color:#dc2626;font-family:'Inter',sans-serif;
    font-size:.55rem;font-weight:800;letter-spacing:.03em;
    margin-top:4px;text-transform:lowercase;
  }
  /* Alt packet — Masala variant */
  .maggi-packet.masala{
    background:linear-gradient(180deg, #fde047 0%, #f97316 75%, #dc2626 100%);
  }
  .maggi-packet.masala::after{content:'Masala'}
  /* Noodle bowl particle */
  .maggi-bowl{
    position:fixed;z-index:99999;pointer-events:none;
    font-size:2.2rem;
    filter:drop-shadow(0 4px 10px rgba(245,158,11,.5));
    will-change:transform,opacity;
  }
  /* Burst outward from button */
  @keyframes maggiFly{
    0%  {transform:translate(0,0) rotate(0) scale(0);opacity:0}
    8%  {opacity:1}
    14% {transform:translate(calc(var(--dx) * .2), calc(var(--dy) * .12)) rotate(calc(var(--rot) * .15)) scale(1.15);opacity:1}
    85% {opacity:1}
    100%{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.92);opacity:0}
  }
  /* Rain from top — second wave of packets */
  @keyframes maggiRain{
    0%  {transform:translateY(-14vh) translateX(0) rotate(0) scale(1);opacity:0}
    8%  {opacity:1}
    92% {opacity:1}
    100%{transform:translateY(112vh) translateX(var(--drift,0px)) rotate(var(--spin,540deg));opacity:0}
  }
  /* Yellow brand-color flash */
  .maggi-flash{
    position:fixed;inset:0;z-index:99997;pointer-events:none;
    background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),
      rgba(253,224,71,.85) 0%, rgba(250,204,21,.5) 25%, rgba(234,88,12,.25) 50%, transparent 80%);
    animation:maggiFlash 2.8s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes maggiFlash{
    0%{opacity:0;transform:scale(.3)}
    18%{opacity:1;transform:scale(1.2)}
    60%{opacity:.5}
    100%{opacity:0;transform:scale(1.5)}
  }

  /* ===== PAGE 3 — QUICK STATS ===== */
  .p-rapid{background:linear-gradient(180deg,var(--bg),#fdf2f8)}
  .rapid-wrap{max-width:720px;width:100%;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .rapid-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
    overflow:hidden;width:100%;margin-top:6px;
  }
  @media(max-width:520px){.rapid-grid{grid-template-columns:1fr}}
  .rapid-card{
    background:var(--surface);padding:clamp(20px,3vh,32px) clamp(18px,3vw,24px);
    display:flex;flex-direction:column;gap:6px;
    /* VISIBLE by default — animation overlays pop-in effect but doesn't leave blank */
    transition:background .3s;
  }
  .rapid-card:hover{background:var(--accent-bg)}
  .page.active .rapid-card{animation:zoomBounce .8s cubic-bezier(.34,1.56,.64,1) both}
  .page.active .rapid-card:nth-child(1){animation-delay:.25s}
  .page.active .rapid-card:nth-child(2){animation-delay:.37s}
  .page.active .rapid-card:nth-child(3){animation-delay:.49s}
  .page.active .rapid-card:nth-child(4){animation-delay:.61s}
  .rc-icon{
    width:36px;height:36px;border-radius:10px;background:var(--accent-2-bg);
    color:var(--accent-2-deep);display:flex;align-items:center;justify-content:center;
    margin-bottom:6px;
  }
  .rc-icon iconify-icon{font-size:1.1rem}
  .rc-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
  .rc-val{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:500;letter-spacing:-0.01em;color:var(--ink);line-height:1.3}
  .rc-note{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:.82rem;color:var(--ink-muted);margin-top:4px}

  /* ===== PAGE 8 — ETHNIC LOADING BAR + BG ICONS ===== */
  .ethnic-bg{
    position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  }
  .ethnic-bg-icon{
    position:absolute;opacity:.12;
    animation:ethnicDrift linear infinite;
    filter:drop-shadow(0 2px 4px rgba(199,125,149,.1));
  }
  @keyframes ethnicDrift{
    0%  {transform:translateY(110vh) rotate(0) scale(.7);opacity:0}
    10% {opacity:.18}
    90% {opacity:.12}
    100%{transform:translateY(-10vh) rotate(360deg) scale(1);opacity:0}
  }
  .ethnic-loader{
    margin-top:8px;width:100%;max-width:360px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .loader-label{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:1.1rem;color:var(--ink-muted);
  }
  .loader-icon{font-size:1.5rem}
  .loader-dots{display:inline-flex;gap:1px}
  .loader-dots span{
    opacity:0;animation:dotBlink 1.5s ease-in-out infinite;
  }
  .loader-dots span:nth-child(1){animation-delay:0s}
  .loader-dots span:nth-child(2){animation-delay:.25s}
  .loader-dots span:nth-child(3){animation-delay:.5s}
  @keyframes dotBlink{
    0%,20%,100%{opacity:0}
    50%{opacity:1}
  }
  .loader-track{
    width:100%;height:10px;background:var(--line);
    border-radius:10px;overflow:hidden;position:relative;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
  }
  .loader-fill{
    height:100%;width:0%;
    background:linear-gradient(90deg,#ff4fb8,#d6409f,#a855f7,#8b3fe8);
    background-size:200% 100%;
    border-radius:10px;
    animation:loaderShimmer 2s linear infinite;
    transition:width .4s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 0 14px rgba(236,72,153,.4);
  }
  @keyframes loaderShimmer{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }
  .loader-percent{
    font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;
    color:var(--accent-deep);letter-spacing:.04em;
  }

  /* ===== HER FAVORITES SHOWER (P4 → P5) ===== */
  .her-fav{
    position:fixed;z-index:99999;pointer-events:none;
    will-change:transform,opacity;
    filter:drop-shadow(0 3px 8px rgba(199,125,149,.18));
  }
  @keyframes herFavBurst{
    0%  {transform:translate(0,0) rotate(0) scale(0);opacity:0}
    12% {transform:translate(calc(var(--dx)*.2), calc(var(--dy)*.2)) rotate(calc(var(--rot)*.2)) scale(1.2);opacity:1}
    100%{transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.9);opacity:0}
  }
  @keyframes herFavRain{
    0%  {transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}
    8%  {opacity:1}
    92% {opacity:1}
    100%{transform:translateY(112vh) translateX(var(--drift,0px)) rotate(var(--spin,540deg));opacity:0}
  }

  /* ===== JOKE CARD ===== */
  .joke-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:clamp(28px,4vw,44px) clamp(26px,4vw,48px);width:100%;max-width:680px;margin:22px auto 0;position:relative;
    box-shadow:0 10px 34px rgba(199,125,149,.12);
  }
  .joke-card .joke-header{
    display:flex;align-items:center;gap:9px;margin-bottom:18px;
    font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);
  }
  .joke-card .joke-header iconify-icon{color:var(--accent-deep);font-size:1.25rem}
  .joke-setup,.joke-punch{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.4;color:var(--ink);
    margin-bottom:10px;
  }
  .jr-wait{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:clamp(1rem,2.2vw,1.25rem);color:var(--accent-2-deep);margin:6px 0;
    animation:jrPulse 1.1s ease-in-out infinite;transition:opacity .4s ease;
  }
  .jr-wait.jr-fade{opacity:0}
  @keyframes jrPulse{0%,100%{opacity:.5}50%{opacity:1}}
  .joke-setup em,.joke-punch em{font-style:italic;color:var(--accent-deep);font-weight:500}
  .hl-pun{
    font-family:'Fraunces',serif;font-style:italic;font-weight:600;
    color:#a21caf;background:#fbe8ff;padding:1px 8px;border-radius:6px;
    border:1px dashed #e9a5f5;display:inline-block;margin:0 2px;
  }
  /* Joke reveal button + hidden punchline (pause-then-reveal) */
  .joke-hidden{display:none}
  .joke-punch:not(.joke-hidden), .joke-note:not(.joke-hidden){animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
  .joke-reveal{
    margin-top:8px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    padding:8px 18px;border-radius:999px;border:1px solid var(--line);
    background:linear-gradient(135deg, var(--accent-bg), var(--accent-2-bg));
    font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;color:var(--accent-2-deep);
    transition:transform .25s var(--ease-silk), box-shadow .25s;
  }
  .joke-reveal:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(139,63,232,.18)}
  .joke-reveal iconify-icon{font-size:1rem}
  .joke-reveal .jr-wait{letter-spacing:.02em}
  .joke-circle{
    color:var(--accent-deep);font-size:1.5rem;vertical-align:-3px;margin-left:8px;
    animation:gentleFloat 3s ease-in-out infinite;
  }
  .joke-note{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.85rem;margin-top:8px;line-height:1.5;
  }

  /* ===== PUSHUP BUTTON (Page 3 → Page 4) — improved visibility ===== */
  .pushup-btn{
    position:relative;overflow:visible;transform-origin:50% 90%;
    min-width:170px;
  }
  .pushup-btn .btn-body-text{display:inline-flex;align-items:center;gap:8px}
  /* Head circle — sticks out left side to make it look like a person */
  .pushup-btn .pushup-head{
    position:absolute;left:-22px;top:50%;
    transform:translateY(-50%) scale(0);
    width:24px;height:24px;border-radius:50%;
    background:var(--ink);opacity:0;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s;
  }
  .pushup-btn .pushup-head::after{
    content:'';position:absolute;left:6px;top:8px;
    width:3px;height:3px;border-radius:50%;background:#fff;
    box-shadow:8px 0 0 #fff;
  }
  .pushup-btn.alive .pushup-head{opacity:1;transform:translateY(-50%) scale(1)}
  /* Stick limbs — much thicker (5px) and longer (28px) for visibility */
  .pushup-btn .limb{
    position:absolute;background:var(--ink);width:5px;height:0;
    border-radius:3px;opacity:0;
    transition:height .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;
    transform-origin:top center;
  }
  .pushup-btn .arm-l{left:34px;bottom:-30px}
  .pushup-btn .arm-r{left:64px;bottom:-30px}
  .pushup-btn .leg-l{right:64px;bottom:-30px}
  .pushup-btn .leg-r{right:34px;bottom:-30px}
  /* Tiny "feet" — bigger now */
  .pushup-btn .limb::after{
    content:'';position:absolute;width:9px;height:9px;border-radius:50%;
    background:var(--ink);bottom:-4px;left:-2px;
  }
  /* Limbs sprout — taller */
  .pushup-btn.alive .limb{opacity:1;height:30px}
  /* Pushup motion — much bigger body dip */
  @keyframes pushupBody{
    0%,100%{transform:translateY(-2px) rotate(-1deg)}
    50%{transform:translateY(20px) rotate(1deg)}
  }
  @keyframes armBend{
    0%,100%{height:30px}
    50%{height:14px}
  }
  @keyframes legHold{
    0%,100%{transform:rotate(0deg)}
    50%{transform:rotate(-12deg)}
  }
  @keyframes pushupHeadBob{
    0%,100%{transform:translateY(-50%) scale(1)}
    50%{transform:translateY(calc(-50% + 18px)) scale(1)}
  }
  .pushup-btn.pushing{animation:pushupBody .6s ease-in-out 4}
  .pushup-btn.pushing .arm-l,
  .pushup-btn.pushing .arm-r{animation:armBend .6s ease-in-out 4}
  .pushup-btn.pushing .leg-l,
  .pushup-btn.pushing .leg-r{animation:legHold .6s ease-in-out 4}
  .pushup-btn.pushing .pushup-head{animation:pushupHeadBob .6s ease-in-out 4}
  /* Counter — pops above with each rep */
  .pushup-counter{
    position:fixed;z-index:99998;pointer-events:none;
    font-family:'Fraunces',serif;font-weight:700;font-size:1.6rem;
    color:var(--accent-deep);
    animation:counterPop .8s cubic-bezier(.34,1.56,.64,1) forwards;
    text-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  @keyframes counterPop{
    0%{opacity:0;transform:translate(-50%,0) scale(.4)}
    30%{opacity:1;transform:translate(-50%,-30px) scale(1.2)}
    100%{opacity:0;transform:translate(-50%,-60px) scale(1)}
  }
  /* Stand-up + flex */
  @keyframes standJump{
    0%{transform:translateY(0) scale(1)}
    35%{transform:translateY(-32px) scale(1.08)}
    65%{transform:translateY(-14px) scale(1.1)}
    100%{transform:translateY(0) scale(1.05)}
  }
  .pushup-btn.standing{animation:standJump .55s cubic-bezier(.2,.7,.2,1) forwards}
  .pushup-btn.standing .arm-l{transform:rotate(-145deg);transform-origin:top center;height:30px}
  .pushup-btn.standing .arm-r{transform:rotate(145deg);transform-origin:top center;height:30px}
  /* Flex emoji pop */
  .pushup-btn .flex-icon{
    position:absolute;top:-44px;left:50%;
    transform:translateX(-50%) scale(0) rotate(-20deg);
    opacity:0;font-size:2rem;pointer-events:none;
    transition:opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1);
  }
  .pushup-btn.flexing .flex-icon{
    opacity:1;transform:translateX(-50%) scale(1) rotate(0);
    animation:flexBob 1.2s ease-in-out infinite;
  }
  @keyframes flexBob{
    0%,100%{transform:translateX(-50%) scale(1) rotate(-3deg)}
    50%{transform:translateX(-50%) scale(1.1) rotate(3deg)}
  }
  /* Sweat drop near button during pushups */
  .pushup-btn .sweat-drop{
    position:absolute;top:-12px;right:14px;
    width:8px;height:10px;background:#7dd3fc;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    transform:rotate(180deg);opacity:0;
    transition:opacity .3s;
  }
  .pushup-btn.pushing .sweat-drop{
    opacity:1;animation:sweatDrip 1.1s ease-in-out infinite;
  }
  @keyframes sweatDrip{
    0%{transform:rotate(180deg) translateY(0);opacity:1}
    80%{opacity:1}
    100%{transform:rotate(180deg) translateY(20px);opacity:0}
  }
  /* Sparkles when flexing */
  .flex-spark{
    position:fixed;z-index:99998;pointer-events:none;
    color:var(--warm);font-size:1.1rem;
    animation:flexSparkOut 1s ease-out forwards;
  }
  @keyframes flexSparkOut{
    0%{opacity:0;transform:scale(.4) translate(0,0)}
    30%{opacity:1;transform:scale(1) translate(calc(var(--sx,0)*.4), calc(var(--sy,0)*.4))}
    100%{opacity:0;transform:scale(.6) translate(var(--sx,0), var(--sy,0))}
  }

  /* ===== PAGE 4 — MARRY TYPING ===== */
  .p-marry{background:linear-gradient(180deg,#fdf2f8,var(--bg))}
  .marry-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:800px;text-align:center}
  .spell-msg{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:clamp(1rem,2.4vw,1.4rem);color:var(--ink-muted);min-height:28px;transition:opacity .3s;
  }
  .type-zone{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(2.1rem,6.5vw,4rem);color:var(--ink);min-height:90px;
    display:flex;align-items:center;justify-content:center;letter-spacing:-0.02em;
  }
  .type-zone .will-prefix{color:var(--ink-soft)}
  /* Compose card — frames the typing gag as 'drafting the question' */
  .compose-card{
    width:100%;max-width:640px;background:var(--surface);border:1px solid var(--line);
    border-radius:20px;box-shadow:0 16px 44px rgba(199,125,149,.15);overflow:hidden;
  }
  .compose-head{
    display:flex;align-items:center;gap:11px;padding:12px 18px;
    border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fffafd,#fdf1f8);
  }
  .compose-dots{display:inline-flex;gap:6px}
  .compose-dots i{width:11px;height:11px;border-radius:50%;display:block}
  .compose-dots i:nth-child(1){background:#ff8fc4}
  .compose-dots i:nth-child(2){background:#c79bf0}
  .compose-dots i:nth-child(3){background:#ffd1e6}
  .compose-label{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
  .compose-pen{margin-left:auto;color:var(--accent-2-deep);font-size:1.05rem;animation:gentleFloat 2.6s ease-in-out infinite}
  .compose-card .type-zone{padding:30px 22px 6px;min-height:auto}
  .compose-captions{padding:0 22px 22px;min-height:46px;display:flex;flex-direction:column;gap:2px}
  .compose-captions .spell-msg{min-height:24px;font-size:clamp(.92rem,2vw,1.15rem)}
  .cblink{display:inline-block;width:3px;height:.85em;background:var(--accent-deep);margin-left:6px;vertical-align:baseline;animation:cblink .6s step-end infinite}
  @keyframes cblink{0%,100%{opacity:1}50%{opacity:0}}
  .bshake{animation:bshake .08s linear}
  @keyframes bshake{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}

  .date-ask{max-width:720px;display:none;flex-direction:column;gap:4px;text-align:center}
  .date-ask.active{display:flex}
  .date-ask .l1,.date-ask .l2,.date-ask .l3{opacity:0;transform:scale(.5) translateY(30px)}
  .date-ask.active .l1{animation:popIn .9s 0s cubic-bezier(.34,1.56,.64,1) forwards}
  .date-ask.active .l2{animation:popIn 1s .5s cubic-bezier(.34,1.56,.64,1) forwards,rubberBand 1s 1.5s ease-out}
  .date-ask.active .l3{animation:popIn .8s 1.3s cubic-bezier(.34,1.56,.64,1) forwards}
  .date-ask .l1{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--ink-muted);font-size:clamp(1rem,2.2vw,1.3rem);margin-bottom:10px}
  .date-ask .l2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.2;letter-spacing:-0.02em}
  .date-ask .l2 em{font-style:italic;color:var(--accent-deep)}
  .date-ask .l3{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--ink-faint);font-size:clamp(.85rem,1.8vw,1.05rem);margin-top:10px}
  .marry-next{opacity:0;pointer-events:none;transition:opacity .5s ease}
  .marry-next.show{opacity:1;pointer-events:auto}

  /* ===== PAGE 5 — YES / NO ===== */
  .p-buttons{background:linear-gradient(135deg,#faf5ff,#fdf2f8,#f3e8ff)}
  .buttons-wrap{max-width:600px;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px);text-align:center}
  /* The ask, framed as a sent message */
  .ask-bubble{
    position:relative;align-self:flex-end;max-width:520px;
    padding:18px 26px 20px;border-radius:26px 26px 8px 26px;
    background:linear-gradient(135deg,#ff4fb8 0%,#a855f7 60%,#8b3fe8 100%);color:#fff;
    box-shadow:0 18px 44px rgba(139,63,232,.32);text-align:left;
  }
  .ask-bubble-from{display:block;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:8px}
  .ask-bubble p{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.4rem,3.6vw,2.05rem);line-height:1.28;letter-spacing:-0.01em}
  .ask-bubble em{font-style:italic;color:#ffe3f5}
  .ask-reply-label{font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);align-self:flex-start;margin-top:2px}
  @media(max-width:560px){ .ask-bubble{align-self:stretch;max-width:none} }
  .bet-note{
    font-size:.92rem;color:var(--ink-soft);line-height:1.6;
    padding:16px 26px;border:1px solid var(--line);border-radius:var(--radius-md);
    background:var(--surface);max-width:460px;
  }
  .bet-note .dam{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--accent-deep);font-size:1.4rem;display:block;margin-top:6px;
    display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%;
  }
  .dam iconify-icon{font-size:1.3rem}
  .warn-text{
    font-family:'Fraunces',serif;font-style:italic;font-weight:400;
    font-size:clamp(1.2rem,2.8vw,1.7rem);color:var(--accent-deep);
    animation:wiggle 2s ease-in-out infinite;display:inline-flex;align-items:center;gap:12px;
  }
  .warn-text iconify-icon{color:var(--accent);font-size:1em;animation:gentleFloat 3s ease-in-out infinite}

  .btn-row{
    display:flex;gap:22px;align-items:center;justify-content:center;
    min-height:56px;flex-wrap:wrap;
  }
  .btn-yes{
    padding:14px 38px;border:none;border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.98rem;font-weight:600;
    letter-spacing:.004em;cursor:pointer;color:#fff;
    background:linear-gradient(100deg,#ff4fb8 0%,#a855f7 55%,#8b3fe8 100%);
    display:inline-flex;align-items:center;gap:8px;
    box-shadow:0 8px 24px rgba(139,63,232,.34);
    transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
    position:relative;z-index:2;
    animation:heartBeat 2.8s ease-in-out infinite;
  }
  .btn-yes:hover{transform:scale(1.08)!important;box-shadow:0 14px 36px rgba(139,63,232,.5);animation:none}
  .btn-yes iconify-icon{font-size:1rem}

  /* No button: stays in layout, TRANSLATE applied on dodge (never changes layout size) */
  #noBtn{
    padding:14px 36px;border:1px solid #f7b8da;border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.98rem;font-weight:600;
    letter-spacing:.004em;cursor:pointer;
    background:#ffe3f1;color:#c2477f;
    user-select:none;box-shadow:0 6px 16px rgba(255,79,184,.18);
    /* Transform-based dodge — CSS transforms DO NOT affect layout */
    transform:translate(0,0);
    transition:transform .25s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }

  .dodge-msg{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:1rem;color:var(--ink-faint);min-height:22px;
  }

  /* ===== PAGE 6 — CELEBRATION ===== */
  .p-celebrate{background:linear-gradient(135deg,#fdf2f8,#f3e8ff,#faf5ff)}
  .celebrate-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:640px;text-align:center}
  .celebrate-ring{
    position:relative;width:110px;height:110px;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:radial-gradient(circle,var(--accent-bg) 0%,transparent 70%);
    color:var(--accent-deep);
  }
  .celebrate-ring iconify-icon{font-size:3rem;animation:tada 1.5s ease-in-out}
  .celebrate-ring::before,.celebrate-ring::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--accent);opacity:.3;animation:ringPulse 2.5s ease-in-out infinite;
  }
  .celebrate-ring::after{animation-delay:1.25s}
  @keyframes ringPulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.5);opacity:0}}

  /* ===== PAGE 7 — ACTIVITY ===== */
  .p-activity{background:linear-gradient(180deg,#faf5ff,var(--bg))}
  .activity-wrap{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vh,22px);text-align:center}
  .act-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  @media(max-width:520px){.act-grid{grid-template-columns:1fr}}
  .act-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:clamp(18px,2.6vh,26px) clamp(16px,2.4vw,22px);text-align:left;cursor:pointer;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;
  }
  .act-card:hover{border-color:var(--ink-faint);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.04)}
  .act-card.sel{border-color:var(--accent-deep);background:var(--accent-bg)}
  .act-icon{
    width:42px;height:42px;border-radius:10px;background:var(--accent-bg);
    color:var(--accent-deep);display:flex;align-items:center;justify-content:center;
    margin-bottom:12px;
  }
  .act-icon iconify-icon{font-size:1.3rem}
  .act-card h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;margin-bottom:6px;letter-spacing:-0.01em}
  .act-card .cd{font-size:.85rem;color:var(--ink-soft);line-height:1.5}
  .warn-badge{
    display:inline-block;margin-top:10px;background:var(--ink);color:var(--bg);
    font-size:.58rem;font-weight:500;padding:4px 10px;border-radius:100px;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .ciw{margin-top:12px;display:none}
  .ciw.show{display:block}
  .ci-input{
    width:100%;padding:9px 13px;border-radius:var(--radius-md);
    border:1px solid var(--line);background:var(--bg);color:var(--ink);
    font-family:'Inter',sans-serif;font-size:.88rem;outline:none;transition:border-color .2s;
  }
  .ci-input:focus{border-color:var(--accent-deep)}
  .fb-popup{
    display:none;margin-top:8px;padding:9px 12px;
    background:var(--accent-2-bg);border:1px solid var(--accent-2);
    border-radius:var(--radius-md);color:var(--ink-soft);
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:.95rem;
  }
  .fb-popup.show{display:block;animation:bounceIn .4s cubic-bezier(.2,.7,.2,1)}

  /* ===== PAGE 8 — FINAL ===== */
  .p-final{background:linear-gradient(135deg,#fdf2f8,#f3e8ff,#faf5ff)}
  .final-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:560px;text-align:center}
  .final-icon{
    width:100px;height:100px;border-radius:50%;background:var(--accent-bg);
    color:var(--accent-deep);display:flex;align-items:center;justify-content:center;
    animation:bounceIn 1s cubic-bezier(.34,1.56,.64,1) both;
  }
  .final-icon iconify-icon{font-size:2.8rem}
  .chosen{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.3rem,3.2vw,1.9rem);color:var(--accent-deep);letter-spacing:-0.01em}
  .final-wrap .ln{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.15rem;color:var(--ink-muted)}

  /* ===== FLOWER CASCADE (Yes) — fixed z, pointer-events none ===== */
  .petal{position:fixed;z-index:9999;pointer-events:none;font-size:1.4rem;will-change:transform,opacity;filter:drop-shadow(0 2px 6px rgba(199,125,149,.15))}
  .petal.sym{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.15),0 2px 8px rgba(199,125,149,.2);font-family:'Fraunces',serif;font-weight:300}
  @keyframes petalFallSway{0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}10%{opacity:1}25%{transform:translateY(25vh) translateX(calc(var(--drift,0px) * .4)) rotate(90deg)}50%{transform:translateY(50vh) translateX(calc(var(--drift,0px) * -.2)) rotate(180deg)}75%{transform:translateY(75vh) translateX(calc(var(--drift,0px) * .6)) rotate(270deg)}90%{opacity:.8}100%{transform:translateY(110vh) translateX(var(--drift,0px)) rotate(360deg);opacity:0}}
  @keyframes petalDrift{0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}8%{opacity:.95}100%{transform:translateY(110vh) translateX(var(--drift,0px)) rotate(var(--spin,540deg));opacity:0}}

  /* ===== ACTIVITY THEMED FX ===== */
  .tennis-ball{position:fixed;z-index:9999;pointer-events:none;font-size:2rem;filter:drop-shadow(0 4px 10px rgba(163,217,47,.4))}
  @keyframes tennisArc{0%{transform:translateX(-8vw) translateY(0) rotate(0);opacity:0}8%{opacity:1}50%{transform:translateX(50vw) translateY(var(--arc-peak,-30vh)) rotate(540deg)}92%{opacity:1}100%{transform:translateX(110vw) translateY(0) rotate(1080deg);opacity:0}}
  @keyframes tennisArcReverse{0%{transform:translateX(110vw) translateY(0) rotate(0);opacity:0}8%{opacity:1}50%{transform:translateX(50vw) translateY(var(--arc-peak,-30vh)) rotate(-540deg)}92%{opacity:1}100%{transform:translateX(-8vw) translateY(0) rotate(-1080deg);opacity:0}}
  .tennis-trail{position:fixed;z-index:9998;pointer-events:none;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,rgba(196,232,118,.6),rgba(196,232,118,0));animation:trailFade 1.2s ease-out forwards}
  @keyframes trailFade{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
  .court-line{position:fixed;left:0;top:50vh;width:100vw;height:2px;background:linear-gradient(90deg,transparent,#c4e876,#c4e876,transparent);z-index:9997;pointer-events:none;opacity:0;transform-origin:left center;animation:courtSweep 2s cubic-bezier(.25,.46,.45,.94) forwards}
  @keyframes courtSweep{0%{transform:scaleX(0);opacity:0}30%{opacity:.6}100%{transform:scaleX(1);opacity:0}}

  .hoop-ball{position:fixed;z-index:9999;pointer-events:none;font-size:2rem;filter:drop-shadow(0 6px 14px rgba(235,120,45,.45))}
  @keyframes hoopBounce{0%{transform:translateY(-12vh) rotate(0);opacity:0}5%{opacity:1}20%{transform:translateY(76vh) rotate(300deg)}30%{transform:translateY(42vh) rotate(420deg)}40%{transform:translateY(78vh) rotate(540deg)}48%{transform:translateY(58vh) rotate(640deg)}56%{transform:translateY(80vh) rotate(740deg)}62%{transform:translateY(68vh) rotate(820deg)}68%{transform:translateY(82vh) rotate(900deg)}100%{transform:translateY(110vh) rotate(1080deg);opacity:0}}
  .swoosh{position:fixed;z-index:9998;pointer-events:none;border:3px solid #eb782d;border-radius:50%;width:80px;height:80px;animation:swooshRing 1.4s ease-out forwards;opacity:0}
  @keyframes swooshRing{0%{transform:scale(.3);opacity:.9;border-color:#eb782d}100%{transform:scale(3);opacity:0;border-color:#fb923c}}

  .zen-el{position:fixed;z-index:9999;pointer-events:none;font-size:1.8rem;filter:drop-shadow(0 4px 12px rgba(199,125,149,.2))}
  @keyframes zenRise{0%{transform:translateY(105vh) translateX(0) rotate(0);opacity:0}12%{opacity:.6}50%{transform:translateY(50vh) translateX(calc(var(--sway,0px) * .7)) rotate(var(--rot,8deg))}88%{opacity:.5}100%{transform:translateY(-12vh) translateX(var(--sway,0px)) rotate(calc(var(--rot,8deg) * 2));opacity:0}}
  .zen-halo{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(231,185,201,.3),transparent 70%);z-index:9997;pointer-events:none;opacity:0;animation:haloBreath 3s ease-in-out forwards}
  @keyframes haloBreath{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}30%{opacity:.9}70%{opacity:.5}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}

  .football-ball{position:fixed;z-index:9999;pointer-events:none;font-size:1.9rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
  @keyframes footballRoll{0%{transform:translateX(-10vw) rotate(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(110vw) rotate(1440deg);opacity:0}}
  @keyframes footballRollRev{0%{transform:translateX(110vw) rotate(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(-10vw) rotate(-1440deg);opacity:0}}
  .field-streak{position:fixed;left:0;width:100vw;height:3px;background:linear-gradient(90deg,transparent,rgba(134,239,172,.6),transparent);z-index:9997;pointer-events:none;opacity:0;animation:streakPass 1.4s ease-out forwards}
  @keyframes streakPass{0%{opacity:0;transform:scaleX(0)}40%{opacity:.7}100%{opacity:0;transform:scaleX(1)}}

  /* ===== PAGE 9 — DATE REPORT CARD (Phase 2) ===== */
  /* Override the base .page center-alignment — long scrolling content
     needs to flow from the top, not be vertically centered. */
  .p-report{
    background:linear-gradient(180deg,#fdf2f8,#faf5ff);
    justify-content:flex-start;align-items:center;
    overflow-y:auto;overflow-x:hidden;
    padding-top:clamp(32px,6vh,60px);padding-bottom:clamp(32px,6vh,60px);
  }
  .report-wrap{max-width:760px;width:100%;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,22px);align-items:stretch}
  .report-head{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:6px}
  .report-head .display{font-size:clamp(2rem,4.8vw,3.2rem)}
  .report-head .tm{font-size:.5em;vertical-align:super;color:var(--ink-faint);font-weight:400;letter-spacing:0}
  .report-head .tiny{font-family:'Fraunces',serif;font-style:italic;font-weight:300;color:var(--ink-muted);font-size:.95rem;line-height:1.5;max-width:460px}
  .report-head .tiny em{color:var(--accent-deep);font-style:italic}
  .slider-list{display:flex;flex-direction:column;gap:14px;width:100%}
  .slider-row{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:16px 20px;display:flex;flex-direction:column;gap:10px;
    transition:border-color .3s,box-shadow .3s,transform .3s;
  }
  .slider-row.rated{border-color:var(--accent);box-shadow:0 4px 16px rgba(199,125,149,.12)}
  .slider-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .cat-label{font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;letter-spacing:-0.01em}
  .cat-label .theme-emo{margin-right:6px;font-size:1rem;vertical-align:-1px}
  .cat-score{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;color:var(--accent-deep);letter-spacing:-0.02em;transition:transform .3s}
  .slider-row.rated .cat-score{animation:rubberBand .7s cubic-bezier(.2,.7,.2,1)}
  .score-sep{font-size:.75rem;color:var(--ink-faint);font-weight:400;margin-left:1px}

  /* Base slider track — all rows share this */
  .stk{
    position:relative;width:100%;height:44px;border-radius:22px;
    background:#f5f0ec;border:1px solid var(--line);
    cursor:pointer;touch-action:none;user-select:none;
    overflow:hidden;
  }
  .stk-fill{
    position:absolute;left:0;top:0;height:100%;width:0%;
    border-radius:22px 0 0 22px;
    background:linear-gradient(90deg,var(--accent-bg),var(--accent));
    transition:width .15s cubic-bezier(.2,.7,.2,1);
    pointer-events:none;
  }
  .stk-handle{
    position:absolute;top:50%;left:0;transform:translateY(-50%);
    width:28px;height:28px;border-radius:50%;
    background:#fff;border:2px solid var(--accent-deep);
    box-shadow:0 2px 8px rgba(199,125,149,.3);
    pointer-events:none;z-index:3;
    transition:left .15s cubic-bezier(.2,.7,.2,1), transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
  }
  .stk.dragging .stk-handle{transform:translateY(-50%) scale(1.15);box-shadow:0 4px 14px rgba(199,125,149,.5)}
  .stk-tickrow{position:absolute;inset:0;display:flex;align-items:center;padding:0 16px;gap:0;justify-content:space-between;pointer-events:none;z-index:2}
  .stk-tick{font-size:1rem;opacity:.25;transition:opacity .3s,transform .3s;filter:grayscale(.6)}
  .stk-tick.lit{opacity:1;filter:none;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}

  /* Theme overrides per category */
  .stk.theme-convo{background:linear-gradient(90deg,#fef3c7,#fce7f3)}
  .stk.theme-convo .stk-fill{background:linear-gradient(90deg,#fde68a,#f472b6)}

  .stk.theme-bowl{background:linear-gradient(180deg,#78350f,#92400e 50%,#78350f);border-color:#451a03}
  .stk.theme-bowl .stk-fill{background:linear-gradient(90deg,rgba(254,243,199,.15),rgba(254,243,199,.35));border-radius:22px 0 0 22px}
  .stk.theme-bowl .stk-handle{background:#1f1f1f;border-color:#fde047;box-shadow:0 2px 10px rgba(0,0,0,.5)}
  .stk.theme-bowl .stk-handle::after{content:'';position:absolute;top:8px;left:6px;width:4px;height:4px;border-radius:50%;background:#fde047;box-shadow:6px 2px 0 #fde047,3px 8px 0 #fde047}
  .stk.theme-bowl .stk-tick{color:#fde047;opacity:.3;filter:none}
  .stk.theme-bowl .stk-tick.lit{opacity:1;animation:pinFall .6s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes pinFall{0%{transform:translateY(0) rotate(0);opacity:.3}50%{transform:translateY(-6px) rotate(-30deg);opacity:1}100%{transform:translateY(4px) rotate(70deg);opacity:1}}

  .stk.theme-rizz{background:linear-gradient(90deg,#0f172a,#581c87,#0f172a);border-color:#1e1b4b}
  .stk.theme-rizz .stk-fill{background:linear-gradient(90deg,#a78bfa,#ec4899,#fde047);background-size:200% 100%;animation:rizzShimmer 2s linear infinite}
  @keyframes rizzShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  .stk.theme-rizz .stk-handle{background:linear-gradient(135deg,#fde047,#ec4899);border-color:#fff;box-shadow:0 0 14px rgba(236,72,153,.6)}
  .stk.theme-rizz .stk-tick{color:#fde047;filter:none;opacity:.25}

  .stk.theme-spice{background:linear-gradient(90deg,#fef3c7,#fb923c,#dc2626);border-color:#991b1b}
  .stk.theme-spice .stk-fill{background:linear-gradient(90deg,rgba(254,243,199,.3),rgba(220,38,38,.6))}
  .stk.theme-spice .stk-handle{background:#fef3c7;border-color:#dc2626}

  .stk.theme-booze{background:linear-gradient(180deg,#f5f3ff,#ede9fe);border-color:#c4b5fd}
  .stk.theme-booze .stk-fill{background:linear-gradient(180deg,#fbcfe8 0%,#f472b6 50%,#ec4899 100%);box-shadow:inset 0 -4px 8px rgba(236,72,153,.3)}
  .stk.theme-booze .stk-handle{background:#fdf2f8;border-color:#be185d}
  .stk.theme-booze.spilling{animation:boozeSpill .4s ease-in-out}
  @keyframes boozeSpill{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}

  .stk.theme-hand{background:linear-gradient(90deg,#fdf2f8,#fce7f3,#fdf2f8);border-color:#f9a8d4}
  .stk.theme-hand .stk-fill{background:linear-gradient(90deg,#fce7f3,#f472b6)}
  .stk.theme-hand .stk-handle{background:#fff;border-color:#ec4899;box-shadow:0 2px 10px rgba(236,72,153,.35)}

  /* Reply bubble — his reaction after rating */
  .reply-bubble{
    opacity:0;max-height:0;overflow:hidden;
    font-family:'Fraunces',serif;font-style:italic;font-weight:400;
    font-size:.95rem;color:var(--ink-soft);line-height:1.5;
    padding:0 14px;border-left:3px solid transparent;
    transition:opacity .5s ease,max-height .5s ease,border-color .5s ease,padding .5s ease;
  }
  .reply-bubble.show{
    opacity:1;max-height:80px;
    border-left-color:var(--accent);
    padding:6px 14px;
  }
  .reply-bubble::before{content:'— ';color:var(--accent-deep);font-style:normal;font-weight:500}

  /* Continue button — "Submit Report" style */
  .report-continue{
    align-self:center;margin-top:8px;opacity:.45;pointer-events:none;
    position:relative;overflow:visible;
    padding:14px 34px 14px 28px;
    transition:opacity .4s ease,transform .3s ease,background .3s ease;
  }
  .report-continue.ready{opacity:1;pointer-events:auto;animation:heartBeat 2.5s ease-in-out infinite}
  .report-continue .rc-text{display:inline-flex;align-items:center;gap:10px}
  .report-continue .rc-seal{
    display:inline-flex;align-items:center;justify-content:center;
    width:22px;height:22px;border:1.5px dashed currentColor;border-radius:50%;
    font-size:.6rem;font-weight:700;letter-spacing:.05em;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .report-continue:hover .rc-seal{transform:rotate(15deg) scale(1.1)}

  /* Submit stamp — flies in on click */
  .submit-stamp{
    position:fixed;top:50%;left:50%;z-index:99999;pointer-events:none;
    transform:translate(-50%,-50%) scale(3) rotate(-25deg);
    font-family:'Fraunces',serif;font-weight:700;
    font-size:clamp(3rem,10vw,6rem);color:#dc2626;letter-spacing:.15em;
    text-shadow:0 0 2px rgba(220,38,38,.3);
    padding:14px 40px;border:6px double #dc2626;border-radius:12px;
    background:rgba(255,255,255,.4);
    opacity:0;
    animation:stampHit 1.2s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes stampHit{
    0%{opacity:0;transform:translate(-50%,-50%) scale(4) rotate(-25deg)}
    25%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
    30%{transform:translate(-50%,-50%) scale(1.05) rotate(-8deg)}
    35%{transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
    80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-8deg)}
  }
  /* Dark fade — helps sell the Netflix transition into page 10 */
  .nfx-fade{
    position:fixed;inset:0;z-index:99996;pointer-events:none;
    background:#0a0a0a;opacity:0;
    animation:nfxFade 1.4s .9s ease-in forwards;
  }
  @keyframes nfxFade{
    0%{opacity:0}
    100%{opacity:1}
  }

  /* ===== OVERALL SCORE SUMMARY ===== */
  .score-summary{
    background:linear-gradient(135deg,#fdf2f8,#faf5ff,#fef3c7);
    border:1px solid var(--accent);
    border-radius:var(--radius-lg);
    padding:clamp(18px,2.6vh,26px) clamp(20px,3vw,28px);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:6px;
    box-shadow:0 4px 20px rgba(199,125,149,.1);
    flex-wrap:wrap;
  }
  .summary-left{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px}
  .summary-label{
    font-family:'Inter',sans-serif;font-size:.68rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);
  }
  .summary-sub{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.85rem;margin-top:2px;
  }
  .summary-right{
    display:flex;align-items:baseline;gap:4px;
  }
  .summary-avg{
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;letter-spacing:-0.03em;
    color:var(--accent-deep);
    transition:color .4s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    font-variant-numeric:tabular-nums;
    display:inline-block;transform-origin:center;
  }
  .summary-avg.full{color:#b45309}
  .summary-out{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:1.1rem;color:var(--ink-faint);
  }
  .summary-verdict{
    display:block;margin-top:8px;width:100%;text-align:center;
    font-family:'Fraunces',serif;font-style:italic;font-weight:400;
    color:var(--accent-deep);font-size:1rem;
    opacity:0;transform:translateY(6px);
    transition:opacity .5s ease,transform .5s ease;
  }
  .summary-verdict.show{opacity:1;transform:translateY(0)}

  /* Spill droplet particles (alcohol overflow) */
  .spill-drop{
    position:fixed;z-index:99999;pointer-events:none;
    width:10px;height:12px;background:#ec4899;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    filter:drop-shadow(0 2px 4px rgba(236,72,153,.4));
    animation:dropFall 1.4s cubic-bezier(.4,.02,.7,.9) forwards;
  }
  @keyframes dropFall{0%{opacity:.9;transform:translateY(0) scale(1)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--ddx,0),80px) scale(.5)}}

  /* Rizz sparkle trail */
  .rizz-spark{
    position:fixed;z-index:99998;pointer-events:none;
    font-size:1rem;color:#fde047;
    animation:rizzSparkOut .9s ease-out forwards;
  }
  @keyframes rizzSparkOut{0%{opacity:.9;transform:scale(1) translate(0,0)}100%{opacity:0;transform:scale(.3) translate(var(--sx,0),var(--sy,0))}}

  /* ===== THINGS I LEARNED ===== */
  .learned-section{
    display:flex;flex-direction:column;gap:14px;width:100%;
    transition:opacity .6s ease;
  }
  /* Helper text above Continue — swaps based on progress */
  .continue-hint{
    text-align:center;font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.88rem;margin-top:6px;min-height:1.2em;
    transition:color .4s ease, opacity .4s ease;
  }
  .continue-hint.ready{color:var(--accent-deep);font-weight:400}
  .learned-head{
    text-align:center;display:flex;flex-direction:column;gap:6px;margin-top:16px;
  }
  .learned-head .eyebrow{text-align:center}
  .learned-head h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.3rem,3vw,1.8rem);letter-spacing:-0.02em}
  .learned-head h3 em{font-style:italic;color:var(--accent-deep)}
  .learned-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:22px 24px;display:flex;flex-direction:column;gap:10px;
  }
  .learned-card h4{font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;letter-spacing:-0.01em}
  .learned-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}

  /* Opposites magnet animation */
  .magnet-stage{
    position:relative;width:100%;max-width:420px;margin:8px auto 0;height:90px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  /* Bounded container — magnets slide within this, not vw-based (much cheaper) */
  .magnet{
    position:absolute;top:50%;width:70px;height:38px;
    margin-top:-19px;
    animation:none;
  }
  .magnet svg{width:100%;height:100%;display:block}
  .magnet.left{left:10px;animation:magnetPullL 3.2s cubic-bezier(.4,.02,.7,.9) infinite}
  .magnet.right{right:10px;animation:magnetPullR 3.2s cubic-bezier(.4,.02,.7,.9) infinite}
  @keyframes magnetPullL{
    0%,100%{transform:translateX(0) rotate(0)}
    35%{transform:translateX(12px) rotate(-3deg)}
    50%,75%{transform:translateX(130px)}
    85%{transform:translateX(0) rotate(3deg)}
  }
  @keyframes magnetPullR{
    0%,100%{transform:translateX(0) scaleX(-1) rotate(0)}
    35%{transform:translateX(-12px) scaleX(-1) rotate(-3deg)}
    50%,75%{transform:translateX(-130px) scaleX(-1)}
    85%{transform:translateX(0) scaleX(-1) rotate(3deg)}
  }
  .magnet-spark{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:30px;height:30px;opacity:0;
    animation:magnetSpark 3.2s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes magnetSpark{
    0%,48%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
    55%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}
    70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    78%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
  }
  .magnet-field{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:200px;height:60px;opacity:0;pointer-events:none;
    animation:magnetField 3.2s ease-in-out infinite;
  }
  @keyframes magnetField{
    0%,30%{opacity:0}
    40%{opacity:.4}
    55%{opacity:.7}
    65%,100%{opacity:0}
  }
  .magnet-caption{
    text-align:center;font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:.92rem;color:var(--ink-muted);margin-top:4px;
  }

  /* Fussy eater banned grid */
  .banned-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px;
  }
  @media(max-width:520px){.banned-grid{grid-template-columns:repeat(2,1fr)}}
  .banned-chip{
    position:relative;display:flex;align-items:center;gap:8px;
    padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;
    border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.85rem;color:#9a3412;
    overflow:hidden;
  }
  .banned-chip .chip-emo{font-size:1.05rem;flex-shrink:0}
  .banned-chip iconify-icon{font-size:1.15rem;flex-shrink:0}
  .banned-chip .chip-label{font-weight:500;letter-spacing:.01em}
  .banned-chip::after{
    content:'';position:absolute;left:-4px;right:-4px;top:50%;height:2px;
    background:#dc2626;transform:rotate(-6deg);opacity:.75;
    box-shadow:0 0 4px rgba(220,38,38,.3);
  }
  .banned-caption{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.85rem;margin-top:8px;text-align:center;
  }
  .banned-chip.list-goes-on{
    background:#fdf4ff;border-color:#e9d5ff;color:#6b21a8;
    font-style:italic;
  }
  .banned-chip.list-goes-on::after{display:none}
  .banned-chip.list-goes-on .chip-emo{letter-spacing:-2px;font-weight:700}

  /* Fact list — for the "dogs + mufat" card */
  .fact-list{display:flex;flex-direction:column;gap:14px;margin-top:4px}
  .fact-item{
    display:flex;align-items:flex-start;gap:14px;
    padding:4px 0;
  }
  .fact-emo{
    font-size:1.6rem;flex-shrink:0;width:38px;text-align:center;
    animation:gentleFloat 3.4s ease-in-out infinite;
  }
  .fact-item div{display:flex;flex-direction:column;gap:3px}
  .fact-item strong{
    font-family:'Fraunces',serif;font-weight:500;font-size:1.02rem;
    color:var(--ink);letter-spacing:-0.01em;
  }
  .fact-item .fact-note{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-soft);font-size:.88rem;line-height:1.5;
  }
  .hindi-word{
    font-family:'Fraunces',serif;font-weight:600;color:var(--accent-deep);
    font-size:1.15em;letter-spacing:.01em;margin:0 2px;
  }
  .hindi-trans{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.82em;margin-left:3px;
  }

  /* Drinks too much — glass overflowing */
  .booze-stage{
    position:relative;width:100%;height:140px;display:flex;align-items:flex-end;justify-content:center;gap:40px;
  }
  /* Glass — static gradient fill with a separate "overflow" layer.
     No animating background-image (that was expensive). */
  .tall-glass{
    position:relative;width:60px;height:120px;
    border:3px solid #6b7280;border-top:none;
    border-radius:0 0 12px 12px;
    background:linear-gradient(180deg,transparent 0,transparent 15%,#f9a8d4 15%,#ec4899 100%);
    overflow:visible;
  }
  /* Top overflow bubble — grows and shrinks via transform (cheap) */
  .tall-glass::before{
    content:'';position:absolute;top:-10px;left:-3px;right:-3px;height:14px;
    background:linear-gradient(180deg,#f472b6,#ec4899);
    border-radius:50% 50% 30% 30% / 90% 90% 30% 30%;
    transform:scaleY(0);transform-origin:bottom;
    animation:glassBrim 3.2s ease-in-out infinite;
  }
  @keyframes glassBrim{
    0%,25%{transform:scaleY(0)}
    45%,60%{transform:scaleY(1)}
    80%,100%{transform:scaleY(0)}
  }
  .booze-drip{
    position:absolute;top:-2px;width:6px;height:12px;
    background:#ec4899;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity:0;
    animation:boozeDrip 3.2s ease-in-out infinite;
  }
  .booze-drip.d1{left:8px;animation-delay:0s}
  .booze-drip.d2{right:6px;animation-delay:.5s}
  .booze-drip.d3{left:28px;animation-delay:1s}
  @keyframes boozeDrip{
    0%,40%{opacity:0;transform:translateY(0)}
    50%{opacity:1;transform:translateY(0)}
    80%{opacity:1;transform:translateY(80px)}
    90%,100%{opacity:0;transform:translateY(110px)}
  }
  .booze-note{
    flex:1;max-width:280px;font-family:'Fraunces',serif;font-style:italic;
    font-weight:400;font-size:.98rem;color:var(--ink-soft);line-height:1.5;
  }
  .booze-note em{color:var(--accent-deep);font-weight:500}

  /* Page 8 — "date done" continuation button (legacy, kept as fallback) */
  .date-done-btn{
    margin-top:18px;opacity:0;animation:fadeUp 1s 4s cubic-bezier(.2,.7,.2,1) both;
  }

  /* ===== END-OF-EPISODE CARD — Netflix "Up Next" style ===== */
  .ep-end-card{
    width:100%;max-width:560px;margin-top:clamp(18px,3vh,28px);
    background:linear-gradient(180deg, rgba(20,20,20,.92), rgba(10,10,10,.96));
    border:1px solid rgba(255,255,255,.1);border-radius:14px;
    padding:clamp(18px,2.6vh,24px) clamp(20px,3vw,28px);
    display:flex;flex-direction:column;gap:14px;color:#fff;
    box-shadow:0 12px 40px rgba(0,0,0,.3);
    opacity:0;transform:translateY(14px);
    animation:fadeUp .9s 2.2s cubic-bezier(.2,.7,.2,1) both;
  }
  .ep-end-label{
    font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.28em;text-transform:uppercase;color:#e50914;
    padding:3px 10px;border:1px solid rgba(229,9,20,.4);border-radius:3px;
    align-self:flex-start;
  }
  .ep-end-upnext{
    display:flex;gap:14px;align-items:center;
    padding:12px 0;border-top:1px solid rgba(255,255,255,.1);
  }
  .ep-end-thumb{
    width:64px;height:64px;flex-shrink:0;border-radius:8px;
    background:linear-gradient(135deg, rgba(229,9,20,.2), rgba(168,85,247,.15));
    border:1px solid rgba(229,9,20,.3);
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.85);font-size:1.6rem;
  }
  .ep-end-thumb.locked{
    background:linear-gradient(135deg, rgba(100,100,100,.2), rgba(60,60,60,.2));
    border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5);
  }
  .ep-end-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
  .ep-end-upnext-label{
    font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
  }
  .ep-end-name{
    font-family:'Fraunces',serif;font-weight:500;font-style:italic;
    font-size:clamp(.95rem,2vw,1.08rem);color:#fff;line-height:1.35;letter-spacing:-0.005em;
  }
  .ep-end-desc{
    font-family:'Inter',sans-serif;font-size:.76rem;color:rgba(255,255,255,.55);
    line-height:1.5;
  }
  .ep-end-actions{
    display:flex;gap:10px;flex-wrap:wrap;
  }
  .ep-end-btn{
    flex:1;min-width:140px;
    padding:12px 22px;border:none;border-radius:6px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:-0.005em;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease;
  }
  .ep-end-btn.primary{
    background:#fff;color:#000;
  }
  .ep-end-btn.primary:hover{transform:scale(1.03);background:#f5f5f5}
  .ep-end-btn.primary iconify-icon{color:#000;font-size:1.1rem}
  .ep-end-btn.secondary{
    background:rgba(109,109,110,.6);color:#fff;backdrop-filter:blur(4px);
  }
  .ep-end-btn.secondary:hover{transform:scale(1.03);background:rgba(109,109,110,.85)}
  .ep-end-btn.secondary iconify-icon{color:#fff;font-size:1.05rem}
  .ep-end-btn.disabled{
    background:rgba(60,60,60,.5);color:rgba(255,255,255,.4);cursor:not-allowed;
    border:1px dashed rgba(255,255,255,.15);
  }
  .ep-end-btn.disabled:hover{transform:none;background:rgba(60,60,60,.5)}

  /* ===== PAGE 0 — NETFLIX SHOW BANNER (fits one viewport, no scroll) ===== */
  .p-banner{
    background:#050505;color:#fff;
    justify-content:flex-end;align-items:flex-start;
    padding:clamp(20px,3.5vh,48px) clamp(20px,5vw,56px) clamp(36px,7vh,76px);
    overflow:hidden;
  }
  .banner-bg{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 70% 50% at 30% 40%, rgba(255,79,184,.20) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,63,232,.18) 0%, transparent 60%),
      linear-gradient(180deg, #0c0510 0%, #070309 55%, #000 100%);
    animation:bgDrift 16s ease-in-out infinite alternate;
  }
  @keyframes bgDrift{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(-2%,1%) scale(1.04)}
  }
  /* Her key art — full-bleed netflix-style hero image, subject toward the right */
  .banner-keyart{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background-position:72% 18%;background-size:cover;background-repeat:no-repeat;
    opacity:0;animation:bannerReveal 1.4s .2s ease forwards;
  }
  /* Legibility overlay: dark+pink-purple gradient so left-aligned text stays readable */
  .banner-bg::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(7,3,9,.92) 0%, rgba(7,3,9,.6) 40%, rgba(7,3,9,.15) 75%, rgba(7,3,9,.45) 100%),
      linear-gradient(0deg, rgba(7,3,9,.95) 0%, transparent 40%, transparent 70%, rgba(7,3,9,.5) 100%),
      radial-gradient(ellipse 60% 50% at 80% 75%, rgba(139,63,232,.22) 0%, transparent 60%);
  }
  /* Caption over her key art — bottom-right, sits above the gradient overlay */
  .banner-keyart-caption{
    position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(16px,4vh,40px);z-index:2;
    display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
    pointer-events:none;max-width:min(70vw,360px);
    opacity:0;animation:bannerReveal 1s 1.6s ease forwards;
  }
  .banner-keyart-caption .bkc-line{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(.95rem,1.9vw,1.2rem);line-height:1.2;color:#fff;
    text-shadow:0 1px 14px rgba(0,0,0,.7);
  }
  .banner-keyart-caption .bkc-line em{
    font-style:italic;font-weight:500;
    background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .banner-keyart-caption .bkc-sub{
    font-family:'Inter',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.04em;
    color:rgba(255,214,239,.78);text-shadow:0 1px 10px rgba(0,0,0,.6);
  }
  @media(max-width:640px){
    .banner-keyart{background-position:center 12%}
    .banner-keyart-caption{display:none}
    .banner-bg::after{background:
      linear-gradient(180deg, rgba(7,3,9,.55) 0%, rgba(7,3,9,.3) 35%, rgba(7,3,9,.85) 80%, rgba(7,3,9,.97) 100%),
      radial-gradient(ellipse 70% 40% at 50% 80%, rgba(139,63,232,.25) 0%, transparent 60%);}
  }
  .banner-vignette{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.65) 100%),
      linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 100%);
  }
  .banner-content{
    position:relative;z-index:2;max-width:780px;width:100%;
    display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);
    align-items:flex-start;text-align:left;
  }
  .banner-topbar{
    display:flex;align-items:center;gap:14px;margin-bottom:clamp(10px,2.2vh,22px);
    opacity:0;animation:bannerReveal .8s .2s ease forwards;
  }
  .banner-n{
    font-family:'Fraunces',serif;font-weight:700;font-size:2.4rem;
    line-height:1;letter-spacing:-0.05em;
    background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 18px rgba(255,79,184,.45));
  }
  .banner-label{
    font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;
    letter-spacing:.35em;color:#fff;
  }
  .banner-voiceover{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:clamp(1.1rem,2.4vw,1.5rem);color:#ccc;
    opacity:0;animation:bannerReveal .8s .6s ease forwards;
  }
  .banner-title{
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(2.2rem,7.5vw,5.4rem);line-height:.95;letter-spacing:-0.03em;
    color:#fff;display:flex;flex-direction:column;gap:clamp(2px,.4vw,6px);
    margin:clamp(2px,.8vh,8px) 0;
  }
  .bt-row{display:block;opacity:0;transform:translateY(20px)}
  .bt-row-1{animation:bannerReveal .9s 1s cubic-bezier(.2,.7,.2,1) forwards}
  .bt-row-2{animation:bannerReveal 1s 1.35s cubic-bezier(.2,.7,.2,1) forwards}
  .bt-friend{
    font-style:italic;font-weight:700;letter-spacing:-0.02em;
    background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 30px rgba(168,85,247,.4));
    position:relative;display:inline-block;
  }
  .bt-friend::after{
    content:'';position:absolute;left:0;right:0;bottom:4%;height:3px;
    background:var(--nf-grad);transform:scaleX(0);transform-origin:left;
    animation:friendUnderline 1s 2.2s cubic-bezier(.7,.02,.3,.98) forwards;
    box-shadow:0 0 10px rgba(255,79,184,.6);
  }
  @keyframes friendUnderline{to{transform:scaleX(1)}}
  .bt-star{font-size:.4em;vertical-align:super;color:#fff;font-weight:400;margin-left:2px}
  .banner-meta-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;
    color:#ccc;letter-spacing:.02em;
    opacity:0;animation:bannerReveal .8s 2.6s ease forwards;
  }
  .banner-meta-row .dot{color:#666;margin:0 -2px}
  .banner-meta-row .tv-rating{
    padding:2px 8px;border:1px solid rgba(255,79,184,.55);border-radius:3px;
    font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#ffd6ef;
    background:rgba(255,79,184,.08);
  }
  .banner-desc{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1rem,2vw,1.15rem);line-height:1.55;
    color:#ddd;max-width:560px;
    opacity:0;animation:bannerReveal .8s 2.9s ease forwards;
  }
  .banner-desc em{font-style:italic;color:#fca5a5;font-weight:500}
  .banner-actions{
    display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(8px,1.5vh,14px);
    opacity:0;animation:bannerReveal .8s 3.2s ease forwards;
  }
  .banner-play, .banner-more{
    padding:13px 30px;border:none;border-radius:6px;cursor:pointer;
    font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;
    display:inline-flex;align-items:center;gap:10px;
    transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
  }
  .banner-play{
    background:#fff;color:#000;
    box-shadow:0 0 0 rgba(255,255,255,.4);
  }
  .banner-play:hover{transform:scale(1.04);background:#f5f5f5;box-shadow:0 4px 20px rgba(255,255,255,.15)}
  .banner-play iconify-icon{font-size:1.25rem;color:#000}
  .banner-more{
    background:rgba(109,109,110,.7);color:#fff;backdrop-filter:blur(4px);
  }
  .banner-more:hover{transform:scale(1.04);background:rgba(109,109,110,.9)}
  .banner-more iconify-icon{font-size:1.15rem;color:#fff}
  .banner-footnote{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    font-size:.76rem;line-height:1.5;color:#888;margin-top:clamp(10px,1.8vh,20px);
    max-width:640px;
    opacity:0;animation:bannerReveal .8s 3.5s ease forwards;
  }
  @keyframes bannerReveal{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* Episodes toggle button — caret rotates when modal is open */
  .eps-caret{
    font-size:.95rem !important;color:rgba(255,255,255,.75) !important;margin-left:4px;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .banner-more[aria-expanded="true"] .eps-caret{transform:rotate(180deg)}
  .banner-more[aria-expanded="true"]{background:rgba(168,85,247,.22);border:1px solid rgba(255,79,184,.45)}

  /* ===== EPISODES MODAL ===== */
  .eps-overlay{
    position:fixed;inset:0;z-index:99991;
    background:rgba(5,5,5,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;
    transition:opacity .4s ease;
  }
  .eps-overlay.show{opacity:1;pointer-events:auto}
  .eps-card{
    background:linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    padding:clamp(26px,4vw,40px) clamp(22px,3.5vw,36px);
    max-width:640px;width:100%;max-height:80vh;overflow-y:auto;
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    position:relative;
    transform:scale(.94);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);
  }
  .eps-overlay.show .eps-card{transform:scale(1)}
  .eps-close{
    position:absolute;top:14px;right:14px;
    width:34px;height:34px;border-radius:50%;border:none;
    background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .25s,color .25s,transform .25s;
  }
  .eps-close:hover{background:rgba(255,79,184,.3);color:#fff;transform:rotate(90deg)}
  .eps-close iconify-icon{font-size:1.15rem}
  .eps-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
    padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);
    padding-right:44px; /* keep clear of close button */
  }
  .eps-head-label{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:1.3rem;color:#fff;letter-spacing:-0.01em;
  }
  .eps-head-season{
    font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
    letter-spacing:.22em;color:#999;text-transform:uppercase;
  }
  .eps-list{display:flex;flex-direction:column;gap:8px}
  .ep-item{
    display:flex;align-items:center;gap:16px;
    padding:14px 14px;border:1px solid transparent;border-radius:8px;
    background:rgba(255,255,255,.02);cursor:pointer;
    transition:background .25s, border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1);
    text-align:left;color:#e5e5e5;width:100%;
    font-family:inherit;
  }
  .ep-item:hover:not(.ep-locked){
    background:rgba(255,79,184,.1);border-color:rgba(255,79,184,.4);
    transform:translateX(4px);
  }
  .ep-num{
    font-family:'Fraunces',serif;font-weight:700;font-size:1.6rem;
    line-height:1;min-width:44px;letter-spacing:-0.02em;flex-shrink:0;
    background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .ep-item.ep-locked .ep-num{
    background:none;-webkit-text-fill-color:#666;color:#666;
  }
  .ep-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .ep-name{
    font-family:'Fraunces',serif;font-weight:500;font-style:italic;
    font-size:1.02rem;color:#fff;letter-spacing:-0.005em;line-height:1.35;
  }
  .ep-meta{
    font-family:'Inter',sans-serif;font-size:.78rem;font-weight:400;
    color:#999;letter-spacing:.01em;
  }
  .ep-play{
    font-size:1.25rem;color:rgba(255,255,255,.55);flex-shrink:0;
    transition:color .25s,transform .25s;
  }
  .ep-item:hover:not(.ep-locked) .ep-play{color:#fff;transform:scale(1.15)}
  .ep-item.ep-locked{
    opacity:.55;cursor:not-allowed;
  }
  .ep-item.ep-locked .ep-num{color:#666}
  .ep-item.ep-locked .ep-name{color:#888;font-style:italic}
  .ep-item.ep-locked .ep-play{color:#555}

  /* ===== PAGE 10 — NETFLIX "13 REASONS WHY" ===== */
  .p-netflix{
    background:#0a0a0a;
    justify-content:center;align-items:center;
    padding:0;overflow:hidden;
  }
  .p-netflix::before{
    content:'';position:absolute;inset:-30%;pointer-events:none;z-index:0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(229,9,20,.08) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 40%, rgba(229,9,20,.04) 0%, transparent 65%);
  }
  .nfx-wrap{
    position:relative;z-index:1;width:100%;max-width:900px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:clamp(20px,4vh,40px) clamp(20px,4vw,40px);
    text-align:center;min-height:100vh;
  }

  /* Each stage is stacked on the same spot; JS cycles the .on class */
  .nfx-stage{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(12px,2vh,20px);
    padding:clamp(20px,4vh,40px) clamp(20px,4vw,40px);
    opacity:0;pointer-events:none;
    transition:opacity .6s ease;
  }
  .nfx-stage.on{opacity:1;pointer-events:auto}

  /* Stage 1 — N logo */
  .nfx-n{
    font-family:'Fraunces',serif;font-weight:700;
    font-size:clamp(6rem,18vw,12rem);line-height:1;
    color:#e50914;letter-spacing:-0.05em;
    text-shadow:0 0 60px rgba(229,9,20,.35);
    animation:nfxNPulse 2s ease-in-out infinite;
  }
  @keyframes nfxNPulse{
    0%,100%{text-shadow:0 0 60px rgba(229,9,20,.35);transform:scale(1)}
    50%{text-shadow:0 0 90px rgba(229,9,20,.6);transform:scale(1.03)}
  }
  .nfx-ep{
    font-family:'Inter',sans-serif;font-size:.75rem;font-weight:500;
    letter-spacing:.35em;text-transform:uppercase;color:#999;
    opacity:0;animation:fadeUp .8s .4s ease both;
  }

  /* Stage 2 — Title */
  .nfx-prefix{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(2rem,6vw,3.8rem);letter-spacing:-0.025em;
    color:#fff;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  }
  #nfxThirteen{
    color:#e50914;font-weight:700;font-size:1.25em;
    display:inline-block;transform:scale(0);
    transition:transform .6s cubic-bezier(.34,1.56,.64,1);
  }
  #nfxThirteen.show{transform:scale(1)}
  .nfx-smaller{font-size:.65em;color:#ddd;font-weight:400;opacity:0;transition:opacity .6s ease .3s}
  .nfx-smaller.show{opacity:1}

  .nfx-reallys{
    display:flex;justify-content:center;align-items:baseline;gap:clamp(10px,1.8vw,20px);flex-wrap:wrap;
    font-family:'Fraunces',serif;font-weight:600;font-style:italic;
    font-size:clamp(1.8rem,5vw,3.2rem);color:#fff;letter-spacing:-0.02em;
    margin-top:4px;
  }
  .nfx-really{
    opacity:0;transform:translateY(20px) scale(.8);
    transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
    position:relative;
  }
  /* Progressive size — each "really" bigger than the last for dramatic build */
  .nfx-really:nth-child(1){font-size:1em}
  .nfx-really:nth-child(2){font-size:1.3em}
  .nfx-really:nth-child(3){font-size:1.65em}
  .nfx-really:nth-child(4){font-size:2em}
  .nfx-really.show{opacity:1;transform:translateY(0) scale(1)}
  .nfx-really.cut::before{
    content:'';position:absolute;top:50%;left:-8%;right:-8%;height:3px;
    background:#e50914;transform:scaleX(0);transform-origin:left;
    animation:nfxCut .35s cubic-bezier(.7,.02,.3,.98) forwards;
    box-shadow:0 0 8px rgba(229,9,20,.6);
  }
  @keyframes nfxCut{to{transform:scaleX(1)}}
  .nfx-really.gone{opacity:.25;filter:blur(1px)}

  .nfx-like{
    font-family:'Fraunces',serif;font-weight:600;font-style:italic;
    font-size:clamp(2.2rem,6.5vw,4rem);letter-spacing:-0.03em;
    color:#fff;margin-top:clamp(14px,2vh,22px);
    opacity:0;transform:translateY(20px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .nfx-like.show{opacity:1;transform:translateY(0)}
  .nfx-like em{color:#e50914;font-style:italic;font-weight:700}

  /* Stage 3 — "entertainment" x N + kidding */
  .nfx-ent-row{
    display:flex;flex-direction:column;gap:6px;
    font-family:'Fraunces',serif;font-weight:400;font-style:italic;
    color:#666;font-size:clamp(1rem,2.4vw,1.6rem);
    letter-spacing:.02em;
  }
  .nfx-ent-row .ent-line{opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
  .nfx-ent-row .ent-line.show{opacity:1;transform:translateY(0)}
  .nfx-ent-row .ent-line:nth-child(even){color:#999}
  .nfx-kidding{
    font-family:'Fraunces',serif;font-weight:600;font-style:italic;
    font-size:clamp(1.6rem,4.5vw,2.8rem);color:#fff;letter-spacing:-0.02em;
    opacity:0;transform:scale(.9);margin-top:clamp(12px,2vh,20px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.34,1.56,.64,1);
  }
  .nfx-kidding.show{opacity:1;transform:scale(1)}

  /* Stage 4 — Real reasons.
     Keep scroll functional (the 13 reasons often overflow small screens)
     but hide the visible scrollbar — the dark "rail" in the middle of
     the page was the stage's own scrollbar. Scrolling still works; it's
     just invisible now. */
  .nfx-stage.nfx-s4{
    justify-content:flex-start;
    padding-top:clamp(40px,8vh,80px);
    padding-bottom:clamp(40px,6vh,60px);
    overflow-y:auto;
    scrollbar-width:none;           /* Firefox */
    -ms-overflow-style:none;        /* IE/old Edge */
  }
  .nfx-stage.nfx-s4::-webkit-scrollbar{display:none;width:0;height:0}  /* Chrome/Safari */
  .nfx-reasons-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:clamp(18px,3vh,32px)}
  .nfx-tag{
    font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.28em;text-transform:uppercase;color:#e50914;
    padding:4px 10px;border:1px solid rgba(229,9,20,.35);border-radius:3px;
  }
  .nfx-h2{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(1.4rem,3.4vw,2.1rem);letter-spacing:-0.02em;color:#fff;
  }
  .nfx-h2 em{font-style:italic;color:#e50914;font-weight:600}
  .nfx-reasons{
    display:flex;flex-direction:column;gap:10px;width:100%;max-width:620px;margin:0 auto;
  }
  .nfx-reason{
    display:flex;gap:18px;align-items:baseline;
    padding:14px 20px;border:1px solid rgba(255,255,255,.08);border-radius:8px;
    background:rgba(255,255,255,.03);color:#e5e5e5;
    font-family:'Fraunces',serif;font-weight:400;font-size:clamp(.95rem,2vw,1.12rem);
    line-height:1.5;text-align:left;
    opacity:0;transform:translateX(-20px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s ease,background .3s ease;
  }
  .nfx-reason.show{opacity:1;transform:translateX(0)}
  .nfx-reason:hover{border-color:rgba(229,9,20,.4);background:rgba(229,9,20,.06)}
  .nfx-num{
    font-family:'Fraunces',serif;font-weight:700;font-size:1.35em;color:#e50914;
    flex-shrink:0;min-width:36px;letter-spacing:-0.02em;
  }
  .nfx-text{flex:1;font-style:italic}
  .nfx-aside{
    font-style:italic;font-weight:400;color:rgba(255,255,255,.55);
    font-size:.8em;margin-left:4px;
  }

  /* Reason 01 — 40% bigger, premium treatment for "I like your smile" */
  .nfx-reason-big{
    padding:22px 26px;border-width:2px;
    background:linear-gradient(135deg, rgba(229,9,20,.12), rgba(168,85,247,.06));
    border-color:rgba(229,9,20,.35);
    box-shadow:0 6px 24px rgba(229,9,20,.12);
    font-size:clamp(1.3rem,2.8vw,1.56rem); /* 40% bigger than base */
    align-items:center;
  }
  .nfx-reason-big .nfx-num{font-size:1.8em;min-width:54px}
  .nfx-reason-big .nfx-text{line-height:1.4}
  .nfx-reason-big .nfx-smile{
    color:#fff;font-weight:600;font-style:italic;
    position:relative;display:inline-block;
  }
  .nfx-reason-big .nfx-smile::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:linear-gradient(90deg,transparent,#e50914,transparent);
    transform:scaleX(0);transform-origin:center;
    animation:smileUnderline 1.2s 1.2s cubic-bezier(.7,.02,.3,.98) forwards;
  }
  @keyframes smileUnderline{to{transform:scaleX(1)}}
  .nfx-reason-big .nfx-aside{
    display:block;margin-top:6px;margin-left:0;
    font-size:.72em;color:rgba(255,255,255,.65);
  }

  /* Happy Birthday Boy button — Boy is the dog */
  .boy-btn{
    margin:clamp(20px,4vh,36px) auto 0;
    background:linear-gradient(135deg,#fef3c7,#fca5a5,#f9a8d4);
    color:#7c2d12;border:none;padding:16px 32px;border-radius:100px;
    font-family:'Fraunces',serif;font-weight:600;font-style:italic;
    font-size:1.02rem;cursor:pointer;
    display:inline-flex;align-items:center;gap:12px;
    box-shadow:0 6px 24px rgba(236,72,153,.3),0 0 0 3px rgba(253,224,71,.25);
    transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
    opacity:0;animation:fadeUp .8s 1s ease both;
    position:relative;overflow:visible;
  }
  .boy-btn:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 10px 32px rgba(236,72,153,.4),0 0 0 4px rgba(253,224,71,.35)}
  .boy-btn .boy-cake{font-size:1.3rem;animation:gentleFloat 3s ease-in-out infinite}
  .boy-btn .boy-dog{font-size:1.3rem;animation:wiggle 2s ease-in-out infinite;display:inline-block;transform-origin:bottom center}
  .boy-btn.celebrating{
    /* opacity:1 is explicit here — the base .boy-btn rule sets opacity:0
       with fadeUp animation. When we override the animation with boyPop,
       the fadeUp fill no longer holds opacity, so we set it explicitly. */
    opacity:1;
    animation:boyPop .6s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes boyPop{
    0%{transform:scale(1)}
    40%{transform:scale(1.2) rotate(-2deg)}
    70%{transform:scale(1.1) rotate(2deg)}
    100%{transform:scale(1.08) rotate(0)}
  }

  /* Big "Happy Birthday, Boy!" celebratory banner that pops in on click */
  .bday-banner{
    position:fixed;top:50%;left:50%;z-index:99999;pointer-events:none;
    transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0;
    font-family:'Fraunces',serif;font-weight:700;font-style:italic;
    font-size:clamp(1.6rem,5vw,3.2rem);line-height:1.15;
    color:#7c2d12;letter-spacing:-0.01em;text-align:center;
    padding:20px 40px;max-width:min(90vw, 720px);
    background:linear-gradient(135deg,#fef3c7 0%,#fca5a5 55%,#f9a8d4 100%);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.35), 0 0 0 3px rgba(253,224,71,.45);
    animation:bdayPop 2.2s cubic-bezier(.2,.7,.2,1) forwards;
    filter:drop-shadow(0 0 20px rgba(253,224,71,.3));
  }
  .bday-banner .bday-row-1{
    display:block;font-size:.68em;font-style:italic;font-weight:500;
    color:rgba(124,45,18,.75);margin-bottom:4px;letter-spacing:.08em;
    text-transform:uppercase;
  }
  .bday-banner .bday-emos{display:block;font-style:normal;margin-top:8px;font-size:1.15em}
  @keyframes bdayPop{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}
    18% {opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(4deg)}
    30% {transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
    42% {transform:translate(-50%,-50%) scale(1.05) rotate(1deg)}
    55% {transform:translate(-50%,-50%) scale(1) rotate(0)}
    82% {opacity:1}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.08) rotate(0)}
  }
  /* Confetti + party emojis */
  .boy-confetti{
    position:fixed;z-index:99999;pointer-events:none;
    font-size:1.6rem;will-change:transform,opacity;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
  }
  @keyframes boyConfetti{
    0%{transform:translate(0,0) rotate(0) scale(0);opacity:0}
    15%{opacity:1;transform:translate(calc(var(--dx)*.2),calc(var(--dy)*.15)) rotate(calc(var(--rot)*.2)) scale(1.2)}
    100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.85);opacity:0}
  }

  /* ===== PAGE 11 — COMPLIMENT + HEARTBEATS ===== */
  .p-compliment{
    background:linear-gradient(135deg,#fdf2f8,#fef3c7,#faf5ff);
    justify-content:flex-start;align-items:center;
    overflow-y:auto;padding-top:clamp(32px,6vh,60px);padding-bottom:clamp(32px,6vh,60px);
  }
  .compl-wrap{
    width:100%;max-width:680px;
    display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,28px);
    text-align:center;
  }
  .compl-head h2{letter-spacing:-0.02em}
  .compl-card{
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-lg);padding:clamp(24px,4vh,40px) clamp(22px,4vw,36px);
    width:100%;box-shadow:0 4px 24px rgba(199,125,149,.12);
    display:flex;flex-direction:column;gap:10px;
  }
  .compl-line{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.5;letter-spacing:-0.01em;
    color:var(--ink);
  }
  .compl-line em{font-style:italic;color:var(--accent-deep);font-weight:500}
  .adj-stream{
    display:inline-block;color:var(--accent-deep);font-style:italic;font-weight:500;
    position:relative;min-width:160px;min-height:1.4em;
    transition:opacity .3s ease;
  }
  .compl-iw{
    position:relative;color:#b45309;font-weight:500;font-style:italic;
    background:#fef3c7;padding:0 6px;border-radius:4px;
  }
  .compl-note{
    font-family:'Inter',sans-serif;font-size:.55em;color:var(--ink-faint);
    margin-left:2px;cursor:help;
  }
  .compl-footnote{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:.82rem;margin-top:8px;text-align:left;
    padding-top:10px;border-top:1px dashed var(--line);
  }
  /* "heart skipped a beat" — not a sway, but a cardiac double-beat with a tiny catch */
  .jhumki-emo{
    display:inline-block;font-size:1.2em;margin-left:4px;transform-origin:center;
    animation:heartSkip 1.6s cubic-bezier(.2,.7,.2,1) infinite;
    filter:drop-shadow(0 2px 6px rgba(236,72,153,.3));
  }
  @keyframes heartSkip{
    0%,100%{transform:scale(1)}
    14%{transform:scale(1.3)}
    28%{transform:scale(.95)}
    42%{transform:scale(1.18)}
    55%{transform:scale(1)}
    60%{transform:scale(1)} /* tiny catch — the "skipped" beat */
    70%{transform:scale(1.08)}
    80%{transform:scale(1)}
  }


  .compl-closing{
    display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:clamp(14px,2.4vh,22px);
  }
  .compl-sig{
    font-family:'Fraunces',serif;font-style:italic;font-weight:300;
    color:var(--ink-muted);font-size:1.1rem;
  }
  .compl-question{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.4rem,3.6vw,2rem);letter-spacing:-0.02em;
    color:var(--ink);
  }
  .compl-question em{font-style:italic;color:var(--accent-deep);font-weight:500}
  .compl-next{margin-top:clamp(10px,2vh,18px)}

  /* Page 11 polaroid — slightly larger + center-aligned */
  .compl-polaroid{
    align-self:center;margin:0 auto 14px;max-width:220px;
    transform:rotate(-2deg);
  }
  .compl-polaroid:hover{transform:rotate(-0.5deg) translateY(-3px)}
  .compl-polaroid img{width:200px;height:240px}
  .compl-polaroid .polaroid-placeholder{width:200px;height:240px}
  .compl-polaroid .polaroid-caption em{color:var(--accent-deep);font-style:italic}

  /* ===== GLOBAL NAV: BACK + SKIP — Netflix-glass pill =====
     One aesthetic that reads well over light gradients, dark Netflix pages,
     and the banner. No more per-page overrides. */
  .nav-btn{
    position:fixed;top:20px;z-index:99998;
    padding:7px 15px 7px 13px;
    background:rgba(10,10,10,.55);
    color:rgba(255,255,255,.9);
    border:1px solid rgba(255,255,255,.14);
    border-radius:100px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;
    letter-spacing:.04em;text-transform:lowercase;
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 4px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),
               border-color .25s ease,
               color .25s ease,
               background .25s ease,
               opacity .4s ease;
    opacity:0;pointer-events:none;
  }
  .nav-btn.show{opacity:1;pointer-events:auto}
  .nav-btn:hover{
    transform:scale(1.05);
    background:rgba(229,9,20,.18);
    border-color:rgba(229,9,20,.55);
    color:#fff;
  }
  .nav-btn iconify-icon{
    font-size:.95rem;color:rgba(255,255,255,.7);
    transition:transform .3s cubic-bezier(.2,.7,.2,1), color .25s ease;
  }
  .nav-btn:hover iconify-icon{color:#fff}
  /* Arrows nudge in their direction on hover */
  .nav-back:hover iconify-icon{transform:translateX(-3px)}
  .nav-skip:hover iconify-icon:last-child{transform:translateX(3px)}
  .nav-back{left:20px}
  .nav-skip{right:20px}

  /* ===== CONFIRM MODAL ===== */
  .confirm-overlay{
    position:fixed;inset:0;z-index:99990;
    background:rgba(26,26,26,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
  }
  .confirm-overlay.show{opacity:1;pointer-events:auto}
  .confirm-card{
    background:var(--surface);border:1px solid var(--line);
    border-radius:24px;padding:clamp(28px,5vw,44px) clamp(26px,4vw,38px);
    max-width:440px;width:100%;text-align:center;
    box-shadow:0 24px 60px rgba(0,0,0,.25);
    transform:scale(.85);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    display:flex;flex-direction:column;gap:14px;align-items:center;position:relative;
  }
  .confirm-overlay.show .confirm-card{transform:scale(1)}
  .confirm-close{
    position:absolute;top:14px;right:14px;
    width:30px;height:30px;border-radius:50%;border:none;
    background:var(--bg);color:var(--ink-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .25s,color .25s,transform .25s;
  }
  .confirm-close:hover{background:var(--ink-faint);color:var(--ink);transform:rotate(90deg)}
  .confirm-close iconify-icon{font-size:1.1rem}
  .confirm-emo{font-size:clamp(3rem,8vw,4.5rem);line-height:1;animation:gentleFloat 3s ease-in-out infinite}
  .confirm-emo iconify-icon{font-size:1em;display:block}
  .confirm-msg{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.1rem,2.6vw,1.4rem);line-height:1.5;letter-spacing:-0.01em;
    color:var(--ink);
  }
  .confirm-msg em{font-style:italic;color:var(--accent-deep);font-weight:500}
  .confirm-actions{display:flex;flex-direction:column;gap:9px;margin-top:10px;width:100%;align-items:stretch}
  .confirm-btn{
    padding:13px 26px;border:none;border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.94rem;font-weight:600;letter-spacing:.004em;
    cursor:pointer;color:#fff;
    background:linear-gradient(100deg,#ff4fb8,#a855f7 55%,#8b3fe8);
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 8px 22px rgba(139,63,232,.28);
    transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
  }
  .confirm-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(139,63,232,.42)}
  .confirm-btn-2{
    padding:11px 26px;border:1px solid var(--line);border-radius:100px;
    font-family:'Inter',sans-serif;font-size:.88rem;font-weight:500;
    cursor:pointer;color:var(--ink-soft);background:var(--surface);
    transition:transform .25s var(--ease-silk), border-color .25s, color .25s;
  }
  .confirm-btn-2:hover{transform:translateY(-1px);border-color:var(--accent-2);color:var(--accent-2-deep)}

  /* ===== SKIP-TO-PHASE-2 PILL (Page 1 only) ===== */
  .skip-pill{
    position:fixed;bottom:22px;left:22px;z-index:99999;
    padding:10px 18px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-soft);
    border-radius:100px;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;
    letter-spacing:-0.005em;
    box-shadow:0 4px 18px rgba(139,92,246,.1);
    /* Hidden until page 1 has typed in — lets the hero breathe first */
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, color .3s, background .3s, box-shadow .3s, opacity .5s ease;
  }
  .skip-pill.show{opacity:1;pointer-events:auto;transform:translateY(0)}
  .skip-pill:hover{transform:translateY(-2px) scale(1.04);border-color:var(--accent-2-deep);color:var(--accent-2-deep);box-shadow:0 6px 22px rgba(139,92,246,.2)}
  .skip-pill iconify-icon{font-size:1rem;color:var(--accent-2-deep)}
  .skip-pill .skip-sub{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--ink-muted);font-size:.78rem;margin-right:2px;opacity:.95}

  /* ===== GLOBAL ANIMATION SMOOTHNESS PASS ===== */
  /* Silky shared easing tokens */
  :root{
    --ease-silk: cubic-bezier(.22,.61,.36,1);
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
    --ease-smooth: cubic-bezier(.4,.0,.2,1);
  }

  /* will-change ONLY on short-lived particles that need GPU compositing.
     Do NOT apply to static UI — creates too many permanent layers. */
  .petal, .lily, .her-fav, .maggi-packet, .maggi-bowl,
  .rocket-exhaust, .spill-drop, .rizz-spark, .pushup-counter,
  .flex-spark, .tennis-ball, .tennis-trail, .hoop-ball, .swoosh,
  .zen-el, .football-ball, .ethnic-bg-icon {
    will-change: transform, opacity;
  }

  /* Page transitions — keep silky but without forcing permanent GPU layer */
  .page{transition:opacity .7s var(--ease-silk), transform .7s var(--ease-silk)}
  .page.exit-left{opacity:0;transform:scale(.92) translateX(-50px)}

  /* Pause looping animations on non-active pages — saves a lot of CPU/GPU */
  .page:not(.active) .magnet,
  .page:not(.active) .magnet-spark,
  .page:not(.active) .magnet-field,
  .page:not(.active) .tall-glass,
  .page:not(.active) .booze-drip,
  .page:not(.active) .ethnic-bg-icon,
  .page:not(.active) .loader-fill,
  .page:not(.active) .btn-yes,
  .page:not(.active) .celebrate-ring iconify-icon,
  .page:not(.active) .warn-text,
  .page:not(.active) .warn-text iconify-icon{
    animation-play-state: paused !important;
  }

  /* Buttons — silky without GPU layer */
  .btn-next, .btn-yes, #noBtn, .act-card, .song-toggle, .skip-pill{
    transition:transform .35s var(--ease-silk), background .35s var(--ease-smooth), border-color .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), color .35s var(--ease-smooth);
  }

  /* Smoother slider drags — only will-change while actively dragging */
  .stk.dragging .stk-handle, .stk.dragging .stk-fill{will-change:transform,width,left}
  .stk:not(.dragging) .stk-handle, .stk:not(.dragging) .stk-fill{will-change:auto}
  .stk-fill{transition:width .18s var(--ease-silk)}
  .stk-handle{transition:left .18s var(--ease-silk), transform .2s var(--ease-silk), box-shadow .25s var(--ease-smooth)}
  .stk.dragging .stk-fill, .stk.dragging .stk-handle{transition:none}

  /* Smoother reply bubble reveal */
  .reply-bubble{transition:opacity .5s var(--ease-silk), max-height .5s var(--ease-silk), border-color .4s var(--ease-smooth), padding .5s var(--ease-silk)}

  /* Learned section unlock */
  .learned-section{transition:opacity .8s var(--ease-silk), filter .8s var(--ease-silk)}

  /* Respect user's reduced-motion preference */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .15s !important;
    }
    .page{transition:opacity .2s linear, transform .2s linear}
    .magnet, .magnet-spark, .magnet-field,
    .tall-glass, .booze-drip, .ethnic-bg-icon,
    .loader-fill, body::before, .btn-yes{animation:none !important}
  }

  /* Smooth momentum scroll on report page */
  .p-report{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

  /* ===== HER-THEMED BUTTON BURST (Anime.js particles) ===== */
  .burst-layer{position:fixed;inset:0;pointer-events:none;z-index:60}
  .burst-bit{position:fixed;will-change:transform,opacity;transform-origin:center}
  .burst-bit.is-flower, .burst-bit .rhodo-svg{width:36px;height:36px;display:block}
  .burst-bit .rhodo-svg{filter:drop-shadow(0 3px 6px rgba(139,63,232,.25))}
  .burst-ic{font-size:28px;display:block;filter:drop-shadow(0 2px 5px rgba(139,63,232,.22))}
  .burst-ic.tint-pink{color:#ff4fb8}
  .burst-ic.tint-purple{color:#8b3fe8}
  @media (prefers-reduced-motion: reduce){ .burst-layer{display:none} }

  /* ===== CREATIVE PAGE TRANSITIONS (Anime.js) ===== */
  .transition-stage{position:fixed;inset:0;z-index:9600;pointer-events:none;overflow:hidden}
  .tx-shape{position:absolute;will-change:transform,opacity;backface-visibility:hidden}
  .tx-bar{position:absolute;top:0;height:100%;will-change:transform}
  .tx-bloom-wrap{display:flex;align-items:center;justify-content:center;box-shadow:none}
  .tx-bloom{filter:drop-shadow(0 0 30px rgba(255,255,255,.5))}
  .tx-bloom .rhodo-svg{width:100%;height:100%}
  @media (prefers-reduced-motion: reduce){ .transition-stage{display:none} }

  /* ===== PAGE 13 — PICK OUR DATE ===== */
  .p-datepick{justify-content:flex-start;padding-top:clamp(36px,6vh,60px);gap:clamp(12px,2vh,18px);background:linear-gradient(180deg,#fdf2f8,var(--bg))}
  .datepick-wrap{width:100%;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,18px);text-align:center}
  .datepick-cols{display:flex;gap:clamp(16px,3vw,28px);width:100%;align-items:stretch;flex-wrap:wrap;justify-content:center}
  .cal{flex:1 1 300px;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(199,125,149,.1)}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .cal-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;color:var(--ink)}
  .cal-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--accent-2-deep);transition:background .2s,transform .2s}
  .cal-nav:hover{background:var(--accent-2-bg);transform:translateY(-1px)}
  .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
  .cal-dow span{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);text-align:center;padding:4px 0}
  .cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-day{aspect-ratio:1;border:none;background:transparent;border-radius:9px;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:background .2s,color .2s,transform .15s;display:flex;align-items:center;justify-content:center}
  .cal-day.empty{visibility:hidden}
  .cal-day:hover:not(.past):not(.sel){background:var(--accent-2-bg);color:var(--accent-2-deep)}
  .cal-day.past{color:var(--ink-faint);cursor:not-allowed}
  .cal-day.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .cal-day.sel{background:linear-gradient(135deg,#ff4fb8,#8b3fe8);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(139,63,232,.35);transform:scale(1.05)}
  .opt-col{flex:1 1 240px;max-width:300px;display:flex;flex-direction:column;gap:10px}
  .opt-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);text-align:left}
  .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .opt-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;transition:transform .2s,border-color .2s,box-shadow .2s}
  .opt-card iconify-icon{font-size:1.4rem;color:var(--accent-2-deep)}
  .opt-card span{font-family:'Fraunces',serif;font-size:1rem;font-weight:500;color:var(--ink)}
  .opt-card small{font-size:.66rem;color:var(--ink-muted)}
  .opt-card:hover{transform:translateY(-2px);border-color:var(--accent-2);box-shadow:0 8px 20px rgba(139,63,232,.14)}
  .opt-card.sel{border-color:transparent;background:linear-gradient(135deg,#ff4fb8,#8b3fe8);box-shadow:0 8px 22px rgba(139,63,232,.3)}
  .opt-card.sel iconify-icon,.opt-card.sel span,.opt-card.sel small{color:#fff}
  .datepick-summary{font-family:'Fraunces',serif;font-style:italic;color:var(--ink-soft);font-size:.95rem;min-height:1.2em}
  .btn-next:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;pointer-events:none;transform:none}

  /* ===== SONG BUTTONS + PLAYER MODAL (page 14) ===== */
  .song-row{display:flex;flex-direction:column;gap:9px;margin-top:8px}
  .song-btn{
    display:flex;align-items:center;gap:13px;padding:11px 15px;border-radius:14px;
    border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;width:100%;
    transition:transform .25s var(--ease-silk), border-color .25s, box-shadow .25s;
  }
  .song-btn:hover{transform:translateY(-2px);border-color:var(--accent-2);box-shadow:0 8px 20px rgba(139,63,232,.16)}
  .song-play{
    flex-shrink:0;width:38px;height:38px;border-radius:50%;color:#fff;font-size:1.15rem;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#ff4fb8,#8b3fe8);box-shadow:0 4px 12px rgba(139,63,232,.3);
  }
  .song-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .song-meta small{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
  .song-meta strong{font-family:'Fraunces',serif;font-weight:500;font-size:1rem;color:var(--ink)}
  .song-note{font-size:.8rem;color:var(--ink-soft);margin-top:8px;font-style:italic}

  .song-overlay{
    position:fixed;inset:0;z-index:99992;display:flex;align-items:center;justify-content:center;
    background:rgba(20,8,28,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;
    transition:opacity .3s ease;padding:20px;
  }
  .song-overlay.show{opacity:1;pointer-events:auto}
  .song-card{
    position:relative;width:100%;max-width:420px;background:var(--surface);
    border-radius:20px;padding:clamp(22px,4vw,30px);box-shadow:0 30px 80px rgba(0,0,0,.4);
    transform:scale(.94);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .song-overlay.show .song-card{transform:scale(1)}
  .song-close{
    position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;
    background:var(--accent-bg);color:var(--accent-deep);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;
  }
  .song-close:hover{transform:rotate(90deg);background:var(--accent)}
  .song-card-label{
    display:block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-muted);margin-bottom:14px;
  }
  .song-embed iframe{display:block;width:100%}

  /* ===== PAGE 15 — EPISODE 1 FINALE ===== */
  .p-finale{justify-content:center;background:linear-gradient(160deg,#fdf2f8,#faf5ff,#f3e8ff)}
  .finale-wrap{position:relative;z-index:1;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.3vh,22px);text-align:center}
  .finale-icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,var(--accent-bg),transparent 72%);color:var(--accent-deep);font-size:2.6rem}
  .finale-card{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 22px;box-shadow:0 12px 34px rgba(199,125,149,.12)}
  .finale-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);text-align:left}
  .finale-row:last-child{border-bottom:none}
  .fr-label{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);flex-shrink:0}
  .fr-val{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ink);text-align:right}
  .fr-laughs{background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:600}
  .finale-tsitp{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1rem;line-height:1.6;color:var(--ink-soft);max-width:480px}
  .finale-tsitp em{font-style:italic;color:var(--accent-2-deep);font-weight:400}
  .finale-tsitp iconify-icon{color:var(--accent-2-deep);vertical-align:-2px}
  .finale-end{display:flex;flex-direction:column;gap:1px;margin-top:4px}
  .fe-strike{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--ink-faint);text-decoration:line-through}
  .fe-real{font-family:'Fraunces',serif;font-size:1.55rem;color:var(--ink)}
  .fe-real em{font-style:italic;color:var(--accent-deep)}

  /* ===== PER-PAGE AMBIENT BACKGROUND (themed, faint, drifting) ===== */
  .ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
  .ambient-ic{position:absolute;display:block;will-change:transform}
  .ambient-flower .rhodo-svg{width:100%;height:auto;display:block}
  @keyframes ambientFloat{
    0%,100%{transform:translateY(0) rotate(-6deg)}
    50%{transform:translateY(-18px) rotate(8deg)}
  }
  @media (prefers-reduced-motion: reduce){ .ambient-ic{animation:none !important} }
  /* keep page content above the ambient layer */
  .board-wrap,.rapid-wrap,.buttons-wrap,.marry-wrap,.celebrate-wrap,.datepick-wrap,.hero-inner{position:relative;z-index:1}

  /* ===== LAUGH METER (Episode 1) ===== */
  .laugh-meter{
    position:fixed;right:20px;bottom:20px;transform:scale(.92);
    z-index:9000;display:none;align-items:center;gap:12px;
    padding:8px 8px 8px 14px;border-radius:18px;cursor:pointer;
    font-family:'Inter',sans-serif;color:#fff;
    background:linear-gradient(135deg, rgba(255,79,184,.96), rgba(139,63,232,.96));
    border:1px solid rgba(255,255,255,.4);
    box-shadow:0 12px 34px rgba(139,63,232,.4), inset 0 1px 0 rgba(255,255,255,.35);
    backdrop-filter:blur(8px);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, opacity .4s;
    opacity:0;
  }
  .laugh-meter.show{display:inline-flex;opacity:1;transform:scale(1)}
  .laugh-meter:hover{box-shadow:0 16px 44px rgba(139,63,232,.55);transform:scale(1.04) translateY(-1px)}
  .laugh-meter:active{transform:scale(.96)}
  .laugh-meter.pop{animation:lmShake .4s ease}
  .laugh-meter.pop .lm-emo{animation:lmPop .5s cubic-bezier(.34,1.56,.64,1)}
  .laugh-meter.pop .lm-count{animation:lmCountPop .5s cubic-bezier(.34,1.56,.64,1)}
  @keyframes lmShake{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.03) rotate(-1.5deg)}60%{transform:scale(1.02) rotate(1.5deg)}}
  @keyframes lmPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.55) rotate(-14deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes lmCountPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
  .lm-emo{font-size:1.55rem;line-height:1;display:inline-block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
  .lm-emo iconify-icon{font-size:1em;display:block;line-height:1}
  .lm-body{display:flex;flex-direction:column;gap:5px;line-height:1;text-align:left;min-width:96px}
  .lm-text{font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.95}
  .lm-bar{position:relative;height:6px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
  .lm-bar-fill{position:absolute;inset:0;width:0%;border-radius:999px;
    background:linear-gradient(90deg,#fff,#ffe3f5);box-shadow:0 0 10px rgba(255,255,255,.6);
    transition:width .45s cubic-bezier(.34,1.56,.64,1)}
  .lm-count{
    font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;line-height:1;
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:13px;background:rgba(255,255,255,.22);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  }
  @media(max-width:560px){
    .laugh-meter{bottom:12px;padding:6px 6px 6px 11px;gap:9px}
    .lm-body{min-width:74px}
    .lm-emo{font-size:1.3rem}
    .lm-count{width:34px;height:34px;font-size:1.2rem}
  }
  /* Floating 😂 that drift up on each tap */
  .laugh-float-layer{position:fixed;inset:0;z-index:8999;pointer-events:none}
  .laugh-float{
    position:absolute;font-size:1.5rem;
    animation:laughFloatUp 1.1s ease-out forwards;
  }
  .laugh-float iconify-icon{font-size:1.5rem;display:block}
  @keyframes laughFloatUp{
    0%{opacity:0;transform:translateY(0) scale(.6)}
    20%{opacity:1;transform:translateY(-12px) scale(1.1)}
    100%{opacity:0;transform:translateY(-90px) scale(.9)}
  }

  /* Laugh meter total — shown on the Episode 1 finale (page 6) */
  .laugh-total{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    margin-top:6px;padding:16px 26px;border-radius:var(--radius-lg);
    background:linear-gradient(135deg, var(--accent-bg), var(--accent-2-bg));
    border:1px solid var(--line);
  }
  .laugh-total-num{
    font-family:'Fraunces',serif;font-weight:500;
    font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;
    background:var(--nf-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .laugh-total-label{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted)}
  .laugh-total-verdict{font-family:'Fraunces',serif;font-style:italic;font-size:1.05rem;color:var(--ink-soft);margin-top:6px;text-align:center;max-width:340px}

  /* ===== RHODODENDRON (buransh) — her fav flower ===== */
  .rhodo-svg{display:block;width:100%;height:100%;overflow:visible}
  /* Blossom blooms open: the whole petal cluster scales up with a soft overshoot
     (scaling the group, not each petal, so per-petal positioning stays intact) */
  .rhodo-svg .rhodo-petals{
    transform-box:fill-box;transform-origin:center;
    animation:rhodoBloom .9s cubic-bezier(.34,1.56,.64,1) both;
  }
  .rhodo-svg .rhodo-core{transform-box:fill-box;transform-origin:center;animation:rhodoCore .5s .5s ease both}
  @keyframes rhodoBloom{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
  @keyframes rhodoCore{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
  /* Idle sway for the bloomed ring flower */
  .rhodo-ring{overflow:visible}
  .rhodo-ring .rhodo-svg{width:86px;height:86px;animation:rhodoSway 4.5s ease-in-out infinite;filter:drop-shadow(0 4px 14px rgba(214,51,108,.3))}
  @keyframes rhodoSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

  /* Falling petals/blossoms shower */
  .rhodo-fall{position:fixed;top:-14vh;z-index:8998;pointer-events:none;will-change:transform,opacity}
  .rhodo-fall .rhodo-svg{animation:rhodoSpin var(--swaydur,2.6s) ease-in-out infinite}
  @keyframes rhodoSpin{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
  @keyframes rhodoFall{
    0%{transform:translate(0,0) rotate(0);opacity:0}
    8%{opacity:1}
    92%{opacity:1}
    100%{transform:translate(var(--drift,0), 122vh) rotate(var(--spin,360deg));opacity:0}
  }
  /* Radial burst from the celebration ring */
  @keyframes rhodoBurst{
    0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}
    15%{opacity:1}
    100%{transform:translate(var(--dx,0),var(--dy,0)) scale(1) rotate(var(--rot,360deg));opacity:0}
  }
  @media (prefers-reduced-motion: reduce){
    .rhodo-fall{display:none}
    .rhodo-svg, .rhodo-ring .rhodo-svg{animation:none !important}
  }