.christmas-effects{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.snowflake{position:absolute;top:-20px;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8);animation:snowfall linear forwards;-webkit-user-select:none;user-select:none}@keyframes snowfall{0%{transform:translateY(0) rotate(0)}to{transform:translateY(100vh) rotate(360deg)}}.santa-sleigh{position:fixed;top:10%;left:-200px;display:flex;align-items:center;gap:5px;font-size:2rem;animation:sleighRide 8s linear forwards;z-index:10000;filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}.santa-sleigh .reindeer{animation:bobUp .5s ease-in-out infinite alternate}.santa-sleigh .reindeer:nth-child(2){animation-delay:.25s}.santa-sleigh .sleigh{transform:scaleX(-1)}.santa-sleigh .santa{animation:wave .5s ease-in-out infinite alternate}@keyframes sleighRide{0%{left:-200px;top:15%}25%{top:8%}50%{top:12%}75%{top:6%}to{left:110%;top:10%}}@keyframes bobUp{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes wave{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.christmas-lights{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-around;padding:5px 0;z-index:9998}.christmas-lights .light{width:12px;height:12px;border-radius:50%;animation:twinkle 1s ease-in-out infinite alternate;box-shadow:0 0 10px currentColor,0 0 20px currentColor}@keyframes twinkle{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.with-santa-hat{position:relative}.with-santa-hat:before{content:"🎅";position:absolute;top:-20px;right:-10px;font-size:24px;transform:rotate(15deg);z-index:10;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.with-gift{position:relative}.with-gift:after{content:"🎁";position:absolute;bottom:-15px;right:-10px;font-size:18px;z-index:10}.with-tree{position:relative}.with-tree:after{content:"🎄";position:absolute;top:-5px;left:-20px;font-size:20px;z-index:10}.with-wreath:before{content:"🎄";position:absolute;top:50%;left:-30px;transform:translateY(-50%);font-size:24px}body{background:linear-gradient(135deg,#8b00001a,#0064001a,#8b00001a),linear-gradient(135deg,#667eea,#764ba2)!important}.card{border:2px solid rgba(255,215,0,.3)!important;box-shadow:0 4px 16px #0000001a,0 0 20px #ffd7001a,inset 0 0 30px #ffffff0d!important}.primary-button{background:linear-gradient(135deg,#c41e3a,#228b22)!important;border:2px solid rgba(255,215,0,.5)!important}.primary-button:hover{box-shadow:0 0 20px #ffd70066,0 4px 12px #0003!important}.elf-helper{position:fixed;bottom:-60px;right:20px;font-size:3rem;animation:elfPeek 10s ease-in-out infinite;z-index:9997}@keyframes elfPeek{0%,80%,to{bottom:-60px;transform:rotate(0)}85%{bottom:0;transform:rotate(-10deg)}90%{bottom:10px;transform:rotate(10deg)}95%{bottom:0;transform:rotate(-5deg)}}.festive-header:before{content:"🍃";margin-right:10px}.festive-header:after{content:"🍃";margin-left:10px;transform:scaleX(-1);display:inline-block}.candy-cane-border{border:4px solid transparent;border-image:repeating-linear-gradient(45deg,red,red 10px,#fff 10px,#fff 20px) 4}.with-star:before{content:"⭐";position:absolute;top:-15px;left:50%;transform:translate(-50%);font-size:20px;animation:starGlow 2s ease-in-out infinite}@keyframes starGlow{0%,to{filter:drop-shadow(0 0 5px rgba(255,215,0,.8));transform:translate(-50%) scale(1)}50%{filter:drop-shadow(0 0 15px rgba(255,215,0,1));transform:translate(-50%) scale(1.1)}}@media (max-width: 768px){.santa-sleigh{font-size:1.5rem}.christmas-lights .light{width:8px;height:8px}.with-santa-hat:before{font-size:18px;top:-15px;right:-5px}.elf-helper{font-size:2rem;right:10px}}@media (max-width: 480px){.christmas-lights .light{width:6px;height:6px}.santa-sleigh{font-size:1.2rem}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;overflow-x:hidden}@media (max-width: 768px){body{max-height:none;overflow:visible}#root{height:auto;overflow:visible}}*{box-sizing:border-box}button{cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}@media (max-width: 768px){button{padding:10px 16px;font-size:14px}}@media (max-width: 480px){button{padding:8px 12px;font-size:13px}}input{border:2px solid #ddd;border-radius:8px;padding:12px;font-size:16px;transition:border-color .2s ease}@media (max-width: 768px){input{padding:10px;font-size:14px}}@media (max-width: 480px){input{padding:8px;font-size:14px}}input:focus{outline:none;border-color:#667eea}.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 16px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@media (max-width: 768px){.card{padding:12px;border-radius:8px;margin:8px}}@media (max-width: 480px){.card{padding:8px;border-radius:6px;margin:4px}}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.secondary-button{background:#f8f9fa;color:#333;border:2px solid #ddd}.success-button{background:#28a745;color:#fff}.danger-button{background:#dc3545;color:#fff}.timeline-entry{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;padding:12px;margin:8px 0;transition:all .2s ease}.timeline-entry:hover{border-color:#667eea;background:#fff}.timeline-entry.correct{border-color:#28a745;background:#d4edda}.timeline-entry.incorrect{border-color:#dc3545;background:#f8d7da}.container-responsive{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}@media (max-width: 768px){.container-responsive{max-width:100%;padding:0 12px}}@media (max-width: 480px){.container-responsive{padding:0 8px}}@media (max-width: 480px){.card{padding:12px!important;margin:0 -10px;width:calc(100% + 20px);border-radius:0}.timeline-container{padding:10px!important}input,select,button{max-width:100%}.grid-2-col{grid-template-columns:1fr!important}}.text-responsive-lg{font-size:24px}.text-responsive-md{font-size:18px}.text-responsive-sm{font-size:16px}@media (max-width: 768px){.text-responsive-lg{font-size:20px}.text-responsive-md{font-size:16px}.text-responsive-sm{font-size:14px}}@media (max-width: 480px){.text-responsive-lg{font-size:18px}.text-responsive-md{font-size:14px}.text-responsive-sm{font-size:12px}}