html,body{margin:0;padding:0;font-family:Poppins,Arial,sans-serif;background-color:#4e50bf}.hidden{display:none}qmates-timer-app,landing-page,timer-page{display:block;width:100%;height:100%}.container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;flex-direction:column}.row{display:flex;justify-content:center;align-items:center;flex-direction:row}.landing-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100vh;padding-left:4rem;gap:.25rem;-webkit-user-select:none;user-select:none}.landing-container h1{color:#fff;font-size:4rem;margin:0;font-weight:700;margin-bottom:-1rem}.landing-container h2{color:#fff;font-size:1.25rem;font-weight:400;text-transform:uppercase;margin:0 0 1rem;opacity:.85;letter-spacing:.12em}.landing-container h3{color:#fff;font-size:1.75rem;margin:0;display:flex;align-items:center;gap:.1rem;font-weight:400;margin-top:1.5rem}#join-room-form{display:flex;flex-direction:column;align-items:center}#join-room-form input[type=text]{background:transparent;border:none;border-bottom:2px solid #ffffff;font-size:inherit;font-family:inherit;color:#ffd54f;text-align:left;padding:0 .25rem;width:30rem;outline:none;transition:border-color .2s;-webkit-user-select:text;user-select:text}#join-room-form input[type=text]:focus{border-bottom-color:#ffd54f}#join-room-form input[type=text]::placeholder{color:#ffd54f;opacity:.6}@media(max-width:850px){#join-room-form input[type=text]{width:16rem}}@media(max-width:600px){.landing-container{padding-left:1.5rem}.landing-container h1{font-size:2.5rem}.landing-container h2{font-size:1rem}.landing-container h3{font-size:1.25rem;flex-wrap:wrap}#join-room-form input[type=text]{width:9rem}}@media(max-width:375px){#join-room-form input[type=text]{width:6rem}}.arrow-button{background:transparent;border:none;color:#ffd54f;font-size:2rem;cursor:pointer;padding:0;margin-left:.5rem;transition:transform .2s,color .2s}.arrow-button:hover{transform:translate(.25rem);color:#fff}timer-display{color:#e2e3f1;font-size:5.5rem;-webkit-user-select:none;user-select:none}stop-timer-button,toggle-pause-button{background-color:#2e3080;color:#a3b2fd;border:5px solid #6668c7;width:5rem;height:5rem;font-size:2rem;border-radius:50%;margin:1rem;transition:transform .2s;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;line-height:5rem;text-align:center}:is(stop-timer-button,toggle-pause-button):hover{border-color:#8a8dff;color:#fff;background-color:#252770;transform:scale(1.1);transition:transform .2s}:is(stop-timer-button,toggle-pause-button).playing{text-indent:.3rem}start-timer-button{background-color:#3e42a2;color:#e2e3f1;border:5px solid #a3b2fd;display:flex;justify-content:center;align-items:center;margin:1.5rem;transition:transform .2s;cursor:pointer;-webkit-user-select:none;user-select:none}start-timer-button:hover{border-color:#ededf8;color:#fff;transform:scale(1.2);transition:transform .2s}start-timer-button.small{width:8rem;height:8rem;font-size:3.5rem;border-radius:5rem}start-timer-button.medium{width:10rem;height:10rem;font-size:4.3rem;border-radius:6rem}start-timer-button.large{width:13rem;height:13rem;font-size:5.5rem;border-radius:9rem}exit-room-button{width:3rem;height:3rem;background-color:#3e42a2;color:#a3b2fd;border:2px solid #6668c7;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}exit-room-button:hover{background-color:#2e3080;border-color:#8a8dff;color:#fff;transform:scale(1.1)}top-bar{position:fixed;top:0;left:0;right:0;z-index:1000;display:block;padding:1rem}.top-bar-content{display:flex;justify-content:space-between;align-items:center;width:100%}.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:.75rem}user-profile{display:block}connected-users{display:block}.connected-users{display:flex;gap:.5rem;align-items:center}.connected-user{cursor:default;transition:transform .2s}.connected-user:hover{transform:scale(1.15)}.connected-user .avatar-circle{width:1.75rem;height:1.75rem;min-width:1.75rem;min-height:1.75rem;font-size:.875rem;border:2px solid #6668c7;box-shadow:0 2px 4px #0003}.user-profile{display:flex;align-items:center;gap:.75rem;background-color:#3e42a2;border:2px solid #6668c7;border-radius:2rem;padding:.5rem .75rem .5rem .6rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.user-profile:hover{background-color:#2e3080;border-color:#8a8dff;transform:scale(1.05)}.user-profile.editing{cursor:default;background-color:#2e3080;border-color:#8a8dff}.user-profile.editing:hover{transform:none}.user-profile.disabled{cursor:not-allowed}.user-profile.disabled:hover{background-color:#3e42a2;border-color:#6668c7;transform:none}.user-avatar{width:2rem;height:2rem;min-width:2rem;min-height:2rem;border-radius:50%;background:linear-gradient(135deg,#6668c7,#8a8dff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0;-webkit-user-select:none;user-select:none;line-height:1;text-align:center;aspect-ratio:1}.avatar-circle{width:2rem;height:2rem;min-width:2rem;min-height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;flex-shrink:0;-webkit-user-select:none;user-select:none;line-height:1;text-align:center;aspect-ratio:1}.user-name{color:#e2e3f1;font-size:1rem;font-weight:500;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-name-input{background-color:#252770;border:1px solid #a3b2fd;border-radius:.5rem;color:#e2e3f1;font-size:1rem;padding:.4rem .6rem;outline:none;width:12rem;transition:border-color .2s}.user-name-input:focus{border-color:#ededf8}.user-name-input::placeholder{color:#a3b2fd}completed-timer-display{color:#fff;font-size:4rem}