@import"https://fonts.googleapis.com/css2?family=Lexend:wght@700&family=Roboto+Mono:ital@0;1&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto Mono,monospace}:root{font-size:10px}html{min-height:100%;min-width:100%;display:flex}body{flex:1}#root{height:100%;width:100%}button{width:fit-content;cursor:pointer;background-color:transparent}input,button,textarea,select{appearance:none;outline:none;border:none}.noselect{user-select:none}@media all and (min-width: 500px){:root{font-size:12px}}#home{height:100%;width:100%;display:grid;place-items:center;background-color:#01071c;padding:2rem}#speedometer{--speed-animation-duration: .5s;width:100%;max-width:500px;text-align:center;color:#fff;display:grid;place-items:center}#speedometer #outer-circle{width:100%;border-radius:50%;border:4px solid #451a92;position:relative;display:grid;place-items:center}#speedometer #outer-circle:after{content:"";display:block;padding-bottom:100%}#speedometer #outer-circle #speeds-circle{display:grid;place-items:center;position:absolute;width:96%;height:96%;border-radius:50%;z-index:1;overflow:hidden}#speedometer #outer-circle #speeds-circle:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#451a92;background:linear-gradient(317deg,rgb(223,0,206) 18%,rgb(95,11,247) 49%,rgb(47,11,110) 94%);clip-path:polygon(50% 50%,0% 100%,0% 0%,100% 0%,100% 100%);z-index:0}#speedometer #outer-circle #speeds-circle #progress{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;clip-path:polygon(50% 50%,0% 100%,0% 0%,100% 0%,100% 100%)}#speedometer #outer-circle #speeds-circle #progress svg{transform:rotate(135deg)}#speedometer #outer-circle #speeds-circle #progress svg #progress-main{transition:stroke-dasharray var(--speed-animation-duration) ease-out}#speedometer #outer-circle #speeds-circle #progress svg #progress-background{opacity:.25}#speedometer #outer-circle #speeds-circle #progress #ultra-fast{--flame-size: 0rem;position:absolute;bottom:17%;right:14%;width:4rem;height:.3rem;box-shadow:0 0 var(--flame-size) var(--flame-size) #d0ff00;z-index:2;transform:rotate(45deg);transition:box-shadow var(--speed-animation-duration) ease,opacity var(--speed-animation-duration) ease;opacity:0}#speedometer #outer-circle #speeds-circle #progress #ultra-fast.visible{opacity:1}#speedometer #outer-circle #speeds-circle #black-circle{z-index:2;display:grid;place-items:center;position:absolute;width:78%;height:78%;border-radius:50%;background-color:#01071c;box-shadow:0 -20px 20px #0885d880}#speedometer #outer-circle #speeds-circle #inner-circle{position:absolute;width:84%;height:84%;border-radius:50%;background-color:#01071c;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #e055ff;box-shadow:0 0 10px 2px #cb3beb,inset 0 0 10px 2px #cb3beb}#speedometer #outer-circle #speeds-circle #inner-circle-loading{position:absolute;width:100%;height:100%;top:0;left:0;border-radius:50%;animation:circling 4s linear infinite;clip-path:ellipse(20% 20% at left);box-shadow:0 -15px 7px 2px #ffebfe;z-index:4}#speedometer #outer-circle #speeds-circle #inner-circle #speed{font-family:Lexend,sans-serif;font-size:6rem}#speedometer #outer-circle #speeds-circle #inner-circle #speed-unit{margin-top:-.5rem;font-size:1.8rem;font-style:italic;text-transform:uppercase}#speedometer #outer-circle #looking-for-signal{position:absolute;bottom:8%;left:0;width:100%;text-align:center;color:#ffebfe;z-index:2;animation:blink 4s ease infinite}#speedometer #unit-setter{display:flex;margin-top:4rem;gap:2rem;position:relative;width:100%;max-width:var(--max-width);justify-content:center;align-items:center}#speedometer #unit-setter:before{content:"";position:absolute;z-index:1;width:100%;top:50%;left:0;border-bottom:1px solid #321e55}#speedometer #unit-setter .unit-setter-button{flex-shrink:0;z-index:2;color:#fff;font-size:1.2rem;padding:.3rem 1.2rem;background-color:#1d0e36;color:#776399;border:1px solid #281844;text-transform:uppercase}#speedometer #unit-setter .unit-setter-button:not(#speedometer #unit-setter .unit-setter-button--active):hover{background-color:#29144b;border:1px solid #321e55}#speedometer #unit-setter .unit-setter-button--active{color:#fff;background-color:#381377;border:1px solid #451a92}@keyframes circling{to{transform:rotate(360deg)}}@keyframes blink{0%,to{opacity:0}50%{opacity:1}}@keyframes flameAppearing{0%{box-shadow:none}}