.docs-code-block {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 12, 20, .92);
}

.docs-code-block__bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.docs-code-block__meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-code-block__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dfe7f2;
  font-size: 12px;
  font-weight: 700;
}

.docs-code-block__language {
  color: #758399;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.docs-code-block__copy {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #aeb9c7;
  cursor: pointer;
}

.docs-code-block__copy:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}

.docs-code-block__copy.copied {
  color: #7c8cff;
}

.docs-code-block__copy-icon {
  width: 17px;
  height: 17px;
}

.docs-code-block__pre {
  margin: 0;
  overflow-x: auto;
  padding: 18px;
}

.docs-code-block__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #edf3fb;
}

@media (max-width: 700px) {
  .editor-window {
    overflow: hidden;
  }

  .editor-titlebar {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .editor-tabs {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .editor-tabs::-webkit-scrollbar {
    display: none;
  }

  .editor-tabs span {
    min-width: 108px;
    flex: 0 0 auto;
  }

  .editor-titlebar strong {
    display: none;
  }

  .editor-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .code-pane {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 14px;
  }

  .code-pane > div {
    width: max-content;
    min-width: 100%;
    padding-right: 18px;
  }

  .file-tree {
    display: flex;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px;
    max-height: 220px;
    overflow-y: auto;
  }

  .project-creator {
    padding: 18px;
  }

  .creator-command,
  .command-line {
    min-width: 0;
  }

  .command-line {
    overflow: hidden;
  }

  .command-line code {
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .command-line code::-webkit-scrollbar {
    display: none;
  }
}