*{padding:0;margin:0;box-sizing:border-box}.app{display:flex;align-items:center;flex-direction:column;min-height:100vh;background-color:#1e213f}.app .setting-component{display:flex;align-items:center;justify-content:center;min-height:100vh}.app .setting-component.inactive,.app .home-component.inactive{display:none}.home-page{display:flex;flex-direction:column;align-items:center}.home-page .setting-icon{position:relative;z-index:10}.home-page .setting-icon:hover{cursor:pointer}.home-page Link{text-decoration:none}@media (min-width: 770px){.logo{margin-top:48px}.tab-component{margin-block:56px 36px}.setting-icon{margin-block:64px 55px}}@media (min-width: 400px) and(max-width:769px){.logo{margin-top:80px}.tab-component{margin-block:48px 108px}.setting-icon{margin-block:144px 103px}}@media (max-width: 399px){.logo{margin-top:32px}.tab-component{margin-block:40px 47px}.setting-icon{margin-block:80px 47px}}.tab{background-color:#161932;border-radius:100vmax;position:relative;display:flex;justify-content:space-between;align-items:center;z-index:10;font-family:var(--font)}.tab .btn{display:flex;justify-content:center;align-items:center;border-radius:100vmax;font-weight:700;color:#d7e0ff}.tab .btn:hover{cursor:pointer}.tab .active{background-color:var(--color);color:#1e213f}.tab .inactive{opacity:.4}@media (min-width: 770px){.tab{width:380px;height:63px;padding:10px 7.5px}.tab .btn{width:120px;height:48px;font-size:14px}}@media (min-width: 400px) and (max-width: 769px){.tab{width:380px;height:63px;padding:10px 7.5px}.tab .btn{width:120px;height:48px;font-size:14px}}@media (max-width: 399px){.tab{width:330px;height:63px;padding:7.5px}.tab .btn{width:105px;height:48px;font-size:12px}}.progress-clock{filter:drop-shadow(-50px -50px 100px #272c5a) drop-shadow(50px 50px 100px #121530);font-family:var(--font)}.progress-clock .first-circle{border-radius:100vmax;background:linear-gradient(to right,#0e112a,#2e325a);position:relative;display:flex;justify-content:center;align-items:center}.progress-clock .second-circle{border-radius:100vmax;background-color:#161932;display:flex;justify-content:center;align-items:center}.progress-clock .third-circle{border-radius:100vmax;background:conic-gradient(var(--color) 0% var(--totalSec),transparent var(--totalSec) 100%);display:flex;justify-content:center;align-items:center}.progress-clock .top-circle{border-radius:100vmax;background-color:#161932;display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-clock .top-circle>div{color:#f5f5f5}.progress-clock .top-circle>p{color:#f5f5f5;font-family:inherit}.progress-clock .top-circle>p:hover{cursor:pointer}@media (min-width: 770px){.progress-clock .first-circle{width:410px;height:410px}.progress-clock .second-circle{width:366px;height:366px}.progress-clock .third-circle{width:339px;height:339px}.progress-clock .top-circle{width:312px;height:312px}.progress-clock .top-circle>div{font-size:100px}.progress-clock .top-circle>p{font-size:16px;letter-spacing:15px}}@media (min-width: 400px) and (max-width: 769px){.progress-clock .first-circle{width:410px;height:410px}.progress-clock .second-circle{width:366px;height:366px}.progress-clock .third-circle{width:339px;height:339px}.progress-clock .top-circle{width:312px;height:312px}.progress-clock .top-circle>div{font-size:100px}.progress-clock .top-circle>p{font-size:16px;letter-spacing:15px}}@media (max-width: 399px){.progress-clock .first-circle{width:300px;height:300px}.progress-clock .second-circle{width:268px;height:268px}.progress-clock .third-circle{width:248px;height:248px}.progress-clock .top-circle{width:228px;height:228px}.progress-clock .top-circle>div{font-size:80px;letter-spacing:-5px}.progress-clock .top-circle>p{font-size:14px;letter-spacing:14px}}.settings{background-color:#fff;position:relative;font-family:var(--font)}.settings .setting{display:flex;justify-content:space-between;align-items:center;font-weight:700}.settings .close:hover{cursor:pointer}.settings .hr.first{position:relative}.settings .hr{height:1px;background-color:#e3e1e1}.settings .time{display:flex}.settings .time>h2{font-weight:700}.settings .time>div{display:flex}.settings .time>div>div{display:flex}.settings .time>div>div>p{color:#1e213f;font-weight:700;opacity:.4}.settings .time>div>div>div{position:relative}.settings .time>div>div>div input{border:none;background-color:#eff1fa;font-family:inherit}.settings .time>div>div>div input:focus{outline:1px solid #7e8086}.settings .time>div>div>div .arrow-btn{position:absolute;display:flex;flex-direction:column}.settings .time>div>div>div .arrow-btn:hover{cursor:pointer}.settings .font{display:flex}.settings .font>h2{font-weight:700;color:#161932}.settings .font>div{display:flex;justify-content:center;align-items:center}.settings .font>div>div{display:flex;justify-content:center;align-items:center;border-radius:100vmax;font-weight:700;background-color:#eff1fa;color:#1e213f}.settings .font>div>div:hover{cursor:pointer}.settings .font>div .active{background-color:#161932;color:#fff}.settings .color{display:flex}.settings .color .inactive>*{display:none}.settings .color>div{display:flex}.settings .color>div>div{border-radius:100vmax;display:flex}.settings .color>div>div:hover{cursor:pointer}.settings .color>div>div:nth-child(1){background-color:#f87070}.settings .color>div>div:nth-child(2){background-color:#70f3f8}.settings .color>div>div:nth-child(3){background-color:#d881f8}.settings .apply-btn{position:absolute;background-color:var(--color);border-radius:100vmax;border:none;color:#fff;font-weight:700;font-family:inherit}.settings .apply-btn:hover{cursor:pointer}@media (min-width: 770px){.settings{width:540px;height:464px;padding-inline:36px;border-radius:25px}.settings .setting{font-size:24px;margin-block:33px 32px;max-height:35px}.settings .hr.first{width:540px;left:-36px}.settings .time{flex-direction:column;margin-block:32px 24px;height:103px;gap:16px}.settings .time>h2{font-size:13px;letter-spacing:5px}.settings .time>div{justify-content:space-between}.settings .time>div>div{flex-direction:column;gap:8px}.settings .time>div>div>p{font-size:12px}.settings .time>div>div>div input{width:140px;height:48px;border-radius:10px;padding-inline:16px 62px;font-size:13px;letter-spacing:5px}.settings .time>div>div>div .arrow-btn{width:12px;right:12px;top:12px;gap:10px}.settings .font{margin-block:24px;max-height:40px;justify-content:space-between;align-items:center}.settings .font>h2{font-size:13px;letter-spacing:5px}.settings .font>div{gap:16px}.settings .font>div>div{width:40px;height:40px;font-size:16px}.settings .color{margin-block:24px 51px;max-height:40px;justify-content:space-between;align-items:center}.settings .color>h2{font-size:13px;letter-spacing:5px}.settings .color>div{gap:16px}.settings .color>div>div{width:40px;height:40px;justify-content:center;align-items:center}.settings .apply-btn{width:140px;height:54px;font-size:16px;left:calc(50% - 70px);bottom:-27px}}@media (min-width: 400px) and (max-width: 769px){.settings{width:540px;height:464px;padding-inline:36px;border-radius:25px}.settings .setting{font-size:24px;margin-block:33px 32px;max-height:35px}.settings .hr.first{width:540px;left:-36px}.settings .time{flex-direction:column;margin-block:32px 24px;height:103px;gap:16px}.settings .time>h2{font-size:13px;letter-spacing:5px}.settings .time>div{justify-content:space-between}.settings .time>div>div{flex-direction:column;gap:8px}.settings .time>div>div>p{font-size:12px}.settings .time>div>div>div input{width:140px;height:48px;border-radius:10px;padding-inline:16px 62px;font-size:13px;letter-spacing:5px}.settings .time>div>div>div .arrow-btn{width:12px;right:12px;top:12px;gap:10px}.settings .font{margin-block:24px;max-height:40px;justify-content:space-between;align-items:center}.settings .font>h2{font-size:13px;letter-spacing:5px}.settings .font>div{gap:16px}.settings .font>div>div{width:40px;height:40px;font-size:16px}.settings .color{margin-block:24px 51px;max-height:40px;justify-content:space-between;align-items:center}.settings .color>h2{font-size:13px;letter-spacing:5px}.settings .color>div{gap:16px}.settings .color>div>div{width:40px;height:40px;justify-content:center;align-items:center}.settings .apply-btn{width:140px;height:54px;font-size:16px;left:calc(50% - 70px);bottom:-27px}}@media (max-width: 399px){.settings{width:327px;max-height:600px;padding-inline:23px;border-radius:15px}.settings .setting{font-size:20px;margin-block:18px 16px;max-height:35px}.settings .hr.first{width:327px;left:-23px}.settings .time{flex-direction:column;margin-block:32px 24px;gap:16px}.settings .time>h2{font-size:13px;letter-spacing:5px;text-align:center}.settings .time>div{justify-content:space-between;flex-direction:column;gap:8px}.settings .time>div>div{align-items:center;justify-content:space-between}.settings .time>div>div>p{font-size:12px}.settings .time>div>div>div input{width:140px;height:40px;border-radius:10px;padding-inline:16px 62px;font-size:13px;letter-spacing:5px}.settings .time>div>div>div .arrow-btn{width:12px;right:12px;top:8px;gap:10px}.settings .font{margin-block:24px;max-height:70px;justify-content:space-between;align-items:center;flex-direction:column;gap:16px}.settings .font>h2{font-size:11px;letter-spacing:4.2px}.settings .font>div{gap:16px}.settings .font>div>div{width:40px;height:40px;font-size:16px}.settings .color{margin-block:24px 59px;max-height:70px;justify-content:space-between;align-items:center;flex-direction:column;gap:16px}.settings .color>h2{font-size:13px;letter-spacing:5px}.settings .color>div{gap:16px}.settings .color>div>div{width:40px;height:40px;justify-content:center;align-items:center}.settings .apply-btn{width:140px;height:54px;font-size:16px;left:calc(50% - 70px);bottom:-27px}}