.matrix-scope,
.matrix-wrapper{
  --cell-size:60px;
}

.formula-title{
  font-family:'Poppins',sans-serif;
  font-size:1.05rem;
  font-weight:400;
  text-align:left;
  margin:18px 0 10px 0;
}

.matrices-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:18px;
  padding:0 8px;
  overflow-x:auto;
}

.matrix-block{
  text-align:center;
}

.matrix-title{
  margin-bottom:10px;
  font-weight:700;
}

.matrix-wrapper{
  display:inline-block;
  position:relative;
  padding:8px 10px;
  vertical-align:middle;
}

.matrix-table{
  border-collapse:separate;
  border-spacing:1px;
}

.matrix-cell{
  width:var(--cell-size);
  height:var(--cell-size);
  border:1px solid #999;
  box-sizing:border-box;
  padding:0;
  vertical-align:middle;
}

.cell-input{
  width:100%;
  height:100%;
  border:none;
  padding:0;
  margin:0;
  text-align:center;
  font-size:15px;
  background:transparent;
  outline:none;
  box-sizing:border-box;
}

.cell-text{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-size:15px;
  white-space:nowrap;
  padding:0 6px;
}

.matrix-wrapper::before,
.matrix-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:4px;
  border-top:2px solid #333;
  border-bottom:2px solid #333;
}

.matrix-wrapper::before{
  left:0;
  border-left:2px solid #333;
  border-radius:4px 0 0 4px;
}

.matrix-wrapper::after{
  right:0;
  border-right:2px solid #333;
  border-radius:0 4px 4px 0;
}

.matrix-wrapper.expr-mode .matrix-cell{
  width:max-content;
  min-width:var(--cell-size);
  height:auto;
  padding:6px 8px;
}

.matrix-wrapper.expr-mode .cell-text{
  height:auto;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:12px;
  line-height:1.15;
  padding:0;
}

.fraction-table{
  border-collapse:collapse;
  width:auto;
  display:inline-table;
  margin:0;
}

.fraction-table td{
  text-align:center;
  padding:1px 6px;
  border:none;
  white-space:nowrap;
}

.fraction-table tr:nth-child(1) td{
  border-bottom:1px solid #333;
}

.step-answer{
  padding:20px 18px;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  width:100%;
  box-sizing:border-box;
}

.solve-button:hover{
  background-color:#2980b9;
}