*{box-sizing:border-box}body{margin:0;background:#182729;color:white;font:16px system-ui,sans-serif;overflow:hidden}canvas{display:block;width:100vw;height:100dvh;touch-action:none}header{position:absolute;left:24px;top:24px;display:flex;gap:13px;align-items:center;background:#152b31e8;border:1px solid #ffffff25;border-radius:18px;padding:14px 18px;box-shadow:0 8px 30px #0002}.mark{display:grid;place-items:center;border-radius:12px;background:#d5f783;color:#1a3035;font-weight:800;width:42px;height:42px;font-size:25px}h1{font-size:19px;margin:0 0 3px}header span:not(.mark){font-size:13px;color:#b6c7c9}button,select{font:inherit;color:inherit;background:#ffffff13;border:1px solid #ffffff30;border-radius:9px;padding:10px 14px;cursor:pointer}button:hover{background:#ffffff28}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d5f783}#overview{margin-left:15px}details{position:absolute;right:24px;top:24px;background:#152b31ed;border:1px solid #ffffff25;border-radius:16px;width:260px;padding:17px}summary{cursor:pointer;font-weight:600;list-style:none}summary span{float:right;color:#d5f783}.settings{padding-top:24px}label{display:block;font-size:14px;margin-bottom:12px}output{float:right;color:#d5f783;font-variant-numeric:tabular-nums}input{width:100%;accent-color:#d5f783;cursor:pointer}.ticks{display:flex;justify-content:space-between;font-size:12px;color:#a9babc;margin:4px 0 25px}select{width:100%;background:#203940}#reset{width:100%;margin-top:18px;font-size:14px}footer{position:absolute;bottom:24px;left:24px;background:#152b31d9;border-radius:12px;padding:12px 16px;pointer-events:none;font-size:14px}small{display:block;color:#adbec0;font-size:12px;margin-top:5px}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#152b31;padding:25px;border-radius:15px}#pad{position:absolute;bottom:105px;left:25px;text-align:center;display:none;touch-action:none}#pad button{width:52px;height:52px;margin:3px;background:#152b31dd;font-size:23px;touch-action:none;user-select:none}@media(pointer:coarse){#pad{display:block}}@media(max-width:700px){header{top:12px;left:12px;right:12px;padding:10px;gap:10px}h1{font-size:17px}#overview{margin-left:auto;font-size:14px;padding:9px}details{top:93px;right:12px;width:218px;padding:14px}footer{left:12px;bottom:14px;right:12px;font-size:12px}small{font-size:11px}#pad{left:12px;bottom:100px}}
