html,body.mx-app{margin:0;height:100%;overflow:hidden;background:#111}body.mx-app{display:flex;flex-direction:column;font-family:monospace}.mx-hamburger{position:fixed;top:8px;left:8px;z-index:30;width:40px;height:40px;font-size:18px;background:#262842;color:#edebf5;border:1px solid #565a82;border-radius:4px;cursor:pointer}.mx-toolbar{display:none;flex-direction:column;align-items:stretch;gap:10px;position:fixed;inset:0 0 auto;z-index:20;padding:56px 16px 16px;background:#1a1b2e;border-bottom:2px solid #43456a;font-family:monospace;font-size:14px;color:#edebf5;max-height:100%;overflow-y:auto;box-sizing:border-box}.mx-toolbar.mx-open{display:flex}.mx-toolbar .mx-field{display:flex;align-items:center;gap:6px}.mx-toolbar select,.mx-toolbar button,.mx-toolbar .mx-home{font-family:monospace;font-size:13px;background:#262842;color:#edebf5;border:1px solid #565a82;padding:6px 8px;cursor:pointer}.mx-toolbar .mx-home{display:block;text-align:center;text-decoration:none;box-sizing:border-box}.mx-toolbar .mx-volume{width:90px}.mx-toolbar .mx-status{color:#8a8;font-size:12px;margin-top:auto}.mx-main{flex:1;min-height:0;display:flex;flex-direction:column}.mx-canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.mx-canvas-wrap canvas{display:block;image-rendering:pixelated}@media(min-width:700px){body.mx-app{flex-direction:row}.mx-hamburger{display:none}.mx-toolbar{display:flex!important;position:static;inset:auto;order:1;width:220px;flex-shrink:0;height:100%;padding:16px;border-bottom:none;border-right:2px solid #43456a}.mx-main{order:2}}.mx-vkb{gap:4px;padding:10px;background:#16171f;border-top:2px solid #43456a;-webkit-user-select:none;user-select:none;touch-action:none}.mx-vkb-flex{display:flex;flex-direction:column}.mx-vkb-grid{display:grid}.mx-vkb-row{display:flex;gap:4px}.mx-vkb[hidden]{display:none}.mx-vkb-key{min-width:0;min-height:0;padding:4px 2px;font-family:monospace;font-weight:700;font-size:11px;line-height:1.25;white-space:pre-line;color:#e8e8ea;background:#3a3b42;border:none;border-radius:5px;box-shadow:inset 0 2px #ffffff1f,inset 0 -3px #00000059,0 2px 2px #0006;display:flex;flex-direction:column;justify-content:center;gap:1px}.mx-vkb-top{display:flex;justify-content:space-between;font-size:7px;font-weight:400;line-height:1;min-height:8px}.mx-vkb-top span:empty:not(.mx-vkb-swatch){visibility:hidden}.mx-vkb-swatch{width:7px;height:7px;border-radius:2px;align-self:center;box-shadow:0 0 0 1px #0006}.mx-vkb-main{font-size:13px}.mx-vkb-bottom{font-size:7px;font-weight:400;color:#b8b8c0;line-height:1;min-height:8px}.mx-vkb-bottom:empty{visibility:hidden}.mx-vkb-key:active{box-shadow:inset 0 2px 4px #00000080;transform:translateY(1px)}.mx-vkb-locked{box-shadow:inset 0 0 0 2px #7fb8ae,inset 0 2px 4px #00000080}.mx-vkb-green{background:#3c8a52}.mx-vkb-red{background:#b0392f}.mx-vkb-blue{background:#2f6fa8}.mx-vkb-zx8x{background:#1a1a1a;padding:10px 8px}.mx-vkb-zx8x .mx-vkb-key{background:#e8e4d8;box-shadow:inset 0 1px #ffffff80,0 2px 2px #0009}.mx-vkb-zx8x .mx-vkb-key:active{box-shadow:inset 0 1px 3px #0006}.mx-vkb-zx8x .mx-vkb-key{color:#1a1a1a}.mx-vkb-zx8x .mx-vkb-main{font-size:15px;color:#1a1a1a}.mx-vkb-zx8x .mx-vkb-top,.mx-vkb-zx8x .mx-vkb-bottom{color:#a03030}