.piano-keyboard{position:relative;height:100%;width:100%}.white-note{display:flex;justify-content:center;float:left;position:relative;cursor:pointer;color:#000;height:98%;border-radius:0 0 5px 5px;box-shadow:0 0 #fffc inset,-2px -5px 3px #ccc inset,0 0 3px #00000080}.white-note-pressed{box-shadow:2px 0 3px #0003 inset,-5px -1px 20px #0003 inset,0 0 3px #00000080}.black-note{display:flex;align-items:flex-end;justify-content:center;position:absolute;cursor:pointer;height:65%;width:65%;left:68%;z-index:1;color:#fff;border-radius:0 0 3px 3px;box-shadow:-1px -1px 2px #fff3 inset,0 -5px 2px #00000080 inset,0 2px 4px #00000080}.black-note-pressed{box-shadow:-1px -1px 2px #fff3 inset,0 -1px 2px #0003 inset,0 1px 2px #0003}.key-group{align-self:flex-end;display:flex;flex-direction:column;align-items:center;margin-bottom:.8vw;font-size:1.2vw}.key-text{margin-top:.8vw}.key-text-on-black-note{margin:1vw 0 .8vw}.key-text-vertical{transform:rotate(-90deg)}.key-input{text-align:center;width:2em;color:inherit;font-size:1vw}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h2[data-v-e7a27076]{text-align:center;color:#fff;padding:10px;margin-bottom:200px}.step[data-v-e7a27076]{text-align:center;height:400px;display:flex;align-items:center;justify-content:center;flex-direction:column}.serrure[data-v-e7a27076]{max-height:400px}.ravenclaw[data-v-e7a27076]{max-height:200px}.inputStep1[data-v-e7a27076]{display:block;transition:.2s;font-size:1rem;color:#9b9b9b}.form__group[data-v-e7a27076]{position:relative;padding:15px 0 0;margin-top:10px;width:50%}.form__field[data-v-e7a27076]{font-family:inherit;width:100%;border:0;border-bottom:2px solid #9b9b9b;outline:0;font-size:1.3rem;color:#fff;padding:7px 0;background:transparent;transition:border-color .2s}.form__field[data-v-e7a27076]::placeholder{color:transparent}.form__field:placeholder-shown~.form__label[data-v-e7a27076]{font-size:1.3rem;cursor:text;top:20px}.form__label[data-v-e7a27076]{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:#9b9b9b}.form__field[data-v-e7a27076]:focus{padding-bottom:6px;font-weight:700;border-width:3px;border-image:linear-gradient(to right,#11998e,#38ef7d);border-image-slice:1}.form__field:focus~.form__label[data-v-e7a27076]{position:absolute;top:0;display:block;transition:.2s;font-size:1rem;color:#11998e;font-weight:700}.form__field[data-v-e7a27076]:required,.form__field[data-v-e7a27076]:invalid{box-shadow:none}.content[data-v-e747e4b3]{display:flex;align-items:center;justify-content:center}.indice[data-v-e747e4b3]{width:1000px;height:100vh}:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;position:relative;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100vh;margin:0 auto;font-weight:400;background:url(/assets/background-210f5ae2.png);background-size:cover}