html{background-color:#032d5e;background-image:linear-gradient(to bottom right,#073963,#201e1e);background-attachment:fixed;overflow-y:scroll;overflow-x:scroll}body{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Segoe UI,sans-serif}footer{display:flex;font-size:16px;justify-content:center;color:#c5e9e4;margin:64px auto 32px}.header-container{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem auto;max-width:600px}.title{font-size:70px;color:#80c6ee;margin:12px 8px 0;padding:10px}.name{font-size:24px;color:#80c6ee;margin:12px}.line-container{display:flex;margin-bottom:24px;width:90%;overflow:hidden}.line-container line{stroke:#5aace2;stroke-width:8;stroke-linecap:round}.body{font-size:20px;color:#c5e9e4}.tab-switcher{display:flex;max-width:fit-content;align-items:center;justify-content:center;border-radius:1rem;overflow:hidden;background:#1b1b1f;margin:0 auto 2rem}.tab-switcher button{background:transparent;color:#aaa;padding:.6rem 1.5rem;border:none;font-size:1rem;cursor:pointer;transition:.3s}.tab-switcher .active{background-color:#a259ff;color:#fff;font-weight:700}.display{font-size:5rem;color:#cfaaff}.start-button,.stop-button,.reset-button{font-size:1rem;padding:10px 20px;margin:5px;min-width:100px;border:none;border-radius:1rem;cursor:pointer;background-color:#a259ff;color:#fff}.start-button:hover,.stop-button:hover,.reset-button:hover{background-color:#6429b1;transition:.3s}.start-button:active,.stop-button:active,.reset-button:active{transform:translateY(4px);transition:.1s}.timer-container{display:flex;flex-direction:column;align-items:center;color:#fff}.time-inputs{display:flex;gap:.5rem;font-size:2.5rem;color:#cfaaff;align-items:center;justify-content:center;margin-bottom:1rem}.time-inputs input{width:3.5ch;height:3.2rem;background-color:transparent;border:none;border-bottom:2px solid #a259ff;color:#cfaaff;font-size:2.5rem;text-align:center;outline:none;caret-color:#a259ff;font-family:Segoe UI,sans-serif;transition:border-color .3s,box-shadow .3s}.time-inputs input:focus{border-bottom:2px solid #ffffff;box-shadow:0 2px 10px #a259ff55}.clock{position:relative;display:flex;margin-left:auto;margin-right:auto;flex-direction:column;align-items:center;justify-content:center;height:350px;width:350px;border:4px solid #a259ff66;border-radius:50%;background-color:#ac0abb;padding:30px;background:radial-gradient(#1c132a,#2b1d3d 40%,#502a84 70%);box-shadow:0 0 30px #a259ff55,inset 0 0 20px #a259ff33,inset 0 0 5px #000}.top-button{position:absolute;top:-30px;width:50px;height:25px;background:linear-gradient(145deg,#a259ff,#6e35a6);border-radius:12px;box-shadow:0 0 10px #a259ff88}.jar-container{width:100%;height:600px;position:relative;display:flex;justify-content:center;align-items:center}.jar{width:350px;height:450px;border:6px solid #666;border-radius:20px;position:relative;background:radial-gradient(circle,#eef,#ccd);box-shadow:0 0 20px #0003;transition:transform .05s ease-out;cursor:grab}.marble{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#faa,#d22);position:absolute;pointer-events:none}.radio-box{width:350px;height:400px;display:flex;flex-direction:column;align-items:center;margin-left:auto;margin-right:auto;justify-content:center;border-radius:14px;border:2px solid #333;position:relative;background-color:#e0a76e}.sin-display{padding:4px;background-color:#222;border:10px inset #555;margin-bottom:60px}.dial-container{width:100%;display:flex;justify-content:space-around;flex-direction:row}.dial{width:50px;height:50px;border-radius:50%;background-color:#222;transform:rotate(var(--rotation, 0deg));transition:transform .1s linear}.dial{width:50px;height:50px;background:radial-gradient(circle at 30% 30%,#333,#000);border-radius:50%;border:2px solid #666;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .05s linear;position:relative;-webkit-user-select:none;user-select:none}.dialFace{width:90%;height:90%;background:radial-gradient(circle at 30% 30%,#555,#111);border-radius:50%;position:relative;box-shadow:inset -1px -1px 2px #fff3,inset 1px 1px 2px #000c}.dialIndicator{position:absolute;top:5%;left:50%;width:3px;height:40%;background-color:#ccc;border-radius:2px;transform:translate(-50%)}.dialLabel{font-size:.8rem;margin-top:4px;color:#222;font-weight:700;display:flex;justify-content:center}.header-container{display:flex;flex-direction:column;justify-content:center;padding-top:24px}.name{font-size:32px;color:#80c6ee}.desc{font-size:18px;color:#c5e9e4}