:root{color-scheme:light dark;font-family:system-ui}body{margin:0;min-height:100vh;background-color:light-dark(#f0f0f0,#373738)}p{line-height:1.4}button{all:unset;padding:.5rem 1rem;--base-color: #2d49eb;background-color:var(--base-color);color:#fff;border-radius:.3rem;cursor:pointer}button:disabled{background-color:#5a5a5a99;color:#ffffff80;cursor:default}button:hover:not(:disabled){background-color:hsl(from var(--base-color) h s calc(l + 3))}button:active:not(:disabled){background-color:hsl(from var(--base-color) h s calc(l - 10))}#root{display:grid;min-height:100vh;place-items:center}.blocks{display:flex;flex-direction:column;gap:1.5rem;max-width:calc(100vw - 2rem);width:60ch}.converter{display:flex;flex-direction:column;gap:.6rem;padding:1rem;background:light-dark(#e1e3e6,#2e2f30);border:.15rem solid transparent;border-radius:.8rem}.converter.busy{animation:converter-busy 2s ease-in-out infinite alternate}.converter>h2,.converter>.description{margin:0}.converter>.convert-btn{align-self:flex-end}.dropzone{display:block;padding:2rem 1rem;text-align:center;cursor:pointer;border:.15rem dashed rgba(100 100 100 / .5);border-radius:.5rem}.dropzone>input{display:none}.errorbox{padding:.5rem;display:none;border:1px solid #d44444;border-radius:.3rem;background-color:#d4444460}.errorbox.visible{display:unset}@keyframes converter-busy{to{border:.15rem solid #257cff}}