*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}html,body{height:100%;background-color:#f0f2f5;color:#333}body{padding:16px 32px}header{text-align:center;margin-bottom:2rem}h1{font-size:2.5rem;color:#4a90e2}h4{font-size:1.2rem;color:#7f8c8d;margin-top:.5rem}main{display:flex;flex-direction:column;align-items:center}#container{position:relative;width:720px;height:480px;max-width:100%;max-height:100%;border:2px dashed #D1D5DB;border-radius:.75rem;overflow:hidden;margin-top:1rem;background-size:cover;background-position:center;background-repeat:no-repeat;transition:background .3s ease-in-out}#upload-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;font-size:18px;color:#4a90e2;cursor:pointer;padding:1rem;border:2px solid #4A90E2;border-radius:.75rem;background-color:#fff;transition:background-color .3s ease-in-out,color .3s ease-in-out}#upload-button:hover{background-color:#4a90e2;color:#fff}#upload{display:none}svg{pointer-events:none}#example{font-size:14px;text-decoration:underline;cursor:pointer;color:#4a90e2}#example:hover{color:#2563eb}canvas{position:absolute;width:100%;height:100%}#status{min-height:16px;margin:8px 0;font-size:1rem;color:#4a90e2}#download-button{padding:10px 20px;font-size:16px;color:#fff;background-color:#4a90e2;border:none;border-radius:5px;cursor:pointer;margin-top:1rem;transition:background-color .3s ease-in-out}#download-button:hover{background-color:#2563eb}