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{background:linear-gradient(135deg,#f5f7fa,#e4e9f2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.App,body{min-height:100vh}.App{display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;padding:2rem;position:relative}.App,.app-header{align-items:center}.app-header{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr auto;margin-bottom:.5rem;max-width:864px;padding:.5rem 0;width:100%}.header-title{min-width:0;text-align:left}.header-title .subtitle{margin-top:.15rem}.header-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}.header-btn{align-items:center;border:none;border-radius:10px;box-shadow:0 4px 6px #00000040,0 8px 16px #00000026;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.9rem;font-weight:700;gap:.5rem;height:40px;justify-content:center;padding:0 1rem;transition:transform .2s ease,box-shadow .2s ease}.header-btn:hover{box-shadow:0 6px 12px #0000004d,0 12px 24px #0003;transform:translateY(-2px)}.header-btn:active{transform:translateY(0)}.header-btn-finalize,.header-btn-reset,.header-btn-save{background:linear-gradient(180deg,#4bac9be6,#4bac9bbf)}.header-btn-finalize:hover,.header-btn-reset:hover,.header-btn-save:hover{background:linear-gradient(180deg,#4bac9bf2,#4bac9bd9)}.fullscreen-btn{background:#1c1c1c80;flex-shrink:0;height:40px;padding:0;width:40px}.fullscreen-btn:hover{background:#30303080}.fullscreen-btn .btn-icon{display:none}.header-title h1{color:#4bac9b;font-size:1.75rem;font-weight:800;margin-bottom:0}.subtitle{color:#6b7280;font-size:1rem;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{background:linear-gradient(135deg,#fafafa,#f0f0f0);border-radius:.5rem;display:block}.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-title h1{font-size:1.5rem}.subtitle{font-size:1rem}.canvas-container{overflow-x:auto;padding:1rem}canvas{height:auto;max-width:100%}.btn{font-size:1rem;padding:.875rem 1.75rem}.instructions{padding:1.5rem}.instructions h3{font-size:1.25rem}.instructions li{font-size:.9rem;padding:.875rem}}
/*# sourceMappingURL=main.d2efb695.css.map*/