*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{color:#e0e0e0;background-color:#121212;font-family:system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,oxygen,ubuntu,cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex}#root{flex:1;display:flex}input[type=number]{color:inherit;background-color:#2a2a2a;border:1px solid #444;border-radius:8px;padding:.5rem;font-family:inherit}button{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:8px;padding:.5rem 1rem;font-family:inherit;transition:background-color .2s}button:hover{background-color:#357abd}button:disabled{cursor:not-allowed;opacity:.5}.settings{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:1rem;display:flex}.settings__title{text-align:center;margin-bottom:3rem;font-size:2rem;font-weight:300}.settings__form{flex-direction:column;gap:1rem;width:100%;max-width:400px;display:flex}.settings__preset-container{justify-content:flex-end;margin-bottom:.5rem;display:flex}.settings__preset-btn{background-color:#0000;border:1px solid #4a90e2}.settings__preset-btn:hover{background-color:#ffffff1a}.settings__group{flex-direction:column;gap:.25rem;display:flex}.settings__label{color:#aaa;font-size:.9rem}.settings__input{width:100%;font-size:1.1rem}.settings__start-btn{margin-top:2rem;font-size:1.2rem;font-weight:700}.exercise{flex-direction:column;flex:1;display:flex}.exercise__header{justify-content:flex-end;padding:1rem;display:flex}.exercise__stop-btn{background-color:#0000;border:1px solid #e24a4a}.exercise__stop-btn:hover{background-color:#e24a4a}.exercise__content{flex:1;justify-content:center;align-items:center;display:flex}.visualizer{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.visualizer__circle{border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:150px;height:150px;transition-property:transform;transition-timing-function:linear;display:flex;transform:scale(1)}.visualizer__text{color:#fff;text-shadow:0 1px 3px #00000080;font-size:1.2rem;font-weight:500}.visualizer__timer{color:#fff;text-shadow:0 1px 3px #00000080;margin-top:.25rem;font-size:2rem;font-weight:700}.visualizer__circle--inhale{background-color:#81c784}.visualizer__circle--hold{background-color:#ffd54f}.visualizer__circle--exhale{background-color:#64b5f6}.app{flex-direction:column;flex:1;min-height:100vh;display:flex}