:root{--cream:#FFFBF5;--green:#2E9E5B;--orange:#F28C28;--red:#E5484D;--yellow:#E8B400;--ink:#2B2118}
*{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);
background:var(--cream);background-image:radial-gradient(circle at 10% 0%,#FFE8CF 0,transparent 40%),radial-gradient(circle at 100% 30%,#E3F5E9 0,transparent 35%);min-height:100vh}
.card{background:#fff;border-radius:22px;box-shadow:0 4px 18px rgba(120,70,20,.07);border:1px solid #F4E9DB}
.inp{width:100%;border:2px solid #F0E3D2;border-radius:14px;padding:14px 16px;font-size:17px;background:#FFFDF9;outline:none;font-family:inherit}
.inp:focus{border-color:var(--orange);background:#fff}
.btn{border-radius:16px;font-weight:700;min-height:56px;padding:0 20px;font-size:17px;transition:transform .1s}
.btn:active{transform:scale(.97)}
.chip{border-radius:999px;padding:8px 14px;font-weight:600;border:2px solid #F0E3D2;background:#fff;font-size:14px}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.big{font-weight:800;letter-spacing:-.03em;line-height:1}
input[type=range]{accent-color:var(--orange);width:100%;height:28px}
.conf{position:fixed;top:-10px;width:10px;height:14px;animation:fall 1.8s linear forwards;z-index:99;pointer-events:none}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.6}}