:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--accent:#111;--accent-hover:#333;--card-bg:#fafafa;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:16px/1.6 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#0a0a0a;--border:#1f1f1f;--accent:#fff;--accent-hover:#ccc;--card-bg:#111}}*{box-sizing:border-box;margin:0;padding:0}body{margin:0}#root{flex-direction:column;max-width:680px;min-height:100svh;margin:0 auto;padding:0 24px;display:flex}h1,h2{color:var(--text-h);letter-spacing:-.02em;font-weight:500}a{color:var(--text);text-decoration:none}a:hover{color:var(--text-h)}button{cursor:pointer;font-family:var(--sans)}.app{flex-direction:column;min-height:100svh;display:flex}.header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 0;display:flex}.logo{color:var(--text-h);letter-spacing:-.01em;font-size:14px;font-weight:600}.nav{gap:24px;font-size:14px;display:flex}.main{flex:1;padding:64px 0 48px}.main h1{margin-bottom:8px;font-size:40px}.subtitle{color:var(--text);margin-bottom:48px;font-size:15px}.converter{margin-bottom:64px}.dropzone{border:1.5px dashed var(--border);cursor:pointer;border-radius:8px;padding:48px 24px;transition:border-color .2s,background .2s}.dropzone:hover,.dropzone.dragover{border-color:var(--text);background:var(--card-bg)}.dropzone-content{flex-direction:column;align-items:center;gap:12px;display:flex}.upload-icon{color:var(--text)}.dropzone-text{color:var(--text-h);font-size:15px}.dropzone-hint{color:var(--text);font-size:13px}.conversion-area{flex-direction:column;gap:0;display:flex}.file-card{border-bottom:1px solid var(--border);padding:20px 0}.file-card.pending{opacity:.5}.file-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:8px;font-size:11px}.file-details{justify-content:space-between;align-items:center;display:flex}.file-name{color:var(--text-h);font-size:15px;font-weight:500}.file-meta{color:var(--text);align-items:center;gap:10px;font-size:13px;display:flex}.badge{letter-spacing:.04em;background:var(--card-bg);border:1px solid var(--border);color:var(--text-h);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.badge-png{background:var(--card-bg)}.arrow-container{justify-content:center;padding:16px 0;display:flex}.convert-btn{border:1px solid var(--border);background:var(--text-h);color:var(--bg);border-radius:6px;padding:8px 32px;font-size:14px;font-weight:500;transition:opacity .2s}.convert-btn:hover{opacity:.85}.spinner{border:2px solid var(--border);border-top-color:var(--text-h);border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.check-icon{display:block}.preview-section{border-bottom:1px solid var(--border);padding:20px 0}.preview-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:12px;font-size:11px}.preview-image{border:1px solid var(--border);border-radius:6px;max-width:100%;max-height:300px}.actions{gap:12px;padding:20px 0;display:flex}.download-btn{background:var(--text-h);color:var(--bg);border:none;border-radius:6px;padding:10px 28px;font-size:14px;font-weight:500;transition:opacity .2s}.download-btn:hover{opacity:.85}.reset-btn{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:6px;padding:10px 28px;font-size:14px;font-weight:500;transition:border-color .2s,color .2s}.reset-btn:hover{border-color:var(--text);color:var(--text-h)}.info-section{border-top:1px solid var(--border);padding:32px 0}.info-section h2{margin-bottom:8px;font-size:20px}.info-section p{font-size:15px;line-height:1.7}.footer{border-top:1px solid var(--border);color:var(--text);padding:24px 0;font-size:13px}@media (width<=640px){.main{padding:40px 0 32px}.main h1{font-size:28px}.subtitle{margin-bottom:32px}.dropzone{padding:32px 16px}.actions{flex-direction:column}.download-btn,.reset-btn{text-align:center;width:100%}}