@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,900;1,900&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,sans-serif}body{overflow:hidden}.dark-mode .angle-holder{background-color:#fff}.dark-mode .angle-line{background-color:#000;border:1px solid #fff}.dark-mode .angle-line.snap-back{background-color:#fff;border:1px solid #000}.dark-mode .locater{color:#000}.angle-holder{background-color:#000;border-radius:50%;width:300px;height:300px;position:relative}.angle-line{z-index:1;transform-origin:50% 90%;background-color:#fff;border:1px solid #000;border-radius:15px;width:30px;height:166.5px;position:absolute;left:calc(50% - 15px)}.angle-line.set-mode{cursor:grab}.angle-line.set-mode:active{cursor:grabbing}.angle-line:not(.set-mode){transition:transform .5s ease-in-out}.angle-line.snap-back{background-color:#000;border:1px solid #fff}.angle-line.snap-back.hidden{opacity:0}.locater{color:#fff;-webkit-user-select:none;user-select:none;font-size:30px;position:absolute}.locater.l0{top:10px;left:50%;transform:translate(-50%)}.locater.l90{top:50%;right:10px;transform:translateY(-50%)}.locater.l180{bottom:10px;left:50%;transform:translate(-50%)}.locater.lm90{top:50%;left:10px;transform:translateY(-50%)}.dark-mode .input{color:#000;background-color:#fff}.dark-mode .keypad .key{color:#000;background-color:#fff;border:1px solid #fff}.dark-mode .keypad .key:hover{color:#fff;background-color:#000}.dark-mode .keypad .key:active{color:#000;opacity:.8;background-color:#fff}.dark-mode .keypad .key.special{color:#fff;background-color:#000;border:1px solid #fff}.dark-mode .keypad .key.special:hover{color:#000;background-color:#fff}.dark-mode .keypad .key.special:active{color:#fff;opacity:.8;background-color:#000}.dark-mode .set-mode .angle-goal{color:#000;background-color:#fff}.dark-mode .set-mode .submit-btn{color:#fff;background-color:#000;border:1px solid #fff}.dark-mode .set-mode .submit-btn:hover{color:#000;background-color:#fff}.dark-mode .set-mode .submit-btn:active{color:#fff;opacity:.8;background-color:#000}.dark-mode .turn-btn{color:#000;background-color:#fff;border:1px solid #fff}.dark-mode .turn-btn:hover{color:#fff;background-color:#000}.dark-mode .turn-btn:active{color:#000;opacity:.8;background-color:#fff}.overall-border{flex-direction:column;align-items:center;gap:10px;display:flex}.turn-btn{color:#fff;cursor:pointer;background-color:#000;border:1px solid #000;border-radius:25px;width:120px;height:38px;padding:6px 12px;font-size:22px;font-weight:700;transition:all .2s ease-in-out}.turn-btn:hover{color:#000;background-color:#fff}.turn-btn:active{color:#fff;opacity:.8;background-color:#000}.angle-entry{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.input{color:#fff;text-align:right;cursor:text;background-color:#000;border-radius:20px;width:100%;padding:6px 12px;font-size:18px}.keypad{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.keypad .key{color:#fff;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:#000;border:1px solid #000;border-radius:20px;width:40px;height:40px;font-size:24px;transition:all .2s ease-in-out}.keypad .key:hover{color:#000;background-color:#fff}.keypad .key:active{color:#fff;opacity:.8;background-color:#000}.keypad .key.special{color:#000;background-color:#fff;border:1px solid #000;transition:all .2s ease-in-out}.keypad .key.special:hover{color:#fff;background-color:#000}.keypad .key.special:active{color:#000;opacity:.8;background-color:#fff}.set-mode{justify-content:center;align-items:center;gap:10px;display:flex}.set-mode .angle-goal{color:#fff;background-color:#000;border-radius:20px;justify-content:space-between;align-items:center;width:150px;padding:6px 12px;font-size:18px;display:flex}.set-mode .submit-btn{color:#000;cursor:pointer;background-color:#fff;border:1px solid #000;border-radius:20px;padding:6px 12px;font-size:18px;transition:all .2s ease-in-out}.set-mode .submit-btn:hover{color:#fff;background-color:#000}.set-mode .submit-btn:active{color:#000;opacity:.8;background-color:#fff}body:has(.dark-mode) .toggle-button img{filter:invert()}body:has(.dark-mode) .toggle-button:hover{background-color:#fff}body:has(.dark-mode) .toggle-button:hover img{filter:invert(0)}body:has(.dark-mode) .toggle-button:active{background-color:#000}body:has(.dark-mode) .toggle-button:active img{filter:invert()}body:has(.dark-mode) .toggle-settings p{color:#fff}body:has(.dark-mode) .toggle-settings .smaller-section button{color:#fff;background-color:#000;border:1px solid #fff}body:has(.dark-mode) .toggle-settings .smaller-section button.selected,body:has(.dark-mode) .toggle-settings .smaller-section button:hover{color:#000;background-color:#fff}body:has(.dark-mode) .toggle-settings .smaller-section button:active{color:#fff;opacity:.8;background-color:#000}.toggle-settings{-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:absolute;top:15px;left:20px}.toggle-settings p{font-size:18px}.toggle-settings .smaller-section{justify-content:space-between;align-items:center;gap:5px;display:flex}.toggle-settings .smaller-section button{cursor:pointer;background:0 0;border:1px solid #000;border-radius:25px;padding:5px 10px;transition:all .2s ease-in-out}.toggle-settings .smaller-section button.selected,.toggle-settings .smaller-section button:hover{color:#fff;background-color:#000}.toggle-settings .smaller-section button:active{color:#000;background-color:#fff}.toggle-button{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;transition:all .2s ease-in-out;display:flex;position:absolute;bottom:20px;scale:1.5}.toggle-button.color{left:20px}.toggle-button.mute{right:20px}.toggle-button:hover{background-color:#000}.toggle-button:hover img{filter:invert()}.toggle-button:active{opacity:.8;background-color:#fff}.toggle-button:active img{filter:invert(0)}.end-screen{color:#fff;z-index:1001;opacity:0;background-color:#000c;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;height:100%;transition:all .5s ease-in-out;display:flex;position:absolute;top:0;left:-120dvw}.end-screen.show{opacity:1;left:0}.end-screen h2{font-size:36px}.end-screen p{margin:-6px 0;font-size:24px}.end-screen p.small{font-size:16px}.end-screen button{color:#000;cursor:pointer;background-color:#fff;border:1px solid #000;border-radius:25px;padding:10px 20px;font-size:18px;transition:all .2s ease-in-out}.end-screen button:hover{color:#fff;background-color:#000;border:1px solid #fff}.end-screen button:active{color:#000;opacity:.8;background-color:#fff}.reset-data{position:absolute;top:10px;right:10px;padding:6px 12px!important;font-size:12px!important}.app{text-align:center;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100dvw;height:100dvh;transition:all .3s ease-in-out;display:flex;overflow:hidden}.app.dark-mode{color:#fff;background-color:#000}@media (height>=750px) and (width>=500px){.app{scale:1.25}}@media (height>=900px) and (width>=750px){.app{scale:1.5}}