:root{
  --ink:#2b2340; --soft:#6b6385; --cream:#fff8ef; --peach:#ffb38a; --plum:#7b5cff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(160deg,#fff1e6 0%,#fde2e4 40%,#e2ece9 100%);
  overflow-x:hidden;
}
.sky{position:fixed;inset:0;pointer-events:none;
  background:
   radial-gradient(circle at 15% 20%,rgba(255,214,165,.6),transparent 35%),
   radial-gradient(circle at 85% 15%,rgba(160,196,255,.45),transparent 35%),
   radial-gradient(circle at 70% 85%,rgba(202,255,191,.5),transparent 40%);
  animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-2%,2%) scale(1.05)}}
main{position:relative;max-width:640px;margin:0 auto;padding:56px 22px 40px;text-align:center}
.eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
h1{font-family:'Fraunces',serif;font-size:clamp(3.2rem,11vw,5.5rem);font-weight:700;line-height:1;margin:.3em 0 .25em}
h1 em{font-weight:400;color:var(--plum)}
.sub{color:var(--soft);font-size:1.05rem;line-height:1.6}
.jar{background:none;border:0;cursor:pointer;margin:34px auto 8px;display:block;position:relative;-webkit-tap-highlight-color:transparent}
.jar-svg{width:200px;height:240px;filter:drop-shadow(0 18px 30px rgba(123,92,255,.18));transition:transform .3s}
.jar:hover .jar-svg{transform:rotate(-3deg) scale(1.03)}
.jar.shake .jar-svg{animation:shake .55s}
@keyframes shake{20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.lid{fill:#c9a27e;stroke:#a17c5c;stroke-width:3}
.glass{fill:rgba(255,255,255,.45);stroke:rgba(43,35,64,.35);stroke-width:3}
.shine{stroke:rgba(255,255,255,.9);stroke-width:6;fill:none;stroke-linecap:round}
.tap{display:block;font-family:'Fraunces',serif;font-style:italic;color:var(--soft);margin-top:6px;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.card{background:var(--cream);border-radius:22px;padding:30px 26px 24px;margin:18px auto 0;
  box-shadow:0 20px 50px rgba(43,35,64,.12);position:relative;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.card::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,214,165,.8);border-radius:3px}
@keyframes pop{from{transform:translateY(30px) scale(.9);opacity:0}}
.num{font-size:.75rem;letter-spacing:.15em;color:var(--soft);text-transform:uppercase}
.joy{font-family:'Fraunces',serif;font-size:clamp(1.4rem,4.6vw,1.9rem);line-height:1.35;margin:12px 0 22px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{font:500 .95rem 'Inter',sans-serif;border:0;border-radius:999px;padding:11px 20px;cursor:pointer;
  background:var(--ink);color:#fff;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(43,35,64,.25)}
.btn.ghost.on{background:#ffadad;box-shadow:none}
.kept{margin-top:44px;text-align:left}
.kept h2{font-family:'Fraunces',serif;font-weight:400;font-style:italic;text-align:center;margin-bottom:14px}
.kept ul{list-style:none;display:grid;gap:10px}
.kept li{background:rgba(255,255,255,.6);border-radius:14px;padding:12px 16px;font-size:.95rem;display:flex;justify-content:space-between;gap:10px}
.kept li button{background:none;border:0;cursor:pointer;color:var(--soft);font-size:1rem}
footer{margin-top:56px;font-size:.85rem;color:var(--soft)}
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.bit{position:absolute;width:10px;height:14px;border-radius:2px;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}