*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--fg:#ededed;--zinc-400:#a1a1aa;--zinc-500:#71717a;--zinc-700:#3f3f46;--zinc-800:#27272a;--zinc-900:#18181b;--zinc-950:#09090b;--blue-600:#2563eb;--blue-700:#1d4ed8;--red-800:#991b1b;--red-900:#7f1d1d}body{color:var(--fg);background:var(--bg);font-family:system-ui,-apple-system,sans-serif;line-height:1.5}main{min-height:100vh;padding:2rem;max-width:72rem;margin:0 auto}header{text-align:center;margin-bottom:2rem}header h1{font-size:2.25rem;font-weight:700;margin-bottom:.5rem}header p{color:var(--zinc-400)}.tool-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;justify-content:center}.tool-btn{padding:.5rem 1rem;border-radius:.5rem;font-weight:500;cursor:pointer;border:none;transition:background-color .2s;background:var(--zinc-800);color:var(--zinc-400)}.tool-btn:hover{background:var(--zinc-700)}.tool-btn.active{background:var(--blue-600);color:#fff}.editor-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;margin-bottom:1rem}@media (max-width:768px){.editor-grid{grid-template-columns:1fr}}.editor-col label{display:block;font-size:.875rem;font-weight:500;color:var(--zinc-400);margin-bottom:.5rem}.textarea-code{width:100%;height:16rem;background:var(--zinc-950);border:1px solid var(--zinc-800);border-radius:.5rem;padding:1rem;font-family:Courier New,monospace;font-size:.875rem;color:var(--fg);resize:none}.textarea-code:focus{outline:none;border-color:var(--zinc-700)}.error-box{background:rgba(127,29,29,.3);border:1px solid var(--red-800);color:#fca5a5;padding:.75rem 1rem;border-radius:.5rem;margin-bottom:1rem}.action-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.btn-primary{background:var(--blue-600);color:#fff;font-weight:500;padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color .2s}.btn-primary:hover{background:var(--blue-700)}.btn-secondary{background:var(--zinc-800);color:#fff;font-weight:500;padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color .2s}.btn-secondary:hover{background:var(--zinc-700)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.seo-section{margin-top:4rem}.seo-section h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1.5rem;gap:1.5rem}.tool-card{background:var(--zinc-900);border:1px solid var(--zinc-800);border-radius:.75rem;padding:1.5rem;transition:border-color .2s}.tool-card:hover{border-color:var(--zinc-700)}.tool-card h3{color:#fff;font-weight:500;margin-bottom:.5rem}.tool-card p{font-size:.875rem;color:var(--zinc-400)}footer{margin-top:4rem;text-align:center;color:var(--zinc-500);font-size:.875rem}footer a{color:var(--zinc-400);text-decoration:none}footer a:hover{color:#fff}