Pin keyboard matches red lines (go/cros-quick-unlock-ux).

ui/login/account_picker/user_pod_row.css

Index: ui/login/account_picker/user_pod_row.css
diff --git a/ui/login/account_picker/user_pod_row.css b/ui/login/account_picker/user_pod_row.css
index adf840750d9da3dcc5cd2d397635d223b87f04a8..38046b38dd87e6fb3a8598cfff81ba6191a23a4c 100644
--- a/ui/login/account_picker/user_pod_row.css
+++ b/ui/login/account_picker/user_pod_row.css
@@ -37,7 +37,6 @@ pin-keyboard {
   top: 0;
   transform: scale3d(0.9, 0.9, 0.9);
   transition: height 180ms ease-in-out,
-              padding 180ms ease-in-out,
               top 180ms ease-in-out,
               width 180ms ease-in-out;
   width: 180px;
@@ -45,17 +44,16 @@ pin-keyboard {
 }
 
 .pod.pin-enabled {
-  height: 600px;
-  padding: 10px;
+  height: 594px;
   top: -200px !important;
-  width: 256px;
+  width: 270px;
 }
 
 .pod .pin-container {
-  height: 334px;
+  height: 344px;
   position: absolute;
-  top: 276px;
-  width: 256px;
+  top: 250px;
+  width: 270px;
 }
 
 .pod.faded {
@@ -107,12 +105,14 @@ html:not([screen=login-add-user]) .pod .user-image {
   position: absolute;
   top: 10px;
   transition: max-height 180ms ease-in-out,
-              max-width 180ms ease-in-out;
+              max-width 180ms ease-in-out,
+              top 180ms ease-in-out;
 }
 
 html:not([screen=login-add-user]) .pod .user-image.pin-enabled {
-  max-height: 256px;
-  max-width: 256px;
+  max-height: 230px;
+  max-width: 230px;
+  top: 20px;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
@@ -136,12 +136,16 @@ html:not([screen=login-add-user]) .pod.focused .user-image {
   position: absolute;
   text-align: center;
   top: 10px;
-  transition: width 180ms ease-in-out;
+  transition: left 180ms ease-in-out,
+              top 180ms ease-in-out,
+              width 180ms ease-in-out;
   width: 160px;
 }
 
 .pod.signed-in .signed-in-indicator.pin-enabled {
-  width: 256px;
+  left: 20px;
+  top: 20px;
+  width: 230px;
 }
 
 .main-pane {