@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-color:#3498db;--primary-dark:#2980b9;--secondary-color:#2c3e50;--success-color:#2ecc71;--error-color:#e74c3c;--warning-color:#f39c12;--light-gray:#ecf0f1;--medium-gray:#bdc3c7;--dark-gray:#7f8c8d;--text-color:#333;--white:#fff;--shadow:0 4px 6px #0000001a;--transition:all 0.3s ease}body{background-color:#f5f7fa;color:#333;color:var(--text-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:20px}.job-container{background-color:#fff;background-color:var(--white);border-radius:10px;box-shadow:0 4px 6px #0000001a;box-shadow:var(--shadow);display:flex;flex-direction:column;margin:0 auto;max-width:1200px;min-height:100vh;overflow:hidden}.job-header{background-color:#2c3e50;background-color:var(--secondary-color);color:#fff;color:var(--white);padding:1.5rem;text-align:center}.job-header h1{font-size:2rem;margin-bottom:.5rem}.job-subtitle{font-size:1rem;opacity:.8}.job-content{flex-grow:1;gap:1.5rem;padding:1.5rem}.image-section,.job-content{display:flex;flex-direction:column}.image-section{gap:1rem}.image-container{background-color:#ecf0f1;background-color:var(--light-gray);border-radius:8px;box-shadow:0 4px 6px #0000001a;box-shadow:var(--shadow);padding:1rem;text-align:center}.job-image{border-radius:4px;max-height:300px;max-width:100%;object-fit:contain}.progress-container{background-color:#ecf0f1;background-color:var(--light-gray);border-radius:12px;box-shadow:0 4px 6px #0000001a;box-shadow:var(--shadow);height:24px;overflow:hidden;position:relative;width:100%}.progress-bar{height:100%;transition:all .3s ease;transition:var(--transition)}.progress-text{color:#fff;color:var(--white);font-size:.8rem;font-weight:700;left:50%;position:absolute;text-shadow:0 0 2px #00000080;top:50%;transform:translate(-50%,-50%)}.text-section{gap:1rem}.text-container,.text-section{display:flex;flex-direction:column}.text-container{gap:.5rem}.input-label{color:#2c3e50;color:var(--secondary-color);font-weight:600}.job-textarea{border:2px solid #bdc3c7;border:2px solid var(--medium-gray);border-radius:8px;font-family:inherit;font-size:1rem;min-height:120px;padding:1rem;resize:vertical;transition:all .3s ease;transition:var(--transition);width:100%}.job-textarea:focus{border-color:#3498db;border-color:var(--primary-color);outline:none}.result-feedback{animation:fadeIn .5s;border-radius:8px;font-weight:700;margin-top:.5rem;padding:.75rem;text-align:center}.result-feedback.correct{background-color:#2ecc7133;color:#2ecc71;color:var(--success-color)}.result-feedback.incorrect{background-color:#e74c3c33;color:#e74c3c;color:var(--error-color)}.controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.action-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:all .3s ease;transition:var(--transition)}.action-button.primary{background-color:#3498db;background-color:var(--primary-color);color:#fff;color:var(--white)}.action-button.primary:hover{background-color:#2980b9;background-color:var(--primary-dark);transform:translateY(-2px)}.action-button.secondary{background-color:#ecf0f1;background-color:var(--light-gray);color:#333;color:var(--text-color)}.action-button.secondary:hover{transform:translateY(-2px)}.action-button.secondary:hover,.action-button:disabled{background-color:#bdc3c7;background-color:var(--medium-gray)}.action-button:disabled{cursor:not-allowed;transform:none}.keyboard-section{margin-top:auto}.keyboard-container{background-color:#ecf0f1;background-color:var(--light-gray);border-radius:8px;flex-wrap:wrap;gap:.5rem;padding:1rem}.key-button,.keyboard-container{box-shadow:0 4px 6px #0000001a;box-shadow:var(--shadow);display:flex;justify-content:center}.key-button{align-items:center;background-color:#fff;background-color:var(--white);border:none;border-radius:6px;color:#333;color:var(--text-color);cursor:pointer;font-size:1rem;font-weight:600;height:3rem;min-width:3rem;transition:all .3s ease;transition:var(--transition)}.key-button:hover{background-color:#3498db;background-color:var(--primary-color);color:#fff;color:var(--white);transform:translateY(-2px)}.key-button:active{transform:translateY(0)}.key-button.space-key{min-width:12rem}.key-button.delete-key{background-color:#e74c3c;background-color:var(--error-color);color:#fff;color:var(--white);min-width:5rem}.key-button.delete-key:hover{background-color:#c0392b}.key-button:disabled{background-color:#bdc3c7;background-color:var(--medium-gray);color:#7f8c8d;color:var(--dark-gray);cursor:not-allowed;transform:none}.question-modal{align-items:center;animation:fadeIn .3s;background-color:#000000b3;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.question-content{background-color:#fff;background-color:var(--white);border-radius:12px;box-shadow:0 5px 15px #0000004d;display:flex;flex-direction:column;gap:1.5rem;max-width:500px;padding:2rem;text-align:center;width:90%}.question-text{font-size:1.2rem;line-height:1.5}.answer-input{border:2px solid #bdc3c7;border:2px solid var(--medium-gray);border-radius:8px;font-size:1rem;padding:.75rem 1rem;transition:all .3s ease;transition:var(--transition);width:100%}.answer-input:focus{border-color:#3498db;border-color:var(--primary-color);outline:none}.question-buttons{display:flex;justify-content:center}.warning-text{color:#f39c12;color:var(--warning-color);font-size:.9rem}.job-footer{background-color:#2c3e50;background-color:var(--secondary-color);color:#fff;color:var(--white);font-size:.9rem;padding:1rem;text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.job-content{padding:1rem}.job-header h1{font-size:1.5rem}.job-image{max-height:200px}.key-button{font-size:.9rem;height:2.5rem;min-width:2.5rem}.key-button.space-key{min-width:8rem}.action-button{font-size:.9rem;padding:.6rem 1.2rem}}@media (max-width:480px){.job-container{border-radius:0}.job-header{padding:1rem}.keyboard-container{gap:.3rem;padding:.5rem}.key-button{font-size:.8rem;height:2rem;min-width:2rem}.key-button.space-key{min-width:6rem}.key-button.delete-key{min-width:4rem}.controls{flex-direction:column;gap:.5rem}.action-button{justify-content:center;width:100%}.question-content{padding:1.5rem}.question-text{font-size:1rem}}:root{--primary-color:#2a5c6b;--secondary-color:#1d4553;--accent-color:#ff6b6b;--light-color:#f8f9fa;--gradient-start:#a8edea;--gradient-end:#fed6e3;--font-main:"Poppins",Arial,sans-serif;--transition-base:all 0.4s cubic-bezier(0.65,0,0.35,1)}*{box-sizing:border-box;padding:0}*,body{margin:0}body{animation:gradient 15s ease infinite;background:linear-gradient(135deg,#a8edea,#fed6e3);background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));background-size:400% 400%;color:#1d4553;color:var(--secondary-color);font-family:Poppins,Arial,sans-serif;font-family:var(--font-main);line-height:1.6;min-height:100vh;overflow-x:hidden}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.app{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;padding:2rem;position:relative;width:100vw}.app:after,.app:before{animation:float 6s ease-in-out infinite;background:#fff3;border-radius:50%;content:"";position:absolute;z-index:-1}.app:before{animation-delay:0s;height:300px;left:-50px;top:-50px;width:300px}.app:after{animation-delay:2s;bottom:-30px;height:200px;right:-30px;width:200px}@keyframes float{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(10px,10px) rotate(5deg)}50%{transform:translate(20px,-10px) rotate(-5deg)}75%{transform:translate(-10px,15px) rotate(3deg)}}.app h1{animation:fadeInUp .8s cubic-bezier(.33,1,.68,1) .3s forwards;color:#2a5c6b;color:var(--primary-color);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin-bottom:1.5rem;opacity:0;position:relative;text-align:center;text-shadow:0 2px 4px #0000001a;transform:translateY(20px)}.app h1:after{animation:scaleIn .6s cubic-bezier(.22,1,.36,1) .8s forwards;background:#ff6b6b;background:var(--accent-color);border-radius:2px;bottom:-10px;content:"";height:4px;left:50%;opacity:0;position:absolute;transform:translateX(-50%);transform-origin:left;width:80px}.work-button{animation:fadeInUp .8s cubic-bezier(.33,1,.68,1) .5s forwards;background:linear-gradient(135deg,#2a5c6b,#1d4553);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border:none;border-radius:50px;box-shadow:0 4px 20px #2a5c6b4d;color:#f8f9fa;color:var(--light-color);cursor:pointer;font-size:1.1rem;font-weight:500;margin-top:2rem;overflow:hidden;padding:1rem 2.5rem;position:relative;transform:translateY(20px);z-index:1}.work-button,.work-button:before{opacity:0;transition:all .4s cubic-bezier(.65,0,.35,1);transition:var(--transition-base)}.work-button:before{background:linear-gradient(135deg,#1d4553,#2a5c6b);background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.work-button:hover{box-shadow:0 8px 30px #2a5c6b66;transform:translateY(-5px)}.work-button:hover:before{opacity:1}.work-button:active{transform:translateY(0)}.work-button:after{background:#ffffff80;border-radius:50%;content:"";height:5px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}.work-button:focus:not(:active):after{animation:ripple .6s ease-out}@keyframes ripple{0%{height:5px;opacity:.5;width:5px}to{height:300px;opacity:0;width:300px}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:translateX(-50%) scaleX(0)}to{opacity:1;transform:translateX(-50%) scaleX(1)}}.section-transition{animation:fadeScale .6s cubic-bezier(.33,1,.68,1) forwards}@keyframes fadeScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.app{padding:1.5rem}.work-button{font-size:1rem;padding:.8rem 2rem}}
/*# sourceMappingURL=main.b7096d16.css.map*/