\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 White Paper: hobbi.st<\/title>\n \n \n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* General Styles *\/\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #F9FAFB; \/* gray-50 *\/\n color: #1F2937; \/* gray-800 *\/\n }\n .container {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n }\n @media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n }\n @media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n }\n @media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n }\n \n .section-title {\n font-size: 1.875rem; \/* text-3xl *\/\n line-height: 2.25rem;\n font-weight: 700; \/* font-bold *\/\n color: #1F2937; \/* gray-800 *\/\n margin-bottom: 1rem;\n text-align: center;\n }\n @media (min-width: 768px) {\n .section-title {\n font-size: 2.25rem; \/* md:text-4xl *\/\n line-height: 2.5rem;\n }\n }\n\n .section-subtitle {\n font-size: 1.125rem; \/* text-lg *\/\n line-height: 1.75rem;\n color: #4B5563; \/* gray-600 *\/\n margin-bottom: 3rem;\n text-align: center;\n max-width: 48rem;\n margin-left: auto;\n margin-right: auto;\n }\n @media (min-width: 768px) {\n .section-subtitle {\n font-size: 1.25rem; \/* md:text-xl *\/\n line-height: 1.75rem;\n }\n }\n .card {\n background-color: #FFFFFF;\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.3s ease-in-out;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .nav-link {\n padding: 0.5rem 1rem;\n color: #4B5563;\n transition: all 0.3s ease-in-out;\n border-radius: 0.5rem;\n }\n .nav-link:hover {\n color: #0D9488; \/* teal-600 *\/\n background-color: #F0FDFA; \/* teal-50 *\/\n }\n .nav-link.active {\n font-weight: 600; \/* font-semibold *\/\n color: #0F766E; \/* teal-700 *\/\n background-color: #CCFBF1; \/* teal-100 *\/\n }\n .pill-button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem; \/* text-sm *\/\n line-height: 1.25rem;\n font-weight: 500;\n border-radius: 9999px;\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n border: 2px solid transparent;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n }\n .pill-button.active {\n background-color: #0D9488; \/* teal-600 *\/\n color: #FFFFFF;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-color: #0D9488;\n }\n .pill-button:not(.active) {\n background-color: #FFFFFF;\n color: #374151; \/* gray-700 *\/\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n }\n .pill-button:not(.active):hover {\n background-color: #F3F4F6;\n border-color: #99F6E4; \/* teal-300 *\/\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n \n \/* Specific Section Styles *\/\n .hero-section {\n padding-top: 5rem;\n padding-bottom: 5rem;\n background-color: #fff;\n }\n @media (min-width: 768px) {\n .hero-section {\n padding-top: 8rem;\n padding-bottom: 8rem;\n }\n }\n \n .engine-tabs-container {\n display: flex;\n border-radius: 1rem;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n overflow: hidden;\n background-color: #E5E7EB; \/* gray-100 *\/\n height: 400px;\n }\n .engine-tabs-nav-panel {\n width: 33.333333%;\n background-color: #fff;\n padding: 1rem;\n flex-shrink: 0;\n overflow-y: auto;\n }\n .engine-content-panel {\n flex: 1 1 0%;\n padding: 1rem;\n overflow-y: auto;\n }\n @media (min-width: 768px) {\n .engine-content-panel {\n padding: 2rem;\n }\n }\n .tab-link {\n display: flex;\n align-items: center;\n padding: 0.75rem;\n border-radius: 0.5rem;\n font-weight: 500;\n color: #4B5563; \/* gray-700 *\/\n transition: all 0.2s ease-in-out;\n border: 2px solid transparent;\n justify-content: center;\n text-align: center;\n }\n .tab-link.active {\n background-color: #F0FDFA; \/* teal-50 *\/\n color: #0D9488; \/* teal-600 *\/\n font-weight: 600;\n border-color: #CCFBF1; \/* teal-100 *\/\n }\n .tab-link:hover {\n background-color: #F3F4F6;\n }\n @media (max-width: 767px) {\n .tab-link {\n font-size: 0.75rem;\n padding: 0.5rem;\n }\n .tab-link span {\n font-size: 1rem;\n margin-right: 0.25rem;\n }\n }\n \n .tokenization-flow-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n }\n @media (min-width: 768px) {\n .tokenization-flow-container {\n flex-direction: row;\n gap: 0;\n margin-top: 0;\n margin-bottom: 0;\n gap: 1rem;\n }\n }\n .token-step {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n cursor: pointer;\n }\n .token-step .step-circle {\n width: 3rem;\n height: 3rem;\n font-size: 1.125rem;\n font-weight: 700;\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 4px;\n transition: all 0.3s ease-in-out;\n }\n .token-step .step-arrow {\n height: 0.25rem;\n width: 100%;\n background-color: #E5E7EB;\n border-radius: 9999px;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n }\n @media (min-width: 768px) {\n .token-step .step-arrow {\n width: 4rem;\n height: 0.25rem;\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n \n .tokenization-details-area {\n min-height: 90px;\n max-height: 150px;\n overflow-y: auto;\n }\n\n \/* Chart-like visualizations with pure CSS *\/\n .chart-container {\n width: 100%;\n display: flex;\n align-items: flex-end;\n justify-content: space-around;\n height: 250px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n padding-top: 2rem;\n padding-bottom: 2rem;\n border-bottom: 2px solid #E5E7EB;\n }\n \n .dao-chart-container {\n width: 100%;\n max-width: 700px;\n margin: auto;\n }\n .dao-bar-chart {\n display: flex;\n height: 30px;\n margin-bottom: 1rem;\n border-radius: 9999px;\n overflow: hidden;\n box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);\n }\n .dao-segment {\n transition: width 0.3s ease-in-out;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n }\n .legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1rem;\n }\n .legend-item {\n display: flex;\n align-items: center;\n font-size: 0.875rem;\n color: #4B5563;\n }\n .legend-color {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n margin-right: 0.5rem;\n }\n\n <\/style>\n<\/head>\n<body class=\"overflow-x-hidden\">\n\n \n <header class=\"bg-white\/80 backdrop-filter backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <div class=\"flex-shrink-0\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-teal-700\">hobbi.st<\/a>\n <\/div>\n <div class=\"hidden md:block\">\n <div class=\"ml-10 flex items-baseline space-x-4\">\n <a href=\"#philosophy\" class=\"nav-link\">\u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f<\/a>\n <a href=\"#engine\" class=\"nav-link\">\u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c<\/a>\n <a href=\"#tokenization\" class=\"nav-link\">\u0422\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u044f<\/a>\n <a href=\"#ecosystem\" class=\"nav-link\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a>\n <a href=\"#governance\" class=\"nav-link\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n \n <section id=\"hero\" class=\"relative py-20 md:py-32 bg-white hero-section\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900\">\n <span class=\"block\">\u0420\u0430\u0441\u043a\u0440\u043e\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b.<\/span>\n <span class=\"block text-teal-600\">\u0418\u0437\u043c\u0435\u043d\u0438 \u043c\u0438\u0440.<\/span>\n <\/h1>\n <p class=\"mt-6 max-w-2xl mx-auto text-xl text-gray-600\">\n hobbi.st \u2014 \u044d\u0442\u043e \u0440\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0432\u0430\u0448\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0438\u0433\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u043e\u0432\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u043b\u044e\u0431\u0432\u0438 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435.\n <\/p>\n <a href=\"#philosophy\" class=\"mt-10 inline-block bg-teal-600 text-white font-semibold px-8 py-3 rounded-lg shadow-lg hover:bg-teal-700 transition-colors duration-300\">\n \u0423\u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a\n <\/a>\n <\/div>\n <\/section>\n\n \n <section id=\"philosophy\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u041d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430: \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043b\u0435\u0436\u0438\u0442 “\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438” \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0433\u0434\u0435 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043d\u0438\u0435\u043c, \u0431\u043b\u0430\u0433\u043e\u043f\u043e\u043b\u0443\u0447\u0438\u0435\u043c \u0438 \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0432 \u043e\u0431\u0449\u0435\u0435 \u0434\u0435\u043b\u043e, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439 \u0432\u044b\u0433\u043e\u0434\u043e\u0439. \u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f.\n <\/p>\n \n <div class=\"card max-w-4xl mx-auto\">\n <div class=\"p-4 sm:p-6\">\n <p class=\"text-center text-gray-700 mb-4 font-semibold\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435:<\/p>\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\" id=\"economy-buttons\">\n <button data-economy=\"love\" class=\"pill-button active\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438<\/button>\n <button data-economy=\"passion\" class=\"pill-button\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0421\u0442\u0440\u0430\u0441\u0442\u0438<\/button>\n <button data-economy=\"gift\" class=\"pill-button\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0414\u0430\u0440\u0435\u043d\u0438\u044f<\/button>\n <button data-economy=\"market\" class=\"pill-button\">\u0420\u044b\u043d\u043e\u0447\u043d\u0430\u044f \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430<\/button>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"economyChart\"><\/canvas>\n <\/div>\n <div id=\"economy-description\" class=\"mt-6 text-center text-gray-700\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"engine\" class=\"py-20 md:py-28 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b hobbi.st<\/h2>\n <p class=\"section-subtitle\">\n \u0412 \u044f\u0434\u0440\u0435 hobbi.st \u043b\u0435\u0436\u0430\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u043e\u043b\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0438 \u0441\u0430\u043c\u043e\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0433\u0440\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u0443\u044e \u0440\u043e\u043b\u044c, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044f \u043f\u0443\u0442\u044c \u043a \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0443 \u0432 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0438 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435.\n <\/p>\n <div class=\"max-w-5xl mx-auto engine-tabs-container\">\n \n <div class=\"engine-tabs-nav-panel\">\n <h3 class=\"text-xl font-bold mb-4 text-gray-800 px-2\">\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u043e\u0441\u0442\u0430:<\/h3>\n <nav id=\"engine-tabs\" class=\"flex flex-col space-y-2\">\n <a href=\"#\" data-tab=\"gamification\" class=\"tab-link active\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\n <\/a>\n <a href=\"#\" data-tab=\"ar\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c (AR)\n <\/a>\n <a href=\"#\" data-tab=\"ai\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u041d\u0435\u0439\u0440\u043e\u043d\u043d\u044b\u0435 \u0441\u0435\u0442\u0438 (\u0418\u0418)\n <\/a>\n <a href=\"#\" data-tab=\"blockchain\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d\n <\/a>\n <\/nav>\n <\/div>\n \n <div class=\"engine-content-panel\">\n <div id=\"engine-content\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tokenization\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0412\u0430\u0448 \u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u2014 \u0412\u0430\u0448 \u0410\u043a\u0442\u0438\u0432<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u043d\u0430\u0432\u044b\u043a\u0438, \u043e\u043f\u044b\u0442 \u0438 \u0434\u0430\u0436\u0435 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u0432 \u043b\u0438\u043a\u0432\u0438\u0434\u043d\u044b\u0439 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0430\u043a\u0442\u0438\u0432. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e “\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 IPO”. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0431\u043e\u0440 \u0441\u0440\u0435\u0434\u0441\u0442\u0432, \u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0440\u043e\u0441\u0442\u0435 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435.\n <\/p>\n <div class=\"card max-w-5xl mx-auto p-8\">\n <div id=\"tokenization-flow\" class=\"tokenization-flow-container\">\n \n <\/div>\n <div id=\"tokenization-details\" class=\"mt-8 p-6 bg-teal-50 rounded-xl text-teal-800 tokenization-details-area\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ecosystem\" class=\"py-20 md:py-28 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0426\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0433\u043e \u0420\u0430\u0437\u0432\u0438\u0442\u0438\u044f<\/h2>\n <p class=\"section-subtitle\">\n \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0430\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u0443\u0442\u0438: \u043e\u0442 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c \u0434\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0446\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043e\u0442 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u043e\u0432.\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-8 max-w-6xl mx-auto\" style=\"display: grid; gap: 2rem;\">\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f LMS<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0432\u0430\u0441. \u0418\u0418 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448 \u0441\u0442\u0438\u043b\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b, \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n <\/div>\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0432 AR, \u043f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u044b \u043e\u0442 \u0418\u0418 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u043d\u0430 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0435. \u0412\u0430\u0448 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u044b\u043c.<\/p>\n <\/div>\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0421\u0435\u0442\u044c \u00f6zgeris ustazy<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">“\u041c\u0430\u0441\u0442\u0435\u0440\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439” \u2014 \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043c\u0435\u043d\u0442\u043e\u0440\u0441\u0442\u0432\u0430. \u0418\u0418-\u043a\u043e\u0443\u0447\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c, \u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043c\u0443\u0434\u0440\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u0435\u043c.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"governance\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0411\u0443\u0434\u0443\u0449\u0438\u043c: DAO \u0441 \u0412\u0435\u0441\u043e\u043c \u0420\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0414\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0410\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e (DAO). \u041d\u0430\u0448\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430: \u0432\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u043d\u043e \u0438 \u043e\u0442 \u0432\u0430\u0448\u0435\u0439 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u043a\u043b\u0430\u0434\u0430 \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443.\n <\/p>\n <div class=\"card max-w-4xl mx-auto\">\n <div class=\"p-4 sm:p-6\">\n <div class=\"dao-chart-container mb-6\">\n <div class=\"dao-bar-chart\" id=\"daoBarChart\">\n <div id=\"whaleSegment\" class=\"dao-segment bg-amber-500\"><\/div>\n <div id=\"activeSegment\" class=\"dao-segment bg-teal-500\"><\/div>\n <div id=\"smallSegment\" class=\"dao-segment bg-gray-500\"><\/div>\n <\/div>\n <div class=\"legend\">\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #F59E0B;\"><\/div>\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u044b (“\u041a\u0438\u0442\u044b”)<\/div>\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #14B8A6;\"><\/div>\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438<\/div>\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #6B7280;\"><\/div>\u041c\u0435\u043b\u043a\u0438\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u0438<\/div>\n <\/div>\n <\/div>\n <div class=\"px-4\">\n <label for=\"reputation-slider\" class=\"block text-center font-medium text-gray-700\">\u0412\u0435\u0441 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0432 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0438:<\/label>\n <input id=\"reputation-slider\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer mt-2 accent-teal-600\">\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>\u0422\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u043a\u0435\u043d\u044b<\/span>\n <span>\u0413\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/span>\n <span>\u0422\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044f<\/span>\n <\/div>\n <\/div>\n <p id=\"dao-explanation\" class=\"mt-6 text-center text-gray-700\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"bg-gray-800 text-white\" style=\"background-color: #1F2937; color: #FFFFFF;\">\n <div class=\"container mx-auto px-4 py-8 text-center\" style=\"text-align: center;\">\n <p class=\"font-bold text-lg\" style=\"font-weight: 700; font-size: 1.125rem; line-height: 1.75rem;\">hobbi.st<\/p>\n <p class=\"text-sm text-gray-400 mt-2\" style=\"font-size: 0.875rem; line-height: 1.25rem; color: #9CA3AF; margin-top: 0.5rem;\">\u041f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u044f\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b. © 2025<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n\n const economyData = {\n love: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438',\n values: [100, 70, 95, 20], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0421\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043d\u0438\u0435 \u0438 \u0431\u043b\u0430\u0433\u043e\u043f\u043e\u043b\u0443\u0447\u0438\u0435. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u0414\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u044e\u0442\u044b (\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u0430). \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0446\u0432\u0435\u0442\u0430\u043d\u0438\u0435. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0438\u043b\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e.'\n },\n passion: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0421\u0442\u0440\u0430\u0441\u0442\u0438',\n values: [75, 60, 85, 30], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0432\u044b\u043a. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041b\u0438\u0447\u043d\u0430\u044f \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u041e\u0431\u0445\u043e\u0434\u0438\u0442 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0448\u0435\u0432\u043e\u0441\u0442\u044c.'\n },\n gift: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0414\u0430\u0440\u0435\u043d\u0438\u044f',\n values: [50, 90, 80, 10], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0412\u0437\u0430\u0438\u043c\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u041d\u0435\u043c\u043e\u043d\u0435\u0442\u0430\u0440\u043d\u044b\u0439 \u043e\u0431\u043c\u0435\u043d. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u041e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043c\u0435\u043d\u0442\u0430\u043b\u0438\u0442\u0435\u0442\u0435 \u0438\u0437\u043e\u0431\u0438\u043b\u0438\u044f.'\n },\n market: {\n label: '\u0420\u044b\u043d\u043e\u0447\u043d\u0430\u044f \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430',\n values: [25, 80, 75, 85], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u041f\u0440\u0438\u0431\u044b\u043b\u044c \u0438 \u0446\u0435\u043d\u0430. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u0414\u0435\u043d\u0435\u0436\u043d\u044b\u0439 \u043e\u0431\u043c\u0435\u043d. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u0433\u0430\u0442\u0441\u0442\u0432\u0430. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u042d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u0435\u0444\u0438\u0446\u0438\u0442.'\n }\n };\n\n const ctx = document.getElementById('economyChart').getContext('2d');\n let economyChart;\n \n function createEconomyChart(economyKey) {\n const data = economyData[economyKey];\n document.getElementById('economy-description').textContent = data.description;\n\n if (economyChart) {\n economyChart.data.datasets[0].data = data.values;\n economyChart.update();\n } else {\n economyChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['\u0414\u0440\u0430\u0439\u0432\u0435\u0440 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438', '\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u043c\u0435\u043d\u0430', '\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442', '\u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443'],\n datasets: [{\n label: data.label,\n data: data.values,\n backgroundColor: '#14B8A6', \/\/ teal-500\n borderColor: '#0F766E', \/\/ teal-700\n borderWidth: 1,\n borderRadius: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 110,\n display: false\n },\n x: {\n grid: {\n display: false\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n }\n }\n\n document.getElementById('economy-buttons').addEventListener('click', function(e) {\n if (e.target.tagName === 'BUTTON') {\n const economyKey = e.target.dataset.economy;\n document.querySelectorAll('#economy-buttons .pill-button').forEach(btn => btn.classList.remove('active'));\n e.target.classList.add('active');\n createEconomyChart(economyKey);\n }\n });\n\n createEconomyChart('love');\n\n\n const engineContentData = {\n gamification: {\n title: '\u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u0438',\n text: '\u041c\u044b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0445 \u043d\u0430\u0433\u0440\u0430\u0434. \u041d\u0430\u0448\u0430 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u0438: \u0441\u0442\u0440\u0435\u043c\u043b\u0435\u043d\u0438\u0438 \u043a \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0443, \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u0438\u0438 \u0438 \u0446\u0435\u043b\u0438. \"\u0418\u0433\u0440\u0430\" \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f, \u0430 \u043d\u0435 \u0433\u043e\u043d\u043a\u0430 \u0437\u0430 \u043e\u0447\u043a\u0430\u043c\u0438. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u043b\u0433\u043e\u0441\u0440\u043e\u0447\u043d\u0443\u044e \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u043e\u0432.',\n icon: '????'\n },\n ar: {\n title: 'AR \u0434\u043b\u044f \u0438\u043c\u043c\u0435\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0432\u043a\u043b\u0430\u0434\u0430',\n text: '\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0432 \u0436\u0438\u0432\u043e\u0439 \u043e\u043f\u044b\u0442 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u043a\u043b\u0430\u0434\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0432\u043e\u0434\u0438\u0442\u0435 \u043a\u0430\u043c\u0435\u0440\u0443 \u043d\u0430 \u043f\u0430\u0440\u043a \u0438 \u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043d \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c AR \u0432 hobbi.st. \u042d\u0442\u043e \u043d\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f, \u0430 \u043f\u0435\u0442\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.',\n icon: '????'\n },\n ai: {\n title: '\u0418\u0418 \u043a\u0430\u043a \u043f\u0430\u0440\u0442\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u0433\u043d\u0438\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0440\u043e\u0441\u0442\u0430',\n text: '\u041d\u0430\u0448 \u0418\u0418 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0430 \"\u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\". \u041e\u043d \u043d\u0435 \u0434\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0430 \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043f\u043e\u0434\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f \u0432\u0430\u0441 \u043a \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044e \u0438 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0418\u0418, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0441 \u0443\u043c\u043d\u0435\u0435, \u0430 \u043d\u0435 \u0447\u0442\u043e\u0431\u044b \u0434\u0443\u043c\u0430\u0442\u044c \u0437\u0430 \u0432\u0430\u0441.',\n icon: '????'\n },\n blockchain: {\n title: '\u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438',\n text: '\u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u044b\u0445, \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0445 \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0438 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0435\u043d\u0438\u0439 \u0432\u0430\u0448\u0438\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0439. \u0412\u0430\u0448 \u0432\u043a\u043b\u0430\u0434, \u043e\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0430 \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u0440\u0435\u0435\u0441\u0442\u0440, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0432\u0430\u0448\u0443 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044e \u0438 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435.',\n icon: '????'\n }\n };\n \n const engineContentContainer = document.getElementById('engine-content');\n const engineTabsContainer = document.getElementById('engine-tabs');\n\n function updateEngineContent(tabKey) {\n const content = engineContentData[tabKey];\n engineContentContainer.innerHTML = `\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1F2937; margin-bottom: 1rem;\">${content.title}<\/h3>\n <p style=\"color: #374151; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\n `;\n document.querySelectorAll('#engine-tabs .tab-link').forEach(link => {\n link.classList.remove('active');\n if (link.dataset.tab === tabKey) {\n link.classList.add('active');\n }\n });\n }\n \n engineTabsContainer.addEventListener('click', function(e) {\n e.preventDefault();\n const link = e.target.closest('.tab-link');\n if (link) {\n updateEngineContent(link.dataset.tab);\n }\n });\n\n updateEngineContent('gamification');\n\n\n const tokenizationSteps = [\n { id: 1, title: '\u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0438 \u0412\u043a\u043b\u0430\u0434', description: '\u0412\u044b \u0443\u0447\u0438\u0442\u0435\u0441\u044c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u043c \u2014 \u043a\u0430\u0436\u0434\u043e\u0435 \u0432\u0430\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043c.' },\n { id: 2, title: 'Proof of Contribution', description: '\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448 \u0432\u043a\u043b\u0430\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0418\u0418 \u0438 AR, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \"\u0414\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0432\u043a\u043b\u0430\u0434\u0430\" \u043d\u0430 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0435.' },\n { id: 3, title: '\u0420\u043e\u0441\u0442 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438', description: '\u0412\u0430\u0448 \u0432\u043a\u043b\u0430\u0434 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044e \u0432 \u0441\u0435\u0442\u0438 \u2014 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u0438.' },\n { id: 4, title: '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d (PUIT)', description: '\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b (PUIT), \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0432\u0430\u0448\u0438\u043c \u0443\u0441\u043b\u0443\u0433\u0430\u043c \u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c.' },\n { id: 5, title: '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 IPO', description: '\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043c\u043e\u0436\u0435\u0442 \"\u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\" \u0432 \u0432\u0430\u0441, \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044f \u0432\u0430\u0448\u0438 PUIT, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u0432\u0430\u0448 \u0440\u043e\u0441\u0442 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044f \u0432\u0430\u0448 \u0443\u0441\u043f\u0435\u0445.' }\n ];\n\n const flowContainer = document.getElementById('tokenization-flow');\n const detailsContainer = document.getElementById('tokenization-details');\n let activeStep = 1;\n\n function renderTokenizationFlow() {\n flowContainer.innerHTML = tokenizationSteps.map((step, index) => `\n <div class=\"flex flex-col items-center text-center cursor-pointer token-step\" data-step=\"${step.id}\">\n <div class=\"step-circle w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold border-4 transition-all duration-300\n ${step.id === activeStep ? 'bg-teal-600 text-white border-teal-700' : 'bg-white text-gray-500 border-gray-200'}\">\n ${step.id}\n <\/div>\n <p class=\"mt-2 text-xs font-semibold ${step.id === activeStep ? 'text-teal-700' : 'text-gray-600'}\">${step.title}<\/p>\n <\/div>\n ${index < tokenizationSteps.length - 1 ? `<div class=\"step-arrow h-1 w-full md:w-16 bg-gray-200 rounded-full my-2 md:my-0\"><\/div>` : ''}\n `).join('');\n }\n\n function updateTokenizationDetails() {\n const stepData = tokenizationSteps.find(s => s.id === activeStep);\n detailsContainer.innerHTML = `<p class=\"font-semibold\">${stepData.title}:<\/p><p>${stepData.description}<\/p>`;\n }\n\n flowContainer.addEventListener('click', (e) => {\n const stepElement = e.target.closest('.token-step');\n if (stepElement) {\n activeStep = parseInt(stepElement.dataset.step, 10);\n renderTokenizationFlow();\n updateTokenizationDetails();\n }\n });\n \n renderTokenizationFlow();\n updateTokenizationDetails();\n\n const reputationSlider = document.getElementById('reputation-slider');\n const daoExplanation = document.getElementById('dao-explanation');\n const daoBarChart = document.getElementById('daoBarChart');\n const whaleSegment = document.getElementById('whaleSegment');\n const activeSegment = document.getElementById('activeSegment');\n const smallSegment = document.getElementById('smallSegment');\n\n const daoBaseData = {\n tokenHoldings: [60, 25, 15] \n };\n\n function updateDaoChart(reputationWeight) {\n const weight = reputationWeight \/ 100;\n const totalTokens = daoBaseData.tokenHoldings.reduce((a, b) => a + b, 0);\n\n const whalePower = daoBaseData.tokenHoldings[0] * (1 - weight) + (daoBaseData.tokenHoldings[0] * (1 - weight));\n const activePower = daoBaseData.tokenHoldings[1] + (daoBaseData.tokenHoldings[0] * weight * 0.7) + (daoBaseData.tokenHoldings[1] * weight);\n const smallPower = daoBaseData.tokenHoldings[2] + (daoBaseData.tokenHoldings[0] * weight * 0.3) + (daoBaseData.tokenHoldings[2] * weight);\n\n const totalPower = whalePower + activePower + smallPower;\n\n const whalePercentage = (whalePower \/ totalPower) * 100;\n const activePercentage = (activePower \/ totalPower) * 100;\n const smallPercentage = (smallPower \/ totalPower) * 100;\n \n whaleSegment.style.width = `${whalePercentage}%`;\n activeSegment.style.width = `${activePercentage}%`;\n smallSegment.style.width = `${smallPercentage}%`;\n \n let explanationText = '';\n if (weight < 0.2) {\n explanationText = '\u041f\u0440\u0438 \u043d\u0438\u0437\u043a\u043e\u043c \u0432\u0435\u0441\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438, \u043f\u0440\u0430\u0432\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0440\u0438\u0441\u043a \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043b\u0430\u0441\u0442\u0438 \u0443 \"\u043a\u0438\u0442\u043e\u0432\".';\n } else if (weight > 0.8) {\n explanationText = '\u041f\u0440\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0432\u0435\u0441\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438, \u043f\u0440\u0430\u0432\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e. \u042d\u0442\u043e \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0438 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043e\u0442 \u043f\u043b\u0443\u0442\u043e\u043a\u0440\u0430\u0442\u0438\u0438.';\n } else {\n explanationText = '\u0413\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u0443\u0435\u0442 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0439 \u0432\u043a\u043b\u0430\u0434 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u0443\u044e \u0438 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.';\n }\n daoExplanation.textContent = explanationText;\n }\n\n reputationSlider.addEventListener('input', (e) => {\n updateDaoChart(parseInt(e.target.value, 10));\n });\n\n updateDaoChart(50);\n\n\n \/\/ Smooth scrolling for nav links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n \/\/ Active nav link on scroll\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('header nav a');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.toggle('active', link.getAttribute('href').substring(1) === entry.target.id);\n });\n }\n });\n }, { rootMargin: '-50% 0px -50% 0px' });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n\n});\n<\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 White Paper: hobbi.st hobbi.st \u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f \u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u0422\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0420\u0430\u0441\u043a\u0440\u043e\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b. \u0418\u0437\u043c\u0435\u043d\u0438 \u043c\u0438\u0440. hobbi.st \u2014 \u044d\u0442\u043e \u0440\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0432\u0430\u0448\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0438\u0433\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u043e\u0432\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u043b\u044e\u0431\u0432\u0438 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435. \u0423\u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a \u041d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430: \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438 hobbi.st \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043b\u0435\u0436\u0438\u0442 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-11581","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=11581"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11581\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=11581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11581,"date":"2025-09-03T14:07:03","date_gmt":"2025-09-03T08:07:03","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=11581"},"modified":"2025-09-03T19:08:07","modified_gmt":"2025-09-03T13:08:07","slug":"mainidea3","status":"publish","type":"page","link":"https:\/\/khatm.hobbi.st\/kk\/mainidea3\/","title":{"rendered":"mainidea"},"content":{"rendered":"\n\n\n \n \n \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 White Paper: hobbi.st<\/title>\n \n \n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* General Styles *\/\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #F9FAFB; \/* gray-50 *\/\n color: #1F2937; \/* gray-800 *\/\n }\n .container {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n }\n @media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n }\n @media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n }\n @media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n }\n \n .section-title {\n font-size: 1.875rem; \/* text-3xl *\/\n line-height: 2.25rem;\n font-weight: 700; \/* font-bold *\/\n color: #1F2937; \/* gray-800 *\/\n margin-bottom: 1rem;\n text-align: center;\n }\n @media (min-width: 768px) {\n .section-title {\n font-size: 2.25rem; \/* md:text-4xl *\/\n line-height: 2.5rem;\n }\n }\n\n .section-subtitle {\n font-size: 1.125rem; \/* text-lg *\/\n line-height: 1.75rem;\n color: #4B5563; \/* gray-600 *\/\n margin-bottom: 3rem;\n text-align: center;\n max-width: 48rem;\n margin-left: auto;\n margin-right: auto;\n }\n @media (min-width: 768px) {\n .section-subtitle {\n font-size: 1.25rem; \/* md:text-xl *\/\n line-height: 1.75rem;\n }\n }\n .card {\n background-color: #FFFFFF;\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transition: box-shadow 0.3s ease-in-out;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .nav-link {\n padding: 0.5rem 1rem;\n color: #4B5563;\n transition: all 0.3s ease-in-out;\n border-radius: 0.5rem;\n }\n .nav-link:hover {\n color: #0D9488; \/* teal-600 *\/\n background-color: #F0FDFA; \/* teal-50 *\/\n }\n .nav-link.active {\n font-weight: 600; \/* font-semibold *\/\n color: #0F766E; \/* teal-700 *\/\n background-color: #CCFBF1; \/* teal-100 *\/\n }\n .pill-button {\n padding: 0.5rem 1rem;\n font-size: 0.875rem; \/* text-sm *\/\n line-height: 1.25rem;\n font-weight: 500;\n border-radius: 9999px;\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n border: 2px solid transparent;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n }\n .pill-button.active {\n background-color: #0D9488; \/* teal-600 *\/\n color: #FFFFFF;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-color: #0D9488;\n }\n .pill-button:not(.active) {\n background-color: #FFFFFF;\n color: #374151; \/* gray-700 *\/\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n }\n .pill-button:not(.active):hover {\n background-color: #F3F4F6;\n border-color: #99F6E4; \/* teal-300 *\/\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n \n \/* Specific Section Styles *\/\n .hero-section {\n padding-top: 5rem;\n padding-bottom: 5rem;\n background-color: #fff;\n }\n @media (min-width: 768px) {\n .hero-section {\n padding-top: 8rem;\n padding-bottom: 8rem;\n }\n }\n \n .engine-tabs-container {\n display: flex;\n border-radius: 1rem;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n overflow: hidden;\n background-color: #E5E7EB; \/* gray-100 *\/\n height: 400px;\n }\n .engine-tabs-nav-panel {\n width: 33.333333%;\n background-color: #fff;\n padding: 1rem;\n flex-shrink: 0;\n overflow-y: auto;\n }\n .engine-content-panel {\n flex: 1 1 0%;\n padding: 1rem;\n overflow-y: auto;\n }\n @media (min-width: 768px) {\n .engine-content-panel {\n padding: 2rem;\n }\n }\n .tab-link {\n display: flex;\n align-items: center;\n padding: 0.75rem;\n border-radius: 0.5rem;\n font-weight: 500;\n color: #4B5563; \/* gray-700 *\/\n transition: all 0.2s ease-in-out;\n border: 2px solid transparent;\n justify-content: center;\n text-align: center;\n }\n .tab-link.active {\n background-color: #F0FDFA; \/* teal-50 *\/\n color: #0D9488; \/* teal-600 *\/\n font-weight: 600;\n border-color: #CCFBF1; \/* teal-100 *\/\n }\n .tab-link:hover {\n background-color: #F3F4F6;\n }\n @media (max-width: 767px) {\n .tab-link {\n font-size: 0.75rem;\n padding: 0.5rem;\n }\n .tab-link span {\n font-size: 1rem;\n margin-right: 0.25rem;\n }\n }\n \n .tokenization-flow-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n }\n @media (min-width: 768px) {\n .tokenization-flow-container {\n flex-direction: row;\n gap: 0;\n margin-top: 0;\n margin-bottom: 0;\n gap: 1rem;\n }\n }\n .token-step {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n cursor: pointer;\n }\n .token-step .step-circle {\n width: 3rem;\n height: 3rem;\n font-size: 1.125rem;\n font-weight: 700;\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-width: 4px;\n transition: all 0.3s ease-in-out;\n }\n .token-step .step-arrow {\n height: 0.25rem;\n width: 100%;\n background-color: #E5E7EB;\n border-radius: 9999px;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n }\n @media (min-width: 768px) {\n .token-step .step-arrow {\n width: 4rem;\n height: 0.25rem;\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n \n .tokenization-details-area {\n min-height: 90px;\n max-height: 150px;\n overflow-y: auto;\n }\n\n \/* Chart-like visualizations with pure CSS *\/\n .chart-container {\n width: 100%;\n display: flex;\n align-items: flex-end;\n justify-content: space-around;\n height: 250px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n padding-top: 2rem;\n padding-bottom: 2rem;\n border-bottom: 2px solid #E5E7EB;\n }\n \n .dao-chart-container {\n width: 100%;\n max-width: 700px;\n margin: auto;\n }\n .dao-bar-chart {\n display: flex;\n height: 30px;\n margin-bottom: 1rem;\n border-radius: 9999px;\n overflow: hidden;\n box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);\n }\n .dao-segment {\n transition: width 0.3s ease-in-out;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n }\n .legend {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1rem;\n }\n .legend-item {\n display: flex;\n align-items: center;\n font-size: 0.875rem;\n color: #4B5563;\n }\n .legend-color {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n margin-right: 0.5rem;\n }\n\n <\/style>\n<\/head>\n<body class=\"overflow-x-hidden\">\n\n \n <header class=\"bg-white\/80 backdrop-filter backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <div class=\"flex-shrink-0\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-teal-700\">hobbi.st<\/a>\n <\/div>\n <div class=\"hidden md:block\">\n <div class=\"ml-10 flex items-baseline space-x-4\">\n <a href=\"#philosophy\" class=\"nav-link\">\u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f<\/a>\n <a href=\"#engine\" class=\"nav-link\">\u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c<\/a>\n <a href=\"#tokenization\" class=\"nav-link\">\u0422\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u044f<\/a>\n <a href=\"#ecosystem\" class=\"nav-link\">\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/a>\n <a href=\"#governance\" class=\"nav-link\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n \n <section id=\"hero\" class=\"relative py-20 md:py-32 bg-white hero-section\">\n <div class=\"container mx-auto px-4 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900\">\n <span class=\"block\">\u0420\u0430\u0441\u043a\u0440\u043e\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b.<\/span>\n <span class=\"block text-teal-600\">\u0418\u0437\u043c\u0435\u043d\u0438 \u043c\u0438\u0440.<\/span>\n <\/h1>\n <p class=\"mt-6 max-w-2xl mx-auto text-xl text-gray-600\">\n hobbi.st \u2014 \u044d\u0442\u043e \u0440\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0432\u0430\u0448\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0438\u0433\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u043e\u0432\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u043b\u044e\u0431\u0432\u0438 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435.\n <\/p>\n <a href=\"#philosophy\" class=\"mt-10 inline-block bg-teal-600 text-white font-semibold px-8 py-3 rounded-lg shadow-lg hover:bg-teal-700 transition-colors duration-300\">\n \u0423\u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a\n <\/a>\n <\/div>\n <\/section>\n\n \n <section id=\"philosophy\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u041d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430: \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043b\u0435\u0436\u0438\u0442 “\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438” \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0433\u0434\u0435 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043d\u0438\u0435\u043c, \u0431\u043b\u0430\u0433\u043e\u043f\u043e\u043b\u0443\u0447\u0438\u0435\u043c \u0438 \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0432 \u043e\u0431\u0449\u0435\u0435 \u0434\u0435\u043b\u043e, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u043e\u0439 \u0432\u044b\u0433\u043e\u0434\u043e\u0439. \u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f.\n <\/p>\n \n <div class=\"card max-w-4xl mx-auto\">\n <div class=\"p-4 sm:p-6\">\n <p class=\"text-center text-gray-700 mb-4 font-semibold\">\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435:<\/p>\n <div class=\"flex flex-wrap justify-center gap-2 mb-6\" id=\"economy-buttons\">\n <button data-economy=\"love\" class=\"pill-button active\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438<\/button>\n <button data-economy=\"passion\" class=\"pill-button\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0421\u0442\u0440\u0430\u0441\u0442\u0438<\/button>\n <button data-economy=\"gift\" class=\"pill-button\">\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0414\u0430\u0440\u0435\u043d\u0438\u044f<\/button>\n <button data-economy=\"market\" class=\"pill-button\">\u0420\u044b\u043d\u043e\u0447\u043d\u0430\u044f \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430<\/button>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"economyChart\"><\/canvas>\n <\/div>\n <div id=\"economy-description\" class=\"mt-6 text-center text-gray-700\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"engine\" class=\"py-20 md:py-28 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b hobbi.st<\/h2>\n <p class=\"section-subtitle\">\n \u0412 \u044f\u0434\u0440\u0435 hobbi.st \u043b\u0435\u0436\u0430\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u043e\u043b\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0438 \u0441\u0430\u043c\u043e\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0433\u0440\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u0443\u044e \u0440\u043e\u043b\u044c, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044f \u043f\u0443\u0442\u044c \u043a \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0443 \u0432 \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0438 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u0435.\n <\/p>\n <div class=\"max-w-5xl mx-auto engine-tabs-container\">\n \n <div class=\"engine-tabs-nav-panel\">\n <h3 class=\"text-xl font-bold mb-4 text-gray-800 px-2\">\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u043e\u0441\u0442\u0430:<\/h3>\n <nav id=\"engine-tabs\" class=\"flex flex-col space-y-2\">\n <a href=\"#\" data-tab=\"gamification\" class=\"tab-link active\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\n <\/a>\n <a href=\"#\" data-tab=\"ar\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c (AR)\n <\/a>\n <a href=\"#\" data-tab=\"ai\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u041d\u0435\u0439\u0440\u043e\u043d\u043d\u044b\u0435 \u0441\u0435\u0442\u0438 (\u0418\u0418)\n <\/a>\n <a href=\"#\" data-tab=\"blockchain\" class=\"tab-link\">\n <span class=\"text-2xl mr-3\">????<\/span> \u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d\n <\/a>\n <\/nav>\n <\/div>\n \n <div class=\"engine-content-panel\">\n <div id=\"engine-content\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tokenization\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0412\u0430\u0448 \u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u2014 \u0412\u0430\u0448 \u0410\u043a\u0442\u0438\u0432<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u043d\u0430\u0432\u044b\u043a\u0438, \u043e\u043f\u044b\u0442 \u0438 \u0434\u0430\u0436\u0435 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u0432 \u043b\u0438\u043a\u0432\u0438\u0434\u043d\u044b\u0439 \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u0430\u043a\u0442\u0438\u0432. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e “\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 IPO”. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0431\u043e\u0440 \u0441\u0440\u0435\u0434\u0441\u0442\u0432, \u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u0440\u043e\u0441\u0442\u0435 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435.\n <\/p>\n <div class=\"card max-w-5xl mx-auto p-8\">\n <div id=\"tokenization-flow\" class=\"tokenization-flow-container\">\n \n <\/div>\n <div id=\"tokenization-details\" class=\"mt-8 p-6 bg-teal-50 rounded-xl text-teal-800 tokenization-details-area\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ecosystem\" class=\"py-20 md:py-28 bg-white\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0426\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0433\u043e \u0420\u0430\u0437\u0432\u0438\u0442\u0438\u044f<\/h2>\n <p class=\"section-subtitle\">\n \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0430\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u0443\u0442\u0438: \u043e\u0442 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u043c \u043d\u0430\u0432\u044b\u043a\u0430\u043c \u0434\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0446\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043e\u0442 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u043e\u0432.\n <\/p>\n <div class=\"grid md:grid-cols-3 gap-8 max-w-6xl mx-auto\" style=\"display: grid; gap: 2rem;\">\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f LMS<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0432\u0430\u0441. \u0418\u0418 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448 \u0441\u0442\u0438\u043b\u044c \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0443\u0440\u0441\u044b, \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n <\/div>\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0432 AR, \u043f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u044b \u043e\u0442 \u0418\u0418 \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434 \u043d\u0430 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0435. \u0412\u0430\u0448 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u044b\u043c.<\/p>\n <\/div>\n <div class=\"card text-center\" style=\"text-align: center;\">\n <div class=\"text-4xl mb-4\" style=\"font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem;\">????<\/div>\n <h3 class=\"text-xl font-bold mb-2\" style=\"font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;\">\u0421\u0435\u0442\u044c \u00f6zgeris ustazy<\/h3>\n <p class=\"text-gray-600\" style=\"color: #4B5563;\">“\u041c\u0430\u0441\u0442\u0435\u0440\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439” \u2014 \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043c\u0435\u043d\u0442\u043e\u0440\u0441\u0442\u0432\u0430. \u0418\u0418-\u043a\u043e\u0443\u0447\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c, \u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043c\u0443\u0434\u0440\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u0435\u043c.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"governance\" class=\"py-20 md:py-28\">\n <div class=\"container mx-auto px-4\">\n <h2 class=\"section-title\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0411\u0443\u0434\u0443\u0449\u0438\u043c: DAO \u0441 \u0412\u0435\u0441\u043e\u043c \u0420\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438<\/h2>\n <p class=\"section-subtitle\">\n hobbi.st \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0447\u0435\u0440\u0435\u0437 \u0414\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0410\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u0443\u044e \u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e (DAO). \u041d\u0430\u0448\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430: \u0432\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u043d\u043e \u0438 \u043e\u0442 \u0432\u0430\u0448\u0435\u0439 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u043a\u043b\u0430\u0434\u0430 \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443.\n <\/p>\n <div class=\"card max-w-4xl mx-auto\">\n <div class=\"p-4 sm:p-6\">\n <div class=\"dao-chart-container mb-6\">\n <div class=\"dao-bar-chart\" id=\"daoBarChart\">\n <div id=\"whaleSegment\" class=\"dao-segment bg-amber-500\"><\/div>\n <div id=\"activeSegment\" class=\"dao-segment bg-teal-500\"><\/div>\n <div id=\"smallSegment\" class=\"dao-segment bg-gray-500\"><\/div>\n <\/div>\n <div class=\"legend\">\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #F59E0B;\"><\/div>\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0438\u043d\u0432\u0435\u0441\u0442\u043e\u0440\u044b (“\u041a\u0438\u0442\u044b”)<\/div>\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #14B8A6;\"><\/div>\u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438<\/div>\n <div class=\"legend-item\"><div class=\"legend-color\" style=\"background-color: #6B7280;\"><\/div>\u041c\u0435\u043b\u043a\u0438\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u0438<\/div>\n <\/div>\n <\/div>\n <div class=\"px-4\">\n <label for=\"reputation-slider\" class=\"block text-center font-medium text-gray-700\">\u0412\u0435\u0441 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0432 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043d\u0438\u0438:<\/label>\n <input id=\"reputation-slider\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer mt-2 accent-teal-600\">\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>\u0422\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u043a\u0435\u043d\u044b<\/span>\n <span>\u0413\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/span>\n <span>\u0422\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044f<\/span>\n <\/div>\n <\/div>\n <p id=\"dao-explanation\" class=\"mt-6 text-center text-gray-700\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"bg-gray-800 text-white\" style=\"background-color: #1F2937; color: #FFFFFF;\">\n <div class=\"container mx-auto px-4 py-8 text-center\" style=\"text-align: center;\">\n <p class=\"font-bold text-lg\" style=\"font-weight: 700; font-size: 1.125rem; line-height: 1.75rem;\">hobbi.st<\/p>\n <p class=\"text-sm text-gray-400 mt-2\" style=\"font-size: 0.875rem; line-height: 1.25rem; color: #9CA3AF; margin-top: 0.5rem;\">\u041f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u044f\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b. © 2025<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n\n const economyData = {\n love: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438',\n values: [100, 70, 95, 20], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0421\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043d\u0438\u0435 \u0438 \u0431\u043b\u0430\u0433\u043e\u043f\u043e\u043b\u0443\u0447\u0438\u0435. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u0414\u0435\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u044e\u0442\u044b (\u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u0430). \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0446\u0432\u0435\u0442\u0430\u043d\u0438\u0435. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0438\u043b\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e.'\n },\n passion: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0421\u0442\u0440\u0430\u0441\u0442\u0438',\n values: [75, 60, 85, 30], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0432\u044b\u043a. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u041c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041b\u0438\u0447\u043d\u0430\u044f \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u041e\u0431\u0445\u043e\u0434\u0438\u0442 \u0434\u0435\u0444\u0438\u0446\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0448\u0435\u0432\u043e\u0441\u0442\u044c.'\n },\n gift: {\n label: '\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u0414\u0430\u0440\u0435\u043d\u0438\u044f',\n values: [50, 90, 80, 10], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u0412\u0437\u0430\u0438\u043c\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u041d\u0435\u043c\u043e\u043d\u0435\u0442\u0430\u0440\u043d\u044b\u0439 \u043e\u0431\u043c\u0435\u043d. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u041e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043c\u0435\u043d\u0442\u0430\u043b\u0438\u0442\u0435\u0442\u0435 \u0438\u0437\u043e\u0431\u0438\u043b\u0438\u044f.'\n },\n market: {\n label: '\u0420\u044b\u043d\u043e\u0447\u043d\u0430\u044f \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430',\n values: [25, 80, 75, 85], \n description: '\u0414\u0440\u0430\u0439\u0432\u0435\u0440: \u041f\u0440\u0438\u0431\u044b\u043b\u044c \u0438 \u0446\u0435\u043d\u0430. \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c: \u0414\u0435\u043d\u0435\u0436\u043d\u044b\u0439 \u043e\u0431\u043c\u0435\u043d. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: \u041d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u0433\u0430\u0442\u0441\u0442\u0432\u0430. \u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443: \u042d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u0435\u0444\u0438\u0446\u0438\u0442.'\n }\n };\n\n const ctx = document.getElementById('economyChart').getContext('2d');\n let economyChart;\n \n function createEconomyChart(economyKey) {\n const data = economyData[economyKey];\n document.getElementById('economy-description').textContent = data.description;\n\n if (economyChart) {\n economyChart.data.datasets[0].data = data.values;\n economyChart.update();\n } else {\n economyChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['\u0414\u0440\u0430\u0439\u0432\u0435\u0440 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438', '\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u043c\u0435\u043d\u0430', '\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442', '\u041e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0434\u0435\u0444\u0438\u0446\u0438\u0442\u0443'],\n datasets: [{\n label: data.label,\n data: data.values,\n backgroundColor: '#14B8A6', \/\/ teal-500\n borderColor: '#0F766E', \/\/ teal-700\n borderWidth: 1,\n borderRadius: 4\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 110,\n display: false\n },\n x: {\n grid: {\n display: false\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n }\n }\n\n document.getElementById('economy-buttons').addEventListener('click', function(e) {\n if (e.target.tagName === 'BUTTON') {\n const economyKey = e.target.dataset.economy;\n document.querySelectorAll('#economy-buttons .pill-button').forEach(btn => btn.classList.remove('active'));\n e.target.classList.add('active');\n createEconomyChart(economyKey);\n }\n });\n\n createEconomyChart('love');\n\n\n const engineContentData = {\n gamification: {\n title: '\u0413\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u0438',\n text: '\u041c\u044b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u044b\u0445 \u043d\u0430\u0433\u0440\u0430\u0434. \u041d\u0430\u0448\u0430 \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u0438: \u0441\u0442\u0440\u0435\u043c\u043b\u0435\u043d\u0438\u0438 \u043a \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0443, \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u0438\u0438 \u0438 \u0446\u0435\u043b\u0438. \"\u0418\u0433\u0440\u0430\" \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f, \u0430 \u043d\u0435 \u0433\u043e\u043d\u043a\u0430 \u0437\u0430 \u043e\u0447\u043a\u0430\u043c\u0438. \u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u043b\u0433\u043e\u0441\u0440\u043e\u0447\u043d\u0443\u044e \u0432\u043e\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u043e\u0432.',\n icon: '????'\n },\n ar: {\n title: 'AR \u0434\u043b\u044f \u0438\u043c\u043c\u0435\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0432\u043a\u043b\u0430\u0434\u0430',\n text: '\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0432 \u0436\u0438\u0432\u043e\u0439 \u043e\u043f\u044b\u0442 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u043a\u043b\u0430\u0434\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0432\u043e\u0434\u0438\u0442\u0435 \u043a\u0430\u043c\u0435\u0440\u0443 \u043d\u0430 \u043f\u0430\u0440\u043a \u0438 \u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u043d \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c AR \u0432 hobbi.st. \u042d\u0442\u043e \u043d\u0435 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f, \u0430 \u043f\u0435\u0442\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.',\n icon: '????'\n },\n ai: {\n title: '\u0418\u0418 \u043a\u0430\u043a \u043f\u0430\u0440\u0442\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u0433\u043d\u0438\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0440\u043e\u0441\u0442\u0430',\n text: '\u041d\u0430\u0448 \u0418\u0418 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0430 \"\u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043d\u0430\u0441\u0442\u0430\u0432\u043d\u0438\u043a\". \u041e\u043d \u043d\u0435 \u0434\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0430 \u0437\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043f\u043e\u0434\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044f \u0432\u0430\u0441 \u043a \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044e \u0438 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0418\u0418, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0441 \u0443\u043c\u043d\u0435\u0435, \u0430 \u043d\u0435 \u0447\u0442\u043e\u0431\u044b \u0434\u0443\u043c\u0430\u0442\u044c \u0437\u0430 \u0432\u0430\u0441.',\n icon: '????'\n },\n blockchain: {\n title: '\u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438',\n text: '\u0411\u043b\u043e\u043a\u0447\u0435\u0439\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u044b\u0445, \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0445 \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0438 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0435\u043d\u0438\u0439 \u0432\u0430\u0448\u0438\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0439. \u0412\u0430\u0448 \u0432\u043a\u043b\u0430\u0434, \u043e\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0430 \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u0440\u0435\u0435\u0441\u0442\u0440, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044f \u0432\u0430\u0448\u0443 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044e \u0438 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435.',\n icon: '????'\n }\n };\n \n const engineContentContainer = document.getElementById('engine-content');\n const engineTabsContainer = document.getElementById('engine-tabs');\n\n function updateEngineContent(tabKey) {\n const content = engineContentData[tabKey];\n engineContentContainer.innerHTML = `\n <h3 style=\"font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #1F2937; margin-bottom: 1rem;\">${content.title}<\/h3>\n <p style=\"color: #374151; font-size: 1rem; line-height: 1.5rem;\">${content.text}<\/p>\n `;\n document.querySelectorAll('#engine-tabs .tab-link').forEach(link => {\n link.classList.remove('active');\n if (link.dataset.tab === tabKey) {\n link.classList.add('active');\n }\n });\n }\n \n engineTabsContainer.addEventListener('click', function(e) {\n e.preventDefault();\n const link = e.target.closest('.tab-link');\n if (link) {\n updateEngineContent(link.dataset.tab);\n }\n });\n\n updateEngineContent('gamification');\n\n\n const tokenizationSteps = [\n { id: 1, title: '\u0420\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0438 \u0412\u043a\u043b\u0430\u0434', description: '\u0412\u044b \u0443\u0447\u0438\u0442\u0435\u0441\u044c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u043c \u2014 \u043a\u0430\u0436\u0434\u043e\u0435 \u0432\u0430\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043c.' },\n { id: 2, title: 'Proof of Contribution', description: '\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448 \u0432\u043a\u043b\u0430\u0434 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0418\u0418 \u0438 AR, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u043e\u0435 \"\u0414\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e \u0432\u043a\u043b\u0430\u0434\u0430\" \u043d\u0430 \u0431\u043b\u043e\u043a\u0447\u0435\u0439\u043d\u0435.' },\n { id: 3, title: '\u0420\u043e\u0441\u0442 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438', description: '\u0412\u0430\u0448 \u0432\u043a\u043b\u0430\u0434 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u0448\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u044e \u0432 \u0441\u0435\u0442\u0438 \u2014 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u0438.' },\n { id: 4, title: '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d (PUIT)', description: '\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b (PUIT), \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0432\u0430\u0448\u0438\u043c \u0443\u0441\u043b\u0443\u0433\u0430\u043c \u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c.' },\n { id: 5, title: '\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 IPO', description: '\u0421\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043c\u043e\u0436\u0435\u0442 \"\u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\" \u0432 \u0432\u0430\u0441, \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u044f \u0432\u0430\u0448\u0438 PUIT, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u0432\u0430\u0448 \u0440\u043e\u0441\u0442 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044f \u0432\u0430\u0448 \u0443\u0441\u043f\u0435\u0445.' }\n ];\n\n const flowContainer = document.getElementById('tokenization-flow');\n const detailsContainer = document.getElementById('tokenization-details');\n let activeStep = 1;\n\n function renderTokenizationFlow() {\n flowContainer.innerHTML = tokenizationSteps.map((step, index) => `\n <div class=\"flex flex-col items-center text-center cursor-pointer token-step\" data-step=\"${step.id}\">\n <div class=\"step-circle w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold border-4 transition-all duration-300\n ${step.id === activeStep ? 'bg-teal-600 text-white border-teal-700' : 'bg-white text-gray-500 border-gray-200'}\">\n ${step.id}\n <\/div>\n <p class=\"mt-2 text-xs font-semibold ${step.id === activeStep ? 'text-teal-700' : 'text-gray-600'}\">${step.title}<\/p>\n <\/div>\n ${index < tokenizationSteps.length - 1 ? `<div class=\"step-arrow h-1 w-full md:w-16 bg-gray-200 rounded-full my-2 md:my-0\"><\/div>` : ''}\n `).join('');\n }\n\n function updateTokenizationDetails() {\n const stepData = tokenizationSteps.find(s => s.id === activeStep);\n detailsContainer.innerHTML = `<p class=\"font-semibold\">${stepData.title}:<\/p><p>${stepData.description}<\/p>`;\n }\n\n flowContainer.addEventListener('click', (e) => {\n const stepElement = e.target.closest('.token-step');\n if (stepElement) {\n activeStep = parseInt(stepElement.dataset.step, 10);\n renderTokenizationFlow();\n updateTokenizationDetails();\n }\n });\n \n renderTokenizationFlow();\n updateTokenizationDetails();\n\n const reputationSlider = document.getElementById('reputation-slider');\n const daoExplanation = document.getElementById('dao-explanation');\n const daoBarChart = document.getElementById('daoBarChart');\n const whaleSegment = document.getElementById('whaleSegment');\n const activeSegment = document.getElementById('activeSegment');\n const smallSegment = document.getElementById('smallSegment');\n\n const daoBaseData = {\n tokenHoldings: [60, 25, 15] \n };\n\n function updateDaoChart(reputationWeight) {\n const weight = reputationWeight \/ 100;\n const totalTokens = daoBaseData.tokenHoldings.reduce((a, b) => a + b, 0);\n\n const whalePower = daoBaseData.tokenHoldings[0] * (1 - weight) + (daoBaseData.tokenHoldings[0] * (1 - weight));\n const activePower = daoBaseData.tokenHoldings[1] + (daoBaseData.tokenHoldings[0] * weight * 0.7) + (daoBaseData.tokenHoldings[1] * weight);\n const smallPower = daoBaseData.tokenHoldings[2] + (daoBaseData.tokenHoldings[0] * weight * 0.3) + (daoBaseData.tokenHoldings[2] * weight);\n\n const totalPower = whalePower + activePower + smallPower;\n\n const whalePercentage = (whalePower \/ totalPower) * 100;\n const activePercentage = (activePower \/ totalPower) * 100;\n const smallPercentage = (smallPower \/ totalPower) * 100;\n \n whaleSegment.style.width = `${whalePercentage}%`;\n activeSegment.style.width = `${activePercentage}%`;\n smallSegment.style.width = `${smallPercentage}%`;\n \n let explanationText = '';\n if (weight < 0.2) {\n explanationText = '\u041f\u0440\u0438 \u043d\u0438\u0437\u043a\u043e\u043c \u0432\u0435\u0441\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438, \u043f\u0440\u0430\u0432\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0440\u0438\u0441\u043a \u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043b\u0430\u0441\u0442\u0438 \u0443 \"\u043a\u0438\u0442\u043e\u0432\".';\n } else if (weight > 0.8) {\n explanationText = '\u041f\u0440\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0432\u0435\u0441\u0435 \u0440\u0435\u043f\u0443\u0442\u0430\u0446\u0438\u0438, \u043f\u0440\u0430\u0432\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043c \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e. \u042d\u0442\u043e \u043f\u043e\u043e\u0449\u0440\u044f\u0435\u0442 \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0438 \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043e\u0442 \u043f\u043b\u0443\u0442\u043e\u043a\u0440\u0430\u0442\u0438\u0438.';\n } else {\n explanationText = '\u0413\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u0443\u0435\u0442 \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0439 \u0432\u043a\u043b\u0430\u0434 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u0443\u044e \u0438 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.';\n }\n daoExplanation.textContent = explanationText;\n }\n\n reputationSlider.addEventListener('input', (e) => {\n updateDaoChart(parseInt(e.target.value, 10));\n });\n\n updateDaoChart(50);\n\n\n \/\/ Smooth scrolling for nav links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n \/\/ Active nav link on scroll\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('header nav a');\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.toggle('active', link.getAttribute('href').substring(1) === entry.target.id);\n });\n }\n });\n }, { rootMargin: '-50% 0px -50% 0px' });\n\n sections.forEach(section => {\n observer.observe(section);\n });\n\n});\n<\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 White Paper: hobbi.st hobbi.st \u0424\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u044f \u0414\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u044c \u0422\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0420\u0430\u0441\u043a\u0440\u043e\u0439 \u0441\u0432\u043e\u0439 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b. \u0418\u0437\u043c\u0435\u043d\u0438 \u043c\u0438\u0440. hobbi.st \u2014 \u044d\u0442\u043e \u0440\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u0432\u0430\u0448\u0435 \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0434\u0435\u043b\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0438\u0433\u0440\u0443, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u043e\u0432\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0443, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u043b\u044e\u0431\u0432\u0438 \u0438 \u0432\u043a\u043b\u0430\u0434\u0435. \u0423\u0437\u043d\u0430\u0442\u044c \u043a\u0430\u043a \u041d\u043e\u0432\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430: \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0430 \u041b\u044e\u0431\u0432\u0438 hobbi.st \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043b\u0435\u0436\u0438\u0442 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-11581","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/comments?post=11581"}],"version-history":[{"count":0,"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/pages\/11581\/revisions"}],"wp:attachment":[{"href":"https:\/\/khatm.hobbi.st\/kk\/wp-json\/wp\/v2\/media?parent=11581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}