:root{--bg:#2b2d31;--panel:#313338;--deep:#1e1e1e;--blurple:#5865f2;--text:#dbdee1;--muted:#949ba4;--red:#ed4245}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) radial-gradient(circle at 20% 0%,#383a40 0,transparent 50%);color:var(--text);font-family:'Bricolage Grotesque',sans-serif;min-height:100vh}
header{background:var(--deep);display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:3px solid #111}
h1{margin:0;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:28px;letter-spacing:-1px}
.tag{margin:0;color:var(--muted);font-weight:300;font-size:14px}
#mascot-wrap{position:relative;cursor:pointer}
#mascot{transition:transform .2s}
#mascot-wrap:hover #mascot{animation:bob .6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5px) rotate(-4deg)}}
#bubble{position:absolute;left:72px;top:4px;background:#fff;color:#111;padding:8px 12px;border-radius:12px;font-size:13px;white-space:nowrap;z-index:5;font-weight:500;box-shadow:0 4px 12px #0006}
#bubble::before{content:'';position:absolute;left:-8px;top:12px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.hidden{display:none}
main{display:grid;grid-template-columns:1fr 360px;gap:20px;padding:20px;max-width:1300px;margin:auto}
@media(max-width:860px){main{grid-template-columns:1fr;padding:12px}#bubble{white-space:normal;width:200px}}
#stage{position:relative;border-radius:12px;overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center;
background:conic-gradient(#3a3c42 25%,#2f3136 0 50%,#3a3c42 0 75%,#2f3136 0) 0 0/24px 24px;border:2px dashed #4e5058}
#stage.over{border-color:var(--blurple);box-shadow:0 0 0 4px #5865f255}
#canvas{max-width:100%;max-height:70vh;display:block}
#drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.drop-big{font-size:48px;font-weight:800;letter-spacing:-2px}
.drop-small{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:13px}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translate(-6px,3px) rotate(-1deg)}50%{transform:translate(5px,-4px) rotate(1deg)}75%{transform:translate(-3px,2px)}}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{background:var(--panel);color:var(--text);border:1px solid #4e5058;padding:9px 14px;border-radius:8px;font:500 14px 'Bricolage Grotesque',sans-serif;cursor:pointer;transition:.15s}
.btn:hover{background:var(--blurple);border-color:var(--blurple);box-shadow:0 0 16px #5865f288}
.btn.danger{background:var(--red);border-color:var(--red);font-weight:800}
.btn.danger:hover{box-shadow:0 0 20px #ed4245aa}
#meter-wrap{margin-top:14px}
.meter-label{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-bottom:4px}
#meter{height:10px;background:#1e1f22;border-radius:5px;overflow:hidden}
#meter-fill{height:100%;width:0;background:linear-gradient(90deg,#3ba55d,#faa61a,#ed4245);transition:width .4s}
#panel{background:var(--panel);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh - 140px);min-height:400px}
.panel-head{padding:12px 16px;border-bottom:1px solid #1e1f22;font-weight:800;color:var(--muted)}
#controls{padding:10px;display:grid;gap:6px}
.cmd{display:grid;grid-template-columns:110px 1fr 24px;align-items:center;gap:8px;background:#2b2d31;border-radius:6px;padding:6px 8px}
.cmd button{background:none;border:0;color:#c9cdfb;font:700 14px 'JetBrains Mono',monospace;text-align:left;cursor:pointer;padding:4px;border-radius:4px}
.cmd button:hover{background:var(--blurple);color:#fff}
.cmd button kbd{color:var(--muted);font-size:10px;margin-right:4px}
.cmd input{accent-color:var(--blurple);width:100%}
.cmd span{font:12px 'JetBrains Mono',monospace;color:var(--muted);text-align:right}
.meme-inputs{display:flex;gap:6px;padding:0 10px 10px}
.meme-inputs input{flex:1;min-width:0;background:#1e1f22;border:0;color:var(--text);padding:8px;border-radius:6px;font:12px 'JetBrains Mono',monospace}
#log{flex:1;overflow-y:auto;padding:10px 16px;border-top:1px solid #1e1f22;font-size:14px;min-height:120px}
.msg{margin-bottom:10px;animation:in .25s}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.msg b{color:var(--blurple);font-weight:800}
.msg .bot{background:var(--blurple);color:#fff;font-size:10px;padding:1px 4px;border-radius:3px;margin:0 6px;font-family:'JetBrains Mono',monospace}
.msg code{background:#1e1f22;padding:1px 4px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:12px}
footer{text-align:center;padding:20px;color:var(--muted);font-size:12px}
footer a{color:var(--muted)}