:root{--bg:#f4f5f7;--bg-elev:#fff;--bg-code:#f7f8fa;--text:#1b1f24;--muted:#5c6570;--border:#d8dde3;--accent:#1f4ed8;--accent-hover:#163db0;--danger:#b42318;--danger-bg:#fdecea;--toast-bg:#122033;--toast-text:#f4f7fb;--shadow:0 1px 2px #1018280f;--radius:10px;--mono:ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;--sans:"Segoe UI", system-ui, -apple-system, sans-serif}html.dark{--bg:#101418;--bg-elev:#181e25;--bg-code:#12181f;--text:#e8edf3;--muted:#9aa4b2;--border:#2a3340;--accent:#6ea8ff;--accent-hover:#8cbcff;--danger:#ff8a80;--danger-bg:#3a1d1d;--toast-bg:#e8edf3;--toast-text:#101418;--shadow:0 1px 2px #00000059}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5}a{color:var(--accent)}a:hover{color:var(--accent-hover)}.skip-link{background:var(--accent);color:#fff;z-index:10;padding:8px 12px;position:absolute;top:-40px;left:12px}.skip-link:focus{top:12px}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{width:min(1180px,100% - 32px);margin:0 auto}.site-header,.site-footer{border-color:var(--border);border-style:solid}.site-header{background:var(--bg-elev);border-width:0 0 1px}.header-inner,.footer-inner{justify-content:space-between;align-items:center;gap:16px;min-height:56px;display:flex}.brand{color:var(--text);letter-spacing:.01em;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex}.brand-mark{border-radius:8px;flex:none;width:28px;height:28px}.theme-toggle,.btn,.link-btn{font:inherit;cursor:pointer}.theme-toggle{color:var(--text);border:1px solid var(--border);background:0 0;border-radius:999px;padding:6px 12px}.theme-label-dark,html.dark .theme-label-light{display:none}html.dark .theme-label-dark{display:inline}.hero{padding:36px 0 12px}.hero h1{margin:0 0 8px;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2}.hero p{color:var(--muted);max-width:46rem;margin:0}.tool{padding:16px 0 40px}.workspace{gap:16px;width:min(1180px,100% - 32px);margin:0 auto;display:grid}.converter-workspace{grid-template-columns:1fr}.panel,.controls,.faq-item,.legal,.error-fallback,.dropzone,.preview-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.panel-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;font-size:.85rem;font-weight:600;display:flex}.link-btn{color:var(--accent);background:0 0;border:0;padding:0}.panel-actions{flex-wrap:wrap;gap:12px;display:flex}.controls{flex-direction:column;gap:10px;padding:16px;display:flex}.root-label{justify-content:space-between;align-items:baseline;gap:6px;font-size:.85rem;font-weight:600;display:flex}.quality-value{font-family:var(--mono);color:var(--accent)}.quality-slider{width:100%;accent-color:var(--accent)}.root-input,.btn{border:1px solid var(--border);background:var(--bg-code);color:var(--text);border-radius:8px;padding:9px 12px}.btn{background:var(--bg-elev);font-weight:600}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-ghost:hover{border-color:var(--danger);color:var(--danger)}.dropzone,.btn,.theme-toggle,.link-btn,.quality-slider{font:inherit}.dropzone:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible,.link-btn:focus-visible,.quality-slider:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dropzone{text-align:center;cursor:pointer;border-style:dashed;border-width:2px;padding:48px 20px}.dropzone-title{margin:0 0 8px;font-weight:700}.dropzone-hint{color:var(--muted);margin:0;font-size:.92rem}.dropzone-active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}.dropzone-disabled{opacity:.6;cursor:not-allowed}.preview-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.preview-card{flex-direction:column;gap:10px;min-width:0;padding:12px;display:flex}.preview-pair{grid-template-columns:1fr 1fr;gap:8px;display:grid}.thumb-wrap{min-width:0;margin:0}.thumb-wrap img,.thumb-placeholder{aspect-ratio:1;object-fit:cover;background:var(--bg-code);border-radius:8px;width:100%;display:block}.thumb-placeholder{color:var(--muted);text-align:center;place-items:center;padding:8px;font-size:.8rem;display:grid}.thumb-wrap figcaption{color:var(--muted);margin-top:6px;font-size:.78rem;font-weight:600}.preview-name{text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:650;overflow:hidden}.file-meta,.helper-msg{color:var(--muted);margin:0;font-size:.82rem}.error-msg{color:var(--danger);background:var(--danger-bg);border-radius:8px;margin:0;padding:8px 10px;font-size:.82rem}.toast{background:var(--toast-bg);color:var(--toast-text);z-index:9999;pointer-events:none;border-radius:8px;padding:12px 16px;font-weight:650;animation:.16s ease-out toast-in;position:fixed;bottom:16px;right:16px;box-shadow:0 8px 24px #1018282e}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.faq{padding:8px 0 48px}.seo-copy{padding:8px 0 24px}.copy-shell{width:min(800px,100% - 32px)}.copy-block{margin-bottom:28px}.copy-block h2{margin:0 0 10px;font-size:1.25rem;line-height:1.35}.copy-block p{color:var(--muted);margin:0 0 10px}.faq h2,.legal h1,.legal h2,.error-fallback h2{margin:0 0 12px}.faq-list{gap:10px;display:grid}.faq-item{padding:4px 16px 8px}.faq-item summary{cursor:pointer;padding:12px 0;font-weight:650}.faq-item p{color:var(--muted);margin:0 0 12px}.legal{width:min(800px,100% - 32px);margin:32px auto 48px;padding:28px}.legal-meta,.legal p,.legal li{color:var(--muted)}.legal h1,.legal h2{color:var(--text)}.site-footer{background:var(--bg-elev);border-width:1px 0 0}.footer-inner{min-height:64px;color:var(--muted);padding:12px 0;font-size:.9rem}.footer-nav{gap:16px;display:flex}.error-fallback{width:min(1180px,100% - 32px);margin:16px auto 32px;padding:24px}@media (max-width:640px){.header-inner,.footer-inner{flex-direction:column;align-items:flex-start;padding:12px 0}.dropzone{padding:32px 16px}}