body{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;color:#fff;background:#1e555c;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1e555c,#15292b)}#clock-container{background-color:#13353a;padding:30px;border-radius:10px;box-shadow:0 0 15px #00000080;text-align:center;max-width:500px;width:100%}#clock-container h1{margin-bottom:25px;font-size:2rem}.length-controls{display:flex;justify-content:space-around;margin-bottom:30px}.length-controls h2{font-size:1.2rem;margin-bottom:10px}.length-controls .controls{display:flex;align-items:center;justify-content:center}.length-controls .controls button{background:#4d8d96;border:none;color:#fff;font-size:1.2rem;width:40px;height:40px;border-radius:5px;cursor:pointer;margin:0 10px;transition:background-color .3s}.length-controls .controls button:hover{background-color:#3c6d74}.length-controls .controls button:active{transform:scale(.95)}.length-controls .controls span{font-size:1.5rem;width:40px}#timer{margin-bottom:30px;padding:20px;background-color:#15292b;border-radius:10px}#timer #timer-label{font-size:1.5rem;margin-bottom:10px}#timer #time-left{font-size:3rem;font-weight:700}.timer-controls{display:flex;justify-content:center;gap:20px}.timer-controls button{background:#4d8d96;border:none;color:#fff;font-size:1.5rem;width:60px;height:60px;border-radius:50%;cursor:pointer;transition:background-color .3s,transform .1s}.timer-controls button:hover{background-color:#3c6d74}.timer-controls button:active{transform:scale(.95)}@media (max-width: 500px){#clock-container{padding:15px;width:95%}.length-controls{flex-direction:column;gap:20px}}