:root{--bg-primary:#fff;--bg-secondary:#f3f4f6;--bg-card:#fff;--text-primary:#111827;--text-secondary:#4b5563;--border-color:#e5e7eb;--accent-color:#2563eb;--accent-hover:#1d4ed8;--error-color:#ef4444;--success-color:#22c55e;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--text-primary:#f9fafb;--text-secondary:#9ca3af;--border-color:#334155;--accent-color:#3b82f6;--accent-hover:#60a5fa}*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100vw;font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s,color .3s;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}.container{max-width:1200px;padding:0 var(--spacing-md);margin:0 auto}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tool-content{width:100%}.input-group{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.input-group label{color:var(--text-secondary);font-size:.9rem;font-weight:600}.code-input,.code-output{width:100%;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-mono);resize:vertical;min-height:120px;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.code-input:focus,.code-output:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 3px #2563eb1a}.code-output{background-color:var(--bg-secondary);cursor:text}.split-view{gap:var(--spacing-lg);grid-template-columns:1fr;display:grid}@media (min-width:768px){.split-view{grid-template-columns:1fr 1fr;align-items:start}}.output-wrapper{position:relative}.copy-btn{top:var(--spacing-sm);right:var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);opacity:.8;padding:4px 8px;font-size:.8rem;transition:all .2s;position:absolute}.copy-btn:hover{opacity:1;border-color:var(--accent-color);color:var(--accent-color)}.btn-primary,.btn-secondary{padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);border:1px solid #0000;justify-content:center;align-items:center;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--accent-color);color:#fff}.btn-primary:hover{background-color:var(--accent-hover)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover{background-color:var(--border-color)}.controls{padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);gap:var(--spacing-lg);flex-wrap:wrap;align-items:center;display:flex}.error-msg{color:var(--error-color);margin-top:var(--spacing-xs);font-size:.9rem}