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}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-overflow-scrolling:touch;background:linear-gradient(135deg,#f5f7fa,#e4e9f2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow-x:hidden}.App,body{min-height:100vh}.App{align-items:center;display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;padding:2rem}.header{animation:fadeInDown .8s ease;text-align:center}.header h1{color:#4bac9b;font-size:2.5rem;font-weight:800;margin-bottom:.5rem}.subtitle{color:#6b7280;font-size:1.25rem;font-weight:500}.canvas-container{animation:fadeIn 1s ease;background:#fff;border-radius:1rem;box-shadow:0 20px 50px #0000001a,0 10px 20px #0000000d;padding:2rem}canvas{-webkit-touch-callout:none;background:linear-gradient(135deg,#fafafa,#f0f0f0);border-radius:.5rem;display:block;touch-action:none;-webkit-user-select:none;user-select:none}.controls{animation:fadeInUp 1s ease;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.btn{align-items:center;border:none;border-radius:1rem;cursor:pointer;display:flex;font-family:inherit;font-size:1.125rem;font-weight:700;gap:.75rem;overflow:hidden;padding:1rem 2.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:before{background:linear-gradient(135deg,#ffffff4d,#fff0);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s}.btn:hover:before{opacity:1}.btn-icon{align-items:center;display:flex;font-size:1.5rem;justify-content:center}.btn-finalize{background:linear-gradient(135deg,#4bac9b,#5bc0ae);box-shadow:0 10px 25px #4bac9b66,0 5px 15px #4bac9b4d,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;color:#fff;transform:translateY(0)}.btn-finalize:hover{box-shadow:0 15px 35px #4bac9b80,0 8px 20px #4bac9b66,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;transform:translateY(-5px)}.btn-finalize:active{box-shadow:0 8px 20px #4bac9b66,0 4px 10px #4bac9b4d,inset 0 -2px 0 #0003,inset 0 1px 0 #ffffff4d;transform:translateY(-2px)}.btn-save{background:linear-gradient(135deg,#4bac9b,#5bc0ae);box-shadow:0 10px 25px #4bac9b66,0 5px 15px #4bac9b4d,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;color:#fff;transform:translateY(0)}.btn-save:hover{box-shadow:0 15px 35px #4bac9b80,0 8px 20px #4bac9b66,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;transform:translateY(-5px)}.btn-save:active{box-shadow:0 8px 20px #4bac9b66,0 4px 10px #4bac9b4d,inset 0 -2px 0 #0003,inset 0 1px 0 #ffffff4d;transform:translateY(-2px)}.btn-reset{background:linear-gradient(135deg,#4bac9b,#5bc0ae);box-shadow:0 10px 25px #4bac9b66,0 5px 15px #4bac9b4d,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;color:#fff;transform:translateY(0)}.btn-reset:hover{box-shadow:0 15px 35px #4bac9b80,0 8px 20px #4bac9b66,inset 0 -3px 0 #0003,inset 0 2px 0 #ffffff4d;transform:translateY(-5px)}.btn-reset:active{box-shadow:0 8px 20px #4bac9b66,0 4px 10px #4bac9b4d,inset 0 -2px 0 #0003,inset 0 1px 0 #ffffff4d;transform:translateY(-2px)}.instructions{animation:fadeInUp 1.2s ease;background:#fff;border-radius:1rem;box-shadow:0 10px 25px #0000000d;max-width:600px;padding:2rem}.instructions h3{color:#4bac9b;font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.instructions ul{display:flex;flex-direction:column;gap:1rem;list-style:none;padding:0}.instructions li{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:4px solid #4bac9b;border-radius:.5rem;color:#374151;font-size:1rem;padding:1rem;transition:transform .2s}.instructions li:hover{transform:translateX(5px)}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.App{padding:1rem}.header h1{font-size:2rem}.subtitle{font-size:1rem}.canvas-container{overflow:visible;padding:1rem}canvas{height:auto;max-width:100%;width:100%}.btn{font-size:1.1rem;min-height:48px;padding:1rem 2rem}.btn-icon{font-size:1.75rem}.instructions{padding:1.5rem}.instructions h3{font-size:1.25rem}.instructions li{font-size:.9rem;padding:.875rem}}
/*# sourceMappingURL=main.6d1dc22d.css.map*/