*{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;--green-600:#16a34a;--green-700:#15803d;--red-800:#991b1b}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)}.converter-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem;margin-bottom:2rem}@media (max-width:768px){.converter-container{grid-template-columns:1fr}}.panel{background:var(--zinc-900);border:1px solid var(--zinc-800);border-radius:.75rem;padding:1.5rem}.panel h2{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--zinc-400)}.drop-zone{border:2px dashed var(--zinc-700);border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:1rem}.drop-zone.active,.drop-zone:hover{border-color:var(--blue-600);background:rgba(37,99,235,.1)}.drop-zone p{color:var(--zinc-400);margin-bottom:.5rem}.drop-zone small{color:var(--zinc-500);font-size:.75rem}.textarea-code{width:100%;height:12rem;background:var(--zinc-950);border:1px solid var(--zinc-800);border-radius:.5rem;padding:1rem;font-family:Courier New,monospace;font-size:.75rem;color:var(--fg);resize:none}.textarea-code:focus{outline:none;border-color:var(--zinc-700)}.preview-area{background:var(--zinc-950);border:1px solid var(--zinc-800);border-radius:.5rem;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.preview-area.checkerboard{background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 0),linear-gradient(-45deg,#1a1a1a 25%,transparent 0),linear-gradient(45deg,transparent 75%,#1a1a1a 0),linear-gradient(-45deg,transparent 75%,#1a1a1a 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.preview-area img{max-width:100%;max-height:300px;object-fit:contain}.preview-placeholder{color:var(--zinc-500);font-size:.875rem}.options-row{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.option-group{display:flex;flex-direction:column;gap:.25rem}.option-group label{font-size:.75rem;color:var(--zinc-400)}.option-group input[type=number]{width:100px;padding:.5rem;background:var(--zinc-950);border:1px solid var(--zinc-800);border-radius:.375rem;color:var(--fg);font-size:.875rem}.option-group input:focus{outline:none;border-color:var(--zinc-700)}.option-group select{padding:.5rem;background:var(--zinc-950);border:1px solid var(--zinc-800);border-radius:.375rem;color:var(--fg);font-size:.875rem;cursor:pointer}.checkbox-group{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem}.checkbox-group input{width:1rem;height:1rem;cursor:pointer}.checkbox-group label{font-size:.875rem;color:var(--zinc-400);cursor:pointer}.action-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.btn-primary{background:var(--blue-600);color:#fff;font-weight:500;padding:.625rem 1.25rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color .2s;font-size:.875rem}.btn-primary:hover{background:var(--blue-700)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-success{background:var(--green-600);color:#fff;font-weight:500;padding:.625rem 1.25rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color .2s;font-size:.875rem}.btn-success:hover{background:var(--green-700)}.btn-success:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--zinc-800);color:#fff;font-weight:500;padding:.625rem 1.25rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color .2s;font-size:.875rem}.btn-secondary:hover{background: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;font-size:.875rem}.format-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.format-tab{padding:.5rem 1rem;border-radius:.375rem;font-weight:500;font-size:.875rem;cursor:pointer;border:none;transition:all .2s;background:var(--zinc-800);color:var(--zinc-400)}.format-tab:hover{background:var(--zinc-700)}.format-tab.active{background:var(--blue-600);color:#fff}.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}.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}