.Converter-wrapper{align-items:flex-start;background-color:#f4f7f6;box-sizing:border-box;display:flex;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:center;margin:0;min-height:100vh;padding:20px}.container{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.1);max-width:900px;padding:30px;text-align:center;width:100%}.message{border-radius:8px;font-size:.95em;font-weight:500;margin-bottom:20px;padding:12px 18px;text-align:left}.message.info{background-color:#e7f3fe;border:1px solid #c7e0f4;color:#0366d6}.message.success{background-color:#e6ffed;border:1px solid #d4edda;color:#28a745}.message.error{background-color:#fcebeb;border:1px solid #f5c6cb;color:#dc3545}.message.warning{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.processing{align-items:center;background-color:#f0f0f0;border-radius:8px;color:#555;display:flex;font-size:.9em;font-style:italic;justify-content:center;margin-bottom:20px;padding:10px}.spinner{animation:spin 1s linear infinite;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#3498db;height:20px;margin-right:10px;width:20px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.input-row{background-color:#fafafa;border:1px dashed #ccc;border-radius:8px;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:30px;padding:15px}.input-group,.input-row{align-items:flex-start;display:flex}.input-group{flex:1;flex-direction:column;gap:8px;min-width:260px}.slider-group{justify-content:flex-end;padding-top:10px}.slider-group input[type=range]{width:100%}.input-group label{color:#333;font-size:1.05em;font-weight:600}.input-group input[type=file],.input-group input[type=text]{border:1px solid #dcdcdc;border-radius:6px;box-sizing:border-box;font-size:1em;padding:10px 12px;transition:border-color .3s;width:100%}.input-group input[type=file]:focus,.input-group input[type=text]:focus{border-color:#007bff;box-shadow:0 0 0 3px rgba(0,123,255,.25);outline:none}.input-group button{align-self:flex-end;background-color:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1em;font-weight:500;margin-top:5px;padding:10px 18px;transition:background-color .3s ease}.input-group button:hover{background-color:#0056b3}.or-separator{align-self:center;color:#777;font-weight:700;margin:auto 0;padding:0 10px;text-align:center}#resizePercent{-webkit-appearance:none;background:#d3d3d3;border-radius:5px;height:8px;opacity:.7;outline:none;-webkit-transition:.2s;transition:opacity .2s;width:100%}#resizePercent::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#007bff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;height:22px;width:22px}#resizePercent::-moz-range-thumb{background:#007bff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);cursor:pointer;height:22px;width:22px}.preview-section{display:flex;flex-wrap:wrap;gap:25px;justify-content:space-around;margin-bottom:30px}.preview-card{align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.05);display:flex;flex:1;flex-direction:column;gap:15px;max-width:48%;min-width:300px;padding:20px}.preview-card h3{color:#34495e;font-size:1.3em;font-weight:600;margin-top:0}.preview-card img{border:1px solid #f0f0f0;border-radius:8px;height:auto;max-height:250px;max-width:100%;object-fit:contain}.preview-card p{color:#555;font-size:1.1em;font-weight:500}canvas{display:none}.download-section{margin-top:30px}.button{background-color:#28a745;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#fff;display:inline-block;font-size:1.15em;font-weight:600;padding:15px 30px;text-decoration:none;transition:background-color .3s ease,transform .2s ease}.button:hover{background-color:#218838;transform:translateY(-2px)}@media (max-width:768px){.container{max-width:100%;padding:20px}h1{font-size:1.8em}.input-row{align-items:stretch;flex-direction:column;gap:15px}.or-separator{margin:10px auto;width:100%}.input-group{min-width:unset;width:100%}.slider-group{padding-top:0}.preview-section{align-items:center;flex-direction:column;gap:20px}.preview-card{max-width:100%;width:100%}.input-section{padding:10px}.input-group button{align-self:stretch}}@media (max-width:480px){.container{padding:15px}.button{font-size:1em;padding:12px 20px}}