.canvas-bg-grid{background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes marquee-infinite{0%{transform:translate(0)}to{transform:translate(-50%)}}.animate-marquee-scroll{animation:marquee-scroll linear infinite}.animate-marquee-infinite{animation:marquee-infinite linear infinite}@keyframes fade_up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes blur_reveal{0%{opacity:0;filter:blur(10px);transform:scale(1.2)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes typewriter{0%{opacity:0}1%{opacity:1}to{opacity:1}}@keyframes letter_elastic_right{0%{opacity:0;transform:translate(50px) scaleX(.5)}60%{opacity:1;transform:translate(-10px) scaleX(1.1)}80%{transform:translate(5px) scaleX(.95)}to{transform:translate(0) scaleX(1)}}@keyframes letter_pop_bouncy{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.5)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes letter_spin_drop{0%{opacity:0;transform:translateY(-100px) rotate(-180deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes letter_glitch_in{0%{opacity:0;transform:translate(-10px,10px);clip-path:inset(10% 0 80% 0)}20%{opacity:1;transform:translate(5px,-5px);clip-path:inset(80% 0 10% 0)}40%{transform:translate(-5px,5px);clip-path:inset(40% 0 40% 0)}60%{transform:translate(5px,-5px);clip-path:inset(10% 0 80% 0)}to{transform:translate(0);clip-path:inset(0 0 0 0)}}@keyframes subtle_wave{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes shimmer{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes letter_party_jump{0%,to{transform:translateY(0)}25%{transform:translateY(-15px) rotate(-5deg)}50%{transform:translateY(0)}75%{transform:translateY(-8px) rotate(5deg)}}@keyframes letter_jello{0%,to{transform:scaleZ(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}}@keyframes letter_rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.mobile-canvas-strip{width:390px;background-color:#fff;margin:40px auto 100px;box-shadow:0 0 0 1px #0000000d,0 10px 30px -5px #0000001a;position:relative}.canvas-resize-handle{position:absolute;bottom:-24px;left:0;width:100%;height:30px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;z-index:100;opacity:.6;transition:opacity .2s}.canvas-resize-handle:hover,.canvas-resize-handle.resizing{opacity:1}.canvas-resize-bar{width:40%;height:5px;background-color:#94a3b8;border-radius:3px;transition:all .2s;box-shadow:0 1px 2px #0000001a}.canvas-resize-handle:hover .canvas-resize-bar{background-color:#ec4899;width:70%;height:6px}.canvas-add-space-btn{position:absolute;top:15px;left:50%;transform:translate(-50%);background-color:#fff;border:1px solid #cbd5e1;color:#64748b;font-size:11px;font-weight:700;padding:6px 14px;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;pointer-events:auto;z-index:101}.canvas-add-space-btn:hover{background-color:#ec4899;border-color:#ec4899;color:#fff;transform:translate(-50%) translateY(2px);box-shadow:0 6px 12px -2px #ec48994d}.phone-mockup-container{perspective:1000px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.phone-bezel{width:420px;height:880px;background-color:#1e1e1e;border-radius:55px;box-shadow:0 0 0 2px #333,0 25px 50px -12px #00000080,inset 0 0 20px #000c;position:relative;margin:0 auto;padding:14px;pointer-events:auto;-webkit-user-select:none;user-select:none;transform-origin:center center;transform:scale(.85)}@media(max-height:900px){.phone-bezel{transform:scale(.75)}}.phone-button{position:absolute;background:#2a2a2a;border-radius:4px;box-shadow:inset 0 0 2px #00000080}.phone-button.power{top:200px;right:-4px;width:4px;height:60px}.phone-button.volume-up{top:180px;left:-4px;width:4px;height:40px}.phone-button.volume-down{top:240px;left:-4px;width:4px;height:40px}.phone-button.silent{top:120px;left:-4px;width:4px;height:25px}.phone-screen{width:100%;height:100%;background-color:#fff;border-radius:42px;overflow:hidden;position:relative;z-index:10}.phone-content-scroll{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.phone-content-scroll::-webkit-scrollbar{display:none}.phone-notch{position:absolute;top:12px;left:50%;transform:translate(-50%);width:100px;height:30px;background-color:#000;border-radius:20px;z-index:9999;pointer-events:none}.phone-notch:after{content:"";position:absolute;top:50%;right:20px;transform:translateY(-50%);width:10px;height:10px;background:#1a1a1a;border-radius:50%;box-shadow:inset 0 0 2px #ffffff1a}.phone-chin{position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:130px;height:5px;background-color:#00000080;border-radius:10px;z-index:9999;pointer-events:none;-webkit-backdrop-filter:invert(1);backdrop-filter:invert(1)}.design-element-selected{outline:2px solid #ec4899;cursor:move}@keyframes letter-pop{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@keyframes letter-drop{0%{opacity:0;transform:translateY(-50px)}60%{transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes letter-slide{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes letter-wave{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.magic-char{display:inline-block;animation-fill-mode:both}@keyframes float-up-wobble{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:.8}to{transform:translateY(-100vh) translate(20px);opacity:0}}@keyframes float-up-hearts{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.8;transform:translateY(-20px) scale(1)}to{transform:translateY(-100vh) scale(1.2);opacity:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeft{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes puffIn{0%{opacity:0;transform:scale(2);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0px)}}@keyframes backInUp{0%{transform:translateY(100px) scale(.7);opacity:.7}80%{transform:translateY(0) scale(.7);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px);opacity:1}}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skew(-30deg);opacity:0}60%{transform:skew(20deg);opacity:1}80%{transform:skew(-5deg)}to{transform:translateZ(0);opacity:1}}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;transform:translateZ(0)}}@keyframes swirlIn{0%{opacity:0;transform:rotate(-540deg) scale(0)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}to{opacity:1;transform:scaleZ(1) translateZ(0)}}@keyframes rubberBand{0%{transform:scaleZ(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleZ(1)}}@keyframes tada{0%{transform:scaleZ(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{transform:scaleZ(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{transform:skew(6.25deg) skewY(6.25deg)}44.4%{transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{transform:skew(.390625deg) skewY(.390625deg)}88.8%{transform:skew(-.1953125deg) skewY(-.1953125deg)}}@keyframes swing{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0)}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}@keyframes slideOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(50px)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.anim-fill-both{animation-fill-mode:both}.anim-paused{animation-play-state:paused!important}.animate-spin-slow{animation:spinSlow 8s linear infinite}.animate-fall{animation-timing-function:linear;animation-fill-mode:forwards}.animate-confetti{animation-timing-function:ease-in-out;animation-fill-mode:forwards}.animate-bounce-in{animation:bounceIn .5s ease-out forwards}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scale-up{animation:scaleUp .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes animateFadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:animateFadeIn .3s ease-out forwards}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
