{"id":28,"date":"2026-02-25T15:10:33","date_gmt":"2026-02-25T13:10:33","guid":{"rendered":"https:\/\/documents.am\/sr\/%d0%b0%d1%80%d1%85%d0%b8%d0%b2-%d0%b7%d0%b0%d0%b3%d1%81-%d1%98%d0%b5%d1%80%d0%bc%d0%b5%d0%bd%d0%b8%d1%98%d0%b0\/"},"modified":"2026-07-14T13:05:55","modified_gmt":"2026-07-14T10:05:55","slug":"%d0%b0%d1%80%d1%85%d0%b8%d0%b2-%d0%b7%d0%b0%d0%b3%d1%81-%d1%98%d0%b5%d1%80%d0%bc%d0%b5%d0%bd%d0%b8%d1%98%d0%b0","status":"publish","type":"page","link":"https:\/\/documents.am\/sr\/%d0%b0%d1%80%d1%85%d0%b8%d0%b2-%d0%b7%d0%b0%d0%b3%d1%81-%d1%98%d0%b5%d1%80%d0%bc%d0%b5%d0%bd%d0%b8%d1%98%d0%b0\/","title":{"rendered":"\u0410\u0440\u0445\u0438\u0432 \u0417\u0410\u0413\u0421 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0430"},"content":{"rendered":"<p><!-- \u041a\u043e\u043d\u0442\u0435\u0458\u043d\u0435\u0440 \u0438\u043d\u0444\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0437\u0430 WordPress --><\/p>\n<div id=\"zags-modern-infographic\" class=\"font-sans bg-slate-50 text-slate-800 p-4 sm:p-8 rounded-[2rem] shadow-sm border border-slate-200 relative overflow-hidden max-w-6xl mx-auto my-8\">\n<p>    <!-- \u041f\u043e\u0432\u0435\u0437\u0438\u0432\u0430\u045a\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 --><br \/>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script><\/p>\n<p>    <!-- \u0418\u0417\u041e\u041b\u041e\u0412\u0410\u041d\u0410 \u041f\u041e\u0414\u0415\u0428\u0410\u0412\u0410\u040a\u0410 TAILWIND --><br \/>\n    <script>\n        tailwind.config = {\n            \/\/ \u041d\u0410\u0408\u0412\u0410\u0416\u041d\u0418\u0408\u0415: \u0418\u0441\u043a\u0459\u0443\u0447\u0443\u0458\u0435\u043c\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u043d\u043e \u0440\u0435\u0441\u0435\u0442\u043e\u0432\u0430\u045a\u0435 \u0441\u0442\u0438\u043b\u043e\u0432\u0430 \u043a\u0430\u043a\u043e \u043d\u0435 \u0431\u0438\u0441\u043c\u043e \u043e\u0448\u0442\u0435\u0442\u0438\u043b\u0438 WordPress\n            corePlugins: {\n                preflight: false,\n            },\n            theme: {\n                extend: {\n                    colors: {\n                        modern: {\n                            indigo: '#4f46e5',\n                            teal: '#0d9488',\n                            rose: '#e11d48',\n                            surface: '#ffffff',\n                            bg: '#f8fafc'\n                        }\n                    }\n                }\n            }\n        }\n    <\/script><\/p>\n<style>\n        \/* \u041b\u041e\u041a\u0410\u041b\u041d\u041e \u0420\u0415\u0421\u0415\u0422\u041e\u0412\u0410\u040a\u0415 \u0421\u0422\u0418\u041b\u041e\u0412\u0410 \u0421\u0410\u041c\u041e \u0417\u0410 \u041e\u0412\u0410\u0408 \u0411\u041b\u041e\u041a *\/\n        #zags-modern-infographic,\n        #zags-modern-infographic *,\n        #zags-modern-infographic ::before,\n        #zags-modern-infographic ::after {\n            box-sizing: border-box;\n            border-width: 0;\n            border-style: solid;\n            border-color: #e2e8f0; \/* \u041e\u0441\u043d\u043e\u0432\u043d\u0430 \u0431\u043e\u0458\u0430 \u043e\u043a\u0432\u0438\u0440\u0430 Tailwind *\/\n        }<\/p>\n<p>        #zags-modern-infographic {\n            font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            line-height: 1.5;\n            -webkit-text-size-adjust: 100%;\n        }<\/p>\n<p>        \/* \u0417\u0430\u0448\u0442\u0438\u0442\u0430 \u043e\u0434 \u0441\u0442\u0438\u043b\u043e\u0432\u0430 \u0442\u0435\u043c\u0435 WordPress *\/\n        #zags-modern-infographic h2, \n        #zags-modern-infographic h3, \n        #zags-modern-infographic h4,\n        #zags-modern-infographic p {\n            margin: 0; \/* \u0420\u0435\u0441\u0435\u0442\u0443\u0458\u0435\u043c\u043e \u0441\u043f\u043e\u0459\u0430\u0448\u045a\u0435 \u043c\u0430\u0440\u0433\u0438\u043d\u0435 \u0442\u0435\u043c\u0435, \u043a\u043e\u0440\u0438\u0441\u0442\u0438\u043c\u043e \u043a\u043b\u0430\u0441\u0435 Tailwind (mb-4 \u0438\u0442\u0434.) *\/\n            padding: 0;\n            line-height: 1.3;\n        }<\/p>\n<p>        #zags-modern-infographic p {\n            line-height: 1.6;\n        }<\/p>\n<p>        \/* \u041e\u0431\u0430\u0432\u0435\u0437\u043d\u0438 \u0441\u0442\u0438\u043b\u043e\u0432\u0438 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0458\u043d\u0435\u0440\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043d\u0430 *\/\n        .wp-chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 600px;\n            margin: 0 auto;\n            height: 300px;\n            max-height: 400px;\n        }<\/p>\n<p>        @media (min-width: 768px) {\n            .wp-chart-container { height: 380px; }\n        }<\/p>\n<p>        \/* \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0430 \u043f\u043e\u0437\u0430\u0434\u0438\u043d\u0430 *\/\n        .glass-card {\n            background: rgba(255, 255, 255, 0.8);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(255, 255, 255, 0.5);\n        }<\/p>\n<p>        \/* \u041b\u0438\u043d\u0438\u0458\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0441\u043a\u0435 \u043b\u0438\u043d\u0438\u0458\u0435 *\/\n        .timeline-line::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 50%;\n            width: 2px;\n            background: #e2e8f0;\n            transform: translateX(-50%);\n            z-index: 0;\n        }\n        @media (max-width: 768px) {\n            .timeline-line::before { left: 24px; transform: none; }\n        }\n    <\/style>\n<p>    <!-- \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0438 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0438 \u043f\u043e\u0437\u0430\u0434\u0438\u043d\u0435 --><\/p>\n<div class=\"absolute top-0 left-0 w-full h-96 bg-gradient-to-br from-indigo-50 to-teal-50 -z-10 rounded-t-[2rem]\"><\/div>\n<div class=\"absolute top-[-10%] right-[-5%] w-96 h-96 bg-modern-teal opacity-5 rounded-full blur-3xl -z-10\"><\/div>\n<div class=\"absolute bottom-[-10%] left-[-5%] w-96 h-96 bg-modern-indigo opacity-5 rounded-full blur-3xl -z-10\"><\/div>\n<p>    <!-- \u0423\u0412\u041e\u0414 --><\/p>\n<div class=\"mb-12 text-center md:text-left\"><span class=\"inline-block py-1 px-3 rounded-full bg-indigo-100 text-modern-indigo text-sm font-semibold tracking-wide mb-4\">\u0410\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u043e\u0434\u0430\u0442\u0430\u043a\u0430 \u0414\u0440\u0436\u0430\u0432\u043d\u0438\u0445 \u0443\u0441\u043b\u0443\u0433\u0430<\/span><\/p>\n<h2 class=\"text-3xl md:text-5xl font-extrabold text-slate-900 mb-6 tracking-tight\">\u0414\u0438\u0433\u0438\u0442\u0430\u043b\u043d\u0438 \u0410\u0440\u0445\u0438\u0432 \u041c\u0430\u0442\u0438\u0447\u043d\u0435 \u0441\u043b\u0443\u0436\u0431\u0435 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0435:<br \/><span class=\"text-modern-indigo\">\u041c\u0438\u0442 \u0438\u043b\u0438 \u0421\u0442\u0432\u0430\u0440\u043d\u043e\u0441\u0442?<\/span><\/h2>\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-center mt-8\">\n<div class=\"lg:col-span-8\">\n<p class=\"text-lg text-slate-600 mb-4\">\n                    <strong>\u041f\u043e\u0441\u0442\u043e\u0458\u0438 \u043b\u0438 \u0458\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u0430 \u0431\u0430\u0437\u0430? \u0418 \u0434\u0430, \u0438 \u043d\u0435.<\/strong> \u0423 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0438 \u043f\u043e\u0441\u0442\u043e\u0458\u0438 \u0408\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u0438 \u0435\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0441\u043a\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0430\u0440, \u0430\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u0430\u0434\u0440\u0436\u0438 100% \u0438\u0441\u0442\u043e\u0440\u0438\u0458\u0441\u043a\u0438\u0445 \u043f\u043e\u0434\u0430\u0442\u0430\u043a\u0430. \u0410\u043a\u043e \u0458\u0435 \u0432\u0430\u0448 \u0437\u0430\u043f\u0438\u0441 \u043d\u043e\u0432 (\u043f\u043e\u0441\u043b\u0435 2014. \u0433.), \u043f\u0440\u043e\u043d\u0430\u045b\u0438 \u045b\u0435 \u0433\u0430 \u0437\u0430 \u043c\u0438\u043d\u0443\u0442.\n                <\/p>\n<p class=\"text-lg text-slate-600\">\n                    \u041c\u0435\u0452\u0443\u0442\u0438\u043c, \u043c\u0438\u043b\u0438\u043e\u043d\u0438 \u0441\u043e\u0432\u0458\u0435\u0442\u0441\u043a\u0438\u0445 \u0437\u0430\u043f\u0438\u0441\u0430 \u0447\u0443\u0432\u0430\u0458\u0443 \u0441\u0435 <strong>\u0441\u0430\u043c\u043e \u043d\u0430 \u043f\u0430\u043f\u0438\u0440\u0443<\/strong> \u0443 \u0440\u0435\u0433\u0438\u043e\u043d\u0430\u043b\u043d\u0438\u043c \u0430\u0440\u0445\u0438\u0432\u0438\u043c\u0430. \u0411\u0435\u0437 \u043d\u0430\u0432\u043e\u0452\u0435\u045a\u0430 \u0440\u0435\u0458\u043e\u043d\u0430, \u043e\u043f\u0435\u0440\u0430\u0442\u0435\u0440 \u0443 \u0408\u0435\u0440\u0435\u0432\u0430\u043d\u0443 \u0458\u0435\u0434\u043d\u043e\u0441\u0442\u0430\u0432\u043d\u043e \u043d\u0435 \u0437\u043d\u0430 \u0433\u0434\u0435 \u0434\u0430 \u0442\u0440\u0430\u0436\u0438 \u0444\u0438\u0437\u0438\u0447\u043a\u0443 \u043a\u045a\u0438\u0433\u0443.\n                <\/p>\n<\/p><\/div>\n<div class=\"lg:col-span-4 bg-white rounded-3xl p-6 shadow-xl shadow-indigo-100\/50 border border-indigo-50 text-center transform transition hover:-translate-y-1\">\n                <span class=\"block text-5xl font-black text-modern-rose mb-2 tracking-tighter\">~1921-2014<\/span><br \/>\n                <span class=\"text-xs uppercase tracking-widest text-slate-400 font-bold\">\u0413\u043e\u0434\u0438\u043d\u0435 &#8222;\u041f\u0430\u043f\u0438\u0440\u043d\u043e\u0433 \u0440\u0438\u0437\u0438\u043a\u0430&#8220;<\/span><\/p>\n<div class=\"mt-4 w-12 border-t-4 border-modern-rose mx-auto rounded-full\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>    <!-- \u041e\u0414\u0415\u0409\u0410\u041a 1: \u0421\u0422\u0410\u0422\u0418\u0421\u0422\u0418\u041a\u0410 (Donut Chart) --><\/p>\n<div class=\"mb-16\">\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n<div class=\"glass-card rounded-3xl shadow-lg p-6 md:p-8\">\n<h3 class=\"text-xl font-bold text-slate-800 mb-6 text-center\">\u0413\u0434\u0435 \u0441\u0435 \u043d\u0430\u043b\u0430\u0437\u0435 \u0432\u0430\u0448\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438?<\/h3>\n<div class=\"wp-chart-container\">\n                    <canvas id=\"wpDigitizationChart\"><\/canvas>\n                <\/div>\n<\/p><\/div>\n<div class=\"flex flex-col justify-center space-y-6\">\n<h3 class=\"text-2xl font-bold text-slate-800\">\u0414\u0438\u0433\u0438\u0442\u0430\u043b\u043d\u0438 \u0458\u0430\u0437<\/h3>\n<p class=\"text-slate-600 mb-4\">\u0421\u0438\u0441\u0442\u0435\u043c \u0458\u0435 \u0445\u0438\u0431\u0440\u0438\u0434\u0430\u043d. \u0414\u0435\u043e \u043f\u043e\u0434\u0430\u0442\u0430\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u043d \u0458\u0435 &#8222;\u0458\u0435\u0434\u043d\u0438\u043c \u043a\u043b\u0438\u043a\u043e\u043c&#8220;, \u0434\u0440\u0443\u0433\u0438 \u0437\u0430\u0445\u0442\u0435\u0432\u0430 \u0444\u0438\u0437\u0438\u0447\u043a\u0438 \u0437\u0430\u0445\u0442\u0435\u0432 \u0443 \u043e\u0434\u0440\u0435\u0452\u0435\u043d\u0438 \u0433\u0440\u0430\u0434.<\/p>\n<div class=\"space-y-4\">\n<div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-4\">\n<div class=\"w-4 h-4 rounded-full bg-modern-teal mt-1 flex-shrink-0\"><\/div>\n<div>\n<h4 class=\"font-bold text-slate-800 text-sm md:text-base mb-1\">\u041f\u043e\u0442\u043f\u0443\u043d\u043e \u0443 \u0414\u0438\u0433\u0438\u0442\u0430\u043b\u0443 (\u224865%)<\/h4>\n<p class=\"text-sm text-slate-500\">\u041d\u043e\u0432\u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0438 \u0432\u0435\u045b \u0434\u0438\u0433\u0438\u0442\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0458\u0441\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438. \u0418\u0437\u0434\u0430\u0458\u0443 \u0441\u0435 \u0443 \u0431\u0438\u043b\u043e \u043a\u043e\u0458\u043e\u0458 \u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0458 \u0441\u043b\u0443\u0436\u0431\u0438 \u0443 \u0437\u0435\u043c\u0459\u0438.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-4\">\n<div class=\"w-4 h-4 rounded-full bg-modern-rose mt-1 flex-shrink-0\"><\/div>\n<div>\n<h4 class=\"font-bold text-slate-800 text-sm md:text-base mb-1\">\u0421\u0430\u043c\u043e \u041f\u0430\u043f\u0438\u0440 (\u224835%)<\/h4>\n<p class=\"text-sm text-slate-500\">\u0410\u0440\u0445\u0438\u0432\u0438 \u0443 \u043b\u043e\u043a\u0430\u043b\u043d\u0438\u043c \u0441\u043a\u043b\u0430\u0434\u0438\u0448\u0442\u0438\u043c\u0430. <strong class=\"text-modern-rose font-semibold\">\u0417\u0430\u0445\u0442\u0435\u0432\u0430\u0458\u0443 \u043d\u0430\u0432\u043e\u0452\u0435\u045a\u0435 \u0442\u0430\u0447\u043d\u043e\u0433 \u043c\u0430\u0442\u0438\u0447\u043d\u043e\u0433 \u0443\u0440\u0435\u0434\u0430<\/strong> \u0437\u0430 \u0437\u0430\u0445\u0442\u0435\u0432 \u0437\u0430 \u0434\u0438\u0433\u0438\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0458\u0443.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>    <!-- \u041e\u0414\u0415\u0409\u0410\u041a 2: \u041f\u0420\u041e\u0426\u0415\u0421 (\u0412\u0440\u0435\u043c\u0435\u043d\u0441\u043a\u0430 \u043b\u0438\u043d\u0438\u0458\u0430) --><\/p>\n<div class=\"mb-16 bg-white rounded-3xl shadow-xl shadow-slate-200\/40 p-6 md:p-10 border border-slate-100\">\n<div class=\"text-center mb-10\">\n<h3 class=\"text-2xl md:text-3xl font-bold text-slate-800 mb-2\">\u0417\u0430\u0448\u0442\u043e \u043f\u0438\u0442\u0430\u0458\u0443 \u201e\u041a\u043e\u0458\u0438 \u0420\u0435\u0458\u043e\u043d?\u201c<\/h3>\n<p class=\"text-slate-500\">\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u0430\u043c \u043e\u0431\u0440\u0430\u0434\u0435 \u0437\u0430\u0445\u0442\u0435\u0432\u0430 \u0437\u0430 \u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0442 \u0443 \u0408\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043e\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0443<\/p>\n<\/p><\/div>\n<div class=\"relative timeline-line max-w-3xl mx-auto py-4\">\n<div class=\"relative z-10 flex flex-col md:flex-row items-center justify-between mb-12\">\n<div class=\"md:w-5\/12 text-right pr-0 md:pr-8 mb-4 md:mb-0 ml-12 md:ml-0 order-2 md:order-1\">\n<h4 class=\"text-lg font-bold text-slate-800 mb-1\">\u0415\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0441\u043a\u0430 \u043f\u0440\u0435\u0442\u0440\u0430\u0433\u0430<\/h4>\n<p class=\"text-sm text-slate-500\">\u041e\u043f\u0435\u0440\u0430\u0442\u0435\u0440 \u0443\u043d\u043e\u0441\u0438 \u0432\u0430\u0448\u0435 \u0438\u043c\u0435, \u043f\u0440\u0435\u0437\u0438\u043c\u0435 \u0438 \u0434\u0430\u0442\u0443\u043c \u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u043d\u0443 \u043f\u0440\u0435\u0442\u0440\u0430\u0433\u0443 \u043f\u043e \u0437\u0435\u043c\u0459\u0438.<\/p>\n<\/p><\/div>\n<div class=\"w-12 h-12 bg-white rounded-full border-4 border-indigo-100 flex items-center justify-center text-xl shadow-sm order-1 md:order-2 absolute md:relative left-0 md:left-auto top-0 md:top-auto\"><\/div>\n<div class=\"md:w-5\/12 pl-0 md:pl-8 order-3\"><\/div>\n<\/p><\/div>\n<div class=\"relative z-10 flex flex-col md:flex-row items-center justify-between mb-12\">\n<div class=\"md:w-5\/12 text-right pr-0 md:pr-8 mb-4 md:mb-0 ml-12 md:ml-0 order-2 md:order-1 hidden md:block\"><\/div>\n<div class=\"w-12 h-12 bg-indigo-500 text-white rounded-full flex items-center justify-center text-xl shadow-lg shadow-indigo-200 order-1 md:order-2 absolute md:relative left-0 md:left-auto top-0 md:top-auto z-20 font-bold\">?<\/div>\n<div class=\"md:w-5\/12 pl-0 md:pl-8 order-3 ml-12 md:ml-0 w-full\">\n<div class=\"bg-teal-50 border border-teal-100 p-4 rounded-2xl mb-4 relative overflow-hidden\">\n<div class=\"absolute left-0 top-0 bottom-0 w-1 bg-modern-teal\"><\/div>\n<p class=\"font-bold text-teal-800 text-sm mb-1\">\u2705 \u041f\u0440\u043e\u043d\u0430\u0452\u0435\u043d\u043e \u0443 \u0431\u0430\u0437\u0438<\/p>\n<p class=\"text-xs text-teal-600\">\u0422\u0440\u0435\u043d\u0443\u0442\u043d\u043e \u0448\u0442\u0430\u043c\u043f\u0430\u045a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0445\u0435\u0440\u0431\u0430\u043b\u043d\u043e\u043c \u043e\u0431\u0440\u0430\u0441\u0446\u0443.<\/p>\n<\/p><\/div>\n<div class=\"bg-rose-50 border border-rose-100 p-4 rounded-2xl relative overflow-hidden shadow-sm\">\n<div class=\"absolute left-0 top-0 bottom-0 w-1 bg-modern-rose\"><\/div>\n<p class=\"font-bold text-rose-800 text-sm mb-1\">\u274c \u041d\u0438\u0458\u0435 \u043f\u0440\u043e\u043d\u0430\u0452\u0435\u043d\u043e<\/p>\n<p class=\"text-xs text-rose-600\">\u041e\u043f\u0435\u0440\u0430\u0442\u0435\u0440 \u0432\u0438\u0434\u0438 \u043f\u0440\u0430\u0437\u0430\u043d \u0435\u043a\u0440\u0430\u043d. \u0417\u0430\u043f\u0438\u0441 \u0441\u0435 \u043d\u0430\u043b\u0430\u0437\u0438 \u0443 \u043f\u0430\u043f\u0438\u0440\u043d\u043e\u043c \u043e\u0431\u043b\u0438\u043a\u0443 \u043d\u0435\u0433\u0434\u0435 \u0443 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0438.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"relative z-10 flex flex-col md:flex-row items-center justify-between\">\n<div class=\"md:w-5\/12 text-right pr-0 md:pr-8 mb-4 md:mb-0 ml-12 md:ml-0 order-2 md:order-1 w-full\">\n<div class=\"bg-white border-2 border-indigo-100 p-5 rounded-2xl shadow-lg\">\n<p class=\"font-bold text-modern-indigo text-sm md:text-base mb-2\">\u0420\u0443\u0447\u043d\u0438 \u0437\u0430\u0445\u0442\u0435\u0432 \u0443 \u0410\u0440\u0445\u0438\u0432<\/p>\n<p class=\"text-xs text-slate-500\">\u0423\u043f\u0440\u0430\u0432\u043e \u043e\u0432\u0434\u0435 <strong>\u0442\u0440\u0435\u0431\u0430 \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043c\u0430\u0442\u0438\u0447\u043d\u0443 \u0441\u043b\u0443\u0436\u0431\u0443<\/strong>. \u0421\u0438\u0441\u0442\u0435\u043c \u045b\u0435 \u043f\u043e\u0441\u043b\u0430\u0442\u0438 \u0435\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0441\u043a\u0438 \u0437\u0430\u0445\u0442\u0435\u0432 \u0441\u043b\u0443\u0436\u0431\u0435\u043d\u0438\u0446\u0438\u043c\u0430 \u0443 \u043e\u0432\u0430\u0458 \u0433\u0440\u0430\u0434, \u043e\u043d\u0438 \u045b\u0435 \u043e\u0442\u0438\u045b\u0438 \u0443 \u043f\u043e\u0434\u0440\u0443\u043c, \u043f\u0440\u043e\u043d\u0430\u045b\u0438 \u043a\u045a\u0438\u0433\u0443, \u0441\u043a\u0435\u043d\u0438\u0440\u0430\u0442\u0438 \u0437\u0430\u043f\u0438\u0441 \u0438 \u0443\u0447\u0438\u0442\u0430\u0442\u0438 \u0433\u0430 \u0443 \u0431\u0430\u0437\u0443 (\u0442\u0440\u0430\u0458\u0435 2-15 \u0434\u0430\u043d\u0430).<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"w-12 h-12 bg-white rounded-full border-4 border-indigo-100 flex items-center justify-center text-xl shadow-sm order-1 md:order-2 absolute md:relative left-0 md:left-auto top-0 md:top-auto z-20\"><\/div>\n<div class=\"md:w-5\/12 pl-0 md:pl-8 order-3\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>    <!-- \u041e\u0414\u0415\u0409\u0410\u041a 3: \u0413\u0415\u041e\u0413\u0420\u0410\u0424\u0418\u0408\u0410 (Bar Chart) & \u0414\u0418\u041d\u0410\u041c\u0418\u041a\u0410 (Line Chart) --><\/p>\n<div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8\">\n<div class=\"glass-card rounded-3xl p-6 md:p-8 shadow-sm\">\n<h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u0413\u0434\u0435 \u043b\u0435\u0436\u0435 \u043a\u045a\u0438\u0433\u0435?<\/h3>\n<p class=\"text-sm text-slate-500 mb-6\">\u0420\u0430\u0441\u043f\u043e\u0434\u0435\u043b\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u0458\u0441\u043a\u0438\u0445 \u043f\u0430\u043f\u0438\u0440\u043d\u0438\u0445 \u0430\u0440\u0445\u0438\u0432\u0430 \u043f\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0438\u043c\u0430.<\/p>\n<div class=\"wp-chart-container\">\n                <canvas id=\"wpRegionChart\"><\/canvas>\n            <\/div>\n<div class=\"mt-6 bg-indigo-50 p-4 rounded-xl text-sm text-indigo-900 border border-indigo-100\">\n                 <strong class=\"font-semibold\">\u0416\u0438\u0432\u043e\u0442\u043d\u0438 \u0441\u0430\u0432\u0435\u0442:<\/strong> \u0410\u043a\u043e \u0441\u0435 \u043d\u0435 \u0441\u0435\u045b\u0430\u0442\u0435 \u0442\u0430\u0447\u043d\u0435 \u043c\u0430\u0442\u0438\u0447\u043d\u0435 \u0441\u043b\u0443\u0436\u0431\u0435, \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u0431\u0430\u0440 \u0433\u0440\u0430\u0434 \u0438\u043b\u0438 \u043e\u0431\u043b\u0430\u0441\u0442 \u043f\u0440\u0435\u0431\u0438\u0432\u0430\u043b\u0438\u0448\u0442\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u0459\u0430 \u0443 \u0442\u043e \u0432\u0440\u0435\u043c\u0435.\n            <\/div>\n<\/p><\/div>\n<div class=\"glass-card rounded-3xl p-6 md:p-8 shadow-sm\">\n<h3 class=\"text-xl font-bold text-slate-800 mb-2\">\u0422\u0435\u043c\u043f\u043e \u0434\u0438\u0433\u0438\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0458\u0435<\/h3>\n<p class=\"text-sm text-slate-500 mb-6\">\u041f\u043e\u0440\u0430\u0441\u0442 \u0448\u0430\u043d\u0441\u0438 \u0434\u0430 \u0441\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043e\u0434\u043c\u0430\u0445 \u043f\u0440\u043e\u043d\u0430\u0452\u0435 \u0443 \u0431\u0430\u0437\u0438.<\/p>\n<div class=\"wp-chart-container\">\n                <canvas id=\"wpTimelineChart\"><\/canvas>\n            <\/div>\n<p class=\"text-xs text-slate-400 mt-4 text-center\">\u041f\u0440\u043e\u0433\u043d\u043e\u0437\u043d\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u0459\u0438 \u0440\u0430\u0437\u0432\u043e\u0458\u0430 \u0458\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043e\u0433 \u0441\u0438\u0441\u0442\u0435\u043c\u0430.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p>    <!-- \u0421\u043a\u0440\u0438\u043f\u0442\u0435 \u0437\u0430 \u0438\u043d\u0438\u0446\u0438\u0458\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0458\u0443 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u043d\u0430 --><br \/>\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            function wrapLabelWp(label) {\n                const MAX_LENGTH = 16;\n                if (label.length <= MAX_LENGTH) return label;\n                const words = label.split(' ');\n                const lines = [];\n                let currentLine = words[0];\n                for (let i = 1; i < words.length; i++) {\n                    if ((currentLine + \" \" + words[i]).length <= MAX_LENGTH) {\n                        currentLine += \" \" + words[i];\n                    } else {\n                        lines.push(currentLine);\n                        currentLine = words[i];\n                    }\n                }\n                lines.push(currentLine);\n                return lines;\n            }\n\n            const commonOptionsWp = {\n                responsive: true,\n                maintainAspectRatio: false,\n                plugins: {\n                    tooltip: {\n                        backgroundColor: 'rgba(15, 23, 42, 0.9)',\n                        titleFont: { size: 14, family: 'system-ui' },\n                        bodyFont: { size: 13, family: 'system-ui' },\n                        padding: 12,\n                        cornerRadius: 12,\n                        callbacks: {\n                            title: function(tooltipItems) {\n                                const item = tooltipItems[0];\n                                let label = item.chart.data.labels[item.dataIndex];\n                                return Array.isArray(label) ? label.join(' ') : label;\n                            }\n                        }\n                    },\n                    legend: {labels: { font: { family: 'system-ui', size: 12 }, color: '#64748b' }\n                    }\n                }\n            };\n\n            const ctxDig = document.getElementById('wpDigitizationChart').getContext('2d');\n            new Chart(ctxDig, {\n                type: 'doughnut',\n                data: {\n                    labels: [\"\u0423 \u0434\u0438\u0433\u0438\u0442\u0430\u043b\u043d\u043e\u0458 \u0431\u0430\u0437\u0438\", \"\u0421\u0430\u043c\u043e \u0443 \u0430\u0440\u0445\u0438\u0432\u0438 \u043c\u0430\u0442\u0438\u0447\u043d\u0435 \u0441\u043b\u0443\u0436\u0431\u0435\"].map(wrapLabelWp),\n                    datasets: [{\n                        data: [65, 35],\n                        backgroundColor: ['#0d9488', '#e11d48'],\n                        borderWidth: 0,\n                        hoverOffset: 8\n                    }]\n                },\n                options: {\n                    ...commonOptionsWp,\n                    cutout: '70%',\n                    plugins: { ...commonOptionsWp.plugins, legend: { display: false } }\n                }\n            });\n\n            const ctxReg = document.getElementById('wpRegionChart').getContext('2d');\n            new Chart(ctxReg, {\n                type: 'bar',\n                data: {\n                    labels: [\"\u0408\u0435\u0440\u0435\u0432\u0430\u043d\", \"\u0428\u0438\u0440\u0430\u043a (\u0413\u0458\u0443\u043c\u0440\u0438)\", \"\u041b\u043e\u0440\u0438 (\u0412\u0430\u043d\u0430\u0434\u0437\u043e\u0440)\", \"\u041a\u043e\u0442\u0430\u0458\u043a\", \"\u0410\u0440\u043c\u0430\u0432\u0438\u0440\"].map(wrapLabelWp),\n                    datasets: [{\n                        label: '\u041e\u0431\u0438\u043c \u043f\u0430\u043f\u0438\u0440\u043d\u0438\u0445 \u0430\u0440\u0445\u0438\u0432\u0430',\n                        data: [45, 25, 20, 18, 15],\n                        backgroundColor: '#4f46e5',\n                        borderRadius: 6,\n                        barThickness: 'flex',\n                        maxBarThickness: 30\n                    }]\n                },\n                options: {\n                    ...commonOptionsWp,\n                    indexAxis: 'y',\n                    plugins: { ...commonOptionsWp.plugins, legend: { display: false } },\n                    scales: {\n                        x: { display: false, grid: { display: false } },\n                        y: { grid: { display: false }, ticks: { font: { family: 'system-ui', weight: '500' }, color: '#334155' } }\n                    }\n                }\n            });\n\n            const ctxTime = document.getElementById('wpTimelineChart').getContext('2d');\n            let gradient = ctxTime.createLinearGradient(0, 0, 0, 400);\n            gradient.addColorStop(0, 'rgba(13, 148, 136, 0.5)');\n            gradient.addColorStop(1, 'rgba(13, 148, 136, 0.0)');\n\n            new Chart(ctxTime, {\n                type: 'line',\n                data: {\n                    labels: ['2005', '2010', '2015', '2020', '2025'],\n                    datasets: [{\n                        label: '\u041d\u0438\u0432\u043e \u043f\u043e\u043a\u0440\u0438\u0432\u0435\u043d\u043e\u0441\u0442\u0438 \u0431\u0430\u0437\u0435',\n                        data: [10, 25, 65, 85, 95],\n                        borderColor: '#0d9488',\n                        backgroundColor: gradient,\n                        borderWidth: 3,\n                        fill: true,\n                        tension: 0.4,\n                        pointBackgroundColor: '#ffffff',\n                        pointBorderColor: '#0d9488',\n                        pointBorderWidth: 2,\n                        pointRadius: 5,\n                        pointHoverRadius: 7\n                    }]\n                },\n                options: {\n                    ...commonOptionsWp,\n                    plugins: { ...commonOptionsWp.plugins, legend: { display: false } },\n                    scales: {\n                        x: { grid: { display: false, drawBorder: false } },\n                        y: { \n                            beginAtZero: true, \n                            max: 100,\n                            border: { display: false },\n                            grid: { color: '#f1f5f9', drawBorder: false },\n                            ticks: { callback: function(value) { return value + \"%\" } }\n                        }\n                    }\n                }\n            });\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0410\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u043e\u0434\u0430\u0442\u0430\u043a\u0430 \u0414\u0440\u0436\u0430\u0432\u043d\u0438\u0445 \u0443\u0441\u043b\u0443\u0433\u0430 \u0414\u0438\u0433\u0438\u0442\u0430\u043b\u043d\u0438 \u0410\u0440\u0445\u0438\u0432 \u041c\u0430\u0442\u0438\u0447\u043d\u0435 \u0441\u043b\u0443\u0436\u0431\u0435 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0435:\u041c\u0438\u0442 \u0438\u043b\u0438 \u0421\u0442\u0432\u0430\u0440\u043d\u043e\u0441\u0442? \u041f\u043e\u0441\u0442\u043e\u0458\u0438 \u043b\u0438 \u0458\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u0430 \u0431\u0430\u0437\u0430? \u0418 \u0434\u0430, \u0438 \u043d\u0435. \u0423 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0438 \u043f\u043e\u0441\u0442\u043e\u0458\u0438 \u0408\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u0438 \u0435\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0441\u043a\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0430\u0440, \u0430\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u0430\u0434\u0440\u0436\u0438 100% \u0438\u0441\u0442\u043e\u0440\u0438\u0458\u0441\u043a\u0438\u0445 \u043f\u043e\u0434\u0430\u0442\u0430\u043a\u0430. \u0410\u043a\u043e \u0458\u0435 \u0432\u0430\u0448 \u0437\u0430\u043f\u0438\u0441 \u043d\u043e\u0432 (\u043f\u043e\u0441\u043b\u0435 2014. \u0433.), \u043f\u0440\u043e\u043d\u0430\u045b\u0438 \u045b\u0435 \u0433\u0430 \u0437\u0430 \u043c\u0438\u043d\u0443\u0442. \u041c\u0435\u0452\u0443\u0442\u0438\u043c, \u043c\u0438\u043b\u0438\u043e\u043d\u0438 \u0441\u043e\u0432\u0458\u0435\u0442\u0441\u043a\u0438\u0445 \u0437\u0430\u043f\u0438\u0441\u0430 \u0447\u0443\u0432\u0430\u0458\u0443 \u0441\u0435 \u0441\u0430\u043c\u043e \u043d\u0430 \u043f\u0430\u043f\u0438\u0440\u0443 \u0443 &#8230; <a title=\"\u0410\u0440\u0445\u0438\u0432 \u0417\u0410\u0413\u0421 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0430\" class=\"read-more\" href=\"https:\/\/documents.am\/sr\/%d0%b0%d1%80%d1%85%d0%b8%d0%b2-%d0%b7%d0%b0%d0%b3%d1%81-%d1%98%d0%b5%d1%80%d0%bc%d0%b5%d0%bd%d0%b8%d1%98%d0%b0\/\" aria-label=\"Read more about \u0410\u0440\u0445\u0438\u0432 \u0417\u0410\u0413\u0421 \u0408\u0435\u0440\u043c\u0435\u043d\u0438\u0458\u0430\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"yst_prominent_words":[],"class_list":["post-28","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/pages\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":1,"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/pages\/28\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/documents.am\/sr\/wp-json\/wp\/v2\/yst_prominent_words?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}