:root{--neutral-white:#fff;--neutral-50:#fafafa;--neutral-100:#f5f5f5;--neutral-200:#eee;--neutral-300:#e0e0e0;--neutral-400:#bdbdbd;--neutral-500:#9e9e9e;--neutral-600:#757575;--neutral-700:#616161;--neutral-800:#424242;--neutral-900:#212121;--neutral-black:#000;--primary-50:#ede7f6;--primary-100:#d1c4e9;--primary-200:#b39ddb;--primary-300:#9575cd;--primary-400:#7e57c2;--primary-500:#673ab7;--primary-600:#5e35b1;--primary-700:#512da8;--primary-800:#4527a0;--primary-900:#311b92;--secondary-50:#f3f8e8;--secondary-100:#e1eec7;--secondary-200:#cde3a3;--secondary-300:#b9d87d;--secondary-400:#a8d05f;--secondary-500:#99c742;--secondary-600:#89b73a;--secondary-700:#74a330;--secondary-800:#608f27;--secondary-900:#3c6d15}*{box-sizing:border-box;font-family:Arial,sans-serif}:focus{outline:2px solid var(--secondary-800);outline-offset:2px}html,body{width:100dvw;height:100dvh;margin:0;padding:0;overflow:hidden}body{background:var(--primary-100);flex-direction:column;justify-content:center;align-items:center;display:flex}a{color:var(--neutral-black);cursor:pointer;text-decoration:underline}.container{background:var(--neutral-white);border-radius:16px;width:640px;overflow:hidden;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}header{background:var(--primary-500);color:var(--neutral-100);align-items:center;height:64px;padding:0 16px;display:flex}main{max-height:calc(100dvh - 196px);padding:16px 0;overflow:hidden auto}.instructions{margin:0;padding:0 16px}code{background-color:var(--neutral-200);border-radius:3px;padding:0 3px;font-family:Courier New,monospace}form{margin-top:16px;padding:0 16px}label,input{display:block}label{margin-bottom:8px;font-weight:700}input{border:1px solid var(--neutral-300);border-radius:8px;width:100%;margin:0 0 16px;padding:14px 12px}input[type=file]{cursor:pointer}input::file-selector-button{background:0 0;border:0;font-weight:700}button{background:var(--primary-700);color:var(--neutral-white);cursor:pointer;border:0;border-radius:16px;width:100%;padding:16px 8px;font-size:16px;font-weight:700}footer{color:var(--neutral-black);text-align:center;font-size:14px;font-weight:700}footer a{display:inline-block}footer a:hover,footer a:focus{animation:.5s linear infinite shake}footer img{border-radius:8px;overflow:hidden}@media only screen and (width<=672px){html,body{height:auto;overflow:hidden auto}body{justify-content:flex-start;padding:16px 0}.container{width:calc(100dvw - 32px)}main{max-height:none;overflow:hidden}}@media (prefers-color-scheme:dark){:focus{outline:2px solid var(--secondary-300);outline-offset:2px}body{background:var(--primary-400)}a{color:var(--neutral-white)}header{background:var(--primary-800)}.container{background:var(--neutral-900);color:var(--neutral-white)}code{background:var(--neutral-800)}input{background:var(--neutral-800);border-color:var(--neutral-900);color:var(--neutral-white)}input::file-selector-button{color:var(--neutral-white)}footer{color:var(--neutral-white)}}@keyframes shake{0%{transform:rotate(.75deg)}50%{transform:rotate(-.75deg)}to{transform:rotate(.75deg)}}