@font-face{font-family:Roboto-Bold;src:url(/src/assets/Roboto-Bold.ttf) format("truetype")}*{box-sizing:border-box}body,html,#app{height:100%;margin:0;padding:0;overflow:hidden}.canvas-container{display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;display:block}.bg{background-color:#fff;background-image:linear-gradient(45deg,#f3f3f3 25%,transparent 25%,transparent 75%,#f3f3f3 75%,#f3f3f3),linear-gradient(45deg,#f3f3f3 25%,#fff 25%,#fff 75%,#f3f3f3 75%,#f3f3f3);background-size:20px 20px;background-position:0 0,10px 10px;transition:all .5s ease}.bg.dark{background-color:#313131;background-image:linear-gradient(45deg,#333333 25%,transparent 25%,transparent 75%,#333333 75%,#333333),linear-gradient(45deg,#333 25%,#313131 25%,#313131 75%,#333 75%,#333);background-size:20px 20px;background-position:0 0,10px 10px}.drag-over{background-image:linear-gradient(45deg,#333333 25%,transparent 25%,transparent 75%,#333333 75%,#333333),linear-gradient(45deg,#333 25%,#313131 25%,#313131 75%,#333 75%,#333);transition:all .5s ease}canvas{height:100vh}.title{position:fixed;top:6%;left:50%;width:80%;transform:translate(-50%);text-align:center;color:#c83c5a;font-size:32px;font-family:Roboto-Bold;font-weight:700;font-style:normal;margin:10px;text-shadow:0 2px 8px rgba(200,60,90,.25)}.upload-button{background:linear-gradient(135deg,#ff7aa2,#ff568a);border-width:0px;border-radius:50%;position:absolute;top:40%;left:50%;transform:translate(-50%,-60%);z-index:10;width:200px;height:200px;display:flex;justify-content:center;align-items:center;transition:all .35s ease;box-shadow:0 12px 36px #ff568a73;cursor:pointer}.upload-button:hover{transform:translate(-50%,-60%) scale(1.05);box-shadow:0 16px 44px #ff568a99}.upload-container{width:100px;height:100px}.bottom-svg{width:100%;position:absolute;bottom:-20px;left:50%;transform:translate(-50%);z-index:10}.demo{margin-top:-10px;padding:20px;height:200px;background:linear-gradient(135deg,#1d90ee,#009aff);text-align:center;color:#fff;font-size:20px;font-family:Roboto-Bold;border-radius:0 0 18px 18px;box-shadow:0 -4px 24px #009aff4d}.favicon:hover{cursor:pointer}.demoimg{width:84px;height:84px;border-radius:50%;margin:12px;object-fit:cover;border:3px solid rgba(255,255,255,.85);transition:transform .2s ease,box-shadow .2s ease}.demoimg:hover{cursor:pointer;transform:scale(1.08);box-shadow:0 6px 18px #00000059}.description{display:inline-block;color:#fff;min-width:64px;font-family:Roboto-Bold;font-size:14px;letter-spacing:1px}.opt>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}select{flex:1;background-color:#2b2b2b;color:#fff;font-size:15px;font-family:Roboto-Bold;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:7px 8px;margin:0;outline:none;transition:border-color .2s ease}select:focus{border-color:#1d90ee}.run-button,.save-button,.reset-button,.reset-all-button,.question-button,.goback{cursor:pointer;border:none;border-radius:25px;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;box-shadow:0 4px 12px #0000004d}.run-button:hover,.save-button:hover,.reset-button:hover,.reset-all-button:hover,.question-button:hover,.goback:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 6px 18px #0006}.run-button{width:44px;height:44px;background:linear-gradient(135deg,#36a9ff,#1d90ee);padding:5px;margin:5px;display:inline-flex;justify-content:center;align-items:center}.question-button{width:44px;height:44px;background-color:#2b2b2b;padding:5px;margin:5px 5px 30px;display:inline-flex;justify-content:center;align-items:center}.save-button{width:44px;height:44px;background:linear-gradient(135deg,#a6e05a,#9dca5a);padding:5px;margin:5px;display:inline-flex;justify-content:center;align-items:center}.reset-button{width:44px;height:44px;background:linear-gradient(135deg,#5aa9ff,#4a90e2);padding:5px;margin:5px;display:inline-flex;justify-content:center;align-items:center}.reset-all-button{width:44px;height:44px;background:linear-gradient(135deg,#ffb35c,#ff9f43);padding:5px;margin:5px;display:inline-flex;justify-content:center;align-items:center}.goback{position:absolute;top:10px;left:10px;width:44px;height:44px;background:linear-gradient(135deg,#e23b7a,#d21d5a);border-radius:20px;padding:5px;margin:5px;display:flex;justify-content:center;align-items:center;z-index:10}.github{position:absolute;top:10px;right:10px;width:44px;height:44px;display:flex;justify-content:center;align-items:center;z-index:10;border:none;border-radius:10px;-webkit-user-select:none;user-select:none;background-color:#00000040;transition:background-color .2s ease}.github:hover{cursor:pointer;background-color:#00000080}.floating-menu{position:absolute;background-color:#1d1d1deb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;box-shadow:0 12px 40px #00000073;color:#fff;width:330px;max-width:92%;padding:18px 20px;bottom:25px;left:50%;transform:translate(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px;transition:all .4s ease;-webkit-user-select:none;user-select:none}.floating-menu>div{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}.info{font-size:14px;font-family:Roboto-Bold;color:#ffe2ec;text-align:center;width:100%}.action-row{display:flex;gap:10px;justify-content:center;align-items:center}.progressbar{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.progress-track{width:100%;height:12px;background:#ffffff29;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4a90e2,#1d90ee);border-radius:999px;transition:width .25s ease}.progress-text{font-size:14px;color:#fff;font-family:Roboto-Bold}.dragLine{position:fixed;top:0;bottom:0;left:50%;width:9px;transform:translate(-100%);background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:10}.dragLine:hover{cursor:ew-resize}.dragBall{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;background-color:#000000e6;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 14px #00000080}.floating-menu button{margin:5px}