body{margin:0}.hollow{opacity:0;pointer-events:none;display:none}.hidden{display:none}#app{position:absolute;top:0;left:0;width:100%;height:100%}#sketch{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.loader-screen{position:fixed;z-index:5;top:0;left:0;width:100%;height:100%;transition:.3s;background:#000}.loading-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading{color:#fff;font-size:1.875rem;letter-spacing:.1em}.loading span{animation:blur 1.5s calc(var(--i) / 5 * 1s) alternate infinite}@keyframes blur{to{filter:blur(2px)}}.upload-container{margin:20px;padding:10px;border:1px solid #ccc;border-radius:5px;max-width:500px}.image-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.image-box{position:relative;width:100px;height:100px;border:1px solid #ccc;border-radius:5px;overflow:hidden;display:flex;justify-content:center;align-items:center}.image-box img{max-width:100%;max-height:100%}.use-button{position:absolute;bottom:5px;right:5px;background-color:#007bff;color:#fff;border:none;padding:2px 5px;font-size:12px;border-radius:3px;cursor:pointer}.used{border:2px solid #28a745}.bottom-bar{position:fixed;bottom:5vmin;left:50%;transform:translate(-50%);justify-content:space-between;box-shadow:0 -2px 10px #00000080;z-index:1000;height:2.8rem;background-color:#ccc3;border-radius:1.5rem;align-items:center;overflow:hidden;padding:0 1rem}.label{font-size:18px;font-weight:700}.button-container{display:flex;gap:10px}.button{width:2rem;height:2rem;border-radius:50%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;margin:.5rem;position:relative;background-color:inherit;box-shadow:2px 2px 6px #0006,-2px -2px 6px #fffc;pointer-events:all}.button:hover{transform:scale(1.2);box-shadow:2px 2px 8px #00000080,-2px -2px 8px #ffffffe6}.button:active{box-shadow:inset 2px 2px 6px #00000080,inset -2px -2px 6px #ffffffb3;transform:scale(1.1)}.side-bar{position:fixed;top:50%;left:5vmin;transform:translateY(-50%);justify-content:center;box-shadow:0 2px 10px #00000080;z-index:1000;width:3.5rem;background-color:#ccc3;border-radius:1.5rem;padding:1rem 0;overflow:hidden}.button-container-sidebar{display:flex;flex-direction:column;align-items:center;gap:10px}.joystick-container{position:fixed;bottom:5%;right:5%;width:100px;height:100px;border-radius:50%;background-color:#0000004d;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #00000080;z-index:1000}#image-loader-container{position:fixed;top:10vmin;left:40%;width:20%;overflow-y:auto;background:#ffffff4d;border:1px solid #ccc;box-shadow:0 4px 8px #0003;padding:10px;border-radius:8px;z-index:1000}.image-list{display:flex;flex-direction:row;gap:10px}.image-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ddd;padding:2px;border-radius:5px;margin:2px}.image-item img{max-width:100%;border-radius:4px}.load-more{background-color:#007bff;color:#fff;border:none;padding:5px 10px;font-size:14px;border-radius:4px;cursor:pointer}.load-more:hover{background-color:#0056b3}.image-item:hover{transform:scale(1.2);box-shadow:2px 2px 8px #00000080,-2px -2px 8px #ffffffe6}.clear-button{position:absolute;top:2%;left:50%;transform:translate(-50%);width:50px;height:50px;background-color:#ff0000b3;color:#fff;font-size:14px;font-weight:700;text-align:center;line-height:50px;border-radius:50%;cursor:pointer;box-shadow:0 4px 6px #0000004d;transition:transform .2s,background-color .2s;z-index:1000}.clear-button:hover{transform:scale(1.1);background-color:#ff0000e6}.clear-button:active{transform:scale(.9)}