classes refactoring, converter input pull amount fix

src/index.css

@@ -202,7 +202,7 @@ select {
 .node--converter { border-left-color: var(--accent-converter); }
 .node--consumer { border-left-color: var(--accent-consumer); }
 
-.node__id {
+.unit__id {
   font-family: var(--display);
   font-weight: 200;
   font-size: 10px;
@@ -212,7 +212,7 @@ select {
   text-overflow: ellipsis;
 }
 
-.node__title {
+.unit__title {
   font-family: var(--display);
   font-weight: 600;
   font-size: 12.5px;
@@ -222,7 +222,7 @@ select {
   text-overflow: ellipsis;
 }
 
-.node__kind {
+.unit__kind {
   font-size: 9px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -230,7 +230,7 @@ select {
   margin: 2px 0 6px;
 }
 
-.node__resources {
+.unit__resources {
   font-size: 11px;
   background: #171613;
   border: 1px solid var(--line);
@@ -240,7 +240,7 @@ select {
   white-space: nowrap;
 }
 
-.node__links {
+.unit__links {
   font-size: 11px;
   background: #171613;
   border: 1px solid var(--line);
@@ -250,7 +250,7 @@ select {
   white-space: nowrap;
 }
 
-.node__sockets {
+.unit__sockets {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -260,10 +260,10 @@ select {
   justify-content: center;
   gap: 6px;
 }
-.node__sockets--input { left: -5px; }
-.node__sockets--output { right: -5px; }
+.unit__sockets--input { left: -5px; }
+.unit__sockets--output { right: -5px; }
 
-.node__socket {
+.unit__socket {
   width: 10px;
   height: 10px;
   border-radius: 50%;