body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:linear-gradient(135deg,#4f46e5,#7c3aed 50%,#ec4899);box-sizing:border-box;font-family:Arial,sans-serif;height:100vh;left:0;overflow:hidden;padding:15px;position:fixed;text-align:center;top:0;width:100vw}.app-container{display:flex;gap:15px;height:calc(100vh - 30px);max-width:100%;overflow:hidden}.color-palette-sidebar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:16px;box-shadow:0 8px 32px #0003;flex-shrink:0;min-width:200px;overflow-y:auto;padding:16px;width:240px}.color-palette-sidebar h3{color:#fff;font-size:1.2rem;font-weight:600;margin:0 0 20px;text-shadow:0 1px 2px #0003}.color-list{display:flex;flex-direction:column;gap:10px}.color-item{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;gap:10px;padding:12px;transition:all .3s ease}.color-item:hover{background:#fff3;box-shadow:0 6px 20px #00000026;transform:translateX(5px) scale(1.02)}.color-number{color:#fff;font-weight:700;min-width:25px;text-align:center;text-shadow:0 1px 2px #0003}.color-swatch{border:2px solid #ffffff4d;border-radius:8px;box-shadow:0 2px 8px #0003;flex-shrink:0;height:30px;width:30px}.color-value{color:#fffffff2;flex:1 1;font-family:monospace;font-size:.9rem;font-weight:500;text-shadow:0 1px 2px #0003}.delete-button{color:#fff!important;opacity:0;transition:opacity .2s}.color-item:hover .delete-button{opacity:1}.empty-message{color:#fffc;font-style:italic;margin-top:20px;text-align:center;text-shadow:0 1px 2px #0003}.canvas-container{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:16px;box-shadow:0 8px 32px #0000001a;display:flex;flex:1 1;flex-direction:column;justify-content:center;min-width:0;overflow:hidden}h1{color:#333}h1,p{margin-bottom:20px}p{color:#666}ul{color:#444;margin-bottom:30px;text-align:left}li{margin-bottom:10px}.upload-button{background-color:#1976d2;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:10px 20px;text-transform:uppercase;transition:background-color .3s}.upload-button:hover{background-color:#1565c0}.controls-panel{align-self:flex-start;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:16px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;flex-shrink:0;gap:12px;min-width:160px;padding:16px;width:180px}.controls-panel h4{color:#fff;font-size:1rem;font-weight:600;margin:0 0 8px;text-shadow:0 1px 2px #0003}.button-container{display:flex;flex-direction:column;gap:12px}.button-container button{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #ffffff40;border-radius:10px;box-shadow:0 2px 8px #0000001a;color:#fff;cursor:pointer;font-size:12px;font-weight:500;overflow:hidden;padding:10px 12px;text-align:center;text-overflow:ellipsis;text-shadow:0 1px 2px #0003;transition:all .3s ease;white-space:nowrap;width:100%}.button-container button:hover{background:#fff3;border-color:#fff6;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.button-container button:disabled{background:#ffffff0d;cursor:not-allowed;opacity:.5}.button-container button:disabled:hover{background:#ffffff0d;border-color:#ffffff26;transform:none}@media (max-width:1200px){.color-palette-sidebar{min-width:180px;width:220px}.controls-panel{min-width:140px;width:160px}}@media (max-width:1024px){.color-palette-sidebar{min-width:160px;padding:12px;width:200px}.controls-panel{min-width:120px;padding:12px;width:140px}.button-container button{font-size:11px;padding:8px 10px}}@media (max-width:768px){.App{padding:8px}.app-container{flex-direction:column;gap:8px;height:calc(100vh - 16px)}.canvas-container{border-radius:12px;flex:1 1;min-height:40vh;order:1}.color-palette-sidebar{border-radius:12px;height:auto;max-height:none;min-width:100%;order:2;overflow:hidden;padding:8px;width:100%}.color-palette-sidebar h3{display:none}.color-list{flex-direction:row;flex-wrap:wrap;gap:6px;justify-content:center}.color-item{border-radius:8px;flex-direction:row;flex-shrink:0;gap:4px;min-width:auto;padding:4px 6px}.color-number{display:none}.color-swatch{border-radius:6px;height:32px;width:32px}.color-value{display:none}.delete-button{opacity:.7!important;padding:2px!important}.delete-button svg{font-size:16px!important}.color-item:hover{transform:none}.controls-panel{align-self:auto;border-radius:12px;min-width:100%;order:3;padding:10px;width:100%}.controls-panel h4{display:none}.button-container{flex-direction:row;flex-wrap:wrap;gap:6px}.button-container button{border-radius:8px;flex-basis:calc(50% - 3px);flex-grow:1;flex-shrink:1;font-size:11px;min-width:calc(50% - 3px);padding:10px 8px}.empty-message{font-size:.85rem;margin:8px 0}}@media (max-width:480px){.App{padding:6px}.app-container{gap:6px;height:calc(100vh - 12px)}.canvas-container{border-radius:10px;min-height:35vh}.color-palette-sidebar{border-radius:10px;padding:6px}.color-list{gap:5px}.color-item{padding:3px 5px}.color-swatch{height:28px;width:28px}.controls-panel{border-radius:10px;padding:8px}.button-container{gap:5px}.button-container button{flex-basis:calc(50% - 3px);flex-grow:1;flex-shrink:1;font-size:10px;padding:8px 6px}}@media (max-width:768px) and (orientation:landscape){.app-container{flex-direction:row;height:calc(100vh - 16px)}.canvas-container{flex:1 1;min-height:auto;order:2}.color-palette-sidebar{height:100%;max-height:none;max-width:160px;min-width:140px;order:1;overflow-x:hidden;overflow-y:auto;width:auto}.color-palette-sidebar h3{display:block;font-size:.9rem;margin-bottom:10px}.color-list{flex-direction:column}.color-item{flex-direction:row;min-width:auto}.color-value{max-width:60px}.controls-panel{align-self:stretch;height:100%;max-width:140px;min-width:120px;order:3;width:auto}.controls-panel h4{display:block;font-size:.9rem}.button-container{flex-direction:column}.button-container button{flex:none;font-size:10px;min-width:100%}}@media (max-width:360px){.button-container button{font-size:9px;padding:7px 5px}.color-swatch{height:26px;width:26px}.color-item{padding:2px 4px}.color-list{gap:4px}}.welcome-container{align-items:center;background:linear-gradient(135deg,#4f46e5,#7c3aed 50%,#ec4899);box-sizing:border-box;color:#fff;display:flex;flex-direction:column;justify-content:center;left:0;min-height:100vh;overflow-y:auto;padding:2rem;position:fixed;text-align:center;top:0;width:100vw}.welcome-header{margin-bottom:3rem}.logo-container{align-items:center;display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.logo-icon{color:#fff;font-size:3rem!important}.app-title{color:#fff;font-size:2.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px #0000004d}.app-subtitle{color:#fffffff2;font-size:1.2rem;font-weight:400;margin:0;text-shadow:0 1px 2px #0003}.upload-area{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:2px dashed #ffffff80;border-radius:20px;box-shadow:0 8px 32px #0000001a;cursor:pointer;margin-bottom:3rem;min-width:400px;padding:3rem 2rem;transition:all .3s ease}.upload-area.dragging,.upload-area:hover{background:#fff3;border-color:#fff9;transform:translateY(-5px)}.upload-content{align-items:center;display:flex;flex-direction:column;gap:1rem}.upload-icon{font-size:4rem!important;opacity:.8}.upload-title{color:#fff;font-size:1.5rem;font-weight:600}.upload-text,.upload-title{margin:0;text-shadow:0 1px 2px #0003}.upload-text{color:#ffffffe6;font-size:1rem}.browse-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:1px solid #ffffff4d;border-radius:50px;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;padding:.75rem 2rem;transition:all .3s ease}.browse-button:hover{background:#ffffff4d;border-color:#ffffff80}.features-section{max-width:600px}.features-section h3{color:#fff;font-size:1.5rem;font-weight:600;margin-bottom:2rem;text-shadow:0 1px 2px #0003}.features-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(3,1fr)}.feature-item{flex-direction:column;gap:1rem}.feature-item,.feature-number{align-items:center;display:flex}.feature-number{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:50%;font-size:1.2rem;font-weight:700;height:50px;justify-content:center;width:50px}.feature-item p{color:#fffffff2;font-size:1rem;margin:0;text-shadow:0 1px 2px #0003}@media (max-width:768px){.welcome-container{justify-content:flex-start;padding:3rem 1.5rem 1.5rem}.welcome-header{margin-bottom:2rem}.logo-container{flex-direction:column;gap:.5rem}.logo-icon{font-size:2.5rem!important}.app-title{font-size:2rem}.app-subtitle{font-size:1rem}.upload-area{margin-bottom:2rem;max-width:350px;min-width:auto;padding:2rem 1.5rem;width:100%}.upload-icon{font-size:3rem!important}.upload-title{font-size:1.2rem}.browse-button,.upload-text{font-size:.9rem}.browse-button{padding:.6rem 1.5rem}.features-section h3{font-size:1.2rem;margin-bottom:1.5rem}.features-grid{gap:1.5rem;grid-template-columns:1fr}.feature-item{flex-direction:row;gap:1rem;text-align:left}.feature-number{flex-shrink:0;font-size:1rem;height:40px;width:40px}.feature-item p{font-size:.9rem}}@media (max-width:480px){.welcome-container{padding:2rem 1rem 1rem}.welcome-header{margin-bottom:1.5rem}.logo-icon{font-size:2rem!important}.app-title{font-size:1.6rem}.app-subtitle{font-size:.9rem}.upload-area{border-radius:16px;margin-bottom:1.5rem;padding:1.5rem 1rem}.upload-icon{font-size:2.5rem!important}.upload-title{font-size:1.1rem}.browse-button,.upload-text{font-size:.85rem}.browse-button{padding:.5rem 1.2rem}.features-section{width:100%}.features-section h3{font-size:1.1rem;margin-bottom:1rem}.feature-number{font-size:.9rem;height:35px;width:35px}.feature-item p{font-size:.85rem}}@media (max-width:360px){.app-title{font-size:1.4rem}.upload-area{padding:1.2rem .8rem}.features-section h3,.upload-title{font-size:1rem}}@media (max-width:768px) and (orientation:landscape){.welcome-container{justify-content:center;padding:1rem 2rem}.welcome-header{margin-bottom:1rem}.logo-container{flex-direction:row}.app-title{font-size:1.5rem}.upload-area{margin-bottom:1rem;max-width:300px;padding:1rem}.upload-icon{font-size:2rem!important}.upload-title{font-size:1rem}.features-section{display:none}}
/*# sourceMappingURL=main.6ead8a57.css.map*/