#keyboard-layout{display:flex;flex-direction:column;position:relative;padding:10px;margin:10px;border-radius:10px;background-color:#d8dae6}#keyboard-layout .row{display:flex;flex-direction:row}#keyboard-layout .row .section-left{display:flex;flex-direction:row;flex:.65}#keyboard-layout .row .section-padding{flex:.03}#keyboard-layout .row .section-middle{display:flex;flex-direction:row;flex:.15}#keyboard-layout .row .section-right{display:flex;flex-direction:row;flex:.2}#keyboard-layout .row .spacer{flex:.4}#keyboard-layout .row .spacer1{flex:1}#keyboard-layout .row .btn{box-sizing:border-box;flex:1;height:2.8vw;text-align:center;display:flex;align-items:center;justify-content:center;font-size:.9vw;font-weight:700;color:#666;margin:.1vw;background-color:#fff;border-radius:10%;overflow:hidden}#keyboard-layout .row .btn.smalltext{font-size:.7vw!important}#keyboard-layout .row .btn:not([data-keycode]){background:red}#keyboard-layout .row .btn.event-keydown{background-color:#a8e5ff}#keyboard-layout .row .btn.event-keyup{background-color:#ffdbdb}#keyboard-layout .row span.smalltext{font-size:.9vw}#keyboard-layout .row .btn-2{flex:2}#keyboard-layout .row .btn-5{flex:5}#keypress-graph{display:flex;flex-direction:row;margin-bottom:1em}#keypress-graph .timing{font-weight:700;padding:0 .5em}#keypress-graph .graph-zone{flex:1;position:relative}#keypress-graph .graph-zone svg#rt-bar{width:100%;height:1.6em}#keypress-graph .graph-zone svg#rt-bar .event-bar-log{opacity:.9;stroke:none}#keypress-graph .graph-zone svg#rt-bar .event-bar-log.event-bar-log-keydown{fill:#5238ff}#keypress-graph .graph-zone svg#rt-bar .event-bar-log.event-bar-log-keyup{fill:#f03d3d}#keypress-graph .graph-zone svg#rt-bar .event-bar-mark{fill:#888}#keypress-graph .graph-zone #mic-audio-zone{width:100%;position:relative}#keypress-graph .graph-zone #mic-audio-zone #mic-audio-canvas{width:100%;height:150px}#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-left{left:0}#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-right{right:0}#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-left,#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-right{position:absolute;top:0;height:150px;display:flex;align-items:center;justify-content:center;background-color:#3332;text-align:center;padding:0 1.5em;font-size:.3em;-webkit-user-select:none;user-select:none;opacity:.3}#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-left:hover,#keypress-graph .graph-zone #mic-audio-zone #mic-audio-adjustment-right:hover{background-color:#3334}#keypress-graph .graph-zone #mic-audio-zone #cursor-position-overlay{position:absolute;top:0;left:0;height:150px;width:100%}#keypress-graph .graph-zone #mic-audio-zone #cursor-position-overlay .vertical-line{stroke:#f44;stroke-width:.0001;opacity:.5}#keypress-graph .graph-zone #mic-audio-zone #cursor-position-overlay-text{position:absolute;top:0;left:2em;-webkit-user-select:none;user-select:none;pointer-events:none}.button-reset{font-size:1.05em;margin:1em}.event-list{flex:1;overflow-y:auto}.event-list table{border-collapse:separate;border-spacing:0;border:none}.event-list td,.event-list th{border:1px solid #444}.event-list td,.event-list th{padding:.2em}.event-list th{background-color:#fcfcfc;border-bottom:1px dashed #444;position:sticky;top:0}.event-list .event-table{width:100%;max-width:800px;margin:1em auto}.event-list .event-table th:nth-child(1){width:6em}.event-list .event-table th:nth-child(2){width:10em}.event-list .event-table tr.type-keydown{background-color:#a8e5ff}.event-list .event-table tr.type-keyup{background-color:#ffdbdb}.event-list #scroll-target{width:0;height:0}html,body{background:#20262e;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;width:100%;height:100%;padding:0;margin:0;overflow:hidden}#app{margin:auto;max-width:1200px;width:100%;height:100%;display:flex;flex-direction:column}.header{display:flex;flex-direction:row;align-items:center;margin-bottom:20px}.header .keyboard-icon{width:40px;height:40px;margin-right:10px}.header .title{font-size:30px;font-weight:700;display:inline-block}.header .author{flex:1;text-align:right;font-style:italic;color:#666}.header .author a,.header .author a:active{color:#f43}.container{background:#fcfcfc;border-radius:1em;margin:1em;padding:1em 1.5em;flex:1;height:0;display:flex;flex-direction:column}h2{font-weight:700;margin-bottom:15px}.nonemphasis{font-style:italic;font-weight:lighter;color:#bbb}