body{background:#222;font-family:Avenir,Arial,Helvetica,sans-serif;padding:20px;margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:30px}h1{margin-top:0}h1,h3{color:#fff}h3{font-weight:400;font-size:.8rem;text-transform:uppercase;letter-spacing:.1rem}h3,pre{font-family:IBM Plex Mono,monospace}pre{font-size:1rem;color:hsla(0,0%,100%,.7)}span{color:#adff2f}.form{display:grid;grid-gap:10px}input,textarea{font-size:.9rem;font-family:IBM Plex Mono,monospace;border:none;padding:10px;border-radius:2px}input[type=file]{color:#fff}textarea{font-size:1rem}.actions{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;margin-top:20px;margin-bottom:10px}.token{font-size:.8rem}button{font-size:1rem;border:none;border-radius:2px;padding:10px 0;background:#87f;color:#fff;cursor:pointer}.result{overflow-x:scroll}.result::-webkit-scrollbar{width:10px;height:5px}.result::-webkit-scrollbar-track{background:#222;border-radius:0}.result::-webkit-scrollbar-thumb{background:#adff2f;border-radius:0}.v-enter{opacity:0;transform:translate3d(0,-20px,0)}.v-leave-to{opacity:0;transform:translate3d(0,20px,0)}.v-enter-active,.v-leave-active{transition:all .3s}@media screen and (min-width:700px){.controls{min-height:100vh}}footer{grid-row:2}