html{height:100%;font-size:10px}body,ul,li{margin:0;padding:0}.page{display:flex;flex-direction:column;height:100%;font-family:sans-serif;font-size:2rem}.section{padding:0 1rem}.section_in{max-width:84.5rem;margin:0 auto}
.header{padding:3rem 2rem}.header__title{text-align:center}
.footer{padding:2rem 0}.footer__note{text-align:center}
.main{flex-grow:1}
.keyboard{display:flex;flex-direction:column;justify-content:center;width:83.6rem;height:100%}.keyboard__output{margin-bottom:3rem}
.output{height:10rem;font-size:1.6rem}
.key-list{display:flex;flex-wrap:wrap;row-gap:1rem;-moz-column-gap:.6rem;column-gap:.6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.key{display:flex;justify-content:center;align-items:center;width:5rem;height:5rem;font-weight:500;color:#fff;background-color:#3a424e;border-radius:3px;cursor:pointer;transition:background-color .1s,transition}.key_mod-fn{background-color:#000}.key_mod-size{width:10.6rem}.key_mod2-size{width:38.6rem}.key:hover,.key_state-down{background-color:#5571ee}.key_state-down{transform:scale(0.9)}