*{margin:0;padding:0;box-sizing:border-box}body{font-family:monospace;background:#1a1a1a;color:#e0e0e0;margin:0 1rem;line-height:1.2}pre{margin:1rem 0}.binding-label{font-size:12px;font-weight:700;text-align:left;line-height:1.1;padding:2px 4px;text-shadow:1px 1px 1px rgba(0,0,0,.8);width:100%;box-sizing:content-box;padding-right:.75rem;--inactive-background: #3a3a3a;--executed-root-binding-background: #622}.binding-label.binding-label__prefix{color:#eee;--inactive-text-color: #eee;--executed-text-color: #efe;--executed-background: #084}.binding-label.binding-label__root{color:#f88;--inactive-text-color: #f88;--executed-text-color: #f88;--executed-background: var(--executed-root-binding-background)}.activePrefix{background:var(--executed-root-binding-background);transition:background .5s ease-out}.upper .binding-label:first-child{border-top-left-radius:.25rem}.lower .binding-label:last-child{border-bottom-left-radius:.25rem}.binding-label.executed{animation:keycap-executed .5s ease-out forwards}.binding-label.deactivating{animation:keycap-deactivate 1s ease-in forwards}@keyframes keycap-executed{0%{background-color:var(--inactive-background);color:var(--inactive-text-color)}to{background-color:var(--executed-background);color:var(--executed-text-color)}}@keyframes keycap-deactivate{0%{background-color:var(--executed-background);color:var(--executed-text-color)}75%{background-color:var(--executed-background);color:var(--executed-text-color)}to{background-color:var(--inactive-background);color:var(--inactive-text-color)}}.modifiers--Control,.modifiers--Shift,.modifiers--Meta{width:.5rem;height:.5rem;display:inline-block;border-radius:2px;margin-right:.25rem}.modifiers--Control{background-color:#8ff}.modifiers--Shift{background-color:#ff8}.modifiers--Meta{background-color:#f8f}.keycap{height:50%;display:flex}.keycap.lower{border-top:1px solid rgba(255,255,255,.05);border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.keycap.lower:only-child{border-top:none}.keycap.lower .key-actions__container{align-items:flex-end}.keycap.lower .keycap-label{bottom:0}.keycap.lower:only-child{height:100%}.keycap.upper{border-top-right-radius:.25rem;border-top-left-radius:.25rem}.keycap.upper .keycap-label{top:0}.key-actions__container{display:flex;white-space:nowrap;overflow:scroll;mask:linear-gradient(to right,black calc(100% - 3rem),transparent calc(100% - 1rem));width:100%;-ms-overflow-style:none;scrollbar-width:none}.key-actions__container::-webkit-scrollbar{display:none}.key-actions{max-height:100%}.keycap-label{font-size:20px;color:#666;font-weight:700;position:absolute;right:0;margin:.5rem;line-height:1;text-shadow:1px 1px 1px rgba(0,0,0,.5)}@media screen and (max-width:1024px){.keycap-label{font-size:13px}}.key{flex:1;background-color:#3a3a3a;border-radius:.5rem;padding:4px;display:flex;min-width:1rem;aspect-ratio:1;flex-direction:column;position:relative;box-shadow:0 2px 4px #00000040,inset 0 4px #80808040,inset -4px 0 #00000040,inset 0 -4px #00000040,inset 4px 0 #80808040}.key.active{animation:key-activate .1s ease-out forwards;transform:translateY(1px)}.key.deactivating{animation:key-deactivate .25s ease-out forwards}@media screen and (max-width:1024px){.key{box-shadow:0 1px 2px #00000040,inset 0 2px #80808040,inset -2px 0 #00000040,inset 0 -2px #00000040,inset 2px 0 #80808040}}@keyframes key-activate{0%{background-color:#3a3a3a}to{background-color:#4a4a4a}}@keyframes key-deactivate{0%{background-color:#4a4a4a}to{background-color:#3a3a3a}}.key-nullkey{opacity:0;cursor:initial}.key-backspace,.key-tab{flex:1.5;aspect-ratio:1.5}.key-capslock{flex:1.75;aspect-ratio:1.75}.key-enter{flex:2;aspect-ratio:2}.key-lshift{flex:2.25;aspect-ratio:2.25}.key-rshift{flex:2.5;aspect-ratio:2.25}.key-lcontrol,.key-lsystem,.key-lalt{flex:1.5;aspect-ratio:1.5}.key-spacebar{flex:6;aspect-ratio:6}.keyboard-row{display:flex;justify-content:center;margin-bottom:.5rem;gap:.25%}@media screen and (max-width:1024px){.keyboard-row{gap:.25%}}.keyboard{margin:1rem 0}.shift{color:#ff8}.control{color:#8ff}.meta{color:#f8f}.legend{display:flex;justify-content:center;gap:30px;margin-top:20px;font-size:15px}.legend-item{display:flex;align-items:center;gap:8px;font-weight:700}.legend-color{width:12px;height:12px;border-radius:2px}.modal-overlay{position:fixed;inset:0;background-color:#00000040;display:flex;align-items:center;justify-content:center;z-index:9999}.modal-content{background-color:#222;border-radius:.5rem;padding:2rem;min-width:30vw;max-width:90vw;max-height:90vh;overflow:auto;box-shadow:0 1rem 3rem .5rem #000000bf;border:2px solid #111}.button-group{margin-top:1rem}button+button{margin-left:.5rem}button{background:transparent;border:2px solid #6aa;font-size:15px;color:#ccc;border-radius:.25rem;padding:.5rem;font-weight:700;transition:all .2s ease}button:hover{background:#6aa;color:#111;cursor:pointer}textarea{background:#444;border:1px solid #111;border-radius:.25rem;margin:0 0 1rem;width:100%;padding:.5rem;color:#eee;overflow:auto}h3,h4{margin-bottom:1rem}pre{padding:.5rem;margin:0 0 1rem;border-radius:.25rem;background:#333}.top-bar{margin:1rem 0;display:flex;align-items:center}.top-bar__actions{margin-left:2rem}.button-group{display:flex;justify-content:space-between}.error-banner{position:fixed;background-color:tomato;color:#300;bottom:0;left:0;width:100%;padding:.5rem 1rem;font-weight:700}.error-banner button{color:#300;background-color:#f88;border:2px solid black;margin-left:1rem;width:2rem;height:2rem}.error-banner button:hover{background-color:#300;color:#f88}