:root{--gryffindor-red: #740001;--gryffindor-gold: #D3A625;--slytherin-green: #1A472A;--slytherin-silver: #AAAAAA;--ravenclaw-blue: #222F5B;--ravenclaw-bronze: #946B2D;--hufflepuff-yellow: #ECB939;--hufflepuff-black: #000000;--bg-dark: #1a1a1a;--text-light: #f5f5f5;--magical-glow: 0 0 15px rgba(255, 215, 0, .5)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--bg-dark);color:var(--text-light);font-family:Cinzel,serif;background-image:radial-gradient(circle at 50% 50%,#2a2a2a,#000)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;width:100%}h1,h2,h3{font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#2a2a2a;cursor:pointer;transition:border-color .25s;color:var(--text-light);box-shadow:0 4px 6px #0000004d}button:hover{border-color:var(--gryffindor-gold);box-shadow:var(--magical-glow)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}.magical-text{background:linear-gradient(45deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 2px rgba(255,215,0,.5))}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.floating{animation:float 3s ease-in-out infinite}@keyframes pulse-glow{0%{box-shadow:0 0 5px #ffd70033}50%{box-shadow:0 0 20px #ffd70099}to{box-shadow:0 0 5px #ffd70033}}.glow{animation:pulse-glow 2s infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out forwards}.thinking-text{font-style:italic;color:#ddd;animation:pulse-glow 1.5s infinite}@keyframes hat-sway{0%{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.hat-tip-sway{animation:hat-sway 4s ease-in-out infinite;transform-origin:50% 45px}@keyframes dance{0%,to{transform:translateY(0) rotate(0)}10%{transform:translateY(-15px) rotate(-8deg)}20%{transform:translateY(0) rotate(8deg)}30%{transform:translateY(-10px) rotate(-5deg)}40%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-20px) rotate(0) scale(1.1)}60%{transform:translateY(0) rotate(-8deg)}70%{transform:translateY(-10px) rotate(8deg)}80%{transform:translateY(0) rotate(-5deg)}90%{transform:translateY(-5px) rotate(5deg)}}.dancing-hat{animation:dance 2s ease-in-out infinite;display:inline-block}