/* Pixel icons and responsive rules */
.px-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  image-rendering: pixelated;
  vertical-align: middle;
  flex: 0 0 auto;
}

.px-start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='5' height='5' fill='%23FF0000'/%3E%3Crect x='9' y='2' width='5' height='5' fill='%2300A000'/%3E%3Crect x='2' y='9' width='5' height='5' fill='%230000FF'/%3E%3Crect x='9' y='9' width='5' height='5' fill='%23FFD800'/%3E%3C/svg%3E");
}

.px-folder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='5' width='14' height='9' fill='%23FFC800' stroke='%23996600'/%3E%3Crect x='1' y='3' width='6' height='3' fill='%23FFE040' stroke='%23996600'/%3E%3C/svg%3E");
}

.px-doc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h7l3 3v11H3V1z' fill='%23F8F7ED' stroke='%231A1A1A'/%3E%3Cpath d='M10 1v3h3' fill='%23C9C9C9' stroke='%23808080'/%3E%3Crect x='5' y='6' width='6' height='1' fill='%23000080'/%3E%3Crect x='5' y='8' width='6' height='1' fill='%23000080'/%3E%3Crect x='5' y='10' width='4' height='1' fill='%23000080'/%3E%3C/svg%3E");
}

.px-graph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cline x1='3' y1='3' x2='13' y2='3' stroke='%23000080'/%3E%3Cline x1='3' y1='3' x2='8' y2='13' stroke='%23000080'/%3E%3Cline x1='13' y1='3' x2='8' y2='13' stroke='%23000080'/%3E%3Ccircle cx='3' cy='3' r='2' fill='%234444FF'/%3E%3Ccircle cx='13' cy='3' r='2' fill='%234444FF'/%3E%3Ccircle cx='8' cy='13' r='2' fill='%234444FF'/%3E%3C/svg%3E");
}

.px-term {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='14' height='14' fill='%23101010' stroke='%23808080'/%3E%3Cpath d='M4 5l3 3-3 3' stroke='%2300ff00' stroke-width='1.5' fill='none'/%3E%3Cline x1='8' y1='11' x2='12' y2='11' stroke='%2300ff00' stroke-width='1.5'/%3E%3C/svg%3E");
}

.px-chip {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='3' y='3' width='10' height='10' fill='%23808080' stroke='%231A1A1A'/%3E%3Crect x='5' y='5' width='6' height='6' fill='%23C0C0C0' stroke='%23404040'/%3E%3Cg stroke='%231A1A1A'%3E%3Cline x1='1' y1='5' x2='3' y2='5'/%3E%3Cline x1='1' y1='8' x2='3' y2='8'/%3E%3Cline x1='1' y1='11' x2='3' y2='11'/%3E%3Cline x1='13' y1='5' x2='15' y2='5'/%3E%3Cline x1='13' y1='8' x2='15' y2='8'/%3E%3Cline x1='13' y1='11' x2='15' y2='11'/%3E%3C/g%3E%3C/svg%3E");
}

.px-atom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cellipse cx='8' cy='8' rx='7' ry='2.5' fill='none' stroke='%23000080'/%3E%3Cellipse cx='8' cy='8' rx='2.5' ry='7' fill='none' stroke='%23000080'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23FFD800' stroke='%23996600'/%3E%3C/svg%3E");
}