main {
  --div-width: 1em;
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-template-rows: min-content 1fr;
  gap: 0;
  grid-column-gap: 3px;
  grid-template-areas:
    "buttons   tabnav   preview"
    "filetree  editors  preview";
}

#tabnav {
  grid-area: tabnav;
  display: grid;
  grid-template-columns: 2em 1fr 2em;
  grid-template-rows: 100%;
  grid-template-areas: "left tabs right";
}

#buttons {
  grid-area: buttons;
  margin: 0;
  padding: 0;
}

#filetree {
  grid-area: filetree;
  margin: 0;
  padding: 0;
  overflow: auto;
  resize: horizontal;
}

#left {
  grid-area: left;
  margin: 0;
  padding: 0;
}

#tabs {
  grid-area: tabs;
  margin: 0;
  padding: 0;
}

#right {
  grid-area: right;
  margin: 0;
  padding: 0;
}

#editors {
  display: flex;
  grid-area: editors;
  width: 46em;
  margin: 0;
  padding: 0;
  overflow: auto;
  resize: horizontal;
}

#preview {
  grid-area: preview;
  margin: 0;
  padding: 0;
}