html,body{margin:0;padding:0;position:relative;overflow:hidden}.components{box-sizing:border-box;background-color:#a9a9a9;align-items:center;width:100px;max-height:440px;padding:40px 0;display:flex;position:absolute;top:50%;left:0;transform:translateY(-50%)}.image-container{grid-template-rows:repeat(3,1fr);grid-template-columns:auto;height:300px;transition:transform .3s;display:grid;overflow-y:hidden}.components img{cursor:pointer;width:100px}.components:before{content:"";position:inherit;border:15px solid #0000;border-bottom-color:#d3d3d3;width:0;height:0;top:-5px;left:50%;transform:translate(-50%)}.components:after{content:"";position:inherit;border:15px solid #0000;border-top-color:#d3d3d3;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%)}.run{-ms-border-radius:8px;-o-border-radius:8px;cursor:pointer;background-color:#90ee90;border:none;border-radius:8px;outline:none;padding:10px 20px;font-size:20px;position:absolute;top:20px;left:50%;transform:translate(-50%)}#popupDiv{background-color:#3333336c;width:100vw;height:100vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#editProperties{text-align:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;width:350px;padding:25px;position:absolute;top:50%;left:50%;transform:translateY(-50%)translate(-50%);box-shadow:0 4px 12px #0000001a}#editProperties h2{color:#333;margin-bottom:15px;font-size:1.6em;font-weight:600}label{color:#555;margin-bottom:8px;font-size:1.1em;font-weight:500;display:block}.direction{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}label{display:inline}input[type=number],input[type=text]{border:1px solid #ccc;border-radius:8px;height:10px;margin-right:5px;padding:6px;font-size:1.1em;transition:border-color .3s}input[type=number]:focus,input[type=text]:focus{border-color:#4caf50;outline:none}select{background-color:#fff;border:1px solid #ccc;border-radius:8px;font-size:1.1em;transition:border-color .3s}select:focus{border-color:#007bff;outline:none}span{color:#555;margin-left:10px;font-size:1.1em}.rotation-labels{justify-content:space-around;display:flex}.rotation-labels label{color:#666;cursor:pointer;margin:0 8px;font-size:1em}.checkbox-container{justify-content:center;align-items:center;margin-top:20px;display:flex}.checkbox-container label{margin-right:8px}input[type=radio]:hover,input[type=checkbox]:hover{cursor:pointer;background-color:#e0f7fa}#editProperties:hover{box-shadow:0 6px 20px #0000001a}input[type=number],input[type=text]{width:100%}.button{color:#fff;cursor:pointer;background-color:#4caf50;border:none;border-radius:5px;padding:10px 20px;font-size:16px}.button:hover{background-color:#45a049}.mybutton{color:#fff;cursor:pointer;background-color:#b22222;border:none;border-radius:5px;padding:10px 20px;font-size:16px}.mybutton:hover{background-color:#7b0000}.alert{color:#fff;background-color:#4caf50;padding:20px 30px;font-size:20px;display:none;position:absolute;bottom:30px;right:30px}.redalert{color:#fff;background-color:#9a3131;padding:20px 30px;font-size:20px;display:none;position:absolute;bottom:30px;right:30px}#user-guide{background-color:#fff;border-radius:8px;width:80%;max-width:900px;height:90vh;padding:30px;position:absolute;top:50%;left:50%;overflow-y:scroll;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0000001a}h1{color:#9c27b0;text-align:center;margin-top:0;font-size:28px}h2{color:#7b1fa2;margin-top:20px;font-size:24px}p{margin:10px 0;font-size:14px;line-height:1.6}.tip{background-color:#f9f9f9;border-left:5px solid #9c27b0;padding:8px;font-style:italic}.steps{background-color:#f3e5f5;border-left:5px solid #8e24aa;margin-bottom:8px;padding:8px;font-weight:700}.output{background-color:#f1e6f2;border-left:5px solid #9c27b0;margin-top:20px;padding:8px;font-weight:700}.section{margin-top:20px}.pro-tip{color:#8e24aa;margin-top:10px;font-style:italic;font-weight:700}#userguide-done{color:#fff;text-align:center;text-transform:uppercase;cursor:pointer;-ms-border-radius:30px;-o-border-radius:30px;-o-transition:all .3s ease-in-out;background-color:#9c27b0;border-radius:30px;width:150px;margin:40px auto 0;padding:10px 20px;font-size:15px;font-weight:700;text-decoration:none;transition:all .3s ease-in-out;display:block;box-shadow:0 2px 8px #0003}#userguide-done:hover{background-color:#7b1fa2;transform:scale(1.05);box-shadow:0 2px 4px #0000004d}
/*# sourceMappingURL=index.eea501fa.css.map */