.keyboard-visualizer{transform-origin:top;width:fit-content;height:fit-content;margin:0 auto;transition:transform .3s,margin-bottom .3s;display:block}@media (max-width:2000px){.keyboard-visualizer{margin-bottom:0;transform:scale(1)}}@media (max-width:1900px){.keyboard-visualizer{margin-bottom:calc(-400%*1px);transform:scale(.98)}}@media (max-width:1800px){.keyboard-visualizer{margin-bottom:calc(-800%*1px);transform:scale(.96)}}@media (max-width:1700px){.keyboard-visualizer{margin-bottom:calc(-1200%*1px);transform:scale(.94)}}@media (max-width:1600px){.keyboard-visualizer{margin-bottom:calc(-1600%*1px);transform:scale(.92)}}@media (max-width:1500px){.keyboard-visualizer{margin-bottom:calc(-2400%*1px);transform:scale(.88)}}@media (max-width:1400px){.keyboard-visualizer{margin-bottom:calc(-3200%*1px);transform:scale(.84)}}@media (max-width:1300px){.keyboard-visualizer{margin-bottom:calc(-4000%*1px);transform:scale(.8)}}@media (max-width:1200px){.keyboard-visualizer{margin-bottom:calc(-5000%*1px);transform:scale(.75)}}@media (max-height:900px){.keyboard-visualizer{margin-bottom:-40px;transform:scale(.85)}}@media (max-height:800px){.keyboard-visualizer{margin-bottom:-65px;transform:scale(.75)}}@media (max-height:700px){.keyboard-visualizer{margin-bottom:-95px;transform:scale(.65)}}@media (max-height:600px){.keyboard-visualizer{margin-bottom:-125px;transform:scale(.55)}}@media (max-height:500px){.keyboard-visualizer{margin-bottom:-155px;transform:scale(.45)}}@media (max-width:1100px){.keyboard-visualizer{display:none}}.keyboard-visualizer__header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.keyboard-visualizer__header h2{color:#fff;font-size:1.75rem;font-weight:700}.keyboard-visualizer__layout-toggle{justify-content:center;align-items:center;gap:.5rem;display:flex}.keyboard-visualizer__layout-toggle span{color:#a0a0a0;margin-right:.5rem;font-size:.875rem}.keyboard-visualizer__layout-toggle button{color:#a0a0a0;cursor:pointer;background:0 0;border:1px solid #2a2a2a;border-radius:4px;padding:4px 12px;font-family:Manrope,Inter,Helvetica,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.875rem;font-weight:600;transition:all .2s ease-out}.keyboard-visualizer__layout-toggle button.active{color:#0a0a0a;background:#fff;border-color:#fff}.keyboard-visualizer__layout-toggle button:hover:not(.active){background:#1a1a1a;border-color:#404040}.keyboard-visualizer__keys{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;flex-direction:column;gap:8px;margin:0 auto;padding:2rem;display:flex}.keyboard-visualizer__row{justify-content:flex-start;gap:8px;display:flex}.key-cap{color:#fff;-webkit-user-select:none;user-select:none;border:1px solid #ffffff1a;border-radius:4px;justify-content:center;align-items:center;height:45px;font-family:Manrope,Inter,Helvetica,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.6875rem;font-weight:700;transition:all .2s ease-out;display:flex;position:relative;overflow:hidden}.key-cap:before{content:"";pointer-events:none;background:linear-gradient(#fff3 0%,#0000 100%);height:30%;position:absolute;top:0;left:0;right:0}.key-cap:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 4px 12px}.key-cap--clickable{cursor:pointer}.key-cap--clickable:hover{filter:brightness(1.3);transform:translateY(-1px);box-shadow:0 4px 16px}.key-cap--clickable:active{filter:brightness(1.1);transform:translateY(-1px)}.key-cap--w-0-5{width:22.5px}.key-cap--w-1{width:45px}.key-cap--w-1-25{width:56.25px}.key-cap--w-1-5{width:67.5px}.key-cap--w-1-75{width:78.75px}.key-cap--w-2{width:90px}.key-cap--w-2-25{width:101.25px}.key-cap--w-2-75{width:123.75px}.key-cap--w-6-25{width:281.25px}.key-cap--spacer{visibility:hidden;pointer-events:none}.key-cap--animate-Static{animation:none}.key-cap--animate-Jelly{animation:2.5s ease-in-out infinite wooting-jelly}.key-cap--animate-Scan{animation:3s linear infinite wooting-scan}.key-cap--animate-Breath{animation:3s ease-in-out infinite wooting-breath}.key-cap--animate-Ripple{animation:2s ease-in-out infinite wooting-ripple}.key-cap--animate-Touch{animation:3s ease-in-out infinite wooting-touch}.key-cap--animate-AOE{animation:2.5s ease-in-out infinite wooting-aoe}.key-cap--animate-Mixing{animation:4s ease-in-out infinite wooting-mixing}.key-cap--animate-Trail{animation:3s ease-in-out infinite wooting-trail}@keyframes wooting-jelly{0%,to{transform:translateY(0)scale(1)}25%{transform:translateY(-3px)scale(1.02)}50%{transform:translateY(0)scale(.98)}75%{transform:translateY(-1px)scale(1.01)}}@keyframes wooting-scan{0%{filter:brightness(.7)}50%{filter:brightness()}to{filter:brightness(.7)}}@keyframes wooting-breath{0%,to{opacity:1}50%{opacity:.4}}@keyframes wooting-ripple{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}@keyframes wooting-touch{0%,80%,to{filter:brightness()}85%{filter:brightness(1.5)}90%{filter:brightness()}95%{filter:brightness(1.5)}}@keyframes wooting-aoe{0%,to{filter:brightness();box-shadow:0 0 5px}50%{filter:brightness(1.2);box-shadow:0 0 25px,0 0 40px}}@keyframes wooting-mixing{0%,to{filter:hue-rotate()saturate()}33%{filter:hue-rotate(60deg)saturate(1.2)}66%{filter:hue-rotate(-60deg)saturate(1.2)}}@keyframes wooting-trail{0%,to{opacity:1;transform:translate(0)}50%{opacity:.7;transform:translate(4px)}}