.training-input-visualizer{--input-edge:#f7fafcd1;--input-fill:#0f171d5c;--input-active:#f3ce7c;color:#f7fafc;isolation:isolate;filter:drop-shadow(0 1px 1px #09121899)}.training-input-visualizer .input-mouse{width:54px;height:84px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;flex:none;display:block;overflow:visible}.training-input-visualizer .input-mouse path,.training-input-visualizer .input-mouse rect{fill:none;stroke:var(--input-edge);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;transition:fill 90ms ease-out,stroke 90ms ease-out}.training-input-visualizer .input-mouse .input-mouse-shell{fill:var(--input-fill);stroke-width:3px}.training-input-visualizer .input-mouse .input-mouse-left,.training-input-visualizer .input-mouse .input-mouse-right{fill:#f0f6fa09}.training-input-visualizer .input-mouse .input-mouse-wheel{fill:#f0f6fa1a}.training-input-visualizer .input-mouse [data-pressed=true],.training-input-visualizer .input-mouse .is-pressed{fill:var(--input-active);stroke:#fff4d6;transition:none}.training-input-visualizer .input-mouse[data-moving=true] .input-mouse-shell{stroke:#fff;fill:#39464e80}.training-input-visualizer .input-mouse .input-mouse-motion{fill:#f7fafc;stroke:none;opacity:.3;transition:opacity .1s}.training-input-visualizer .input-mouse[data-moving=true] .input-mouse-motion{fill:var(--input-active);opacity:1}.training-input-visualizer .input-keyboard{transform-origin:0 100%;grid-template-rows:repeat(3,29px);grid-template-columns:46px repeat(3,32px);gap:4px;display:grid;transform:skew(-9deg)}.training-input-visualizer .input-keyboard kbd{border:1px solid var(--input-edge);background:var(--input-fill);color:#f7fafc;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 2px #09121888;text-overflow:ellipsis;white-space:nowrap;border-radius:3px;place-items:center;min-width:0;padding:0 2px;font:600 10px/1 system-ui,sans-serif;transition:background-color 90ms ease-out,color 90ms ease-out;display:grid;overflow:hidden;box-shadow:inset 0 -2px #ffffff0a}.training-input-visualizer .input-keyboard kbd span{text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden;transform:skew(9deg)}.training-input-visualizer .input-keyboard kbd.is-pressed{background:var(--input-active);color:#182127;text-shadow:none;border-color:#fff4d6;transition:none;box-shadow:inset 0 -2px #8f6a3022}@media (max-width:760px){.training-input-visualizer .input-keyboard{grid-template-rows:repeat(3,26px);grid-template-columns:40px repeat(3,29px);gap:3px}.training-input-visualizer .input-mouse{width:48px;height:76px}}@media (prefers-reduced-motion:reduce){.training-input-visualizer *{transition:none!important}}