.ptci5KHrOy0bEhKCsUX7 {
    display: flex;
}

.hsHAqe4gPijrMcIz7XwP {
    flex-direction: column;
}

._XIsJWLYpyRgeD_zuY_b {
    flex-direction: row;
}

.aFzy21BgSvpG0q_IYOQy {
    flex: 1;
}

.ccKOeNHUS_3CDQPXWRJv {
    justify-content: center;
}

.V4bx4zKZRLeRK0P89B1q {
    justify-content: flex-start;
}

.YWt41KKWWxsa2pJsg_Nb {
    justify-content: flex-end;
}

.NyBwUyTrUZ_qSlvHoI36 {
    justify-content: space-between;
}

.FcIH5MNEM9EYHJWj9J0Q {
    align-items: center;
}

.cI9zWsa2ToVnygBlVc7H {
    align-items: flex-start;
}

.oIzo6F_g3_8Fbvh401Hn {
    align-items: flex-end;
}

.Mg7wB8Dsos3FzV_JWBTu {
    align-items: stretch;
}

.IHbOxR8vVvQ_hwyoaYcc {
    gap: 8px;
}

.gXayjHcha4ebea394CoE {
    color: var(--color-alert-text);
}

.pofXgsqpF3OkH1WHw1MG {
    color: var(--color-success-text);
}

.Dg6Gjo6bvJpS3MuWr2p9 {
    text-decoration: line-through;
}

.JKWhfJrCk04dA9eplPoR {
    height: 100%;
}

.naGUm6v4U8MnD_aJiPrd {
    overflow: hidden;
}

.ZiihlP3IBpwibw3jylsH {
    flex-wrap: wrap;
}

.K60UaZZySzYCNT3wGHGi {
}

.Zrahn_0Qn6DaxnZwgWk3 {
    font-size: 60%;
    vertical-align: sub;
}

.Dv1PZvEZ_mna5bUv9VrL {
}

.WrPIPcDk4EjgS7kfQ3zx {
}

.ulkSywAcVgsIDd46OmJm {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.WEFuWt8WP1eR5i_u3wys {
    --key-border-width: 1px;
    --key-border-color: black;
    --key-background-color: white;
    --key-height: 150px;
    --key-width: 42px;

    --key-half-width: calc(var(--key-width) / 2);
    --key-sharp-height: 60%;
    --sharp-key-background-color: rgb(36, 36, 36);
    --highlight-key-background-color: rgb(219, 216, 216);
    --highlight-sharp-key-background-color: rgb(100, 100, 100);

    position: relative;
    display: flex;
    flex-direction: row;
    height: var(--key-height);
    width: calc(var(--key-width) * 7);
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
}

.JG3jYc6cW_3_qF8njhiA {
    --key-index: 0;
    background-color: var(--key-background-color);

    position: absolute;
    left: calc(var(--key-index) * var(--key-width));
    border: var(--key-border-width) solid var(--key-border-color);
    border-left: none;
    height: 100%;
    top: 0;
    width: var(--key-width);

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

.JG3jYc6cW_3_qF8njhiA.W_fh5_yCA62inj5nZWDg {
    background-color: var(--highlight-key-background-color);
}

.JG3jYc6cW_3_qF8njhiA.W_fh5_yCA62inj5nZWDg.LqA4clB4fEszUP6KpRRK {
    background-color: var(--highlight-sharp-key-background-color);
}

.JG3jYc6cW_3_qF8njhiA.LqA4clB4fEszUP6KpRRK {
    background-color: var(--sharp-key-background-color);
    color: white;
    left: calc(var(--key-index) * var(--key-width) + var(--key-half-width));
    height: var(--key-sharp-height);
    top: 0;
    z-index: 2;
}

.JG3jYc6cW_3_qF8njhiA:first-child {
    border-left: var(--key-border-width) solid var(--key-border-color);
}

.Dv1PZvEZ_mna5bUv9VrL.rmiEg8lUKuYSzC4l1tqC .JG3jYc6cW_3_qF8njhiA {
    --key-shadow-color1: rgb(26 26 26 / 50%);
    --key-shadow-color2: rgb(145 144 144 / 50%);
    box-shadow: inset 1px -2px 1px 1px var(--key-shadow-color1),
        inset -1px -2px 2px 2px var(--key-shadow-color2);
    overflow: hidden;
    border-radius: 0 0 5px 5px;
    padding-bottom: 5px;
}

.Dv1PZvEZ_mna5bUv9VrL.rmiEg8lUKuYSzC4l1tqC .JG3jYc6cW_3_qF8njhiA:not(:first-child) {
    border-left: 2px solid var(--key-border-color);
}

.Dv1PZvEZ_mna5bUv9VrL.rmiEg8lUKuYSzC4l1tqC .WEFuWt8WP1eR5i_u3wys {
    background-color: var(--key-border-color);
    font-size: 1rem;
    --sharp-key-width: calc(var(--key-width) * 0.6);
    --sharp-key-spacing: calc((var(--key-width) - var(--sharp-key-width)) / 2);
}

.Dv1PZvEZ_mna5bUv9VrL.rmiEg8lUKuYSzC4l1tqC .JG3jYc6cW_3_qF8njhiA.LqA4clB4fEszUP6KpRRK {
    border-left: 3px solid var(--key-border-color);
    border-right: 3px solid var(--key-border-color);
    font-size: 0.8rem;
    left: calc(
        var(--key-index) * var(--key-width) + var(--key-half-width) + var(--sharp-key-spacing)
    );
    width: var(--sharp-key-width);
}

.gayj_ipU_YypcLl8Mbqp {
    font-size: 1.5rem;
    font-weight: bold;
}

.OhUkgNSB60ZH5WfUEMNC {
    font-size: 1rem;
    font-weight: normal;
}

.UGV60HksZX2yhFCl94SD {
    min-width: 150px;
}

.v_0TXittS5KdGykqRGO4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 200%;
    font-weight: bold;
}

.gDWPX6Pp7sjMfziDUOe8 {
    font-size: 50%;
    font-weight: normal;
}

.cHSguBI0_L3ATbaS67iA {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.CQenrYR_hofuDiBbIW_T {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    z-index: 1000;
    display: none;
    overflow: auto;
}

.CQenrYR_hofuDiBbIW_T.LdxeRnKT3Llulf_e5T13 {
    display: block;
}

.MSYUJqJbkRfWrJHE7ZXg {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.Kkea8hj0iYNNxEQDfI1u {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

:root {
    --color-text: #000;
    --color-text-secondary: #868686;
    --color-alert-text: #ff0000;
    --color-success-text: #00c200;
    --color-border: #aaaaaa;
    --color-background: #ffffff;
    --color-background-secondary: #f0f0f0;
}

body {
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: var(--color-text);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

.f-1 {
    flex: 1;
}

.w-100 {
    width: 100%;
}