:root{--primary-color:#4a6bff;--secondary-color:#ff6b6b;--tertiary-color:#3b56cd;--background-color:#fff;--text-color:#333;--light-gray:#f5f5f5;--gray:#6c757d;--dark-gray:#4b5563;--border-color:#ccc;--white:#fff;--black:#000;--hover-primary-color:#4665f2;--gradient-end-color:#eaf0ff;--footer-bg-color:#f8f9fa;--coin-gold:gold;--coin-orange:orange;--semi-transparent-white:#fff3;--disabled-color:#9ca3af;--disabled-text-color:#6b7280;--article-meta-color:#6c6c6c;--spinner-accent-color:#4a6bff4d;--shadow-color:#0000001a;--text-shadow-color:#00000040;--focus-shadow-color:#4a6bff33;--hover-shadow-color:#00000026;--active-shadow-color:#0000001a;--border-radius:14px;--rounded-border-radius:20px;--box-shadow:0 4px 6px var(--shadow-color);--container-max-width:800px;--footer-background:#f8f9fa;--footer-heading-color:#2c3e50;--footer-link-color:#4a5568;--footer-link-hover-color:#2b6cb0;--footer-text-color:#718096;--footer-border-color:#e2e8f0}.magic-8-ball{align-items:center;background:radial-gradient(circle at 50% 40%,#666,var(--black));border-radius:50%;box-shadow:0 0 20px var(--shadow-color);display:flex;height:300px;justify-content:center;position:relative;width:300px}.magic-8-ball:before{background:radial-gradient(circle,#ffffff1a 0,#fff0 75%);border-radius:50%;content:"";height:60%;left:20%;position:absolute;top:10%;width:60%}.window{align-items:center;background:var(--light-gray);border-radius:50%;display:flex;height:140px;justify-content:center;overflow:hidden;position:relative;width:140px;z-index:1}.answer{color:var(--text-color);font-size:1.1rem;font-weight:700;line-height:1.2;max-width:130px;padding:.5rem;text-align:center;transition:opacity .3s ease;word-break:break-word}.answer.default-state{font-size:3rem}.magic-8-ball.shaking{animation:shake 3s cubic-bezier(.4,0,.2,1)}.question-input{align-items:center;display:flex;flex-direction:column;gap:1rem;max-width:400px;width:100%}.question-input input{border:2px solid var(--border-color);border-radius:5px;font-size:1.1rem;padding:.8rem;width:100%}@keyframes shake{0%,to{transform:translate(0) rotate(0)}10%{transform:translate(-30px) rotate(-15deg)}20%{transform:translate(30px) rotate(15deg)}30%{transform:translate(-30px) rotate(-15deg)}40%{transform:translate(30px) rotate(15deg)}50%{transform:translate(-30px) rotate(-15deg)}60%{transform:translate(30px) rotate(15deg)}70%{transform:translate(-30px) rotate(-15deg)}80%{transform:translate(30px) rotate(15deg)}90%{transform:translate(-30px) rotate(-15deg)}}