:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;background:#ececec}.container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:start;position:absolute;top:0;left:0;background-color:#ececec}h1{text-align:center;width:100%;margin:10px 0;font-size:24px}.module-item{position:absolute;z-index:3;background:#4caf50;color:#fff;padding:10px;border-radius:5px;font-size:18px;font-weight:700;text-align:center;box-shadow:2px 2px 5px #0003;cursor:grab;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;min-width:50px;min-height:50px}.resize-handle{position:absolute;width:15px;height:15px;background:#fff;border:2px solid #000;bottom:5px;right:5px;cursor:nwse-resize;border-radius:3px;background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"%3E%3Cpath d="M3 21h18v-2H3v2zm0-4h12v-2H3v2zm0-4h8v-2H3v2zm0-4h4V7H3v2zm0-4h2V3H3v2zM21 3h-6v2h4v4h2V3zm0 8h-4v2h4v4h2v-6h-2zm-4 8v-2h-2v4h6v-2h-4z"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center;background-size:contain}.delete-button{position:absolute;top:-10px;right:-10px;background:red;color:#fff!important;border:none;border-radius:50%;width:24px;height:24px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:2px 2px 5px #0003;-webkit-text-fill-color:white!important}.delete-button svg{fill:#fff!important}.taskbar{position:fixed;bottom:0;left:0;width:100%;background:#333;padding:10px;display:flex;justify-content:center;gap:10px;z-index:1000;height:var(--taskbar-height, 50px);cursor:auto}.taskbar button{background:#4caf50;color:#fff;border:none;padding:10px 15px;font-size:16px;cursor:pointer;border-radius:5px}.taskbar button:hover{background:#388e3c}.reset-button{background:#d32f2f!important}.reset-button:hover{background:#b71c1c!important}.page-navigation{position:fixed;bottom:15px;right:15px;display:flex;align-items:center;justify-content:space-between;background:#000000b3;padding:4px 10px;border-radius:8px;color:#fff;font-size:14px;width:190px;height:30px;z-index:1002}.page-navigation button{background:#4caf50;color:#fff;border:none;padding:3px 6px;font-size:14px;cursor:pointer;border-radius:4px;min-width:30px;height:24px;display:flex;align-items:center;justify-content:center}.page-navigation button:hover{background:#388e3c}.page-navigation button:disabled{background:#555;cursor:not-allowed}.page-navigation span{flex:1;text-align:center;font-weight:700;white-space:nowrap;font-size:14px}.page-navigation .add-page{font-size:18px;font-weight:700}.page-navigation .delete-page{background:transparent;font-size:16px;color:#fff;border:none;border-radius:4px;min-width:30px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.page-navigation .delete-page:hover{transform:scale(1.5);background:transparent!important}.background-menu{position:fixed;top:50px;right:20px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:300px;z-index:100;cursor:auto}.background-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:5px}.uploaded-backgrounds{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.background-item{width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #ccc;overflow:hidden;border-radius:6px}.background-item img,.uploaded-background-item img{width:100%;height:100%;object-fit:cover;border-radius:6px}.custom-upload-button{display:flex;align-items:center;justify-content:center;width:calc(100% - 20px);max-width:280px;padding:8px;font-size:14px;background:#4caf50;color:#fff;border-radius:5px;cursor:pointer;transition:background .2s ease-in-out;margin:10px auto;text-align:center}.custom-upload-button:hover{background:#388e3c}.custom-upload-button input{display:none}.uploaded-backgrounds{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;max-width:100%}.uploaded-background-item{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;overflow:hidden}.uploaded-background-item .delete-button{position:absolute;top:4px;right:4px;background:#f00c;color:#fff;border:none;border-radius:50%;width:16px;height:16px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:2px 2px 5px #0003;transition:background .2s ease-in-out}.uploaded-background-item .delete-button:hover{background:#c80000}.close-menu-button{position:absolute;top:10px;right:10px;width:24px;height:24px;background:#000;color:#fff!important;-webkit-text-fill-color:white!important;border:none;border-radius:50%;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease-in-out}.close-menu-button:before,.close-menu-button svg{fill:#fff!important;color:#fff!important}.close-menu-button:hover{background:#000000b3}.drawing-layer{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:auto;z-index:2}.pen-menu{position:fixed;bottom:60px;left:50%;transform:translate(-50%);background:#fff;padding:10px;border-radius:8px;box-shadow:0 4px 6px #0000001a;display:flex;gap:10px;align-items:center;z-index:1001;cursor:auto}.color-options{display:flex;gap:5px}.color-item{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent}.color-item:hover{border:2px solid black}.pen-menu button:focus{outline:none;border:2px solid transparent}.pen-menu input[type=range]{width:80px}.container,.drawing-layer{cursor:var(--d69a1f30)}.pen-menu button{background:#fff;border:2px solid transparent;padding:5px 10px;font-size:16px;cursor:pointer;border-radius:5px;transition:border-color .2s ease-in-out}.pen-menu button:hover{border:2px solid #4CAF50}.pen-menu button.active{background:#4caf50;color:#fff;font-weight:700}.pen-menu button:disabled{background:#ccc;cursor:not-allowed}body,.container,.taskbar,.module-item,.drawing-layer{-webkit-user-select:none;user-select:none}.reload-button{position:fixed;top:10px;right:10px;background:red;color:#fff;border:none;padding:10px 15px;font-size:16px;cursor:pointer;border-radius:5px;z-index:2000;font-weight:700;box-shadow:2px 2px 5px #0003}.reload-button:hover{background:#8b0000}