*{margin:0;padding:0;box-sizing:border-box}html,body,#root{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,beige,#e8e8c8,#f0f0e0);overflow:hidden}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease-out}.canvas-container.visible{opacity:1}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a1a0a,#0d2818,#0a1f12);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .6s ease-out,transform .6s ease-out}.loader-container.fade-out{opacity:0;transform:scale(1.1)}.loader-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:blobFloat 8s ease-in-out infinite}.blob-1{width:400px;height:400px;background:radial-gradient(circle,#2E763A 0%,transparent 70%);top:-100px;left:-100px;animation-delay:0s}.blob-2{width:500px;height:500px;background:radial-gradient(circle,#78A0B7 0%,transparent 70%);bottom:-150px;right:-150px;animation-delay:-3s}.blob-3{width:300px;height:300px;background:radial-gradient(circle,#14F209 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-5s}@keyframes blobFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.loader-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px}.loader-title{display:flex;align-items:center;gap:2px}.title-char{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:4rem;font-weight:700;background:linear-gradient(135deg,#2e763a,#78a0b7,#14f209);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:charFloat 2s ease-in-out infinite;text-shadow:0 0 30px rgba(46,118,58,.5)}.title-char:nth-child(1){animation-delay:0s}.title-char:nth-child(2){animation-delay:.1s}.title-char:nth-child(3){animation-delay:.2s}.title-char:nth-child(4){animation-delay:.3s}.title-char:nth-child(5){animation-delay:.4s}.title-char:nth-child(7){animation-delay:.5s}.title-char:nth-child(8){animation-delay:.6s}.title-char:nth-child(9){animation-delay:.7s}.title-spacer{width:20px}@keyframes charFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loader-progress-container{display:flex;flex-direction:column;align-items:center;gap:15px;width:300px}.loader-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:10px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000004d}.loader-progress-fill{height:100%;background:linear-gradient(90deg,#2e763a,#78a0b7,#14f209);border-radius:10px;transition:width .3s ease-out;position:relative;box-shadow:0 0 20px #2e763acc,0 0 40px #14f20966}.loader-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loader-progress-text{font-family:Segoe UI,monospace;font-size:2rem;font-weight:600;color:#78a0b7;text-shadow:0 0 20px rgba(120,160,183,.5)}.loader-status{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:1rem;color:#fff9;letter-spacing:3px;text-transform:uppercase;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.loader-donut{position:absolute;width:60px;height:60px;border:12px solid;border-radius:50%;animation:donutFloat 4s ease-in-out infinite}.donut-1{border-color:#2e763a;top:-80px;left:-100px;animation-delay:0s;box-shadow:0 0 30px #2e763a80,inset 0 0 20px #2e763a4d}.donut-2{border-color:#78a0b7;top:-60px;right:-80px;width:40px;height:40px;border-width:8px;animation-delay:-1.5s;box-shadow:0 0 25px #78a0b780,inset 0 0 15px #78a0b74d}.donut-3{border-color:#14f209;bottom:-70px;right:-60px;width:50px;height:50px;border-width:10px;animation-delay:-3s;box-shadow:0 0 25px #14f20980,inset 0 0 15px #14f2094d}@keyframes donutFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(90deg)}50%{transform:translateY(0) rotate(180deg)}75%{transform:translateY(20px) rotate(270deg)}}@media (max-width: 768px){.title-char{font-size:2.5rem}.loader-progress-container{width:250px}.loader-progress-text{font-size:1.5rem}.loader-donut{display:none}}