:root{--cream:#FFF7EC;--purple:#3B1F5C;--coral:#FF6F59;--lime:#C6F35A;--sky:#9ED8F5;--mustard:#FFC94D}
body{background:var(--cream);color:var(--purple);font-family:'Plus Jakarta Sans',sans-serif;
background-image:radial-gradient(circle at 10% 0%,#ffe3d6 0,transparent 40%),radial-gradient(circle at 100% 30%,#efe3ff 0,transparent 35%)}
.disp{font-family:'Bricolage Grotesque',sans-serif}
.btn{min-height:48px;border-radius:999px;padding:0 22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 4px 0 #c94a37}
.btn-purple{background:var(--purple);color:var(--cream)}
.btn-ghost{border:2px solid var(--purple)}
.chip{min-height:44px;border-radius:999px;padding:0 16px;border:2px solid var(--purple);font-weight:600;display:inline-flex;align-items:center}
.chip.on{background:var(--purple);color:var(--cream)}
.chip.sug{border-style:dashed;border-color:var(--coral);color:#b83c28}
.card{background:#fff;border-radius:24px;border:2px solid var(--purple);box-shadow:4px 4px 0 var(--purple)}
.inp{width:100%;min-height:48px;border-radius:16px;border:2px solid var(--purple);padding:10px 14px;background:#fff}
.draw{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.confetti{position:fixed;top:-10px;width:10px;height:14px;animation:fall 2.2s linear forwards;z-index:60}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
.demo{border:3px dashed var(--purple);background:#f3ecff;border-radius:28px}
@media (prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}.pop,.pulse{animation:none}.confetti{display:none}}