:root{--bg-void: #0d0d12;--bg-surface: #1a1a24;--bg-elevated: #252532;--text-primary: #e8e6e3;--text-secondary: #8a8a9a;--border: #2d2d3d;--border-glow: #3d3d5d;--mana-white: #f9faf4;--mana-blue: #0e68ab;--mana-black: #4d3d56;--mana-red: #d3202a;--mana-green: #00733e;--mana-gold: #c9a227;--mana-gray: #9a9a9a;--accent-primary: #7c3aed;--accent-secondary: #a78bfa}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:Raleway,sans-serif;background:var(--bg-void);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4{font-family:Cinzel,serif;font-weight:600;letter-spacing:.05em}button{font-family:Raleway,sans-serif;cursor:pointer;border:none;outline:none;transition:all .2s ease}button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}.mana-w{color:var(--mana-white)}.mana-u{color:var(--mana-blue)}.mana-b{color:var(--mana-black)}.mana-r{color:var(--mana-red)}.mana-g{color:var(--mana-green)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes glow{0%,to{box-shadow:0 0 20px #7c3aed4d}50%{box-shadow:0 0 40px #7c3aed99}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-glow{animation:glow 3s ease-in-out infinite}.animate-float{animation:float 4s ease-in-out infinite}.question-wrapper{display:flex;gap:24px}.question-container{flex:1;min-width:0}.history-panel{width:280px;flex-shrink:0}@media (max-width: 768px){.question-wrapper{flex-direction:column}.history-panel{width:100%}}