:root{--color-bg: #030712;--color-surface: #0f172a;--color-surface-hover: #1e293b;--color-primary: #0ea5e9;--color-primary-glow: rgba(14, 165, 233, .5);--color-secondary: #6366f1;--color-text: #f8fafc;--color-text-dim: #94a3b8;--color-border: #1e293b;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--nav-height: 64px}html{scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);line-height:1.6;overflow-x:hidden}a{text-decoration:none;color:inherit;transition:color .2s}ul,ol{list-style:none}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.flex{display:flex}.flex-col{flex-direction:column}.flex-grow{flex-grow:1}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media(min-width:768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.md\:flex-row{flex-direction:row}}@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,1fr)}}.text-center{text-align:center}.min-h-screen{min-height:100vh}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.left-0{left:0}.z-50{z-index:50}.z-10{z-index:10}.overflow-hidden{overflow:hidden}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:9999px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;gap:.5rem;font-size:1rem}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 4px 14px #0ea5e963}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #0ea5e93b}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.glass-panel{background:#0f172a99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}.text-gradient{background-clip:text;-webkit-background-clip:text;color:transparent;background-image:linear-gradient(to right,var(--color-primary),var(--color-secondary))}.header{height:var(--nav-height);border-bottom:1px solid rgba(255,255,255,.1)}.nav-link{color:var(--color-text-dim);font-size:.9rem;font-weight:500}.nav-link:hover{color:#fff}.hero-section{padding-top:calc(var(--nav-height) + 4rem);padding-bottom:5rem}.hero-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:9999px;color:#93c5fd;font-size:.875rem;margin-bottom:2rem;gap:.5rem}.hero-title{font-size:3rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem}@media(min-width:768px){.hero-title{font-size:4.5rem}}.hero-desc{font-size:1.25rem;color:var(--color-text-dim);max-width:42rem;margin:0 auto 2.5rem}.section-title{font-size:2.25rem;font-weight:700;margin-bottom:1rem}.section-desc{color:var(--color-text-dim);max-width:42rem;margin:0 auto}.feature-card{padding:1.5rem;border-radius:1rem;transition:all .3s}.feature-card:hover{border-color:#0ea5e980;background:#0f172acc}.feature-icon-wrapper{width:3rem;height:3rem;border-radius:.5rem;background:#0ea5e91a;color:#38bdf8;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform .3s}.feature-card:hover .feature-icon-wrapper{transform:scale(1.1)}.list-disc{list-style-type:disc;padding-left:1.25rem}.list-decimal{list-style-type:decimal;padding-left:1.25rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}kbd{background:#ffffff1a;padding:.1rem .4rem;border-radius:.25rem;font-family:monospace;font-size:.9em}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fadeInUp .5s ease-out}.bg-blur-circle{width:500px;height:500px;background:var(--color-primary);filter:blur(120px);border-radius:50%;opacity:.2;position:absolute;top:0;left:50%;transform:translate(-50%);z-index:-1}.p-8{padding:2.5rem}.p-4{padding:1rem}.py-20{padding-top:5rem;padding-bottom:5rem}.mb-16{margin-bottom:4rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.mb-3{margin-bottom:.75rem}.mb-1{margin-bottom:.25rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}.leading-relaxed{line-height:1.625}.block{display:block}.inline-block{display:inline-block}.text-gray-200{color:#e2e8f0}.text-gray-300{color:#cbd5e1}.text-gray-400{color:#9ca3af}.text-blue-400{color:#60a5fa}.text-red-400{color:#f87171}.text-yellow-400{color:#facc15}.bg-white\/5{background-color:#ffffff0d}.bg-black\/50{background-color:#00000080}.border{border-width:1px;border-style:solid}.border-white\/5{border-color:#ffffff0d}.border-white\/10,.hover\:border-white\/10:hover{border-color:#ffffff1a}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.mx-auto{margin-left:auto;margin-right:auto}.max-w-5xl{max-width:64rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.w-full{width:100%}.shrink-0{flex-shrink:0}.items-start{align-items:flex-start}.col-span-2{grid-column:span 2 / span 2}@media(min-width:768px){.md\:col-span-2{grid-column:span 2 / span 2}}.text-xs{font-size:.75rem}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.j2d-container{padding-top:calc(var(--nav-height) + 2rem);padding-bottom:2rem;max-width:1600px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-left:1.5rem;padding-right:1.5rem}.j2d-header{margin-bottom:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}@media(min-width:1024px){.j2d-header{flex-direction:row;align-items:center;justify-content:space-between}}.j2d-title h1{font-size:1.5rem;font-weight:800;background:linear-gradient(to right,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;color:transparent;margin-bottom:.25rem}.j2d-title p{color:var(--color-text-dim);font-size:.875rem}.j2d-controls{display:flex;flex-direction:column;gap:1rem;width:100%}@media(min-width:768px){.j2d-controls{flex-direction:row;align-items:flex-end;width:auto}}.j2d-control-group{display:flex;flex-direction:column;gap:.5rem;flex:1}@media(min-width:768px){.j2d-control-group{width:250px}}.j2d-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dim);margin-left:.25rem}.j2d-input,.j2d-select{height:44px;background:#0000004d;border:1px solid var(--color-border);border-radius:.5rem;padding:0 1rem;color:var(--color-text);font-family:inherit;font-size:.875rem;width:100%;outline:none;transition:all .2s}.j2d-input:focus,.j2d-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.j2d-btn-convert{height:44px;background:var(--color-primary);color:#fff;border:none;border-radius:.5rem;padding:0 1.5rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;white-space:nowrap}.j2d-btn-convert:hover{background:var(--color-secondary);transform:translateY(-1px)}.j2d-editor-area{display:grid;grid-template-columns:1fr;gap:1.5rem;flex-grow:1;min-height:600px}@media(min-width:1024px){.j2d-editor-area{grid-template-columns:1fr 1fr}}.j2d-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;display:flex;flex-direction:column;overflow:hidden}.j2d-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--color-border);background:#ffffff05}.j2d-panel-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#93c5fd}.j2d-action-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim);padding:.25rem .75rem;border-radius:.375rem;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}.j2d-action-btn:hover{background:#ffffff0d;color:var(--color-text);border-color:#fff3}.j2d-textarea{flex-grow:1;background:transparent;border:none;padding:1.25rem;color:var(--color-text);font-family:Menlo,Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6;resize:none;outline:none;width:100%;height:100%}.j2d-textarea::placeholder{color:#fff3}.j2d-pre{margin:0;padding:1.25rem;font-family:Menlo,Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6;color:#a5b4fc;overflow:auto;height:100%}.j2d-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-text-dim);opacity:.5;gap:1rem}.j2d-error{position:absolute;bottom:1rem;left:1rem;background:#dc2626e6;color:#fff;padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem;display:flex;align-items:center;gap:.5rem;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.j2d-textarea::-webkit-scrollbar,.j2d-pre::-webkit-scrollbar{width:8px;height:8px}.j2d-textarea::-webkit-scrollbar-track,.j2d-pre::-webkit-scrollbar-track{background:transparent}.j2d-textarea::-webkit-scrollbar-thumb,.j2d-pre::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.j2d-textarea::-webkit-scrollbar-thumb:hover,.j2d-pre::-webkit-scrollbar-thumb:hover{background:var(--color-text-dim)}.jf-container{padding-top:calc(var(--nav-height) + 2rem);padding-bottom:2rem;max-width:1600px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-left:1.5rem;padding-right:1.5rem}.jf-header{margin-bottom:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}@media(min-width:1024px){.jf-header{flex-direction:row;align-items:center;justify-content:space-between}}.jf-title h1{font-size:1.5rem;font-weight:800;background:linear-gradient(to right,#34d399,#10b981);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25rem}.jf-title p{color:var(--color-text-dim);font-size:.875rem}.jf-controls{display:flex;flex-direction:column;gap:1rem;width:100%}@media(min-width:768px){.jf-controls{flex-direction:row;align-items:flex-end;width:auto}}.jf-control-group{display:flex;flex-direction:column;gap:.5rem;flex:1}@media(min-width:768px){.jf-control-group{width:200px}}.jf-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-dim);margin-left:.25rem}.jf-select{height:44px;background:#0000004d;border:1px solid var(--color-border);border-radius:.5rem;padding:0 1rem;color:var(--color-text);font-family:inherit;font-size:.875rem;width:100%;outline:none;transition:all .2s;cursor:pointer}.jf-select:focus{border-color:#34d399;box-shadow:0 0 0 2px #34d39933}.jf-btn-group{display:flex;gap:.75rem}.jf-btn-beautify{height:44px;background:#10b981;color:#fff;border:none;border-radius:.5rem;padding:0 1.5rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;flex:2}.jf-btn-beautify:hover{background:#059669;transform:translateY(-1px)}.jf-btn-minify{height:44px;background:transparent;color:var(--color-text);border:1px solid var(--color-border);border-radius:.5rem;padding:0 1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;flex:1}.jf-btn-minify:hover{background:#ffffff0d;border-color:var(--color-text-dim)}.jf-editor-area{display:flex;flex-direction:column;flex-grow:1;gap:1.5rem;min-height:600px}.jf-editor-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;flex-grow:1;min-height:750px}@media(min-width:1024px){.jf-editor-grid{grid-template-columns:1fr 1fr}}.jf-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;display:flex;flex-direction:column;overflow:hidden;height:100%}.jf-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--color-border);background:#ffffff05}.jf-panel-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#34d399}.jf-action-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text-dim);padding:.25rem .75rem;border-radius:.375rem;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}.jf-action-btn:hover{background:#ffffff0d;color:var(--color-text);border-color:#fff3}.jf-textarea,.jf-pre{flex-grow:1;background:transparent;border:none;padding:1.25rem;color:var(--color-text);font-family:Menlo,Monaco,Courier New,monospace;font-size:.875rem;line-height:1.6;resize:none;outline:none;width:100%;height:100%;overflow:auto}.jf-pre{color:#d1fae5}.jf-textarea::placeholder{color:#fff3}.jf-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--color-text-dim);opacity:.5;gap:1rem}.jf-error{position:absolute;bottom:1rem;left:1rem;background:#dc2626e6;color:#fff;padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem;display:flex;align-items:center;gap:.5rem;animation:slideUp .3s ease-out;z-index:10}.jf-textarea::-webkit-scrollbar,.jf-pre::-webkit-scrollbar{width:8px;height:8px}.jf-textarea::-webkit-scrollbar-thumb,.jf-pre::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}