@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap";
:root{--bg-dark:240 20% 4%;--bg-card:240 10% 8%;--bg-card-hover:240 10% 12%;--primary:263 90% 64%;--primary-glow:263 90% 64% / .15;--secondary:190 95% 50%;--accent:320 100% 60%;--text-primary:0 0% 98%;--text-muted:240 5% 65%;--border-glass:240 10% 20% / .4;--font-outfit:"Outfit", sans-serif;--font-mono:"Space Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:hsl(var(--bg-dark));color:hsl(var(--text-primary));font-family:var(--font-outfit);background-image:radial-gradient(at 0% 0%, hsl(var(--primary) / .08) 0px, transparent 50%), radial-gradient(at 100% 100%, hsl(var(--secondary) / .08) 0px, transparent 50%), linear-gradient(to right, hsl(var(--text-primary) / .01) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--text-primary) / .01) 1px, transparent 1px);background-size:100% 100%,100% 100%,64px 64px,64px 64px;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:hsl(var(--bg-dark))}::-webkit-scrollbar-thumb{background:hsl(var(--border-glass));border-radius:4px}::-webkit-scrollbar-thumb:hover{background:hsl(var(--primary) / .6)}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:700}a{color:inherit;text-decoration:none}.navbar{z-index:100;background:hsla(var(--bg-dark) / .65);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid hsl(var(--border-glass));justify-content:space-between;align-items:center;width:100%;padding:1.25rem 2.5rem;display:flex;position:sticky;top:0}.nav-logo{background:linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;display:flex}.nav-links{gap:2rem;font-size:.95rem;font-weight:500;display:flex}.nav-link{color:hsl(var(--text-muted));transition:color .3s}.nav-link:hover,.nav-link.active{color:hsl(var(--text-primary))}.nav-btn{background:linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / .8));border:1px solid hsl(var(--text-primary) / .1);color:hsl(var(--text-primary));cursor:pointer;border-radius:9999px;padding:.6rem 1.25rem;font-weight:600;transition:transform .2s,box-shadow .2s}.nav-btn:hover{box-shadow:0 4px 20px hsl(var(--primary) / .35);transform:translateY(-1px)}.hero-section{text-align:center;flex-direction:column;align-items:center;max-width:850px;margin:0 auto;padding:6rem 2rem 4rem;display:flex}.hero-tagline{font-size:.9rem;font-family:var(--font-mono);color:hsl(var(--secondary));border:1px solid hsl(var(--secondary) / .2);background:hsl(var(--secondary) / .05);text-transform:uppercase;letter-spacing:.1em;border-radius:9999px;margin-bottom:1.5rem;padding:.4rem 1rem;font-weight:700}.hero-title{background:linear-gradient(to right, #fff, hsl(var(--text-muted)));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:3.5rem;line-height:1.1}.hero-desc{color:hsl(var(--text-muted));max-width:600px;font-size:1.15rem;line-height:1.6}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;max-width:1300px;margin:0 auto;padding:2rem 4rem 6rem;display:grid}.tool-card{background:hsl(var(--bg-card) / .4);border:1px solid hsl(var(--border-glass));cursor:pointer;border-radius:20px;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.tool-card:before{content:"";background:linear-gradient(135deg, hsl(var(--primary) / .03), hsl(var(--secondary) / .03));opacity:0;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.tool-card:hover{border-color:hsl(var(--primary) / .3);background:hsl(var(--bg-card-hover) / .6);box-shadow:0 10px 30px -10px hsl(var(--primary) / .15), 0 0 1px 1px hsl(var(--primary) / .2);transform:translateY(-4px)scale(1.02)}.tool-card:hover:before{opacity:1}.tool-icon{background:hsl(var(--primary) / .1);width:48px;height:48px;color:hsl(var(--primary));border-radius:12px;justify-content:center;align-items:center;margin-bottom:1.5rem;transition:transform .3s;display:flex}.tool-card:hover .tool-icon{background:hsl(var(--primary));color:hsl(var(--text-primary));box-shadow:0 4px 15px hsl(var(--primary) / .4);transform:scale(1.1)rotate(5deg)}.tool-title{margin-bottom:.5rem;font-size:1.25rem}.tool-desc{color:hsl(var(--text-muted));font-size:.9rem;line-height:1.5}.workspace-container{max-width:1100px;margin:3rem auto 6rem;padding:0 1.5rem}.dropzone{border:2px dashed hsl(var(--border-glass));background:hsl(var(--bg-card) / .2);cursor:pointer;text-align:center;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;padding:5rem 2rem;transition:all .3s;display:flex}.dropzone:hover,.dropzone.drag-active{border-color:hsl(var(--secondary));background:hsl(var(--secondary) / .03);box-shadow:0 0 30px hsl(var(--secondary) / .1)}.dropzone-icon{color:hsl(var(--text-muted));margin-bottom:1.5rem;font-size:3rem;transition:transform .3s}.dropzone:hover .dropzone-icon{color:hsl(var(--secondary));transform:translateY(-6px)}.canvas-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.canvas-card{background:hsl(var(--bg-card));border:1px solid hsl(var(--border-glass));cursor:grab;border-radius:16px;flex-direction:column;align-items:center;padding:1rem;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.canvas-card:active{cursor:grabbing}.canvas-card:hover{box-shadow:0 4px 15px hsl(var(--primary) / .15);transform:translateY(-2px)}.canvas-preview{background:hsl(var(--bg-dark));border-radius:8px;justify-content:center;align-items:center;width:100%;height:180px;margin-bottom:.75rem;display:flex;overflow:hidden}.canvas-actions{justify-content:space-between;gap:.5rem;width:100%;display:flex}.action-btn{background:hsl(var(--bg-card-hover));border:1px solid hsl(var(--border-glass));color:hsl(var(--text-muted));cursor:pointer;border-radius:8px;padding:.4rem;transition:all .2s}.action-btn:hover{color:hsl(var(--text-primary));background:hsl(var(--primary));border-color:hsl(var(--primary))}.control-bar{background:hsla(var(--bg-card) / .8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsl(var(--border-glass));z-index:10;border-radius:9999px;align-items:center;gap:2rem;padding:.75rem 2rem;display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #00000080}.action-main-btn{background:linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));color:#fff;cursor:pointer;box-shadow:0 4px 15px hsl(var(--primary) / .35);border:none;border-radius:9999px;padding:.75rem 2rem;font-size:1rem;font-weight:700;transition:all .3s}.action-main-btn:hover{box-shadow:0 6px 25px hsl(var(--primary) / .5);transform:translateY(-2px)}.progress-bar-container{background:hsl(var(--bg-dark));border-radius:9999px;width:200px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));width:0%;height:100%;transition:width .3s}.success-box{text-align:center;background:#04160a33;border:1px solid #17823e66;border-radius:20px;margin-top:2rem;padding:3rem 2rem}