@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";li{margin-bottom:30px}ul{text-align:center}a{display:block;text-decoration:none;color:#fff;padding:15px 20px;font-size:1.2rem;font-weight:500;border-radius:8px;background:linear-gradient(135deg,#1a1a2e,#16213e);text-align:center}a:hover{background:linear-gradient(135deg,#383858,#7a839c);color:#fff}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px}*{font-family:Poppins,sans-serif;background-color:#3d413a;align-items:center}h1{margin-top:8%;margin-bottom:2%;color:#fff;align-items:center;text-align:center;font-weight:1000}button{cursor:pointer}.fbutton{border-radius:8px;border:1px solid black;padding:10px 20px;background-color:gray;color:#fff;margin-bottom:5%;font-size:15px;font-weight:500}.fbutton:hover{background-color:#4d4848;cursor:pointer}.buttons{display:flex;justify-content:center}p{color:#fff;text-align:justify;margin-left:3%;margin-right:3%;font-size:20px}label{color:#fff;margin-left:20px}.selection{margin-top:50px;display:flex;justify-content:center;margin-bottom:50px}option{font-size:16px}.input{margin-top:30px;display:flex;justify-content:space-evenly}input{background-color:#fff;color:#000;border:1px solid #ccc;border-radius:5px;font-size:16px}.result{display:flex;justify-content:center}.button{margin-top:30px;display:flex;justify-content:center}.choose{font-size:20px}h3{color:#fff}.main{text-align:center;margin-top:35px;margin-bottom:45px}li{color:#fff;display:flex;justify-content:center}ul{align-items:center;text-align:center}button{margin-left:20px}input{margin-left:20px;padding:7px 20px}label{font-size:18px}.items{display:flex}.deleteButton{border-radius:8px;border:1px solid black;padding:7px 15px;background-color:#793232;color:#fff;margin-bottom:5px}.list-container{display:flex;justify-content:center}.updown{border-radius:8px;border:1px solid black;padding:7px 15px;background-color:#0c3d09;color:#fff;margin-bottom:5px}.acbuttons-container{display:flex;justify-content:center;margin-bottom:30px}.acbuttons{border-radius:8px;border:1px solid black;padding:7px 15px;background-color:#0c0c48;color:#fff;margin-bottom:5px}.inputs{display:flex;justify-content:center;margin-top:20px}.sear{display:flex;justify-content:center;margin-top:50px}.userin{margin-top:50px;display:flex;justify-content:center}h3{text-align:center;margin-bottom:20px}.colourslist li{background-color:#5e5446;border-radius:30px;margin-top:10px;margin-right:3%}.nextbutton{color:#fff;background-color:#035151;padding:5px 10px;border-radius:5px}.prevnext{display:flex;justify-content:end;margin-right:3%}.prevbutton{color:#fff;background-color:#035151;padding:5px 10px;border-radius:5px;margin-left:3%}.userInput{display:flex;justify-content:center}.displayUserDetails{background-color:#faebd7;padding:20px;border-radius:10px;margin-top:20px;box-shadow:0 0 10px #0000001a}.displayUserDetails h3,p{background-color:#faebd7;color:#000}.avatar{width:200px;height:150px;display:block;margin-left:auto;margin-right:auto}.login-screen-11 input,button,label,form{margin-left:auto;margin-right:auto;display:block;float:none}.login-screen-11{max-width:400px;margin:2rem auto;padding:2rem;background-color:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0000004d;border:1px solid #333}.login-screen-11 .userInputs{width:100%;background-color:#1a1a1a}.login-screen-11 form{display:flex;flex-direction:column;gap:1.5rem;background-color:#1a1a1a}.login-screen-11 h3{background-color:#1a1a1a}.login-screen-11 label{color:#e0e0e0;font-size:.9rem;font-weight:500;margin-bottom:.5rem;display:block;background-color:#1a1a1a}.login-screen-11 input[type=text],.login-screen-11 input[type=password]{width:100%;padding:.75rem 1rem;background-color:#2a2a2a;border:2px solid #404040;border-radius:8px;color:#fff;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.login-screen-11 input[type=text]:focus,.login-screen-11 input[type=password]:focus{outline:none;border-color:#4a9eff;background-color:#333;box-shadow:0 0 0 3px #4a9eff1a}.login-screen-11 input[type=text]:hover,.login-screen-11 input[type=password]:hover{border-color:#555}.login-screen-11 .fbutton{width:100%;padding:.875rem 1.5rem;background-color:#4a9eff;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem}.login-screen-11 .fbutton:hover{background-color:#3d8ce6;transform:translateY(-1px);box-shadow:0 4px 12px #4a9eff4d}.login-screen-11 .fbutton:active{transform:translateY(0);box-shadow:0 2px 8px #4a9eff33}.login-screen-11 .fbutton:focus{outline:none;box-shadow:0 0 0 3px #4a9eff66}.login-screen-11 input::placeholder{color:#888}.login-screen-11 form>*{margin-bottom:0}.checkSubmit{display:flex;align-items:center;justify-content:center;margin-top:30px}.fbutton{display:block;margin:20px auto 0}.login-screen-12 .userInput .container input,form,label,button,.login-screen-12 .userInput .container{margin-left:auto;margin-right:auto;display:block;float:none}.login-screen-12 .userInput .container form{background-color:#a8a8b3}.upper,.container,.checkSubmit{background-color:#1a1a1a}.checkbox-container{display:flex;align-items:center;gap:10px;margin-bottom:20px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.userInput label{font-size:14px;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3);background-color:#252860;margin:0}.userInput input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#4caf50;transform:scale(1.2);margin:0}.displayUserData{background-color:beige;padding:20px;border-radius:10px;width:400px;margin:0 auto;text-align:center}.displayUserData h3{background-color:beige;color:#000}.buttons{background-color:beige}.editDetails input{width:300px;margin-bottom:10px}.editDetails button{width:330px;color:#fff;margin-top:20px;padding:4px 0;border-radius:3px}.editDetails h3{background-color:#646412}.editDetails{background-color:#646412;padding:20px;border-radius:10px;width:400px;margin:50px auto 0;text-align:center;height:350px}.prof-container{display:flex;justify-content:space-between}.displayUserData{height:350px}.userInput{display:flex;flex-direction:column;align-items:center;padding:40px;background-color:#252860;border-radius:15px;box-shadow:0 10px 30px #0000004d;max-width:400px;margin:20px auto}.inputBox{display:flex;flex-direction:column;gap:20px;width:300px;margin-bottom:25px;background-color:#252860}.userInput label{font-size:14px;margin-top:10px;margin-bottom:5px;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3);background:linear-gradient(135deg,#1a1a2e,#16213e)}.error{color:#da1616;margin-top:15px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3);background:linear-gradient(135deg,#1a1a2e,#16213e)}.userInput{display:flex;flex-direction:column;align-items:center;padding:40px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:15px;box-shadow:0 10px 30px #0000004d;max-width:400px;margin:20px auto}.inputBox{display:flex;flex-direction:column;gap:20px;width:300px;margin-bottom:25px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.userInput input[type=text],.userInput input[type=password]{padding:15px 20px;font-size:16px;width:100%;border:none;border-radius:25px;background:#ffffffe6;box-shadow:inset 0 2px 10px #0000001a;transition:all .3s ease;outline:none}.userInput input[type=text]:focus,.userInput input[type=password]:focus{background:#fff;box-shadow:inset 0 2px 10px #0000001a,0 0 20px #ffffff80;transform:translateY(-2px)}.userInput input[type=text]::placeholder,.userInput input[type=password]::placeholder{color:#888;font-style:italic}.userInput input[type=checkbox]{width:20px;height:20px;margin:10px 0 20px;cursor:pointer;accent-color:#074909;transform:scale(1.2)}.userInput .fbutton{width:330px}.userInput .fbutton:active{transform:translateY(-1px);box-shadow:0 3px 10px #0003}.error{color:#da1616;margin-top:15px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}.checkbox-container{display:flex;align-items:center;gap:10px;margin-bottom:20px;background-color:#252860}.change-box input,button,h3{margin-left:auto;margin-right:auto;display:block;float:none}.change-box{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;padding:40px;max-width:450px;margin:50px auto!important;box-shadow:0 20px 40px #0006,0 0 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;left:0!important;right:0!important;transform:translate(0)!important}.change-box h3{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#e2e8f0;font-size:24px;font-weight:600;margin-bottom:30px;text-align:center;letter-spacing:.5px}.change-box input[type=text]{width:100%;padding:16px 20px;margin-bottom:20px;background:#2d3748cc;border:2px solid rgba(255,255,255,.1);border-radius:12px;color:#e2e8f0;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-sizing:border-box}.change-box button{width:100%;padding:16px;background:linear-gradient(135deg,#4a5568,#2d3748);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:10px;letter-spacing:.5px;position:relative;overflow:hidden}.change-box button:hover{background:linear-gradient(135deg,#5a6578,#3d4758);transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.change-box p{margin-top:20px;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;min-height:20px;color:#e2e8f0;background:#2d374880;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.change-box p:empty{background:transparent;border:none;padding:0;min-height:0}.logn-wrapper .userInput .error h3{background:linear-gradient(135deg,#1a1a2e,#16213e)}.assin17-container{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:Arial,sans-serif}h1{margin-bottom:20px;font-size:2.5rem}.assign-17{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:30px;border-radius:12px;box-shadow:0 0 15px #00000080;display:flex;flex-direction:column;align-items:center;width:420px}.UserColourInput{background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;flex-direction:column;gap:15px;width:100%;align-items:center}.colour-input{width:150px;height:40px;border:none;border-radius:8px;cursor:pointer}.assign-17 h4{background:linear-gradient(135deg,#1a1a2e,#16213e);margin-top:10px;color:#fff}.boxes{background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;justify-content:center;gap:20px;margin-top:20px}.mixColourBox,.gradientBox{width:150px;height:100px;border-radius:8px;border:2px solid #fff}.assign-17 label{background:linear-gradient(135deg,#1a1a2e,#16213e)}.gameContainer{max-width:600px;margin:20px auto;padding:20px;text-align:center;font-family:Arial,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:10px;box-shadow:0 4px 6px #0000001a}.gameContainer h2{color:#fff;margin:15px 0;font-size:1.5em;background:linear-gradient(135deg,#1a1a2e,#16213e);box-shadow:0 4px 6px #0000001a}.gameContainer h3{color:#fff;margin:10px 0;font-size:1.2em;background:linear-gradient(135deg,#1a1a2e,#16213e)}.gameContainer .colorButtons{margin:30px 0;display:flex;justify-content:center;gap:20px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.gameContainer .colorButtons button{padding:15px 30px;font-size:1.2em;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;min-width:100px}.gameContainer .colorButtons button:first-child{background-color:#f44;color:#fff}.gameContainer .colorButtons button:first-child:hover{background-color:#c00;transform:translateY(-2px)}.gameContainer .colorButtons button:last-child{background-color:#44f;color:#fff}.gameContainer .colorButtons button:last-child:hover{background-color:#00c;transform:translateY(-2px)}.gameContainer ul{background:linear-gradient(135deg,#1a1a2e,#16213e);list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;align-items:center;gap:10px}.gameContainer ul li{padding:10px 15px;border-radius:5px;font-weight:700;color:#fff;text-transform:uppercase;width:80px;text-align:center;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#383858,#7a839c)}.assignment-19{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}.assignment-19 h1{background:linear-gradient(135deg,#1a1a2e,#16213e);text-align:center;color:#333}.assignment-19 .questons{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:10px;padding:25px;box-shadow:0 2px 10px #0000001a}.assignment-19 h2{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;font-size:1.3em;padding:0 0 30px;margin:0}.assignment-19 ul{background:linear-gradient(135deg,#1a1a2e,#16213e);list-style:none;padding:0;margin:0}.assignment-19 li{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:15px 20px;border-radius:8px;cursor:pointer;border:2px solid #e9ecef;transition:all .3s ease;font-size:1em}.assignment-19 li:hover{background:linear-gradient(135deg,#383858,#7a839c);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.assignment-19 .endScreen{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:50px 0;display:block;align-items:center;border-radius:10px}.assignment-19 .endScreen h2{color:#fff;text-align:center}.questons{background:linear-gradient(135deg,#1a1a2e,#16213e)}.endScreen button{padding:10px 50px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#1a1a2e,#16213e)}.endScreen button:hover{background:linear-gradient(135deg,#383858,#7a839c)}.nextPrevButtons{display:flex;justify-content:space-between}.nextPrevButtons button{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:10px 50px;border-radius:10px;border:none}.nextPrevButtons button:hover{background:linear-gradient(135deg,#383858,#7a839c)}.nextPrevButtons button:disabled{background:linear-gradient(135deg,#383858,#7a839c);cursor:not-allowed}.reviewSection h2{padding-top:20px;text-align:center}.reviewSection{margin-top:30px}.reviewSection li{margin-right:10px;margin-left:10px}.assign-21{background:linear-gradient(135deg,#1a1a2e,#16213e)}.assign-21 .userin{background:linear-gradient(135deg,#1a1a2e,#16213e);padding-top:20px;border-radius:10px;padding-bottom:20px}.assign-21 button{padding:8px 16px;margin-left:10px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:10px;color:#fff}.assign-21 button:hover{background:linear-gradient(135deg,#383858,#7a839c)}.assign-21 img{max-width:300px;border:1px solid #ccc}.assign-21 canvas{max-width:300px;border:2px solid #000;cursor:crosshair}.color-images{display:flex;justify-content:space-between;background:linear-gradient(135deg,#1a1a2e,#16213e)}.color-images h3,.original-img,.canvas-img{background:linear-gradient(135deg,#1a1a2e,#16213e)}.assign-22{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e);padding-bottom:20px;color:#fff}.assign-22 .userin{display:flex;align-items:center;gap:10px;margin-bottom:20px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.assign-22 button{padding:8px 16px;background:linear-gradient(135deg,#444493,#264cb3);border-radius:10px;color:#fff;border:none;cursor:pointer}.assign-22 button:hover{background:linear-gradient(135deg,#383858,#7a839c)}.assign-22 img{width:200px;margin:30px auto;display:block}.assign-22 .filterValueIn{display:flex;align-items:center;gap:10px;margin:10px 0;background:linear-gradient(135deg,#1a1a2e,#16213e)}.assign-22 input[type=range]{width:300px;accent-color:#ffffff}.assign-22 .userInputs{background:linear-gradient(135deg,#1a1a2e,#16213e)}.filterValueIn p{color:#fff;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task1 .container{margin:0;width:100vw;height:100vh;position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task1 .container h4{color:#fff;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task1,.container{margin:0;padding:0}.bubble{position:absolute;width:6px;height:6px;border-radius:30px;background-color:red;animation-name:bubble-scale;animation-duration:.3s;animation-iteration-count:1;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes bubble-scale{0%{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}body{margin:0;padding:0}.task2 img{height:400px}.task2 input{height:500px;width:600px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff}.task2{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}.fileinputtsk2{display:flex;justify-content:center;align-items:center}.task2 .output button{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:10px;border-radius:10px;border:none}.task2 .output button:hover{background:linear-gradient(135deg,#383858,#7a839c)}.task3{background:linear-gradient(135deg,#1a1a2e,#16213e);width:400px;height:500px;align-items:center;text-align:center;border-radius:10px}.task3 .title{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;text-align:center;padding:50px 0 10px;border-radius:10px}.item{color:#fff;text-align:center;padding:10px 0 15px;border-radius:10px;margin:10px 10px 30px}.task3-wrapper{display:flex;justify-content:center;align-items:center;height:100vh}.task4 .container{width:100vw;height:100vh;color:#fff;text-align:center;align-items:center}.task4 .container .context-menu{width:150px;text-align:center}.task4 .container .context-menu ul{border-radius:10px}.task4 .container .context-menu li{background:linear-gradient(135deg,#1a1a2e,#16213e);cursor:pointer;padding:5px 0;margin:0}.task4 .container .context-menu li:hover{background:linear-gradient(135deg,#383858,#7a839c)}.task5,.task5 .scroll-video-container{position:relative;margin:0;padding:0}.task5 .video-background{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1}.task5 .background-video{width:100%;height:100%;object-fit:cover;display:block}.task5 .text-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2;pointer-events:none}.task5 .section-title{font-size:clamp(2rem,8vw,5rem);font-weight:700;margin:0;text-shadow:2px 2px 8px rgba(0,0,0,.8);transition:all .3s ease;opacity:1}.task5 .scroll-content{position:relative;z-index:3;min-height:1000vh;padding-top:100vh}.task5 .content-section{height:100vh;display:flex;align-items:center;justify-content:center;opacity:.1;transition:opacity .3s ease;background:transparent;font-size:2rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-weight:700}.task5 .content-section.active{opacity:1}.task6 img{height:400px;width:300px}.task6{margin:0 50px}.task6 canvas{height:400px;width:300px}.task6 .imageDisplay{display:flex;justify-content:space-between;margin:50px 0}.task6 label{text-align:center;margin-bottom:10px}.task6 .userinput{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px 0;border-radius:10px;display:flex;justify-content:center;align-items:center}.task6 .userinput button{margin:0;padding:0}.task6 .userinput button{padding:10px 20px;color:#fff;background:linear-gradient(135deg,#383858,#6b6d74);border-radius:10px;border:none;margin-left:10px}.task6 .userinput button:hover{background:linear-gradient(135deg,#08082b,#7a839c)}.task6 .changePixel input{width:400px;color:#fff}.task6 .changePixel{display:flex;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px 0;border-radius:10px;margin-bottom:30px}*{-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{margin:0;background-color:#333}.task7{width:100%;height:100vh;background-color:#f0f0f0;overflow:hidden}.task7 .container{background-color:#306850;position:relative;cursor:none;width:100vw;height:100vh}:root{--size: 80px}.sprite{width:var(--size);height:var(--size);position:absolute;pointer-events:none;background-size:calc(var(--size) * 3) calc(var(--size) * 3);background-repeat:no-repeat;transform:translate(-50%) translateY(-50%);z-index:1}.sprite[data-animating=false]{background-image:url(../cursor-sprite-animation-inactive.png)}.sprite[data-animating=true]{background-image:url(../cursor-sprite-animation-active.gif)}.sprite[data-direction=LEFT]{background-position:0px calc(var(--size) * -1)}.sprite[data-direction=RIGHT]{background-position:calc(var(--size) * -2) calc(var(--size) * -1)}.sprite[data-direction=UP]{background-position:calc(var(--size) * -1) 0px}.sprite[data-direction=DOWN]{background-position:calc(var(--size) * -1) calc(var(--size) * -2)}.task8 .display{display:flex;justify-content:center;flex-direction:column;padding-bottom:30px}.task8 img{width:0;height:0}.task8 canvas{height:400px;max-width:600px}.task8 .display h2{color:#fff}.task8 .userin{display:flex;flex-direction:column}.task8 .title{font-size:40px;padding:10px 0 50px;color:#fff;font-weight:500}.task8 .upload{display:flex;background:linear-gradient(135deg,#1a1a2e,#16213e);width:80vw;justify-content:center;padding:20px 0;border-radius:10px}.task8 .upload button{padding:10px 20px;color:#fff;background:linear-gradient(135deg,#383858,#6b6d74);border-radius:10px;border:none}.task8 .upload button:hover{background:linear-gradient(135deg,#08082b,#7a839c)}.task8 .display button{width:300px;height:50px;margin:10px 0;color:#fff;border-radius:10px;background:linear-gradient(135deg,#0c0c17,#4e587d);font-size:15px}.task8 .display button:hover{background:linear-gradient(135deg,#2e2e3c,#7a839c)}.task8 .display button:disabled{background:linear-gradient(135deg,#ababcf,#b0b5c2)}.task9{background:linear-gradient(135deg,#1a1a2e,#16213e);height:100vh;width:100vw;display:flex;justify-content:center}.task9 .container{width:400px;height:400px;border:2px solid rgb(195,183,183);position:absolute}.task9 .container .ball{height:20px;width:20px;border-radius:10px;background-color:#ca1616;position:relative}.task10 .container{display:flex;flex-direction:column;padding:20px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task10 .container .board{width:300px;height:320px;background-color:gray;display:flex;flex-direction:column}.task10{align-items:center;display:flex;justify-content:center;width:100vw;height:100vh}.board{display:flex;flex-direction:column}.board-row{display:flex}.board-cell{width:30px;height:30px;border:1px solid rgb(24,24,100);display:flex;align-items:center;justify-content:center}.board-cell[value="1"]{background-color:red}.board-cell[value="0"]{background-color:#6d6771}.task11 .container .board{width:400px;height:400px;display:flex;flex-direction:column;background-color:gray}.task11 .container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);margin:0;padding:0}.task11{overflow:hidden;margin:0;padding:0}.task11 button{color:#000;width:120px;height:50px;margin:10px 20px 10px 0;border-radius:10px;border:none;background:linear-gradient(135deg,#7272b2,#bbbcbe)}.task11 button:hover{background:linear-gradient(135deg,#bbbcbe,#7272b2);color:#fff}.task11 .options{background:linear-gradient(135deg,#1a1a2e,#16213e)}.task11 .container .board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-radius:10px}.task11 .container .board .cardWrapper{background-color:#fff;width:70px;height:70px;display:flex;justify-content:center;align-items:center;margin-left:11px;border-radius:10px}.task11 .container .board .cardWrapper .card{background-color:#fff}.task11 .container .board .cardWrapper:hover{background-color:#c2b0b0;cursor:pointer}.task11 .container .board .cardWrapper:hover .card{background-color:#c2b0b0}.task11 .container .board .cardWrapper[done=true],.task11 .container .board .cardWrapper[done=true] .card{background-color:#decb4d}.task11 .container .board .cardWrapper[flipped=false] .card{display:none}.task12{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#1f2937;font-family:Arial,sans-serif}.task12 .slider-container{width:100%;background-color:#1f2937}.task12 .slider-wrapper{position:relative;background-color:#1f2937}.task12 .nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background-color:#374151;color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:24px;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center}.task12 .nav-button:hover{background-color:#4b5563}.task12 .nav-button-left{left:8px}.task12 .nav-button-right{right:8px}.task12 .items-container{overflow:hidden;margin:0 48px;background-color:#1f2937}.task12 .items-track{display:flex;justify-content:center;gap:16px;background-color:#1f2937}.task12 .item-slide{flex:0 0 calc(33.333% - 16px);max-width:300px}.task12 .item-card{background-color:#4b5563;border-radius:8px;padding:24px;height:192px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:background-color .2s ease}.task12 .item-card h3{background-color:#4b5563}.task12 .item-card:hover{background-color:#6b7280}.task12 .item-title{font-size:20px;font-weight:600;color:#fff;margin:0 0 8px}.task12 .item-content{color:#d1d5db;margin:0}.task13 input{width:400px;margin:0;padding:0;border:none;height:35px}.task13 .container{display:flex;width:450px;height:450px;flex-direction:column;border-radius:10px;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task13{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:100vw;height:100vh;overflow:hidden}.task13 .outputBox{height:390px;width:400px;background:linear-gradient(135deg,#1a1a2e,#16213e);overflow-y:auto}.task13 .command,.task13 .output{border:1px solid white;color:#fff;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:4px 0;border-radius:3px}.task13 .commandresult{margin-bottom:15px}.task14{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:linear-gradient(135deg,#1e1e1e,#2d2d2d)}.task14 .container{display:flex;flex-direction:column;align-items:center;background:linear-gradient(145deg,#3a3a3a,#2e2e2e);border-radius:20px;padding:30px;box-shadow:0 20px 40px #00000080;border:1px solid #4a4a4a}.task14 textarea{width:700px;height:120px;margin-bottom:30px;padding:15px;background:#1a1a1a;border:2px solid #444;border-radius:8px;color:#fff;font-size:16px;resize:none;outline:none;transition:border-color .3s ease}.task14 textarea::placeholder{color:#888;opacity:1}.task14 .keyboard{background:linear-gradient(145deg,#2c2c2c,#1f1f1f);padding:15px;border-radius:12px;border:1px solid #333}.task14 .keyboard-row{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.task14 .key{min-height:45px;border:1px solid #555;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;min-width:45px}.task14 .key.active{background:linear-gradient(145deg,#007acc,#0056a3)!important;border-color:#08f!important;color:#fff}.task14 .key-text{color:#e0e0e0;font-size:13px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-user-select:none;user-select:none}.task14 .key-backspace{min-width:80px}.task14 .key-tab{min-width:70px}.task14 .key-caps{min-width:85px}.task14 .key-enter{min-width:90px}.task14 .key-shift{min-width:75px}.task14 .key-space{min-width:250px}.task14 .key-modifier{min-width:60px}.task15{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task15 .container{width:400px;height:450px;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#b4b4c9,#8898c5);border-radius:10px;flex-direction:column;position:relative}.task15 .container .hint{color:#000;background:linear-gradient(135deg,#b4b4c9,#8898c5);margin-bottom:15px;font-style:italic;font-size:16px;text-align:center;padding:5px 10px;border-radius:5px}.task15 .container .puzzle{display:flex;flex-direction:column;border:2px solid #333;border-radius:5px}.puzzle .row{display:flex}.cropImg{background-image:url(../sliding-puzzle.jpg);width:100px;height:100px;background-size:300px 300px;border:1px solid #ccc;box-sizing:border-box}.cropImg:hover{border-color:#999}.cropImg.empty{background-image:none;background-color:#333;opacity:.3}.restart-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:10px 20px;font-size:14px;font-weight:700;border-radius:5px;cursor:pointer;margin-top:15px}.restart-btn:hover{background:linear-gradient(135deg,#45a049,#4caf50)}.task16 .listing{width:100px;height:100px;text-align:center;display:flex;justify-content:center;color:#fff;font-size:30px;font-weight:bolder;border-radius:10px;margin-bottom:3px;cursor:pointer;opacity:.75}.task16 .listing:hover{opacity:1}.task16 .container{width:700px;height:500px;display:flex;background:linear-gradient(135deg,#282877 20%,#344985);padding:10px;border-radius:10px}.task16{width:100vw;height:100vh;display:flex;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e)}.task16 .container .selectedItem{width:600px;height:500px;border-radius:10px;color:#fff;display:flex;justify-content:center;font-size:50px;flex-direction:column;position:relative}.task16 .container .allItems{margin-right:10px;background:linear-gradient(135deg,#282877 20%,#344985);height:500px;overflow-y:auto;overflow-x:hidden}.task16 .container .allItems button{width:100px;height:50px;border-radius:10px;background:linear-gradient(135deg,#01011b 20%,#6883cc);color:#fff;font-size:30px;border:none;opacity:.5}.task16 .container .allItems button:hover{opacity:1}.task16 .container .selectedItem .deleteSlide{position:absolute;top:10px;left:10px;color:#fff;background:transparent;padding:5px 10px;border-radius:5px;border:2px solid rgb(27,60,138);font-size:14px}.task16 .container .selectedItem .playSlide{position:absolute;top:10px;right:10px;color:#fff;background:transparent;padding:5px 10px;border-radius:5px;border:2px solid rgb(27,60,138);font-size:14px}.task16 .container .selectedItem button:hover{background:#87877b}.task16 .container .selectedItem .itemTextInput{background:none;border:none;color:#fff;width:500px;text-align:center;font-size:35px;font-weight:700}.task16 .container .selectedItem .itemTextInput:focus{outline:none;border:none}.task16 .container .selectedItem .colorSelect{position:absolute;left:10px;bottom:10px;background-color:#1a1a2e;color:#fff;border-radius:5px;padding:5px 10px;font-size:16px;appearance:none;cursor:pointer;transition:all .3s ease;text-align:center;background:transparent;border:2px solid rgb(27,60,138)}.task16 .container .selectedItem .animationSelect{position:absolute;right:10px;bottom:10px;background:transparent;color:#fff;border-radius:5px;padding:5px 10px;font-size:16px;appearance:none;cursor:pointer;transition:all .3s ease;text-align:center;border:2px solid rgb(27,60,138)}.selectedSlideshowItem{height:100vh;width:100vw;background:#344985;position:relative;color:#fff;font-size:50px;text-align:center;display:flex;justify-content:center}.selectedSlideshowItem .closeButton{position:absolute;right:10px;top:20px;border-radius:50px;padding:10px;background:#d41111;color:#fff;font-weight:bolder;border:none;opacity:.85}.selectedSlideshowItem .closeButton:hover,.selectedSlideshowItem .nextButton:hover{opacity:1}.selectedSlideshowItem .nextButton{position:absolute;right:10px;bottom:20px;background:#01874d;color:#fff;padding:5px 15px;border-radius:5px;border:none;opacity:.85}.instant-animation{animation:instant .1s ease-in-out}.fade-animation{animation:fade 1s ease-in-out}.up-animation{animation:slideUp 1s ease-out}.down-animation{animation:slideDown 1s ease-out}.blur-animation{animation:blur 1.2s ease-in-out}.rotate-animation{animation:rotate 1.5s ease-in-out}@keyframes instant{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100vh);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-100vh);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blur{0%{filter:blur(20px);opacity:0;transform:scale(1.1)}to{filter:blur(0px);opacity:1;transform:scale(1)}}@keyframes rotate{0%{transform:rotate(-180deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}.task17{height:100vh;width:100vw;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;justify-content:center;align-items:center;overflow:hidden}.task17 .container{width:600px;height:600px;border-radius:10px;background:linear-gradient(135deg,#282877 20%,#344985);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow-y:auto;overflow-x:hidden;padding:10px;position:relative}.task17 .container .number{height:200px;color:#fff;display:flex;justify-content:center;align-items:center;border-radius:10px;font-size:30px;font-weight:bolder;cursor:pointer;opacity:.8;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-origin:center}.task17 .container .number .number-text{background-color:transparent}.task17 .container .number:hover{opacity:1}.task17 .container .number.hidden{opacity:0;transform:scale(.8);pointer-events:none}.task17 .container .number.expanded{position:fixed;top:var(--original-top, 0);left:var(--original-left, 0);width:var(--original-width, 135px);height:var(--original-height, 200px);z-index:1000;opacity:1;transform:scale(1);animation:expandItem .3s cubic-bezier(.4,0,.2,1) forwards;box-shadow:0 20px 40px #0000004d;cursor:default;border-radius:10px}@keyframes expandItem{0%{width:var(--original-width, 135px);height:var(--original-height, 200px);top:var(--original-top, 0px);left:var(--original-left, 0px);border-radius:10px}to{width:var(--target-width, 580px);height:var(--target-height, 580px);top:var(--target-top, 0px);left:var(--target-left, 0px);border-radius:10px}}@keyframes collapseItem{0%{width:var(--target-width, 580px);height:var(--target-height, 580px);top:var(--target-top, 0px);left:var(--target-left, 0px);border-radius:10px}to{width:var(--original-width, 135px);height:var(--original-height, 200px);top:var(--original-top, 0px);left:var(--original-left, 0px);border-radius:10px}}.task17 .container .number .number-text{font-size:30px;font-weight:bolder;transition:font-size .3s ease}.task17 .container .number.expanded .number-text{font-size:80px}.task17 .container .number .close-button{position:absolute;top:20px;right:20px;width:40px;height:40px;background:#00000080;border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.task17 .container .number .close-button:hover{background:#000000b3;transform:scale(1.1)}.task17 .container:has(.number.expanded){overflow:hidden}.task18{width:100vw;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;justify-content:center;align-items:center}.task18 .container{width:600px;height:600px;background:linear-gradient(135deg,#282877 20%,#344985);border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:15px}.task18 .container canvas{width:550px;height:500px;border-radius:5px;background-color:#fff;cursor:crosshair}.task18 .container .colorSelect{width:30px;height:30px;border-radius:5px;border:none;opacity:.8;cursor:pointer}.task18 .container .colorSelect:hover{opacity:1;transform:scale(1.1)}.task18 .container .bottom{display:flex;margin-top:20px;gap:2.5px;justify-content:center}.task18 .container .rangeSelect{width:450px;margin-top:15px;cursor:pointer}.task19{position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;text-align:center}.task19 .container{display:flex;flex-direction:column;align-items:center}.task19 h2,h3{color:#fff}.task19 button{padding:10px 20px;color:#fff;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:10px;border:none;cursor:pointer}.task19 button:hover{background:linear-gradient(135deg,#3b3b5a,#212f55)}.task20 button{color:#fff;border:none;background-color:#112f66;padding:10px 20px;font-size:20px;border-radius:5px}.task20 button:hover{background-color:#0b2555;color:#d3d9e2}.task20{display:flex;justify-content:center;align-items:center;height:100vh}.task20 h2{color:#fff}.task21{background:linear-gradient(135deg,#1a1a2e,#16213e);height:100vh;display:flex;justify-content:center;align-items:center}.container{width:300px;height:300px;border:2px solid #fff;position:relative;overflow:hidden}.center-line{position:absolute;top:150px;left:50%;width:50px;height:5px;background:#fc0;margin-left:-25px;transition:transform .1s linear}.ball{width:30px;height:30px;background:radial-gradient(circle at 30% 30%,#00d4ff,#06f);border-radius:50%;position:absolute;top:0;left:50%;margin-left:-15px;box-shadow:0 4px 8px #00d4ff4d}.task21 button{color:#fff;border:none;background:linear-gradient(135deg,#7272b2,#91a1c2);border-radius:10px;padding:10px 20px;font-size:20px}.task22 .firstContainer{height:300px;background-color:#4b4b9f;color:#fff;display:flex;text-align:center;font-size:40px;justify-content:center}.task22 .upperContainer{height:50px;background-color:#262683}.task22 .secondContainer{display:flex;width:100%}.task22 .secondContainer .secondI{background-color:#ae922e}.task22 .secondContainer .secondII{background-color:#4b8db4}.task22 .secondContainer .secondIII{background-color:#cd704e}.task22 .secondContainer .secondII,.secondIII,.secondI{color:#fff;height:300px;flex:1;display:flex;justify-content:center;font-size:30px}.task22 .thirdContainer{height:200px;background-color:#5baed4;display:flex;justify-content:center;font-size:30px;color:#fff}.task22 .forthContainer{height:400px;background-color:#637c87;display:flex;justify-content:center;font-size:30px;color:#fff}@media (max-width: 1024px) and (min-width: 769px){.task22 .secondContainer{flex-wrap:wrap}.task22 .secondContainer .secondI{flex:none;width:100%}.task22 .secondContainer .secondII,.task22 .secondContainer .secondIII{flex:1;width:50%}}@media (max-width: 768px){.task22 .secondContainer{flex-direction:column}.task22 .secondContainer .secondII,.secondIII,.secondI{flex:none;width:100vw}}body{margin:0}.task23 .mainContainer[theme=dark]{--backgroundColor: rgb(51, 51, 51);--firstBackgroundColor: rgb(77, 77, 77);--textColor: rgb(187, 187, 187);--innerContainerColor: rgb(57, 57, 57);--barBackground: rgb(62, 131, 233);--insideThird: rgb(91, 91, 91)}.task23 .mainContainer[theme=light]{--backgroundColor: rgb(249, 249, 249);--firstBackgroundColor: rgb(255, 255, 255);--textColor: rgb(47, 47, 47);--innerContainerColor: rgb(245, 245, 245);--barBackground: rgb(65, 142, 248);--insideThird: rgb(209, 209, 209)}.task23 .mainContainer{height:460px;width:350px;background-color:var(--backgroundColor)}.task23 .mainContainer{border-radius:20px}.task23 .firstContainer{background-color:var(--firstBackgroundColor);border-top-left-radius:20px;border-top-right-radius:20px}.task23 .firstContainer h4{margin:0;color:var(--textColor);background-color:var(--firstBackgroundColor);font-weight:500;font-family:Arial,Helvetica,sans-serif}.task23{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background-color:#282058}.task23 .firstContainer{display:flex;align-items:center;padding:20px;justify-content:space-between}.toggle-button{position:relative;width:60px;height:30px;background-color:#fff;border:none;border-radius:30px;cursor:pointer;transition:background-color .3s ease;padding:0}.mainContainer[theme=dark] .toggle-button{background-color:#2d2d2d}.mainContainer[theme=light] .toggle-button{background-color:#2ac49b}.toggle-slider{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.mainContainer[theme=dark] .toggle-slider{transform:translate(30px);background-color:#28b182}.mainContainer[theme=light] .toggle-slider{transform:translate(0);background-color:#fff}.toggle-button:active .toggle-slider{width:28px}.task23 .secondContainer{background-color:var(--backgroundColor);margin-top:20px;display:flex;justify-content:center}.task23 .secondContainer input{background-color:var(--innerContainerColor);border:none;height:40px;width:305px;border-radius:6px}.task23 .secondContainer input::placeholder{color:var(--textColor);opacity:.7;font-size:15px;padding-left:15px}.inputWrapper{position:relative;width:305px}.inputWrapper input{width:100%}.searchIcon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.6;cursor:pointer}.task23 .thirdContainers{display:flex;background-color:var(--backgroundColor);justify-content:space-between;margin:20px 20px 10px}.task23 .thirdContainers .thirdContainer-box{height:150px;width:150px;background-color:var(--innerContainerColor);border-radius:10px}.task23 .thirdContainers .thirdContainer-box .thirdWrapper{margin:30px 15px 30px 10px}.task23 .thirdContainers .thirdContainer-box .firstLine{display:flex;justify-content:space-between;margin-bottom:10px}.task23 .thirdContainers .thirdContainer-box .firstLine .colorBox{height:15px;width:15px;border-radius:3px}.Line{height:15px;border-radius:3px;background-color:var(--insideThird);margin-bottom:7px}.task23 .forthContainer{margin:20px 20px 10px;background-color:var(--backgroundColor);display:flex;justify-content:space-between}.task23 .bar{height:120px;width:25px;background-color:var(--innerContainerColor);border-radius:5px;display:flex;flex-direction:column;justify-content:end}.bar-value{background-color:var(--barBackground);border-radius:5px}.task-24{width:100vw;height:100vh;background-color:#231a5a;display:flex;justify-content:center;align-items:center}.task-24-container{width:330px;background:#ffffff26;border-radius:20px;padding:20px 10px;display:flex;flex-direction:column;align-items:center}.title{color:#fff;margin-bottom:10px}.bottle-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:15px 0}.bottle{height:160px;width:50px;border-radius:0 0 25px 25px;border:2px solid black;border-top:none;display:flex;flex-direction:column-reverse;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.bottle.selected{transform:translateY(-10px);box-shadow:0 0 15px #fff9}.liquid{height:40px;width:100%;opacity:.8;transition:all .3s ease}.win-message{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 15px;border-radius:10px;font-size:16px;font-weight:700;margin-bottom:10px;animation:slideIn .4s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.reset-btn{margin-top:10px;padding:10px 25px;border:none;border-radius:8px;background:#3b9eff;color:#fff;font-weight:700;cursor:pointer}.reset-btn:hover{background:#2d7fd4}.bottle-grid,.title{background:#c31f1f00}.task25{background-color:#231a5a;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.task-25-container{height:350px;width:350px;background-color:#ffffff26;border-radius:10px;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:5px;padding:10px}.box{width:100px;height:100px;background-color:#fff3;border-radius:5px;color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .3s ease}.box.initial{background-color:#6496ff4d}.box.solved{background-color:#47cf4780;animation:pulse .5s ease}.task_26{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;background-color:#231a5a;flex-direction:column}.task_26_container{width:300px;height:300px;background-color:#36317f;border-radius:10px;display:grid;grid-template-rows:repeat(4,1fr);gap:4px;padding:5px}.gridRow{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background-color:#36317f;text-align:center}.gridCellWrapper{background-color:#36317f}.gridCell{color:#fff;background-color:#56509f;border-radius:5px;height:50px;width:70px;display:flex;justify-content:center;align-items:center;font-size:20px;transition:background-color .3s ease}.fixedCell{background-color:#000;color:#fff;cursor:not-allowed}.editableCell{background-color:#56509f;cursor:pointer}.editableCell:hover{background-color:#645ead}.correct{background-color:#0b600b!important}.wrong{background-color:#7f1127!important}.task_26_buttons{display:flex;justify-content:center;gap:20px;background-color:#231a5a}.task_26 button{margin-top:30px;color:#fff;padding:10px 40px;font-size:15px;background-color:#ffffff26;text-align:center;border:none;border-radius:5px}.task_26 button:hover{background-color:#ffffff40;cursor:pointer}.task27{background-color:#231a5a;height:100vh;width:100vw;display:flex}.task27 svg{background-color:#231a5a}.task-28{height:100vh;width:100vw;background-color:#231a5a;display:flex;justify-content:center}.task-28-container{height:500px;background-image:url(../pattern-lock.jpg);background-position:center;background-repeat:no-repeat;border-radius:30px;background-size:cover;box-shadow:0 10px 30px #0d246f66}.task-28-container .pattern{display:flex;justify-content:center;flex-direction:column;background-color:#0005;height:inherit;width:inherit;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px}.task-28-container .heading{color:#fff;background-color:#fff0}svg{height:350px;width:350px;background-color:#fff0}.circle[data-active=true]{fill:#ff0}.task-29{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;font-family:Arial,sans-serif;padding-top:40px}.task-29 .upload-box{margin-bottom:20px}.task-29 input[type=file]{display:none}.task-29 .upload-btn{padding:10px 20px;background:#0a4991;color:#fff;border-radius:6px;cursor:pointer;font-weight:700}.task-29 .upload-btn:hover{background:#005fd1}.task-29 .preview-container{position:relative;display:inline-block;margin-top:20px}.task-29 .preview-container img{max-width:400px;width:100%;border-radius:10px;display:block;box-shadow:0 5px 15px #0003}.task-29 .preview-container canvas{position:absolute;top:0;left:0}.task-29 .detect-btn{margin-top:20px;padding:10px 25px;border:none;background:#28a745;color:#fff;border-radius:6px;font-size:16px;cursor:pointer}.task-29 .detect-btn:hover{background:#218838}.task-30{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-top:40px;background:#f4f6fb;font-family:Arial,sans-serif}.task-30 input[type=file]{display:none}.upload-btn{background:#0a4991;color:#fff;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:700}.upload-btn:hover{background:#005fd1}.preview{margin-top:20px}.preview img{max-width:400px;width:100%;border-radius:10px;box-shadow:0 5px 15px #0003}.canvas{margin-top:20px;max-width:400px;width:100%;border-radius:10px;box-shadow:0 5px 15px #0003}.detect-btn{margin-top:20px;padding:10px 25px;border:none;background:#28a745;color:#fff;border-radius:6px;cursor:pointer}.detect-btn:hover{background:#218838}