:root{--ink:#252432;--muted:#696773;--purple:#6852b8;--line:#e6e1eb;--paper:#f7f5f1;--serif:Georgia,"Times New Roman",serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65}button,input,textarea{font:inherit}a,button,input,summary,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit}a,button,input,summary,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #9579dc;outline-offset:4px}button{border:0}h1,h2,h3,p{margin:0}h2{line-height:1.2}.site-header{max-width:1260px;margin:auto;padding:27px 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:21px;letter-spacing:-.7px}.brand-light{font-weight:400}.brand-mark{font-size:34px;color:var(--purple);line-height:1}nav{display:flex;align-items:center;gap:27px}nav a{text-decoration:none;font-size:13px}nav a:hover{text-decoration:underline}.header-note{font-size:11px;color:var(--muted);padding-left:25px;border-left:1px solid #ccc}main{max-width:1176px;margin:auto;padding:0 24px}.hero{text-align:center;padding:61px 0 42px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:700;display:flex;align-items:center;gap:8px;line-height:1.5}.hero .eyebrow{justify-content:center}.eyebrow span{width:6px;height:6px;background:var(--purple);border-radius:100%}h1{font-family:var(--serif);font-size:clamp(40px,5.1vw,67px);line-height:1.08;letter-spacing:-2.5px;margin:21px 0}h1,h1 em{font-weight:400}h1 em{color:var(--purple)}.hero>p{color:var(--muted);font-size:15px;line-height:1.8}.hero-details{display:flex;justify-content:center;gap:24px;font-size:10px;margin-top:25px;color:#56515f}.converter{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dcd6e5;border-radius:16px;overflow:hidden;box-shadow:0 10px 35px #33234d06;background:white}.controls{padding:30px 32px;min-width:0}.step-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}.step-heading h2{font-size:15px;font-weight:600}.step{font-size:10px;color:var(--purple);background:#f0ebf9;padding:3px 8px;border-radius:5px}.local-badge{margin-left:auto;font-size:8px;letter-spacing:1px;color:var(--muted)}.dropzone{border:1px dashed #c9bfd9;border-radius:8px;background:#fbfaff;padding:15px;text-align:center}.upload-icon{display:block;font-size:24px;line-height:1.1;color:var(--purple)}.file-label{display:block;font-size:13px;font-weight:700;margin:5px 0}.dropzone p{font-size:10px;color:var(--muted);margin-top:5px}input[type=file]{max-width:100%;font-size:11px;width:230px}input[type=file]::-webkit-file-upload-button{border:1px solid #c9bfd9;border-radius:4px;padding:5px 9px;background:white;color:var(--ink);cursor:pointer}input[type=file]::file-selector-button{border:1px solid #c9bfd9;border-radius:4px;padding:5px 9px;background:white;color:var(--ink);cursor:pointer}.source-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:17px 0 8px;font-size:11px}.text-button{color:var(--purple);font-size:10px;background:none;padding:0;text-decoration:underline;text-underline-offset:3px}textarea{display:block;width:100%;height:109px;resize:vertical;border:1px solid var(--line);border-radius:6px;padding:12px;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;background:#fdfcfe;color:#514564}.check-source{margin-top:8px}.second{margin-top:25px;margin-bottom:14px}.dimension-grid{display:grid;grid-template-columns:1fr 24px 1fr;grid-gap:8px;gap:8px;align-items:end}.dimension-grid label{font-size:11px}.dimension-grid label>span{float:right;color:var(--muted);font-size:10px}.dimension-grid input{display:block;width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin-top:4px;font-size:14px}.times{text-align:center;padding-bottom:8px;color:#a69dac}.check{display:flex;align-items:center;gap:7px;font-size:11px;margin-top:10px}.check input{margin:0;accent-color:var(--purple);width:14px;height:14px}.presets{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:10px;color:var(--muted)}.presets button{border:1px solid var(--line);border-radius:5px;background:#faf9fc;color:var(--ink);font-size:11px;padding:4px 12px}.presets span{margin-left:3px}.background{margin:19px 0 0;padding:0;border:0;display:flex;gap:18px;align-items:center;flex-wrap:wrap}.background legend{font-size:11px;margin-bottom:8px;padding:0}.background label{display:flex;align-items:center;gap:5px;font-size:11px}.background input[type=radio]{accent-color:var(--purple);margin:0}.background input[type=color]{border:1px solid var(--line);padding:2px;border-radius:5px;width:32px;height:25px;background:white}.limit-note{color:var(--muted);font-size:9px;margin:15px 0}.primary{background:var(--purple);color:white;border-radius:7px;padding:12px 17px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;width:100%;min-height:45px}.primary:hover:not(:disabled){background:#56429d}.primary span{font-size:17px;line-height:1}.error{background:#fff0ef;color:#922d27;border:1px solid #efd0cc;border-radius:6px;padding:10px;font-size:12px;margin:12px 0;overflow-wrap:anywhere}.status{font-size:11px;color:#426247;margin-top:9px;min-height:18px}.font-warning{background:#fff6e5;color:#765115;padding:10px;font-size:11px;border-radius:6px;margin-top:10px}.clear{margin-top:8px;color:var(--muted)}.preview-panel{background:#f1eef6;border-left:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column;min-width:0}.preview-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.4px;color:#746b83;margin-bottom:20px}.format-tag{font-size:9px;letter-spacing:.7px;padding:3px 8px;border-radius:4px;background:white;color:var(--purple);border:1px solid #ded6eb}.preview-checker{background:repeating-conic-gradient(#e6e0ed 0 25%,#f6f2f9 0 50%) 50%/20px 20px;flex:1 1;min-height:385px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e0d9e8;border-radius:8px;padding:25px}.empty-preview{text-align:center;color:#8b7ca4}.empty-preview svg{width:150px;max-width:100%;opacity:.65}.empty-preview strong{display:block;font:italic 27px/1.3 var(--serif);margin-top:16px}.empty-preview p{font-size:10px;margin-top:13px}.result-image{display:block;max-width:100%;max-height:450px;object-fit:contain;width:auto;height:auto;box-shadow:0 10px 25px #33234d12}.output-info{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0 10px}.output-info>p{font-size:12px;color:var(--muted);line-height:1.8}.output-info strong{display:block;font-size:13px}.output-info span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.download{padding:10px 14px;background:#292431;color:white;border-radius:6px;font-size:11px;text-decoration:none;display:flex;gap:12px;align-items:center;white-space:nowrap}.download span{color:white;margin:0;font-size:15px}.preview-note{font-size:9px;color:#746b83;line-height:1.7}.how{display:grid;grid-template-columns:1fr 1fr;grid-gap:90px;gap:90px;padding:73px 13px 59px}.how h2{font:400 39px/1.15 var(--serif);letter-spacing:-.9px;margin:15px 0}.how>div>p{font-size:13px;color:var(--muted);max-width:340px}.inline-link{display:inline-block;color:var(--purple);font-size:11px;margin-top:19px;text-underline-offset:4px}.how ol{list-style:none;margin:0;padding:0}.how li{display:flex;gap:20px;padding:21px 0;border-bottom:1px solid var(--line)}.how li:first-child{padding-top:4px}.how li>span{font-family:var(--serif);font-style:italic;color:#9e8eaf;font-size:23px}.how h3{font-size:13px;font-weight:600;margin-bottom:5px}.how li p{font-size:12px;color:var(--muted)}.notes{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:35px;gap:35px;padding:33px 13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.note-icon{font-family:var(--serif);color:var(--purple);font-size:25px}.notes h2{font-size:13px;margin:9px 0}.notes p{font-size:11px;color:var(--muted);line-height:1.8}.faq{max-width:760px;margin:62px auto 70px}.faq>.eyebrow{justify-content:center}.faq>h2{text-align:center;font:400 37px var(--serif);margin:13px 0 28px;letter-spacing:-1px}details{border-bottom:1px solid var(--line);padding:18px 0}summary{font-size:13px;cursor:pointer;line-height:1.6}details p{font-size:12px;color:var(--muted);padding-top:12px;max-width:680px}footer{border-top:1px solid var(--line);max-width:1260px;margin:auto;padding:32px 42px;display:flex;justify-content:space-between;gap:28px;align-items:flex-start}footer .brand{font-size:16px}footer p{font-size:11px;color:var(--muted);margin:4px 0}footer small{font-size:9px;color:var(--muted)}footer nav{gap:18px;flex-wrap:wrap;justify-content:flex-end}footer nav a{font-size:10px}.skip{position:absolute;left:15px;top:-60px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}.prose{max-width:760px;margin:58px auto 80px}.prose h1{font-size:49px;margin-bottom:25px}.prose h2{font:400 28px var(--serif);margin:32px 0 14px}.prose h3{font-size:17px;margin:24px 0 9px}.prose li,.prose p{font-size:14px;color:#5f5a68;margin:13px 0}.prose a{color:var(--purple);overflow-wrap:anywhere}.prose pre{background:#eeebf2;border:1px solid var(--line);padding:20px;border-radius:8px;overflow:auto;font-size:12px;line-height:1.6}.prose table{width:100%;border-collapse:collapse;font-size:12px;margin:20px 0}.prose td,.prose th{padding:12px;text-align:left;vertical-align:top;border:1px solid var(--line)}.prose code{overflow-wrap:anywhere}.development-note{padding:12px 15px;border:1px solid #d8cbe9;background:#f2edf8;border-radius:6px;font-size:12px}.guide-meta{font-size:11px!important;color:var(--muted)!important}@media(max-width:800px){.site-header{padding:20px 24px}.header-note{display:none}main{padding:0 20px}.hero{padding-top:44px}h1{font-size:51px}.controls,.preview-panel{padding:25px}.how{gap:40px;padding-left:0;padding-right:0}.notes{gap:24px}footer{padding:27px 24px;flex-direction:column}footer nav{justify-content:flex-start}}@media(max-width:600px){.site-header{padding:18px 20px;gap:10px}.brand{font-size:18px}.brand-mark{font-size:29px}nav{gap:17px}nav a{font-size:11px}main{padding:0 16px}.hero{padding:36px 0 29px}h1{font-size:42px;letter-spacing:-1.8px;margin:19px 0}.hero>p{font-size:12px}.hero-details{gap:9px;font-size:8px;flex-wrap:wrap;margin-top:19px}.desktop-break{display:none}.converter{grid-template-columns:1fr;border-radius:12px}.controls{padding:22px}.preview-panel{border-left:0;border-top:1px solid var(--line);padding:22px}.preview-checker{min-height:300px}.result-image{max-height:330px}.source-label,.text-button{font-size:10px}.local-badge{font-size:7px}.how{grid-template-columns:1fr;gap:30px;padding:45px 5px}.how h2{font-size:34px}.how>div>p{max-width:none}.how li{padding:19px 0}.notes{grid-template-columns:1fr;padding:26px 5px;gap:26px}.notes article{display:grid;grid-template-columns:35px 1fr;grid-column-gap:12px;column-gap:12px}.notes h2{align-self:center}.notes p{grid-column:2}.note-icon{grid-row:1/3}.faq{margin:44px 5px 49px}.faq>h2{font-size:32px}.output-info{flex-wrap:wrap}.download{padding:12px 15px}.prose{margin-top:36px}.prose h1{font-size:38px}.prose h2{font-size:26px}.prose td,.prose th{padding:8px;font-size:11px}footer nav{gap:19px}button.text-button{min-height:30px}.check{min-height:28px}.background label{min-height:32px}.presets button{min-height:35px}}