diff --git a/docs/components/all.css b/docs/components/all.css
new file mode 100644
index 0000000..141b1ac
--- /dev/null
+++ b/docs/components/all.css
@@ -0,0 +1,3421 @@
+/* 03_Участие ОПК в иннов объед 1 */
+
+position: absolute;
+width: 726px;
+height: 261px;
+
+background: url(03_Участие ОПК в иннов объед.png);
+border-radius: 24px;
+
+/* Rectangle 2459 */
+
+position: absolute;
+width: 727px;
+height: 116px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Rectangle 2460 */
+
+position: absolute;
+width: 727px;
+height: 369px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Rectangle 2461 */
+
+position: absolute;
+width: 722px;
+height: 326px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Line 17 */
+
+position: absolute;
+width: 34px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-35.84deg);
+
+/* Line 18 */
+
+position: absolute;
+width: 33.84px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-34.16deg);
+
+/* Line 19 */
+
+position: absolute;
+width: 34.76px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-140.07deg);
+
+/* Line 20 */
+
+position: absolute;
+width: 238px;
+height: 1px;
+
+border: 1px solid #abafb3;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Line 21 */
+
+position: absolute;
+width: 164px;
+height: 0px;
+
+border: 1px solid #abafb3;
+
+/* Line 22 */
+
+position: absolute;
+width: 223px;
+height: 0px;
+
+border: 1px solid #abafb3;
+
+/* Топ отраслей по количеству организаций ОПК, участвующих в инновационных объединений */
+
+position: absolute;
+width: 596.19px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 20px;
+/* or 100% */
+
+color: #000000;
+
+/* Авиационная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Радиоэлектронная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Промышленность обычных вооружений */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Промышленность боепрпасов и спецхимии */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Беспилотные системы и робототехника */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Судостроительная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 180 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 124 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 110 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 78 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 101 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 12 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* Group 277134240 */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+/* Организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 10px;
+/* or 50% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Group 277134284 */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+/* Участие организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 10px;
+/* or 50% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Frame 1943564417 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 8px;
+
+position: absolute;
+width: 1416px;
+height: 39px;
+
+/* Frame 12 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 261px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 251px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 177px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 183px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 250.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 17 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 261px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 251px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 177px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 183px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 250.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 13 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 160px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 149px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 72px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 75px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 149.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 14 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 160px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 3;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 149px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 72px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 75px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 149.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 15 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 328.41px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 4;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 318px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 251px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 257px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 318px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 16 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 192px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 5;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 170px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 118px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 118px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 181.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Group 277134242 */
+
+position: absolute;
+width: 129px;
+height: 10px;
+
+/* Bodytext */
+
+position: absolute;
+width: 114px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 5px;
+/* identical to box height, or 35% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #022456;
+
+/* Vector */
+
+position: absolute;
+width: 10px;
+height: 10px;
+
+background: #022456;
+border: 0.0540625px solid #022456;
+
+/* Union */
+
+position: absolute;
+width: 6px;
+height: 6px;
+
+background: #022456;
+
+/* Vector */
+
+position: absolute;
+width: 10px;
+height: 10px;
+
+background: #022456;
+border: 0.0540625px solid #022456;
+
+/* Rectangle 2462 */
+
+position: absolute;
+width: 722px;
+height: 460px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Rectangle 2463 */
+
+position: absolute;
+width: 2.66px;
+height: 38px;
+
+background: #022456;
+border-radius: 5.40625px;
+
+/* Субъект РФ */
+
+position: absolute;
+width: 125.21px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 1 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 41 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 63 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 32 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 46 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 31 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 18 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 13 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 8 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 7 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 20 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 21 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Московская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 22 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Республика Татарстан */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Самарская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 6 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Пензенская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 7 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Томская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 8 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Ярославская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 9 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Ульяновская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Хабаровский край */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 11 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Республика Башкортастан */
+
+position: absolute;
+width: 275.74px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Краснодарский край */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 13 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Белгородская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Волгоградская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 15 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 80px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Удмуртская Республика */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 28 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 65.34px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 23 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Челябинская область */
+
+position: absolute;
+width: 258.16px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Group 277134243 */
+
+position: absolute;
+width: 237px;
+height: 40px;
+
+/* 124 */
+
+position: absolute;
+width: 60px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* промышленных кластеров */
+
+position: absolute;
+width: 175px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134244 */
+
+position: absolute;
+width: 237px;
+height: 40px;
+
+/* 517 */
+
+position: absolute;
+width: 60px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* организаций ОПК */
+
+position: absolute;
+width: 175px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134245 */
+
+position: absolute;
+width: 223px;
+height: 40px;
+
+/* 17 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* особых экономических зон */
+
+position: absolute;
+width: 181px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134246 */
+
+position: absolute;
+width: 223px;
+height: 40px;
+
+/* 64 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* организации ОПК */
+
+position: absolute;
+width: 181px;
+height: 25px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+display: flex;
+align-items: flex-end;
+
+color: #000000;
+
+/* Group 277134247 */
+
+position: absolute;
+width: 161px;
+height: 40px;
+
+/* 66 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* организации ОПК */
+
+position: absolute;
+width: 119px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+display: flex;
+align-items: flex-end;
+
+color: #000000;
+
+/* Group 277134248 */
+
+position: absolute;
+width: 124px;
+height: 40px;
+
+/* 35 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* технопарков */
+
+position: absolute;
+width: 82px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+text-align: right;
+
+color: #000000;
+
+/* г. Москва */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Количество кластеров */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Количество ОЭЗ */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Bodytext */
+
+position: absolute;
+width: 536px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 20px;
+/* or 100% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Group 277134249 */
+
+position: absolute;
+width: 19.12px;
+height: 18px;
+
+/* Group 2184 */
+
+position: absolute;
+width: 18.02px;
+height: 16.72px;
+
+/* Rectangle 566 */
+
+box-sizing: border-box;
+
+position: absolute;
+width: 18.02px;
+height: 16.72px;
+
+border: 0.270312px solid #abafb3;
+
+/* Vector 185 */
+
+position: absolute;
+width: 16.9px;
+height: 14.79px;
+
+border: 0.270312px solid #abafb3;
+
+/* Rectangle 567 */
+
+position: absolute;
+width: 18.02px;
+height: 2.57px;
+
+background: #abafb3;
+border-radius: 0.270312px 0.270312px 0px 0px;
+
+/* Vector 186 */
+
+position: absolute;
+width: 4.51px;
+height: 5.14px;
+
+border: 0.270312px solid #abafb3;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
+
+/* 41 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 22 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 28 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 23 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Количество технопарков */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
+
+/* Group 277134250 */
+
+position: absolute;
+width: 677px;
+height: 72px;
+
+/* Количество инновационных объединений */
+
+position: absolute;
+width: 160px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* 176 */
+
+position: absolute;
+width: 100px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* 605 */
+
+position: absolute;
+width: 100px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Количество организаций ОПК */
+
+position: absolute;
+width: 139px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 4px;
+/* or 43% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* 20% */
+
+position: absolute;
+width: 110px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* 42% */
+
+position: absolute;
+width: 110px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Составляют организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 160px;
+height: 23px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Процент инновационных объединений, в которых участвуют организации ОПК */
+
+position: absolute;
+width: 137px;
+height: 23px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* 176 */
+
+position: absolute;
+width: 119px;
+height: 55px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 64px;
+line-height: 40px;
+/* or 62% */
+text-align: center;
+
+color: #000000;
+
+/* Ellipse 307 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #abafb3;
+
+/* Ellipse 308 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #674ee3;
+
+/* Ellipse 309 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #ec9478;
+
+/* Ellipse 310 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #7dccc5;
+
+/* Rectangle 2464 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2465 */
+
+position: absolute;
+width: 300px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2466 */
+
+position: absolute;
+width: 50px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2467 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2468 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2469 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2470 */
+
+position: absolute;
+width: 20px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2471 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2472 */
+
+position: absolute;
+width: 400px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2473 */
+
+position: absolute;
+width: 10px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2474 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2475 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2476 */
+
+position: absolute;
+width: 60px;
+height: 4px;
+0
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2477 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2478 */
+
+position: absolute;
+width: 400px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2479 */
+
+position: absolute;
+width: 45px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2480 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2481 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2482 */
+
+position: absolute;
+width: 100px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
diff --git a/docs/components/area.css b/docs/components/area.css
new file mode 100644
index 0000000..d1ff704
--- /dev/null
+++ b/docs/components/area.css
@@ -0,0 +1,30 @@
+/* 03_Участие ОПК в иннов объед 1 */
+
+position: absolute;
+width: 726px;
+height: 261px;
+
+background: url(03_Участие ОПК в иннов объед.png);
+border-radius: 24px;
+
+/* Group 277134284 */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+/* Участие организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 10px;
+/* or 50% */
+letter-spacing: -0.02em;
+
+color: #000000;
diff --git a/docs/components/donut.css b/docs/components/donut.css
new file mode 100644
index 0000000..55fd7ef
--- /dev/null
+++ b/docs/components/donut.css
@@ -0,0 +1,369 @@
+/* Rectangle 2460 */
+
+position: absolute;
+width: 727px;
+height: 369px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Line 17 */
+
+position: absolute;
+width: 34px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-35.84deg);
+
+/* Line 18 */
+
+position: absolute;
+width: 33.84px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-34.16deg);
+
+/* Line 19 */
+
+position: absolute;
+width: 34.76px;
+height: 0px;
+
+border: 1px solid #abafb3;
+transform: rotate(-140.07deg);
+
+/* Line 20 */
+
+position: absolute;
+width: 238px;
+height: 1px;
+
+border: 1px solid #abafb3;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Line 21 */
+
+position: absolute;
+width: 164px;
+height: 0px;
+
+border: 1px solid #abafb3;
+
+/* Line 22 */
+
+position: absolute;
+width: 223px;
+height: 0px;
+
+border: 1px solid #abafb3;
+
+/* Group 277134240 */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+/* Организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 669px;
+height: 18px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 10px;
+/* or 50% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Group 277134243 */
+
+position: absolute;
+width: 237px;
+height: 40px;
+
+/* 124 */
+
+position: absolute;
+width: 60px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* промышленных кластеров */
+
+position: absolute;
+width: 175px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134244 */
+
+position: absolute;
+width: 237px;
+height: 40px;
+
+/* 517 */
+
+position: absolute;
+width: 60px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* организаций ОПК */
+
+position: absolute;
+width: 175px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134245 */
+
+position: absolute;
+width: 223px;
+height: 40px;
+
+/* 17 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: center;
+
+color: #000000;
+
+/* особых экономических зон */
+
+position: absolute;
+width: 181px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Group 277134246 */
+
+position: absolute;
+width: 223px;
+height: 40px;
+
+/* 64 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* организации ОПК */
+
+position: absolute;
+width: 181px;
+height: 25px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+display: flex;
+align-items: flex-end;
+
+color: #000000;
+
+/* Group 277134247 */
+
+position: absolute;
+width: 161px;
+height: 40px;
+
+/* 66 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* организации ОПК */
+
+position: absolute;
+width: 119px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+display: flex;
+align-items: flex-end;
+
+color: #000000;
+
+/* Group 277134248 */
+
+position: absolute;
+width: 124px;
+height: 40px;
+
+/* 35 */
+
+position: absolute;
+width: 40px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 32px;
+line-height: 14px;
+/* or 44% */
+display: flex;
+align-items: center;
+text-align: right;
+
+color: #000000;
+
+/* технопарков */
+
+position: absolute;
+width: 82px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+text-align: right;
+
+color: #000000;
+
+/* 176 */
+
+position: absolute;
+width: 119px;
+height: 55px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 64px;
+line-height: 40px;
+/* or 62% */
+text-align: center;
+
+color: #000000;
+
+/* Ellipse 307 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #abafb3;
+
+/* Ellipse 308 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #674ee3;
+
+/* Ellipse 309 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #ec9478;
+
+/* Ellipse 310 */
+
+position: absolute;
+width: 207px;
+height: 205px;
+
+background: #7dccc5;
diff --git a/docs/components/filters.css b/docs/components/filters.css
new file mode 100644
index 0000000..f69fa08
--- /dev/null
+++ b/docs/components/filters.css
@@ -0,0 +1,1074 @@
+/* Frame 1943564417 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 8px;
+
+position: absolute;
+width: 1416px;
+height: 39px;
+
+/* Frame 12 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 261px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 251px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 177px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 183px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 250.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 17 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 261px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 251px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 177px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 183px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 250.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 13 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 160px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 149px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 72px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 75px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 149.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 14 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 160px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 3;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 149px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 72px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 75px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 149.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 15 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 328.41px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 4;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 318px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 251px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 257px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 318px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
+
+/* Frame 16 */
+
+box-sizing: border-box;
+
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+align-items: flex-start;
+padding: 2.70312px 5px 3px 5.40625px;
+gap: 2.7px;
+
+width: 192px;
+height: 40px;
+
+border: 0.270312px solid #abafb3;
+border-radius: 2.70312px;
+
+/* Inside auto layout */
+flex: none;
+order: 5;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 6px;
+
+margin: 0 auto;
+width: 170px;
+height: 35px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 10 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 13.79px;
+
+width: 118px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 118px;
+height: 11px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* or 24% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 11 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px 0px 6px;
+gap: 13.79px;
+
+width: 33px;
+height: 17px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+
+/* Bodytext */
+
+width: 31px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 20px;
+line-height: 5px;
+/* identical to box height, or 24% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Frame 2184 */
+
+/* Auto layout */
+display: flex;
+flex-direction: row;
+align-items: center;
+padding: 0px;
+gap: 4.05px;
+
+width: 8px;
+height: 15px;
+
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+
+/* Icon */
+
+width: 16px;
+height: 16px;
+
+filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+
+/* Icon/Outline/cheveron-down */
+
+position: absolute;
+width: 16px;
+height: 16px;
+left: 0px;
+top: -0.5px;
+
+/* Icon */
+
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 37.5%;
+bottom: 33.33%;
+
+/* gray/900 */
+border: 1px solid #18181b;
+
+/* Line 1 */
+
+margin: 0 auto;
+width: 181.59px;
+height: 0px;
+
+/* Inside auto layout */
+flex: none;
+order: 1;
+align-self: stretch;
+flex-grow: 0;
diff --git a/docs/components/filters_clear.css b/docs/components/filters_clear.css
new file mode 100644
index 0000000..d1fde33
--- /dev/null
+++ b/docs/components/filters_clear.css
@@ -0,0 +1,49 @@
+/* Group 277134242 */
+
+position: absolute;
+width: 129px;
+height: 10px;
+
+/* Bodytext */
+
+position: absolute;
+width: 114px;
+height: 5px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 5px;
+/* identical to box height, or 35% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #022456;
+
+/* Vector */
+
+position: absolute;
+width: 10px;
+height: 10px;
+
+background: #022456;
+border: 0.0540625px solid #022456;
+
+/* Union */
+
+position: absolute;
+width: 6px;
+height: 6px;
+
+background: #022456;
+
+/* Vector */
+
+position: absolute;
+width: 10px;
+height: 10px;
+
+background: #022456;
+border: 0.0540625px solid #022456;
diff --git a/docs/components/heder.css b/docs/components/heder.css
deleted file mode 100644
index 60916a1..0000000
--- a/docs/components/heder.css
+++ /dev/null
@@ -1,847 +0,0 @@
-/* Single Window / Bars / Header */
-
-position: absolute;
-width: 1920px;
-height: 88px;
-
-/* Rectangle 2 */
-
-position: absolute;
-width: 1920px;
-height: 88px;
-left: 0px;
-top: 0px;
-
-background: #022456;
-
-/* Frame 1878 */
-
-position: absolute;
-width: 1920px;
-height: 88px;
-left: 0px;
-top: 0px;
-
-/* Single Window / Elements / Logotypes / Footer Logo 4 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px;
-gap: 12px;
-
-position: absolute;
-width: 236px;
-height: 36px;
-left: 100px;
-top: 26px;
-
-/* Frame */
-
-width: 36px;
-height: 35px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Vector */
-
-position: absolute;
-left: 0%;
-right: 0%;
-top: 0%;
-bottom: 0%;
-
-background: #ffffff;
-
-/* ГОСУДАРСТВЕННАЯ ИНФОРМАЦИОННАЯ СИСТЕМА ПРОМЫШЛЕННОСТИ ЗАЩИЩЕННАЯ ЧАСТЬ */
-
-width: 188px;
-height: 36px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 10px;
-line-height: 10px;
-/* or 100% */
-display: flex;
-align-items: center;
-
-color: #ffffff;
-
-/* Inside auto layout */
-flex: none;
-order: 1;
-flex-grow: 0;
-
-/* Frame 1943564305 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px;
-gap: 24px;
-
-position: absolute;
-width: 1112px;
-height: 68px;
-left: 750px;
-top: 10px;
-
-/* Frame 1000004688 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px;
-gap: 16px;
-
-width: 1112px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 2273 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 185px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 1966 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 175px;
-height: 46px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Главная страница */
-
-width: 165px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 18px;
-/* identical to box height, or 90% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: rgba(255, 255, 255, 0.5);
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 2275 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 142px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 1;
-flex-grow: 0;
-
-/* Frame 1966 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 132px;
-height: 46px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Все сервисы */
-
-width: 122px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 700;
-font-size: 20px;
-line-height: 18px;
-/* identical to box height, or 90% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: #ffffff;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 2270 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 135px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 2;
-flex-grow: 0;
-
-/* Frame 1966 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 125px;
-height: 46px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* База знаний */
-
-width: 115px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 18px;
-/* identical to box height, or 90% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: rgba(255, 255, 255, 0.5);
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 2272 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 153px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 3;
-flex-grow: 0;
-
-/* Frame 1966 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 143px;
-height: 46px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Сообщения */
-
-width: 107px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 18px;
-/* identical to box height, or 90% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: rgba(255, 255, 255, 0.5);
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 1942 */
-
-width: 16px;
-height: 16px;
-
-/* Inside auto layout */
-flex: none;
-order: 1;
-flex-grow: 0;
-
-/* Group 1937 */
-
-position: absolute;
-width: 24px;
-height: 24px;
-left: calc(50% - 24px / 2);
-top: calc(50% - 24px / 2);
-
-/* Ellipse 1 */
-
-position: absolute;
-width: 24px;
-height: 24px;
-left: -4px;
-top: -4px;
-
-background: #c90237;
-
-/* 99 */
-
-position: absolute;
-width: 13px;
-height: 8px;
-left: 1px;
-top: 4px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 700;
-font-size: 11px;
-line-height: 17px;
-/* or 155% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: #ffffff;
-
-/* + */
-
-position: absolute;
-width: 6px;
-height: 8px;
-left: 13px;
-top: 3px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 700;
-font-size: 8px;
-line-height: 17px;
-/* or 212% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: #ffffff;
-
-/* Frame 2274 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 227px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 4;
-flex-grow: 0;
-
-/* Frame 1966 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 217px;
-height: 46px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Порядок подключения */
-
-width: 207px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 18px;
-/* identical to box height, or 90% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: rgba(255, 255, 255, 0.5);
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 2269 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px 5px;
-gap: 10px;
-
-width: 190px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 5;
-flex-grow: 0;
-
-/* Frame 1000004689 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px;
-gap: 16px;
-
-position: absolute;
-width: 140px;
-height: 68px;
-left: 1679px;
-top: 10px;
-
-/* Frame 2269 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-align-items: center;
-padding: 0px;
-gap: 10px;
-
-width: 40px;
-height: 68px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* White Icons */
-
-width: 40px;
-height: 40px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* IMPZM / Elements / Icons / Icons 24x24 */
-
-/* Auto layout */
-display: flex;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-padding: 0px;
-gap: 10px;
-
-position: absolute;
-width: 24px;
-height: 24px;
-left: 8px;
-top: 8px;
-
-/* Icons */
-
-width: 24px;
-height: 24px;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Vector */
-
-position: absolute;
-width: 20px;
-height: 20px;
-left: calc(50% - 20px / 2);
-top: calc(50% - 20px / 2);
-
-border: 2px solid #ffffff;
-
-/* Александр С. */
-
-display: none;
-width: 139px;
-height: 34px;
-
-font-family: 'Lato';
-font-style: normal;
-font-weight: 400;
-font-size: 22.489px;
-line-height: 34px;
-/* identical to box height, or 150% */
-display: flex;
-align-items: center;
-text-align: center;
-
-/* Gosblue */
-color: #0d4cd3;
-
-/* Inside auto layout */
-flex: none;
-order: 1;
-flex-grow: 0;
-
-/* avatar+menu */
-
-width: 84px;
-height: 50px;
-
-/* Inside auto layout */
-flex: none;
-order: 2;
-flex-grow: 0;
-
-/* img */
-
-position: absolute;
-width: 50px;
-height: 40px;
-left: 0px;
-top: 5px;
-
-/* Userpic */
-
-position: absolute;
-width: 40px;
-height: 40px;
-right: 39.06px;
-top: calc(50% - 40px / 2);
-
-background: #ffffff;
-
-/* DZ */
-
-position: absolute;
-width: 50px;
-height: 29px;
-left: 0px;
-top: 10.94px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 700;
-font-size: 20px;
-line-height: 28px;
-/* identical to box height, or 141% */
-display: flex;
-align-items: center;
-text-align: center;
-
-color: #022456;
-
-/* Arrow Forward */
-
-position: absolute;
-width: 24px;
-height: 24px;
-left: 58px;
-top: 13px;
-
-transform: rotate(90deg);
-
-/* Vector */
-
-position: absolute;
-left: 21%;
-right: 44%;
-top: 36.94%;
-bottom: 4.72%;
-
-background: #ffffff;
-transform: matrix(0, -1, -1, 0, 0, 0);
-
-/* 36 Corp */
-
-box-sizing: border-box;
-
-position: absolute;
-visibility: hidden;
-left: 62.5%;
-right: -18.75%;
-top: 0%;
-bottom: 0%;
-
-/* Pervinca */
-background: #e5eaf5;
-border: 2.81113px solid #bfcceb;
-border-radius: 50.6003px;
-
-/* Frame 277131358 */
-
-position: absolute;
-width: 25.3px;
-height: 25.3px;
-left: 12.65px;
-top: 12.65px;
-
-/* Union */
-
-position: absolute;
-width: 25.3px;
-height: 22.77px;
-left: 0px;
-top: 1.27px;
-
-/* Text Helper */
-background: #66727f;
-
-/* Union */
-
-position: absolute;
-width: 25.3px;
-height: 22.77px;
-left: 0px;
-top: 1.27px;
-
-background: #000000;
-
-/* Union */
-
-position: absolute;
-width: 25.3px;
-height: 22.77px;
-left: 0px;
-top: 1.27px;
-
-/* RT_Black / 100% */
-background: #101828;
-
-/* Union */
-
-box-sizing: border-box;
-
-position: absolute;
-width: 25.3px;
-height: 18.98px;
-left: 0px;
-top: 5.06px;
-
-/* RT_Black / 100% */
-border: 1.89751px solid #101828;
-
-/* Rectangle 853 */
-
-box-sizing: border-box;
-
-position: absolute;
-width: 25.3px;
-height: 18.98px;
-left: calc(50% - 25.3px / 2 - 0px);
-top: calc(50% - 18.98px / 2 + 1.9px);
-
-background: #c4c4c4;
-border: 1.89751px solid #000000;
-
-/* Union */
-
-position: absolute;
-width: 10.73px;
-height: 5.21px;
-left: 7.28px;
-top: 1.27px;
-
-background: #000000;
-
-/* Rectangle 249 */
-
-position: absolute;
-width: 8.86px;
-height: 4.11px;
-left: calc(50% - 8.86px / 2 - 0px);
-top: calc(50% - 4.11px / 2 - 8.38px);
-
-border: 1.89751px solid #000000;
-
-/* Subtract */
-
-position: absolute;
-width: 23.8px;
-height: 4.83px;
-left: 0.75px;
-top: 11.22px;
-
-background: #000000;
-
-/* Rectangle 853 */
-
-box-sizing: border-box;
-
-position: absolute;
-width: 22.77px;
-height: 3.23px;
-left: calc(50% - 22.77px / 2 - 0px);
-top: calc(50% - 3.23px / 2 + 0.98px);
-
-border: 1.89751px solid #000000;
-border-radius: 3.79502px;
-
-/* Rectangle 855 */
-
-position: absolute;
-width: 5.06px;
-height: 3.8px;
-left: calc(50% - 5.06px / 2 - 0.01px);
-top: calc(50% - 3.8px / 2 + 1.9px);
-
-background: #c4c4c4;
-
-/* Rectangle 856 */
-
-box-sizing: border-box;
-
-position: absolute;
-width: 7.59px;
-height: 7.59px;
-left: calc(50% - 7.59px / 2 - 0px);
-top: calc(50% - 7.59px / 2 + 2.53px);
-
-/* RT_Black / 100% */
-border: 1.89751px solid #101828;
-border-radius: 2.53001px;
-
-/* img+notif */
-
-position: absolute;
-visibility: hidden;
-width: 50.6px;
-height: 50.6px;
-left: 56.22px;
-top: 0px;
-
-/* Group 277131056 */
-
-position: absolute;
-width: 50.6px;
-height: 50.6px;
-left: 0px;
-top: 0px;
-
-/* Group 277130812 */
-
-position: absolute;
-width: 50.6px;
-height: 50.6px;
-left: 0px;
-top: 0px;
-
-/* Userpic */
-
-box-sizing: border-box;
-
-position: absolute;
-width: 50.6px;
-height: 50.6px;
-right: 0px;
-top: calc(50% - 50.6px / 2 + 0px);
-
-background: url();
-border: 2.81113px solid rgba(13, 76, 211, 0.2);
-
-/* Ellipse 11 */
-
-position: absolute;
-left: 75.01%;
-right: 2.77%;
-top: 75%;
-bottom: 2.78%;
-
-/* Gosred */
-background: #ee3f58;
-/* White */
-border: 2.81113px solid #ffffff;
diff --git a/docs/components/kpi.css b/docs/components/kpi.css
new file mode 100644
index 0000000..98f9b62
--- /dev/null
+++ b/docs/components/kpi.css
@@ -0,0 +1,154 @@
+/* Rectangle 2459 */
+
+position: absolute;
+width: 727px;
+height: 116px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Group 277134250 */
+
+position: absolute;
+width: 677px;
+height: 72px;
+
+/* Количество инновационных объединений */
+
+position: absolute;
+width: 160px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* 176 */
+
+position: absolute;
+width: 100px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* 605 */
+
+position: absolute;
+width: 100px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Количество организаций ОПК */
+
+position: absolute;
+width: 139px;
+height: 20px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 4px;
+/* or 43% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* 20% */
+
+position: absolute;
+width: 110px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* 42% */
+
+position: absolute;
+width: 110px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 48px;
+line-height: 4px;
+/* or 9% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #c90237;
+
+/* Составляют организации ОПК в инновационных объединениях */
+
+position: absolute;
+width: 160px;
+height: 23px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Процент инновационных объединений, в которых участвуют организации ОПК */
+
+position: absolute;
+width: 137px;
+height: 23px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 10px;
+line-height: 10px;
+/* or 100% */
+display: flex;
+align-items: center;
+letter-spacing: -0.02em;
+
+color: #000000;
diff --git a/docs/components/line.css b/docs/components/line.css
new file mode 100644
index 0000000..1d6e566
--- /dev/null
+++ b/docs/components/line.css
@@ -0,0 +1,405 @@
+/* Rectangle 2461 */
+
+position: absolute;
+width: 722px;
+height: 326px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Топ отраслей по количеству организаций ОПК, участвующих в инновационных объединений */
+
+position: absolute;
+width: 596.19px;
+height: 40px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 20px;
+/* or 100% */
+
+color: #000000;
+
+/* Авиационная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Радиоэлектронная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Промышленность обычных вооружений */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Промышленность боепрпасов и спецхимии */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Беспилотные системы и робототехника */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Судостроительная промышленность */
+
+position: absolute;
+width: 463px;
+height: 12px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 12px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 180 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 124 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 110 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 78 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 101 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* 12 */
+
+position: absolute;
+width: 27.7px;
+height: 16px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 12px;
+line-height: 16px;
+text-align: right;
+
+color: #000000;
+
+opacity: 0.9;
+
+/* Rectangle 2464 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2465 */
+
+position: absolute;
+width: 300px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2466 */
+
+position: absolute;
+width: 50px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2467 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2468 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2469 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2470 */
+
+position: absolute;
+width: 20px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2471 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2472 */
+
+position: absolute;
+width: 400px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2473 */
+
+position: absolute;
+width: 10px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2474 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2475 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2476 */
+
+position: absolute;
+width: 60px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2477 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2478 */
+
+position: absolute;
+width: 400px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2479 */
+
+position: absolute;
+width: 45px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2480 */
+
+position: absolute;
+width: 650px;
+height: 4px;
+
+background: #674ee3;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2481 */
+
+position: absolute;
+width: 200px;
+height: 4px;
+
+background: #ec9478;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
+
+/* Rectangle 2482 */
+
+position: absolute;
+width: 100px;
+height: 4px;
+
+background: #7dccc5;
+border-radius: 12px;
+transform: matrix(1, 0, 0, -1, 0, 0);
diff --git a/docs/components/sidebar.css b/docs/components/sidebar.css
deleted file mode 100644
index 6c727fc..0000000
--- a/docs/components/sidebar.css
+++ /dev/null
@@ -1,557 +0,0 @@
-/* Frame 1943564418 */
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 0px;
-
-position: absolute;
-width: 391px;
-height: 511px;
-
-/* Frame 28153 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.7px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
-
-/* Организации */
-
-width: 353px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-letter-spacing: -0.02em;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28158 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 1;
-align-self: stretch;
-flex-grow: 0;
-
-/* Продукция/услуги */
-
-width: 352px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28159 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 58px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 2;
-align-self: stretch;
-flex-grow: 0;
-
-/* Технологические компетенции */
-
-width: 352px;
-height: 18px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28160 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 3;
-align-self: stretch;
-flex-grow: 0;
-
-/* Импортозамещение */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
-
-/* Frame 28161 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 4;
-align-self: stretch;
-flex-grow: 0;
-
-/* Инновационные объединения */
-
-width: 284px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28165 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 5;
-align-self: stretch;
-flex-grow: 0;
-
-/* Кластеры */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
-
-/* Frame 28166 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 6;
-align-self: stretch;
-flex-grow: 0;
-
-/* Технопарки */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28167 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 7;
-align-self: stretch;
-flex-grow: 0;
-
-/* Особые экономические зоны */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28168 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 8;
-align-self: stretch;
-flex-grow: 0;
-
-/* Аналитическая панель */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-flex-grow: 0;
-
-/* Frame 28162 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 9;
-align-self: stretch;
-flex-grow: 0;
-
-/* Показатели */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
-
-/* Frame 28163 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 10;
-align-self: stretch;
-flex-grow: 0;
-
-/* Точки роста */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
-
-/* Frame 28164 */
-
-box-sizing: border-box;
-
-/* Auto layout */
-display: flex;
-flex-direction: column;
-align-items: flex-start;
-padding: 20px 0px;
-gap: 2.16px;
-
-width: 391px;
-height: 61px;
-
-border-width: 0.270312px 0px;
-border-style: solid;
-border-color: #dde1e5;
-
-/* Inside auto layout */
-flex: none;
-order: 11;
-align-self: stretch;
-flex-grow: 0;
-
-/* Меры поддержки */
-
-width: 391px;
-height: 21px;
-
-font-family: 'Clear Sans';
-font-style: normal;
-font-weight: 400;
-font-size: 20px;
-line-height: 5px;
-/* or 24% */
-display: flex;
-align-items: center;
-
-color: #000000;
-
-/* Inside auto layout */
-flex: none;
-order: 0;
-align-self: stretch;
-flex-grow: 0;
diff --git a/docs/components/table.css b/docs/components/table.css
new file mode 100644
index 0000000..3f82f7e
--- /dev/null
+++ b/docs/components/table.css
@@ -0,0 +1,1334 @@
+/* Rectangle 2462 */
+
+position: absolute;
+width: 722px;
+height: 460px;
+
+background: rgba(230, 230, 230, 0.8);
+border-radius: 24px;
+
+/* Rectangle 2463 */
+
+position: absolute;
+width: 2.66px;
+height: 38px;
+
+background: #022456;
+border-radius: 5.40625px;
+
+/* Субъект РФ */
+
+position: absolute;
+width: 125.21px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 1 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 41 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 63 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 32 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 46 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 31 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 18 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 13 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 8 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 7 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 20 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 21 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Московская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 22 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Республика Татарстан */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Самарская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 6 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Пензенская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 7 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Томская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 8 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Ярославская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 9 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Ульяновская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Хабаровский край */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 11 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Республика Башкортастан */
+
+position: absolute;
+width: 275.74px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Краснодарский край */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 13 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Белгородская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 14 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Волгоградская область */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 15 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 80px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Удмуртская Республика */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 65.27px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 28 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 65.34px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* 23 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Челябинская область */
+
+position: absolute;
+width: 258.16px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* г. Москва */
+
+position: absolute;
+width: 258.42px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+
+color: #000000;
+
+/* Количество кластеров */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Количество ОЭЗ */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Bodytext */
+
+position: absolute;
+width: 536px;
+height: 45px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 20px;
+line-height: 20px;
+/* or 100% */
+letter-spacing: -0.02em;
+
+color: #000000;
+
+/* Group 277134249 */
+
+position: absolute;
+width: 19.12px;
+height: 18px;
+
+/* Group 2184 */
+
+position: absolute;
+width: 18.02px;
+height: 16.72px;
+
+/* Rectangle 566 */
+
+box-sizing: border-box;
+
+position: absolute;
+width: 18.02px;
+height: 16.72px;
+
+border: 0.270312px solid #abafb3;
+
+/* Vector 185 */
+
+position: absolute;
+width: 16.9px;
+height: 14.79px;
+
+border: 0.270312px solid #abafb3;
+
+/* Rectangle 567 */
+
+position: absolute;
+width: 18.02px;
+height: 2.57px;
+
+background: #abafb3;
+border-radius: 0.270312px 0.270312px 0px 0px;
+
+/* Vector 186 */
+
+position: absolute;
+width: 4.51px;
+height: 5.14px;
+
+border: 0.270312px solid #abafb3;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
+
+/* 41 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 22 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 19 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 17 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 12 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 10 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 5 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 4 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 3 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 85px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 2 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 28 */
+
+position: absolute;
+width: 81px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* 23 */
+
+position: absolute;
+width: 82px;
+height: 14px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 14px;
+/* identical to box height, or 100% */
+text-align: center;
+
+color: #000000;
+
+/* Количество технопарков */
+
+position: absolute;
+width: 139.87px;
+height: 28px;
+
+font-family: 'Clear Sans';
+font-style: normal;
+font-weight: 700;
+font-size: 14px;
+line-height: 14px;
+/* or 100% */
+
+color: #000000;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
+
+/* Vector */
+
+position: absolute;
+width: 12px;
+height: 15px;
+
+background: #abafb3;
diff --git a/src/pages/dashboard/model/dashboardStore.spec.ts b/src/pages/dashboard/model/dashboardStore.spec.ts
index 85eb095..ae3d3bf 100644
--- a/src/pages/dashboard/model/dashboardStore.spec.ts
+++ b/src/pages/dashboard/model/dashboardStore.spec.ts
@@ -8,8 +8,15 @@ import {
 import { associationTypeColorMap } from './constants'
 import { createEmptyAnalyticsResponse } from './emptyState'
 import { createDashboardFilterDefinitions } from './filterDefinitions'
+import { mergeFiltersResponseOptions } from './filterOptionsCache'
 import { toDashboardAnalyticsFilters, toDashboardDraftFilters } from './filterDraft'
-import { defaultAnalyticsFilters, normalizeAnalyticsFilters, toApiParams } from './filters'
+import {
+  createCascadingAnalyticsFiltersPatch,
+  defaultAnalyticsFilters,
+  isDownstreamAnalyticsFilter,
+  normalizeAnalyticsFilters,
+  toApiParams,
+} from './filters'
 import { formatGrowthPercent, formatOrganizationsText } from './formatters'
 import { dashboardAnalyticsQueryKeys } from './queryKeys'
 import { getNextSortDirection, sortRows } from './sorting'
@@ -72,6 +79,38 @@ describe('dashboard contract helpers', () => {
     })
   })
 
+  it('resets all downstream filters when a parent filter changes', () => {
+    expect(createCascadingAnalyticsFiltersPatch('association_type', 'sez')).toEqual({
+      association_type: 'sez',
+    })
+
+    expect(createCascadingAnalyticsFiltersPatch('federal_district_id', 'ural')).toEqual({
+      federal_district_id: 'ural',
+      region_id: null,
+      industry_id: null,
+      integrated_structure_id: null,
+      organization_id: null,
+    })
+
+    expect(createCascadingAnalyticsFiltersPatch('industry_id', 'aviation')).toEqual({
+      industry_id: 'aviation',
+      integrated_structure_id: null,
+      organization_id: null,
+    })
+
+    expect(createCascadingAnalyticsFiltersPatch('organization_id', 'org-1')).toEqual({
+      organization_id: 'org-1',
+    })
+  })
+
+  it('detects filters that are downstream in the cascade order', () => {
+    expect(isDownstreamAnalyticsFilter('association_type', 'federal_district_id')).toBe(false)
+    expect(isDownstreamAnalyticsFilter('federal_district_id', 'region_id')).toBe(true)
+    expect(isDownstreamAnalyticsFilter('federal_district_id', 'organization_id')).toBe(true)
+    expect(isDownstreamAnalyticsFilter('region_id', 'federal_district_id')).toBe(false)
+    expect(isDownstreamAnalyticsFilter('organization_id', 'organization_id')).toBe(false)
+  })
+
   it('builds structured query keys from normalized filters', () => {
     const filters = {
       association_type: 'all',
@@ -180,6 +219,147 @@ describe('dashboard contract helpers', () => {
     })
   })
 
+  it('keeps cached filter options when a filtered response returns only the selected value', () => {
+    const baseResponse = {
+      applied_filters: defaultAnalyticsFilters,
+      association_types: [],
+      federal_districts: [],
+      regions: [
+        {
+          id: '77',
+          federal_district_id: 'central',
+          label: 'г. Москва',
+          associations_count: 28,
+          disabled: false,
+        },
+        {
+          id: '50',
+          federal_district_id: 'central',
+          label: 'Московская область',
+          associations_count: 41,
+          disabled: false,
+        },
+      ],
+      industries: [],
+      integrated_structures: [],
+      organizations: [],
+      generated_at: '',
+    } satisfies CompetenceMapAnalyticsFiltersResponse
+
+    const filteredResponse = {
+      ...baseResponse,
+      applied_filters: {
+        ...defaultAnalyticsFilters,
+        region_id: '77',
+      },
+      regions: [
+        {
+          id: '77',
+          federal_district_id: 'central',
+          label: 'г. Москва',
+          associations_count: 28,
+          disabled: false,
+        },
+      ],
+    } satisfies CompetenceMapAnalyticsFiltersResponse
+
+    const mergedResponse = mergeFiltersResponseOptions(baseResponse, filteredResponse)
+    const regionDefinition = createDashboardFilterDefinitions(mergedResponse).find(
+      (definition) => definition.id === 'region_id',
+    )
+
+    expect(regionDefinition?.options).toEqual([
+      { label: 'Все', value: 'all', disabled: false },
+      { label: 'г. Москва', value: '77', disabled: false },
+      { label: 'Московская область', value: '50', disabled: false },
+    ])
+  })
+
+  it('uses latest context-scoped organization options instead of cached ones', () => {
+    const baseResponse = {
+      applied_filters: defaultAnalyticsFilters,
+      association_types: [],
+      federal_districts: [],
+      regions: [],
+      industries: [],
+      integrated_structures: [],
+      organizations: [
+        {
+          id: 'org-voronezh',
+          label: 'Воронежская организация',
+          inn: null,
+          ogrn: null,
+          association_memberships_count: 1,
+          disabled: false,
+        },
+      ],
+      generated_at: '',
+    } satisfies CompetenceMapAnalyticsFiltersResponse
+
+    const filteredResponse = {
+      ...baseResponse,
+      applied_filters: {
+        ...defaultAnalyticsFilters,
+        federal_district_id: 'ural',
+        region_id: 'chelyabinsk',
+      },
+      organizations: [
+        {
+          id: 'org-chelyabinsk',
+          label: 'Челябинская организация',
+          inn: null,
+          ogrn: null,
+          association_memberships_count: 1,
+          disabled: false,
+        },
+      ],
+    } satisfies CompetenceMapAnalyticsFiltersResponse
+
+    const mergedResponse = mergeFiltersResponseOptions(baseResponse, filteredResponse)
+
+    expect(mergedResponse.organizations).toEqual(filteredResponse.organizations)
+  })
+
+  it('filters region options by selected federal district', () => {
+    const filtersResponse = {
+      applied_filters: {
+        ...defaultAnalyticsFilters,
+        federal_district_id: 'ural',
+      },
+      association_types: [],
+      federal_districts: [],
+      regions: [
+        {
+          id: '77',
+          federal_district_id: 'central',
+          label: 'г. Москва',
+          associations_count: 28,
+          disabled: false,
+        },
+        {
+          id: '66',
+          federal_district_id: 'ural',
+          label: 'Свердловская область',
+          associations_count: 7,
+          disabled: false,
+        },
+      ],
+      industries: [],
+      integrated_structures: [],
+      organizations: [],
+      generated_at: '',
+    } satisfies CompetenceMapAnalyticsFiltersResponse
+
+    const regionDefinition = createDashboardFilterDefinitions(filtersResponse).find(
+      (definition) => definition.id === 'region_id',
+    )
+
+    expect(regionDefinition?.options).toEqual([
+      { label: 'Все', value: 'all', disabled: false },
+      { label: 'Свердловская область', value: '66', disabled: false },
+    ])
+  })
+
   it('creates empty analytics response that matches the active association type', () => {
     expect(
       createEmptyAnalyticsResponse({ ...defaultAnalyticsFilters, association_type: 'sez' }),
diff --git a/src/pages/dashboard/model/dashboardStore.ts b/src/pages/dashboard/model/dashboardStore.ts
index 7d5e227..7797a14 100644
--- a/src/pages/dashboard/model/dashboardStore.ts
+++ b/src/pages/dashboard/model/dashboardStore.ts
@@ -17,10 +17,10 @@ import {
   normalizeAppliedFilters,
   toApiParams,
 } from './filters'
+import { mergeFiltersResponseOptions } from './filterOptionsCache'
 import { dashboardAnalyticsQueryKeys } from './queryKeys'
 import type {
   AnalyticsFilters,
-  AssociationTypeFilterOption,
   CompetenceMapAnalyticsFiltersResponse,
   CompetenceMapAnalyticsResponse,
 } from './types'
@@ -40,7 +40,10 @@ export {
 } from './emptyState'
 export { resolveApiErrorMessage } from './error'
 export {
+  analyticsFilterCascadeOrder,
+  createCascadingAnalyticsFiltersPatch,
   defaultAnalyticsFilters,
+  isDownstreamAnalyticsFilter,
   normalizeAnalyticsFilters,
   normalizeAppliedFilters,
   toApiParams,
@@ -85,13 +88,16 @@ export const useDashboardStore = defineStore('dashboard', () => {
   )
   const analyticsResponse = computed(() => analyticsQueryResponse.value)
   const filtersApiResponse = computed(() => filtersQueryResponse.value)
-  const cachedAssociationTypes = ref<AssociationTypeFilterOption[]>([])
+  const cachedFiltersResponse = ref<CompetenceMapAnalyticsFiltersResponse | null>(null)
 
   watch(
     filtersApiResponse,
     (response) => {
       if (response) {
-        cachedAssociationTypes.value = response.association_types
+        cachedFiltersResponse.value = mergeFiltersResponseOptions(
+          cachedFiltersResponse.value,
+          response,
+        )
       }
     },
     { immediate: true },
@@ -102,16 +108,28 @@ export const useDashboardStore = defineStore('dashboard', () => {
   )
 
   const filtersResponse = computed<CompetenceMapAnalyticsFiltersResponse>(() => {
+    if (filtersApiResponse.value && cachedFiltersResponse.value) {
+      return {
+        ...cachedFiltersResponse.value,
+        applied_filters: filtersApiResponse.value.applied_filters,
+        generated_at: filtersApiResponse.value.generated_at,
+      }
+    }
+
     if (filtersApiResponse.value) {
       return filtersApiResponse.value
     }
 
-    return {
-      ...createEmptyFiltersResponse(
-        analyticsResponse.value?.applied_filters ?? requestedFilters.value,
-      ),
-      association_types: cachedAssociationTypes.value,
+    if (cachedFiltersResponse.value) {
+      return {
+        ...cachedFiltersResponse.value,
+        applied_filters: requestedFilters.value,
+      }
     }
+
+    return createEmptyFiltersResponse(
+      analyticsResponse.value?.applied_filters ?? requestedFilters.value,
+    )
   })
 
   const appliedFilters = computed(() =>
@@ -159,11 +177,13 @@ export const useDashboardStore = defineStore('dashboard', () => {
     return ''
   })
   const hasAnalyticsData = computed(() => analyticsResponse.value !== null)
-  const hasFiltersData = computed(() => filtersApiResponse.value !== null)
+  const hasFiltersData = computed(
+    () => filtersApiResponse.value !== null || cachedFiltersResponse.value !== null,
+  )
 
   function applyFilters(filters: Partial<AnalyticsFilters>) {
     requestedFilters.value = normalizeAnalyticsFilters({
-      ...appliedFilters.value,
+      ...requestedFilters.value,
       ...filters,
     })
   }
diff --git a/src/pages/dashboard/model/filterDefinitions.ts b/src/pages/dashboard/model/filterDefinitions.ts
index 935b7b2..5ca575b 100644
--- a/src/pages/dashboard/model/filterDefinitions.ts
+++ b/src/pages/dashboard/model/filterDefinitions.ts
@@ -1,5 +1,10 @@
 import { ALL_FILTER_VALUE, type DashboardDialogFilterKey } from './filterDraft'
-import type { AnalyticsFilterOptionBase, CompetenceMapAnalyticsFiltersResponse } from './types'
+import type {
+  AnalyticsFilterOptionBase,
+  AnalyticsFilters,
+  CompetenceMapAnalyticsFiltersResponse,
+  RegionFilterOption,
+} from './types'
 
 export interface DashboardFilterOption {
   disabled: boolean
@@ -31,8 +36,22 @@ const withAllOption = (options: AnalyticsFilterOptionBase[]): DashboardFilterOpt
   ...options.map(toDashboardFilterOption),
 ]
 
+const getRegionOptions = (
+  filtersResponse: CompetenceMapAnalyticsFiltersResponse,
+  filters: AnalyticsFilters,
+): RegionFilterOption[] => {
+  if (!filters.federal_district_id) {
+    return filtersResponse.regions
+  }
+
+  return filtersResponse.regions.filter(
+    (region) => region.federal_district_id === filters.federal_district_id,
+  )
+}
+
 export const createDashboardFilterDefinitions = (
   filtersResponse: CompetenceMapAnalyticsFiltersResponse,
+  filters: AnalyticsFilters = filtersResponse.applied_filters,
 ): DashboardFilterDefinition[] => [
   {
     id: 'federal_district_id',
@@ -44,7 +63,7 @@ export const createDashboardFilterDefinitions = (
     id: 'region_id',
     label: 'Субъект',
     placeholder: 'Выберите субъект',
-    options: withAllOption(filtersResponse.regions),
+    options: withAllOption(getRegionOptions(filtersResponse, filters)),
   },
   {
     id: 'industry_id',
diff --git a/src/pages/dashboard/model/filterOptionsCache.ts b/src/pages/dashboard/model/filterOptionsCache.ts
new file mode 100644
index 0000000..e2fef24
--- /dev/null
+++ b/src/pages/dashboard/model/filterOptionsCache.ts
@@ -0,0 +1,59 @@
+import type { CompetenceMapAnalyticsFiltersResponse } from './types'
+
+type FilterOptionWithAvailability = {
+  disabled: boolean
+  id: string
+}
+
+export const mergeFilterOptions = <TOption extends FilterOptionWithAvailability>(
+  cachedOptions: readonly TOption[],
+  incomingOptions: readonly TOption[],
+): TOption[] => {
+  const mergedOptions = new Map<string, TOption>()
+
+  cachedOptions.forEach((option) => {
+    mergedOptions.set(option.id, { ...option })
+  })
+
+  incomingOptions.forEach((option) => {
+    const cachedOption = mergedOptions.get(option.id)
+
+    if (!cachedOption) {
+      mergedOptions.set(option.id, { ...option })
+      return
+    }
+
+    mergedOptions.set(option.id, {
+      ...cachedOption,
+      ...option,
+      disabled: cachedOption.disabled && option.disabled,
+    })
+  })
+
+  return Array.from(mergedOptions.values())
+}
+
+export const mergeFiltersResponseOptions = (
+  cachedResponse: CompetenceMapAnalyticsFiltersResponse | null,
+  incomingResponse: CompetenceMapAnalyticsFiltersResponse,
+): CompetenceMapAnalyticsFiltersResponse => {
+  if (!cachedResponse) {
+    return incomingResponse
+  }
+
+  return {
+    ...incomingResponse,
+    association_types: mergeFilterOptions(
+      cachedResponse.association_types,
+      incomingResponse.association_types,
+    ),
+    federal_districts: mergeFilterOptions(
+      cachedResponse.federal_districts,
+      incomingResponse.federal_districts,
+    ),
+    regions: mergeFilterOptions(cachedResponse.regions, incomingResponse.regions),
+    industries: incomingResponse.industries,
+    integrated_structures: incomingResponse.integrated_structures,
+    organizations: incomingResponse.organizations,
+  }
+}
diff --git a/src/pages/dashboard/model/filters.ts b/src/pages/dashboard/model/filters.ts
index 47e1166..d8dcdeb 100644
--- a/src/pages/dashboard/model/filters.ts
+++ b/src/pages/dashboard/model/filters.ts
@@ -2,7 +2,7 @@ import type {
   ApiV1CompetenceMapAnalyticsFiltersListParams,
   ApiV1CompetenceMapAnalyticsListParams,
 } from '@/shared/api'
-import type { AnalyticsFilters, AssociationType } from './types'
+import type { AnalyticsFilterKey, AnalyticsFilters, AssociationType } from './types'
 
 export type CompetenceMapAnalyticsParams = ApiV1CompetenceMapAnalyticsListParams &
   ApiV1CompetenceMapAnalyticsFiltersListParams
@@ -16,6 +16,14 @@ export const defaultAnalyticsFilters: AnalyticsFilters = {
   organization_id: null,
 }
 
+export const analyticsFilterCascadeOrder: readonly AnalyticsFilterKey[] = [
+  'federal_district_id',
+  'region_id',
+  'industry_id',
+  'integrated_structure_id',
+  'organization_id',
+]
+
 const isAssociationType = (value: unknown): value is AssociationType =>
   value === 'all' || value === 'sez' || value === 'technoparks' || value === 'clusters'
 
@@ -39,6 +47,36 @@ export const normalizeAppliedFilters = (
   filters: Partial<AnalyticsFilters> = {},
 ): AnalyticsFilters => normalizeAnalyticsFilters(filters)
 
+export const createCascadingAnalyticsFiltersPatch = <FilterId extends AnalyticsFilterKey>(
+  filterId: FilterId,
+  value: AnalyticsFilters[FilterId],
+): Partial<AnalyticsFilters> => {
+  const filterIndex = analyticsFilterCascadeOrder.indexOf(filterId)
+  const patch: Partial<AnalyticsFilters> = {
+    [filterId]: value,
+  }
+
+  if (filterIndex === -1) {
+    return patch
+  }
+
+  analyticsFilterCascadeOrder.slice(filterIndex + 1).forEach((nextFilterId) => {
+    patch[nextFilterId] = defaultAnalyticsFilters[nextFilterId] as never
+  })
+
+  return patch
+}
+
+export const isDownstreamAnalyticsFilter = (
+  sourceFilterId: AnalyticsFilterKey,
+  candidateFilterId: AnalyticsFilterKey,
+): boolean => {
+  const sourceIndex = analyticsFilterCascadeOrder.indexOf(sourceFilterId)
+  const candidateIndex = analyticsFilterCascadeOrder.indexOf(candidateFilterId)
+
+  return sourceIndex !== -1 && candidateIndex > sourceIndex
+}
+
 export const toApiParams = (filters: AnalyticsFilters): CompetenceMapAnalyticsParams => {
   const params: CompetenceMapAnalyticsParams = {
     association_type: filters.association_type,
diff --git a/src/pages/dashboard/model/formatters.ts b/src/pages/dashboard/model/formatters.ts
index a8f6a95..f1e5cb4 100644
--- a/src/pages/dashboard/model/formatters.ts
+++ b/src/pages/dashboard/model/formatters.ts
@@ -6,6 +6,9 @@ export const getNumericValue = (value: unknown): number =>
 export const formatNumber = (value: number | null | undefined): string =>
   typeof value === 'number' && Number.isFinite(value) ? value.toLocaleString('ru-RU') : '—'
 
+const formatDecimalNumber = (value: number): string =>
+  value.toLocaleString('ru-RU').replace(',', '.')
+
 export const capitalizeFirstLetter = (value: string): string => {
   if (!value) {
     return value
@@ -21,13 +24,15 @@ export const formatMetricValue = (
     return '—'
   }
 
-  const formattedValue = formatNumber(metric.value)
-
   if (metric.value_type === 'percent') {
-    return `${formattedValue}%`
+    return `${formatDecimalNumber(metric.value)}%`
   }
 
-  return formattedValue
+  if (metric.value_type === 'decimal') {
+    return formatDecimalNumber(metric.value)
+  }
+
+  return formatNumber(metric.value)
 }
 
 export const formatKpiValue = (kpi: AnalyticsKpi): string => formatMetricValue(kpi)
diff --git a/src/pages/dashboard/model/index.ts b/src/pages/dashboard/model/index.ts
index 9d413eb..666e415 100644
--- a/src/pages/dashboard/model/index.ts
+++ b/src/pages/dashboard/model/index.ts
@@ -6,7 +6,10 @@ export {
 } from './chartData'
 export { associationTypeColorMap } from './constants'
 export {
+  analyticsFilterCascadeOrder,
+  createCascadingAnalyticsFiltersPatch,
   defaultAnalyticsFilters,
+  isDownstreamAnalyticsFilter,
   normalizeAnalyticsFilters,
   normalizeAppliedFilters,
   toApiParams,
diff --git a/src/pages/dashboard/ui/CompetenceMapFilters.vue b/src/pages/dashboard/ui/CompetenceMapFilters.vue
index 3cb973b..34b22ba 100644
--- a/src/pages/dashboard/ui/CompetenceMapFilters.vue
+++ b/src/pages/dashboard/ui/CompetenceMapFilters.vue
@@ -1,284 +1,550 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue'
-import { Funnel } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { X } from 'lucide-vue-next'
 import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@gisp/ui-kit-shadcn-vue'
 import {
+  ALL_FILTER_VALUE,
+  createCascadingAnalyticsFiltersPatch,
   createDashboardFilterDefinitions,
-  dashboardDialogFilterIds,
   defaultAnalyticsFilters,
-  defaultDashboardDraftFilters,
-  toDashboardAnalyticsFilters,
-  toDashboardDraftFilters,
+  isDownstreamAnalyticsFilter,
+  toNullableDashboardFilterValue,
   useDashboardStore,
+  type AnalyticsFilterKey,
+  type AnalyticsFilters,
+  type AssociationType,
+  type DashboardDialogFilterKey,
 } from '../model'
-import CompetenceMapFilterField from './components/CompetenceMapFilterField.vue'
+import type { DashboardFilterOption } from '../model'
+
+type AssociationTypeOption = DashboardFilterOption & {
+  value: AssociationType
+}
 
 const dashboard = useDashboardStore()
-const draftFilters = reactive({ ...defaultDashboardDraftFilters })
-const isDialogOpen = ref(false)
+const pendingCascadeSourceFilterId = ref<AnalyticsFilterKey | null>(null)
+let cascadeLoadingFallbackTimer: ReturnType<typeof globalThis.setTimeout> | null = null
+
+const associationTypeFallbackOptions: AssociationTypeOption[] = [
+  { value: 'all', label: 'Все', disabled: false },
+  { value: 'sez', label: 'ОЭЗ', disabled: false },
+  { value: 'technoparks', label: 'Технопарки', disabled: false },
+  { value: 'clusters', label: 'Кластеры', disabled: false },
+]
 
 const filterDefinitions = computed(() =>
-  createDashboardFilterDefinitions(dashboard.filtersResponse),
+  createDashboardFilterDefinitions(dashboard.filtersResponse, dashboard.appliedFilters),
 )
 
-const activeFiltersCount = computed(
-  () =>
-    dashboardDialogFilterIds.filter((filterId) => {
-      const value = dashboard.appliedFilters[filterId]
-      const defaultValue = defaultAnalyticsFilters[filterId]
-
-      return value !== defaultValue
-    }).length,
+const visibleFilterDefinitions = computed(() =>
+  selectedAssociationType.value === 'clusters'
+    ? filterDefinitions.value.filter((filter) => filter.id !== 'organization_id')
+    : filterDefinitions.value,
 )
 
-const hasActiveFilters = computed(() => activeFiltersCount.value > 0)
+const associationTypeOptions = computed<AssociationTypeOption[]>(() => {
+  const serverOptions = dashboard.filtersResponse.association_types
 
-const hasDraftChanges = computed(() =>
-  dashboardDialogFilterIds.some(
-    (filterId) =>
-      draftFilters[filterId] !== toDashboardDraftFilters(dashboard.appliedFilters)[filterId],
-  ),
-)
+  if (!serverOptions.length) {
+    return associationTypeFallbackOptions
+  }
+
+  return serverOptions.map((option) => ({
+    value: option.id,
+    label: option.label,
+    disabled: option.disabled,
+  }))
+})
+
+const selectedAssociationType = computed<AssociationType>({
+  get: () => dashboard.appliedFilters.association_type,
+  set: (associationType) => {
+    dashboard.applyFilters({ association_type: associationType })
+  },
+})
 
 const areFilterControlsDisabled = computed(() => dashboard.isLoading && !dashboard.hasFiltersData)
 
-const isDraftDefault = computed(() =>
-  dashboardDialogFilterIds.every(
-    (filterId) => draftFilters[filterId] === defaultDashboardDraftFilters[filterId],
-  ),
+const isFilterCascadeLoading = (filterId: AnalyticsFilterKey): boolean =>
+  Boolean(
+    pendingCascadeSourceFilterId.value &&
+      dashboard.isFiltersFetching &&
+      isDownstreamAnalyticsFilter(pendingCascadeSourceFilterId.value, filterId),
+  )
+
+const hasActiveFilters = computed(() =>
+  Object.entries(defaultAnalyticsFilters).some(([filterId, defaultValue]) => {
+    const currentValue = dashboard.appliedFilters[filterId as keyof AnalyticsFilters]
+
+    return currentValue !== defaultValue
+  }),
 )
 
-function syncDraftFilters() {
-  const nextDraftFilters = toDashboardDraftFilters(dashboard.appliedFilters)
+const normalizeDisplayLabel = (label: string): string =>
+  label.trim().toLocaleLowerCase('ru-RU') === 'все' ? 'все' : label
 
-  dashboardDialogFilterIds.forEach((filterId) => {
-    draftFilters[filterId] = nextDraftFilters[filterId]
-  })
+const getFilterValue = (filterId: DashboardDialogFilterKey): string =>
+  dashboard.appliedFilters[filterId] ?? ALL_FILTER_VALUE
+
+const clearCascadeFiltersLoading = (): void => {
+  pendingCascadeSourceFilterId.value = null
+
+  if (cascadeLoadingFallbackTimer) {
+    globalThis.clearTimeout(cascadeLoadingFallbackTimer)
+    cascadeLoadingFallbackTimer = null
+  }
 }
 
-function resetDraftFilters() {
-  dashboardDialogFilterIds.forEach((filterId) => {
-    draftFilters[filterId] = defaultDashboardDraftFilters[filterId]
-  })
+const markCascadeFiltersLoading = (filterId: AnalyticsFilterKey): void => {
+  clearCascadeFiltersLoading()
+
+  pendingCascadeSourceFilterId.value = filterId
+
+  cascadeLoadingFallbackTimer = globalThis.setTimeout(() => {
+    if (!dashboard.isFiltersFetching) {
+      pendingCascadeSourceFilterId.value = null
+    }
+
+    cascadeLoadingFallbackTimer = null
+  }, 120)
 }
 
-function closeDialog() {
-  syncDraftFilters()
-  isDialogOpen.value = false
-}
+const updateFilter = (filterId: DashboardDialogFilterKey, value: string): void => {
+  const nextValue = toNullableDashboardFilterValue(value)
 
-function applyDraftFilters() {
-  if (!hasDraftChanges.value) {
+  if (dashboard.appliedFilters[filterId] === nextValue) {
     return
   }
 
-  dashboard.applyFilters(toDashboardAnalyticsFilters(draftFilters))
-  isDialogOpen.value = false
+  markCascadeFiltersLoading(filterId)
+  dashboard.applyFilters(createCascadingAnalyticsFiltersPatch(filterId, nextValue))
 }
 
-watch(isDialogOpen, (isOpen) => {
-  if (isOpen) {
-    syncDraftFilters()
+const updateAssociationType = (value: string): void => {
+  const nextAssociationType = value as AssociationType
+
+  if (dashboard.appliedFilters.association_type === nextAssociationType) {
+    return
   }
+
+  clearCascadeFiltersLoading()
+  dashboard.applyFilters({ association_type: nextAssociationType })
+}
+
+watch(
+  () => dashboard.isFiltersFetching,
+  (isFiltersFetching) => {
+    if (!isFiltersFetching) {
+      clearCascadeFiltersLoading()
+    }
+  },
+)
+
+onBeforeUnmount(() => {
+  clearCascadeFiltersLoading()
 })
 </script>
 
 <template>
-  <Dialog v-model:open="isDialogOpen">
-    <DialogTrigger as-child>
-      <button
-        type="button"
-        class="competence-map-filters-dialog-trigger"
-        :class="{ 'has-active-filters': hasActiveFilters }"
-        aria-label="Открыть фильтры аналитической панели"
-        :aria-expanded="isDialogOpen"
+  <div class="competence-map-filters" aria-label="Фильтры аналитической панели">
+    <div class="competence-map-filters__row">
+      <Select
+        :model-value="selectedAssociationType"
+        @update:model-value="updateAssociationType(String($event))"
       >
-        <Funnel class="competence-map-filters-dialog-trigger-icon" aria-hidden="true" />
-        <span
-          v-if="hasActiveFilters"
-          class="competence-map-filters-dialog-badge"
-          aria-hidden="true"
+        <SelectTrigger
+          class="competence-map-filter-trigger competence-map-filter-trigger--association-type"
+          aria-label="Тип объединения"
         >
-          {{ activeFiltersCount }}
-        </span>
-      </button>
-    </DialogTrigger>
+          <span class="competence-map-filter-trigger__label">Тип объединения</span>
+          <SelectValue placeholder="все" class="competence-map-filter-trigger__value" />
+        </SelectTrigger>
 
-    <DialogContent class="competence-map-filters-dialog-content">
-      <div class="competence-map-filters-dialog-form">
-        <div class="competence-map-filters-dialog-heading">
-          <DialogTitle class="competence-map-filters-dialog-title">Фильтры</DialogTitle>
-          <DialogDescription class="sr-only">
-            Фильтры аналитической панели карты компетенций
-          </DialogDescription>
-        </div>
+        <SelectContent class="competence-map-filter-content">
+          <SelectItem
+            v-for="option in associationTypeOptions"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ normalizeDisplayLabel(option.label) }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
 
-        <div class="competence-map-filters-dialog-field-list">
-          <CompetenceMapFilterField
-            v-for="filter in filterDefinitions"
-            :key="filter.id"
-            v-model="draftFilters[filter.id]"
-            :disabled="areFilterControlsDisabled"
-            :filter="filter"
+      <Select
+        v-for="filter in visibleFilterDefinitions"
+        :key="filter.id"
+        :model-value="getFilterValue(filter.id)"
+        @update:model-value="updateFilter(filter.id, String($event))"
+      >
+        <SelectTrigger
+          class="competence-map-filter-trigger"
+          :class="[
+            `competence-map-filter-trigger--${filter.id}`,
+            isFilterCascadeLoading(filter.id) && 'is-cascade-loading',
+          ]"
+          :aria-label="filter.label"
+          :aria-busy="isFilterCascadeLoading(filter.id)"
+          :disabled="areFilterControlsDisabled || isFilterCascadeLoading(filter.id)"
+        >
+          <span class="competence-map-filter-trigger__label">{{ filter.label }}</span>
+          <span
+            v-if="isFilterCascadeLoading(filter.id)"
+            class="competence-map-filter-trigger__skeleton"
+            aria-hidden="true"
           />
-        </div>
+          <SelectValue
+            v-else
+            :placeholder="filter.placeholder"
+            class="competence-map-filter-trigger__value"
+          />
+        </SelectTrigger>
 
-        <div class="competence-map-filters-dialog-action-list">
-          <Button
-            type="button"
-            variant="user-outline"
-            class="competence-map-filters-dialog-action"
-            :disabled="isDraftDefault || areFilterControlsDisabled"
-            @click="resetDraftFilters"
+        <SelectContent class="competence-map-filter-content">
+          <SelectItem
+            v-for="option in filter.options"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
           >
-            Сбросить
-          </Button>
+            {{ normalizeDisplayLabel(option.label) }}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
 
-          <Button
-            type="button"
-            variant="user-outline"
-            class="competence-map-filters-dialog-action"
-            @click="closeDialog"
-          >
-            Отмена
-          </Button>
-
-          <Button
-            type="button"
-            variant="user-dark"
-            class="competence-map-filters-dialog-action"
-            :disabled="!hasDraftChanges || areFilterControlsDisabled"
-            @click="applyDraftFilters"
-          >
-            Применить
-          </Button>
-        </div>
-      </div>
-    </DialogContent>
-  </Dialog>
+    <button
+      type="button"
+      class="competence-map-filters__clear"
+      :disabled="!hasActiveFilters || areFilterControlsDisabled"
+      @click="dashboard.resetFilters()"
+    >
+      <span class="competence-map-filters__clear-icon" aria-hidden="true">
+        <X />
+      </span>
+      <span>Очистить фильтры</span>
+    </button>
+  </div>
 </template>
 
 <style scoped>
-.competence-map-filters-dialog-trigger {
-  position: relative;
-  display: inline-flex;
-  width: 44px;
-  height: 44px;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 0;
-  border-radius: 12px;
-  background: var(--Infographic-BG-Cards, #f3f3f3);
-  color: #2c5694;
-  cursor: pointer;
-  transition:
-    background-color 160ms ease,
-    box-shadow 160ms ease,
-    color 160ms ease;
-}
-
-.competence-map-filters-dialog-trigger.has-active-filters,
-.competence-map-filters-dialog-trigger:hover {
-  background: #e8eef6;
-}
-
-.competence-map-filters-dialog-trigger:focus-visible {
-  outline: 2px solid rgb(2 36 86 / 55%);
-  outline-offset: 2px;
-}
-
-.competence-map-filters-dialog-trigger-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.competence-map-filters-dialog-badge {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  display: inline-flex;
-  min-width: 18px;
-  height: 18px;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 4px;
-  border-radius: 999px;
-  background: #2c5694;
-  box-shadow:
-    0 0 0 2px #ffffff,
-    0 0 12px rgb(44 86 148 / 28%);
-  color: #ffffff;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-:global(.competence-map-filters-dialog-content) {
-  width: min(600px, calc(100vw - 32px));
-  max-width: 600px;
-  padding: 24px;
-  border-radius: 16px;
-}
-
-.competence-map-filters-dialog-form {
-  display: flex;
+.competence-map-filters {
+  display: grid;
   min-width: 0;
-  flex-direction: column;
-  gap: 20px;
+  width: var(--dashboard-content-width, 1473px);
+  max-width: 100%;
+  gap: 6px;
 }
 
-.competence-map-filters-dialog-heading {
+.competence-map-filters__row {
   display: grid;
-  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  grid-template-columns:
+    minmax(0, 1.2fr)
+    minmax(0, 1.2fr)
+    minmax(0, 0.75fr)
+    minmax(0, 0.75fr)
+    minmax(0, 1.55fr)
+    minmax(0, 0.85fr);
+  overflow: visible;
+  gap: 8px;
+  align-items: center;
 }
 
-.competence-map-filters-dialog-title {
-  margin: 0;
-  color: #022456;
+.competence-map-filter-trigger {
+  width: 100% !important;
+  min-width: 0;
+  height: 40px;
+  min-height: 40px;
+  gap: 6px !important;
+  overflow: hidden;
+  border: 0.270312px solid #abafb3;
+  border-radius: 3px;
+  background: transparent;
+  padding: 2.70312px 5px 3px 5.40625px !important;
+  box-shadow: none;
+  color: #000000;
   font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 20px;
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 400;
+  letter-spacing: -0.02em;
 }
 
-.competence-map-filters-dialog-field-list {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px 16px;
+.competence-map-filter-trigger--association-type,
+.competence-map-filter-trigger--federal_district_id {
+  width: 100% !important;
+  min-width: 0;
 }
 
-.competence-map-filters-dialog-action-list {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 4px;
+.competence-map-filter-trigger--region_id,
+.competence-map-filter-trigger--industry_id {
+  width: 100% !important;
+  min-width: 0;
 }
 
-.competence-map-filters-dialog-action {
-  width: 140px !important;
-  height: 44px;
+.competence-map-filter-trigger--integrated_structure_id {
+  width: 100% !important;
+  min-width: 0;
 }
 
-@media (max-width: 640px) {
-  .competence-map-filters-dialog-field-list {
+.competence-map-filter-trigger--organization_id {
+  width: 100% !important;
+  min-width: 0;
+}
+
+.competence-map-filter-trigger:hover,
+.competence-map-filter-trigger[data-state='open'] {
+  border-color: #8f969d;
+  background: rgb(255 255 255 / 0.16);
+}
+
+.competence-map-filter-trigger.is-cascade-loading,
+.competence-map-filter-trigger.is-cascade-loading:disabled {
+  cursor: wait;
+  opacity: 1;
+  background: rgb(255 255 255 / 0.1);
+}
+
+.competence-map-filter-trigger:focus-visible {
+  border-color: #674ee3;
+  box-shadow: 0 0 0 2px rgb(103 78 227 / 0.18);
+}
+
+.competence-map-filter-trigger__label {
+  display: block;
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 72%;
+  overflow: hidden;
+  color: #000000;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.competence-map-filter-trigger__value {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 31px;
+  max-width: 100%;
+  overflow: hidden;
+  color: #c90237;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.competence-map-filter-trigger__skeleton {
+  display: block;
+  flex: 1 1 auto;
+  width: clamp(46px, 52%, 92px);
+  min-width: 42px;
+  max-width: 92px;
+  height: 16px;
+  overflow: hidden;
+  border-radius: 4px;
+  background:
+    linear-gradient(
+      90deg,
+      rgb(2 36 86 / 0.08) 0%,
+      rgb(255 255 255 / 0.38) 48%,
+      rgb(2 36 86 / 0.08) 100%
+    ),
+    rgb(2 36 86 / 0.08);
+  background-size: 180% 100%;
+  animation: competence-map-filter-skeleton 1100ms ease-in-out infinite;
+}
+
+.competence-map-filter-trigger :deep([data-slot='select-value']) {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  color: #c90237;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.competence-map-filter-trigger :deep([data-slot='select-value'] > span) {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.competence-map-filter-trigger :deep(svg) {
+  width: 16px;
+  height: 16px;
+  color: #18181b;
+  opacity: 1;
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.18));
+}
+
+.competence-map-filter-trigger.is-cascade-loading :deep(svg) {
+  opacity: 0.48;
+  filter: none;
+}
+
+@keyframes competence-map-filter-skeleton {
+  0% {
+    background-position: 120% 0;
+  }
+
+  100% {
+    background-position: -80% 0;
+  }
+}
+
+:global(.competence-map-filter-content) {
+  overflow: hidden !important;
+  border: 0.270312px solid #abafb3 !important;
+  border-radius: 3px !important;
+  background: rgb(245 247 250 / 0.98) !important;
+  box-shadow: 0 6px 16px rgb(2 36 86 / 0.1) !important;
+  color: #000000 !important;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif) !important;
+}
+
+:global(.competence-map-filter-content [data-slot='select-viewport']) {
+  gap: 0 !important;
+  padding: 4px 0 !important;
+  scrollbar-color: #022456 transparent;
+  scrollbar-width: thin;
+}
+
+:global(.competence-map-filter-content [data-slot='select-item']) {
+  width: 100%;
+  height: auto !important;
+  min-height: 34px;
+  align-items: center;
+  border-radius: 0 !important;
+  padding: 0 10px !important;
+  color: #000000 !important;
+  font-size: 18px !important;
+  line-height: 20px !important;
+  font-weight: 400 !important;
+}
+
+:global(.competence-map-filter-content [data-slot='select-item'][data-highlighted]) {
+  background: rgb(255 255 255 / 0.24) !important;
+  color: #c90237 !important;
+}
+
+:global(.competence-map-filter-content [data-slot='select-item'][data-state='checked']) {
+  color: #c90237 !important;
+}
+
+:global(.competence-map-filter-content [data-slot='select-item'][data-disabled]) {
+  color: rgb(2 36 86 / 0.38) !important;
+  opacity: 1 !important;
+}
+
+:global(.competence-map-filter-content [data-slot='select-item-text']) {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.competence-map-filters__clear {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 16px;
+  align-items: center;
+  justify-self: end;
+  gap: 3px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: #022456;
+  cursor: pointer;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 10px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+
+.competence-map-filters__clear:hover,
+.competence-map-filters__clear:focus-visible {
+  color: #c90237;
+}
+
+.competence-map-filters__clear:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.competence-map-filters__clear-icon {
+  display: inline-grid;
+  width: 12px;
+  height: 12px;
+  place-items: center;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+}
+
+.competence-map-filters__clear-icon svg {
+  width: 8px;
+  height: 8px;
+  stroke-width: 2.25;
+}
+
+@container dashboard-content (max-width: 1320px) {
+  .competence-map-filters__row {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .competence-map-filter-trigger,
+  .competence-map-filter-trigger--association-type,
+  .competence-map-filter-trigger--federal_district_id,
+  .competence-map-filter-trigger--region_id,
+  .competence-map-filter-trigger--industry_id,
+  .competence-map-filter-trigger--integrated_structure_id,
+  .competence-map-filter-trigger--organization_id {
+    width: 100% !important;
+    min-width: 0;
+  }
+}
+
+@container dashboard-content (max-width: 880px) {
+  .competence-map-filters__row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container dashboard-content (max-width: 560px) {
+  .competence-map-filters__row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1320px) {
+  .competence-map-filters__row {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .competence-map-filters__row {
     grid-template-columns: 1fr;
   }
 
-  .competence-map-filters-dialog-action-list {
-    flex-direction: column;
-  }
-
-  .competence-map-filters-dialog-action {
-    width: 100%;
+  .competence-map-filter-trigger {
+    font-size: 17px;
   }
 }
 </style>
diff --git a/src/pages/dashboard/ui/DashboardPage.vue b/src/pages/dashboard/ui/DashboardPage.vue
index c2bcd61..080fb33 100644
--- a/src/pages/dashboard/ui/DashboardPage.vue
+++ b/src/pages/dashboard/ui/DashboardPage.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { PageBreadcrumbItem } from '@/shared/ui'
 import {
   type AnalyticsKpi,
-  type AssociationTypeFilterOption,
   type AssociationType,
   type ChartTooltipContent,
   type ChartTooltipState,
@@ -17,16 +15,13 @@ import {
   type TopIndustriesBlock,
   useDashboardStore,
 } from '../model'
-import ReportsView from './ReportsView.vue'
 import CompetenceMapFilters from './CompetenceMapFilters.vue'
-import CompetenceMapToolbar from './CompetenceMapToolbar.vue'
 import {
   ChartTooltipPortal,
   CompositionCard,
   DashboardKpiGrid,
   DashboardSkeletonGrid,
   DashboardStatePanel,
-  DashboardTabs,
   EmployeeStatsCard,
   RegionRankingCard,
   TopIndustriesCard,
@@ -35,44 +30,6 @@ import {
 
 const dashboard = useDashboardStore()
 
-const breadcrumbItems: PageBreadcrumbItem[] = [
-  {
-    label: 'Все сервисы',
-    to: '/dashboard',
-  },
-  {
-    label: 'Карта компетенций',
-  },
-]
-
-const associationTypeTabsLoadingItems = [
-  { id: 'all', label: 'Все', disabled: false, associations_count: 0 },
-  { id: 'sez', label: 'ОЭЗ', disabled: false, associations_count: 0 },
-  { id: 'technoparks', label: 'Технопарки', disabled: false, associations_count: 0 },
-  { id: 'clusters', label: 'Кластеры', disabled: false, associations_count: 0 },
-] satisfies Array<{
-  associations_count: number
-  disabled: boolean
-  id: AssociationType
-  label: string
-}>
-
-const REGION_RATING_TAB_ID = 'region-rating'
-
-type RegionRatingTabId = typeof REGION_RATING_TAB_ID
-type DashboardTabId = AssociationType | RegionRatingTabId
-type DashboardTabOption =
-  | (AssociationTypeFilterOption & {
-      kind: 'association'
-    })
-  | {
-      associations_count: null
-      disabled: boolean
-      id: RegionRatingTabId
-      kind: 'region-rating'
-      label: string
-    }
-
 type EmployeeStatDisplayItem = Pick<AnalyticsKpi, 'code' | 'label' | 'value_type'> & {
   value: number | null
 }
@@ -126,30 +83,6 @@ const clusterMainBlock = computed(() =>
   dashboard.mainBlock.type === 'cluster_specializations' ? dashboard.mainBlock : null,
 )
 
-const isRegionRatingTabSelected = ref(false)
-
-const activeDashboardTab = computed<DashboardTabId>({
-  get: () =>
-    isRegionRatingTabSelected.value ? REGION_RATING_TAB_ID : dashboard.analytics.association_type,
-  set: (tabId) => {
-    if (tabId === REGION_RATING_TAB_ID) {
-      isRegionRatingTabSelected.value = true
-
-      if (dashboard.analytics.association_type !== 'all') {
-        dashboard.applyFilters({ association_type: 'all' })
-      }
-
-      return
-    }
-
-    isRegionRatingTabSelected.value = false
-
-    if (tabId !== dashboard.analytics.association_type) {
-      dashboard.applyFilters({ association_type: tabId })
-    }
-  },
-})
-
 const regionRankingSortOverrides = ref<Partial<Record<AssociationType, SortState>>>({})
 const mainTableSortOverrides = ref<Partial<Record<SpecificAssociationType, SortState>>>({})
 
@@ -165,24 +98,7 @@ const chartTooltip = ref<ChartTooltipState>({
   y: 0,
 })
 
-const associationTypeTabs = computed(() => dashboard.filtersResponse.association_types)
-const visibleAssociationTypeTabs = computed(() =>
-  associationTypeTabs.value.length ? associationTypeTabs.value : associationTypeTabsLoadingItems,
-)
-const dashboardTabs = computed<DashboardTabOption[]>(() => [
-  ...visibleAssociationTypeTabs.value.map((option) => ({
-    ...option,
-    kind: 'association' as const,
-  })),
-])
-const updateActiveDashboardTab = (tabId: string): void => {
-  activeDashboardTab.value = tabId as DashboardTabId
-}
-const isRegionRatingTabActive = computed(() => activeDashboardTab.value === REGION_RATING_TAB_ID)
 const isDashboardDataLoading = computed(() => dashboard.isAnalyticsFetching)
-const isFiltersDataLoading = computed(
-  () => dashboard.isFiltersFetching && !associationTypeTabs.value.length,
-)
 const shouldShowDashboardError = computed(() => dashboard.isError && !dashboard.hasAnalyticsData)
 const shouldShowAnalyticsContent = computed(
   () => !isDashboardDataLoading.value && !shouldShowDashboardError.value,
@@ -231,9 +147,9 @@ const regionRankingColumns = computed(() => {
   switch (dashboard.analytics.association_type) {
     case 'all':
       return [
-        { key: 'cluster_opk_organizations_count', label: 'Кластеры' },
-        { key: 'technopark_opk_organizations_count', label: 'Технопарки' },
-        { key: 'sez_opk_organizations_count', label: 'ОЭЗ' },
+        { key: 'cluster_opk_organizations_count', label: 'Количество кластеров' },
+        { key: 'technopark_opk_organizations_count', label: 'Количество технопарков' },
+        { key: 'sez_opk_organizations_count', label: 'Количество ОЭЗ' },
       ]
     case 'sez':
       return [
@@ -247,8 +163,8 @@ const regionRankingColumns = computed(() => {
       ]
     case 'clusters':
       return [
-        { key: 'clusters_count', label: 'Кластеры' },
-        { key: 'opk_organizations_count', label: 'ОПК' },
+        { key: 'clusters_count', label: 'Количество кластеров' },
+        { key: 'opk_organizations_count', label: 'Количество организаций ОПК' },
       ]
     default:
       return []
@@ -384,103 +300,80 @@ const hideChartTooltip = () => {
 </script>
 
 <template>
-  <CompetenceMapToolbar :breadcrumb-items="breadcrumbItems" />
-
   <section class="dashboard-content-section" aria-labelledby="dashboard-title">
-    <div class="page-header">
-      <div>
-        <h1 id="dashboard-title">Аналитическая панель</h1>
-      </div>
+    <h1 id="dashboard-title" class="sr-only">Аналитическая панель</h1>
+    <CompetenceMapFilters />
 
-      <div class="page-header-actions">
-        <CompetenceMapFilters />
-      </div>
-    </div>
-
-    <DashboardTabs
-      v-if="dashboardTabs.length"
-      :model-value="activeDashboardTab"
-      :tabs="dashboardTabs"
-      :is-loading="isFiltersDataLoading"
-      @update:model-value="updateActiveDashboardTab"
+    <DashboardStatePanel
+      v-if="shouldShowDashboardError"
+      :message="dashboard.errorMessage"
+      @retry="dashboard.refetch()"
     />
 
-    <ReportsView v-if="isRegionRatingTabActive" class="dashboard-reports-tab" />
+    <DashboardSkeletonGrid
+      v-else-if="isDashboardDataLoading"
+      :association-type="dashboard.analytics.association_type"
+      :primary-blocks="analyticsSkeletonBlocks.primary"
+      :secondary-blocks="analyticsSkeletonBlocks.secondary"
+    />
 
-    <template v-else>
-      <DashboardKpiGrid :is-loading="isDashboardDataLoading" :kpis="dashboard.kpis" />
+    <section
+      v-else-if="shouldShowAnalyticsContent"
+      class="analytics-dashboard-grid"
+      :class="`is-${dashboard.analytics.association_type}`"
+      aria-label="Аналитические блоки карты компетенций"
+    >
+      <div class="analytics-dashboard-column analytics-dashboard-column--primary">
+        <DashboardKpiGrid :is-loading="false" :kpis="dashboard.kpis" />
 
-      <DashboardStatePanel
-        v-if="shouldShowDashboardError"
-        :message="dashboard.errorMessage"
-        @retry="dashboard.refetch()"
-      />
+        <CompositionCard
+          :main-block-title="dashboard.mainBlock.title"
+          :associations-composition-block="associationsCompositionBlock"
+          :sez-main-block="sezMainBlock"
+          :sez-priority-rows="sortedSezPriorityRows"
+          :sez-priority-sort="sezPrioritySort"
+          :technopark-main-block="technoparkMainBlock"
+          :technopark-area-rows="sortedTechnoparkAreaRows"
+          :technopark-area-sort="technoparkAreaSort"
+          :cluster-main-block="clusterMainBlock"
+          :cluster-specialization-rows="sortedClusterSpecializationRows"
+          :cluster-specializations-sort="clusterSpecializationsSort"
+          @sort="updateMainTableSort"
+        />
 
-      <DashboardSkeletonGrid
-        v-else-if="isDashboardDataLoading"
-        :association-type="dashboard.analytics.association_type"
-        :primary-blocks="analyticsSkeletonBlocks.primary"
-        :secondary-blocks="analyticsSkeletonBlocks.secondary"
-      />
+        <EmployeeStatsCard v-if="shouldShowEmployeeStats" :items="employeeStatItems" />
 
-      <section
-        v-else-if="shouldShowAnalyticsContent"
-        class="analytics-dashboard-grid"
-        :class="`is-${dashboard.analytics.association_type}`"
-        aria-label="Аналитические блоки карты компетенций"
-      >
-        <div class="analytics-dashboard-column analytics-dashboard-column--primary">
-          <CompositionCard
-            :main-block-title="dashboard.mainBlock.title"
-            :associations-composition-block="associationsCompositionBlock"
-            :composition-donut-data="dashboard.compositionDonutData"
-            :composition-donut-colors="dashboard.compositionDonutColors"
-            :sez-main-block="sezMainBlock"
-            :sez-priority-rows="sortedSezPriorityRows"
-            :sez-priority-sort="sezPrioritySort"
-            :technopark-main-block="technoparkMainBlock"
-            :technopark-area-rows="sortedTechnoparkAreaRows"
-            :technopark-area-sort="technoparkAreaSort"
-            :cluster-main-block="clusterMainBlock"
-            :cluster-specialization-rows="sortedClusterSpecializationRows"
-            :cluster-specializations-sort="clusterSpecializationsSort"
-            @sort="updateMainTableSort"
-          />
+        <TrendCard
+          v-if="dashboard.trendBlock"
+          :trend-block="dashboard.trendBlock"
+          :trend-chart-data="dashboard.trendChartData"
+          :trend-year-labels="dashboard.trendYearLabels"
+          @show-tooltip="showChartTooltip"
+          @move-tooltip="moveChartTooltip"
+          @hide-tooltip="hideChartTooltip"
+        />
+      </div>
 
-          <EmployeeStatsCard v-if="shouldShowEmployeeStats" :items="employeeStatItems" />
+      <div class="analytics-dashboard-column analytics-dashboard-column--secondary">
+        <RegionRankingCard
+          :title="dashboard.regionRanking.title"
+          :columns="regionRankingColumns"
+          :rows="sortedRegionRankingRows"
+          :sort="regionRankingSort"
+          :is-content-sized="isRankingTableContentSized"
+          @sort="updateRegionRankingSort"
+        />
 
-          <TrendCard
-            v-if="dashboard.trendBlock"
-            :trend-block="dashboard.trendBlock"
-            :trend-chart-data="dashboard.trendChartData"
-            :trend-year-labels="dashboard.trendYearLabels"
-            @show-tooltip="showChartTooltip"
-            @move-tooltip="moveChartTooltip"
-            @hide-tooltip="hideChartTooltip"
-          />
-        </div>
-
-        <div class="analytics-dashboard-column analytics-dashboard-column--secondary">
-          <RegionRankingCard
-            :title="dashboard.regionRanking.title"
-            :columns="regionRankingColumns"
-            :rows="sortedRegionRankingRows"
-            :sort="regionRankingSort"
-            :is-content-sized="isRankingTableContentSized"
-            @sort="updateRegionRankingSort"
-          />
-
-          <TopIndustriesCard
-            :title="dashboard.topIndustries.title"
-            :stacked-block="stackedTopIndustries"
-            :single-block="singleTopIndustries"
-            @show-tooltip="showChartTooltip"
-            @move-tooltip="moveChartTooltip"
-            @hide-tooltip="hideChartTooltip"
-          />
-        </div>
-      </section>
-    </template>
+        <TopIndustriesCard
+          :title="dashboard.topIndustries.title"
+          :stacked-block="stackedTopIndustries"
+          :single-block="singleTopIndustries"
+          @show-tooltip="showChartTooltip"
+          @move-tooltip="moveChartTooltip"
+          @hide-tooltip="hideChartTooltip"
+        />
+      </div>
+    </section>
   </section>
 
   <ChartTooltipPortal :tooltip="chartTooltip" />
diff --git a/src/pages/dashboard/ui/components/AssociationsCompositionPanel.vue b/src/pages/dashboard/ui/components/AssociationsCompositionPanel.vue
index 9b8e8c7..2a6c3c9 100644
--- a/src/pages/dashboard/ui/components/AssociationsCompositionPanel.vue
+++ b/src/pages/dashboard/ui/components/AssociationsCompositionPanel.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { DonutChart } from '@gisp/ui-kit-shadcn-vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   associationTypeColorMap,
-  escapeHtml,
   formatNumber,
   formatOrganizationsText,
   type AssociationType,
   type AssociationsCompositionBlock,
-  type CompositionDonutDataPoint,
-  type UiKitDonutTooltipDatum,
 } from '../../model'
 
 const compositionAssociationTooltipLabels = {
@@ -18,106 +14,422 @@ const compositionAssociationTooltipLabels = {
   clusters: 'промышленных кластеров',
 } satisfies Record<Exclude<AssociationType, 'all'>, string>
 
-const props = defineProps<{
-  block: AssociationsCompositionBlock
-  colors: string[]
-  data: CompositionDonutDataPoint[]
-}>()
+const compositionDonutSegmentOrder = ['clusters', 'technoparks', 'sez'] satisfies Array<
+  Exclude<AssociationType, 'all'>
+>
 
-const compositionLegend = computed(() =>
-  props.block.segments.map((segment) => ({
-    ...segment,
-    color: associationTypeColorMap[segment.association_type],
-  })),
+const donutViewBoxWidth = 207
+const donutViewBoxHeight = 205
+const donutCenterX = donutViewBoxWidth / 2
+const donutCenterY = donutViewBoxHeight / 2
+const donutOuterRadius = donutViewBoxHeight / 2
+const donutInnerRadius = 78
+const donutRingRadius = (donutOuterRadius + donutInnerRadius) / 2
+const donutStrokeWidth = donutOuterRadius - donutInnerRadius
+const donutConnectorRadius = donutOuterRadius + 1
+const donutGapDegrees = 0
+const donutStartAngle = -35
+const connectorDiagonalLength = 34
+const connectorDiagonalAngle = (35 * Math.PI) / 180
+const connectorDiagonalDx = Math.cos(connectorDiagonalAngle) * connectorDiagonalLength
+const connectorDiagonalDy = Math.sin(connectorDiagonalAngle) * connectorDiagonalLength
+const compositionLayoutMinWidth = 711
+const compositionLayoutViewBoxHeight = 289
+const donutOffsetY = 58
+const minDonutOffsetX = 228
+const maxDonutLeftBias = 24
+
+const compositionLayoutElement = ref<globalThis.HTMLElement | null>(null)
+const compositionLayoutMeasuredWidth = ref(compositionLayoutMinWidth)
+let compositionLayoutResizeObserver: globalThis.ResizeObserver | null = null
+
+const compositionLayoutViewBoxWidth = computed(() =>
+  Math.max(compositionLayoutMinWidth, Math.round(compositionLayoutMeasuredWidth.value)),
 )
 
-const isCompositionAssociationType = (value: unknown): value is Exclude<AssociationType, 'all'> =>
-  typeof value === 'string' && value in compositionAssociationTooltipLabels
+const donutLeftBias = computed(() => {
+  const layoutWidth = compositionLayoutViewBoxWidth.value
 
-const getNumberField = (value: unknown): number | undefined =>
-  typeof value === 'number' && Number.isFinite(value) ? value : undefined
-
-const formatCompositionShare = (associationsCount: number): string => {
-  if (!props.block.total_associations_count || associationsCount <= 0) {
-    return '0 %'
+  if (layoutWidth >= 900) {
+    return 0
   }
 
-  const share = (associationsCount / props.block.total_associations_count) * 100
+  return Math.min(maxDonutLeftBias, (900 - layoutWidth) * 0.13)
+})
 
-  if (share < 1) {
-    return '<1 %'
+const donutOffsetX = computed(() =>
+  Math.max(
+    minDonutOffsetX,
+    (compositionLayoutViewBoxWidth.value - donutViewBoxWidth) / 2 - donutLeftBias.value,
+  ),
+)
+
+const compositionLayoutStyle = computed(() => ({
+  '--composition-layout-width': `${compositionLayoutViewBoxWidth.value}px`,
+  '--composition-donut-left': `${donutOffsetX.value}px`,
+  '--composition-donut-top': `${donutOffsetY}px`,
+  '--composition-donut-width': `${donutViewBoxWidth}px`,
+  '--composition-donut-height': `${donutViewBoxHeight}px`,
+}))
+
+const compositionConnectorAnchors = {
+  sez: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: 1,
+    edgeInset: 10,
+    fullCircleAngle: 270,
+    preferredCalloutWidth: 270,
+    lineOffsetY: 43,
+    side: 'left',
+  },
+  technoparks: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: -1,
+    edgeInset: 10,
+    fullCircleAngle: 250,
+    preferredCalloutWidth: 270,
+    lineOffsetY: 37,
+    side: 'left',
+  },
+  clusters: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: 1,
+    edgeInset: 10,
+    fullCircleAngle: 90,
+    preferredCalloutWidth: 315,
+    lineOffsetY: 40,
+    side: 'right',
+  },
+} satisfies Record<
+  Exclude<AssociationType, 'all'>,
+  {
+    anchorPosition: number
+    diagonalDirectionY: -1 | 1
+    edgeInset: number
+    fullCircleAngle: number
+    preferredCalloutWidth: number
+    lineOffsetY: number
+    side: 'left' | 'right'
   }
+>
 
-  return `${Math.round(share)} %`
+const props = defineProps<{
+  block: AssociationsCompositionBlock
+}>()
+
+const formatDonutCoordinate = (value: number): string =>
+  Number.parseFloat(value.toFixed(3)).toString()
+
+const getDonutPoint = (radius: number, angle: number) => {
+  const radians = ((angle - 90) * Math.PI) / 180
+
+  return {
+    x: donutCenterX + radius * Math.cos(radians),
+    y: donutCenterY + radius * Math.sin(radians),
+  }
 }
 
-const resolveCompositionTooltipSegment = (datum: UiKitDonutTooltipDatum) => {
-  const associationType = isCompositionAssociationType(datum.association_type)
-    ? datum.association_type
-    : null
+const getCompositionLayoutDonutPoint = (radius: number, angle: number) => {
+  const point = getDonutPoint(radius, angle)
 
-  return props.block.segments.find(
-    (segment) => segment.association_type === associationType || segment.label === datum.label,
+  return {
+    x: donutOffsetX.value + point.x,
+    y: donutOffsetY + point.y,
+  }
+}
+
+const createDonutSegmentPath = (startAngle: number, endAngle: number): string => {
+  const start = getDonutPoint(donutRingRadius, startAngle)
+  const end = getDonutPoint(donutRingRadius, endAngle)
+  const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0
+
+  return [
+    `M ${formatDonutCoordinate(start.x)} ${formatDonutCoordinate(start.y)}`,
+    `A ${donutRingRadius} ${donutRingRadius} 0 ${largeArcFlag} 1 ${formatDonutCoordinate(end.x)} ${formatDonutCoordinate(end.y)}`,
+  ].join(' ')
+}
+
+const compositionDonutSegments = computed(() => {
+  const segmentsByType = new Map(
+    props.block.segments.map((segment) => [segment.association_type, segment]),
+  )
+  const visibleSegments = compositionDonutSegmentOrder
+    .map((associationType) => segmentsByType.get(associationType))
+    .filter((segment): segment is NonNullable<typeof segment> => {
+      const value = Number(segment?.associations_count)
+
+      return Number.isFinite(value) && value > 0
+    })
+
+  const total = visibleSegments.reduce((sum, segment) => sum + segment.associations_count, 0)
+
+  if (total <= 0) {
+    return []
+  }
+
+  const gapDegrees = visibleSegments.length > 1 ? donutGapDegrees : 0
+  const totalGapDegrees = gapDegrees * visibleSegments.length
+  const degreesPerUnit = (360 - totalGapDegrees) / total
+  let cursorAngle = donutStartAngle
+
+  return visibleSegments.map((segment) => {
+    const sweepAngle = segment.associations_count * degreesPerUnit
+    const startAngle = cursorAngle
+    const endAngle = cursorAngle + sweepAngle
+
+    cursorAngle = endAngle + gapDegrees
+
+    return {
+      association_type: segment.association_type,
+      color: associationTypeColorMap[segment.association_type],
+      endAngle,
+      isFullCircle: sweepAngle >= 359.9,
+      label: segment.label,
+      midAngle: startAngle + sweepAngle / 2,
+      organizationsValue: segment.opk_organizations_count,
+      path: createDonutSegmentPath(startAngle, endAngle),
+      startAngle,
+      sweepAngle,
+      value: segment.associations_count,
+    }
+  })
+})
+
+const getConnectorElbowPoint = (
+  donutPoint: { x: number; y: number },
+  anchor: (typeof compositionConnectorAnchors)[Exclude<AssociationType, 'all'>],
+) => {
+  const elbowX =
+    anchor.side === 'left' ? donutPoint.x - connectorDiagonalDx : donutPoint.x + connectorDiagonalDx
+  const elbowY = donutPoint.y - anchor.diagonalDirectionY * connectorDiagonalDy
+
+  return {
+    x: elbowX,
+    y: elbowY,
+  }
+}
+
+const getConnectorAvailableWidth = (
+  elbowX: number,
+  anchor: (typeof compositionConnectorAnchors)[Exclude<AssociationType, 'all'>],
+) => {
+  return Math.max(
+    0,
+    anchor.side === 'left'
+      ? elbowX - anchor.edgeInset
+      : compositionLayoutViewBoxWidth.value - elbowX - anchor.edgeInset,
   )
 }
 
-const buildCompositionTooltipTemplate = (datum: UiKitDonutTooltipDatum): string => {
-  const segment = resolveCompositionTooltipSegment(datum)
-  const datumAssociationType = isCompositionAssociationType(datum.association_type)
-    ? datum.association_type
-    : null
-  const associationType = segment?.association_type ?? datumAssociationType ?? 'clusters'
-  const associationsCount =
-    getNumberField(datum.associations_count) ?? segment?.associations_count ?? datum.value
-  const opkOrganizationsCount =
-    getNumberField(datum.opk_organizations_count) ?? segment?.opk_organizations_count ?? 0
-  const title = datum.label || segment?.label || 'Сегмент'
-  const associationsText = `${formatNumber(associationsCount)} ${compositionAssociationTooltipLabels[associationType]}`
-  const organizationsText = formatOrganizationsText(opkOrganizationsCount)
+const getConnectorCalloutWidth = (
+  elbowX: number,
+  anchor: (typeof compositionConnectorAnchors)[Exclude<AssociationType, 'all'>],
+) => {
+  const availableWidth = getConnectorAvailableWidth(elbowX, anchor)
 
-  return `
-    <div class="composition-tooltip">
-      <div class="composition-tooltip__title">${escapeHtml(title)}</div>
-      <div class="composition-tooltip__rows">
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Объединения</span>
-          <strong class="composition-tooltip__value">${escapeHtml(associationsText)}</strong>
-        </div>
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Организации ОПК</span>
-          <strong class="composition-tooltip__value">${escapeHtml(organizationsText)}</strong>
-        </div>
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Доля</span>
-          <strong class="composition-tooltip__value">${escapeHtml(formatCompositionShare(associationsCount))}</strong>
-        </div>
-      </div>
-    </div>
-  `
+  return Math.min(anchor.preferredCalloutWidth, availableWidth)
 }
+
+const compositionConnectors = computed(() =>
+  compositionDonutSegments.value.map((segment) => {
+    const anchor = compositionConnectorAnchors[segment.association_type]
+    const anchorAngle = segment.isFullCircle
+      ? anchor.fullCircleAngle
+      : segment.startAngle + segment.sweepAngle * anchor.anchorPosition
+    const donutPoint = getCompositionLayoutDonutPoint(donutConnectorRadius, anchorAngle)
+    const elbowPoint = getConnectorElbowPoint(donutPoint, anchor)
+    const calloutWidth = getConnectorCalloutWidth(elbowPoint.x, anchor)
+    const calloutLeft = anchor.side === 'left' ? anchor.edgeInset : elbowPoint.x
+    const lineStartX = anchor.side === 'left' ? calloutLeft : elbowPoint.x + calloutWidth
+    const path = [
+      `M ${formatDonutCoordinate(lineStartX)} ${formatDonutCoordinate(elbowPoint.y)}`,
+      `H ${formatDonutCoordinate(elbowPoint.x)}`,
+      `L ${formatDonutCoordinate(donutPoint.x)} ${formatDonutCoordinate(donutPoint.y)}`,
+    ].join(' ')
+
+    return {
+      association_type: segment.association_type,
+      calloutLeft,
+      calloutTop: elbowPoint.y - anchor.lineOffsetY,
+      calloutWidth,
+      path,
+    }
+  }),
+)
+
+const compositionConnectorStylesByType = computed(
+  () =>
+    new Map(
+      compositionConnectors.value.map((connector) => [
+        connector.association_type,
+        {
+          left: `${formatDonutCoordinate(connector.calloutLeft)}px`,
+          right: 'auto',
+          top: `${formatDonutCoordinate(connector.calloutTop)}px`,
+          width: `${connector.calloutWidth}px`,
+        },
+      ]),
+    ),
+)
+
+const compositionCallouts = computed(() =>
+  (
+    [
+      { association_type: 'sez', className: 'is-sez' },
+      { association_type: 'technoparks', className: 'is-technoparks' },
+      { association_type: 'clusters', className: 'is-clusters' },
+    ] satisfies Array<{
+      association_type: Exclude<AssociationType, 'all'>
+      className: string
+    }>
+  )
+    .map((callout) => {
+      const segment = props.block.segments.find(
+        (item) => item.association_type === callout.association_type,
+      )
+
+      if (!segment || segment.associations_count <= 0) {
+        return null
+      }
+
+      return {
+        ...callout,
+        associationsLabel: compositionAssociationTooltipLabels[callout.association_type],
+        associationsValue: segment.associations_count,
+        color: associationTypeColorMap[callout.association_type],
+        organizationsValue: segment.opk_organizations_count,
+        style: compositionConnectorStylesByType.value.get(callout.association_type),
+      }
+    })
+    .filter((callout): callout is NonNullable<typeof callout> => callout !== null),
+)
+
+const updateCompositionLayoutWidth = () => {
+  const element = compositionLayoutElement.value
+
+  if (!element) {
+    return
+  }
+
+  compositionLayoutMeasuredWidth.value = element.clientWidth || compositionLayoutMinWidth
+}
+
+onMounted(() => {
+  updateCompositionLayoutWidth()
+
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    return
+  }
+
+  compositionLayoutResizeObserver = new globalThis.ResizeObserver(([entry]) => {
+    const nextWidth = entry?.contentRect.width ?? compositionLayoutMinWidth
+
+    compositionLayoutMeasuredWidth.value = nextWidth
+  })
+  if (compositionLayoutElement.value) {
+    compositionLayoutResizeObserver.observe(compositionLayoutElement.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  compositionLayoutResizeObserver?.disconnect()
+  compositionLayoutResizeObserver = null
+})
 </script>
 
 <template>
-  <div class="composition-layout">
+  <div ref="compositionLayoutElement" class="composition-layout" :style="compositionLayoutStyle">
+    <svg
+      class="composition-connectors"
+      :viewBox="`0 0 ${compositionLayoutViewBoxWidth} ${compositionLayoutViewBoxHeight}`"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        v-for="connector in compositionConnectors"
+        :key="connector.association_type"
+        class="composition-connectors__line"
+        :d="connector.path"
+      />
+    </svg>
+
     <div
       class="composition-chart-panel composition-chart-panel-is-donut"
       aria-label="Состав инновационных объединений"
     >
-      <DonutChart
-        :data="data"
-        :colors="colors"
-        center-label="Всего"
-        :center-value="formatNumber(block.total_associations_count)"
-        :tooltip-template="buildCompositionTooltipTemplate"
-        container-id="competence-map-composition-donut"
-      />
+      <svg
+        class="composition-donut"
+        :viewBox="`0 0 ${donutViewBoxWidth} ${donutViewBoxHeight}`"
+        role="img"
+        aria-label="Организации ОПК в инновационных объединениях"
+      >
+        <template v-for="segment in compositionDonutSegments" :key="segment.association_type">
+          <circle
+            v-if="segment.isFullCircle"
+            class="composition-donut__segment"
+            :cx="donutCenterX"
+            :cy="donutCenterY"
+            :r="donutRingRadius"
+            fill="none"
+            :stroke="segment.color"
+            :stroke-width="donutStrokeWidth"
+            stroke-linecap="butt"
+          >
+            <title>
+              {{ segment.label }}:
+              {{ formatNumber(segment.value) }}
+              {{ compositionAssociationTooltipLabels[segment.association_type] }},
+              {{ formatOrganizationsText(segment.organizationsValue) }}
+            </title>
+          </circle>
+          <path
+            v-else
+            class="composition-donut__segment"
+            :d="segment.path"
+            fill="none"
+            :stroke="segment.color"
+            :stroke-width="donutStrokeWidth"
+            stroke-linecap="butt"
+          >
+            <title>
+              {{ segment.label }}:
+              {{ formatNumber(segment.value) }}
+              {{ compositionAssociationTooltipLabels[segment.association_type] }},
+              {{ formatOrganizationsText(segment.organizationsValue) }}
+            </title>
+          </path>
+        </template>
+        <text
+          class="composition-donut__center-value"
+          :x="donutCenterX"
+          :y="donutCenterY + 4"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {{ formatNumber(block.total_associations_count) }}
+        </text>
+      </svg>
     </div>
 
-    <ul class="composition-legend">
-      <li v-for="segment in compositionLegend" :key="segment.label" class="composition-legend-item">
-        <span class="composition-legend-marker" :style="{ backgroundColor: segment.color }"></span>
-        <span class="composition-legend-label">{{ segment.label }}</span>
-        <span class="composition-legend-value">{{ formatNumber(segment.associations_count) }}</span>
+    <ul class="composition-callout-list">
+      <li
+        v-for="callout in compositionCallouts"
+        :key="callout.association_type"
+        class="composition-callout"
+        :class="callout.className"
+        :style="callout.style"
+      >
+        <span class="composition-callout__row">
+          <strong>{{ formatNumber(callout.associationsValue) }}</strong>
+          <span>{{ callout.associationsLabel }}</span>
+        </span>
+        <span class="composition-callout__row">
+          <strong>{{ formatNumber(callout.organizationsValue) }}</strong>
+          <span>{{
+            formatOrganizationsText(callout.organizationsValue).replace(/^\S+\s+/, '')
+          }}</span>
+        </span>
       </li>
     </ul>
   </div>
diff --git a/src/pages/dashboard/ui/components/ClusterSpecializationsPanel.vue b/src/pages/dashboard/ui/components/ClusterSpecializationsPanel.vue
index 1174b60..443a7bd 100644
--- a/src/pages/dashboard/ui/components/ClusterSpecializationsPanel.vue
+++ b/src/pages/dashboard/ui/components/ClusterSpecializationsPanel.vue
@@ -22,7 +22,7 @@ defineEmits<{
 
 <template>
   <div class="analytics-ranked-panel">
-    <ScrollArea class="analytics-table-scroll" type="auto">
+    <ScrollArea class="analytics-table-scroll cluster-specializations-scroll" type="auto">
       <table class="analytics-table cluster-specializations-table">
         <thead>
           <tr>
@@ -43,8 +43,8 @@ defineEmits<{
                 aria-label="Сортировать специализации по количеству кластеров"
                 @click="$emit('sort', 'clusters_count')"
               >
-                <span>Количество кластеров</span>
                 <ArrowUp aria-hidden="true" />
+                <span>Количество кластеров</span>
               </button>
             </th>
           </tr>
diff --git a/src/pages/dashboard/ui/components/CompositionCard.vue b/src/pages/dashboard/ui/components/CompositionCard.vue
index 82ad40b..d9153ac 100644
--- a/src/pages/dashboard/ui/components/CompositionCard.vue
+++ b/src/pages/dashboard/ui/components/CompositionCard.vue
@@ -4,7 +4,6 @@ import type {
   AssociationsCompositionBlock,
   ClusterSpecializationRow,
   ClusterSpecializationsBlock,
-  CompositionDonutDataPoint,
   SezPriorityDirectionRow,
   SezTypesAndPriorityDirectionsBlock,
   SortState,
@@ -22,8 +21,6 @@ defineProps<{
   clusterMainBlock: ClusterSpecializationsBlock | null
   clusterSpecializationRows: ClusterSpecializationRow[]
   clusterSpecializationsSort: SortState
-  compositionDonutColors: string[]
-  compositionDonutData: CompositionDonutDataPoint[]
   mainBlockTitle: string
   sezMainBlock: SezTypesAndPriorityDirectionsBlock | null
   sezPriorityRows: SezPriorityDirectionRow[]
@@ -41,15 +38,13 @@ const emit = defineEmits<{
 <template>
   <Card class="analytics-card analytics-card--composition">
     <CardContent class="analytics-card__content">
-      <header class="analytics-card__header">
+      <header v-if="!sezMainBlock" class="analytics-card__header">
         <h2 class="analytics-card__title">{{ mainBlockTitle }}</h2>
       </header>
 
       <AssociationsCompositionPanel
         v-if="associationsCompositionBlock"
         :block="associationsCompositionBlock"
-        :data="compositionDonutData"
-        :colors="compositionDonutColors"
       />
 
       <SezCompositionPanel
diff --git a/src/pages/dashboard/ui/components/DashboardSkeletonGrid.vue b/src/pages/dashboard/ui/components/DashboardSkeletonGrid.vue
index 8d038c7..2959646 100644
--- a/src/pages/dashboard/ui/components/DashboardSkeletonGrid.vue
+++ b/src/pages/dashboard/ui/components/DashboardSkeletonGrid.vue
@@ -17,6 +17,8 @@ defineProps<{
     aria-busy="true"
   >
     <div class="analytics-dashboard-column analytics-dashboard-column--primary">
+      <div class="analytics-kpi-grid analytics-kpi-grid--skeleton" aria-hidden="true" />
+
       <Card
         v-for="block in primaryBlocks"
         :key="`primary-skeleton-${block}`"
diff --git a/src/pages/dashboard/ui/components/RegionRankingCard.vue b/src/pages/dashboard/ui/components/RegionRankingCard.vue
index c39bd4d..7aacf40 100644
--- a/src/pages/dashboard/ui/components/RegionRankingCard.vue
+++ b/src/pages/dashboard/ui/components/RegionRankingCard.vue
@@ -77,8 +77,8 @@ const getRegionRankingValue = (row: RegionRankingRow, key: string): number | nul
                   :aria-label="`Сортировать рейтинг субъектов по колонке ${column.label}`"
                   @click="$emit('sort', column.key)"
                 >
-                  <span>{{ column.label }}</span>
                   <ArrowUp aria-hidden="true" />
+                  <span>{{ column.label }}</span>
                 </button>
               </th>
             </tr>
diff --git a/src/pages/dashboard/ui/components/SezCompositionPanel.vue b/src/pages/dashboard/ui/components/SezCompositionPanel.vue
index 4f0894f..646cc18 100644
--- a/src/pages/dashboard/ui/components/SezCompositionPanel.vue
+++ b/src/pages/dashboard/ui/components/SezCompositionPanel.vue
@@ -1,22 +1,106 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ArrowUp } from 'lucide-vue-next'
-import { DonutChart, ScrollArea } from '@gisp/ui-kit-shadcn-vue'
+import { ScrollArea } from '@gisp/ui-kit-shadcn-vue'
 import {
-  capitalizeFirstLetter,
-  escapeHtml,
   formatNumber,
-  formatOrganizationsText,
   getSortAria,
   isSortActive,
   isSortDescending,
   type SezPriorityDirectionRow,
   type SezTypesAndPriorityDirectionsBlock,
   type SortState,
-  type UiKitDonutTooltipDatum,
 } from '../../model'
 
-const detailDonutSegmentColors = ['#C90237', '#022456', '#A7B2BC']
+const sezTypeDonutSegmentColors = ['#C90237', '#022456', '#A7B2BC', '#488DED'] as const
+const sezTypeDonutViewBoxWidth = 620
+const sezTypeDonutViewBoxHeight = 205
+const sezTypeDonutCenterX = 310
+const sezTypeDonutCenterY = 96
+const sezTypeDonutBoxSize = 205
+const sezTypeDonutBoxX = sezTypeDonutCenterX - sezTypeDonutBoxSize / 2
+const sezTypeDonutBoxY = sezTypeDonutCenterY - sezTypeDonutBoxSize / 2
+const sezTypeDonutLocalCenterX = sezTypeDonutBoxSize / 2
+const sezTypeDonutLocalCenterY = sezTypeDonutBoxSize / 2
+const sezTypeDonutOuterRadius = 82
+const sezTypeDonutInnerRadius = 61
+const sezTypeDonutRingRadius = (sezTypeDonutOuterRadius + sezTypeDonutInnerRadius) / 2
+const sezTypeDonutStrokeWidth = sezTypeDonutOuterRadius - sezTypeDonutInnerRadius
+const sezTypeDonutConnectorRadius = sezTypeDonutOuterRadius + 1
+const sezTypeDonutGapDegrees = 0
+const sezTypeDonutStartAngle = -100
+const sezTypeConnectorDiagonalLength = 26
+const sezTypeConnectorDiagonalAngle = (35 * Math.PI) / 180
+const sezTypeConnectorDiagonalDx =
+  Math.cos(sezTypeConnectorDiagonalAngle) * sezTypeConnectorDiagonalLength
+const sezTypeConnectorDiagonalDy =
+  Math.sin(sezTypeConnectorDiagonalAngle) * sezTypeConnectorDiagonalLength
+const sezTypeWideSegmentThreshold = 180
+
+type SezTypeVisualRole = 'industrial' | 'other' | 'port' | 'technical' | 'unspecified'
+
+const sezTypeDonutRoleOrder = {
+  industrial: 0,
+  port: 1,
+  unspecified: 2,
+  technical: 3,
+  other: 4,
+} satisfies Record<SezTypeVisualRole, number>
+
+const sezTypeCalloutConfigs = {
+  industrial: {
+    anchorPosition: 0.1,
+    diagonalDirectionY: 1,
+    lineWidth: 92,
+    side: 'left',
+    wideSegmentAngle: 300,
+  },
+  port: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: 1,
+    lineWidth: 54,
+    side: 'right',
+    wideSegmentAngle: 75,
+  },
+  unspecified: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: -1,
+    lineWidth: 54,
+    side: 'right',
+    wideSegmentAngle: 104,
+  },
+  technical: {
+    anchorPosition: 0.72,
+    diagonalDirectionY: -1,
+    lineWidth: 92,
+    side: 'left',
+    wideSegmentAngle: 245,
+  },
+  other: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: -1,
+    lineWidth: 54,
+    side: 'right',
+    wideSegmentAngle: 88,
+  },
+} satisfies Record<
+  SezTypeVisualRole,
+  {
+    anchorPosition: number
+    diagonalDirectionY: -1 | 1
+    lineWidth: number
+    side: 'left' | 'right'
+    wideSegmentAngle: number
+  }
+>
+
+type SezTypeCalloutConfig = {
+  anchorPosition: number
+  diagonalDirectionY: -1 | 1
+  lineWidth: number
+  side: 'left' | 'right'
+  wideSegmentAngle: number
+}
 
 const props = defineProps<{
   block: SezTypesAndPriorityDirectionsBlock
@@ -28,82 +112,275 @@ defineEmits<{
   sort: [field: string]
 }>()
 
-const sezTypeDonutData = computed(() =>
-  props.block.sez_types.segments.map((segment) => ({
-    label: segment.label,
-    opk_organizations_count: segment.opk_organizations_count,
-    sez_count: segment.sez_count,
-    value: segment.sez_count,
-  })),
-)
+const formatSezTypeCoordinate = (value: number): string =>
+  Number.parseFloat(value.toFixed(3)).toString()
 
-const sezTypeDonutColors = computed(() =>
-  sezTypeDonutData.value.map((_, index) => detailDonutSegmentColors[index] ?? '#488DED'),
-)
+const getSezTypeDonutPoint = (radius: number, angle: number) => {
+  const radians = ((angle - 90) * Math.PI) / 180
 
-const getNumberField = (value: unknown): number | undefined =>
-  typeof value === 'number' && Number.isFinite(value) ? value : undefined
-
-const buildSezTypeTooltipTemplate = (datum: UiKitDonutTooltipDatum): string => {
-  const sezCount = getNumberField(datum.sez_count) ?? datum.value
-  const opkOrganizationsCount = getNumberField(datum.opk_organizations_count) ?? 0
-
-  return `
-    <div class="composition-tooltip">
-      <div class="composition-tooltip__title">${escapeHtml(datum.label)}</div>
-      <div class="composition-tooltip__rows">
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">ОЭЗ</span>
-          <strong class="composition-tooltip__value">${escapeHtml(formatNumber(sezCount))}</strong>
-        </div>
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Организации ОПК</span>
-          <strong class="composition-tooltip__value">${escapeHtml(formatOrganizationsText(opkOrganizationsCount))}</strong>
-        </div>
-      </div>
-    </div>
-  `
+  return {
+    x: sezTypeDonutCenterX + radius * Math.cos(radians),
+    y: sezTypeDonutCenterY + radius * Math.sin(radians),
+  }
 }
+
+const getSezTypeDonutLocalPoint = (radius: number, angle: number) => {
+  const radians = ((angle - 90) * Math.PI) / 180
+
+  return {
+    x: sezTypeDonutLocalCenterX + radius * Math.cos(radians),
+    y: sezTypeDonutLocalCenterY + radius * Math.sin(radians),
+  }
+}
+
+const createSezTypeDonutArcPath = (startAngle: number, endAngle: number): string => {
+  const start = getSezTypeDonutLocalPoint(sezTypeDonutRingRadius, startAngle)
+  const end = getSezTypeDonutLocalPoint(sezTypeDonutRingRadius, endAngle)
+  const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0
+
+  return [
+    `M ${formatSezTypeCoordinate(start.x)} ${formatSezTypeCoordinate(start.y)}`,
+    `A ${sezTypeDonutRingRadius} ${sezTypeDonutRingRadius} 0 ${largeArcFlag} 1 ${formatSezTypeCoordinate(end.x)} ${formatSezTypeCoordinate(end.y)}`,
+  ].join(' ')
+}
+
+const getSezTypeVisualRole = (label: string): SezTypeVisualRole => {
+  const normalizedLabel = label.trim().toLocaleLowerCase('ru-RU')
+
+  if (normalizedLabel.includes('промышленно')) {
+    return 'industrial'
+  }
+
+  if (normalizedLabel.includes('технико')) {
+    return 'technical'
+  }
+
+  if (normalizedLabel.includes('порт')) {
+    return 'port'
+  }
+
+  if (normalizedLabel.includes('не указан')) {
+    return 'unspecified'
+  }
+
+  return 'other'
+}
+
+const getSezTypeSegmentColor = (originalIndex: number): string =>
+  sezTypeDonutSegmentColors[originalIndex] ?? '#488DED'
+
+const createSezTypeLabelLines = (label: string): string[] => {
+  const normalizedLabel = label.trim().toLocaleLowerCase('ru-RU')
+
+  if (normalizedLabel.includes('промышленно')) {
+    return ['промышленно-', 'производственные ОЭЗ']
+  }
+
+  if (normalizedLabel.includes('технико')) {
+    return ['технико-', 'внедренческие ОЭЗ']
+  }
+
+  if (normalizedLabel.includes('порт')) {
+    return ['портовые', 'ОЭЗ']
+  }
+
+  if (normalizedLabel.includes('не указан')) {
+    return ['тип ОЭЗ', 'не указан']
+  }
+
+  const words = label.trim().split(/\s+/)
+  const lines = words.reduce<string[]>((result, word) => {
+    const currentLine = result.at(-1)
+
+    if (!currentLine || `${currentLine} ${word}`.length > 22) {
+      result.push(word)
+    } else {
+      result[result.length - 1] = `${currentLine} ${word}`
+    }
+
+    return result
+  }, [])
+
+  return lines.slice(0, 3)
+}
+
+const sezTypeDonutSegments = computed(() => {
+  const visibleSegments = props.block.sez_types.segments
+    .map((segment, originalIndex) => ({
+      ...segment,
+      originalIndex,
+      visualRole: getSezTypeVisualRole(segment.label),
+    }))
+    .filter((segment) => segment.sez_count > 0)
+    .sort((leftSegment, rightSegment) => {
+      const orderDifference =
+        sezTypeDonutRoleOrder[leftSegment.visualRole] -
+        sezTypeDonutRoleOrder[rightSegment.visualRole]
+
+      return orderDifference || leftSegment.originalIndex - rightSegment.originalIndex
+    })
+  const total = visibleSegments.reduce((sum, segment) => sum + segment.sez_count, 0)
+
+  if (total <= 0) {
+    return []
+  }
+
+  const gapDegrees = visibleSegments.length > 1 ? sezTypeDonutGapDegrees : 0
+  const totalGapDegrees = gapDegrees * visibleSegments.length
+  const degreesPerUnit = (360 - totalGapDegrees) / total
+  let cursorAngle = sezTypeDonutStartAngle
+
+  return visibleSegments.map((segment) => {
+    const sweepAngle = segment.sez_count * degreesPerUnit
+    const startAngle = cursorAngle
+    const endAngle = cursorAngle + sweepAngle
+
+    cursorAngle = endAngle + gapDegrees
+
+    return {
+      arcPath: createSezTypeDonutArcPath(startAngle, endAngle),
+      color: getSezTypeSegmentColor(segment.originalIndex),
+      isFullCircle: sweepAngle >= 359.9,
+      label: segment.label,
+      midAngle: startAngle + sweepAngle / 2,
+      sezCount: segment.sez_count,
+      startAngle,
+      sweepAngle,
+      type: segment.sez_type,
+      visualRole: segment.visualRole,
+    }
+  })
+})
+
+const sezTypeCallouts = computed(() =>
+  sezTypeDonutSegments.value.map((segment, index) => {
+    const config: SezTypeCalloutConfig = {
+      ...sezTypeCalloutConfigs[segment.visualRole],
+    }
+    const anchorAngle =
+      segment.isFullCircle || segment.sweepAngle >= sezTypeWideSegmentThreshold
+        ? config.wideSegmentAngle
+        : segment.startAngle + segment.sweepAngle * config.anchorPosition
+    const donutPoint = getSezTypeDonutPoint(sezTypeDonutConnectorRadius, anchorAngle)
+    const elbowPoint = {
+      x:
+        config.side === 'left'
+          ? donutPoint.x - sezTypeConnectorDiagonalDx
+          : donutPoint.x + sezTypeConnectorDiagonalDx,
+      y: donutPoint.y - config.diagonalDirectionY * sezTypeConnectorDiagonalDy,
+    }
+    const lineStartX =
+      config.side === 'left' ? elbowPoint.x - config.lineWidth : elbowPoint.x + config.lineWidth
+    const textX = config.side === 'left' ? lineStartX - 8 : lineStartX + 8
+    const lines = createSezTypeLabelLines(segment.label)
+    const textY =
+      elbowPoint.y -
+      (lines.length > 1 ? 16 : 7) +
+      (segment.visualRole === 'other' ? index * 14 : 0)
+
+    return {
+      ...config,
+      key: segment.type,
+      lines,
+      path: [
+        `M ${formatSezTypeCoordinate(lineStartX)} ${formatSezTypeCoordinate(elbowPoint.y)}`,
+        `H ${formatSezTypeCoordinate(elbowPoint.x)}`,
+        `L ${formatSezTypeCoordinate(donutPoint.x)} ${formatSezTypeCoordinate(donutPoint.y)}`,
+      ].join(' '),
+      textAnchor: config.side === 'left' ? 'end' : 'start',
+      textX,
+      textY,
+    }
+  }),
+)
 </script>
 
 <template>
-  <div class="analytics-split-layout analytics-split-layout--sez">
-    <div class="composition-chart-panel sez-donut-panel">
-      <h3 class="analytics-subtitle">{{ block.sez_types.title }}</h3>
-      <div class="sez-donut-chart-box">
-        <DonutChart
-          :data="sezTypeDonutData"
-          :colors="sezTypeDonutColors"
-          center-label="Всего"
-          :center-value="formatNumber(block.sez_types.total_sez_count)"
-          :tooltip-template="buildSezTypeTooltipTemplate"
-          container-id="competence-map-sez-types-donut"
+  <div class="sez-composition-panel">
+    <section class="sez-types-panel" :aria-label="block.sez_types.title">
+      <h3 class="analytics-subtitle sez-types-panel__title">{{ block.sez_types.title }}</h3>
+
+      <svg
+        class="sez-types-donut"
+        :viewBox="`0 0 ${sezTypeDonutViewBoxWidth} ${sezTypeDonutViewBoxHeight}`"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        :aria-label="`${block.sez_types.title}: ${formatNumber(block.sez_types.total_sez_count)}`"
+      >
+        <path
+          v-for="callout in sezTypeCallouts"
+          :key="callout.key"
+          class="sez-types-donut__connector"
+          :d="callout.path"
         />
-      </div>
-
-      <ul class="area-segment-legend" aria-label="Типы ОЭЗ">
-        <li
-          v-for="(segment, segmentIndex) in block.sez_types.segments"
-          :key="segment.sez_type"
-          class="area-segment-legend__item"
+        <text
+          v-for="callout in sezTypeCallouts"
+          :key="`${callout.key}-label`"
+          class="sez-types-donut__label"
+          :text-anchor="callout.textAnchor"
+          :x="callout.textX"
+          :y="callout.textY"
         >
-          <span
-            class="area-segment-legend__marker"
-            :style="{
-              backgroundColor: sezTypeDonutColors[segmentIndex],
-            }"
-          />
-          <span class="area-segment-legend__label">
-            {{ capitalizeFirstLetter(segment.label) }}
-          </span>
-          <strong class="area-segment-legend__value">{{ formatNumber(segment.sez_count) }}</strong>
-        </li>
-      </ul>
-    </div>
+          <tspan
+            v-for="(line, lineIndex) in callout.lines"
+            :key="line"
+            :x="callout.textX"
+            :dy="lineIndex === 0 ? 0 : 13"
+          >
+            {{ line }}
+          </tspan>
+        </text>
+        <svg
+          class="sez-types-donut__ring"
+          :x="sezTypeDonutBoxX"
+          :y="sezTypeDonutBoxY"
+          :width="sezTypeDonutBoxSize"
+          :height="sezTypeDonutBoxSize"
+          :viewBox="`0 0 ${sezTypeDonutBoxSize} ${sezTypeDonutBoxSize}`"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <template v-for="segment in sezTypeDonutSegments" :key="segment.type">
+            <circle
+              v-if="segment.isFullCircle"
+              class="sez-types-donut__segment"
+              :cx="sezTypeDonutLocalCenterX"
+              :cy="sezTypeDonutLocalCenterY"
+              :r="sezTypeDonutRingRadius"
+              fill="none"
+              :stroke="segment.color"
+              :stroke-width="sezTypeDonutStrokeWidth"
+              stroke-linecap="butt"
+            >
+              <title>{{ segment.label }}: {{ formatNumber(segment.sezCount) }}</title>
+            </circle>
+            <path
+              v-else
+              class="sez-types-donut__segment"
+              :d="segment.arcPath"
+              fill="none"
+              :stroke="segment.color"
+              :stroke-width="sezTypeDonutStrokeWidth"
+              stroke-linecap="butt"
+            >
+              <title>{{ segment.label }}: {{ formatNumber(segment.sezCount) }}</title>
+            </path>
+          </template>
+          <text
+            class="sez-types-donut__center-value"
+            :x="sezTypeDonutLocalCenterX"
+            :y="sezTypeDonutLocalCenterY + 4"
+            text-anchor="middle"
+            dominant-baseline="middle"
+          >
+            {{ formatNumber(block.sez_types.total_sez_count) }}
+          </text>
+        </svg>
+      </svg>
+    </section>
 
-    <div class="analytics-ranked-panel">
+    <section class="analytics-ranked-panel sez-priority-panel">
       <h3 class="analytics-subtitle">{{ block.priority_directions.title }}</h3>
-      <ScrollArea class="analytics-table-scroll" type="auto">
+      <ScrollArea class="analytics-table-scroll sez-priority-scroll" type="auto">
         <table class="analytics-table sez-priority-table">
           <thead>
             <tr>
@@ -126,8 +403,8 @@ const buildSezTypeTooltipTemplate = (datum: UiKitDonutTooltipDatum): string => {
                   aria-label="Сортировать приоритетные направления по количеству ОЭЗ"
                   @click="$emit('sort', 'sez_count')"
                 >
-                  <span>Количество ОЭЗ</span>
                   <ArrowUp aria-hidden="true" />
+                  <span>Количество ОЭЗ</span>
                 </button>
               </th>
             </tr>
@@ -146,6 +423,6 @@ const buildSezTypeTooltipTemplate = (datum: UiKitDonutTooltipDatum): string => {
           </tbody>
         </table>
       </ScrollArea>
-    </div>
+    </section>
   </div>
 </template>
diff --git a/src/pages/dashboard/ui/components/TechnoparkCompositionPanel.vue b/src/pages/dashboard/ui/components/TechnoparkCompositionPanel.vue
index 45202ab..d340a6e 100644
--- a/src/pages/dashboard/ui/components/TechnoparkCompositionPanel.vue
+++ b/src/pages/dashboard/ui/components/TechnoparkCompositionPanel.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ArrowUp } from 'lucide-vue-next'
-import { DonutChart, ScrollArea } from '@gisp/ui-kit-shadcn-vue'
+import { ScrollArea } from '@gisp/ui-kit-shadcn-vue'
 import {
-  capitalizeFirstLetter,
-  escapeHtml,
-  formatAreaUnit,
   formatNumber,
   getSortAria,
   isSortActive,
@@ -13,10 +10,86 @@ import {
   type SortState,
   type TechnoparkAreaDistributionBlock,
   type TechnoparkAreaRow,
-  type UiKitDonutTooltipDatum,
 } from '../../model'
 
 const detailDonutSegmentColors = ['#C90237', '#022456', '#A7B2BC']
+const technoparkAreaDonutViewBoxWidth = 620
+const technoparkAreaDonutViewBoxHeight = 210
+const technoparkAreaDonutCenterX = 290
+const technoparkAreaDonutCenterY = 96
+const technoparkAreaDonutOuterRadius = 82
+const technoparkAreaDonutInnerRadius = 61
+const technoparkAreaDonutRingRadius =
+  (technoparkAreaDonutOuterRadius + technoparkAreaDonutInnerRadius) / 2
+const technoparkAreaDonutStrokeWidth =
+  technoparkAreaDonutOuterRadius - technoparkAreaDonutInnerRadius
+const technoparkAreaDonutConnectorRadius = technoparkAreaDonutOuterRadius + 1
+const technoparkAreaDonutStartAngle = -102
+const technoparkAreaConnectorDiagonalLength = 26
+const technoparkAreaConnectorDiagonalAngle = (35 * Math.PI) / 180
+const technoparkAreaConnectorDiagonalDx =
+  Math.cos(technoparkAreaConnectorDiagonalAngle) * technoparkAreaConnectorDiagonalLength
+const technoparkAreaConnectorDiagonalDy =
+  Math.sin(technoparkAreaConnectorDiagonalAngle) * technoparkAreaConnectorDiagonalLength
+const technoparkAreaCalloutLabelGap = 3
+const technoparkAreaWideSegmentThreshold = 180
+
+type TechnoparkAreaVisualRole = 'large' | 'medium' | 'other' | 'small'
+
+const technoparkAreaVisualOrder = {
+  large: 0,
+  small: 1,
+  medium: 2,
+  other: 3,
+} satisfies Record<TechnoparkAreaVisualRole, number>
+
+const technoparkAreaCalloutConfigs = {
+  large: {
+    anchorPosition: 0.34,
+    diagonalDirectionY: 1,
+    lineWidth: 92,
+    side: 'left',
+    wideSegmentAngle: 300,
+  },
+  small: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: 1,
+    lineWidth: 38,
+    side: 'right',
+    wideSegmentAngle: 105,
+  },
+  medium: {
+    anchorPosition: 0.58,
+    diagonalDirectionY: -1,
+    lineWidth: 92,
+    side: 'left',
+    wideSegmentAngle: 228,
+  },
+  other: {
+    anchorPosition: 0.5,
+    diagonalDirectionY: -1,
+    lineWidth: 38,
+    side: 'right',
+    wideSegmentAngle: 72,
+  },
+} satisfies Record<
+  TechnoparkAreaVisualRole,
+  {
+    anchorPosition: number
+    diagonalDirectionY: -1 | 1
+    lineWidth: number
+    side: 'left' | 'right'
+    wideSegmentAngle: number
+  }
+>
+
+type TechnoparkAreaCalloutConfig = {
+  anchorPosition: number
+  diagonalDirectionY: -1 | 1
+  lineWidth: number
+  side: 'left' | 'right'
+  wideSegmentAngle: number
+}
 
 const props = defineProps<{
   block: TechnoparkAreaDistributionBlock
@@ -28,89 +101,236 @@ defineEmits<{
   sort: [field: string]
 }>()
 
-const technoparkAreaDonutData = computed(() =>
-  props.block.area_segments.map((segment) => ({
-    area_max_value: segment.area_max_value,
-    area_min_value: segment.area_min_value,
-    area_range_label: segment.area_range_label,
-    area_segment: segment.area_segment,
-    area_unit: segment.area_unit,
-    label: segment.label,
-    technoparks_count: segment.technoparks_count,
-    value: segment.technoparks_count,
-  })),
+const formatTechnoparkAreaCoordinate = (value: number): string =>
+  Number.parseFloat(value.toFixed(3)).toString()
+
+const getTechnoparkAreaDonutPoint = (radius: number, angle: number) => {
+  const radians = ((angle - 90) * Math.PI) / 180
+
+  return {
+    x: technoparkAreaDonutCenterX + radius * Math.cos(radians),
+    y: technoparkAreaDonutCenterY + radius * Math.sin(radians),
+  }
+}
+
+const createTechnoparkAreaDonutArcPath = (startAngle: number, endAngle: number): string => {
+  const start = getTechnoparkAreaDonutPoint(technoparkAreaDonutRingRadius, startAngle)
+  const end = getTechnoparkAreaDonutPoint(technoparkAreaDonutRingRadius, endAngle)
+  const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0
+
+  return [
+    `M ${formatTechnoparkAreaCoordinate(start.x)} ${formatTechnoparkAreaCoordinate(start.y)}`,
+    `A ${technoparkAreaDonutRingRadius} ${technoparkAreaDonutRingRadius} 0 ${largeArcFlag} 1 ${formatTechnoparkAreaCoordinate(end.x)} ${formatTechnoparkAreaCoordinate(end.y)}`,
+  ].join(' ')
+}
+
+const getTechnoparkAreaVisualRole = (
+  areaSegment: string,
+  label: string,
+): TechnoparkAreaVisualRole => {
+  const normalizedAreaSegment = areaSegment.trim().toLocaleLowerCase('ru-RU')
+  const normalizedLabel = label.trim().toLocaleLowerCase('ru-RU')
+
+  if (normalizedAreaSegment.includes('large') || normalizedLabel.includes('круп')) {
+    return 'large'
+  }
+
+  if (normalizedAreaSegment.includes('medium') || normalizedLabel.includes('сред')) {
+    return 'medium'
+  }
+
+  if (normalizedAreaSegment.includes('small') || normalizedLabel.includes('мел')) {
+    return 'small'
+  }
+
+  return 'other'
+}
+
+const getTechnoparkAreaSegmentColor = (originalIndex: number): string =>
+  detailDonutSegmentColors[originalIndex] ?? '#A7B2BC'
+
+const technoparkAreaDonutSegments = computed(() => {
+  const visibleSegments = props.block.area_segments
+    .map((segment, originalIndex) => ({
+      ...segment,
+      originalIndex,
+      visualRole: getTechnoparkAreaVisualRole(segment.area_segment, segment.label),
+    }))
+    .filter((segment) => segment.technoparks_count > 0)
+    .sort((leftSegment, rightSegment) => {
+      const orderDifference =
+        technoparkAreaVisualOrder[leftSegment.visualRole] -
+        technoparkAreaVisualOrder[rightSegment.visualRole]
+
+      return orderDifference || leftSegment.originalIndex - rightSegment.originalIndex
+    })
+  const total = visibleSegments.reduce((sum, segment) => sum + segment.technoparks_count, 0)
+
+  if (total <= 0) {
+    return []
+  }
+
+  const degreesPerUnit = 360 / total
+  let cursorAngle = technoparkAreaDonutStartAngle
+
+  return visibleSegments.map((segment) => {
+    const sweepAngle = segment.technoparks_count * degreesPerUnit
+    const startAngle = cursorAngle
+    const endAngle = cursorAngle + sweepAngle
+
+    cursorAngle = endAngle
+
+    return {
+      arcPath: createTechnoparkAreaDonutArcPath(startAngle, endAngle),
+      areaRangeLabel: segment.area_range_label,
+      color: getTechnoparkAreaSegmentColor(segment.originalIndex),
+      isFullCircle: sweepAngle >= 359.9,
+      key: segment.area_segment,
+      label: segment.label,
+      startAngle,
+      sweepAngle,
+      technoparksCount: segment.technoparks_count,
+      visualRole: segment.visualRole,
+    }
+  })
+})
+
+const technoparkAreaCallouts = computed(() =>
+  technoparkAreaDonutSegments.value.map((segment, index) => {
+    const config: TechnoparkAreaCalloutConfig = {
+      ...technoparkAreaCalloutConfigs[segment.visualRole],
+    }
+    const anchorAngle =
+      segment.isFullCircle || segment.sweepAngle >= technoparkAreaWideSegmentThreshold
+        ? config.wideSegmentAngle
+        : segment.startAngle + segment.sweepAngle * config.anchorPosition
+    const donutPoint = getTechnoparkAreaDonutPoint(
+      technoparkAreaDonutConnectorRadius,
+      anchorAngle,
+    )
+    const elbowPoint = {
+      x:
+        config.side === 'left'
+          ? donutPoint.x - technoparkAreaConnectorDiagonalDx
+          : donutPoint.x + technoparkAreaConnectorDiagonalDx,
+      y: donutPoint.y - config.diagonalDirectionY * technoparkAreaConnectorDiagonalDy,
+    }
+    const lineStartX =
+      config.side === 'left' ? elbowPoint.x - config.lineWidth : elbowPoint.x + config.lineWidth
+    const textX =
+      config.side === 'left'
+        ? lineStartX - technoparkAreaCalloutLabelGap
+        : lineStartX + technoparkAreaCalloutLabelGap
+    const textY = elbowPoint.y - 7 + (segment.visualRole === 'other' ? index * 12 : 0)
+
+    return {
+      ...config,
+      key: segment.key,
+      label: segment.label,
+      path: [
+        `M ${formatTechnoparkAreaCoordinate(lineStartX)} ${formatTechnoparkAreaCoordinate(elbowPoint.y)}`,
+        `H ${formatTechnoparkAreaCoordinate(elbowPoint.x)}`,
+        `L ${formatTechnoparkAreaCoordinate(donutPoint.x)} ${formatTechnoparkAreaCoordinate(donutPoint.y)}`,
+      ].join(' '),
+      textAnchor: config.side === 'left' ? 'end' : 'start',
+      textX,
+      textY,
+    }
+  }),
 )
 
-const technoparkAreaDonutColors = detailDonutSegmentColors
-
-const getNumberField = (value: unknown): number | undefined =>
-  typeof value === 'number' && Number.isFinite(value) ? value : undefined
-
-const buildTechnoparkAreaTooltipTemplate = (datum: UiKitDonutTooltipDatum): string => {
-  const technoparksCount = getNumberField(datum.technoparks_count) ?? datum.value
-  const areaRangeLabel =
-    typeof datum.area_range_label === 'string' ? datum.area_range_label : 'не указан'
-  const areaUnit = typeof datum.area_unit === 'string' ? datum.area_unit : 'ha'
-
-  return `
-    <div class="composition-tooltip">
-      <div class="composition-tooltip__title">${escapeHtml(datum.label)}</div>
-      <div class="composition-tooltip__rows">
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Технопарки</span>
-          <strong class="composition-tooltip__value">${escapeHtml(formatNumber(technoparksCount))}</strong>
-        </div>
-        <div class="composition-tooltip__row">
-          <span class="composition-tooltip__label">Площадь</span>
-          <strong class="composition-tooltip__value">${escapeHtml(`${areaRangeLabel} ${formatAreaUnit(areaUnit)}`)}</strong>
-        </div>
-      </div>
-    </div>
-  `
-}
+const technoparkAreaRangeLegendItems = computed(() =>
+  props.block.area_segments.map((segment, index) => ({
+    color: getTechnoparkAreaSegmentColor(index),
+    key: segment.area_segment,
+    label: segment.area_range_label,
+  })),
+)
 </script>
 
 <template>
-  <div class="analytics-split-layout analytics-split-layout--technoparks">
-    <div class="composition-chart-panel technopark-donut-panel">
-      <h3 class="analytics-subtitle">Площади технопарков</h3>
-      <div class="technopark-donut-chart-box">
-        <DonutChart
-          :data="technoparkAreaDonutData"
-          :colors="technoparkAreaDonutColors"
-          center-label="Всего"
-          :center-value="formatNumber(block.total_technoparks_count)"
-          :tooltip-template="buildTechnoparkAreaTooltipTemplate"
-          container-id="competence-map-technopark-area-donut"
+  <div class="technopark-composition-panel">
+    <section class="technopark-area-panel" :aria-label="block.title">
+      <svg
+        class="technopark-area-donut"
+        :viewBox="`0 0 ${technoparkAreaDonutViewBoxWidth} ${technoparkAreaDonutViewBoxHeight}`"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        :aria-label="`${block.title}: ${formatNumber(block.total_technoparks_count)}`"
+      >
+        <path
+          v-for="callout in technoparkAreaCallouts"
+          :key="callout.key"
+          class="technopark-area-donut__connector"
+          :d="callout.path"
         />
-      </div>
-
-      <ul class="area-segment-legend" aria-label="Диапазоны площадей технопарков">
-        <li
-          v-for="(segment, segmentIndex) in block.area_segments"
-          :key="segment.area_segment"
-          class="area-segment-legend__item"
+        <text
+          v-for="callout in technoparkAreaCallouts"
+          :key="`${callout.key}-label`"
+          class="technopark-area-donut__label"
+          :text-anchor="callout.textAnchor"
+          :x="callout.textX"
+          :y="callout.textY"
         >
-          <span
-            class="area-segment-legend__marker"
-            :style="{
-              backgroundColor: technoparkAreaDonutColors[segmentIndex],
-            }"
+          {{ callout.label }}
+        </text>
+        <g
+          v-for="(legendItem, legendIndex) in technoparkAreaRangeLegendItems"
+          :key="`${legendItem.key}-range`"
+          class="technopark-area-donut__range"
+          :transform="`translate(510 ${58 + legendIndex * 28})`"
+        >
+          <rect
+            class="technopark-area-donut__range-marker"
+            width="12"
+            height="12"
+            rx="3"
+            :fill="legendItem.color"
           />
-          <span class="area-segment-legend__label">
-            {{ capitalizeFirstLetter(segment.label) }} ·
-            {{ segment.area_range_label }}
-            {{ formatAreaUnit(segment.area_unit) }}
-          </span>
-          <strong class="area-segment-legend__value">
-            {{ formatNumber(segment.technoparks_count) }}
-          </strong>
-        </li>
-      </ul>
-    </div>
+          <text class="technopark-area-donut__range-label" x="30" y="10">
+            {{ legendItem.label }}
+          </text>
+        </g>
+        <template v-for="segment in technoparkAreaDonutSegments" :key="segment.key">
+          <circle
+            v-if="segment.isFullCircle"
+            class="technopark-area-donut__segment"
+            :cx="technoparkAreaDonutCenterX"
+            :cy="technoparkAreaDonutCenterY"
+            :r="technoparkAreaDonutRingRadius"
+            fill="none"
+            :stroke="segment.color"
+            :stroke-width="technoparkAreaDonutStrokeWidth"
+            stroke-linecap="butt"
+          >
+            <title>{{ segment.label }}: {{ formatNumber(segment.technoparksCount) }}</title>
+          </circle>
+          <path
+            v-else
+            class="technopark-area-donut__segment"
+            :d="segment.arcPath"
+            fill="none"
+            :stroke="segment.color"
+            :stroke-width="technoparkAreaDonutStrokeWidth"
+            stroke-linecap="butt"
+          >
+            <title>{{ segment.label }}: {{ formatNumber(segment.technoparksCount) }}</title>
+          </path>
+        </template>
+        <text
+          class="technopark-area-donut__center-value"
+          :x="technoparkAreaDonutCenterX"
+          :y="technoparkAreaDonutCenterY + 4"
+          text-anchor="middle"
+          dominant-baseline="middle"
+        >
+          {{ formatNumber(block.total_technoparks_count) }}
+        </text>
+      </svg>
+    </section>
 
-    <div class="analytics-ranked-panel">
-      <ScrollArea class="analytics-table-scroll" type="auto">
+    <section class="analytics-ranked-panel technopark-area-table-panel">
+      <ScrollArea class="analytics-table-scroll technopark-area-scroll" type="auto">
         <table class="analytics-table technopark-area-table">
           <thead>
             <tr>
@@ -131,8 +351,8 @@ const buildTechnoparkAreaTooltipTemplate = (datum: UiKitDonutTooltipDatum): stri
                   aria-label="Сортировать технопарки по площади"
                   @click="$emit('sort', 'area_value')"
                 >
-                  <span>Площадь</span>
                   <ArrowUp aria-hidden="true" />
+                  <span>Площадь</span>
                 </button>
               </th>
             </tr>
@@ -151,6 +371,6 @@ const buildTechnoparkAreaTooltipTemplate = (datum: UiKitDonutTooltipDatum): stri
           </tbody>
         </table>
       </ScrollArea>
-    </div>
+    </section>
   </div>
 </template>
diff --git a/src/pages/dashboard/ui/components/TopIndustriesCard.vue b/src/pages/dashboard/ui/components/TopIndustriesCard.vue
index 6cfd81f..80d5246 100644
--- a/src/pages/dashboard/ui/components/TopIndustriesCard.vue
+++ b/src/pages/dashboard/ui/components/TopIndustriesCard.vue
@@ -26,18 +26,24 @@ const industrySegments = [
     label: 'Кластеры',
     color: associationTypeColorMap.clusters,
   },
-  {
-    key: 'technopark_opk_organizations_count',
-    label: 'Технопарки',
-    color: associationTypeColorMap.technoparks,
-  },
   {
     key: 'sez_opk_organizations_count',
     label: 'ОЭЗ',
     color: associationTypeColorMap.sez,
   },
+  {
+    key: 'technopark_opk_organizations_count',
+    label: 'Технопарки',
+    color: associationTypeColorMap.technoparks,
+  },
 ] as const
 
+const singleIndustryColorMap = {
+  clusters: associationTypeColorMap.clusters,
+  sez: associationTypeColorMap.technoparks,
+  technoparks: '#EC9478',
+} satisfies Record<SpecificAssociationType, string>
+
 defineProps<{
   singleBlock: SingleTopIndustriesBlock | null
   stackedBlock: StackedTopIndustriesBlock | null
@@ -70,7 +76,7 @@ const getSingleIndustryWidth = (
 ): string => getProgressWidth(getNumericValue(row.opk_organizations_count), block.max_value)
 
 const getSingleIndustryColor = (block: SingleTopIndustriesBlock): string =>
-  associationTypeColorMap[block.association_type]
+  singleIndustryColorMap[block.association_type]
 
 const buildStackedIndustryTooltipContent = (
   row: StackedTopIndustryRow,
diff --git a/src/pages/dashboard/ui/components/TrendCard.vue b/src/pages/dashboard/ui/components/TrendCard.vue
index 9d7d832..e6e7fca 100644
--- a/src/pages/dashboard/ui/components/TrendCard.vue
+++ b/src/pages/dashboard/ui/components/TrendCard.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { ChartSeriesConfig } from '@gisp/ui-kit-shadcn-vue'
-import { Card, CardContent, LineAreaChart, ScrollArea } from '@gisp/ui-kit-shadcn-vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { Card, CardContent } from '@gisp/ui-kit-shadcn-vue'
 import {
-  buildChartTooltipTemplate,
   createChartTooltipContent,
-  formatAxisValue,
   formatGrowthPercent,
   formatNumber,
-  formatOrganizationsText,
   getNumericValue,
   type ChartTooltipContent,
   type TrendBlock,
@@ -24,6 +20,15 @@ type TrendChartDatum = {
   x: number
 } & Record<string, number>
 
+type ParticipationAreaSeriesKey = 'sez' | 'technoparks' | 'clusters'
+
+type ParticipationAreaSegment = {
+  color: string
+  key: ParticipationAreaSeriesKey
+  label: string
+  path: string
+}
+
 const props = defineProps<{
   trendBlock: TrendBlock
   trendChartData: TrendChartDatum[]
@@ -36,55 +41,66 @@ const emit = defineEmits<{
   showTooltip: [event: MouseEvent | FocusEvent, content: ChartTooltipContent]
 }>()
 
-const clusterTrendScrollLeft = ref(0)
 const clusterTrendVisiblePointsCount = 5
-const clusterTrendColumnWidth = 128
-const clusterTrendColumnGap = 18
+const clusterTrendMaxBarHeightPercent = 72
+
+const participationAreaChartDefaultWidth = 671
+const participationAreaChartDefaultHeight = 198
+const participationAreaChartPlotTop = 12
+const participationAreaChartBottomPadding = 38
+const participationAreaChartLabelBottomOffset = 10
+const participationAreaChartBoxElement = ref<globalThis.HTMLElement | null>(null)
+const participationAreaChartSize = ref({
+  height: participationAreaChartDefaultHeight,
+  width: participationAreaChartDefaultWidth,
+})
+let participationAreaChartResizeObserver: globalThis.ResizeObserver | null = null
+
+const participationAreaChartWidth = computed(() =>
+  Math.max(1, Math.round(participationAreaChartSize.value.width)),
+)
+const participationAreaChartHeight = computed(() =>
+  Math.max(1, Math.round(participationAreaChartSize.value.height)),
+)
+const participationAreaChartPlotBottom = computed(() =>
+  Math.max(
+    participationAreaChartPlotTop + 1,
+    participationAreaChartHeight.value - participationAreaChartBottomPadding,
+  ),
+)
+const participationAreaChartLabelY = computed(() =>
+  Math.max(
+    participationAreaChartPlotBottom.value,
+    participationAreaChartHeight.value - participationAreaChartLabelBottomOffset,
+  ),
+)
+
+const participationAreaSeries = [
+  {
+    key: 'sez',
+    label: 'ОЭЗ',
+    color: 'var(--competence-map-sez-color)',
+  },
+  {
+    key: 'technoparks',
+    label: 'Технопарки',
+    color: 'var(--competence-map-technoparks-color)',
+  },
+  {
+    key: 'clusters',
+    label: 'Кластеры',
+    color: 'var(--competence-map-clusters-color)',
+  },
+] satisfies Array<{
+  color: string
+  key: ParticipationAreaSeriesKey
+  label: string
+}>
 
 const clusterCreationTrendBlock = computed(() =>
   props.trendBlock.type === 'cluster_creation_dynamics' ? props.trendBlock : null,
 )
 
-const trendChartSeries = computed<ChartSeriesConfig[]>(() => {
-  if (props.trendBlock.type === 'cluster_creation_dynamics') {
-    return [
-      {
-        key: 'clusters',
-        label: 'Кластеры',
-        colorVar: '--competence-map-clusters-color',
-      },
-    ]
-  }
-
-  return [
-    {
-      key: 'clusters',
-      label: 'Кластеры',
-      colorVar: '--competence-map-clusters-color',
-    },
-    {
-      key: 'technoparks',
-      label: 'Технопарки',
-      colorVar: '--competence-map-technoparks-color',
-    },
-    {
-      key: 'sez',
-      label: 'ОЭЗ',
-      colorVar: '--competence-map-sez-color',
-    },
-  ]
-})
-
-const clusterTrendVisibleStartIndex = computed(() => {
-  const pointsCount = clusterCreationTrendBlock.value?.points.length ?? 0
-  const maxStartIndex = Math.max(0, pointsCount - clusterTrendVisiblePointsCount)
-  const rawStartIndex = Math.floor(
-    clusterTrendScrollLeft.value / (clusterTrendColumnWidth + clusterTrendColumnGap),
-  )
-
-  return Math.max(0, Math.min(maxStartIndex, rawStartIndex))
-})
-
 const clusterCreationVisiblePoints = computed(() => {
   const points = clusterCreationTrendBlock.value?.points ?? []
 
@@ -92,10 +108,33 @@ const clusterCreationVisiblePoints = computed(() => {
     return []
   }
 
-  return points.slice(
-    clusterTrendVisibleStartIndex.value,
-    clusterTrendVisibleStartIndex.value + clusterTrendVisiblePointsCount,
-  )
+  return points.slice(-clusterTrendVisiblePointsCount)
+})
+
+const clusterCreationTrendTitle = computed(() => {
+  const block = clusterCreationTrendBlock.value
+
+  if (!block) {
+    return props.trendBlock.title
+  }
+
+  const years = block.points
+    .map((point) => point.year)
+    .filter((year) => Number.isFinite(year))
+  const firstYear = years.at(0)
+  const lastYear = years.at(-1)
+
+  if (
+    !firstYear ||
+    !lastYear ||
+    firstYear === lastYear ||
+    block.title.includes(`${firstYear}`) ||
+    block.title.includes(`${lastYear}`)
+  ) {
+    return block.title
+  }
+
+  return `${block.title} ${firstYear}-${lastYear} гг.`
 })
 
 const clusterCreationMaxValue = computed(() => {
@@ -111,56 +150,14 @@ const getProgressWidth = (value: number, maxValue: number): string => {
     return '0%'
   }
 
-  return `${Math.max(0, Math.min(100, (value / maxValue) * 100))}%`
+  const relativeHeight = (value / maxValue) * clusterTrendMaxBarHeightPercent
+
+  return `${Math.max(0, Math.min(clusterTrendMaxBarHeightPercent, relativeHeight))}%`
 }
 
 const getClusterCreationBarHeight = (value: number | undefined): string =>
   getProgressWidth(getNumericValue(value), clusterCreationMaxValue.value)
 
-const getClusterTrendMinWidth = (pointsCount: number): string => {
-  if (pointsCount <= clusterTrendVisiblePointsCount) {
-    return '100%'
-  }
-
-  return `${pointsCount * clusterTrendColumnWidth + Math.max(0, pointsCount - 1) * clusterTrendColumnGap}px`
-}
-
-const updateClusterTrendScrollState = (event: Event) => {
-  const target = event.target
-
-  if (
-    typeof globalThis.HTMLElement === 'undefined' ||
-    !(target instanceof globalThis.HTMLElement) ||
-    !target.matches('[data-slot="scroll-area-viewport"]')
-  ) {
-    return
-  }
-
-  clusterTrendScrollLeft.value = target.scrollLeft
-}
-
-const formatTrendYear = (pointIndex: number): string => {
-  const yearLabel = props.trendYearLabels[pointIndex - 1] ?? ''
-
-  if (typeof window !== 'undefined' && window.innerWidth < 480) {
-    return yearLabel.slice(-2)
-  }
-
-  return yearLabel
-}
-
-const buildTrendTooltipTemplate = (datum: Record<string, unknown>): string => {
-  const yearIndex = typeof datum.x === 'number' && Number.isFinite(datum.x) ? datum.x : 0
-  const year = props.trendYearLabels[yearIndex - 1] ?? String(datum.x ?? '')
-  const rows = trendChartSeries.value.map((series) => ({
-    color: `var(${series.colorVar})`,
-    label: series.label,
-    value: formatOrganizationsText(getNumericValue(datum[series.key])),
-  }))
-
-  return buildChartTooltipTemplate(year ? `${year}` : 'Период', rows)
-}
-
 const buildClusterCreationTooltipContent = (point: ClusterCreationPoint): ChartTooltipContent =>
   createChartTooltipContent(`${point.year}`, [
     {
@@ -173,41 +170,206 @@ const buildClusterCreationTooltipContent = (point: ClusterCreationPoint): ChartT
       value: formatGrowthPercent(point.growth_percent),
     },
   ])
+
+const formatParticipationCoordinate = (value: number): string =>
+  Number.parseFloat(value.toFixed(3)).toString()
+
+const getParticipationX = (index: number, pointsCount: number): number => {
+  if (pointsCount <= 1) {
+    return participationAreaChartWidth.value / 2
+  }
+
+  return (index / (pointsCount - 1)) * participationAreaChartWidth.value
+}
+
+const getParticipationY = (value: number, maxValue: number): number => {
+  const plotHeight = participationAreaChartPlotBottom.value - participationAreaChartPlotTop
+
+  if (maxValue <= 0) {
+    return participationAreaChartPlotBottom.value
+  }
+
+  return participationAreaChartPlotBottom.value - (value / maxValue) * plotHeight
+}
+
+const getParticipationAreaPath = (
+  topValues: number[],
+  bottomValues: number[],
+  maxValue: number,
+): string => {
+  const pointsCount = topValues.length
+
+  if (!pointsCount) {
+    return ''
+  }
+
+  const buildPoint = (value: number, index: number) =>
+    `${formatParticipationCoordinate(getParticipationX(index, pointsCount))} ${formatParticipationCoordinate(getParticipationY(value, maxValue))}`
+
+  if (pointsCount === 1) {
+    const topY = formatParticipationCoordinate(getParticipationY(topValues[0] ?? 0, maxValue))
+    const bottomY = formatParticipationCoordinate(getParticipationY(bottomValues[0] ?? 0, maxValue))
+
+    return [
+      `M 0 ${topY}`,
+      `L ${participationAreaChartWidth.value} ${topY}`,
+      `L ${participationAreaChartWidth.value} ${bottomY}`,
+      `L 0 ${bottomY}`,
+      'Z',
+    ].join(' ')
+  }
+
+  const topLine = topValues.map((value, index) => buildPoint(value, index))
+  const bottomLine = bottomValues.map((value, index) => buildPoint(value, index)).reverse()
+
+  return [
+    `M ${topLine[0]}`,
+    ...topLine.slice(1).map((point) => `L ${point}`),
+    ...bottomLine.map((point) => `L ${point}`),
+    'Z',
+  ].join(' ')
+}
+
+const participationAreaMaxValue = computed(() =>
+  Math.max(
+    ...props.trendChartData.map((datum) =>
+      participationAreaSeries.reduce((sum, series) => sum + getNumericValue(datum[series.key]), 0),
+    ),
+    0,
+  ),
+)
+
+const participationAreaSegments = computed<ParticipationAreaSegment[]>(() => {
+  const cumulativeValues = props.trendChartData.map(() => 0)
+
+  return participationAreaSeries.map((series) => {
+    const bottomValues = [...cumulativeValues]
+    const topValues = cumulativeValues.map((currentValue, index) => {
+      const nextValue = currentValue + getNumericValue(props.trendChartData[index]?.[series.key])
+
+      cumulativeValues[index] = nextValue
+
+      return nextValue
+    })
+
+    return {
+      color: series.color,
+      key: series.key,
+      label: series.label,
+      path: getParticipationAreaPath(topValues, bottomValues, participationAreaMaxValue.value),
+    }
+  })
+})
+
+const participationAreaTickLabels = computed(() => {
+  const labels = props.trendYearLabels
+
+  if (labels.length <= 1) {
+    return labels.map((label, index) => ({
+      index,
+      label,
+      x: getParticipationX(index, labels.length),
+    }))
+  }
+
+  if (labels.length <= 12) {
+    const step = Math.max(1, Math.ceil((labels.length - 1) / 5))
+
+    return labels
+      .map((label, index) => ({ index, label }))
+      .filter(({ index }) => index % step === 0 || index === labels.length - 1)
+      .map(({ index, label }) => ({
+        index,
+        label,
+        x: getParticipationX(index, labels.length),
+      }))
+  }
+
+  const decadeTicks = labels
+    .map((label, index) => ({ index, label, year: Number(label) }))
+    .filter(({ index, year }) => index > 0 && Number.isFinite(year) && year % 10 === 0)
+
+  const ticks =
+    decadeTicks.length > 0
+      ? decadeTicks
+      : labels
+          .map((label, index) => ({ index, label, year: Number.NaN }))
+          .filter(({ index }) => index % Math.ceil(labels.length / 4) === 0)
+
+  return ticks.map(({ index, label }) => ({
+    index,
+    label,
+    x: getParticipationX(index, labels.length),
+  }))
+})
+
+const updateParticipationAreaChartSize = () => {
+  const element = participationAreaChartBoxElement.value
+
+  if (!element) {
+    return
+  }
+
+  participationAreaChartSize.value = {
+    height: element.clientHeight || participationAreaChartDefaultHeight,
+    width: element.clientWidth || participationAreaChartDefaultWidth,
+  }
+}
+
+onMounted(() => {
+  updateParticipationAreaChartSize()
+
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    return
+  }
+
+  participationAreaChartResizeObserver = new globalThis.ResizeObserver(([entry]) => {
+    const rect = entry?.contentRect
+
+    participationAreaChartSize.value = {
+      height: rect?.height || participationAreaChartDefaultHeight,
+      width: rect?.width || participationAreaChartDefaultWidth,
+    }
+  })
+
+  if (participationAreaChartBoxElement.value) {
+    participationAreaChartResizeObserver.observe(participationAreaChartBoxElement.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  participationAreaChartResizeObserver?.disconnect()
+  participationAreaChartResizeObserver = null
+})
 </script>
 
 <template>
   <Card class="analytics-card analytics-card--trend">
     <CardContent class="analytics-card__content">
       <header class="analytics-card__header analytics-card__header--with-legend">
-        <h2 class="analytics-card__title">{{ trendBlock.title }}</h2>
+        <h2 class="analytics-card__title">
+          {{ clusterCreationTrendBlock ? clusterCreationTrendTitle : trendBlock.title }}
+        </h2>
 
         <ul
           v-if="!clusterCreationTrendBlock"
           class="analytics-chart-legend"
           aria-label="Легенда графика динамики"
         >
-          <li v-for="series in trendChartSeries" :key="series.key">
+          <li v-for="series in participationAreaSeries" :key="series.key">
             <span class="analytics-chart-legend__marker" :class="`is-${series.key}`" />
             <span>{{ series.label }}</span>
           </li>
         </ul>
       </header>
 
-      <ScrollArea
+      <div
         v-if="clusterCreationTrendBlock"
         class="cluster-trend-chart-scroll"
-        type="auto"
-        scrollbar-orientation="horizontal"
-        @scroll.capture="updateClusterTrendScrollState"
       >
-        <div
-          class="cluster-trend-chart"
-          :style="{
-            minWidth: getClusterTrendMinWidth(clusterCreationTrendBlock.points.length),
-          }"
-        >
+        <div class="cluster-trend-chart">
           <div
-            v-for="point in clusterCreationTrendBlock.points"
+            v-for="point in clusterCreationVisiblePoints"
             :key="point.year"
             class="cluster-trend-chart__item"
             role="img"
@@ -239,22 +401,46 @@ const buildClusterCreationTooltipContent = (point: ClusterCreationPoint): ChartT
             <span class="cluster-trend-chart__year">{{ point.year }}</span>
           </div>
         </div>
-      </ScrollArea>
+      </div>
 
-      <div v-else class="trend-chart-box">
-        <LineAreaChart
-          :data="trendChartData"
-          :series="trendChartSeries"
-          :x-tick-format="formatTrendYear"
-          :y-tick-format="formatAxisValue"
-          :show-points="true"
-          :point-size="8"
-          :point-stroke-width="1.5"
-          :line-width="2"
-          :area-opacity="0.28"
-          :tooltip-template="buildTrendTooltipTemplate"
-          container-id="competence-map-trend-chart"
-        />
+      <div v-else ref="participationAreaChartBoxElement" class="trend-chart-box">
+        <svg
+          class="participation-area-chart"
+          :viewBox="`0 0 ${participationAreaChartWidth} ${participationAreaChartHeight}`"
+          role="img"
+          :aria-label="trendBlock.title"
+        >
+          <title>{{ trendBlock.title }}</title>
+          <g class="participation-area-chart__areas">
+            <path
+              v-for="segment in participationAreaSegments"
+              :key="segment.key"
+              class="participation-area-chart__area"
+              :d="segment.path"
+              :fill="segment.color"
+            >
+              <title>{{ segment.label }}</title>
+            </path>
+          </g>
+          <line
+            class="participation-area-chart__baseline"
+            x1="0"
+            :y1="participationAreaChartPlotBottom"
+            :x2="participationAreaChartWidth"
+            :y2="participationAreaChartPlotBottom"
+          />
+          <g class="participation-area-chart__axis">
+            <text
+              v-for="tick in participationAreaTickLabels"
+              :key="`${tick.index}-${tick.label}`"
+              class="participation-area-chart__tick-label"
+              :x="tick.x"
+              :y="participationAreaChartLabelY"
+            >
+              {{ tick.label }}
+            </text>
+          </g>
+        </svg>
       </div>
     </CardContent>
   </Card>
diff --git a/src/pages/dashboard/ui/styles/sections/charts-and-industries.css b/src/pages/dashboard/ui/styles/sections/charts-and-industries.css
index 6f2d8d0..8221510 100644
--- a/src/pages/dashboard/ui/styles/sections/charts-and-industries.css
+++ b/src/pages/dashboard/ui/styles/sections/charts-and-industries.css
@@ -49,12 +49,65 @@
   height: 100%;
 }
 
+.participation-area-chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.participation-area-chart__area {
+  opacity: 0.94;
+  stroke: none;
+  transition: opacity 160ms ease;
+}
+
+.participation-area-chart__area:hover {
+  opacity: 1;
+}
+
+.participation-area-chart__baseline {
+  stroke: #abafb3;
+  stroke-width: 1;
+  opacity: 0.28;
+  vector-effect: non-scaling-stroke;
+}
+
+.participation-area-chart__tick-label {
+  fill: #abafb3;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 400;
+  text-anchor: middle;
+}
+
 .trend-chart-box .unovis-xy-container {
-  --vis-axis-tick-label-font-size: 14px;
+  --vis-axis-grid-color: rgb(171 175 179 / 0.36);
+  --vis-axis-tick-label-color: #abafb3;
+  --vis-axis-tick-label-font-size: 12px;
   height: 100% !important;
   cursor: crosshair;
 }
 
+.trend-chart-box :is(.unovis-axis-y, [class*='axis-y']) text {
+  display: none;
+}
+
+.trend-chart-box .unovis-xy-container > svg > g:nth-of-type(3) text {
+  display: none;
+}
+
+.analytics-card--trend .analytics-card__content {
+  gap: 10px;
+  padding: 21px 28px 12px;
+}
+
+.analytics-card--trend .analytics-chart-legend,
+.analytics-card--industries .analytics-chart-legend {
+  display: none;
+}
+
 .line-area-chart-interactive {
   position: relative;
   min-height: 0;
@@ -78,62 +131,25 @@
 .cluster-trend-chart-scroll {
   position: relative;
   min-width: 0;
+  width: 100%;
   min-height: 0;
   height: 100%;
-  padding-bottom: 18px;
+  padding-bottom: 0;
 }
 
 .cluster-trend-chart-scroll::before {
-  position: absolute;
-  z-index: 0;
-  top: 42px;
-  right: 6px;
-  bottom: 44px;
-  left: 6px;
-  pointer-events: none;
-  content: '';
-  background: repeating-linear-gradient(
-    to bottom,
-    rgb(2 36 86 / 0.11) 0,
-    rgb(2 36 86 / 0.11) 1px,
-    transparent 1px,
-    transparent 25%
-  );
-}
-
-.cluster-trend-chart-scroll [data-slot='scroll-area-viewport'] {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  padding-bottom: 12px;
-}
-
-.cluster-trend-chart-scroll [data-slot='scroll-area-viewport'] > * {
-  min-height: 100%;
-  height: 100%;
-}
-
-.cluster-trend-chart-scroll [data-slot='scroll-area-scrollbar'] {
-  right: 6px;
-  bottom: 4px;
-  left: 6px;
-  height: 4px;
-}
-
-.cluster-trend-chart-scroll [data-slot='scroll-area-thumb'] {
-  border-radius: 999px;
-  background: var(--Infographic-Main-Dark-Blue, #022456);
+  display: none;
 }
 
 .cluster-trend-chart {
   display: grid;
+  width: 100%;
   min-height: 0;
   height: 100%;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(104px, 1fr);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 18px;
   align-items: end;
-  padding: 42px 6px 0;
+  padding: 28px 6px 0;
 }
 
 .cluster-trend-chart__item {
@@ -154,9 +170,12 @@
   position: absolute;
   right: 0;
   left: 0;
-  display: grid;
-  gap: 0;
-  justify-items: center;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 3px;
+  text-align: left;
   transform: translateY(-3px);
   transition: transform 160ms ease;
 }
@@ -220,32 +239,86 @@
   font-weight: 700;
 }
 
-.cluster-specializations-table {
+.analytics-table.cluster-specializations-table {
+  --cluster-specializations-table-surface: rgb(230 230 230 / 0.8);
+
+  color: #000000;
   font-size: 13px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
-.cluster-specializations-table th:nth-child(2),
-.cluster-specializations-table td:nth-child(2) {
+.analytics-table.cluster-specializations-table th,
+.analytics-table.cluster-specializations-table td {
+  padding: 4px 6px;
+  vertical-align: middle;
+}
+
+.analytics-table.cluster-specializations-table th {
+  background: var(--cluster-specializations-table-surface);
+  color: #000000;
+}
+
+.analytics-table.cluster-specializations-table th:hover {
+  background: var(--cluster-specializations-table-surface);
+}
+
+.analytics-table.cluster-specializations-table th:first-child,
+.analytics-table.cluster-specializations-table td:first-child {
+  width: 42px;
+  min-width: 42px;
+  max-width: 42px;
+  color: #000000;
+}
+
+.analytics-table.cluster-specializations-table th:nth-child(2),
+.analytics-table.cluster-specializations-table td:nth-child(2) {
   width: auto;
 }
 
-.cluster-specializations-table th:nth-child(3),
-.cluster-specializations-table td:nth-child(3) {
+.analytics-table.cluster-specializations-table th:nth-child(3),
+.analytics-table.cluster-specializations-table td:nth-child(3) {
   width: 220px;
   text-align: right;
 }
 
-.cluster-specializations-table .analytics-table-sort-button {
+.analytics-table.cluster-specializations-table .analytics-table-header-label {
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+}
+
+.analytics-table.cluster-specializations-table th:hover .analytics-table-header-label {
+  background: transparent;
+}
+
+.analytics-table.cluster-specializations-table .analytics-table-sort-button {
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: 4px;
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.analytics-table.cluster-specializations-table th:hover .analytics-table-sort-button,
+.analytics-table.cluster-specializations-table .analytics-table-sort-button:hover,
+.analytics-table.cluster-specializations-table .analytics-table-sort-button:focus-visible {
+  background: transparent;
+}
+
+.analytics-table.cluster-specializations-table .analytics-table-sort-button svg {
+  color: #abafb3;
+}
+
+.analytics-table.cluster-specializations-table tbody tr:hover td {
+  background: var(--cluster-specializations-table-surface);
 }
 
 .industry-list {
   display: grid;
-  gap: 16px;
+  gap: 15px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -253,7 +326,7 @@
 
 .industry-row {
   display: grid;
-  gap: 7px;
+  gap: 6px;
 }
 
 .industry-row__header {
@@ -261,9 +334,9 @@
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 12px;
   align-items: baseline;
-  color: var(--Infographic-Main-Dark-Blue, #022456);
-  font-size: 13px;
-  line-height: 18px;
+  color: #000000;
+  font-size: 12px;
+  line-height: 14px;
   font-weight: 700;
 }
 
@@ -273,17 +346,17 @@
 }
 
 .industry-row__header strong {
-  color: rgb(2 36 86 / 0.78);
+  color: #000000;
   font-weight: 800;
 }
 
 .industry-row__bar {
   display: flex;
   width: 100%;
-  height: 8px;
+  height: 4px;
   overflow: hidden;
-  border-radius: 999px;
-  background: rgb(2 36 86 / 0.08);
+  border-radius: 12px;
+  background: transparent;
 }
 
 .industry-row__bar--single .industry-row__segment {
@@ -292,7 +365,7 @@
 
 .industry-row__segment {
   display: block;
-  min-width: 2px;
+  min-width: 0;
   height: 100%;
   outline: none;
   cursor: pointer;
@@ -315,7 +388,7 @@
 .industry-row__segment:focus-visible {
   filter: drop-shadow(0 5px 8px rgb(2 36 86 / 0.16));
   opacity: 0.9;
-  transform: scaleY(1.35);
+  transform: scaleY(1.8);
 }
 
 .industry-row__segment:focus-visible {
diff --git a/src/pages/dashboard/ui/styles/sections/composition.css b/src/pages/dashboard/ui/styles/sections/composition.css
index 59dff91..9c9905c 100644
--- a/src/pages/dashboard/ui/styles/sections/composition.css
+++ b/src/pages/dashboard/ui/styles/sections/composition.css
@@ -1,9 +1,9 @@
 .composition-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
-  gap: 20px;
-  align-items: center;
-  min-height: 290px;
+  position: relative;
+  display: block;
+  min-height: 289px;
+  height: 289px;
+  overflow: hidden;
 }
 
 .composition-chart-panel {
@@ -11,44 +11,177 @@
 }
 
 .composition-chart-panel-is-donut {
-  height: 280px;
+  position: absolute;
+  z-index: 2;
+  top: var(--composition-donut-top);
+  left: var(--composition-donut-left);
+  width: var(--composition-donut-width);
+  height: var(--composition-donut-height);
 }
 
-.composition-legend {
-  display: grid;
-  gap: 10px;
+.composition-donut {
+  display: block;
+  width: var(--composition-donut-width);
+  height: var(--composition-donut-height);
+  overflow: visible;
+}
+
+.composition-connectors {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  width: var(--composition-layout-width);
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.composition-connectors__line {
+  fill: none;
+  stroke: #abafb3;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.composition-donut__segment {
+  transition: opacity 160ms ease;
+}
+
+.composition-donut__segment:hover {
+  opacity: 0.92;
+}
+
+.composition-donut__center-value {
+  fill: #000000;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 64px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.composition-callout-list {
+  display: contents;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.composition-legend-item {
+.composition-callout {
+  position: absolute;
+  z-index: 4;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 10px;
+  overflow: hidden;
+  gap: 0;
+  color: #000000;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+}
+
+.composition-callout.is-sez {
+  top: 73px;
+  left: 10px;
+  width: 223px;
+}
+
+.composition-callout.is-technoparks {
+  top: 207px;
+  left: 58px;
+  width: 190px;
+}
+
+.composition-callout.is-clusters {
+  top: 96px;
+  right: 0;
+  width: 237px;
+}
+
+.composition-callout__row {
+  display: flex;
+  min-width: 0;
   align-items: center;
+  gap: 4px;
+  min-height: 40px;
+  overflow: hidden;
+}
+
+.composition-callout__row strong {
+  display: inline-flex;
   min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 32px;
+  line-height: 1;
+  font-weight: 800;
 }
 
-.composition-legend-marker {
-  width: 12px;
-  height: 12px;
-  border-radius: 999px;
-}
-
-.composition-legend-label,
-.composition-legend-value {
-  color: #022456;
+.composition-callout__row span {
+  display: block;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: #000000;
+  text-overflow: ellipsis;
   font-size: 14px;
-  line-height: 18px;
+  line-height: 14px;
+  font-weight: 400;
+  white-space: nowrap;
 }
 
-.composition-legend-label {
-  min-width: 0;
+@container composition-card (max-width: 760px) {
+  .composition-callout__row {
+    min-height: 36px;
+  }
+
+  .composition-callout__row strong {
+    font-size: 30px;
+  }
+
+  .composition-callout__row span {
+    font-size: 13px;
+    line-height: 13px;
+  }
 }
 
-.composition-legend-value {
-  color: rgb(2 36 86 / 62%);
+@container composition-card (max-width: 620px) {
+  .composition-callout__row {
+    min-height: 34px;
+  }
+
+  .composition-callout__row strong {
+    font-size: 28px;
+  }
+
+  .composition-callout__row span {
+    display: none;
+  }
+}
+
+@container composition-card (max-width: 560px) {
+  .composition-layout {
+    display: grid;
+    height: 252px;
+    min-height: 252px;
+    place-items: center;
+  }
+
+  .composition-connectors,
+  .composition-callout-list {
+    display: none;
+  }
+
+  .composition-chart-panel-is-donut {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: min(100%, 240px);
+    height: 238px;
+  }
+
+  .composition-donut {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .composition-tooltip {
@@ -141,6 +274,100 @@
   height: auto;
 }
 
+.sez-composition-panel {
+  display: grid;
+  min-width: 0;
+  height: 100%;
+  grid-template-rows: 220px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.sez-types-panel {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  align-content: start;
+  justify-items: center;
+}
+
+.sez-types-panel__title {
+  justify-self: center;
+  margin: 0;
+  color: #000000;
+  font-size: 20px;
+  line-height: 20px;
+  font-weight: 800;
+}
+
+.sez-types-donut {
+  display: block;
+  width: min(100%, 600px);
+  height: auto;
+  aspect-ratio: 620 / 205;
+  overflow: visible;
+}
+
+.sez-types-donut__ring {
+  overflow: visible;
+}
+
+.sez-types-donut__connector {
+  fill: none;
+  stroke: #abafb3;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.sez-types-donut__label {
+  fill: #000000;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 11px;
+  line-height: 13px;
+  font-weight: 700;
+}
+
+.sez-types-donut__segment {
+  transition: opacity 160ms ease;
+}
+
+.sez-types-donut__segment:hover {
+  opacity: 0.92;
+}
+
+.sez-types-donut__center-value {
+  fill: #022456;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 52px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.sez-priority-panel {
+  min-height: 0;
+  gap: 8px;
+}
+
+.sez-priority-panel .analytics-subtitle {
+  margin: 0;
+  color: #000000;
+  font-size: 20px;
+  line-height: 20px;
+  font-weight: 800;
+}
+
+.sez-priority-scroll {
+  --sez-priority-scrollbar-gutter: 16px;
+
+  height: 230px;
+  max-height: 230px;
+  margin-right: calc(-1 * var(--sez-priority-scrollbar-gutter));
+  padding-right: var(--sez-priority-scrollbar-gutter);
+}
+
+.sez-priority-scroll [data-slot='scroll-area-viewport'] {
+  padding-right: 0;
+}
+
 .analytics-split-layout--technoparks {
   grid-template-columns: minmax(0, 1fr);
   gap: 18px;
@@ -189,6 +416,91 @@
   min-height: 0;
 }
 
+.technopark-composition-panel {
+  display: grid;
+  min-width: 0;
+  height: 100%;
+  grid-template-rows: 220px minmax(0, 1fr);
+  gap: 10px;
+}
+
+.technopark-area-panel {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  align-content: start;
+  justify-items: center;
+}
+
+.technopark-area-donut {
+  display: block;
+  width: min(100%, 620px);
+  height: auto;
+  aspect-ratio: 620 / 210;
+  overflow: visible;
+}
+
+.technopark-area-donut__connector {
+  fill: none;
+  stroke: #abafb3;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.technopark-area-donut__label {
+  fill: #000000;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 11px;
+  line-height: 13px;
+  font-weight: 700;
+}
+
+.technopark-area-donut__segment {
+  transition: opacity 160ms ease;
+}
+
+.technopark-area-donut__segment:hover {
+  opacity: 0.92;
+}
+
+.technopark-area-donut__center-value {
+  fill: #022456;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 52px;
+  font-weight: 800;
+  pointer-events: none;
+}
+
+.technopark-area-donut__range-marker {
+  vector-effect: non-scaling-stroke;
+}
+
+.technopark-area-donut__range-label {
+  fill: #000000;
+  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 700;
+}
+
+.technopark-area-table-panel {
+  min-height: 0;
+  gap: 0;
+}
+
+.technopark-area-scroll {
+  --technopark-area-scrollbar-gutter: 16px;
+
+  height: 218px;
+  max-height: 218px;
+  margin-right: calc(-1 * var(--technopark-area-scrollbar-gutter));
+  padding-right: var(--technopark-area-scrollbar-gutter);
+}
+
+.technopark-area-scroll [data-slot='scroll-area-viewport'] {
+  padding-right: 0;
+}
+
 .area-segment-legend {
   display: grid;
   gap: 8px;
@@ -256,22 +568,25 @@
 }
 
 .industry-list-scroll {
+  --industry-list-scrollbar-gutter: 24px;
+
   min-width: 0;
-  max-height: min(410px, 48vh);
-  padding-right: 24px;
+  max-height: 242px;
+  margin-right: calc(-1 * var(--industry-list-scrollbar-gutter));
+  padding-right: var(--industry-list-scrollbar-gutter);
 }
 
 .analytics-table-scroll [data-slot='scroll-area-viewport'],
 .industry-list-scroll [data-slot='scroll-area-viewport'] {
-  padding-right: 16px;
+  padding-right: 0;
 }
 
 .analytics-table-scroll [data-slot='scroll-area-scrollbar'],
 .industry-list-scroll [data-slot='scroll-area-scrollbar'] {
   top: 0;
-  right: 4px;
+  right: 0;
   bottom: 0;
-  width: 4px;
+  width: 3px;
 }
 
 .analytics-table-scroll [data-slot='scroll-area-thumb'],
@@ -280,6 +595,19 @@
   background: #022456;
 }
 
+.cluster-specializations-scroll {
+  --cluster-specializations-scrollbar-gutter: 16px;
+
+  height: 286px;
+  max-height: 286px;
+  margin-right: calc(-1 * var(--cluster-specializations-scrollbar-gutter));
+  padding-right: var(--cluster-specializations-scrollbar-gutter);
+}
+
+.cluster-specializations-scroll [data-slot='scroll-area-viewport'] {
+  padding-right: 0;
+}
+
 .analytics-ranked-list {
   display: grid;
   gap: 10px;
diff --git a/src/pages/dashboard/ui/styles/sections/layout.css b/src/pages/dashboard/ui/styles/sections/layout.css
index 7597f1d..28ca2f8 100644
--- a/src/pages/dashboard/ui/styles/sections/layout.css
+++ b/src/pages/dashboard/ui/styles/sections/layout.css
@@ -1,16 +1,18 @@
 .dashboard-content-section {
+  --dashboard-content-width: 100%;
+
+  container-name: dashboard-content;
+  container-type: inline-size;
   display: flex;
-  width: min(100%, 1490px);
+  width: 100%;
   min-height: calc(100svh - 230px);
   flex-direction: column;
-  gap: 24px;
+  gap: 12px;
   margin: 0 auto;
-  padding: 32px;
-  border-radius: 24px;
-  background: var(--Infographic-Base-White, #ffffff);
-  box-shadow:
-    0 3px 7px #e1e5ef,
-    0 24px 48px rgb(227 231 239 / 60%);
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .page-header {
@@ -137,20 +139,27 @@
 
 .analytics-kpi-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
+  min-height: 116px;
+  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
+  align-items: start;
+  gap: 24px;
+  padding: 23px 34px 18px;
+  overflow: hidden;
+  border-radius: 24px;
+  background: rgb(230 230 230 / 0.8);
 }
 
 .analytics-kpi-card {
   display: grid;
-  min-height: 128px;
+  min-width: 0;
+  min-height: 0;
   align-content: start;
-  gap: 10px;
-  padding: 22px 20px;
-  border: 1px solid rgb(2 36 86 / 0.08);
-  border-radius: 18px;
-  background: linear-gradient(180deg, rgb(245 247 250 / 0.78), rgb(255 255 255 / 0.94));
-  box-shadow: 0 4px 14px rgb(2 36 86 / 0.06);
+  gap: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .analytics-kpi-card--skeleton,
@@ -169,17 +178,17 @@
 
 .analytics-kpi-card__value {
   color: var(--Infographic-Main-Red, #c90237);
-  font-size: clamp(32px, 3.2vw, 44px);
+  font-size: 48px;
   line-height: 1;
   font-weight: 800;
   letter-spacing: 0;
 }
 
 .analytics-kpi-card__label {
-  max-width: 230px;
-  color: rgb(2 36 86 / 0.7);
-  font-size: 13px;
-  line-height: 16px;
+  max-width: 190px;
+  color: #000000;
+  font-size: 10px;
+  line-height: 11px;
   font-weight: 700;
 }
 
@@ -229,25 +238,31 @@
 .analytics-dashboard-grid {
   display: grid;
   flex: 1 1 auto;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 20px;
+  width: var(--dashboard-content-width);
+  max-width: 100%;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 24px;
   align-items: start;
+  justify-content: start;
 }
 
 .analytics-card {
+  width: 100%;
   min-width: 0;
   min-height: 0;
   padding: 0;
   overflow: visible;
-  border-radius: 22px;
-  box-shadow: 0 1px 4px 0 rgb(205 212 224 / 0.42);
+  border: 0;
+  border-radius: 24px;
+  background: rgb(230 230 230 / 0.8);
+  box-shadow: none;
   transform: none !important;
   transition: none !important;
 }
 
 .analytics-card:hover,
 .analytics-card:focus-within {
-  box-shadow: 0 1px 4px 0 rgb(205 212 224 / 0.42) !important;
+  box-shadow: none !important;
   transform: none !important;
 }
 
@@ -265,31 +280,48 @@
   animation: skeleton-pulse 1400ms ease-in-out infinite;
 }
 
+.analytics-kpi-grid--skeleton {
+  min-height: 116px;
+  border-color: rgb(2 36 86 / 0.05);
+  background: linear-gradient(
+    90deg,
+    rgb(232 237 244 / 0.78),
+    rgb(248 250 253 / 0.96),
+    rgb(232 237 244 / 0.78)
+  );
+  background-size: 220% 100%;
+  box-shadow: 0 1px 4px 0 rgb(205 212 224 / 0.42);
+  animation: skeleton-pulse 1400ms ease-in-out infinite;
+}
+
 .analytics-card--composition,
 .analytics-card--ranking {
-  min-height: 398px;
+  min-height: 0;
 }
 
 .analytics-card--composition {
-  grid-column: span 6;
+  container-name: composition-card;
+  container-type: inline-size;
+  height: 369px;
+  overflow: hidden;
 }
 
 .analytics-card--ranking {
-  grid-column: span 6;
+  height: 460px;
 }
 
 .analytics-card--trend,
 .analytics-card--employees,
 .analytics-card--industries {
-  grid-column: span 6;
+  min-height: 0;
 }
 
 .analytics-card--trend {
-  min-height: 338px;
+  height: 261px;
 }
 
 .analytics-card--industries {
-  min-height: 300px;
+  height: 326px;
 }
 
 .analytics-card--employees {
@@ -297,28 +329,14 @@
 }
 
 .analytics-dashboard-column {
-  display: contents;
-}
-
-.analytics-card--composition {
-  order: 1;
-}
-
-.analytics-card--ranking {
-  order: 2;
-}
-
-.analytics-card--trend,
-.analytics-card--employees {
-  order: 3;
-}
-
-.analytics-card--industries {
-  order: 4;
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  align-content: start;
+  gap: 24px;
 }
 
 .analytics-dashboard-grid.is-all {
-  grid-template-rows: auto minmax(0, 1fr);
   align-items: stretch;
 }
 
@@ -344,6 +362,15 @@
   gap: 20px;
 }
 
+.analytics-dashboard-grid.is-clusters .analytics-dashboard-column,
+.analytics-dashboard-grid.is-sez .analytics-dashboard-column {
+  height: auto;
+  grid-template-rows: none;
+  align-content: start;
+  justify-items: stretch;
+  gap: 24px;
+}
+
 .analytics-dashboard-grid.is-clusters .analytics-dashboard-column--primary,
 .analytics-dashboard-grid.is-sez .analytics-dashboard-column--primary {
   grid-column: 1;
@@ -375,9 +402,10 @@
 .analytics-dashboard-grid.is-technoparks .analytics-dashboard-column {
   display: grid;
   min-width: 0;
-  height: 100%;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: 20px;
+  height: auto;
+  grid-template-rows: none;
+  align-content: start;
+  gap: 24px;
 }
 
 .analytics-dashboard-grid.is-technoparks .analytics-dashboard-column--primary {
@@ -403,34 +431,83 @@
 .analytics-dashboard-grid.is-sez .analytics-card--industries,
 .analytics-dashboard-grid.is-technoparks .analytics-card--employees,
 .analytics-dashboard-grid.is-technoparks .analytics-card--industries {
+  width: 100%;
+  min-width: 100%;
   align-self: stretch;
+  justify-self: stretch;
 }
 
-.analytics-dashboard-grid .analytics-card--skeleton-block.analytics-card--composition,
-.analytics-dashboard-grid .analytics-card--skeleton-block.analytics-card--ranking {
-  min-height: 398px;
+.analytics-dashboard-grid.is-clusters .analytics-card--trend {
+  height: 326px;
 }
 
-.analytics-dashboard-grid .analytics-card--skeleton-block.analytics-card--trend {
-  min-height: 338px;
+.analytics-dashboard-grid--skeleton .analytics-card--skeleton-block {
+  min-height: 0;
 }
 
-.analytics-dashboard-grid .analytics-card--skeleton-block.analytics-card--industries {
-  min-height: 300px;
+.analytics-dashboard-grid--skeleton .analytics-card--composition {
+  height: 369px;
 }
 
-.analytics-dashboard-grid .analytics-card--skeleton-block.analytics-card--employees {
-  min-height: 280px;
+.analytics-dashboard-grid--skeleton .analytics-card--ranking {
+  height: 460px;
+}
+
+.analytics-dashboard-grid--skeleton .analytics-card--trend {
+  height: 261px;
+}
+
+.analytics-dashboard-grid--skeleton .analytics-card--industries {
+  height: 326px;
+}
+
+.analytics-dashboard-grid--skeleton .analytics-card--employees {
+  height: 86px;
+  min-height: 0;
+}
+
+.analytics-dashboard-grid--skeleton.is-sez .analytics-card--composition,
+.analytics-dashboard-grid--skeleton.is-technoparks .analytics-card--composition {
+  height: 540px;
+}
+
+.analytics-dashboard-grid--skeleton.is-clusters .analytics-card--trend {
+  height: 326px;
 }
 
 .analytics-card__content {
   display: grid;
   height: 100%;
-  gap: 20px;
-  padding: 24px;
+  gap: 16px;
+  padding: 20px 24px;
   overflow: visible;
 }
 
+.analytics-card--composition .analytics-card__content {
+  gap: 10px;
+  padding: 21px 28px 12px;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--composition {
+  height: 540px;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--composition .analytics-card__content {
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+  padding: 22px 28px 16px;
+}
+
+.analytics-card--ranking .analytics-card__content {
+  gap: 8px;
+  padding: 18px 28px 18px;
+}
+
+.analytics-card--industries .analytics-card__content {
+  gap: 14px;
+  padding: 22px 37px 22px;
+}
+
 .analytics-card--composition .analytics-card__content,
 .analytics-card--ranking .analytics-card__content,
 .analytics-card--employees .analytics-card__content,
@@ -446,20 +523,20 @@
   align-content: start;
 }
 
-.analytics-dashboard-grid.is-sez .analytics-card--composition .analytics-card__content {
-  grid-template-rows: auto minmax(0, 1fr);
-}
-
 .analytics-dashboard-grid.is-technoparks .analytics-card--composition .analytics-card__content {
   grid-template-rows: auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 22px 28px 16px;
 }
 
-.analytics-dashboard-grid.is-sez .analytics-card--employees .analytics-card__content {
-  grid-template-rows: auto minmax(0, 1fr);
+.analytics-dashboard-grid.is-technoparks .analytics-card--composition {
+  height: 540px;
 }
 
+.analytics-dashboard-grid.is-sez .analytics-card--employees .analytics-card__content,
 .analytics-dashboard-grid.is-technoparks .analytics-card--employees .analytics-card__content {
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  padding: 0;
 }
 
 .analytics-dashboard-grid.is-sez .analytics-card--employees .employee-stat-grid,
@@ -467,6 +544,74 @@
   align-self: start;
 }
 
+.analytics-dashboard-grid.is-sez .analytics-card--employees,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees {
+  height: 86px;
+  min-height: 0;
+  align-self: start;
+  background: transparent;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees:hover,
+.analytics-dashboard-grid.is-sez .analytics-card--employees:focus-within,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees:hover,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees:focus-within {
+  background: transparent;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees .analytics-card__header,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees .analytics-card__header {
+  display: none;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees .employee-stat-grid,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees .employee-stat-grid {
+  height: 100%;
+  gap: 24px;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees .employee-stat-card,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees .employee-stat-card {
+  min-height: 0;
+  height: 86px;
+  gap: 6px;
+  padding: 14px 28px 12px;
+  border: 0;
+  border-radius: 24px;
+  background: rgb(230 230 230 / 0.8);
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees .employee-stat-card__value,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees .employee-stat-card__value {
+  color: var(--Infographic-Main-Red, #c90237);
+  font-size: 44px;
+  line-height: 1;
+  font-weight: 800;
+}
+
+.analytics-dashboard-grid.is-sez .analytics-card--employees .employee-stat-card__label,
+.analytics-dashboard-grid.is-technoparks .analytics-card--employees .employee-stat-card__label {
+  max-width: none;
+  color: #000000;
+  font-size: 10px;
+  line-height: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.analytics-dashboard-grid--skeleton.is-sez .analytics-card--skeleton-block.analytics-card--employees,
+.analytics-dashboard-grid--skeleton.is-technoparks .analytics-card--skeleton-block.analytics-card--employees {
+  background: linear-gradient(
+    90deg,
+    rgb(232 237 244 / 0.78),
+    rgb(248 250 253 / 0.96),
+    rgb(232 237 244 / 0.78)
+  );
+  background-size: 220% 100%;
+  box-shadow: 0 1px 4px 0 rgb(205 212 224 / 0.42) !important;
+  animation: skeleton-pulse 1400ms ease-in-out infinite;
+}
+
 .analytics-card__header {
   display: flex;
   min-width: 0;
@@ -485,9 +630,9 @@
   min-width: 0;
   max-width: 720px;
   margin: 0;
-  color: var(--Infographic-Main-Dark-Blue, #022456);
+  color: #000000;
   font-size: 20px;
-  line-height: 24px;
+  line-height: 20px;
   font-weight: 800;
   letter-spacing: 0;
   overflow-wrap: anywhere;
diff --git a/src/pages/dashboard/ui/styles/sections/responsive.css b/src/pages/dashboard/ui/styles/sections/responsive.css
index 2651367..d0651b9 100644
--- a/src/pages/dashboard/ui/styles/sections/responsive.css
+++ b/src/pages/dashboard/ui/styles/sections/responsive.css
@@ -5,12 +5,62 @@
   }
 }
 
+@container dashboard-content (max-width: 1280px) {
+  .analytics-dashboard-grid,
+  .analytics-dashboard-grid.is-clusters,
+  .analytics-dashboard-grid.is-sez,
+  .analytics-dashboard-grid.is-technoparks {
+    grid-template-columns: 1fr;
+  }
+
+  .analytics-dashboard-grid.is-clusters .analytics-dashboard-column,
+  .analytics-dashboard-grid.is-sez .analytics-dashboard-column,
+  .analytics-dashboard-grid.is-technoparks .analytics-dashboard-column {
+    display: contents;
+  }
+
+  .analytics-dashboard-grid.is-clusters .analytics-dashboard-column--primary,
+  .analytics-dashboard-grid.is-clusters .analytics-dashboard-column--secondary,
+  .analytics-dashboard-grid.is-sez .analytics-dashboard-column--primary,
+  .analytics-dashboard-grid.is-sez .analytics-dashboard-column--secondary,
+  .analytics-dashboard-grid.is-technoparks .analytics-dashboard-column--primary,
+  .analytics-dashboard-grid.is-technoparks .analytics-dashboard-column--secondary {
+    grid-column: auto;
+  }
+
+  .analytics-kpi-grid,
+  .analytics-card--composition,
+  .analytics-card--ranking,
+  .analytics-card--trend,
+  .analytics-card--employees,
+  .analytics-card--industries {
+    grid-column: 1 / -1;
+  }
+}
+
+@container dashboard-content (max-width: 980px) {
+  .analytics-kpi-grid {
+    height: auto;
+    min-height: 116px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container dashboard-content (max-width: 620px) {
+  .analytics-kpi-grid {
+    min-height: 0;
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 1120px) {
   .app-shell {
     grid-template-columns: 260px minmax(0, 1fr);
   }
 
   .analytics-kpi-grid {
+    height: auto;
+    min-height: 116px;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
@@ -39,7 +89,40 @@
   }
 
   .composition-layout {
+    display: grid;
+    height: auto;
+    min-height: 0;
     grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .composition-chart-panel-is-donut {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: min(100%, 280px);
+    height: 260px;
+    justify-self: center;
+  }
+
+  .composition-callout-list {
+    display: grid;
+    gap: 8px;
+  }
+
+  .composition-callout,
+  .composition-callout.is-sez,
+  .composition-callout.is-technoparks,
+  .composition-callout.is-clusters {
+    position: relative;
+    top: auto;
+    right: auto;
+    left: auto;
+    width: 100%;
+  }
+
+  .composition-callout__connector {
+    display: none;
   }
 
   .analytics-split-layout {
@@ -93,6 +176,8 @@
   }
 
   .analytics-kpi-grid {
+    height: auto;
+    min-height: 0;
     grid-template-columns: 1fr;
   }
 
@@ -127,6 +212,7 @@
   }
 
   .composition-chart-panel-is-donut {
+    width: min(100%, 250px);
     height: 240px;
   }
 
diff --git a/src/pages/dashboard/ui/styles/sections/tables.css b/src/pages/dashboard/ui/styles/sections/tables.css
index bc9c588..d784f04 100644
--- a/src/pages/dashboard/ui/styles/sections/tables.css
+++ b/src/pages/dashboard/ui/styles/sections/tables.css
@@ -98,6 +98,150 @@
   width: 170px;
 }
 
+.analytics-table.sez-priority-table {
+  --sez-priority-table-surface: rgb(230 230 230 / 0.8);
+
+  color: #000000;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.analytics-table.sez-priority-table th,
+.analytics-table.sez-priority-table td {
+  padding: 4px 6px;
+  vertical-align: middle;
+}
+
+.analytics-table.sez-priority-table th {
+  background: var(--sez-priority-table-surface);
+  color: #000000;
+}
+
+.analytics-table.sez-priority-table th:hover {
+  background: var(--sez-priority-table-surface);
+}
+
+.analytics-table.sez-priority-table th:first-child,
+.analytics-table.sez-priority-table td:first-child {
+  width: 42px;
+  min-width: 42px;
+  max-width: 42px;
+  color: #000000;
+}
+
+.analytics-table.sez-priority-table th:nth-child(2),
+.analytics-table.sez-priority-table td:nth-child(2) {
+  width: auto;
+}
+
+.analytics-table.sez-priority-table th:nth-child(3),
+.analytics-table.sez-priority-table td:nth-child(3) {
+  width: 150px;
+}
+
+.analytics-table.sez-priority-table .analytics-table-header-label {
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+}
+
+.analytics-table.sez-priority-table th:hover .analytics-table-header-label {
+  background: transparent;
+}
+
+.analytics-table.sez-priority-table .analytics-table-sort-button {
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.analytics-table.sez-priority-table th:hover .analytics-table-sort-button,
+.analytics-table.sez-priority-table .analytics-table-sort-button:hover,
+.analytics-table.sez-priority-table .analytics-table-sort-button:focus-visible {
+  background: transparent;
+}
+
+.analytics-table.sez-priority-table .analytics-table-sort-button svg {
+  color: #abafb3;
+}
+
+.analytics-table.sez-priority-table tbody tr:hover td {
+  background: var(--sez-priority-table-surface);
+}
+
+.analytics-table.technopark-area-table {
+  --technopark-area-table-surface: rgb(230 230 230 / 0.8);
+
+  color: #000000;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.analytics-table.technopark-area-table th,
+.analytics-table.technopark-area-table td {
+  padding: 4px 6px;
+  vertical-align: middle;
+}
+
+.analytics-table.technopark-area-table th {
+  background: var(--technopark-area-table-surface);
+  color: #000000;
+}
+
+.analytics-table.technopark-area-table th:hover {
+  background: var(--technopark-area-table-surface);
+}
+
+.analytics-table.technopark-area-table th:first-child,
+.analytics-table.technopark-area-table td:first-child {
+  width: 42px;
+  min-width: 42px;
+  max-width: 42px;
+  color: #000000;
+}
+
+.analytics-table.technopark-area-table th:nth-child(2),
+.analytics-table.technopark-area-table td:nth-child(2) {
+  width: auto;
+}
+
+.analytics-table.technopark-area-table th:nth-child(3),
+.analytics-table.technopark-area-table td:nth-child(3) {
+  width: 150px;
+}
+
+.analytics-table.technopark-area-table .analytics-table-header-label {
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+}
+
+.analytics-table.technopark-area-table th:hover .analytics-table-header-label {
+  background: transparent;
+}
+
+.analytics-table.technopark-area-table .analytics-table-sort-button {
+  min-height: 24px;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.analytics-table.technopark-area-table th:hover .analytics-table-sort-button,
+.analytics-table.technopark-area-table .analytics-table-sort-button:hover,
+.analytics-table.technopark-area-table .analytics-table-sort-button:focus-visible {
+  background: transparent;
+}
+
+.analytics-table.technopark-area-table .analytics-table-sort-button svg {
+  color: #abafb3;
+}
+
+.analytics-table.technopark-area-table tbody tr:hover td {
+  background: var(--technopark-area-table-surface);
+}
+
 .analytics-table-header-label {
   display: inline-flex;
   width: 100%;
@@ -211,27 +355,32 @@
 }
 
 .ranking-table-shell {
+  --ranking-table-scrollbar-gutter: 16px;
+
   min-width: 0;
-  height: min(338px, 44vh);
-  min-height: 260px;
-  padding-right: 24px;
+  height: 381px;
+  min-height: 0;
+  margin-right: calc(-1 * var(--ranking-table-scrollbar-gutter));
+  padding-right: var(--ranking-table-scrollbar-gutter);
 }
 
 .ranking-table-shell--compact .ranking-table {
-  width: min(100%, 620px);
-  margin-right: auto;
-  margin-left: 0;
+  width: 100%;
+}
+
+.analytics-dashboard-grid.is-clusters .ranking-table-shell--compact .ranking-table {
+  width: min(100%, 820px);
 }
 
 .ranking-table-shell [data-slot='scroll-area-viewport'] {
-  padding-right: 16px;
+  padding-right: 0;
 }
 
 .ranking-table-shell [data-slot='scroll-area-scrollbar'] {
   top: 0;
-  right: 4px;
+  right: 0;
   bottom: 0;
-  width: 4px;
+  width: 3px;
 }
 
 .ranking-table-shell [data-slot='scroll-area-thumb'] {
@@ -241,17 +390,17 @@
 
 .ranking-table {
   width: 100%;
-  min-width: 560px;
+  min-width: 0;
   table-layout: fixed;
   border-collapse: separate;
   border-spacing: 0;
-  color: var(--Infographic-Main-Dark-Blue, #022456);
-  font-size: 12.5px;
-  line-height: 17px;
+  color: #000000;
+  font-size: 13px;
+  line-height: 16px;
 }
 
 .ranking-table__rank-col {
-  width: 44px;
+  width: 42px;
 }
 
 .ranking-table__region-col {
@@ -259,7 +408,7 @@
 }
 
 .ranking-table__metric-col {
-  width: 136px;
+  width: 120px;
 }
 
 .analytics-dashboard-grid.is-clusters .ranking-table__region-col,
@@ -274,6 +423,14 @@
   width: 136px;
 }
 
+.analytics-dashboard-grid.is-clusters .ranking-table__rank-col {
+  width: 52px;
+}
+
+.analytics-dashboard-grid.is-clusters .ranking-table__metric-col {
+  width: 190px;
+}
+
 .ranking-table th,
 .ranking-table td {
   text-align: left;
@@ -281,34 +438,34 @@
 }
 
 .ranking-table th {
-  padding: 6px 8px;
+  padding: 2px 6px 5px;
 }
 
 .ranking-table td {
-  padding: 8px 8px;
+  padding: 3px 6px;
 }
 
 .ranking-table th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--Infographic-Base-White, #ffffff);
-  color: var(--Infographic-Main-Dark-Blue, #022456);
+  background: rgb(230 230 230 / 0.96);
+  color: #000000;
   font-weight: 800;
 }
 
 .ranking-table th:hover {
-  background: var(--Infographic-Base-White, #ffffff);
+  background: rgb(230 230 230 / 0.96);
 }
 
 .ranking-table th:first-child,
 .ranking-table td:first-child {
-  width: 44px;
-  min-width: 44px;
-  max-width: 44px;
+  width: 42px;
+  min-width: 42px;
+  max-width: 42px;
   padding-right: 0;
   padding-left: 0;
-  color: rgb(2 36 86 / 0.56);
+  color: #000000;
   text-align: center;
 }
 
@@ -321,10 +478,10 @@
   display: inline-flex;
   width: 100%;
   min-width: 0;
-  min-height: 32px;
+  min-height: 24px;
   align-items: center;
-  border-radius: 10px;
-  padding: 6px 10px;
+  border-radius: 0;
+  padding: 0;
   transition: background-color 160ms ease;
 }
 
@@ -332,12 +489,16 @@
   justify-content: center;
 }
 
+.analytics-dashboard-grid.is-clusters .ranking-table th:first-child .ranking-table-header-label {
+  color: transparent;
+}
+
 .ranking-table th:nth-child(n + 3) .ranking-table-header-label {
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .ranking-table th:hover .ranking-table-header-label {
-  background: rgb(232 236 242 / 0.96);
+  background: transparent;
 }
 
 .ranking-table-sort-button {
@@ -345,17 +506,17 @@
   width: 100%;
   min-width: 0;
   align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
+  justify-content: flex-start;
+  gap: 3px;
   border: 0;
   background: transparent;
-  border-radius: 10px;
-  min-height: 32px;
-  padding: 6px 10px;
+  border-radius: 0;
+  min-height: 28px;
+  padding: 0;
   color: inherit;
   font: inherit;
   font-weight: inherit;
-  text-align: right;
+  text-align: left;
   transition: background-color 160ms ease;
   cursor: pointer;
 }
@@ -363,24 +524,24 @@
 .ranking-table th:hover .ranking-table-sort-button,
 .ranking-table-sort-button:hover,
 .ranking-table-sort-button:focus-visible {
-  background: rgb(232 236 242 / 0.96);
+  background: transparent;
 }
 
 .ranking-table-sort-button span {
   flex: 0 1 auto;
   min-width: 0;
-  overflow: visible;
+  overflow: hidden;
   text-overflow: clip;
   overflow-wrap: normal;
-  white-space: nowrap;
+  white-space: normal;
 }
 
 .ranking-table-sort-button svg {
-  width: 15px;
-  min-width: 15px;
-  height: 15px;
-  flex: 0 0 15px;
-  color: rgb(2 36 86 / 0.42);
+  width: 14px;
+  min-width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  color: #abafb3;
   stroke-width: 2.25;
   transform-origin: center;
   transition:
@@ -390,7 +551,7 @@
 
 .ranking-table-sort-button:hover svg,
 .ranking-table-sort-button.is-active svg {
-  color: rgb(2 36 86 / 0.68);
+  color: #abafb3;
 }
 
 .ranking-table-sort-button.is-desc svg {
@@ -402,7 +563,7 @@
 }
 
 .ranking-table tbody tr:hover td {
-  background: rgb(243 243 243 / 0.7);
+  background: rgb(255 255 255 / 0.18);
 }
 
 .ranking-table tbody tr:hover td:first-child {
diff --git a/src/widgets/protected-app-layout/ui/ProtectedAppLayout.vue b/src/widgets/protected-app-layout/ui/ProtectedAppLayout.vue
index 46dcf25..2b70f9f 100644
--- a/src/widgets/protected-app-layout/ui/ProtectedAppLayout.vue
+++ b/src/widgets/protected-app-layout/ui/ProtectedAppLayout.vue
@@ -131,7 +131,7 @@ const handleLogout = async (): Promise<void> => {
   display: grid;
   align-content: start;
   gap: 24px;
-  padding: 36px clamp(24px, 4vw, 80px) 48px;
+  padding: 36px clamp(16px, 1.875vw, 36px) 48px;
 }
 
 @media (max-width: 760px) {