:root{--font-title:"Outfit", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--color-bg:#0a0a0a;--color-foreground:#fafafa;--color-card:#0f0f0fcc;--color-card-hover:#191919e6;--color-border:#242424;--color-border-focus:#ef4343;--color-primary:#ef4343;--color-primary-glow:#f37272;--color-primary-hover:#de2121;--color-secondary:#242424;--color-secondary-hover:#333;--color-emerald:#10b981;--color-red:#ef4343;--color-text-main:#fafafa;--color-text-muted:#a1a1a1;--shadow-elegant:0 10px 30px -10px #ef444433;--shadow-glow:0 0 40px #ef44444d;--gradient-hero:linear-gradient(135deg, #050505, #ef43431a);--gradient-primary:linear-gradient(135deg, #ef4343, #de2121);--gradient-card:linear-gradient(180deg, #0a0a0a, #0f0f0f);--glass-blur:blur(16px);--radius-lg:16px;--radius-md:10px}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-bg);width:100%;min-height:100vh;color:var(--color-text-main);font-family:var(--font-body);overflow-x:hidden}.glow{filter:blur(180px);opacity:.12;z-index:-1;pointer-events:none;border-radius:50%;width:450px;height:450px;position:absolute}.glow-1{background:var(--color-primary);top:10%;left:5%}.glow-2{background:#bc1010;bottom:10%;right:5%}.layout{flex-direction:column;max-width:1440px;min-height:100vh;margin:0 auto;padding:24px;display:flex}.header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;display:flex}.logo-area{align-items:center;gap:12px;display:flex}.logo-box{rounded-lg:8px;border-radius:var(--radius-md);background-color:var(--color-primary);width:36px;height:36px;box-shadow:var(--shadow-elegant);justify-content:center;align-items:center;display:flex}.logo-box svg{color:#fff;width:20px;height:20px}.logo-text h1{font-family:var(--font-title);letter-spacing:-.5px;background:linear-gradient(135deg, #fff 0%, var(--color-text-muted) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.8rem;font-weight:800}.logo-text h1 span{color:var(--color-primary);-webkit-text-fill-color:var(--color-primary);font-weight:400}.logo-text p{color:var(--color-text-muted);letter-spacing:.5px;font-size:.75rem}.header-badges{align-items:center;gap:8px;display:flex}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:9999px;padding:4px 10px;font-size:.7rem;font-weight:600;display:inline-block}.badge-primary{color:#fca5a5;background-color:#ef444426;border:1px solid #ef44444d}.badge-secondary{color:var(--color-text-muted);border:1px solid var(--color-border);background-color:#ffffff0d}.badge-status{color:#34d399;background-color:#10b98126;border:1px solid #10b9814d;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600}.github-link{color:var(--color-text-main);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#ffffff08;align-items:center;gap:8px;padding:6px 12px;font-size:.8rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.github-link:hover{border-color:var(--color-text-muted);background-color:#ffffff14}.main-content{flex:1;grid-template-columns:420px 1fr;gap:24px;display:grid}@media (width<=1024px){.main-content{grid-template-columns:1fr}}.card{background:var(--gradient-card);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden;box-shadow:0 10px 30px -15px #00000080}.card:hover{box-shadow:var(--shadow-elegant);border-color:#ef444433}.card-header{border-bottom:1px solid var(--color-border);padding:20px}.card-header h2{font-family:var(--font-title);letter-spacing:-.2px;margin-bottom:6px;font-size:1.15rem;font-weight:700}.card-header p{color:var(--color-text-muted);font-size:.8rem;line-height:1.4}.input-panel{flex-direction:column;gap:24px;display:flex}.card-input{padding-bottom:20px}.dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;background-color:#ffffff03;margin:20px;padding:30px 20px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.dropzone:hover,.dropzone.dragover{border-color:var(--color-primary);background-color:#ef444408;box-shadow:0 0 20px #ef44441a}.file-input{opacity:0;cursor:pointer;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.dropzone-content{pointer-events:none;flex-direction:column;align-items:center;display:flex}.dropzone-icon{margin-bottom:12px;font-size:2.2rem;transition:transform .2s}.dropzone:hover .dropzone-icon{transform:translateY(-4px)}.dropzone-text{margin-bottom:4px;font-size:.9rem;font-weight:500}.dropzone-or{color:var(--color-text-muted);margin:6px 0;font-size:.75rem}.btn{font-family:var(--font-body);border-radius:var(--radius-md);cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-elegant)}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-secondary{color:var(--color-text-main);border:1px solid var(--color-border);background-color:#ffffff08}.btn-secondary:hover{background-color:#ffffff14}.btn-block{width:100%}.btn-danger{color:#f87171;background-color:#ef44441a;border:1px solid #ef44444d}.btn-danger:hover{background-color:var(--color-red);color:#fff}.btn-demo{color:#fca5a5;background:linear-gradient(135deg,#ef44441a 0%,#ffffff05 100%);border:1px solid #ef444440;width:100%;font-size:.8rem}.btn-demo:hover{background:linear-gradient(135deg,#ef44442e 0%,#ffffff0d 100%);border-color:#ef444466;transform:translateY(-1px)}.paste-section{border-top:1px solid var(--color-border);margin:0 20px;padding-top:16px}.toggle-btn{width:100%;color:var(--color-text-main);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 0;font-size:.8rem;font-weight:500;display:flex}.toggle-btn .arrow{color:var(--color-text-muted);font-size:.7rem;transition:transform .2s}.toggle-btn.active .arrow{transform:rotate(180deg)}.paste-container{flex-direction:column;gap:12px;margin-top:12px;transition:max-height .3s;display:flex}.hidden{display:none!important}textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;height:120px;color:var(--color-text-main);resize:vertical;background-color:#0000004d;outline:none;padding:10px;font-family:monospace;font-size:.75rem}textarea:focus{border-color:var(--color-primary)}.demo-section{border-top:1px solid var(--color-border);margin:20px 20px 0;padding-top:20px}.demo-section h3{margin-bottom:4px;font-size:.85rem;font-weight:600}.demo-section p{color:var(--color-text-muted);margin-bottom:12px;font-size:.75rem}.preview-panel,.card-preview{height:100%}.preview-header{justify-content:space-between;align-items:center;display:flex}.header-titles{align-items:center;gap:10px;display:flex}.preview-actions{gap:8px;display:flex}.preview-body{background-color:#0000004d;flex:1;justify-content:center;align-items:center;min-height:500px;display:flex;position:relative}.empty-state{text-align:center;flex-direction:column;align-items:center;max-width:320px;padding:40px;display:flex}.empty-illustration{color:var(--color-primary);text-shadow:0 0 20px #ef44444d;margin-bottom:20px;font-size:4rem;animation:4s ease-in-out infinite float}.empty-state h3{font-family:var(--font-title);margin-bottom:8px;font-size:1.2rem;font-weight:700}.empty-state p{color:var(--color-text-muted);font-size:.8rem;line-height:1.5}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.iframe-container{justify-content:center;width:100%;height:100%;padding:20px;display:flex;overflow-y:auto}iframe{transform-origin:top;background-color:#fff;border:1px solid #1f2937;border-radius:4px;width:100%;max-width:210mm;height:297mm;box-shadow:0 20px 25px -5px #000000b3}.footer{text-align:center;border-top:1px solid var(--color-border);color:var(--color-text-muted);margin-top:30px;padding-top:20px;font-size:.75rem}.cta-platform-card{border-radius:var(--radius-md);background:linear-gradient(135deg,#ef44440d 0%,#000c 100%);border:1px dashed #ef444466;flex-direction:column;gap:10px;margin:20px;padding:18px;transition:all .3s;display:flex}.cta-platform-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 10px 20px -10px #ef444426}.cta-platform-card h3{font-family:var(--font-title);color:var(--color-text-main);font-size:.95rem;font-weight:700}.cta-platform-card p{color:var(--color-text-muted);font-size:.75rem;line-height:1.5}.btn-cta{background:var(--gradient-primary);color:#fff;text-align:center;border-radius:var(--radius-md);border:none;padding:10px 14px;font-size:.8rem;font-weight:600;text-decoration:none;transition:all .2s;display:block;box-shadow:0 4px 12px #ef444440}.btn-cta:hover{transform:scale(1.02);box-shadow:0 6px 16px #ef444466}