:root{
  --bg:#0f0b1e; --ink:#efe7d6; --mute:#9a90b5;
  --mag:#ff3d9a; --teal:#2de2c8; --amber:#ffb627; --line:rgba(239,231,214,.14);
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'JetBrains Mono',monospace;min-height:100vh;
  background:
   radial-gradient(900px 500px at 10% -10%,rgba(255,61,154,.18),transparent 60%),
   radial-gradient(800px 600px at 110% 20%,rgba(45,226,200,.13),transparent 60%),
   radial-gradient(700px 500px at 50% 120%,rgba(255,182,39,.12),transparent 60%),
   repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.025) 31px 32px),
   var(--bg);}
.disp{font-family:'Fraunces',serif}
.glass{background:rgba(255,255,255,.04);border:1px solid var(--line);backdrop-filter:blur(14px);border-radius:20px}
.jar{border:1.5px dashed rgba(239,231,214,.3);border-radius:18px;transition:.2s}
.jar:hover,.jar.over{border-color:var(--teal);box-shadow:0 0 24px rgba(45,226,200,.25)}
.wiggle{animation:wig .5s}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;transition:.15s;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.brew{background:linear-gradient(100deg,var(--mag),var(--amber));color:#1a0f10;font-weight:700;border-radius:16px;
  box-shadow:0 0 40px rgba(255,61,154,.35);transition:.2s}
.brew:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,61,154,.55)}
.brew:disabled{opacity:.6;transform:none}
.btn{border:1px solid var(--line);border-radius:10px;padding:6px 12px;font-size:12px;transition:.15s}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.cauldron{width:60px;height:40px;border-radius:0 0 30px 30px;background:#2a2340;position:relative;margin:0 auto}
.bub{position:absolute;bottom:30px;width:10px;height:10px;border-radius:50%;background:var(--teal);animation:bub 1.4s infinite}
@keyframes bub{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px) scale(.3);opacity:0}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
textarea,input,select{background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--ink);border-radius:12px;outline:none}
textarea:focus,input:focus,select:focus{border-color:var(--amber)}
input[type=range]{accent-color:var(--amber);border:none;background:none}
a{color:var(--teal)}