body{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:Segoe UI,sans-serif;background-color:#333;background-image:linear-gradient(to bottom right,#2a022b,#333)}body{overflow:hidden}.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}.butterfly{position:absolute;background-image:url(/classroom-stopwatch/assets/butterfly-DEZNHPQU.png);background-size:contain;background-repeat:no-repeat;opacity:.85;animation:float 6s ease-in-out infinite,flutter .6s ease-in-out infinite;will-change:transform;pointer-events:none;filter:drop-shadow(0 0 6px #a259ff88)}.butterfly1{top:10vh;left:10vw;width:15vw;height:15vw;animation-delay:0s;rotate:40deg}.butterfly2{top:12vh;right:12vw;width:12vw;height:12vw;animation-delay:2s;rotate:3deg}.butterfly3{bottom:8vh;left:8vw;width:10vw;height:10vw;animation-delay:1s;rotate:12deg}.butterfly4{bottom:10vh;right:10vh;width:14vw;height:14vw;animation-delay:1s;rotate:-30deg}.butterfly5{bottom:40vh;right:75vw;width:8vw;height:8vw;animation-delay:2s;rotate:-30deg}.butterfly6{top:3vh;right:40vw;width:12vw;height:12vw;animation-delay:1.5s;rotate:-10deg}.butterfly7{bottom:2vh;left:40vw;width:11vw;height:11vw;animation-delay:2s;rotate:-15deg}.butterfly8{bottom:40vh;left:70vw;width:9vw;height:9vw;animation-delay:6s;rotate:45deg}@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(2deg)}to{transform:translateY(0) rotate(0)}}@keyframes flutter{0%,to{transform:scaleX(1) rotate(0)}50%{transform:scaleX(1.05) rotate(1deg)}}@media (max-width: 768px){.butterfly1{width:20vw;height:20vw}.butterfly2{width:17vw;height:17vw}.butterfly3{width:15vw;height:15vw}.butterfly4{width:21vw;height:21vw}.butterfly5{width:12vw;height:12vw}.butterfly6{width:22vw;height:22vw}.butterfly7{width:11vw;height:11vw}.butterfly8{width:8vw;height:8vw}}@media (max-height: 820px){.butterfly6{width:0px;height:0px}}@media (max-width: 500px){.butterfly5,.butterfly8{width:0px;height:0px}}.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;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}