body{margin:0;background:radial-gradient(#3a1a0e,#120806);color:#ffe9c7;font-family:system-ui,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#5a2412}h1{margin:0;font-size:22px}nav button,button{background:#e8b46a;border:0;border-radius:8px;padding:8px 14px;margin:3px;font-weight:700;cursor:pointer}button.on{background:#ffd54a}main{max-width:680px;margin:20px auto;padding:0 12px}#bot{display:flex;align-items:center;gap:16px}#moodBox{flex:1}#meter{height:12px;background:#333;border-radius:6px;overflow:hidden;margin-top:6px}#heat{height:100%;width:50%;background:linear-gradient(90deg,#7fffd4,#ffd54a,#ff4422);transition:width .4s}#log{height:260px;overflow:auto;background:#1c0d08;border:2px solid #e8b46a;border-radius:10px;padding:10px;margin:10px 0}.m{margin:6px 0;padding:6px 10px;border-radius:8px;max-width:80%}.u{background:#3b5;color:#000;margin-left:auto}.b{background:#5a2412}#f{display:flex}#q{flex:1;padding:10px;border-radius:8px;border:0}canvas{background:#222;border:3px solid #e8b46a;border-radius:10px;width:100%}