:root{font-size:16px;--color-primary: #3674b5;--color-on-primary: #fefefe;--color-background: #fefefe;--color-on-background: #3674b5;--color-surface: #101010;--color-on-surface: #fefefe;--color-text: #101010;--color-on-text: #fefefe}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%}section[data-v-7c5a4e7d]{position:relative}.container[data-v-7c5a4e7d]{width:fit-content;height:fit-content;margin:auto;position:absolute;top:0;right:0;bottom:0;left:0}.section-title[data-v-7c5a4e7d]{padding:20px 0;text-align:center}.types-box[data-v-7c5a4e7d]{padding:20px 0;width:fit-content;margin-inline:auto;display:flex;gap:1rem}.types-box>button[data-v-7c5a4e7d]{width:150px;height:150px;font-size:2rem;color:var(--color-on-primary);background-color:var(--color-primary);border:none;border-radius:15px;cursor:pointer}.types-box>button[data-selected=true][data-v-7c5a4e7d]{color:var(--color-primary);background-color:var(--color-secondary);border:solid 5px var(--color-primary)}.container[data-v-668b3e7d]{padding:20px;height:100%;display:grid;grid-template-rows:auto 1fr;gap:10px}.section-title[data-v-668b3e7d]{text-align:center}.volume-controller[data-v-668b3e7d]{height:100%;display:flex;justify-content:center}.volume[data-v-668b3e7d]{width:50px;cursor:pointer;writing-mode:vertical-lr;direction:rtl}.volume-percent[data-v-668b3e7d]{text-align:center;font-size:1.2rem;margin:0}.container[data-v-8dd6846e]{width:100%;overflow-x:scroll;scroll-snap-type:x mandatory;--key-width: 40px;--key-height: 250px}.keyboard[data-v-8dd6846e]{width:fit-content;display:flex;position:relative;-webkit-user-select:none;user-select:none}.keyboard>div[data-v-8dd6846e]{position:relative;display:flex;scroll-snap-align:center;cursor:pointer}.keyboard>div[data-active=false][data-v-8dd6846e]{opacity:.3;cursor:default}.keyboard>div[data-v-8dd6846e]:first-of-type{margin-left:calc(var(--key-width) * 7 * 3)}.keyboard>div[data-v-8dd6846e]:last-of-type{margin-right:calc(var(--key-width) * 7 * 3)}.keyboard .key[data-v-8dd6846e]{padding:5px;height:var(--key-height);width:calc(var(--key-width) * 1.5);background-color:#fff;color:var(--color-text);border:1px solid var(--color-surface);display:flex;flex-direction:column;justify-content:end;align-items:center}.keyboard .key .shortcut[data-v-8dd6846e]{--size: 1.5rem;width:var(--size);height:var(--size);font-size:1rem;color:var(--color-on-primary);font-weight:700;background-color:var(--color-primary);border-radius:calc(infinity * 1px);line-height:var(--size);text-align:center}.keyboard .key .shortcut[data-show=false][data-v-8dd6846e]{opacity:0}.keyboard .key.Cs .shortcut[data-v-8dd6846e],.keyboard .key.Ds .shortcut[data-v-8dd6846e],.keyboard .key.Fs .shortcut[data-v-8dd6846e],.keyboard .key.Gs .shortcut[data-v-8dd6846e],.keyboard .key.As .shortcut[data-v-8dd6846e]{color:var(--color-primary);background-color:var(--color-on-primary)}.keyboard .key.Cs[data-v-8dd6846e],.keyboard .key.Ds[data-v-8dd6846e],.keyboard .key.Fs[data-v-8dd6846e],.keyboard .key.Gs[data-v-8dd6846e],.keyboard .key.As[data-v-8dd6846e]{height:calc(var(--key-height) * .5);width:var(--key-width);color:var(--color-on-surface);border-right:solid 1px var(--color-surface);border-block:solid 1px var(--color-surface);background-color:var(--color-surface);position:absolute;top:0}.keyboard .key.Cs[data-v-8dd6846e]{left:calc(var(--key-width) * 1)}.keyboard .key.Ds[data-v-8dd6846e]{left:calc(var(--key-width) * 2.5)}.keyboard .key.Fs[data-v-8dd6846e]{left:calc(var(--key-width) * 5.5)}.keyboard .key.Gs[data-v-8dd6846e]{left:calc(var(--key-width) * 7)}.keyboard .key.As[data-v-8dd6846e]{left:calc(var(--key-width) * 8.5)}.layout[data-v-b5b767b6]{height:100%;width:100%;display:grid;grid-template-columns:7fr 3fr;grid-template-rows:3fr 2fr}.keyboard-section[data-v-b5b767b6]{grid-column:1 / -1}