*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica,Arial,sans-serif;background-color:#333;color:#fff}.pomodoro_container{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#1b2132}.pomodoro{width:400px;height:auto;background-color:#242e42cc;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:40px 24px;border-radius:24px;box-shadow:0 10px 30px #0000004d}.timer{font-size:7em;margin:20px 0;color:#fff;font-weight:500}.play_button{background:linear-gradient(90deg,#26d9bb,#8cd147);border:none;color:#fff;padding:18px 60px;text-align:center;text-decoration:none;display:inline-block;margin:20px 0 4px;cursor:pointer;font-size:1.8em;font-weight:500;border-radius:30px;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 15px #33cc664d}.play_button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3c66}.timer_options{display:flex;margin-bottom:10px}.timer_option,.lock-in-banner{background-color:transparent;border:none;padding:8px 12px;font-size:1.1em;color:#b6bfc9;font-weight:500;transition:color .2s ease,background-color .2s ease}.timer_option{cursor:pointer}.timer_option:hover{color:#fff}.lock-in-banner{font-size:1.5em;color:#fff;font-weight:600}.active{background-color:#d3d9de1a;color:#fff;border-radius:6px}.brown_noise_button{height:60px;width:60px;border-radius:50%;margin-top:30px;padding:12px;background-color:#7a4d1f;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 4px 10px #0003;transition:transform .2s ease,box-shadow .2s ease}.brown_noise_button:hover{transform:translateY(-1px);box-shadow:0 6px 15px #0000004d}.brown_noise_button img{height:24px;width:24px;display:block}#play{margin-left:3px;padding:0}