Обновление названий сервисов

Merge branch 'feature/VEGA-6262-add-static-copy-plugin' into 'main'
VEGA-6267: добавление автоматического обновления шрифтов дизайн-системы и отключение темной темы See merge request common/vega/beecloud-docs!78
2026-03-09 18:14:00 +03:00 · 2026-01-20 11:28:37 +00:00 · 2026-01-20 11:28:37 +00:00 · 2026-01-14 12:09:23 +06:00 · 2026-01-14 06:07:29 +00:00 · 2026-01-14 06:07:29 +00:00
213 changed files with 5162 additions and 3388 deletions
@@ -17,5 +17,4 @@ packages-list.json
 /.vale
 /.vscode
 /.vale.ini
-/VimpelcomCAG2.pem
 /.markdownlint.json
@@ -0,0 +1,40 @@
+deploy-prod:
+  stage: deploy
+  image: harbor.vimpelcom.ru/dockerhub/library/alpine:3.21.2
+  variables:
+    stand: beecloud-docs.beecloud-docs.cloud.vimpelcom.ru
+  rules:
+    - if: $CI_COMMIT_BRANCH && $CI_PIPELINE_SOURCE == "merge_request_event"
+      when: never
+    - if: $CI_PIPELINE_SOURCE == "push"
+      when: manual
+  before_script:
+    - |
+      sed -i s%https://dl-cdn.alpinelinux.org/%http://rhrepo.vimpelcom.ru/ext/ya/mirrors/% /etc/apk/repositories && \
+      apk --no-cache add tzdata ca-certificates curl openssh-client yq jq && \
+      rm -rf /var/cache/apk/*
+    - which ssh-agent || (apt-get update -y && apt-get install openssh-client -y)
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - echo -n "$TECH_SSH_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - chmod 600 ~/.ssh/id_rsa
+    - >
+      echo "stand: ${stand}"
+      ssh-keyscan "${stand}" >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+    - PRODUCT="$PRODUCT_DMZ"
+  script:
+    - >
+      echo -e "Connect to ${stand}..." &&
+      scp -o StrictHostKeyChecking=no ci/deploy/deploy.sh "dorootless@${stand}:~/deploy.sh" &&
+      ssh "dorootless@${stand}" "export CONTAINER_REGISTRY=$CONTAINER_REGISTRY &&
+      export PRODUCT=$PRODUCT &&
+      export PRODUCT_VERSION=$PRODUCT_VERSION &&
+      export IMAGE_NAME=$IMAGE_NAME &&
+      chmod 700 ~/deploy.sh &&
+      ~/deploy.sh ${IMAGE_NAME} &&
+      rm -f ~/deploy.sh"
+  needs:
+    - job: build-image
+      optional: true
@@ -1,6 +1,6 @@
 {
  "name": "docs",
-  "version": "0.6.4",
+  "version": "0.6.5-main",
  "description": "Beeline Cloud docs",
  "main": "index.js",
  "scripts": {
@@ -15,16 +15,17 @@
  },
  "license": "MIT",
  "dependencies": {
-    "@beeline/design-tokens": "^1.31.0",
-    "vue": "3.4.7"
+    "@beeline/design-tokens": "^1.31.6",
+    "vue": "^3.5.0"
  },
  "devDependencies": {
-    "@docsearch/css": "3.3.0",
-    "@types/node": "20.10.7",
-    "@vitejs/plugin-vue": "4.3.4",
-    "sass": "1.69.7",
-    "typescript": "^5.8.3",
-    "vitepress": "1.0.0-rc.40",
-    "vitepress-plugin-tabs": "0.5.0"
+    "@docsearch/css": "4.1.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sass": "^1.70.0",
+    "typescript": "^5.9.3",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitepress": "^1.6.4",
+    "vitepress-plugin-tabs": "^0.7.3"
  }
-}
+}
@@ -1,6 +1,9 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
+import { viteStaticCopy } from 'vite-plugin-static-copy'
 import { overrideComponents } from './override-components'
+import { resolve } from 'node:path'
+import { fileURLToPath, URL } from 'node:url'

 const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -43,10 +46,11 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
  srcDir: ".",
-  title: "cloud",
+  title: " ",
  description: "Документация Beeline Cloud",
  head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
  base: typeof new_version !== 'undefined' ? '/' : '/docs/',
+  appearance: false,
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin)
@@ -54,8 +58,31 @@ export default defineConfig({
  },
  vite: {
    resolve: {
-      alias: overrideComponents(),
-    }
+      alias: [
+        ...overrideComponents(),
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./theme', import.meta.url))
+        },
+      ],
+    },
+    plugins: [
+      viteStaticCopy({
+        targets: [
+          {
+            src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
+            dest: 'assets',
+          },
+        ],
+      }),
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+        },
+      },
+    },
  },
  locales: {
    root: {
@@ -65,9 +92,9 @@ export default defineConfig({
  },
  themeConfig: {
    logo: {
-      light: '/logo-light-theme.svg',
-      dark: '/logo-dark-theme.svg',
-      alt: 'cloud',
+      light: '/img/logo-cloud.svg',
+      dark: '/img/logo-cloud.svg',
+      alt: '',
    },
    search: {
      provider: 'local',
@@ -80,14 +107,8 @@ export default defineConfig({
                buttonAriaLabel: 'Поиск'
              },
              modal: {
-                noResultsText: 'Не удалось загрузить данные',
+                noResultsText: 'По вашему запросу ничего не найдено',
                resetButtonTitle: 'Сбросить',
-                displayDetails: 'Показать расширенный список',
-                footer: {
-                  selectText: 'Выбрать',
-                  closeText: 'Закрыть',
-                  navigateText: 'Перейти',
-                }
              }
            }
          }
@@ -138,11 +159,26 @@ export default defineConfig({
      {text: 'Бесплатный период', link: '/start/trial.md'}, 
      {text: 'Платное использование', link: '/start/organization.md'},
    ],
-    '/monitoring/': [
+    //  '/billing/': [
+ 
+    //   ],
+    '/backups/': [
      {
-        text: 'Мониторинг', link: '/monitoring/about.md',
+          text: 'Резервное копирование', link: '/backups/index.md',
+        },
+      {
+        text: 'Обзор сервиса', link: '/backups/backups-overview.md',
+        collapsed: true,
+              items: [  
+                {text: 'О сервисе', link: '/backups/about.md'},
+                {text: 'Квоты и лимиты', link: '/backups/backup-quatos.md'},
+           ]
      },
-      ], 
+      {text: 'Резервное копирование виртуальных машин Beeline Cloud', link: '/backups/backup-internal-infra.md'},
+      {text: 'Резервное копирование собственной инфраструктуры в Beeline Cloud', link: '/backups/backup-external-infra.md'},
+      {text: 'Каталог резервных копий', link: '/backups/view-backups.md'},
+      
+    ],
      '/vdc/': [
        {
          text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
@@ -151,8 +187,9 @@ export default defineConfig({
          text: 'Обзор сервиса', link: '/vdc/vdc-overview.md',
          collapsed: true,
              items: [  
-            { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
-            { text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
+                { text: 'О сервисе', link: '/vdc/vdc-about.md' },
+                { text: 'Техническое описание', link: '/vdc/vdc-tech.md' },
+                { text: 'Квоты и лимиты', link: '/vdc/vdc-quatos.md' },
           ]
        },
        {
@@ -177,18 +214,42 @@ export default defineConfig({
                {text: 'Изменение конфигурации ВМ', link: '/vdc/vdc-how-to/vm/edit-vm.md'},       
                {text: 'Удаление ВМ', link: '/vdc/vdc-how-to/vm/delete-vm.md'},  
                {text: 'Группы размещения', link: '/vdc/vdc-how-to/vm/create-affinity-rules.md'},
-                { text: 'Снимки ВМ', link: '/vdc/vdc-how-to/vm/create-snapshot.md'},
-                { text: 'VMWare Tools', link: '/vdc/vdc-how-to/vm/vmware-tools.md'},
+                {text: 'Снимки ВМ', link: '/vdc/vdc-how-to/vm/create-snapshot.md'},
+                {text: 'VMware Tools', link: '/vdc/vdc-how-to/vm/vmware-tools.md'},
+              ],  
+            },
+            { text: 'Диски', link: '/vdc/vdc-how-to/disks/disks-index.md',
+              collapsed: true,
+              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/disks/about.md'}, 
+                {text: 'Создание диска', link: '/vdc/vdc-how-to/disks/create-disk.md'},
+                {text: 'Проверка состояния диска', link: '/vdc/vdc-how-to/disks/view-disk.md'},
+                {text: 'Управление выделенными дисками', link: '/vdc/vdc-how-to/disks/attach-disk.md'},    
+                {text: 'Изменение политики хранения дисков ВМ', link: '/vdc/vdc-how-to/disks/change-storage-policy-of-vm.md'},  
+                {text: 'Редактирование параметров диска', link: '/vdc/vdc-how-to/disks/edit-disk.md'},
+                {text: 'Удаление диска', link: '/vdc/vdc-how-to/disks/delete-disk.md'},
              ],  
            },
            { text: 'Сети', link: '/vdc/vdc-how-to/networks/networks-index.md',
              collapsed: true,
              items: [
+                {text: 'Обзор', link: '/vdc/vdc-how-to/networks/about.md'},
                {text: 'Настройка доступа к ВМ из интернета', link: '/vdc/vdc-how-to/networks/allow-external-connections-to-vm.md'},     
                {text: 'Подключение ВМ в vApp к сети', link: '/vdc/vdc-how-to/networks/connect-vapp-to-network.md'},       
                {text: 'Подключение ВМ к интернету', link: '/vdc/vdc-how-to/networks/connect-vm-to-network.md'},       
                {text: 'Создание сети в организации и подключение к Edge Gateway', link: '/vdc/vdc-how-to/networks/create-network.md'},  
-                {text: 'Подключение сети к Edge Gateway', link: '/vdc/vdc-how-to/networks/isolated-to-routed.md'},            
+                {text: 'Подключение сети к Edge Gateway', link: '/vdc/vdc-how-to/networks/connect-to-edge-gateway.md'},
+                {text: 'Создание Pre-Shared Key', link: '/vdc/vdc-how-to/networks/create-psk.md'},     
+                { text: 'Настройка site-to-site подключения с помощью IPSec', link: '/vdc/vdc-how-to/networks/how-to-setup-ipsec-vpn.md',
+                  collapsed: true,
+                  items: [
+                    {text: 'Настройка IPSec VPN', link: '/vdc/vdc-how-to/networks/ipsec/setup-ipsec-vpn.md'},
+                    {text: 'Настройка ASAv', link: '/vdc/vdc-how-to/networks/ipsec/asav.md'},     
+                    {text: 'Настройка CSR 1000v', link: '/vdc/vdc-how-to/networks/ipsec/csr1000v.md'},     
+                    {text: 'Настройка Fortigate', link: '/vdc/vdc-how-to/networks/ipsec/fortigate.md'},
+                    {text: 'Проверить сетевую связанность', link: '/vdc/vdc-how-to/networks/ipsec/check-vpn-status.md'},    
+                  ],  
+                },
              ],  
            },
            { text: 'Пользователи и роли', link: '/vdc/vdc-how-to/users/users-index.md',
@@ -238,9 +299,34 @@ export default defineConfig({
                { text: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
                ],
              },
-        { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
-        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
-        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
+{ text: 'Диски', link: '/compute/compute-how-to/compute-disks/compute-disk-index.md',
+          collapsed: true,
+          items: [
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-disks/compute-disk-about.md' },
+                { text: 'Создание диска', link: '/compute/compute-how-to/compute-disks/compute-disk-create.md' },
+                { text: 'Управление дисками', link: '/compute/compute-how-to/compute-disks/compute-disk-manage.md' },
+                { text: 'Удаление диска', link: '/compute/compute-how-to/compute-disks/compute-disk-del.md' },
+              ]
+            },
+        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-index.md', 
+          collapsed: true,
+          items: [  
+                { text: 'Обзор', link: '/compute/compute-how-to/compute-ip/compute-ip-about.md' },
+                { text: 'Просмотр IP-адресов', link: '/compute/compute-how-to/compute-ip/compute-ip-view.md' },
+                { text: 'Создание IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-create.md' },
+                { text: 'Управление IP-адресами', link: '/compute/compute-how-to/compute-ip/compute-ip-manager.md' },
+                { text: 'Удаление IP-адреса', link: '/compute/compute-how-to/compute-ip/compute-ip-del.md' },
+              ]
+        },
+        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-index.md', 
+          collapsed: true,
+          items: [
+            { text: 'Обзор', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-about.md'},
+            { text: 'Создание группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-create.md'},
+            { text: 'Управление группами размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-manager.md' },   
+            { text: 'Удаление группы размещения', link: '/compute/compute-how-to/compute-placement-groups/compute-placement-groups-del.md' },
+          ]
+        },
        { text: 'Сети', link: '/compute/compute-how-to/compute-network/compute-network-index.md',
          collapsed: true,
          items: [
@@ -254,7 +340,39 @@ export default defineConfig({
        text: 'Администрирование', link: '/admin/index.md',
      },
      {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
-      ],     
+      ],
+      '/vdi/': [
+        {
+          text: 'Виртуальные рабочие столы', link: '/vdi/index.md',
+        },
+        {
+          text: 'Обзор сервиса', link: '/vdi/vdi-overview.md',
+          collapsed: true,
+              items: [  
+            { text: 'О сервисе', link: '/vdi/vdi-about.md' },
+            { text: 'Техническое описание', link: '/vdi/vdi-tech.md' },
+            { text: 'Квоты и лимиты', link: '/vdi/vdi-quatos.md' },
+            { text: 'Тарификация', link: '/vdi/vdi-tarif.md' },
+              ]
+        },
+        {
+          text: 'Заказ виртуальных рабочих столов', link: '/vdi/vdi-how-to/vdi-create.md'
+        },
+        {
+          text: 'Настройка сервиса', link: '/vdi/vdi-how-to/vdi-nastroika.md',
+          collapsed: true,
+              items: [  
+            { text: 'Настройка интеграции с Active Directory', link: '/vdi/vdi-how-to/vdi-connect-to-ad.md' },
+            { text: 'Настройка сети', link: '/vdi/vdi-how-to/vdi-interconnect.md' },
+              ]
+        },
+        // {
+       //   text: 'Gold-образ', link: '/vdi/vdi-how-to/vdi-gold.md'
+       // },
+        {
+          text: 'Подключение к виртуальному рабочему месту', link: '/vdi/vdi-how-to/vdi-connect.md'
+        }, 
+       ],    
      },  
    },
  }
@@ -54,10 +54,12 @@ const pageName = computed(() =>
        <div class="content-container">
          <slot name="doc-before" />
          <main class="main">
-            <Content class="vp-doc" :class="[
-                pageName,
-                theme.externalLinkIcon && 'external-link-icon-enabled'
-]" />
+            <div class="vp-doc" :class="[
+              pageName,
+              theme.externalLinkIcon && 'external-link-icon-enabled'
+            ]">
+              <Content />
+            </div>
            <SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
          </main>
          <VPDocFooter>
@@ -74,7 +76,7 @@ const pageName = computed(() =>
 </template>

 <style scoped lang="scss">
-@use 'src/assets/scss/app/helpers/media';
+@use '@/scss/helpers/media';

 .VPDoc {
  padding: 32px 24px 96px;
@@ -6,6 +6,8 @@ import { usePrevNext } from 'vitepress/dist/client/theme-default/composables/pre
 import VPIconEdit from 'vitepress/dist/client/theme-default/components/icons/VPIconEdit.vue'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
 import VPDocFooterLastUpdated from 'vitepress/dist/client/theme-default/components/VPDocFooterLastUpdated.vue'
+import CustomIcon from './CustomIcon.vue'
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons'

 const { theme, page, frontmatter } = useData()

@@ -43,14 +45,14 @@ const showFooter = computed(() => {
    <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
      <div class="pager">
        <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
-          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
+          <CustomIcon class="desc-prev" :icon="Icons.ArrowRight" />
          <span class="title" v-html="control.prev.text"></span>
        </VPLink>
      </div>
      <div class="pager">
        <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
-          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
          <span class="title" v-html="control.next.text"></span>
+          <CustomIcon class="desc-next" :icon="Icons.ArrowRight" />
        </VPLink>
      </div>
    </nav>
@@ -59,7 +61,7 @@ const showFooter = computed(() => {

 <style lang="scss" scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-top: 40px;
 }

 .edit-info {
@@ -98,8 +100,6 @@ const showFooter = computed(() => {
 }

 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
  display: grid;
  grid-row-gap: 8px;
 }
@@ -115,10 +115,19 @@ const showFooter = computed(() => {
  display: block;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
-  padding: 11px 16px 13px;
+  padding: 10px 16px 10px 12px;
  width: 100%;
  height: 100%;
  transition: border-color 0.25s;
+  display: flex;
+  gap: 8px;
+  
+  color: #1a73e8;
+
+  &.next {
+    padding: 10px 12px 10px 16px;
+    justify-content: flex-end;
+  }
 }

 .pager-link:hover {
@@ -136,6 +145,14 @@ const showFooter = computed(() => {
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
+
+  &-next {
+    rotate: -270deg;
+  }
+
+  &-prev {
+    rotate: -90deg;
+  }
 }

 .title {
@@ -33,6 +33,8 @@ import { escapeRegExp } from 'vitepress/dist/client/shared'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { LRUCache } from 'vitepress/dist/client/theme-default/support/lru'
 import { createSearchTranslate } from 'vitepress/dist/client/theme-default/support/translation'
+import CustomIcon from './CustomIcon.vue';
+import { Icons } from '@beeline/design-tokens/js/iconfont/icons';

 const emit = defineEmits<{
  (e: 'close'): void
@@ -496,21 +498,7 @@ function formMarkRegex(terms: Set<string>) {
              :title="$t('modal.resetButtonTitle')"
              @click="resetSearch"
            >
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M20 5H9l-7 7l7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-2 4l-6 6m0-6l6 6"
-                />
-              </svg>
+              <CustomIcon :icon="Icons.Close" size="large" style="padding: 12px 0;" />
            </button>
          </div>
        </form>
@@ -576,12 +564,6 @@ function formMarkRegex(terms: Set<string>) {
          <p class="no-results-text">
            {{ $t('modal.noResultsText') }}
          </p>
-          <button
-            class="no-results-button"
-            @click="retrySearch(searchIndex, filterText)"
-          >
-            Попробовать еще раз
-          </button>
        </ul>
      </div>
    </div>
@@ -610,7 +592,6 @@ function formMarkRegex(terms: Set<string>) {
  background: var(--vp-local-search-bg);
  width: min(100vw - 60px, 900px);
  height: min-content;
-  max-height: min(100vh - 128px, 900px);
  border-radius: 12px;
 }

@@ -679,7 +660,7 @@ function formMarkRegex(terms: Set<string>) {
 }

 .search-actions button {
-  padding: 8px;
+  padding: 0px;
 }

 .search-actions button:not([disabled]):hover,
@@ -728,11 +709,11 @@ function formMarkRegex(terms: Set<string>) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
-  box-shadow: var(--vp-c-shadow-3);
  border-radius: 12px;
  border: 1px solid rgba(25, 28, 52, 0.18);
  padding: 8px 0;
  max-height: min(100vh - 214px, 900px);
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);

  li:hover {
    background-color: rgba(25, 28, 52, 0.08);
@@ -745,7 +726,7 @@ function formMarkRegex(terms: Set<string>) {
  gap: 8px;
  transition: none;
  outline: none;
-  height: 66px;
+  min-height: 66px;
 }

 .result > div {
@@ -858,17 +839,18 @@ function formMarkRegex(terms: Set<string>) {
  gap: 24px;
  align-items: center;
  z-index: 100;
-  box-shadow: 0 0 10 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 6px 38px rgba(0, 0, 0, 0.16), 0px 0px 10px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(25, 28, 52, 0.18);
  background-color: rgb(255, 255, 255);
 }

 .no-results-text {
-  font-weight: 700;
+  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.2px;
+  color: rgba(25, 28, 52, 0.48);
 }

 .no-results-button {
@@ -879,6 +861,7 @@ function formMarkRegex(terms: Set<string>) {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.2px;
+  color: rgba(9, 11, 22, 0.94);
 }

 svg {
@@ -1,11 +1,329 @@
-.custom-block {
-    padding: 24px;
+@use "@beeline/design-tokens/scss/tokens/globals/colors";
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;

-    &-title {
-        font-size: 18px;
-        line-height: 22px;
-        font-weight: 500;
-        letter-spacing: .2px;
-        margin-bottom: 12px;
+.custom-block {
+  padding: 24px;
+    
+  &-title {
+    font-size: 17px !important;
+    line-height: 22px !important;
+    font-weight: 700 !important;
+    letter-spacing: .2px !important;
+    margin-bottom: 12px;
+  }
+
+  &.tip a {
+    color: #1a73e8;
+
+    &:hover {
+      color: #1a73e8;
    }
-}
+  }
+}
+
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 24px 24px 24px 64px;
+  line-height: 24px;
+  font-size: var(--vp-custom-block-font-size);
+  color: var(--vp-c-text-2);
+
+  &.custom-block.details {
+    padding: 0px;
+  }
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info a,
+.custom-block.info code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.info a:hover,
+.custom-block.info a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.note {
+  border-color: var(--vp-custom-block-note-border);
+  color: var(--vp-custom-block-note-text);
+  background-color: var(--vp-custom-block-note-bg);
+}
+
+.custom-block.note a,
+.custom-block.note code {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.note a:hover,
+.custom-block.note a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.note code {
+  background-color: var(--vp-custom-block-note-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-clock);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.tip a,
+.custom-block.tip code {
+  color: var(--vp-c-tip-1);
+}
+
+.custom-block.tip a:hover,
+.custom-block.tip a:hover > code {
+  color: var(--vp-c-tip-2);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.important {
+  border-color: var(--vp-custom-block-important-border);
+  color: var(--vp-custom-block-important-text);
+  background-color: var(--vp-custom-block-important-bg);
+}
+
+.custom-block.important a,
+.custom-block.important code {
+  color: var(--vp-c-important-1);
+}
+
+.custom-block.important a:hover,
+.custom-block.important a:hover > code {
+  color: var(--vp-c-important-2);
+}
+
+.custom-block.important code {
+  background-color: var(--vp-custom-block-important-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-info-circled);
+    position: absolute;
+    left: 24px;
+    content: '';
+  }
+}
+
+.custom-block.warning a,
+.custom-block.warning code {
+  color: $color-text-link;
+}
+
+.custom-block.warning a:hover,
+.custom-block.warning a:hover > code {
+  color: $color-text-link;
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+
+  &::before {
+    height: 24px;
+    width: 24px;
+    background-image: var(--vp-icon-warning-triangle);
+    content: '';
+    position: absolute;
+    left: 24px;
+  }
+}
+
+.custom-block.danger a,
+.custom-block.danger code {
+  color: var(--vp-c-danger-1);
+}
+
+.custom-block.danger a:hover,
+.custom-block.danger a:hover > code {
+  color: var(--vp-c-danger-2);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.caution {
+  border-color: var(--vp-custom-block-caution-border);
+  color: var(--vp-custom-block-caution-text);
+  background-color: var(--vp-custom-block-caution-bg);
+}
+
+.custom-block.caution a,
+.custom-block.caution code {
+  color: var(--vp-c-caution-1);
+}
+
+.custom-block.caution a:hover,
+.custom-block.caution a:hover > code {
+  color: var(--vp-c-caution-2);
+}
+
+.custom-block.caution code {
+  background-color: var(--vp-custom-block-caution-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: transparent;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+
+  pre {
+    border: none !important;
+    
+  }
+
+  div {
+    margin: 0 !important;
+  }
+
+  &:open {
+    &.custom-block.details summary {
+      background-color: $color-background-base-hover;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+
+      &::before {
+        background-image: var(--vp-icon-nav-arrow-up);
+      }
+    }
+  }
+}
+
+.custom-block.details a {
+  color: var(--vp-c-brand-1);
+}
+
+.custom-block.details a:hover,
+.custom-block.details a:hover > code {
+  color: var(--vp-c-brand-2);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0;
+  padding: 24px;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  font-size: 19px;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  display: block;
+
+  &::before {
+    position: absolute;
+    right: 24px;
+    content: '';
+    background-image: var(--vp-icon-nav-arrow-down);
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.custom-block.details {
+  h1, h2, h3, h4, h5, ul, p {
+    margin: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+
+  ol {
+    padding: 0 24px;
+
+    &:last-child {
+      margin-bottom: 24px !important;
+    }
+
+    &:first-child {
+      margin-top: 24px !important;
+    }
+  }
+}
+
+.custom-block.details summary + p {
+  padding: 24px;
+  margin: 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.75;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
+
+.custom-block.custom-block th,
+.custom-block.custom-block blockquote > p {
+  font-size: var(--vp-custom-block-font-size);
+  color: inherit;
+}
+
+
@@ -4,8 +4,8 @@
 .VPDocAside {
  .outline-link {
    font-weight: 400;
-    font-size: 17px;
-    line-height: 22px;
+    font-size: 15px;
+    line-height: 18px;
    letter-spacing: 0.2px;
    padding-top: 8px;
    padding-bottom: 8px;
@@ -19,10 +19,11 @@
  }

  .outline-title {
-    font-size: 17px;
+    font-size: 15px;
    font-weight: 500;
-    line-height: 22px;
+    line-height: 18px;
    padding-bottom: 16px;
+    color: colors.$color-text-black-active;
  }

  .content {
@@ -1,135 +1,566 @@
@use "@beeline/design-tokens/scss/tokens/globals/colors";
@use "@beeline/design-tokens/scss/tokens/themes";
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as *;

@mixin font_style($fontSize, $fontWeight, $lineHeight, $letterSpacing) {
-    font-size: $fontSize;
-    font-weight: $fontWeight;
-    line-height: $lineHeight;
-    letter-spacing: $letterSpacing;
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+  line-height: $lineHeight;
+  letter-spacing: $letterSpacing;
 }

@mixin generate-numbered-list-styles($start, $end) {
-    @for $counter from $start through $end {
-        $counter-name: list + ' ' + ($counter - 1);
-        ol[start*="#{$counter}"] {
-            list-style-type: none;
-            counter-reset: $counter-name;
-        }
+  @for $counter from $start through $end {
+    $counter-name: list + ' ' + ($counter - 1);
+    ol[start*="#{$counter}"] {
+      list-style-type: none;
+      counter-reset: $counter-name;
    }
+  }
 }

 .vp-doc {
-    font-size: 17px;
+  font-size: 17px;

-    // Titles
-    h1 {
-        @include font_style(44px, 500, 46px, 0.3px);
-        margin-bottom: 24px;
-    }
+  // Titles
+  h1 {
+    @include font_style(44px, 500, 56px, 0.3px);
+    margin-bottom: 24px;
+  }

-    h2 {
-        @include font_style(34px, 400, 36px, 0.3px);
-        margin-bottom: 12px;
-    }
+  h2 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin: 40px 0 24px;
+  }

-    h3 {
-        @include font_style(26px, 500, 32px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h3 {
+    @include font_style(26px, 500, 32px, 0.2px);
+    margin-bottom: 12px;
+  }

-    h4 {
-        @include font_style(20px, 700, 28px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h4 {
+    @include font_style(20px, 700, 28px, 0.2px);
+    margin-bottom: 12px;
+  }

-    h5 {
-        @include font_style(17px, 500, 22px, 0.2px);
-        margin-bottom: 12px;
-    }
+  h5 {
+    @include font_style(17px, 500, 22px, 0.2px);
+    margin-bottom: 12px;
+  }

-    // Text
-    ol {
-        list-style-type: none;
-        counter-reset: list;
-        margin: 0 0 0 50px;
-        padding: 0 0 5px 0;
-        font-size: 16px;
+  // Text
+  ol {
+    list-style-type: none;
+    counter-reset: list;
+    margin: 0 0 0 50px;
+    padding: 0;
+    font-size: 15px;
  
-        & > * + * {
-            margin-top: 50px;
-        }
+    & > * + * {
+      margin-top: 50px;
+    }
+  }
+
+  @include generate-numbered-list-styles(2, 50);
+
+  ol li {
+    position: relative;
+    padding: 8px 0 0 0;
+    line-height: 18px;
+  }
+
+  li + li {
+    margin-top: 30px;
+  }
+
+  ul li {
+    padding-bottom: 0;
+    padding-top: 0;
+    margin-top: 8px;
+    @include font_style(15px, 400, 18px, 0.2px);
+  }
+  
+  ol li:nth-last-of-type(n+2)::after {
+    content: '';
+    border-left: 1px solid rgb(201, 197, 197);
+    position: absolute;
+    line-height: 100%;
+    left: -30px;
+    top: 43px;
+    bottom: -25px;
+  }
+
+  ol li::before {
+    content: counter(list);
+    counter-increment: list;
+    display: inline-flex;
+    position: absolute;
+    top: 0;
+    left: -48px;
+    width: 35px;
+    height: 35px;
+    background-color: colors.$color-background-brand;
+    color: themes.$color-text-active;
+    @include font_style(15px, 400, 18px, 0.2px);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ul li:nth-last-of-type(n):after {
+    content: none;
+  }
+
+  ol ul li::before {
+    counter-increment: list;
+    content: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ol li:last-child {
+    margin-bottom: 40px;
+  }
+
+  ul li:last-child {
+    margin-bottom: 20px;
+  }
+
+  ol li p {
+    margin-top: 0;
+  }
+
+  p {
+    @include font_style(15px, 400, 18px, 0.2px);
+    margin: 24px 0;
+  }
+
+  // Links
+  a {
+    color: #1a73e8;
+    text-decoration: none;
+
+    &:hover, &:focus-visible, &:focus, &:active {
+      color: #1a73e8;
    }

-    @include generate-numbered-list-styles(2, 50);
-
-    ol li {
-        position: relative;
-        padding: 5px 0 0 0;
-        line-height: 1.4;
+    &:visited {
+      color: #7e00ed;
    }
+  }
+}

-    li + li {
-        margin-top: 34px;
+// Tabs
+.plugin-tabs {
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  background-color: revert-layer !important;
+
+  &--tab {
+    border-bottom: 1px solid transparent;
+  }
+
+  &--content { 
+    padding: 24px !important;
+  
+    .language- {
+      border: none;
+      padding: 0px !important;
+      overflow-y: hidden !important;
+      overflow-x: hidden !important;
    }
+  }
+}

-    ul li {
-        padding-bottom: 0;
-        padding-top: 0;
-        margin-top: 8px;
-    }
-    
-    ol li::before {
-        content: counter(list);
-        counter-increment: list;
-        display: inline-flex;
-        position: absolute;
-        top: 0;
-        left: -48px;
-        width: 35px;
-        height: 35px;
-        background-color: colors.$color-background-brand;
-        color: themes.$color-text-active;
-        text-align: center;
-        line-height: 25px;
-        font-size: 16px;
-        border-radius: 50%;
-        justify-content: center;
-        align-items: center;
-    }
+// Code
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}

-    ul li:nth-last-of-type(n):after {
-        content: none;
-    }
+.vp-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  background-color: var(--vp-code-bg);
+  transition:
+    color 0.25s,
+    background-color 0.5s;
+}

-    ol ul li::before {
-        counter-increment: list;
-        content: none;
-        margin: 0;
-        padding: 0;
-    }
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}

-    ol li:last-child, ul li:last-child {
-        margin-bottom: 40px;
-    }
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}

-    ol li p {
-        margin-top: 0;
-    }
+.vp-doc h1 > code,
+.vp-doc h2 > code,
+.vp-doc h3 > code {
+  font-size: 0.9em;
+}

-    p {
-        line-height: 22px;
-    }
+.vp-doc div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px -24px;
+  background-color: transparent;
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}

-    // Links
-    a {
-        color: #1a73e8;
+@media (min-width: 640px) {
+  .vp-doc div[class*='language-'],
+  .vp-block {
+    border-radius: 12px;
+    margin: 16px 0;
+  }
+}

-        &:hover, &:focus-visible, &:focus, &:active {
-            color: #1a73e8;
-        }
+@media (max-width: 639px) {
+  .vp-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}

-        &:visited {
-            color: #7e00ed;
-        }
-    }
-}
+.vp-doc div[class*='language-'] + div[class*='language-'],
+.vp-doc div[class$='-api'] + div[class*='language-'],
+.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.vp-doc [class*='language-'] pre,
+.vp-doc [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.vp-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 24px;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+}
+
+.vp-doc [class*='language-'] code {
+  display: block;
+  padding: 0px;
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+  transition: color 0.5s;
+}
+
+.vp-doc [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.vp-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition:
+    border-color 0.5s,
+    color 0.5s;
+}
+
+.vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: none;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  opacity: 1;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] > button.copy:hover,
+.vp-doc [class*='language-'] > button.copy.copied {
+  border: none;
+  background-color: transparent;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied,
+.vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  background-color: transparent;
+  background-image: none;
+}
+
+.vp-doc [class*='language-'] > button.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  /*rtl:ignore*/
+  border-right: 0;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  white-space: nowrap;
+  content: '';
+}
+
+.vp-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition:
+    color 0.4s,
+    opacity 0.4s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+// Banner
+.vp-doc .custom-block {
+  margin: 40px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 18px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+  border-radius: 12px;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+// Table
+.vp-doc table {
+  display: block;
+  border-collapse: collapse;
+  overflow-x: auto;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  // width: 100%;
+  margin: 24px 0;
+}
+
+.vp-doc tr {
+  border-top: hidden;
+  transition: background-color 0.5s;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc th,
+.vp-doc td {
+  padding: 18px 16px;
+  padding: 18px 16px;
+  width: 100vh;
+  background-color: var(--vp-c-bg);
+  border: none;
+}
+
+.vp-doc tbody tr {
+  border-top: 1px solid $color-border;
+
+  &:last-child{
+    border-bottom: hidden;
+  }
+}
+
+.vp-doc th {
+  @include font_style(15px, 500, 20px, 0.2px);
+  color: $color-text-active;
+  background-color: var(--vp-c-bg);
+  border-top: 1px solid $color-border;
+}
+
+.vp-doc td {
+  @include font_style(15px, 400, 18px, 0.2px);
+  padding: 18px 16px;
+  background-color: var(--vp-c-bg);
+  border-right: hidden;
+  border-left: hidden;
+  color: $color-text-active;
+}
+
+// Block
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 40px 0;
+  border-radius: 12px;
+
+  &.vp-doc .custom-block {
+    margin: 0;
+    border: none;
+  }
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
@@ -1,6 +1,6 @@
@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
-@use 'src/assets/scss/app/helpers/media';
+@use '@/scss/helpers/media';

 .VPSidebar {
  --vp-sidebar-bg-color: var(--vp-c-bg);
@@ -1,3 +1,8 @@
+@use '@beeline/design-tokens/scss/font-face';
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '../assets/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
@use '@beeline/design-tokens/scss/tokens/themes/dark';
@use '@beeline/design-tokens/scss/tokens/themes';

@@ -1,57 +0,0 @@
-@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
-  $font-path-iconfont: '/fonts/iconfont'
-);
-@use "@beeline/design-tokens/scss/iconfont/icons";
-
-$font-path-beeline-sans: '/fonts/beeline-sans' !default;
-
-@mixin beeline-sans-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Beeline Sans";
-    src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
-		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin beeline-sans-font-pair($type, $weight) {
-  @include beeline-sans-font($type, $weight);
-  
-}
-
-@include beeline-sans-font-pair(Regular, 400);
-
-@include beeline-sans-font-pair(Medium, 500);
-
-@include beeline-sans-font-pair(Bold, 700);
-
-@include beeline-sans-font-pair(Black, 900);
-
-$font-path-roboto-mono: '/fonts/roboto-mono' !default;
-
-@mixin roboto-mono-font($type, $weight, $style: normal) {
-  @font-face {
-    font-family: "Roboto Mono";
-    src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
-		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
-    font-weight: $weight;
-    font-style: $style;
-  }
-}
-
-@mixin roboto-mono-font-pair($type, $weight) {
-  @include roboto-mono-font($type, $weight);
-  
-}
-
-@include roboto-mono-font-pair(Light, 300);
-
-@include roboto-mono-font-pair(Regular, 400);
-
-@include roboto-mono-font-pair(Medium, 500);
-
-@include roboto-mono-font-pair(Bold, 700);
-
@@ -0,0 +1 @@
+@forward "media";
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // @deprecated
@mixin media($minWidth, $maxWidth) {
  @media (min-width: $minWidth) and (max-width: $maxWidth) {
@@ -27,7 +29,7 @@ $breakpoints: (
 );

@mixin max($breakpoint) {
-  $value: map-get($breakpoints, $breakpoint);
+  $value: map.get($breakpoints, $breakpoint);

  @if $value {
    @media (max-width: $value) {
@@ -1,4 +1,3 @@
-@use "fonts";
-@use "design-system";
+@use "design-tokens";
@use "vars";
@use "components";
@@ -111,7 +111,7 @@

 :root {
  --vp-font-family-base: 'Beeline Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --vp-font-family-mono: 'Roboto Mono', monospace;
+  --vp-font-family-mono: 'JetBrains Mono', monospace;

  // Code
  // --vp-code-font-size: ;
@@ -183,16 +183,18 @@
  --vp-custom-block-code-font-size: 17px;
  --vp-custom-block-tip-border: transparent;
  --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: #f1f1f3;
+  --vp-custom-block-tip-bg: #f9f9f9;
  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-warning-bg: #fff4e1;
-  --vp-custom-block-danger-bg: #ffecef;
+  --vp-custom-block-warning-bg: #e3f2ff;
+  --vp-custom-block-warning-icon: #1a73e8;
+  --vp-custom-block-danger-bg: #fff4e1;
+  --vp-custom-block-danger-icon: #ff9419;
 }

 .dark {
-  --vp-custom-block-warning-bg: #3d392a;
+  --vp-custom-block-warning-bg: #132338;
  --vp-custom-block-tip-bg: #36383c;
-  --vp-custom-block-danger-bg: #371313;
+  --vp-custom-block-danger-bg: #3d392a;
 }

 /**
@@ -204,5 +206,11 @@
 }

 :root {
+  --vp-icon-copy: url('../../../public/icons/copy.svg');
+  --vp-icon-clock: url('../../../public/icons/clock.svg');
+  --vp-icon-info-circled: url('../../../public/icons/info_circled.svg');
+  --vp-icon-warning-triangle: url('../../../public/icons/warning_triangle.svg');
+  --vp-icon-nav-arrow-down: url('../../../public/icons/nav_arrow_down.svg');
+  --vp-icon-nav-arrow-up: url('../../../public/icons/nav_arrow_up.svg');
  --vp-sidebar-width: 320px;
-}
+}
@@ -1,13 +0,0 @@
-# Матрица региональной доступности
-
-Регион доступности — это один или несколько центров обработки данных (ЦОД), в которых могут быть размещены компоненты облачной инфраструктуры.
-
-| Регион |  Статус | Гипервизор | Процессор | HDD| SSD | NVME|  
-|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
- | **ДатаФорт 1** |  Доступен | OpenStack |  Intel® Xeon® Gold 6248R | &#10008; | &#10008; | ✅ |  
-
-Условные обозначения:
-
-✅ — есть возможность выдачи ресурсов.
-
-&#10008; — нет возможности выдачи ресурсов.
@@ -10,5 +10,3 @@ section_links:
 При [регистрации пользователя](../start/getting-started.md#1-регистрация-в-beeline-cloud) в Beeline Cloud создается аккаунт и проект в Beeline Cloud.

 С помощью аккаунта можно управлять профилем пользователя - добавлять SSH-ключи, чтобы подключаться к виртуальным машинам без ввода пароля.
-
-В проекте можно создавать ресурсы, добавлять пользователей в проект и управлять доступом к ресурсам.
@@ -1,40 +0,0 @@
-# Квоты и лимиты
-
-Ограничения включают в себя лимиты и квоты на потребление ресурсов в проекте. 
-
-Квоты ограничивают потребление ресурсов в проекте. В проекте на каждый ресурс выделяется квота, не превышающая лимит.
-
-После создания проекту становятся доступны базовые квоты. Для них установлены значения по умолчанию.
-
-**Базовые квоты**
-
-| Название квоты      | Количество |
-|---------------------|------------|
-| Количество виртуальных ВМов | 3 штуки|
-| ЦПУ                 | 200        |
-| ОЗУ              | 200 Гбайт       |
-| Хранилище NVME   | 5000 Гбайт      |
-| Объектное хранилище | 100 Гбайт      |
-
-## Просмотр квот проекта
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-
-## Редактирование квот проекта
-
-::: tip Информация
-Изменить квоты проекта может пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Обзор**.
-6. В правом верхнем углу нажмите **Изменить квоты**.
-7. Увеличите или уменьшите квоты для ресурсов.
-8. Нажмите **Сохранить**.
@@ -1,49 +0,0 @@
-# Управление проектами
-
-Проект — это структурная единица публичного облака, в которой содержатся ресурсы: виртуальные машины, хранилища, IP-адреса и др. 
-
-Ресурсы могут быть вычислительными и аппаратными.
-
-Вычислительные ресурсы:
- оперативная память (ОЗУ);
- ядра процессора (ЦПУ);
- локальные диски;
- сетевые диски;
- IP-адреса.
-
-Аппаратные ресурсы (ВМы, сети, диски) размещены в центрах обработки данных (ЦОД). Каждый дата-центр разделен на модули. Модули оснащены независимыми системами электропитания и охлаждения.
-
-При получении доступа в публичное облако текущий пользователь становится менеджера проектов. Менеджер проектов может создавать новые проекты, в которых он получает роль владельца проекта. Владелец проекта может добавлять пользователей в проект, назначая им роли.
-
-Доступ к проекту осуществляется из консоли управления.
-
-## Создать проект
-
-1. Перейдите в консоль управления.
-2. Нажмите кнопку **Создать → Проект** в правом верхнем углу.
-3. Заполните информацию о проекте:
-   - **Название**: введите наименование проекта.
-   - **Идентификатор**: введите идентификатор проекта:
-     - допустимы строчные и прописные буквы латинского алфавита, цифры и дефис;
-     - длина не более 64 символов;
-     - не должно начинаться или заканчиваться дефисом.
-   - **Описание**: введите краткое описание проекта.
-4. Нажмите **Создать**.
-
-## Изменить имя проекта
-
-::: tip Информация
-Изменить имя и описание проекта может только пользователь с ролью **Владелец проекта**.
-:::
-
-1. Перейдите в консоль управления.
-2. В шапке выберите **Проекты**.
-3. Откроется список проектов, в которых вы являетесь участником.
-4. Нажмите на имя нужного проекта.
-5. Откройте раздел **Настройки → Основное**.
-6. Измените имя, описание проекта.
-7. Нажмите **Сохранить**.
-
-## Удаление проекта
-
-Функциональность не предусмотрена в публичном облаке.
@@ -1,49 +0,0 @@
-# Ролевая модель
-
-Управление проектом основано на ролевой модели.
-
-**Базовые роли**
-
-В проекте предусмотрен базовый набор ролей:
-
- **Владелец продукта** — управление пользователями проекта, просмотр ресурсов.
- **DevOps-инженер** — управление инфраструктурой, стандартное администрирование ОС UNIX по протоколу ssh и права управления виртуальными ВМами и дисками в консоли управления.
-
-## Матрица ролей
-
-| Действие | Владелец проекта | DevOps-инженер |
-|---|---|---|
-| Обзор проекта<br> (квоты и количество использованных ресурсов)| &#9989; | &#9989; |
-| ВМы: обзор | &#9989; | &#9989; |
-| ВМы: мониторинг | &#9989; | &#9989; |
-| ВМы: создать ВМ |&#10008; | &#9989; | 
-| ВМы: подключить диск | &#10008; | &#9989; | 
-| ВМы: отключить диск | &#10008; | &#9989; | 
-| ВМы: добавить диск | &#10008; | &#9989; | 
-| ВМы: теги | &#10008; |&#9989; | 
-| ВМы: масштабирование ВМа | &#10008; | &#9989; | 
-| ВМы: выключить ВМ | &#10008; | &#9989; | 
-| ВМы: включить ВМ | &#10008; | &#9989; | 
-| ВМы: перезагрузить ВМ | &#10008; | &#9989; | 
-| ВМы: принудительно перезагрузить ВМ | &#10008; | &#9989; |
-| ВМы: удалить ВМ | &#10008; | &#9989; |
-| ВМы: группы размещения | &#10008; | &#9989; |
-| ВМы: IP-адреса | &#10008; | &#9989; | 
-| Диски: просмотр дисков | &#9989; | &#9989; | 
-| Диски: добавление дискового пространства | &#10008; | &#9989; |
-| Диски: удалить диск| &#10008; | &#9989; |
-| Объектное хранилище: просмотр| &#9989; | &#9989; | 
-| Объектное хранилище: добавить хранилище | &#10008; | &#9989; |
-| Объектное хранилище: удалить хранилище | &#10008; |  &#9989;|
-| DNS: добавить зону | &#10008; | &#9989; |
-| DNS: редактировать зону | &#10008; | &#9989; | 
-| DNS: удалить зону |&#10008; | &#9989; | 
-| Настройки проекта: просмотр| &#9989; | &#9989; | 
-| Настройки проекта: изменить описание проекта |&#9989;  | &#10008; |
-| Участники: просмотр | &#9989; | &#9989; | 
-| Участники: добавить участника | &#9989; | &#10008; | 
-| Участники: удалить участника | &#9989; | &#10008; | 
-| Участники: назначить роль | &#9989;| &#10008; | 
-| Квоты: просмотр | &#9989; | &#9989; | 
-| Веб-обработчики | &#10008; | &#9989; |
-| Наблюдаемость | &#9989; | &#9989; |
@@ -1,47 +0,0 @@
-# Управление пользователями в проекте
-
-В консоли управления можно добавлять пользователей, управлять ролями пользователей в проекте. Один пользователей может участвовать в нескольких проектах и иметь в них разные роли.
-
-::: tip Информация
-Добавлять и удалять пользователей, изменять права пользователей в проекте может только владелец проекта.
-:::
-
-## Добавить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Нажмите **Добавить пользователя**.
-4. Найдите пользователя по ФИО или email.
-5. Назначьте [роль](../admin/roles.md) пользователю.
-6. Нажмите **Добавить**.
-
-## Назначить права пользователю
-
-Каждому пользователю проекта должна быть выдана хотя бы одна роль. У пользователя может быть несколько ролей в одном проекте. 
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите &#10247; в строке с именем пользователя и выберите **Редактировать**.
-5. Назначьте [роль](../admin/roles.md) пользователю: установите флажок напротив роли.
-6. Нажмите **Сохранить**.
-
-Права на существующие ОС применятся в течение 10 минут.
-
-## Отозвать права у пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите &#10247; в строке с именем пользователя и выберите **Редактировать**.
-5. Отзовите роль у пользователя: уберите флажок напротив роли. Оставьте пользователю хотя бы одну роль в проекте. 
-6. Нажмите кнопку **Сохранить**.
-
-## Удалить пользователя
-
-1. Перейдите в консоль управления.
-2. Откройте **Настройки → Участники**.
-3. Найдите пользователя.
-4. Нажмите &#10247; в строке с именем пользователя и выберите **Удалить**.
-
-Пользователь будет удален из списка участников проекта. Ресурсы проекта станут недоступны пользователю.
@@ -1,38 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as *;
-
-:root {
-  --app-navbar-height: #{$app-navbar-height};
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100vh;
-}
-
-html {
-  overflow-y: auto;
-}
-
-#app {
-  height: 100vh;
-}
-
-html.dark-theme {
-  background-color: $color-background-base;
-  color: $color-text-active;
-}
-
-a:visited {
-  color: $color-text-active !important;
-}
-
-a:hover {
-  text-decoration: none !important;
-}
@@ -1,5 +0,0 @@
-@import 'variables';
-@import 'base';
-@import 'form';
-@import 'helpers';
-@import 'components';
@@ -1,3 +0,0 @@
-// Navbar
-$app-navbar-height: 3.5rem;
-$app-header-height: 64px;
@@ -1,122 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as *;
-@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
-@use '@beeline/design-tokens/scss/tokens/components/button' as *;
-@use '@beeline/design-tokens/scss/tokens/globals' as *;
-@use '@beeline/design-tokens/scss/mixin';
-
-@mixin fab_button {
-  background-color: $button-overlay-background-color;
-  padding-left: $button-only-text-small-padding-horizontal;
-  padding-right: $button-only-text-small-padding-horizontal;
-  letter-spacing: $button-small-text-font-letter-spacing;
-  line-height: $button-small-text-font-line-height;
-  font-size: $button-small-text-font-size;
-  height: $button-small-height;
-  color: $button-overlay-text-color;
-  box-shadow: none;
-  border: 1px solid $button-outline-border-color;
-  border-radius: $button-border-radius;
-
-  &:hover {
-    cursor: pointer;
-    background-color: $button-overlay-background-color-hover;
-  }
-}
-
-.app-fab {
-  height: $fab-standard-height;
-  width: $fab-standard-width;
-  position: fixed;
-  z-index: 50;
-  display: inline-flex;
-  align-items: center;
-  border: 0;
-  padding: $fab-standard-padding;
-  letter-spacing: $fab-text-font-letter-spacing;
-  line-height: $fab-text-font-line-height;
-  font-size: $fab-text-font-size;
-  font-weight: $fab-text-font-weight;
-  box-shadow: $fab-shadow;
-  background-color: $color-background-inverse;
-  color: $color-text-active-inverse;
-  cursor: pointer;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-  }
-
-  &:hover {
-    // background-color: $fab-hover-background-color;
-  }
-
-  &--focused {
-    border-color: $fab-focused-border-color;
-    border-width: $fab-focused-border-width;
-  }
-
-  &--mini {
-    height: $fab-mini-height;
-    width: $fab-mini-width;
-    border-radius: $fab-mini-border-radius;
-    padding: $fab-mini-padding;
-  }
-
-  &--extended {
-    height: $fab-extended-height;
-    border-radius: $fab-extended-border-radius;
-    padding-right: $fab-extended-padding-right;
-    padding-left: $fab-extended-padding-left;
-
-    & &__icon {
-      margin-right: $fab-extended-icon-spacing;
-    }
-  }
-
-  .app-fab--extended.app-fab--mini {
-    height: $fab-mini-height;
-  }
-
-  &--disabled {
-    opacity: $fab-disabled-opacity;
-  }
-}
-
-.app-fab-dialog {
-  position: fixed;
-  bottom: 44px;
-  right: 0;
-  // background-color: $color-background-medium;
-  background-color: transparent;
-  // border-radius: 12px;
-  padding: 1rem;
-  // border: 1px solid $color-border;
-  // min-width: 300px;
-  // box-shadow: $elevation-medium;
-
-  .icon-contained {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    background-color: $color-status-neutral-background;
-    color: $color-status-neutral;
-    border-radius: 12px;
-  }
-
-  #feedback_button {
-    @include fab_button();
-  }
-
-  #bug_button {
-    @include fab_button();
-    line-height: 38px;
-  }
-
-  a#bug_button,
-  a#bug_button:visited,
-  a#bug_button:active {
-    color: $button-overlay-text-color !important;
-  }
-}
@@ -1 +0,0 @@
-@import 'fab';
@@ -1 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;
@@ -1,104 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
-@use '@beeline/design-tokens/scss/tokens/components/formfield';
-@use '@beeline/design-tokens/scss/tokens/themes';
-
-.textarea-field {
-  $px: 16px;
-
-  display: block;
-  width: 100%;
-  position: relative;
-  padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
-  height: $textarea-without-label-medium-height;
-  background: formfield.$formfield-background-color;
-  border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
-  border-radius: formfield.$formfield-border-radius;
-
-  & &__label {
-    position: absolute;
-    top: $textarea-with-label-text-margin-top;
-    left: $px;
-    transition: font-size 300ms ease-out;
-    color: formfield.$formfield-label-color;
-  }
-
-  & textarea {
-    height: $textarea-medium-text-height;
-    width: 100%;
-    outline: none;
-    border: none;
-    box-shadow: none;
-    resize: none;
-    background-color: transparent;
-    color: themes.$color-text-active;
-  }
-
-  & &__resizer {
-    position: absolute;
-    bottom: $textarea-resizer-margin-bottom;
-    right: $textarea-resizer-margin-right;
-    rotate: -45deg;
-    width: 1em;
-    height: 1em;
-
-    &:hover {
-      cursor: nwse-resize;
-    }
-
-    &::before {
-      content: '';
-      display: flex;
-      background-color: darkslategrey;
-      width: 10px;
-      height: 1px;
-    }
-
-    &::after {
-      content: '';
-      display: flex;
-      position: relative;
-      right: -3px;
-      bottom: -2px;
-      background-color: darkslategrey;
-      width: 4px;
-      height: 1px;
-    }
-  }
-
-  &.textarea-field--with-label {
-    height: $textarea-with-label-medium-height;
-    padding-top: $textarea-with-label-text-margin-top;
-
-    &.textarea-field--floated .textarea-field__label {
-      top: $textarea-medium-label-floated-margin-top;
-      line-height: $textarea-small-label-floated-font-line-height;
-      font-size: $textarea-small-label-floated-font-size;
-    }
-
-    &.textarea-field--small {
-      height: $textarea-with-label-small-height;
-      padding-top: $textarea-small-label-margin-top;
-      top: $textarea-small-label-floated-margin-top;
-
-      & .textarea-field__label {
-        font-size: $textarea-small-label-font-size;
-        font-weight: $textarea-small-label-font-weight;
-        letter-spacing: $textarea-small-label-font-letter-spacing;
-      }
-    }
-  }
-
-  &.textarea-field--focused {
-    border-color: formfield.$formfield-border-color-focus;
-    background-color: transparent;
-  }
-
-  &.textarea-field--small {
-    padding-top: $textarea-without-label-small-text-margin-top;
-    height: $textarea-without-label-small-height;
-
-    & textarea {
-      height: $textarea-small-text-height;
-    }
-  }
-}
@@ -1,70 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
-@use '@beeline/design-tokens/scss/tokens/globals';
-@use '@beeline/design-tokens/scss/tokens/themes' as theme;
-
-.textfield {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: globals.$size-control-height-medium;
-  border: globals.$size-border-width-regular solid transparent;
-  padding-top: $textfield-without-label-medium-text-margin-vertical;
-  padding-bottom: $textfield-without-label-medium-text-margin-vertical;
-  background-color: theme.$color-control-background;
-  border-radius: 12px; // globals.$size-border-radius-x6;
-
-  &:hover {
-    background-color: theme.$color-control-background-hover;
-  }
-
-  // input
-  input {
-    outline: none;
-    box-shadow: none;
-  }
-
-  // label
-  &--with-label {
-    // padding-top: $textfield-with-label-medium-text-margin-top;
-    // padding-bottom: $textfield-with-label-medium-text-margin-bottom;
-  }
-
-  &__label {
-    // padding-top: $textfield-medium-label-margin-top;
-
-    &.textfield__label--floated {
-      // padding-top: $textfield-medium-label-margin-top-floated;
-    }
-  }
-
-  // small
-  &--small {
-    height: globals.$size-control-height-small;
-  }
-
-  // large
-  &--large {
-    height: globals.$size-control-height-large;
-    padding-top: $textfield-without-label-large-text-margin-vertical;
-    padding-bottom: $textfield-without-label-large-text-margin-vertical;
-
-    &.textfield--with-label {
-      padding-top: $textfield-with-label-large-text-margin-top;
-      padding-bottom: $textfield-with-label-large-text-margin-bottom;
-    }
-
-    .textfield__label {
-      padding-top: $textfield-large-label-margin-top;
-
-      &.textfield__label--floated {
-        padding-top: $textfield-large-label-margin-top-floated;
-      }
-    }
-  }
-
-  // states
-  &--focused {
-    border-color: theme.$color-border-focus;
-    background-color: theme.$color-background-base;
-  }
-}
@@ -1,5 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as *;
-
-.app-bg-status-error {
-  background-color: $color-status-error-background;
-}
@@ -1,3 +0,0 @@
-.app-cursor-pointer {
-  cursor: pointer;
-}
@@ -1,4 +0,0 @@
-@import 'text';
-@import 'color';
-@import 'media';
-@import 'common';
@@ -1,80 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as theme;
-@use 'src/assets/scss/app/mixins' as mixins;
-
-@mixin truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@mixin truncate-lines($lines: 2) {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $lines;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.app-text-active {
-  color: theme.$color-text-active;
-}
-
-.app-text-inactive {
-  color: theme.$color-text-inactive;
-}
-
-// styles for hyperlinks
-.app-link {
-  color: theme.$color-text-active;
-
-  &:hover {
-    color: theme.$color-text-active;
-  }
-}
-
-.app-text-caption {
-  @include mixins.text-caption;
-}
-
-.app-text-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// Sizes
-.app-text-size-subtitle-3 {
-  font-size: 15px;
-  line-height: 20px;
-  font-weight: 500;
-  letter-spacing: 0.2px;
-}
-
-.app-text-size-body-3 {
-  font-size: 15px;
-  line-height: 18px;
-  letter-spacing: 0.2px;
-  font-weight: 400;
-}
-
-// Colors
-.app-text-color-caption {
-  color: theme.$color-text-inactive;
-}
-.app-text-warning {
-  color: theme.$color-status-warning;
-}
-.app-text-info {
-  color: theme.$color-status-info;
-}
-.app-text-error {
-  color: theme.$color-status-error;
-}
-.app-text-success {
-  color: theme.$color-status-success;
-}
-
-// Breaks
-.app-break-keep-all {
-  word-break: keep-all;
-}
@@ -1 +0,0 @@
-@import 'spinner';
@@ -1,6 +0,0 @@
-@use 'src/assets/scss/app/variables' as v;
-
-.app-loading-screen {
-  display: block;
-  height: calc(100vh - v.$app-header-height);
-}
@@ -1 +0,0 @@
-@forward 'text';
@@ -1,29 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as theme;
-
-%text_caption {
-  font-size: 13px;
-  line-height: 16px;
-}
-
-@mixin text_caption {
-  @extend %text_caption;
-  color: theme.$color-text-inactive;
-}
-
-@mixin text_caption_error {
-  @extend %text_caption;
-  color: theme.$color-status-error;
-}
-
-@mixin text_body_2 {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 17px;
-  line-height: 22px;
-}
-
-@mixin truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
@@ -1,10 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-
-:root {
-  @include themes.theme();
-}
-
-.dark-theme {
-  @include themes.theme(dark.$theme);
-}
@@ -1,3 +0,0 @@
-@use '@beeline/design-tokens/scss/font-face' with (
-  $font-path-beeline-sans: '../fonts/beeline-sans'
-);
@@ -1,40 +0,0 @@
-// @use "@beeline/design-tokens/scss/iconfont/iconfont" with (
-//     $font-path-iconfont: '../fonts/iconfont'
-// );
-@use '@beeline/design-tokens/scss/iconfont/icons';
-
-@font-face {
-  font-display: block;
-  font-family: 'BeelineIcons';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'),
-    url('../fonts/iconfont/BeelineIcons.woff') format('woff'),
-    url('../fonts/iconfont/BeelineIcons.ttf') format('ttf');
-}
-
-.beeline-icons {
-  font-family: 'BeelineIcons', sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px; /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
@@ -1,4 +0,0 @@
-@import 'fonts';
-@import 'icons';
-@import 'base';
-@import 'scrollbar';
@@ -1,29 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes';
-
-html {
-  scrollbar-color: themes.$color-text-inactive transparent;
-}
-
-* {
-  scrollbar-width: thin;
-}
-
-body::-webkit-scrollbar {
-  display: none;
-}
-
-::-webkit-scrollbar {
-  width: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: themes.$color-text-inactive;
-  border: 4px solid transparent;
-  background-clip: content-box;
-  border-radius: 100px;
-  min-height: 28px;
-}
@@ -1,51 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/globals';
-@use '@beeline/design-tokens/scss/tokens/themes/light';
-@use '@beeline/design-tokens/scss/tokens/components/button';
-
-// Colors
-$primary: globals.$color-background-brand;
-$background: map.get(light.$theme, 'color-background-base');
-$info: map.get(light.$theme, 'color-status-info');
-$success: map.get(light.$theme, 'color-status-success');
-$warning: map.get(light.$theme, 'color-status-warning');
-$danger: map.get(light.$theme, 'color-status-error');
-
-// Typography
-$family-primary: globals.$font-family-text;
-$title-color: map.get(light.$theme, 'color-text-active');
-$subtitle-color: map.get(light.$theme, 'color-text-inactive');
-
-// Radius
-$radius: globals.$size-border-radius-x6;
-
-// Buttons
-$button-padding-vertical: globals.$size-spacing-x4;
-$button-padding-horizontal: globals.$size-spacing-x5;
-$button-background-color: button.$button-plain-background-color;
-$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused');
-$button-disabled-opacity: button.$button-opacity-disabled;
-
-// Box
-$box-radius: $radius;
-$box-shadow: globals.$elevation-low;
-$box-padding: globals.$size-spacing-x6;
-$box-link-hover-shadow: globals.$elevation-medium;
-$box-link-active-shadow: globals.$elevation-medium;
-
-// Form
-$input-color: map.get(light.$theme, 'color-text-active');
-$input-background-color: map.get(light.$theme, 'color-control-background');
-$label-color: map.get(light.$theme, 'color-text-inactive');
-$label-weight: globals.$font-weight-caption;
-
-// Table
-$table-color: map.get(light.$theme, 'color-text-active');
-$table-background-color: map.get(light.$theme, 'color-background-base');
-$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background');
-$table-cell-padding: 16px 16px;
-$table-cell-heading-color: map.get(light.$theme, 'color-text-active');
-$table-head-cell-border-width: 1px;
-
-@import 'bulma/bulma';
-@import 'overrides';
@@ -1,12 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-
-.box {
-  .dark-theme & {
-    background-color: map.get(dark.$theme, 'color-background-low');
-
-    &:hover {
-      background-color: map.get(dark.$theme, 'color-background-medium');
-    }
-  }
-}
@@ -1,11 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/components/button' as button;
-@use '@beeline/design-tokens/scss/tokens/themes';
-
-.button {
-  font-weight: button.$button-medium-text-font-weight;
-  color: themes.$color-text-active;
-
-  &:hover {
-    color: themes.$color-text-active;
-  }
-}
@@ -1,16 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes';
-
-.dropdown {
-  &-content {
-    background-color: themes.$color-background-medium;
-  }
-
-  .dropdown-item {
-    color: themes.$color-text-active;
-
-    &:hover {
-      background-color: themes.$color-background-base-hover;
-      color: themes.$color-text-active;
-    }
-  }
-}
@@ -1,7 +0,0 @@
-@import 'button';
-@import 'title';
-@import 'box';
-@import 'form';
-@import 'table';
-@import 'dropdown';
-@import 'text';
@@ -1,42 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/globals';
-@use '@beeline/design-tokens/scss/tokens/themes/light';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-@use '@beeline/design-tokens/scss/tokens/components/button';
-
-.table {
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-active');
-    background-color: map.get(dark.$theme, 'color-background-base');
-
-    td,
-    th {
-      border: 1px solid map.get(dark.$theme, 'color-control-background');
-    }
-
-    th {
-      color: map.get(dark.$theme, 'color-text-active');
-    }
-  }
-
-  td,
-  th {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  th {
-    font-weight: globals.$font-weight-medium;
-  }
-
-  tbody {
-    tr {
-      &:last-child {
-        td,
-        th {
-          border-bottom-width: 1px;
-        }
-      }
-    }
-  }
-}
@@ -1,15 +0,0 @@
-@use '@beeline/design-tokens/scss/tokens/themes' as *;
-
-code {
-  background-color: $color-background-base;
-}
-
-pre {
-  color: $color-text-active;
-  background-color: $color-background-base;
-}
-
-.help {
-  font-size: 13px;
-  line-height: 16px;
-}
@@ -1,38 +0,0 @@
-@use '@beeline/design-tokens/scss/mixin' as bee;
-
-.title {
-  @include bee.h3();
-
-  &.is-1 {
-    @include bee.h1();
-  }
-  &.is-2 {
-    @include bee.h2();
-  }
-  &.is-3 {
-    @include bee.h3();
-  }
-  &.is-4 {
-    @include bee.h4();
-  }
-  &.is-5 {
-    @include bee.h5();
-  }
-  &.is-6 {
-    @include bee.h6();
-  }
-}
-
-.subtitle {
-  @include bee.subtitle2();
-
-  &.is-1 {
-    @include bee.subtitle1();
-  }
-  &.is-2 {
-    @include bee.subtitle2();
-  }
-  &.is-3 {
-    @include bee.subtitle3();
-  }
-}
@@ -1,4 +0,0 @@
-@import 'shared';
-@import 'select';
-@import 'input-textarea';
-@import 'title';
@@ -1,46 +0,0 @@
-@use 'sass:map';
-// @use "@beeline/design-tokens/scss/tokens/globals";
-@use '@beeline/design-tokens/scss/tokens/themes/light';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-
-%input-textarea {
-  box-shadow: none;
-  border: 1px solid transparent;
-  color: map.get(light.$theme, 'color-text-active');
-  background: map.get(light.$theme, 'color-control-background');
-
-  &:hover {
-    border-color: map.get(light.$theme, 'color-border-focus');
-  }
-
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-active');
-    background: map.get(dark.$theme, 'color-control-background');
-
-    &:hover {
-      border-color: map.get(dark.$theme, 'color-border-focus');
-    }
-  }
-
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active {
-    box-shadow: none !important;
-    border-color: map.get(light.$theme, 'color-border-focus');
-    background: map.get(light.$theme, 'color-background-base');
-
-    .dark-theme & {
-      background: map.get(dark.$theme, 'color-background-base');
-      border-color: map.get(dark.$theme, 'color-border-focus');
-    }
-  }
-}
-
-.input {
-  @extend %input-textarea;
-}
-
-.textarea {
-  @extend %input-textarea;
-}
@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-@use '@beeline/design-tokens/scss/tokens/themes/light';
-
-.select {
-  select {
-    border: 1px solid transparent;
-
-    &:focus,
-    &:active {
-      border: 1px solid map.get(light.$theme, 'color-border-focus');
-      background-color: map.get(light.$theme, 'color-background-base');
-      box-shadow: none;
-    }
-  }
-
-  &:not(.is-multiple):not(.is-loading)::after {
-    content: none;
-  }
-
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active {
-    select {
-      border: 1px solid map.get(light.$theme, 'color-border-focus');
-      background-color: map.get(light.$theme, 'color-background-base');
-      box-shadow: none;
-    }
-
-    .dark-theme & {
-      select {
-        border: 1px solid map.get(dark.$theme, 'color-border-focus');
-        background-color: map.get(dark.$theme, 'color-background-base');
-        box-shadow: none;
-      }
-    }
-  }
-
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-active');
-
-    & select {
-      color: map.get(dark.$theme, 'color-text-active');
-      background-color: map.get(dark.$theme, 'color-control-background');
-    }
-  }
-}
@@ -1,11 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/globals';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-
-.label {
-  line-height: globals.$font-line-height-caption;
-
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-inactive');
-  }
-}
@@ -1,14 +0,0 @@
-@use 'sass:map';
-@use '@beeline/design-tokens/scss/tokens/themes/dark';
-
-.title {
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-active');
-  }
-}
-
-.subtitle {
-  .dark-theme & {
-    color: map.get(dark.$theme, 'color-text-inactive');
-  }
-}
@@ -1,8 +0,0 @@
-@use 'beeline';
-@use 'bulma';
-@use 'app';
-
-.proto {
-  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-  color: #f55;
-}
@@ -0,0 +1,8 @@
+# О сервисе
+
+Сервиса **Резервное копирование** — это сервис для сохранения данных и конфигураций виртуальных машин с возможностью последующего восстановления. В облачной среде резервные копии позволяют вернуть систему в рабочее состояние после сбоя и поддерживать доступность сервисов.
+
+Резервное копирование подключается:
+
+- для [виртуальных машин, развернутых в Beeline Cloud](./backup-internal-infra.md);
+- для [собственной инфраструктуры](./backup-external-infra.md).
@@ -0,0 +1,54 @@
+# Резервное копирование собственной инфраструктуры в Beeline Cloud
+
+## Перед началом работы
+
+- Зарегистрируйтесь в [личном кабинете Beeline Cloud](https://console.cloud.beeline.ru/).
+- [Создайте](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра) виртуальный дата-центр.
+- [Создайте](../vdc/vdc-how-to/vm/create-vm.md) виртуальную машину в виртуальном дата-центре.
+
+## Подключить резервное копирование
+
+1. Войдите в [личный кабинет Beeline Cloud](https://lk.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню перейдите в **Сервисы** → **Резервное копирование**.
+4. Нажмите кнопку **Создать хранилище**.
+5. В разделе **Инфраструктура для копирования** выберите опцию **Локальная**.
+6. В разделе **Тип подключения** выберите способ резервного копирования:
+   - **Veeam Agent**: резервное копирование в beeline cloud при помощи Veeam Agent.
+   - **Veeam Cloud Connect**: подключение Veeam к облачному репозиторию beeline cloud.
+   - **Киберпроект**: резервное копирование в beeline cloud при помощи Киберпротект.
+
+:::tabs
+
+== Veeam Agent / Veeam Cloud Connect
+
+- В разделе **Сетевые подключения** выберите тип подключения:
+
+  - **Интернет**: интернет-соединение.
+  - **L2 или L3 канал**: выделенное интернет-соединение.
+  - для **L2 или L3 канал** укажите способ связи с вами и удобное время для консультации с менеджером Beeline Cloud.
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+== Киберпроект
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+
+- В разделе **Параметры** укажите:
+
+  - **ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Базы данных**: количество баз данных, которое нужно подключить к сервису.
+  - **Серверы**: количество серверов, которое нужно подключить к сервису.
+  - **Устройства**: количество рабочих столов (VDI), которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+:::
+
+7. Нажмите кнопку **Создать хранилище**.
+
+Подключение резервного копирования занимает до 3 дней. Статус подключения сервиса отображается в личном кабинете Beeline Cloud.
+
+Данные для доступа к ПО для настройки резервного копирования будут отправлены на электронную почту, указанную в личном кабинете Beeline Cloud.
@@ -0,0 +1,58 @@
+# Резервное копирование виртуальных машин Beeline Cloud
+
+## Перед началом работы
+
+- Зарегистрируйтесь в [личном кабинете Beeline Cloud](https://console.cloud.beeline.ru/).
+- [Создайте](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра) виртуальный дата-центр.
+- [Создайте](../vdc/vdc-how-to/vm/create-vm.md) виртуальную машину в виртуальном дата-центре.
+
+## Подключить резервное копирование
+
+1. Войдите в [личный кабинет Beeline Cloud](https://lk.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню перейдите в **Сервисы** → **Резервное копирование**.
+4. Нажмите кнопку **Создать хранилище**.
+5. В разделе **Инфраструктура для копирования** выберите опцию **В облаке**.
+6. В разделе **Управление** выберите способ резервного копирования:
+   - **Самостоятельно**.
+   - **Провайдером**.
+
+:::: tabs
+
+== Провайдером
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+- В разделе **Политика резервного копирования** укажите настройки резервного копирования:
+
+  - **Глубина хранения**: время хранения резервных копий.
+  - **Полное резервное копирование**: количество полных копий в день.
+  - **Инкрементальное резервное копирование**: количество инкрементальных копий в день.
+  - **Окно резервного копирования**: выберите время запуска резервного копирования.
+
+::: details Чем полная копия отличается от инкрементной?
+Полное резервное копирование — это создание копии всех данных виртуальной машины за одну операцию. Полная копия подходит для восстановления без зависимости от других сохранений.
+
+Инкрементное резервное копирование — это сохранение только измененных данных относительно предыдущей копии. Это уменьшает объем хранения и ускоряет процесс при регулярном копировании.
+:::
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+== Самостоятельно
+
+- В разделе **Общее** выберите [дата-центр](../vdc/vdc-how-to/vdc-create.md#создание-дата-центра), к которому нужно подключить резервное копирование.
+
+- В разделе **Параметры** укажите:
+
+  - **Количество ВМ**: количество виртуальных машин, которое нужно подключить к сервису.
+  - **Объем хранилища**: объем хранилища для резервных копий.
+
+::::
+
+1.  Нажмите кнопку **Создать хранилище**.
+
+Подключение резервного копирования занимает до 3 дней. Статус подключения сервиса отображается в личном кабинете Beeline Cloud.
+
+Данные для доступа к ПО для настройки резервного копирования будут отправлены на электронную почту, указанную в личном кабинете Beeline Cloud.
@@ -0,0 +1,27 @@
+# Квоты и лимиты
+
+Квоты — это организационные ограничения на количество доступных ресурсов в сервисе. В некоторых случаях квоты могут быть увеличены или уменьшены по запросу.
+
+Лимиты — это технические ограничения на количество доступных ресурсов в сервисе. Ограничения, обычно, связаны с характеристиками оборудования и особенностями архитектуры.
+
+## Квоты
+
+### Бесплатный период
+
+В [бесплатном периоде](../start/trial.md) использования Beeline Cloud установлены квоты на ресурсы сервиса:
+
+| Вид ограничения     | Значение |
+| ------------------- | -------- |
+| Количество хранилищ | 1        |
+| Количество виртуальных машин       | 5        |
+| Объем хранилища     | 1 ПБ     |
+
+### Платное использование
+
+| Вид ограничения     | Значение      |
+| ------------------- | ------------- |
+| Количество хранилищ | Неограниченно |
+| Количество виртуальных машин       | 999           |
+| Объем хранилища     | 1 ПБ          |
+
+Если вы заключили договор с Beeline Cloud, то объем хранилища и количество ВМ можно увеличить. Для этого обратитесь в [техническую поддержку](../platform/support/support-overview.md).
@@ -0,0 +1,11 @@
+---
+section_links:
+  - title: О сервисе
+    link: /backups/about.md
+    description: Назначение сервиса 
+  - title: Квоты и лимиты
+    link: /backups/backup-quatos.md
+    description: Ограничения на количество ресурсов в сервисе  
+---
+
+# Обзор сервиса
@@ -0,0 +1,17 @@
+---
+section_links:
+  - title: Обзор сервиса
+    link: /backups/about.md
+    description: Обзор сервиса, квоты и лимиты
+  - title: Резервное копирование виртуальных машин Beeline Cloud
+    link: /backups/backup-internal-infra.md
+    description: Резервное копирование инфраструктуры, расположенной в контуре Beeline Cloud
+  - title: Резервное копирование собственной инфраструктуры в Beeline Cloud
+    link: /backups/backup-external-infra.md
+    description: Резервное копирование вашей инфраструктуры в облако Beeline Cloud
+  - title: Каталог резервных копий
+    link: /backups/view-backups.md
+    description: Просмотр ресурсов, к которым подключено резервное копирование 
+--- 
+
+# Резервное копирование
@@ -0,0 +1,30 @@
+# Каталог резервных копий
+
+## Посмотреть каталог резервных копий
+
+Чтобы посмотреть, к каким ресурсам у подключено резервное копирование:
+
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Резервное копирование**.
+4. Откроется каталог резервных копий.
+
+## Посмотреть детали подключенного резервного копирования
+
+1. Выберите из каталога резервную копию.
+2. Откроется карточка услуги резервного копирования. В карточке отображаются:
+
+   - Цена услуги,
+   - Подключенная инфраструктура,
+   - Тип управления,
+   - ПО, используемое для резервного копирования,
+   - Тенант,
+   - Объем хранилища.
+
+:::tip Информация
+
+В карточке услуги отображаются только параметры, выбранные при первичном подключении резервного копирования.
+
+Если изменить параметры резервного копирования в ПО Киберпротект, Veeam Cloud Connect или Veeam Agent, данные в консоли Beeline Cloud не обновятся. Но стоимость услуг формируется согласно объему использованных ресурсов в ПО Киберпротект, Veeam Cloud Connect или Veeam Agent.
+
+:::
@@ -1,64 +0,0 @@
-# Группы размещения
-
-Группы размещения — это правила размещения виртуальных машин на физических хостах. Правила размещения позволяют создавать виртуальные машины на разных или на одном хосте. Политика размещения виртуальных машин действует в рамках одной зоны доступности.
-
- Правило `Affinity` размещает ВМ обязательно на одном физическом хосте.
-
- Правило `Soft-Affinity` размещает ВМ по возможности на одном физическом хосте.
-
- Правило `Anti-Affinity` размещает ВМ обязательно на разных физических хостах. Такое размещение повышает производительность и предотвращает недоступность ВМ при отказе хоста.
-
- Правило `Soft-Anti-Affinity` размещает ВМ по возможности на разных физических хостах.
-
-::: warning Важно
-В группу размещения можно добавить новую ВМ. Во время создания ВМ укажите группу размещения, к которой будет принадлежать ВМ.
-
-Существующая ВМ не может быть добавлена в группу размещения.
-
-ВМ может быть создана в группе размещения, если для выполнения правила есть ресурсы в зоне доступности. Если ресурсов нет, то ВМ не будет создан.
-:::
-
-## Создать группу размещения
-
-1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
-2. Выберите нужный проект в верхнем меню **Проекты**.
-3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Виртуальные машины**.
-4. В левом меню откройте раздел **Группы размещения**.
-5. Нажмите **Создать группу**.
-6. Введите параметры группы размещения:
-   - **Имя группы размещения**: введите имя группы размещения.
-   - выберите правило размещения.
-   - **Зона доступности**: выберите зону доступности, в которой будут создаваться виртуальные машины по правилу размещения.
-   - добавьте тег группе размещения при необходимости.
-7. Нажмите **Создать группу**.
-
-## Добавить виртуальную машину в группу размещения
-
-Принадлежность виртуальной машины к группе размещения указывается во время [создания ВМ](../compute-how-to/compute-servers-create.md#создать-виртуальную-машину). Уже созданную виртуальную машину нельзя добавить в группу размещения.
-
-## Редактировать группу размещения
-
-В группе размещения можно изменить название группы и редактировать теги.
-
-1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
-2. Выберите нужный проект в верхнем меню **Проекты**.
-3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Виртуальные машины**.
-4. В левом меню откройте раздел **Группы размещения**.
-5. Переименовать группу размещения:
-   - Нажмите на название группы в списке групп.
-   - Нажмите на &hellip; и выберите **Переименовать**.
-   - Введите новое имя группы размещения.
-   - Нажмите &#10003;.
-6. Редактировать теги группы размещения:
-   - Нажмите на название группы в списке групп.
-   - Нажмите **Редактировать теги**.
-   - Добавьте или удалите теги.
-   - Нажмите **Сохранить**.
-
-## Удалить группу размещения
-
-1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
-2. Выберите нужный проект в верхнем меню **Проекты**.
-3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Виртуальные машины**.
-4. В левом меню откройте раздел **Группы размещения**.
-5. Справа от названия группы размещения нажмите кнопку ![del](../compute-how-to/image/delete.png).
@@ -1,6 +1,6 @@
 # Подключение по SSH по внутреннему IP-адресу с помощью ключевой пары

-Виртуальные машины, созданные в [зоне доступности `Inside` или `DMZ`](../compute-overview.md#зоны-доступности), с внутренним IP-адресом недоступны из интернета. Чтобы подключиться по SSH к ВМ по внутреннему IP-адресу из интернета, используйте промежуточную виртуальную машину (джамп-хост) с [внешним IP-адресом (FIP)](compute-ip.md#внешние-ip-адреса).
+Виртуальные машины, созданные в [зоне доступности `Inside` или `DMZ`](../compute-overview.md#зоны-доступности), с внутренним IP-адресом недоступны из интернета. Чтобы подключиться по SSH к ВМ по внутреннему IP-адресу из интернета, используйте промежуточную виртуальную машину (джамп-хост) с [внешним IP-адресом (FIP)](../compute-how-to/compute-ip/compute-ip-about.md#внешние-ip-адреса).

 ## Перед началом работы

@@ -8,7 +8,7 @@

 - Статус виртуальной машины — `Включена`.
 - [Создана промежуточная ВМ](compute-servers-jump-create.md), через которую будет выполняться подключение к ВМ.
- Виртуальной машине [назначен](../compute-how-to/compute-ip.md#внутренние-ip-адреса) внутренний IP-адрес.
+- Виртуальной машине [назначен](../compute-how-to/compute-ip/compute-ip-about.md#внутренние-ip-адреса) внутренний IP-адрес.
 - Имя пользователя для входа на ВМ.
 - Подготовлена ключевая пара для подключения к ВМ по SSH:
  - приватный ключ сохранен на компьютере, с которого выполняется подключение;
@@ -11,7 +11,7 @@
 Перед подключением проверьте выполнение условий и наличие данных:

 - Статус виртуальной машины — `Включена`.
- Виртуальной машине [назначен](../compute-how-to/compute-ip.md#назначить-вм-внешний-ip-адрес) внешний IP-адрес.
+- Виртуальной машине [назначен](../compute-how-to/compute-ip/compute-ip-manager.md#назначить-вм-внешний-ip-адрес) внешний IP-адрес.
 - Узнайте имя пользователя для входа на ВМ.
 - Приватная часть SSH-ключа сохранена на компьютере, с которого выполняется подключение.

@@ -24,7 +24,7 @@

 = по внешнему IP-адресу

-Если ВМ создана в зоне `DMZ` и ей присвоен [внешний IP-адрес](compute-ip.md#внешние-ip-адреса), то для подключения к ВМ выполните:
+Если ВМ создана в зоне `DMZ` и ей присвоен [внешний IP-адрес](./compute-ip/compute-ip-about.md#внешние-ip-адреса), то для подключения к ВМ выполните:

 1. Откройте терминал.
 2. Выполните команду в терминале:
@@ -0,0 +1,7 @@
+# Диски
+
+Хранение данных организовано с использованием сетевых дисков. Диск создается в определенной зоне доступности. Каждый диск автоматически реплицируется внутри своей зоны доступности, что обеспечивает надежное хранение данных.
+
+Загрузочный диск создается вместе с виртуальным ВМом. Конфигурация загрузочного диска задается на этапе [создания ВМ](../compute-servers-create.md#создать-виртуальную-машину). При [удалении ВМ](../compute-servers-manage.md#удалить-ВМ) загрузочный диск удалится вместе с ВМ.
+
+[Дополнительные диски можно добавить](../compute-servers-create.md#добавить-диск) на этапе создания ВМ или [создать диск позже и подключить к нужной ВМ](../compute-disks/compute-disk-create.md). При [удалении ВМ](../compute-servers-manage.md#удалить-ВМ) дополнительные диски (не загрузочные) останутся в проекте в списке дисков.
@@ -0,0 +1,21 @@
+# Создание диска
+
+Создание диска позволяет добавить новое блочное хранилище. В процессе создания можно выбрать тип диска, размер и зону доступности, а также настроить дополнительные параметры для оптимального соотношения производительности и стоимости.
+
+## Создать диск
+
+Создать диск дополнительный (не загрузочный):
+
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Виртуальные машины**.
+4. В левом меню откройте раздел **Диски**.
+5. Нажмите **Создать диск**.
+6. Введите параметры добавляемого диска:
+   - **Имя диска**: введите название диска
+   - **Зона доступности**: выберите из списка зону доступности, в которой будет создан диск.
+   - **Тип**: выберите из списка тип хранения.
+   - **Размер диска**: введите размер добавляемого диска в Гб.
+7. Нажмите **Создать диск**.
+
+На странице **Диски** будет добавлен новый диск, но не подключен к какой-либо виртуальной машине. Диск можно [подключить к ВМ](../compute-disks/compute-disk-manage.md#подключить-диск-к-вм).
@@ -0,0 +1,19 @@
+# Удаление диска
+
+Удаление диска позволяет освободить ресурсы хранилища после завершения работы с данными. Перед удалением необходимо убедиться, что диск [отключен](../compute-disks/compute-disk-manage.md#отключить-диск-от-вм) от всех виртуальных машин и не содержит критически важных данных без резервных копий.
+
+## Удалить диск
+
+::: danger Предупреждение
+Удаление диска необратимо. Все данные будут удалены без возможности восстановления.
+:::
+
+1. Войдите в [личный кабинет](https://console.cloud.beeline.ru/).
+2. Выберите нужный проект в верхнем меню **Проекты**.
+3. В верхнем меню нажмите на пункт **Сервисы** и выберите сервис **Виртуальные машины**.
+4. В левом меню откройте раздел **Диски**.
+5. Нажмите на имя диска.
+6. Нажмите на &hellip; и выберите **Удалить**.
+7. В открывшемся окне подтвердите операцию:
+   - Введите имя удаляемого диска.
+   - Нажмите **Удалить**.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aleksandr Anisin	c0f94d4ea7	Обновление названий сервисов	2026-03-09 18:14:00 +03:00
Речкина Елена Валерьевна	df88416247	Merge branch 'feature/VEGA-6262-add-static-copy-plugin' into 'main' VEGA-6267: добавление автоматического обновления шрифтов дизайн-системы и отключение темной темы See merge request common/vega/beecloud-docs!78	2026-01-20 11:28:37 +00:00
Захаров Дмитрий Анатольевич	b948e5a433	VEGA-6267: добавление автоматического обновления шрифтов дизайн-системы и отключение темной темы	2026-01-20 11:28:37 +00:00
Elena Rechkina	dfebbc3c45	Форматирование	2026-01-14 12:09:23 +06:00
Речкина Елена Валерьевна	37d1f1f17e	Merge branch 'feature/placement-groups' into 'main' Корректировка раздела "Группы размещения" #VEGA-6214 See merge request common/vega/beecloud-docs!77	2026-01-14 06:07:29 +00:00
Левченко Людмила Алексеевна	968dc9de10	Корректировка раздела "Группы размещения" #VEGA-6214	2026-01-14 06:07:29 +00:00
Речкина Елена Валерьевна	d126d05f4d	Merge branch 'feature/IP-address' into 'main' Корректировка раздела IP-адреса #VEGA-6213 See merge request common/vega/beecloud-docs!74	2026-01-13 12:41:24 +00:00
Левченко Людмила Алексеевна	3c441310a4	Корректировка раздела IP-адреса #VEGA-6213	2026-01-13 12:41:24 +00:00
Речкина Елена Валерьевна	f5d44a3f8f	Merge branch 'feature/disks' into 'main' Форматирование раздела "Диски" #VEGA-6212 See merge request common/vega/beecloud-docs!70	2026-01-13 09:50:36 +00:00
Левченко Людмила Алексеевна	386e89f8f3	Форматирование раздела "Диски" #VEGA-6212	2026-01-13 09:50:36 +00:00
Elena Rechkina	ba4d5e80e2	Форматирование	2026-01-13 13:11:04 +06:00
Бурденко Алексей	8eb2c67453	up ci	2026-01-12 14:33:43 +03:00
Бурденко Алексей	36ba0c1f0a	up ci	2026-01-12 12:59:52 +03:00
Бурденко Алексей Иванович	a42f281613	Merge branch 'feature/fix-ib' into 'main' fix-ib-csp-2200 See merge request common/vega/beecloud-docs!67	2026-01-12 09:53:45 +00:00
Бурденко Алексей Иванович	e3cf876ccc	fix-ib-csp-2200	2026-01-12 09:53:45 +00:00
Речкина Елена Валерьевна	f83c928c47	Merge branch 'feature/VEGA-6262-fix-icons' into 'main' VEGA-6262: исправление отображения иконок See merge request common/vega/beecloud-docs!75	2025-12-25 10:23:12 +00:00
Дмитрий Захаров	f17badaa68	VEGA-6262: исправление отображения иконок	2025-12-25 12:53:31 +03:00
Elena Rechkina	32731bda89	Правка ссылок	2025-12-22 19:28:23 +06:00
Elena Rechkina	4afd915f49	Форматирование	2025-12-22 19:24:21 +06:00
Elena Rechkina	54e7130488	Мелкие правки	2025-12-22 19:06:40 +06:00
Elena Rechkina	f66984ced0	version	2025-12-22 19:01:32 +06:00
Elena Rechkina	b3a8881074	up version	2025-12-22 16:49:21 +06:00
Elena Rechkina	96e7b4827a	Подготовка к публикации	2025-12-22 16:48:37 +06:00
Речкина Елена Валерьевна	4019438a48	Merge branch 'fix/content#VEGA-4928' into 'main' VEGA-4928 Исправление отображения контента details и размер шрифта в содержании See merge request common/vega/beecloud-docs!73	2025-12-19 14:27:25 +00:00
Русович Виолетта Игоревна	0ad71bd579	VEGA-4928 Исправление отображения контента details и размер шрифта в содержании	2025-12-19 14:27:25 +00:00
Речкина Елена Валерьевна	a7e57c575d	Merge branch 'fix/search-content#VEGA-5235' into 'main' VEGA-5235 Исправление отображения контента при поиске See merge request common/vega/beecloud-docs!68	2025-12-19 05:34:31 +00:00
Русович Виолетта Игоревна	4270668c7c	VEGA-5235 Исправление отображения контента при поиске	2025-12-19 05:34:31 +00:00
Elena Rechkina	9432e755e6	Форматирование	2025-12-18 16:11:12 +06:00
Речкина Елена Валерьевна	5e284757e7	Merge branch 'feature/admin' into 'main' Корректировка раздела "Администрирование" #VEGA-6215 See merge request common/vega/beecloud-docs!71	2025-12-18 09:30:21 +00:00
Речкина Елена Валерьевна	bd08e437b6	Корректировка раздела "Администрирование" #VEGA-6215	2025-12-18 09:30:21 +00:00
Elena Rechkina	49a7b5e0b4	Подготовка к публикации	2025-12-18 14:28:23 +06:00
Речкина Елена Валерьевна	81ee62ef52	Merge branch 'fix/content-docs#VEGA-4929' into 'main' VEGA-5038 Адаптация контента страниц документации See merge request common/vega/beecloud-docs!33	2025-12-18 07:42:39 +00:00
Русович Виолетта Игоревна	601bec1af2	VEGA-5038 Адаптация контента страниц документации	2025-12-18 07:42:39 +00:00
Речкина Елена Валерьевна	efbdef87fa	Merge branch 'feature/vdi' into 'main' VDI_Подготовка описания сервиса #VEGA-4996 See merge request common/vega/beecloud-docs!36	2025-12-18 07:41:34 +00:00
Речкина Елена Валерьевна	b794e5aebd	VDI_Подготовка описания сервиса #VEGA-4996	2025-12-18 07:41:34 +00:00
Elena Rechkina	9e3bf98788	Правка инф по ограничениям	2025-12-16 13:50:27 +06:00
Elena Rechkina	ef38318ce8	Форматирование после слияния	2025-12-15 17:13:35 +06:00
Речкина Елена Валерьевна	6619c5cc7f	Merge branch 'feature/free-period' into 'main' Бесплатный период #VEGA-6071 See merge request common/vega/beecloud-docs!66	2025-12-15 10:12:45 +00:00
Левченко Людмила Алексеевна	70553ded2f	Бесплатный период #VEGA-6071	2025-12-15 10:12:45 +00:00
Речкина Елена Валерьевна	184fe5eb1b	Merge branch 'feature/vpn' into 'main' Документация по настройке VPN #VEGA-6073 See merge request common/vega/beecloud-docs!56	2025-12-15 10:11:41 +00:00
Анисин Александр Александрович	f6111628b0	Документация по настройке VPN #VEGA-6073	2025-12-15 10:11:41 +00:00
Elena Rechkina	94bc0035d3	Опечатки	2025-12-10 19:59:15 +06:00
Elena Rechkina	d2e654bf25	Опечатки	2025-12-10 19:55:40 +06:00
Elena Rechkina	36f291aba4	Форматирование, ссылки	2025-12-10 15:07:23 +06:00
Речкина Елена Валерьевна	41840e657a	Merge branch 'feature/data-center' into 'main' Внесение адреса для дата-центра #VEGA-6069 See merge request common/vega/beecloud-docs!64	2025-12-10 08:52:41 +00:00
Левченко Людмила Алексеевна	64bbd09f15	Внесение адреса для дата-центра #VEGA-6069	2025-12-10 08:52:41 +00:00
Elena Rechkina	18ad8159cd	Правки РК	2025-12-10 14:51:01 +06:00
Elena Rechkina	872b9d519f	Правки по резервному копированию	2025-12-09 18:06:33 +06:00
Речкина Елена Валерьевна	702190b65a	Merge branch 'feature/backup' into 'main' Резервное копирование #VEGA-4913 See merge request common/vega/beecloud-docs!40	2025-12-09 10:31:13 +00:00
Анисин Александр Александрович	ee6b50cb82	Резервное копирование #VEGA-4913	2025-12-09 10:31:13 +00:00
Elena Rechkina	de75b64133	Правка навигации	2025-12-09 16:27:29 +06:00
Речкина Елена Валерьевна	07052a4160	Merge branch 'feature/getting-started' into 'main' Актуализация ссылки на ЛК при регистрации See merge request common/vega/beecloud-docs!63	2025-12-03 11:53:02 +00:00
Левченко Людмила Алексеевна	99e30cda4a	Актуализация ссылки на ЛК при регистрации	2025-12-03 11:53:02 +00:00
Речкина Елена Валерьевна	2b489b529f	Merge branch 'feature/required-INN' into 'main' Изменение ИНН как обязательное поле See merge request common/vega/beecloud-docs!61	2025-12-03 08:15:24 +00:00
Левченко Людмила Алексеевна	4b32ec3950	Изменение ИНН как обязательное поле	2025-12-03 08:15:24 +00:00
Elena Rechkina	24116b1633	Правка навигации	2025-12-03 12:58:06 +06:00
Речкина Елена Валерьевна	6bcd90f9bc	Merge branch 'feature/vdc-disks' into 'main' Управление дисками в vDC See merge request common/vega/beecloud-docs!53	2025-12-02 10:11:05 +00:00
Анисин Александр Александрович	46ed947331	Управление дисками в vDC	2025-12-02 10:11:05 +00:00
Речкина Елена Валерьевна	1a600b7851	Merge branch 'edits/create-network' into 'main' VDC: упрощение 26 шагов See merge request common/vega/beecloud-docs!48	2025-12-02 08:56:05 +00:00
Анисин Александр Александрович	64d75d9aef	VDC: упрощение 26 шагов	2025-12-02 08:56:04 +00:00
Речкина Елена Валерьевна	4fdbff209f	Merge branch 'edits/edit-vm' into 'main' VDC: доработка редактирования конфигураций ВМ See merge request common/vega/beecloud-docs!49	2025-12-02 08:40:39 +00:00
Анисин Александр Александрович	63e55b74e2	VDC: доработка редактирования конфигураций ВМ	2025-12-02 08:40:39 +00:00
Речкина Елена Валерьевна	f6865fbfe4	Merge branch 'feature/technical-support' into 'main' Техническая поддержка #VEGA-5848 See merge request common/vega/beecloud-docs!60	2025-11-28 10:19:35 +00:00
Левченко Людмила Алексеевна	8775794f64	Техническая поддержка #VEGA-5848	2025-11-28 10:19:35 +00:00
Речкина Елена Валерьевна	510114e1db	Merge branch 'feature/disaster-recovery' into 'main' Аварийное восстановление #VEGA-5976 See merge request common/vega/beecloud-docs!59	2025-11-28 09:59:48 +00:00
Левченко Людмила Алексеевна	00edb34a9d	Аварийное восстановление #VEGA-5976	2025-11-28 09:59:48 +00:00
Речкина Елена Валерьевна	afd3407309	Merge branch 'fix/url-logo-docs#VEGA-5928' into 'main' VEGA-5927 Исправление url для лого See merge request common/vega/beecloud-docs!58	2025-11-24 10:19:03 +00:00
Русович Виолетта Игоревна	81bc33a1e9	VEGA-5927 Исправление url для лого	2025-11-24 10:19:03 +00:00
Речкина Елена Валерьевна	2495d86655	Merge branch 'fix/header-logo-docs#VEGA-5928' into 'main' VEGA-5927 Изменение логотипа See merge request common/vega/beecloud-docs!57	2025-11-24 08:57:29 +00:00
Русович Виолетта Игоревна	712f7ddbc0	VEGA-5927 Изменение логотипа	2025-11-24 08:57:29 +00:00
				`@@ -1 +0,0 @@`
				`@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;`