/* Mouse de teclado: teclado dibujado a mano en tinta negra (trazos de pluma, sombreado a lápiz), en el espacio de la derecha, debajo de la mascota. */
#hashcodKeyMouse.hkm{
  --hkm-size:128px;
  --hkm-top:max(68px,calc(env(safe-area-inset-top,0px) + 20px));
  --hkm-right:max(22px,calc(env(safe-area-inset-right,0px) + 16px));
  position:fixed;
  z-index:90;                                  /* por encima de la mascota (88): si el panda camina hasta aquí, las teclas siguen visibles y pulsables */
  width:var(--hkm-size);
  top:var(--hkm-y,calc(var(--hkm-top) + var(--hkm-size) + 28px));
  right:var(--hkm-right);
  color:#111;
  font:500 10.5px/1.35 'IBM Plex Mono',ui-monospace,monospace;
  user-select:none;
  -webkit-user-select:none;
}
#hashcodKeyMouse[hidden],.hkm-cell[hidden],.hkm-cursor[hidden]{display:none!important}
.hkm-row5{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}
.hkm-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.hkm-gap{display:block;aspect-ratio:1}
.hkm-key{
  position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:6px;
  background:transparent;color:#111;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.hkm-key svg{display:block;width:100%;height:100%;overflow:visible}
.hkm-key .o{fill:none;stroke:#111;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hkm-key .g{fill:none;stroke:#111;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hkm-key .halo{stroke:#fff;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hkm-key .ink{fill:none;stroke:#111;stroke-width:1.6;opacity:0}
.hkm-key.is-down .ink,.hkm-key.is-on .ink{opacity:.9}
.hkm-key.is-down .halo,.hkm-key.is-on .halo{opacity:1}
.hkm-key:focus-visible{outline:2px solid #111;outline-offset:2px}
#hashcodKeyMouse[data-active="false"] .hkm-row5,#hashcodKeyMouse[data-active="false"] .hkm-pad{opacity:.62}
#hashcodKeyMouse .hkm-cap{margin:9px 0 0;text-align:center;color:#111;opacity:.82;letter-spacing:.01em}
#hashcodKeyMouse .hkm-cloud{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin:12px auto 0;padding:0;
  border:1.6px solid #111;border-radius:8px;background:#fff;color:#111;
  cursor:pointer;transition:background-color .15s ease,transform .15s ease;
}
#hashcodKeyMouse .hkm-cloud:hover{background:#f5f5f5}
#hashcodKeyMouse .hkm-cloud:active{transform:scale(.96)}
#hashcodKeyMouse .hkm-cloud:focus-visible{outline:2px solid #111;outline-offset:2px}
#hashcodKeyMouse .hkm-cloud svg{width:17px;height:17px;flex:none;fill:#111}
.hkm-cell{
  position:fixed;left:0;top:0;width:40px;height:40px;box-sizing:border-box;pointer-events:none;z-index:2147483645;
  border:1.5px dashed #111;background:rgba(17,17,17,.07);transform:translate3d(var(--x,0px),var(--y,0px),0);
}
.hkm-cursor{position:fixed;left:0;top:0;width:28px;height:28px;pointer-events:none;z-index:2147483646;transform:translate3d(var(--x,0px),var(--y,0px),0);filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))}
.hkm-cursor svg{display:block}
@media(max-width:720px){
  #hashcodKeyMouse.hkm{
    --hkm-size:96px;
    --hkm-top:max(56px,calc(env(safe-area-inset-top,0px) + 12px));
    --hkm-right:max(10px,calc(env(safe-area-inset-right,0px) + 8px));
    z-index:74;
  }
  #hashcodKeyMouse .hkm-cap{font-size:9px}
}
@media print{#hashcodKeyMouse,.hkm-cell,.hkm-cursor{display:none!important}}