#app[data-v-5b30b57d]{height:100%}.piano-key[data-v-3772a38e]{display:flex;flex-direction:column;align-items:center;width:50px;height:40%;padding-bottom:10px;min-height:200px;background:#fff;box-shadow:1px 1px 3px rgba(0,0,0,.5);border-radius:0 0 2px 2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.piano-key .key-top[data-v-3772a38e]{flex:1}.piano-key .key-bottom[data-v-3772a38e]{flex:1;display:flex;align-items:flex-end}.piano-key.active[data-v-3772a38e]{background:linear-gradient(180deg,#fff,#f1f1f1)}.piano-key .key-text[data-v-3772a38e]{width:100%;text-align:center;color:#222}.piano-key .simple-sign[data-v-3772a38e]{position:relative;text-align:center}.piano-key .simple-sign .sign-dot[data-v-3772a38e]{height:4px;line-height:0;position:relative}.piano-key .simple-sign .sign-dot[data-v-3772a38e]:after{content:".";width:100%;height:1px;position:absolute;left:0;top:0;line-height:0}.piano-key.dark[data-v-3772a38e]{width:66%;height:50%;min-height:100px;background:#000;transform:translateX(72.5%);font-size:12px}.piano-key.dark.active[data-v-3772a38e]{background:linear-gradient(180deg,#000,rgba(0,0,0,.75))}.piano-key.dark .key-text[data-v-3772a38e]{color:#fff}.home[data-v-aa8d6cfc]{height:100%;min-height:350px;padding:0 20px;background:#6884a9;position:relative}.home .piano-container[data-v-aa8d6cfc]{display:flex;justify-content:center}.home .tools-container[data-v-aa8d6cfc]{margin-top:80px;text-align:center}.home .tools-container .submit-btn[data-v-aa8d6cfc]{margin-left:20px}.home .home-bottom[data-v-aa8d6cfc]{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:12px 0}*{padding:0;margin:0;box-sizing:border-box}body,html{height:100%;font-size:14px}a{text-decoration:none;color:inherit}a:active,a:hover{opacity:.8}