\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');\n \n body {\n font-family: 'Noto Sans Arabic', 'Inter', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n }\n\n .prose h1, .prose h2, .prose h3 {\n color: #e2e8f0;\n }\n\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n }\n\n input[type=range]::-moz-range-thumb {\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: none;\n }\n\n canvas {\n background: #020617;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n \/* Custom scrollbar for dark theme *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #1e293b;\n }\n ::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n \n <div id=\"project-docs\" class=\"max-w-4xl mx-auto mt-8 mb-8 p-6 bg-slate-900 rounded-lg shadow-sm border border-slate-800 hidden\">\n <h2 class=\"text-xl font-bold mb-4 text-purple-400\">\u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <p>\u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 “\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629”. \u064a\u062a\u0636\u0645\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a).<\/li>\n <li>\u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643.<\/li>\n <li>\u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645.<\/li>\n <li>\u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"root\"><\/div>\n\n \n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useMemo, useCallback } = React;\n\n \/\/ ==========================================\n \/\/ 1. DATA SOURCE: gaseousState.ts\n \/\/ ==========================================\n const GASEOUS_STATE = `\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n [[COMPONENT:GasSimulation]]\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n [[COMPONENT:BoyleLawSimulation]]\n [[COMPONENT:BoyleLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n [[COMPONENT:CharlesLawSimulation]]\n [[COMPONENT:CharlesLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n [[COMPONENT:GayLussacLawSimulation]]\n [[COMPONENT:GayLussacLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n [[COMPONENT:AvogadroLawSimulation]]\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + ...<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n [[COMPONENT:DaltonLawSimulation]]\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham's Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n [[COMPONENT:GrahamLawSimulation]]\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n `;\n\n \/\/ ==========================================\n \/\/ 2. COMPILED COMPONENTS\n \/\/ ==========================================\n\n \/\/ --- AvogadroLawSimulation ---\n const AvogadroLawSimulation = () => {\n const canvasRef = useRef(null);\n const minParticles = 20;\n const maxParticles = 100;\n const [numParticles, setNumParticles] = useState(60); \n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const volumeRatio = (numParticles \/ maxParticles);\n const volume = (volumeRatio * 8) + 2;\n\n const handleReset = () => setNumParticles(60);\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n newParticles.push({\n id: i,\n x: Math.random() * containerWidth,\n y: Math.random() * containerMaxHeight,\n vx: (Math.random() - 0.5) * 3,\n vy: (Math.random() - 0.5) * 3,\n radius: 3,\n });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (numParticles \/ maxParticles);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n const activeParticles = particlesRef.current;\n for (let i = 0; i < numParticles; i++) {\n const p = activeParticles[i];\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath();\n context.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n context.fillStyle = '#c4b5fd';\n context.fill();\n context.closePath();\n }\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [numParticles]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div className=\"flex justify-between items-center mb-4\">\n <h3 className=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button onClick={handleReset} className=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div className=\"flex flex-col justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <label className=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div className=\"flex items-center gap-2\">\n <button onClick={() => setNumParticles(n => Math.max(minParticles, n - 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" min={minParticles} max={maxParticles} step=\"1\" value={numParticles} onChange={(e) => setNumParticles(parseInt(e.target.value, 10))} className=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <button onClick={() => setNumParticles(n => Math.min(maxParticles, n + 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u0643\u0645\u064a\u0629 (n): {numParticles} \u062c\u0633\u064a\u0645<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawGraph ---\n const BoyleLawGraph = () => {\n const [volume, setVolume] = useState(5);\n const k = 40;\n const pressure = k \/ volume;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n const getX = (v) => padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const pathData = useMemo(() => {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) { path += ` L ${getX(v)} ${getY(k \/ v)}`; }\n return path;\n }, []);\n const currentX = getX(volume);\n const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <path d={pathData} fill=\"none\" stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min=\"1\" max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)} \u0644\u062a\u0631<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawSimulation ---\n const BoyleLawSimulation = () => {\n const canvasRef = useRef(null);\n const [volume, setVolume] = useState(7);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (volume \/ maxVolume);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, 0, containerWidth, pistonHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [volume]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-8 h-32 bg-slate-700\/50 rounded-lg relative overflow-hidden\">\n <div className=\"absolute bottom-0 w-full bg-red-500 transition-all duration-200\" style={{height: `${(pressure\/maxPressure)*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minVolume} max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)}<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawGraph ---\n const CharlesLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.05; const volume = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxVolume = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (v) => height - padding - (v \/ maxVolume) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(volume);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(2)} L<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawSimulation ---\n const CharlesLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350; const containerMaxHeight = 280;\n const numParticles = 40;\n const volumeRatio = (temperatureK \/ maxTempK);\n const volume = (volumeRatio * 8) + 2;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speedMultiplier; p.y += p.vy * speedMultiplier;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-6 h-32 bg-slate-700\/50 rounded-full relative overflow-hidden border-2 border-slate-600\">\n <div className=\"absolute bottom-0 w-full bg-orange-500 transition-all duration-200\" style={{height: `${((temperatureK-minTempK)\/(maxTempK-minTempK))*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- DaltonLawSimulation ---\n const DaltonLawSimulation = () => {\n const canvasRef = useRef(null);\n const [numA, setNumA] = useState(25);\n const [numB, setNumB] = useState(25);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressureA = numA * 0.5; const pressureB = numB * 0.5;\n const totalP = pressureA + pressureB;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < numA; i++) newP.push({ type: 'A', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#c4b5fd' });\n for (let i = 0; i < numB; i++) newP.push({ type: 'B', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#5eead4' });\n particlesRef.current = newP;\n }, [numA, numB]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = p.color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, []);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/h3>\n <div className=\"flex justify-center items-center gap-4\">\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-purple-400\" style={{height:`${(pressureA\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(A)<\/span><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-teal-400\" style={{height:`${(pressureB\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(B)<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-4 mt-4\">\n <input type=\"range\" min=\"0\" max=\"50\" value={numA} onChange={e => setNumA(parseInt(e.target.value))} className=\"accent-purple-400\" \/>\n <input type=\"range\" min=\"0\" max=\"50\" value={numB} onChange={e => setNumB(parseInt(e.target.value))} className=\"accent-teal-400\" \/>\n <\/div>\n <div className=\"mt-4 text-center p-2 bg-slate-800 rounded font-mono\">\n P_Total ({totalP.toFixed(1)}) = P_A ({pressureA.toFixed(1)}) + P_B ({pressureB.toFixed(1)})\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GasSimulation ---\n const GasSimulation = () => {\n const canvasRef = useRef(null);\n const [gasType, setGasType] = useState('ideal');\n const [temperature, setTemperature] = useState(5);\n const [pressure, setPressure] = useState(3);\n const particlesRef = useRef([]);\n const width = 450; const initialHeight = 300;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 60; i++) newP.push({ x: Math.random() * width, y: Math.random() * initialHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 2, color: '#a78bfa' });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const h = initialHeight * (1 - (pressure - 1) \/ 12);\n context.clearRect(0, 0, width, initialHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, width, h);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, width, h);\n particlesRef.current.forEach((p, i) => {\n const speed = temperature \/ 5;\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > h) p.vy *= -1;\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n particlesRef.current.forEach((other, j) => {\n if (i === j) return;\n const dx = other.x - p.x; const dy = other.y - p.y;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if (dist < 30) { p.vx += dx*0.001; p.vy += dy*0.001; }\n });\n }\n context.beginPath(); context.arc(p.x, p.y, gasType === 'ideal' ? 2 : 4, 0, Math.PI * 2); context.fillStyle = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [gasType, temperature, pressure]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <canvas ref={canvasRef} width={width} height={initialHeight} className=\"rounded-md w-full mb-4\" \/>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"flex flex-col items-center\">\n <label className=\"text-xs mb-1\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div className=\"flex gap-2 bg-slate-800 p-1 rounded\">\n <button onClick={() => setGasType('ideal')} className={`px-2 py-1 rounded ${gasType==='ideal'?'bg-purple-600':''}`}>\u0645\u062b\u0627\u0644\u064a<\/button>\n <button onClick={() => setGasType('real')} className={`px-2 py-1 rounded ${gasType==='real'?'bg-teal-600':''}`}>\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label><input type=\"range\" min=\"1\" max=\"10\" value={temperature} onChange={e=>setTemperature(parseInt(e.target.value))} \/><\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u0636\u063a\u0637<\/label><input type=\"range\" min=\"1\" max=\"10\" value={pressure} onChange={e=>setPressure(parseInt(e.target.value))} \/><\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawGraph ---\n const GayLussacLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.1; const pressure = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxPressure = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(2)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawSimulation ---\n const GayLussacLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressure = temperatureK * 0.1;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 40; i++) newP.push({ x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const speed = Math.sqrt(temperatureK \/ 100);\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <div className=\"flex justify-center items-center gap-6\">\n <div className=\"w-6 h-32 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-red-500\" style={{height:`${(pressure\/50)*100}%`}}><\/div><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"w-6 h-32 bg-slate-700 rounded-full relative overflow-hidden\"><div className=\"absolute bottom-0 w-full bg-orange-500\" style={{height:`${((temperatureK-100)\/400)*100}%`}}><\/div><\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} value={temperatureK} onChange={e=>setTemperatureK(parseInt(e.target.value))} className=\"w-full accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0633\u0628\u064a: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GrahamLawSimulation ---\n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n\n const GrahamLawSimulation = () => {\n const canvasRef = useRef(null);\n const [gasAKey, setGasAKey] = useState('h2');\n const [gasBKey, setGasBKey] = useState('sf6');\n const [state, setState] = useState('idle');\n const particlesRef = useRef([]);\n const width = 400; const height = 200;\n\n const init = () => {\n const p = [];\n const sA = Math.sqrt(146 \/ GASES[gasAKey].molarMass);\n const sB = Math.sqrt(146 \/ GASES[gasBKey].molarMass);\n for (let i=0; i<40; i++) p.push({ key: gasAKey, x: Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sA, vy: (Math.random()-0.5)*sA });\n for (let i=0; i<40; i++) p.push({ key: gasBKey, x: 220+Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sB, vy: (Math.random()-0.5)*sB });\n particlesRef.current = p;\n };\n\n useEffect(() => { init(); }, [gasAKey, gasBKey]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, width, height);\n context.strokeStyle = 'white'; context.strokeRect(0, 0, width, height);\n if (state === 'idle') { context.beginPath(); context.moveTo(200, 0); context.lineTo(200, height); context.stroke(); }\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > height) p.vy *= -1;\n if (state === 'idle') {\n if (p.key === gasAKey && p.x > 197) p.vx *= -1;\n if (p.key === gasBKey && p.x < 203) p.vx *= -1;\n }\n context.beginPath(); context.arc(p.x, p.y, 3, 0, Math.PI*2); context.fillStyle = GASES[p.key].color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [state]);\n\n return (\n <div className=\"not-prose my-8 p-4 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-center mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/h3>\n <div className=\"flex flex-col md:flex-row gap-4 items-center justify-center\">\n <div className=\"space-y-2\">\n <select value={gasAKey} onChange={e=>setGasAKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <select value={gasBKey} onChange={e=>setGasBKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <button onClick={() => setState(state==='idle'?'running':'idle')} className=\"w-full bg-purple-600 p-2 rounded\">{state==='idle'?'\u0628\u062f\u0621':'\u0625\u0639\u0627\u062f\u0629'}<\/button>\n <\/div>\n <canvas ref={canvasRef} width={width} height={height} className=\"rounded bg-slate-900\" \/>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ==========================================\n \/\/ 3. MAIN APPLICATION ORCHESTRATOR\n \/\/ ==========================================\n\n const App = () => {\n const renderContent = () => {\n const parts = GASEOUS_STATE.split(\/\\[\\[COMPONENT:(\\w+)\\]\\]\/);\n return parts.map((part, index) => {\n if (index % 2 === 0) {\n return <div key={index} dangerouslySetInnerHTML={{ __html: part }} \/>;\n } else {\n switch (part) {\n case 'GasSimulation': return <GasSimulation key={index} \/>;\n case 'BoyleLawSimulation': return <BoyleLawSimulation key={index} \/>;\n case 'BoyleLawGraph': return <BoyleLawGraph key={index} \/>;\n case 'CharlesLawSimulation': return <CharlesLawSimulation key={index} \/>;\n case 'CharlesLawGraph': return <CharlesLawGraph key={index} \/>;\n case 'GayLussacLawSimulation': return <GayLussacLawSimulation key={index} \/>;\n case 'GayLussacLawGraph': return <GayLussacLawGraph key={index} \/>;\n case 'AvogadroLawSimulation': return <AvogadroLawSimulation key={index} \/>;\n case 'DaltonLawSimulation': return <DaltonLawSimulation key={index} \/>;\n case 'GrahamLawSimulation': return <GrahamLawSimulation key={index} \/>;\n default: return null;\n }\n }\n });\n };\n\n useEffect(() => {\n const docs = document.getElementById('project-docs');\n if (docs) docs.classList.remove('hidden');\n }, []);\n\n return (\n <div className=\"max-w-4xl mx-auto px-4 py-12\">\n <div className=\"bg-slate-900\/40 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 sm:p-10 shadow-2xl\">\n {renderContent()}\n <\/div>\n <footer className=\"mt-12 text-center text-slate-500 text-sm pb-8\">\n <p>\u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0643\u0623\u062f\u0627\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0621<\/p>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ 4. MOUNTING LOGIC\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bad2c7c e-flex e-con-boxed e-con e-parent\" data-id=\"bad2c7c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b72781f elementor-widget elementor-widget-html\" data-id=\"b72781f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');\n \n body {\n font-family: 'Noto Sans Arabic', 'Inter', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n }\n\n .prose h1, .prose h2, .prose h3 {\n color: #e2e8f0;\n }\n\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n }\n\n input[type=range]::-moz-range-thumb {\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: none;\n }\n\n canvas {\n background: #020617;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n \/* Custom scrollbar for dark theme *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #1e293b;\n }\n ::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n \n <div id=\"project-docs\" class=\"max-w-4xl mx-auto mt-8 mb-8 p-6 bg-slate-900 rounded-lg shadow-sm border border-slate-800 hidden\">\n <h2 class=\"text-xl font-bold mb-4 text-purple-400\">\u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <p>\u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 \"\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629\". \u064a\u062a\u0636\u0645\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a).<\/li>\n <li>\u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643.<\/li>\n <li>\u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645.<\/li>\n <li>\u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"root\"><\/div>\n\n \n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useMemo, useCallback } = React;\n\n \/\/ ==========================================\n \/\/ 1. DATA SOURCE: gaseousState.ts\n \/\/ ==========================================\n const GASEOUS_STATE = `\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n [[COMPONENT:GasSimulation]]\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n [[COMPONENT:BoyleLawSimulation]]\n [[COMPONENT:BoyleLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n [[COMPONENT:CharlesLawSimulation]]\n [[COMPONENT:CharlesLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n [[COMPONENT:GayLussacLawSimulation]]\n [[COMPONENT:GayLussacLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n [[COMPONENT:AvogadroLawSimulation]]\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + ...<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n [[COMPONENT:DaltonLawSimulation]]\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham's Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n [[COMPONENT:GrahamLawSimulation]]\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n `;\n\n \/\/ ==========================================\n \/\/ 2. COMPILED COMPONENTS\n \/\/ ==========================================\n\n \/\/ --- AvogadroLawSimulation ---\n const AvogadroLawSimulation = () => {\n const canvasRef = useRef(null);\n const minParticles = 20;\n const maxParticles = 100;\n const [numParticles, setNumParticles] = useState(60); \n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const volumeRatio = (numParticles \/ maxParticles);\n const volume = (volumeRatio * 8) + 2;\n\n const handleReset = () => setNumParticles(60);\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n newParticles.push({\n id: i,\n x: Math.random() * containerWidth,\n y: Math.random() * containerMaxHeight,\n vx: (Math.random() - 0.5) * 3,\n vy: (Math.random() - 0.5) * 3,\n radius: 3,\n });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (numParticles \/ maxParticles);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n const activeParticles = particlesRef.current;\n for (let i = 0; i < numParticles; i++) {\n const p = activeParticles[i];\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath();\n context.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n context.fillStyle = '#c4b5fd';\n context.fill();\n context.closePath();\n }\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [numParticles]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div className=\"flex justify-between items-center mb-4\">\n <h3 className=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button onClick={handleReset} className=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div className=\"flex flex-col justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <label className=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div className=\"flex items-center gap-2\">\n <button onClick={() => setNumParticles(n => Math.max(minParticles, n - 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" min={minParticles} max={maxParticles} step=\"1\" value={numParticles} onChange={(e) => setNumParticles(parseInt(e.target.value, 10))} className=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <button onClick={() => setNumParticles(n => Math.min(maxParticles, n + 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u0643\u0645\u064a\u0629 (n): {numParticles} \u062c\u0633\u064a\u0645<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawGraph ---\n const BoyleLawGraph = () => {\n const [volume, setVolume] = useState(5);\n const k = 40;\n const pressure = k \/ volume;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n const getX = (v) => padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const pathData = useMemo(() => {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) { path += ` L ${getX(v)} ${getY(k \/ v)}`; }\n return path;\n }, []);\n const currentX = getX(volume);\n const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <path d={pathData} fill=\"none\" stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min=\"1\" max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)} \u0644\u062a\u0631<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawSimulation ---\n const BoyleLawSimulation = () => {\n const canvasRef = useRef(null);\n const [volume, setVolume] = useState(7);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (volume \/ maxVolume);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, 0, containerWidth, pistonHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [volume]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-8 h-32 bg-slate-700\/50 rounded-lg relative overflow-hidden\">\n <div className=\"absolute bottom-0 w-full bg-red-500 transition-all duration-200\" style={{height: `${(pressure\/maxPressure)*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minVolume} max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)}<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawGraph ---\n const CharlesLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.05; const volume = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxVolume = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (v) => height - padding - (v \/ maxVolume) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(volume);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(2)} L<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawSimulation ---\n const CharlesLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350; const containerMaxHeight = 280;\n const numParticles = 40;\n const volumeRatio = (temperatureK \/ maxTempK);\n const volume = (volumeRatio * 8) + 2;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speedMultiplier; p.y += p.vy * speedMultiplier;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-6 h-32 bg-slate-700\/50 rounded-full relative overflow-hidden border-2 border-slate-600\">\n <div className=\"absolute bottom-0 w-full bg-orange-500 transition-all duration-200\" style={{height: `${((temperatureK-minTempK)\/(maxTempK-minTempK))*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- DaltonLawSimulation ---\n const DaltonLawSimulation = () => {\n const canvasRef = useRef(null);\n const [numA, setNumA] = useState(25);\n const [numB, setNumB] = useState(25);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressureA = numA * 0.5; const pressureB = numB * 0.5;\n const totalP = pressureA + pressureB;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < numA; i++) newP.push({ type: 'A', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#c4b5fd' });\n for (let i = 0; i < numB; i++) newP.push({ type: 'B', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#5eead4' });\n particlesRef.current = newP;\n }, [numA, numB]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = p.color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, []);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/h3>\n <div className=\"flex justify-center items-center gap-4\">\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-purple-400\" style={{height:`${(pressureA\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(A)<\/span><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-teal-400\" style={{height:`${(pressureB\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(B)<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-4 mt-4\">\n <input type=\"range\" min=\"0\" max=\"50\" value={numA} onChange={e => setNumA(parseInt(e.target.value))} className=\"accent-purple-400\" \/>\n <input type=\"range\" min=\"0\" max=\"50\" value={numB} onChange={e => setNumB(parseInt(e.target.value))} className=\"accent-teal-400\" \/>\n <\/div>\n <div className=\"mt-4 text-center p-2 bg-slate-800 rounded font-mono\">\n P_Total ({totalP.toFixed(1)}) = P_A ({pressureA.toFixed(1)}) + P_B ({pressureB.toFixed(1)})\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GasSimulation ---\n const GasSimulation = () => {\n const canvasRef = useRef(null);\n const [gasType, setGasType] = useState('ideal');\n const [temperature, setTemperature] = useState(5);\n const [pressure, setPressure] = useState(3);\n const particlesRef = useRef([]);\n const width = 450; const initialHeight = 300;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 60; i++) newP.push({ x: Math.random() * width, y: Math.random() * initialHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 2, color: '#a78bfa' });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const h = initialHeight * (1 - (pressure - 1) \/ 12);\n context.clearRect(0, 0, width, initialHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, width, h);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, width, h);\n particlesRef.current.forEach((p, i) => {\n const speed = temperature \/ 5;\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > h) p.vy *= -1;\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n particlesRef.current.forEach((other, j) => {\n if (i === j) return;\n const dx = other.x - p.x; const dy = other.y - p.y;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if (dist < 30) { p.vx += dx*0.001; p.vy += dy*0.001; }\n });\n }\n context.beginPath(); context.arc(p.x, p.y, gasType === 'ideal' ? 2 : 4, 0, Math.PI * 2); context.fillStyle = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [gasType, temperature, pressure]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <canvas ref={canvasRef} width={width} height={initialHeight} className=\"rounded-md w-full mb-4\" \/>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"flex flex-col items-center\">\n <label className=\"text-xs mb-1\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div className=\"flex gap-2 bg-slate-800 p-1 rounded\">\n <button onClick={() => setGasType('ideal')} className={`px-2 py-1 rounded ${gasType==='ideal'?'bg-purple-600':''}`}>\u0645\u062b\u0627\u0644\u064a<\/button>\n <button onClick={() => setGasType('real')} className={`px-2 py-1 rounded ${gasType==='real'?'bg-teal-600':''}`}>\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label><input type=\"range\" min=\"1\" max=\"10\" value={temperature} onChange={e=>setTemperature(parseInt(e.target.value))} \/><\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u0636\u063a\u0637<\/label><input type=\"range\" min=\"1\" max=\"10\" value={pressure} onChange={e=>setPressure(parseInt(e.target.value))} \/><\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawGraph ---\n const GayLussacLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.1; const pressure = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxPressure = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(2)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawSimulation ---\n const GayLussacLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressure = temperatureK * 0.1;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 40; i++) newP.push({ x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const speed = Math.sqrt(temperatureK \/ 100);\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <div className=\"flex justify-center items-center gap-6\">\n <div className=\"w-6 h-32 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-red-500\" style={{height:`${(pressure\/50)*100}%`}}><\/div><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"w-6 h-32 bg-slate-700 rounded-full relative overflow-hidden\"><div className=\"absolute bottom-0 w-full bg-orange-500\" style={{height:`${((temperatureK-100)\/400)*100}%`}}><\/div><\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} value={temperatureK} onChange={e=>setTemperatureK(parseInt(e.target.value))} className=\"w-full accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0633\u0628\u064a: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GrahamLawSimulation ---\n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n\n const GrahamLawSimulation = () => {\n const canvasRef = useRef(null);\n const [gasAKey, setGasAKey] = useState('h2');\n const [gasBKey, setGasBKey] = useState('sf6');\n const [state, setState] = useState('idle');\n const particlesRef = useRef([]);\n const width = 400; const height = 200;\n\n const init = () => {\n const p = [];\n const sA = Math.sqrt(146 \/ GASES[gasAKey].molarMass);\n const sB = Math.sqrt(146 \/ GASES[gasBKey].molarMass);\n for (let i=0; i<40; i++) p.push({ key: gasAKey, x: Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sA, vy: (Math.random()-0.5)*sA });\n for (let i=0; i<40; i++) p.push({ key: gasBKey, x: 220+Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sB, vy: (Math.random()-0.5)*sB });\n particlesRef.current = p;\n };\n\n useEffect(() => { init(); }, [gasAKey, gasBKey]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, width, height);\n context.strokeStyle = 'white'; context.strokeRect(0, 0, width, height);\n if (state === 'idle') { context.beginPath(); context.moveTo(200, 0); context.lineTo(200, height); context.stroke(); }\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > height) p.vy *= -1;\n if (state === 'idle') {\n if (p.key === gasAKey && p.x > 197) p.vx *= -1;\n if (p.key === gasBKey && p.x < 203) p.vx *= -1;\n }\n context.beginPath(); context.arc(p.x, p.y, 3, 0, Math.PI*2); context.fillStyle = GASES[p.key].color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [state]);\n\n return (\n <div className=\"not-prose my-8 p-4 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-center mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/h3>\n <div className=\"flex flex-col md:flex-row gap-4 items-center justify-center\">\n <div className=\"space-y-2\">\n <select value={gasAKey} onChange={e=>setGasAKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <select value={gasBKey} onChange={e=>setGasBKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <button onClick={() => setState(state==='idle'?'running':'idle')} className=\"w-full bg-purple-600 p-2 rounded\">{state==='idle'?'\u0628\u062f\u0621':'\u0625\u0639\u0627\u062f\u0629'}<\/button>\n <\/div>\n <canvas ref={canvasRef} width={width} height={height} className=\"rounded bg-slate-900\" \/>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ==========================================\n \/\/ 3. MAIN APPLICATION ORCHESTRATOR\n \/\/ ==========================================\n\n const App = () => {\n const renderContent = () => {\n const parts = GASEOUS_STATE.split(\/\\[\\[COMPONENT:(\\w+)\\]\\]\/);\n return parts.map((part, index) => {\n if (index % 2 === 0) {\n return <div key={index} dangerouslySetInnerHTML={{ __html: part }} \/>;\n } else {\n switch (part) {\n case 'GasSimulation': return <GasSimulation key={index} \/>;\n case 'BoyleLawSimulation': return <BoyleLawSimulation key={index} \/>;\n case 'BoyleLawGraph': return <BoyleLawGraph key={index} \/>;\n case 'CharlesLawSimulation': return <CharlesLawSimulation key={index} \/>;\n case 'CharlesLawGraph': return <CharlesLawGraph key={index} \/>;\n case 'GayLussacLawSimulation': return <GayLussacLawSimulation key={index} \/>;\n case 'GayLussacLawGraph': return <GayLussacLawGraph key={index} \/>;\n case 'AvogadroLawSimulation': return <AvogadroLawSimulation key={index} \/>;\n case 'DaltonLawSimulation': return <DaltonLawSimulation key={index} \/>;\n case 'GrahamLawSimulation': return <GrahamLawSimulation key={index} \/>;\n default: return null;\n }\n }\n });\n };\n\n useEffect(() => {\n const docs = document.getElementById('project-docs');\n if (docs) docs.classList.remove('hidden');\n }, []);\n\n return (\n <div className=\"max-w-4xl mx-auto px-4 py-12\">\n <div className=\"bg-slate-900\/40 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 sm:p-10 shadow-2xl\">\n {renderContent()}\n <\/div>\n <footer className=\"mt-12 text-center text-slate-500 text-sm pb-8\">\n <p>\u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0643\u0623\u062f\u0627\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0621<\/p>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ 4. MOUNTING LOGIC\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 “\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629”. \u064a\u062a\u0636\u0645\u0646: \u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a). \u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643. \u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645. \u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629. \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-16839","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=16839"}],"version-history":[{"count":7,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839\/revisions"}],"predecessor-version":[{"id":16846,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839\/revisions\/16846"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=16839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n\n \n \n \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');\n \n body {\n font-family: 'Noto Sans Arabic', 'Inter', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n }\n\n .prose h1, .prose h2, .prose h3 {\n color: #e2e8f0;\n }\n\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n }\n\n input[type=range]::-moz-range-thumb {\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: none;\n }\n\n canvas {\n background: #020617;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n \/* Custom scrollbar for dark theme *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #1e293b;\n }\n ::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n \n <div id=\"project-docs\" class=\"max-w-4xl mx-auto mt-8 mb-8 p-6 bg-slate-900 rounded-lg shadow-sm border border-slate-800 hidden\">\n <h2 class=\"text-xl font-bold mb-4 text-purple-400\">\u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <p>\u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 “\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629”. \u064a\u062a\u0636\u0645\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a).<\/li>\n <li>\u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643.<\/li>\n <li>\u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645.<\/li>\n <li>\u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"root\"><\/div>\n\n \n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useMemo, useCallback } = React;\n\n \/\/ ==========================================\n \/\/ 1. DATA SOURCE: gaseousState.ts\n \/\/ ==========================================\n const GASEOUS_STATE = `\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n [[COMPONENT:GasSimulation]]\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n [[COMPONENT:BoyleLawSimulation]]\n [[COMPONENT:BoyleLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n [[COMPONENT:CharlesLawSimulation]]\n [[COMPONENT:CharlesLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n [[COMPONENT:GayLussacLawSimulation]]\n [[COMPONENT:GayLussacLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n [[COMPONENT:AvogadroLawSimulation]]\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + ...<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>📝<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n [[COMPONENT:DaltonLawSimulation]]\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham's Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n [[COMPONENT:GrahamLawSimulation]]\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n `;\n\n \/\/ ==========================================\n \/\/ 2. COMPILED COMPONENTS\n \/\/ ==========================================\n\n \/\/ --- AvogadroLawSimulation ---\n const AvogadroLawSimulation = () => {\n const canvasRef = useRef(null);\n const minParticles = 20;\n const maxParticles = 100;\n const [numParticles, setNumParticles] = useState(60); \n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const volumeRatio = (numParticles \/ maxParticles);\n const volume = (volumeRatio * 8) + 2;\n\n const handleReset = () => setNumParticles(60);\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n newParticles.push({\n id: i,\n x: Math.random() * containerWidth,\n y: Math.random() * containerMaxHeight,\n vx: (Math.random() - 0.5) * 3,\n vy: (Math.random() - 0.5) * 3,\n radius: 3,\n });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (numParticles \/ maxParticles);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n const activeParticles = particlesRef.current;\n for (let i = 0; i < numParticles; i++) {\n const p = activeParticles[i];\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath();\n context.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n context.fillStyle = '#c4b5fd';\n context.fill();\n context.closePath();\n }\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [numParticles]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div className=\"flex justify-between items-center mb-4\">\n <h3 className=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button onClick={handleReset} className=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div className=\"flex flex-col justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <label className=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div className=\"flex items-center gap-2\">\n <button onClick={() => setNumParticles(n => Math.max(minParticles, n - 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" min={minParticles} max={maxParticles} step=\"1\" value={numParticles} onChange={(e) => setNumParticles(parseInt(e.target.value, 10))} className=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <button onClick={() => setNumParticles(n => Math.min(maxParticles, n + 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u0643\u0645\u064a\u0629 (n): {numParticles} \u062c\u0633\u064a\u0645<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawGraph ---\n const BoyleLawGraph = () => {\n const [volume, setVolume] = useState(5);\n const k = 40;\n const pressure = k \/ volume;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n const getX = (v) => padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const pathData = useMemo(() => {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) { path += ` L ${getX(v)} ${getY(k \/ v)}`; }\n return path;\n }, []);\n const currentX = getX(volume);\n const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <path d={pathData} fill=\"none\" stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min=\"1\" max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)} \u0644\u062a\u0631<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawSimulation ---\n const BoyleLawSimulation = () => {\n const canvasRef = useRef(null);\n const [volume, setVolume] = useState(7);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (volume \/ maxVolume);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, 0, containerWidth, pistonHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [volume]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-8 h-32 bg-slate-700\/50 rounded-lg relative overflow-hidden\">\n <div className=\"absolute bottom-0 w-full bg-red-500 transition-all duration-200\" style={{height: `${(pressure\/maxPressure)*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minVolume} max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)}<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawGraph ---\n const CharlesLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.05; const volume = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxVolume = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (v) => height - padding - (v \/ maxVolume) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(volume);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(2)} L<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawSimulation ---\n const CharlesLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350; const containerMaxHeight = 280;\n const numParticles = 40;\n const volumeRatio = (temperatureK \/ maxTempK);\n const volume = (volumeRatio * 8) + 2;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speedMultiplier; p.y += p.vy * speedMultiplier;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-6 h-32 bg-slate-700\/50 rounded-full relative overflow-hidden border-2 border-slate-600\">\n <div className=\"absolute bottom-0 w-full bg-orange-500 transition-all duration-200\" style={{height: `${((temperatureK-minTempK)\/(maxTempK-minTempK))*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- DaltonLawSimulation ---\n const DaltonLawSimulation = () => {\n const canvasRef = useRef(null);\n const [numA, setNumA] = useState(25);\n const [numB, setNumB] = useState(25);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressureA = numA * 0.5; const pressureB = numB * 0.5;\n const totalP = pressureA + pressureB;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < numA; i++) newP.push({ type: 'A', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#c4b5fd' });\n for (let i = 0; i < numB; i++) newP.push({ type: 'B', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#5eead4' });\n particlesRef.current = newP;\n }, [numA, numB]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = p.color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, []);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/h3>\n <div className=\"flex justify-center items-center gap-4\">\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-purple-400\" style={{height:`${(pressureA\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(A)<\/span><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-teal-400\" style={{height:`${(pressureB\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(B)<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-4 mt-4\">\n <input type=\"range\" min=\"0\" max=\"50\" value={numA} onChange={e => setNumA(parseInt(e.target.value))} className=\"accent-purple-400\" \/>\n <input type=\"range\" min=\"0\" max=\"50\" value={numB} onChange={e => setNumB(parseInt(e.target.value))} className=\"accent-teal-400\" \/>\n <\/div>\n <div className=\"mt-4 text-center p-2 bg-slate-800 rounded font-mono\">\n P_Total ({totalP.toFixed(1)}) = P_A ({pressureA.toFixed(1)}) + P_B ({pressureB.toFixed(1)})\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GasSimulation ---\n const GasSimulation = () => {\n const canvasRef = useRef(null);\n const [gasType, setGasType] = useState('ideal');\n const [temperature, setTemperature] = useState(5);\n const [pressure, setPressure] = useState(3);\n const particlesRef = useRef([]);\n const width = 450; const initialHeight = 300;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 60; i++) newP.push({ x: Math.random() * width, y: Math.random() * initialHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 2, color: '#a78bfa' });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const h = initialHeight * (1 - (pressure - 1) \/ 12);\n context.clearRect(0, 0, width, initialHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, width, h);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, width, h);\n particlesRef.current.forEach((p, i) => {\n const speed = temperature \/ 5;\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > h) p.vy *= -1;\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n particlesRef.current.forEach((other, j) => {\n if (i === j) return;\n const dx = other.x - p.x; const dy = other.y - p.y;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if (dist < 30) { p.vx += dx*0.001; p.vy += dy*0.001; }\n });\n }\n context.beginPath(); context.arc(p.x, p.y, gasType === 'ideal' ? 2 : 4, 0, Math.PI * 2); context.fillStyle = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [gasType, temperature, pressure]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <canvas ref={canvasRef} width={width} height={initialHeight} className=\"rounded-md w-full mb-4\" \/>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"flex flex-col items-center\">\n <label className=\"text-xs mb-1\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div className=\"flex gap-2 bg-slate-800 p-1 rounded\">\n <button onClick={() => setGasType('ideal')} className={`px-2 py-1 rounded ${gasType==='ideal'?'bg-purple-600':''}`}>\u0645\u062b\u0627\u0644\u064a<\/button>\n <button onClick={() => setGasType('real')} className={`px-2 py-1 rounded ${gasType==='real'?'bg-teal-600':''}`}>\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label><input type=\"range\" min=\"1\" max=\"10\" value={temperature} onChange={e=>setTemperature(parseInt(e.target.value))} \/><\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u0636\u063a\u0637<\/label><input type=\"range\" min=\"1\" max=\"10\" value={pressure} onChange={e=>setPressure(parseInt(e.target.value))} \/><\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawGraph ---\n const GayLussacLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.1; const pressure = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxPressure = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(2)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawSimulation ---\n const GayLussacLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressure = temperatureK * 0.1;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 40; i++) newP.push({ x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const speed = Math.sqrt(temperatureK \/ 100);\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <div className=\"flex justify-center items-center gap-6\">\n <div className=\"w-6 h-32 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-red-500\" style={{height:`${(pressure\/50)*100}%`}}><\/div><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"w-6 h-32 bg-slate-700 rounded-full relative overflow-hidden\"><div className=\"absolute bottom-0 w-full bg-orange-500\" style={{height:`${((temperatureK-100)\/400)*100}%`}}><\/div><\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} value={temperatureK} onChange={e=>setTemperatureK(parseInt(e.target.value))} className=\"w-full accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0633\u0628\u064a: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GrahamLawSimulation ---\n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n\n const GrahamLawSimulation = () => {\n const canvasRef = useRef(null);\n const [gasAKey, setGasAKey] = useState('h2');\n const [gasBKey, setGasBKey] = useState('sf6');\n const [state, setState] = useState('idle');\n const particlesRef = useRef([]);\n const width = 400; const height = 200;\n\n const init = () => {\n const p = [];\n const sA = Math.sqrt(146 \/ GASES[gasAKey].molarMass);\n const sB = Math.sqrt(146 \/ GASES[gasBKey].molarMass);\n for (let i=0; i<40; i++) p.push({ key: gasAKey, x: Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sA, vy: (Math.random()-0.5)*sA });\n for (let i=0; i<40; i++) p.push({ key: gasBKey, x: 220+Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sB, vy: (Math.random()-0.5)*sB });\n particlesRef.current = p;\n };\n\n useEffect(() => { init(); }, [gasAKey, gasBKey]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, width, height);\n context.strokeStyle = 'white'; context.strokeRect(0, 0, width, height);\n if (state === 'idle') { context.beginPath(); context.moveTo(200, 0); context.lineTo(200, height); context.stroke(); }\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > height) p.vy *= -1;\n if (state === 'idle') {\n if (p.key === gasAKey && p.x > 197) p.vx *= -1;\n if (p.key === gasBKey && p.x < 203) p.vx *= -1;\n }\n context.beginPath(); context.arc(p.x, p.y, 3, 0, Math.PI*2); context.fillStyle = GASES[p.key].color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [state]);\n\n return (\n <div className=\"not-prose my-8 p-4 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-center mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/h3>\n <div className=\"flex flex-col md:flex-row gap-4 items-center justify-center\">\n <div className=\"space-y-2\">\n <select value={gasAKey} onChange={e=>setGasAKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <select value={gasBKey} onChange={e=>setGasBKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <button onClick={() => setState(state==='idle'?'running':'idle')} className=\"w-full bg-purple-600 p-2 rounded\">{state==='idle'?'\u0628\u062f\u0621':'\u0625\u0639\u0627\u062f\u0629'}<\/button>\n <\/div>\n <canvas ref={canvasRef} width={width} height={height} className=\"rounded bg-slate-900\" \/>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ==========================================\n \/\/ 3. MAIN APPLICATION ORCHESTRATOR\n \/\/ ==========================================\n\n const App = () => {\n const renderContent = () => {\n const parts = GASEOUS_STATE.split(\/\\[\\[COMPONENT:(\\w+)\\]\\]\/);\n return parts.map((part, index) => {\n if (index % 2 === 0) {\n return <div key={index} dangerouslySetInnerHTML={{ __html: part }} \/>;\n } else {\n switch (part) {\n case 'GasSimulation': return <GasSimulation key={index} \/>;\n case 'BoyleLawSimulation': return <BoyleLawSimulation key={index} \/>;\n case 'BoyleLawGraph': return <BoyleLawGraph key={index} \/>;\n case 'CharlesLawSimulation': return <CharlesLawSimulation key={index} \/>;\n case 'CharlesLawGraph': return <CharlesLawGraph key={index} \/>;\n case 'GayLussacLawSimulation': return <GayLussacLawSimulation key={index} \/>;\n case 'GayLussacLawGraph': return <GayLussacLawGraph key={index} \/>;\n case 'AvogadroLawSimulation': return <AvogadroLawSimulation key={index} \/>;\n case 'DaltonLawSimulation': return <DaltonLawSimulation key={index} \/>;\n case 'GrahamLawSimulation': return <GrahamLawSimulation key={index} \/>;\n default: return null;\n }\n }\n });\n };\n\n useEffect(() => {\n const docs = document.getElementById('project-docs');\n if (docs) docs.classList.remove('hidden');\n }, []);\n\n return (\n <div className=\"max-w-4xl mx-auto px-4 py-12\">\n <div className=\"bg-slate-900\/40 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 sm:p-10 shadow-2xl\">\n {renderContent()}\n <\/div>\n <footer className=\"mt-12 text-center text-slate-500 text-sm pb-8\">\n <p>\u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0643\u0623\u062f\u0627\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0621<\/p>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ 4. MOUNTING LOGIC\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bad2c7c e-flex e-con-boxed e-con e-parent\" data-id=\"bad2c7c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b72781f elementor-widget elementor-widget-html\" data-id=\"b72781f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 - \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;600;700&display=swap');\n \n body {\n font-family: 'Noto Sans Arabic', 'Inter', sans-serif;\n background-color: #0f172a;\n color: #f1f5f9;\n }\n\n .prose h1, .prose h2, .prose h3 {\n color: #e2e8f0;\n }\n\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n box-shadow: 0 0 2px rgba(0,0,0,0.5);\n }\n\n input[type=range]::-moz-range-thumb {\n height: 18px;\n width: 18px;\n border-radius: 50%;\n background: #a78bfa;\n cursor: pointer;\n border: none;\n }\n\n canvas {\n background: #020617;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n \/* Custom scrollbar for dark theme *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #1e293b;\n }\n ::-webkit-scrollbar-thumb {\n background: #475569;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #64748b;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n \n <div id=\"project-docs\" class=\"max-w-4xl mx-auto mt-8 mb-8 p-6 bg-slate-900 rounded-lg shadow-sm border border-slate-800 hidden\">\n <h2 class=\"text-xl font-bold mb-4 text-purple-400\">\u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <p>\u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 \"\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629\". \u064a\u062a\u0636\u0645\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-2\">\n <li>\u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a).<\/li>\n <li>\u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643.<\/li>\n <li>\u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645.<\/li>\n <li>\u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n <div id=\"root\"><\/div>\n\n \n <script type=\"text\/babel\">\n const { useState, useEffect, useRef, useMemo, useCallback } = React;\n\n \/\/ ==========================================\n \/\/ 1. DATA SOURCE: gaseousState.ts\n \/\/ ==========================================\n const GASEOUS_STATE = `\n <div class=\"space-y-4 text-right\" dir=\"rtl\">\n <h1 class=\"text-2xl sm:text-3xl font-bold text-purple-300 mb-2\">\u0627\u0644\u062f\u0631\u0633 \u0627\u0644\u0623\u0648\u0644: \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629<\/h1>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0645\u0642\u062f\u0645\u0629: \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0627\u0645\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u062a\u0645\u064a\u0632 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0628\u0639\u062f\u0629 \u062e\u0635\u0627\u0626\u0635 \u0641\u064a\u0632\u064a\u0627\u0626\u064a\u0629 \u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631:<\/strong> \u062a\u0645\u0644\u0623 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u062a\u0648\u0636\u0639 \u0641\u064a\u0647 \u0628\u0633\u0628\u0628 \u062d\u0631\u0643\u0629 \u062c\u0632\u064a\u0626\u0627\u062a\u0647\u0627 \u0627\u0644\u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629.<\/li>\n <li><strong class=\"text-white\">\u0627\u0644\u0642\u0627\u0628\u0644\u064a\u0629 \u0644\u0644\u0627\u0646\u0636\u063a\u0627\u0637:<\/strong> \u064a\u0645\u0643\u0646 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0628\u0633\u0647\u0648\u0644\u0629 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u0628\u0633\u0628\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0628\u064a\u0646 \u062c\u0632\u064a\u0626\u0627\u062a\u0647.<\/li>\n <li><strong class=\"text-white\">\u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0636\u0639\u064a\u0641\u0629 \u062c\u062f\u064b\u0627:<\/strong> \u0645\u0645\u0627 \u064a\u0641\u0633\u0631 \u0633\u0644\u0648\u0643\u0647\u0627 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647 \u0631\u063a\u0645 \u0627\u062e\u062a\u0644\u0627\u0641 \u062a\u0631\u0643\u064a\u0628\u0647\u0627.<\/li>\n <\/ul>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629: \u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h2>\n <p class=\"mb-2 text-sm sm:text-base\">\u062a\u0641\u062a\u0631\u0636 \u0647\u0630\u0647 \u0627\u0644\u0646\u0638\u0631\u064a\u0629 \u0623\u0646:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm sm:text-base\">\n <li>\u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0645\u062a\u0646\u0627\u0647\u064a\u0629 \u0627\u0644\u0635\u063a\u0631 \u0648\u0645\u062a\u0628\u0627\u0639\u062f\u0629 \u062c\u062f\u064b\u0627 (\u0645\u0639\u0638\u0645 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0641\u0631\u0627\u063a).<\/li>\n <li>\u062a\u062a\u062d\u0631\u0643 \u0628\u0634\u0643\u0644 \u0639\u0634\u0648\u0627\u0626\u064a \u0648\u0633\u0631\u064a\u0639 \u0641\u064a \u062e\u0637\u0648\u0637 \u0645\u0633\u062a\u0642\u064a\u0645\u0629 \u0648\u062c\u0645\u064a\u0639 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a.<\/li>\n <li>\u062a\u062a\u0635\u0627\u062f\u0645 \u062a\u0635\u0627\u062f\u0645\u0627\u062a \u0645\u0631\u0646\u0629 (\u0644\u0627 \u0641\u0642\u062f\u0627\u0646 \u0641\u064a \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0643\u0644\u064a\u0629).<\/li>\n <li>\u0637\u0627\u0642\u062a\u0647\u0627 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u060c \u0641\u062a\u0632\u062f\u0627\u062f \u0633\u0631\u0639\u062a\u0647\u0627 \u0628\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <\/ul>\n <p class=\"mt-2 text-slate-400 text-xs sm:text-sm\">\u0647\u0630\u0647 \u0627\u0644\u0641\u0631\u0648\u0636 \u062a\u0641\u0633\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u0627\u0646\u0636\u063a\u0627\u0637 \u0648\u0627\u0644\u0636\u063a\u0637.<\/p>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a vs. \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3\">\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-purple-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a<\/h3>\n <p class=\"text-sm\">\u063a\u0627\u0632 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u064a\u062d\u0642\u0642 \u062c\u0645\u064a\u0639 \u0628\u0646\u0648\u062f \u0627\u0644\u0646\u0638\u0631\u064a\u0629 (\u062d\u062c\u0645 \u062c\u0632\u064a\u0626\u0627\u062a\u0647 \u0635\u0641\u0631\u060c \u0648\u0644\u0627 \u062a\u0648\u062c\u062f \u0642\u0648\u0649 \u062a\u062c\u0627\u0630\u0628 \u0628\u064a\u0646\u0647\u0627).<\/p>\n <\/div>\n <div class=\"bg-white\/5 p-3 rounded-lg border border-white\/10\">\n <h3 class=\"text-lg font-bold text-teal-300 mb-1\">\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n <p class=\"text-sm\">\u064a\u062d\u064a\u062f \u0639\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0639\u0646\u062f:<\/p>\n <ul class=\"list-disc list-inside text-xs mt-1 text-slate-300\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0648\u062a\u0638\u0647\u0631 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <li><strong>\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629:<\/strong> \u062a\u0642\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u0644\u0627 \u062a\u062a\u063a\u0644\u0628 \u0639\u0644\u0649 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <p class=\"mt-3 bg-blue-900\/20 p-2 rounded border-r-4 border-blue-500 text-slate-300 text-sm\">\n <strong class=\"text-blue-300\">\u0645\u062b\u0627\u0644:<\/strong> \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 \u064a\u0642\u062a\u0631\u0628 \u0645\u0646 \u0627\u0644\u0633\u0644\u0648\u0643 \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u060c \u0628\u064a\u0646\u0645\u0627 \u063a\u0627\u0632 \u0627\u0644\u0623\u0645\u0648\u0646\u064a\u0627 NH\u2083 \u064a\u062d\u064a\u062f \u0639\u0646\u0647 \u0628\u0633\u0628\u0628 \u0642\u0648\u0649 \u0627\u0644\u062a\u062c\u0627\u0630\u0628 \u0627\u0644\u0642\u0648\u064a\u0629.\n <\/p>\n <\/section>\n\n [[COMPONENT:GasSimulation]]\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (Pressure)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0627\u0644\u0636\u063a\u0637 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0635\u0641 \u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u060c \u0648\u064a\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u0624\u062b\u0631\u0629 \u0639\u0645\u0648\u062f\u064a\u064b\u0627 \u0639\u0644\u0649 \u0648\u062d\u062f\u0629 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a. \u064a\u0646\u0634\u0623 \u0636\u063a\u0637 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646 \u062a\u0635\u0627\u062f\u0645 \u062c\u0633\u064a\u0645\u0627\u062a\u0647 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621 \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a\u0647.<\/p>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">\u0648\u062d\u062f\u0627\u062a \u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646\u0647\u0627<\/h3>\n <p class=\"mb-2 text-sm text-slate-300\">\u064a\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0626\u064a\u0648\u0646 \u0639\u062f\u0629 \u0648\u062d\u062f\u0627\u062a \u0644\u0642\u064a\u0627\u0633 \u0627\u0644\u0636\u063a\u0637\u060c \u0648\u0623\u0647\u0645\u0647\u0627:<\/p>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 marker:text-purple-400 text-sm mb-4\">\n <li><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0648\u064a (Atmosphere):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">atm<\/code>.<\/li>\n <li><strong>\u0645\u0644\u064a\u0645\u062a\u0631 \u0632\u0626\u0628\u0642 (Millimeter of mercury):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">mmHg<\/code>.<\/li>\n <li><strong>\u062a\u0648\u0631 (Torr):<\/strong> \u0648\u064a\u0631\u0645\u0632 \u0644\u0647 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">torr<\/code>.<\/li>\n <li><strong>\u0628\u0627\u0633\u0643\u0627\u0644 (Pascal):<\/strong> \u0648\u0647\u064a \u0627\u0644\u0648\u062d\u062f\u0629 \u0627\u0644\u062f\u0648\u0644\u064a\u0629 (SI)\u060c \u0648\u064a\u0631\u0645\u0632 \u0644\u0647\u0627 \u0628\u0627\u0644\u0631\u0645\u0632 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\">Pa<\/code>.<\/li>\n <\/ul>\n \n <div class=\"bg-black\/20 p-3 rounded-lg border border-white\/10\">\n <h4 class=\"text-base font-semibold text-white mb-2 text-center\">\u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h4>\n <div class=\"font-mono text-center text-yellow-200 space-y-1 text-sm sm:text-base\" dir=\"ltr\">\n <p>1 atm = 760 mmHg<\/p>\n <p>1 mmHg = 1 torr<\/p>\n <p>1 atm = 101325 Pa = 101.325 kPa<\/p>\n <\/div>\n <\/div>\n\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-2 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0623\u0645\u062b\u0644\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\n <\/h4>\n <div class=\"space-y-3\">\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 1:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 1.5 atm \u0625\u0644\u0649 mmHg.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (mmHg) = 1.5 atm \u00d7 (760 mmHg \/ 1 atm)<\/p>\n <p>Pressure (mmHg) = 1140 mmHg<\/p>\n <\/div>\n <\/div>\n <div>\n <p class=\"text-slate-300 mb-1 text-sm\"><strong>\u0645\u062b\u0627\u0644 2:<\/strong> \u062d\u0648\u0651\u0644 \u0636\u063a\u0637\u064b\u0627 \u0645\u0642\u062f\u0627\u0631\u0647 95 kPa \u0625\u0644\u0649 atm.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md\" dir=\"ltr\">\n <p>Pressure (atm) = 95 kPa \u00d7 (1 atm \/ 101.325 kPa)<\/p>\n <p>Pressure (atm) \u2248 0.938 atm<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a (Gas Laws)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\">\u0647\u064a \u0639\u0644\u0627\u0642\u0627\u062a \u0631\u064a\u0627\u0636\u064a\u0629 \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632: \u0627\u0644\u0636\u063a\u0637 (P)\u060c \u0627\u0644\u062d\u062c\u0645 (V)\u060c \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (T)\u060c \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a (n).<\/p>\n\n <div class=\"space-y-6\">\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">1. \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 (Boyle's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \u00d7 V\u2081 = P\u2082 \u00d7 V\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0639\u0643\u0633\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0636\u063a\u0637 \u062a\u0642\u0644\u0644 \u0627\u0644\u062d\u062c\u0645 \u0628\u0633\u0628\u0628 \u062a\u0642\u0627\u0631\u0628 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0648\u0639\u0627\u0621 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 5.6 \u0644\u062a\u0631 \u0645\u0646 \u063a\u0627\u0632 \u0639\u0646\u062f \u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 \u0625\u0630\u0627 \u0627\u0631\u062a\u0641\u0639 \u0627\u0644\u0636\u063a\u0637 \u0625\u0644\u0649 4.5 \u0636\u063a\u0637 \u062c\u0648\u064a \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u0631\u0627\u0631\u0629\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081 = 1.5 atm, V\u2081 = 5.6 L<br>\n 2. P\u2082 = 4.5 atm, V\u2082 = ?<br>\n 3. P\u2081V\u2081 = P\u2082V\u2082 => V\u2082 = (P\u2081V\u2081) \/ P\u2082<br>\n 4. V\u2082 = (1.5 atm \u00d7 5.6 L) \/ 4.5 atm<br>\n 5. V\u2082 \u2248 1.87 L\n <\/div>\n <\/div>\n [[COMPONENT:BoyleLawSimulation]]\n [[COMPONENT:BoyleLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">2. \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644 (Charles's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0645 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ T\u2081 = V\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 (\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0628\u0627\u0644\u0643\u0644\u0641\u0646).<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0641\u062a\u0645\u062f\u062f \u0627\u0644\u063a\u0627\u0632.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0628\u0627\u0644\u0648\u0646 \u062d\u062c\u0645\u0647 2 \u0644\u062a\u0631 \u0639\u0646\u062f 25\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647 \u0625\u0630\u0627 \u0633\u062e\u0646 \u0625\u0644\u0649 50\u00b0C \u0645\u0639 \u062b\u0628\u0627\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 25 + 273 = 298 K, V\u2081 = 2 L<br>\n 2. T\u2082 = 50 + 273 = 323 K, V\u2082 = ?<br>\n 3. V\u2081\/T\u2081 = V\u2082\/T\u2082 => V\u2082 = (V\u2081T\u2082) \/ T\u2081<br>\n 4. V\u2082 = (2 L \u00d7 323 K) \/ 298 K<br>\n 5. V\u2082 \u2248 2.17 L\n <\/div>\n <\/div>\n [[COMPONENT:CharlesLawSimulation]]\n [[COMPONENT:CharlesLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">3. \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643 (Gay-Lussac's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u0636\u063a\u0637 \u0643\u0645\u064a\u0629 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632 \u064a\u062a\u0646\u0627\u0633\u0628 \u0637\u0631\u062f\u064a\u064b\u0627 \u0645\u0639 \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 (\u0628\u0627\u0644\u0643\u0644\u0641\u0646) \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">P\u2081 \/ T\u2081 = P\u2082 \/ T\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u062d\u062c\u0645.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u062a\u0641\u0633\u064a\u0631:<\/strong> \u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u062a\u0632\u064a\u062f \u0645\u0646 \u062a\u0635\u0627\u062f\u0645 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a \u0645\u0639 \u062c\u062f\u0631\u0627\u0646 \u0627\u0644\u0648\u0639\u0627\u0621.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0637\u0627\u0631 \u0633\u064a\u0627\u0631\u0629 \u0636\u063a\u0637\u0647 2.2 \u0636\u063a\u0637 \u062c\u0648\u064a \u0639\u0646\u062f 15\u00b0C. \u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0628\u0639\u062f \u0631\u062d\u0644\u0629 \u0637\u0648\u064a\u0644\u0629 \u0625\u0630\u0627 \u0623\u0635\u0628\u062d\u062a \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u062a\u0647 40\u00b0C\u061f (\u0628\u0627\u0641\u062a\u0631\u0627\u0636 \u062b\u0628\u0627\u062a \u0627\u0644\u062d\u062c\u0645)<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T\u2081 = 15 + 273 = 288 K, P\u2081 = 2.2 atm<br>\n 2. T\u2082 = 40 + 273 = 313 K, P\u2082 = ?<br>\n 3. P\u2081\/T\u2081 = P\u2082\/T\u2082 => P\u2082 = (P\u2081T\u2082) \/ T\u2081<br>\n 4. P\u2082 = (2.2 atm \u00d7 313 K) \/ 288 K<br>\n 5. P\u2082 \u2248 2.39 atm\n <\/div>\n <\/div>\n [[COMPONENT:GayLussacLawSimulation]]\n [[COMPONENT:GayLussacLawGraph]]\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">4. \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0627\u0645\u0639 \u0644\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">(P\u2081 \u00d7 V\u2081) \/ T\u2081 = (P\u2082 \u00d7 V\u2082) \/ T\u2082<\/div>\n <p class=\"text-slate-300 text-sm mb-3\">\u064a\u062c\u0645\u0639 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0631\u0628\u0637 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632.<\/p>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u062d\u062c\u0645\u0647\u0627 10 \u0644\u062a\u0631 \u0639\u0646\u062f \u0636\u063a\u0637 1 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 27\u00b0C. \u0645\u0627 \u0647\u0648 \u062d\u062c\u0645\u0647\u0627 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP: 1 atm, 0\u00b0C)\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. P\u2081=1 atm, V\u2081=10 L, T\u2081=27+273=300 K<br>\n 2. P\u2082=1 atm, T\u2082=0+273=273 K, V\u2082=?<br>\n 3. (P\u2081V\u2081)\/T\u2081 = (P\u2082V\u2082)\/T\u2082 => V\u2082 = (P\u2081V\u2081T\u2082) \/ (P\u2082T\u2081)<br>\n 4. V\u2082 = (1 atm \u00d7 10 L \u00d7 273 K) \/ (1 atm \u00d7 300 K)<br>\n 5. V\u2082 = 9.1 L\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-slate-800\/50 p-4 rounded-xl border border-slate-700 shadow-sm\">\n <h3 class=\"text-lg font-bold text-purple-400 mb-2\">5. \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648 (Avogadro's Law)<\/h3>\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u0646\u0635 \u0639\u0644\u0649 \u0623\u0646 \u062d\u062c\u0648\u0645 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0646\u0641\u0633 \u0627\u0644\u0639\u062f\u062f \u0645\u0646 \u0627\u0644\u062c\u0632\u064a\u0626\u0627\u062a (\u0627\u0644\u0645\u0648\u0644\u0627\u062a) \u062a\u0643\u0648\u0646 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641 \u0645\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/p>\n <div class=\"mb-2 p-2 bg-black\/20 rounded font-mono text-yellow-300 text-center text-base\" dir=\"ltr\">V\u2081 \/ n\u2081 = V\u2082 \/ n\u2082<\/div>\n <ul class=\"list-disc list-inside text-slate-300 mb-3 text-sm\">\n <li><strong>\u0627\u0644\u0634\u0631\u0637:<\/strong> \u0639\u0646\u062f \u062b\u0628\u0648\u062a \u0627\u0644\u0636\u063a\u0637 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629.<\/li>\n <li><strong>\u0627\u0644\u0639\u0644\u0627\u0642\u0629:<\/strong> \u0637\u0631\u062f\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u062d\u062c\u0645 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a.<\/li>\n <li><strong>\u0645\u0644\u062d\u0648\u0638\u0629:<\/strong> \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0645\u0648\u0644\u064a \u0644\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0627\u0644\u0638\u0631\u0648\u0641 \u0627\u0644\u0642\u064a\u0627\u0633\u064a\u0629 (STP)\u060c \u0648\u0647\u064a <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">0\u00b0C (273 K)<\/code> \u0648 <code class=\"font-mono text-yellow-300 bg-black\/20 px-1 rounded\" dir=\"ltr\">1 atm<\/code>\u060c \u0647\u0648 22.4 \u0644\u062a\u0631\/\u0645\u0648\u0644.<\/li>\n <\/ul>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0625\u0630\u0627 \u0643\u0627\u0646 2 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u064a\u0634\u063a\u0644 \u062d\u062c\u0645\u064b\u0627 \u0642\u062f\u0631\u0647 44.8 \u0644\u062a\u0631\u060c \u0641\u0645\u0627 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0630\u064a \u064a\u0634\u063a\u0644\u0647 3 \u0645\u0648\u0644 \u0645\u0646 \u0646\u0641\u0633 \u0627\u0644\u063a\u0627\u0632 \u0639\u0646\u062f \u0646\u0641\u0633 \u0627\u0644\u0638\u0631\u0648\u0641\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. n\u2081 = 2 mol, V\u2081 = 44.8 L<br>\n 2. n\u2082 = 3 mol, V\u2082 = ?<br>\n 3. V\u2081\/n\u2081 = V\u2082\/n\u2082 => V\u2082 = (V\u2081n\u2082) \/ n\u2081<br>\n 4. V\u2082 = (44.8 L \u00d7 3 mol) \/ 2 mol<br>\n 5. V\u2082 = 67.2 L\n <\/div>\n <\/div>\n [[COMPONENT:AvogadroLawSimulation]]\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a (Ideal Gas Law)<\/h2>\n <p class=\"mb-3 text-slate-300 text-sm\"><strong>\u0627\u0644\u0646\u0635:<\/strong> \u064a\u062c\u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0645\u064a\u0639 \u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u063a\u0627\u0632 (P, V, T, n) \u0641\u064a \u0639\u0644\u0627\u0642\u0629 \u0648\u0627\u062d\u062f\u0629 \u062a\u0635\u0641 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u0645\u062b\u0627\u0644\u064a\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0648\u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0627\u0644\u0636\u063a\u0637 \u0648\u0627\u0644\u062d\u062c\u0645 \u0648\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0643\u0645\u064a\u0629 \u0627\u0644\u0645\u0627\u062f\u0629.<\/p>\n <div class=\"bg-indigo-900\/30 p-5 rounded-xl border border-indigo-500\/30 text-center relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500\"><\/div>\n <p class=\"text-3xl font-mono font-bold text-white mb-4 tracking-widest\" dir=\"ltr\">PV = nRT<\/p>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs sm:text-sm\">\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">P<\/strong> \u0627\u0644\u0636\u063a\u0637<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">V<\/strong> \u0627\u0644\u062d\u062c\u0645<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">n<\/strong> \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a<\/div>\n <div class=\"bg-white\/5 p-2 rounded\"><strong class=\"block text-indigo-300 text-base mb-1\">T<\/strong> \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/div>\n <\/div>\n <div class=\"mt-4 pt-3 border-t border-white\/10 text-xs sm:text-sm\">\n <strong class=\"text-indigo-300\">R (\u0627\u0644\u062b\u0627\u0628\u062a \u0627\u0644\u0639\u0627\u0645):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">0.0821 L\u00b7atm\/mol\u00b7K<\/span>\n <span class=\"mx-2\">|<\/span>\n <strong class=\"text-indigo-300\">T (\u0628\u0627\u0644\u0643\u0644\u0641\u0646):<\/strong> <span dir=\"ltr\" class=\"font-mono text-white\">\u00b0C + 273<\/span>\n <\/div>\n <\/div>\n \n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0627\u062d\u0633\u0628 \u0636\u063a\u0637 0.45 \u0645\u0648\u0644 \u0645\u0646 \u063a\u0627\u0632 \u0641\u064a \u0648\u0639\u0627\u0621 \u062d\u062c\u0645\u0647 1.5 \u0644\u062a\u0631 \u0639\u0646\u062f 20\u00b0C.<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n 1. T = 20 + 273 = 293 K<br>\n 2. P = nRT \/ V<br>\n 3. P = (0.45 \u00d7 0.0821 \u00d7 293) \/ 1.5<br>\n 4. P \u2248 7.2 atm\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646 \u0644\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629<\/h2>\n <div class=\"mb-3\">\n <p class=\"mb-2 text-slate-300 text-sm\"><strong>\u064a\u0646\u0635 \u0639\u0644\u0649:<\/strong> \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u0644\u062e\u0644\u064a\u0637 \u0645\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u064a\u0633\u0627\u0648\u064a \u0645\u062c\u0645\u0648\u0639 \u0627\u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062c\u0632\u0626\u064a\u0629 \u0644\u0643\u0644 \u063a\u0627\u0632.<\/p>\n <p class=\"font-mono text-yellow-300 text-center text-lg bg-white\/5 p-2 rounded-lg\" dir=\"ltr\">P_Total = P_A + P_B + P_C + ...<\/p>\n <p class=\"text-xs text-slate-400 mt-1\"><strong>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a:<\/strong> \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0630\u064a \u064a\u0624\u062b\u0631 \u0628\u0647 \u0627\u0644\u063a\u0627\u0632 \u0641\u064a \u0627\u0644\u062e\u0644\u064a\u0637 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u064a\u0634\u063a\u0644 \u0627\u0644\u0648\u0639\u0627\u0621 \u0648\u062d\u062f\u0647.<\/p>\n <\/div>\n <div class=\"mt-4 bg-slate-800 p-4 rounded-lg border-r-4 border-green-500\">\n <h4 class=\"font-bold text-green-400 mb-1 flex items-center gap-2 text-sm\">\n <span>\ud83d\udcdd<\/span> \u0645\u062b\u0627\u0644 \u062a\u0637\u0628\u064a\u0642\u064a\n <\/h4>\n <p class=\"text-slate-300 mb-2 text-sm\">\u064a\u062d\u062a\u0648\u064a \u0648\u0639\u0627\u0621 \u0639\u0644\u0649 \u062e\u0644\u064a\u0637 \u0645\u0646 \u063a\u0627\u0632\u064a \u0627\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 \u0648\u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646. \u0625\u0630\u0627 \u0643\u0627\u0646 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646 0.78 \u0636\u063a\u0637 \u062c\u0648\u064a \u0648\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u062c\u0632\u0626\u064a \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 0.21 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0643\u0644\u064a \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0639\u0627\u0621\u061f<\/p>\n <div class=\"font-mono text-xs sm:text-sm text-green-100 bg-black\/40 p-3 rounded-md leading-relaxed\" dir=\"ltr\">\n P_Total = P_Nitrogen + P_Oxygen<br>\n P_Total = 0.78 atm + 0.21 atm<br>\n P_Total = 0.99 atm\n <\/div>\n <\/div>\n [[COMPONENT:DaltonLawSimulation]]\n <\/section>\n\n <section>\n <h2 class=\"text-xl font-semibold text-white mb-2\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 \u0648\u0627\u0644\u062a\u062f\u0641\u0642<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-3 mb-4\">\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631 (Diffusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0627\u062e\u062a\u0644\u0627\u0637 \u0627\u0644\u063a\u0627\u0632\u0627\u062a \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0628\u0628\u0639\u0636\u0647\u0627 (\u0645\u062b\u0644 \u0627\u0644\u0639\u0637\u0631).<\/p>\n <\/div>\n <div class=\"bg-slate-800\/50 p-3 rounded-lg\">\n <h3 class=\"font-bold text-white mb-1 text-sm\">\u0627\u0644\u062a\u062f\u0641\u0642 (Effusion)<\/h3>\n <p class=\"text-slate-400 text-xs\">\u0645\u0631\u0648\u0631 \u0627\u0644\u063a\u0627\u0632 \u0639\u0628\u0631 \u0641\u062a\u062d\u0629 \u0635\u063a\u064a\u0631\u0629 (\u0645\u062b\u0644 \u062a\u0633\u0631\u0628 \u0627\u0644\u0647\u0648\u0627\u0621).<\/p>\n <\/div>\n <\/div>\n \n <div class=\"bg-slate-800\/50 p-4 rounded-lg border border-slate-700 mb-4\">\n <h3 class=\"text-base font-bold text-purple-300 mb-1\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 (Graham's Law)<\/h3>\n <p class=\"text-slate-300 mb-2 text-sm\">\u0633\u0631\u0639\u0629 \u062a\u062f\u0641\u0642 \u0627\u0644\u063a\u0627\u0632 \u062a\u062a\u0646\u0627\u0633\u0628 \u0639\u0643\u0633\u064a\u064b\u0627 \u0645\u0639 \u0627\u0644\u062c\u0630\u0631 \u0627\u0644\u062a\u0631\u0628\u064a\u0639\u064a \u0644\u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629.<\/p>\n <div class=\"my-2 text-center bg-black\/20 p-2 rounded\">\n <span class=\"font-mono text-base text-yellow-300\" dir=\"ltr\">Rate A \/ Rate B = \u221a(Molar Mass B \/ Molar Mass A)<\/span>\n <\/div>\n <p class=\"text-xs text-slate-400 italic\">\u0645\u062b\u0627\u0644: H\u2082 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639 \u0645\u0646 O\u2082 \u0644\u0623\u0646 \u0643\u062a\u0644\u062a\u0647 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0623\u0635\u063a\u0631.<\/p>\n <\/div>\n [[COMPONENT:GrahamLawSimulation]]\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0645\u0644\u062e\u0635 \u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/h2>\n <ul class=\"list-disc list-inside space-y-1 text-slate-300 text-sm\">\n <li>\u062a\u0641\u0633\u0631 <span class=\"text-purple-300\">\u0646\u0638\u0631\u064a\u0629 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0632\u064a\u0626\u064a\u0629<\/span> \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u0627\u0632\u0627\u062a.<\/li>\n <li><span class=\"text-purple-300\">\u0642\u0648\u0627\u0646\u064a\u0646 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/span> \u062a\u0631\u0628\u0637 \u0628\u064a\u0646 P, V, T, n.<\/li>\n <li>\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0648<span class=\"text-teal-300\">\u0627\u0644\u063a\u0627\u0632\u0627\u062a \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629<\/span> \u062a\u062d\u064a\u062f \u0639\u0646\u0647 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0639\u0627\u0644\u064a \u0648\u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062e\u0641\u0636\u0629.<\/li>\n <li>\u064a\u0633\u062a\u062e\u062f\u0645 <span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/span> \u0644\u0636\u063a\u0648\u0637 \u0627\u0644\u062e\u0644\u064a\u0637\u060c \u0648<span class=\"text-purple-300\">\u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/span> \u0644\u0633\u0631\u0639\u0629 \u0627\u0644\u0627\u0646\u062a\u0634\u0627\u0631.<\/li>\n <\/ul>\n <\/section>\n\n <section class=\"bg-slate-900\/50 p-4 rounded-xl border border-white\/10\">\n <h2 class=\"text-xl font-semibold text-white mb-3\">\u0623\u0633\u0626\u0644\u0629 \u0648\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0645\u062a\u0646\u0648\u0639\u0629<\/h2>\n <div class=\"space-y-4 text-slate-300 text-sm\">\n <div>\n <p class=\"font-bold mb-1\">1. (\u062a\u0641\u0643\u064a\u0631 \u0645\u0641\u0627\u0647\u064a\u0645\u064a): \u0644\u0645\u0627\u0630\u0627 \u064a\u0646\u0643\u0645\u0634 \u0628\u0627\u0644\u0648\u0646 \u0645\u0646\u0641\u0648\u062e \u0639\u0646\u062f \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062b\u0644\u0627\u062c\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0641\u0643\u0631 \u0641\u064a \u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0648\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0648\u062d\u062c\u0645 \u0627\u0644\u063a\u0627\u0632 (\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644).<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">2. (\u062d\u0633\u0627\u0628\u0627\u062a): \u0625\u0630\u0627 \u0643\u0627\u0646 \u062d\u062c\u0645 \u0639\u064a\u0646\u0629 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 200 \u0645\u0644 \u0639\u0646\u062f \u0636\u063a\u0637 1.0 \u0636\u063a\u0637 \u062c\u0648\u064a\u060c \u0641\u0645\u0627 \u0647\u0648 \u0636\u063a\u0637\u0647\u0627 \u0625\u0630\u0627 \u062a\u0645 \u0636\u063a\u0637\u0647\u0627 \u0625\u0644\u0649 \u062d\u062c\u0645 100 \u0645\u0644 \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 \u062b\u0627\u0628\u062a\u0629\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644 P\u2081V\u2081 = P\u2082V\u2082.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">3. (\u062a\u0641\u0643\u064a\u0631 \u0646\u0642\u062f\u064a): \u0623\u064a \u0627\u0644\u063a\u0627\u0632\u064a\u0646 \u064a\u0646\u062a\u0634\u0631 \u0623\u0633\u0631\u0639\u060c \u0627\u0644\u0647\u064a\u0644\u064a\u0648\u0645 (He) \u0623\u0645 \u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646 (CO\u2082)\u060c \u0648\u0644\u0645\u0627\u0630\u0627\u061f<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0631\u062c\u0639 \u0625\u0644\u0649 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645 \u0648\u0642\u0627\u0631\u0646 \u0627\u0644\u0643\u062a\u0644 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u0632\u064a\u0646.<\/p>\n <\/div>\n <div>\n <p class=\"font-bold mb-1\">4. (\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629): \u0627\u062d\u0633\u0628 \u062d\u062c\u0645 16 \u062c\u0631\u0627\u0645\u064b\u0627 \u0645\u0646 \u063a\u0627\u0632 \u0627\u0644\u0623\u0643\u0633\u062c\u064a\u0646 (O\u2082) \u0639\u0646\u062f \u062f\u0631\u062c\u0629 \u062d\u0631\u0627\u0631\u0629 25\u00b0C \u0648\u0636\u063a\u0637 1.5 \u0636\u063a\u0637 \u062c\u0648\u064a. (\u0627\u0644\u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0648\u0644\u064a\u0629 \u0644\u0644\u0623\u0643\u0633\u062c\u064a\u0646 O\u2082 \u2248 32 g\/mol)<\/p>\n <p class=\"text-xs text-slate-400\"><strong>\u062a\u0644\u0645\u064a\u062d:<\/strong> \u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a PV=nRT. \u0644\u0627 \u062a\u0646\u0633 \u062a\u062d\u0648\u064a\u0644 \u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 \u0625\u0644\u0649 \u0643\u0644\u0641\u0646 \u0648\u062d\u0633\u0627\u0628 \u0639\u062f\u062f \u0627\u0644\u0645\u0648\u0644\u0627\u062a \u0623\u0648\u0644\u0627\u064b.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"bg-yellow-900\/20 p-4 rounded-xl border-l-4 border-yellow-400 mt-6\">\n <h2 class=\"text-xl font-semibold text-yellow-300 mb-3 flex items-center gap-2\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.311a7.5 7.5 0 0 1-7.5 0c-1.421-.62-2.8-1.5-3.995-2.582a9.753 9.753 0 0 1-2.28-4.117c-.164-1.03-.164-2.07 0-3.1a9.753 9.753 0 0 1 2.28-4.117c1.195-1.082 2.574-1.962 3.995-2.582a7.5 7.5 0 0 1 7.5 0c1.421.62 2.8 1.5 3.995 2.582a9.753 9.753 0 0 1 2.28 4.117c.164 1.03.164 2.07 0 3.1a9.753 9.753 0 0 1-2.28 4.117c-1.195-1.082-2.574-1.962-3.995-2.582Z\"><\/path>\n <\/svg>\n <span>\u0646\u0635\u0627\u0626\u062d \u0644\u0644\u062f\u0631\u0627\u0633\u0629<\/span>\n <\/h2>\n <ul class=\"list-disc list-inside space-y-2 text-slate-300 text-sm\">\n <li><strong>\u0627\u062d\u0641\u0638 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0648\u062a\u062d\u0648\u064a\u0644\u0627\u062a\u0647\u0627:<\/strong> \u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a \u0628\u064a\u0646 atm, mmHg, kPa \u0623\u0633\u0627\u0633\u064a \u0644\u062d\u0644 \u0627\u0644\u0645\u0633\u0627\u0626\u0644.<\/li>\n <li><strong>\u062a\u062f\u0631\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u0627\u0626\u0644 \u0628\u0623\u0646\u0648\u0627\u0639\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629:<\/strong> \u0644\u0643\u0644 \u0642\u0627\u0646\u0648\u0646 \u063a\u0627\u0632 \u062a\u0637\u0628\u064a\u0642\u0627\u062a\u0647\u060c \u0648\u0627\u0644\u062a\u0645\u0631\u064a\u0646 \u0647\u0648 \u0645\u0641\u062a\u0627\u062d \u0627\u0644\u0625\u062a\u0642\u0627\u0646.<\/li>\n <li><strong>\u0627\u0641\u0647\u0645 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0648\u0644\u0627 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u062d\u0641\u0638 \u0641\u0642\u0637:<\/strong> \u0627\u0631\u0628\u0637 \u0627\u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0633\u0644\u0648\u0643 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0641\u064a \u0627\u0644\u0645\u062d\u0627\u0643\u0627\u0629.<\/li>\n <li><strong>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a\u0629 \u0644\u0641\u0647\u0645 \u0627\u0644\u0639\u0644\u0627\u0642\u0627\u062a:<\/strong> \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064a\u0627\u0646\u064a \u064a\u0648\u0636\u062d \u0627\u0644\u0639\u0644\u0627\u0642\u0629 (\u0637\u0631\u062f\u064a\u0629 \u0623\u0645 \u0639\u0643\u0633\u064a\u0629) \u0628\u0634\u0643\u0644 \u0623\u0633\u0631\u0639 \u0645\u0646 \u0627\u0644\u0645\u0639\u0627\u062f\u0644\u0629.<\/li>\n <\/ul>\n <\/section>\n\n <\/div>\n `;\n\n \/\/ ==========================================\n \/\/ 2. COMPILED COMPONENTS\n \/\/ ==========================================\n\n \/\/ --- AvogadroLawSimulation ---\n const AvogadroLawSimulation = () => {\n const canvasRef = useRef(null);\n const minParticles = 20;\n const maxParticles = 100;\n const [numParticles, setNumParticles] = useState(60); \n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const volumeRatio = (numParticles \/ maxParticles);\n const volume = (volumeRatio * 8) + 2;\n\n const handleReset = () => setNumParticles(60);\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < maxParticles; i++) {\n newParticles.push({\n id: i,\n x: Math.random() * containerWidth,\n y: Math.random() * containerMaxHeight,\n vx: (Math.random() - 0.5) * 3,\n vy: (Math.random() - 0.5) * 3,\n radius: 3,\n });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (numParticles \/ maxParticles);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n const activeParticles = particlesRef.current;\n for (let i = 0; i < numParticles; i++) {\n const p = activeParticles[i];\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath();\n context.arc(p.x, p.y, p.radius, 0, Math.PI * 2);\n context.fillStyle = '#c4b5fd';\n context.fill();\n context.closePath();\n }\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [numParticles]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <div className=\"flex justify-between items-center mb-4\">\n <h3 className=\"text-xl font-bold text-white\/90\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648<\/h3>\n <button onClick={handleReset} className=\"p-2 rounded-full hover:bg-white\/10 transition-colors text-slate-400 text-2xl font-bold\">\u27f3<\/button>\n <\/div>\n <div className=\"flex flex-col justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <label className=\"font-semibold mb-2 text-slate-300 text-center block\">\u062a\u062d\u0643\u0645 \u0641\u064a \u0643\u0645\u064a\u0629 \u0627\u0644\u063a\u0627\u0632 (\u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a)<\/label>\n <div className=\"flex items-center gap-2\">\n <button onClick={() => setNumParticles(n => Math.max(minParticles, n - 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">-<\/button>\n <input type=\"range\" min={minParticles} max={maxParticles} step=\"1\" value={numParticles} onChange={(e) => setNumParticles(parseInt(e.target.value, 10))} className=\"flex-grow h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <button onClick={() => setNumParticles(n => Math.min(maxParticles, n + 5))} className=\"w-8 h-8 rounded bg-slate-700 hover:bg-slate-600 text-white font-bold\">+<\/button>\n <\/div>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u0643\u0645\u064a\u0629 (n): {numParticles} \u062c\u0633\u064a\u0645<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a (V): {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawGraph ---\n const BoyleLawGraph = () => {\n const [volume, setVolume] = useState(5);\n const k = 40;\n const pressure = k \/ volume;\n const width = 400;\n const height = 300;\n const padding = 40;\n const maxVolume = 10;\n const maxPressure = k \/ 1;\n const getX = (v) => padding + ((v - 1) \/ (maxVolume - 1)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const pathData = useMemo(() => {\n let path = `M ${getX(1)} ${getY(k \/ 1)}`;\n for (let v = 1.1; v <= maxVolume; v += 0.1) { path += ` L ${getX(v)} ${getY(k \/ v)}`; }\n return path;\n }, []);\n const currentX = getX(volume);\n const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <path d={pathData} fill=\"none\" stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min=\"1\" max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)} \u0644\u062a\u0631<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- BoyleLawSimulation ---\n const BoyleLawSimulation = () => {\n const canvasRef = useRef(null);\n const [volume, setVolume] = useState(7);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350;\n const containerMaxHeight = 280;\n const numParticles = 40;\n const k = 100;\n const minVolume = 2;\n const maxVolume = 10;\n const pressure = k \/ volume;\n const maxPressure = k \/ minVolume;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (volume \/ maxVolume);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, 0, containerWidth, pistonHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonHeight - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y - p.radius < 0) { p.y = p.radius; p.vy *= -1; }\n if (p.y + p.radius > pistonHeight) { p.y = pistonHeight - p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [volume]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0628\u0648\u064a\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-8 h-32 bg-slate-700\/50 rounded-lg relative overflow-hidden\">\n <div className=\"absolute bottom-0 w-full bg-red-500 transition-all duration-200\" style={{height: `${(pressure\/maxPressure)*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u0636\u063a\u0637<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minVolume} max={maxVolume} step=\"0.1\" value={volume} onChange={(e) => setVolume(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(1)}<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawGraph ---\n const CharlesLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.05; const volume = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxVolume = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (v) => height - padding - (v \/ maxVolume) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(volume);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u062d\u062c\u0645 (V)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <line x1={currentX} y1={currentY} x2={currentX} y2={height - padding} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <line x1={currentX} y1={currentY} x2={padding} y2={currentY} stroke=\"#c4b5fd\" strokeWidth=\"1\" strokeDasharray=\"4\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645: {volume.toFixed(2)} L<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- CharlesLawSimulation ---\n const CharlesLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const animationFrameIdRef = useRef(null);\n const containerWidth = 350; const containerMaxHeight = 280;\n const numParticles = 40;\n const volumeRatio = (temperatureK \/ maxTempK);\n const volume = (volumeRatio * 8) + 2;\n\n useEffect(() => {\n const newParticles = [];\n for (let i = 0; i < numParticles; i++) {\n newParticles.push({ id: i, x: Math.random() * containerWidth, y: Math.random() * containerMaxHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n }\n particlesRef.current = newParticles;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const context = canvas?.getContext('2d');\n if (!context || !canvas) return;\n const pistonHeight = containerMaxHeight * (temperatureK \/ maxTempK);\n const speedMultiplier = Math.sqrt(temperatureK \/ minTempK);\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerMaxHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n context.lineWidth = 2;\n context.strokeRect(0, 0, containerWidth, containerMaxHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)';\n context.fillRect(0, containerMaxHeight - pistonHeight, containerWidth, pistonHeight);\n const pistonY = containerMaxHeight - pistonHeight;\n context.fillStyle = 'rgba(71, 85, 105, 0.7)';\n context.fillRect(-1, pistonY - 2, containerWidth + 2, 4);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speedMultiplier; p.y += p.vy * speedMultiplier;\n if (p.x - p.radius < 0) { p.x = p.radius; p.vx *= -1; }\n if (p.x + p.radius > containerWidth) { p.x = containerWidth - p.radius; p.vx *= -1; }\n if (p.y + p.radius > containerMaxHeight) { p.y = containerMaxHeight - p.radius; p.vy *= -1; }\n if (p.y - p.radius < pistonY) { p.y = pistonY + p.radius; p.vy *= -1; }\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill(); context.closePath();\n });\n animationFrameIdRef.current = window.requestAnimationFrame(render);\n };\n render();\n return () => window.cancelAnimationFrame(animationFrameIdRef.current);\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u0634\u0627\u0631\u0644<\/h3>\n <div className=\"flex flex-col md:flex-row justify-center items-center gap-6\">\n <canvas ref={canvasRef} width={containerWidth} height={containerMaxHeight} className=\"rounded-md\" \/>\n <div className=\"flex flex-col items-center\">\n <div className=\"w-6 h-32 bg-slate-700\/50 rounded-full relative overflow-hidden border-2 border-slate-600\">\n <div className=\"absolute bottom-0 w-full bg-orange-500 transition-all duration-200\" style={{height: `${((temperatureK-minTempK)\/(maxTempK-minTempK))*100}%`}}><\/div>\n <\/div>\n <span className=\"text-xs mt-1 text-slate-400\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/span>\n <\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-300 font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0646\u0633\u0628\u064a: {volume.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- DaltonLawSimulation ---\n const DaltonLawSimulation = () => {\n const canvasRef = useRef(null);\n const [numA, setNumA] = useState(25);\n const [numB, setNumB] = useState(25);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressureA = numA * 0.5; const pressureB = numB * 0.5;\n const totalP = pressureA + pressureB;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < numA; i++) newP.push({ type: 'A', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#c4b5fd' });\n for (let i = 0; i < numB; i++) newP.push({ type: 'B', x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3, color: '#5eead4' });\n particlesRef.current = newP;\n }, [numA, numB]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = p.color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, []);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062f\u0627\u0644\u062a\u0648\u0646<\/h3>\n <div className=\"flex justify-center items-center gap-4\">\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-purple-400\" style={{height:`${(pressureA\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(A)<\/span><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"text-center\"><div className=\"w-6 h-24 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-teal-400\" style={{height:`${(pressureB\/50)*100}%`}}><\/div><\/div><span className=\"text-xs\">P(B)<\/span><\/div>\n <\/div>\n <div className=\"grid grid-cols-2 gap-4 mt-4\">\n <input type=\"range\" min=\"0\" max=\"50\" value={numA} onChange={e => setNumA(parseInt(e.target.value))} className=\"accent-purple-400\" \/>\n <input type=\"range\" min=\"0\" max=\"50\" value={numB} onChange={e => setNumB(parseInt(e.target.value))} className=\"accent-teal-400\" \/>\n <\/div>\n <div className=\"mt-4 text-center p-2 bg-slate-800 rounded font-mono\">\n P_Total ({totalP.toFixed(1)}) = P_A ({pressureA.toFixed(1)}) + P_B ({pressureB.toFixed(1)})\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GasSimulation ---\n const GasSimulation = () => {\n const canvasRef = useRef(null);\n const [gasType, setGasType] = useState('ideal');\n const [temperature, setTemperature] = useState(5);\n const [pressure, setPressure] = useState(3);\n const particlesRef = useRef([]);\n const width = 450; const initialHeight = 300;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 60; i++) newP.push({ x: Math.random() * width, y: Math.random() * initialHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 2, color: '#a78bfa' });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const h = initialHeight * (1 - (pressure - 1) \/ 12);\n context.clearRect(0, 0, width, initialHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, width, h);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, width, h);\n particlesRef.current.forEach((p, i) => {\n const speed = temperature \/ 5;\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > h) p.vy *= -1;\n if (gasType === 'real' && temperature < 4 && pressure > 6) {\n particlesRef.current.forEach((other, j) => {\n if (i === j) return;\n const dx = other.x - p.x; const dy = other.y - p.y;\n const dist = Math.sqrt(dx*dx + dy*dy);\n if (dist < 30) { p.vx += dx*0.001; p.vy += dy*0.001; }\n });\n }\n context.beginPath(); context.arc(p.x, p.y, gasType === 'ideal' ? 2 : 4, 0, Math.PI * 2); context.fillStyle = gasType === 'ideal' ? '#a78bfa' : '#2dd4bf'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [gasType, temperature, pressure]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0633\u0644\u0648\u0643 \u0627\u0644\u063a\u0627\u0632\u0627\u062a<\/h3>\n <canvas ref={canvasRef} width={width} height={initialHeight} className=\"rounded-md w-full mb-4\" \/>\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div className=\"flex flex-col items-center\">\n <label className=\"text-xs mb-1\">\u0646\u0648\u0639 \u0627\u0644\u063a\u0627\u0632<\/label>\n <div className=\"flex gap-2 bg-slate-800 p-1 rounded\">\n <button onClick={() => setGasType('ideal')} className={`px-2 py-1 rounded ${gasType==='ideal'?'bg-purple-600':''}`}>\u0645\u062b\u0627\u0644\u064a<\/button>\n <button onClick={() => setGasType('real')} className={`px-2 py-1 rounded ${gasType==='real'?'bg-teal-600':''}`}>\u062d\u0642\u064a\u0642\u064a<\/button>\n <\/div>\n <\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u062d\u0631\u0627\u0631\u0629<\/label><input type=\"range\" min=\"1\" max=\"10\" value={temperature} onChange={e=>setTemperature(parseInt(e.target.value))} \/><\/div>\n <div className=\"flex flex-col\"><label className=\"text-xs mb-1 text-center\">\u0627\u0644\u0636\u063a\u0637<\/label><input type=\"range\" min=\"1\" max=\"10\" value={pressure} onChange={e=>setPressure(parseInt(e.target.value))} \/><\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawGraph ---\n const GayLussacLawGraph = () => {\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const k = 0.1; const pressure = k * temperatureK;\n const width = 400; const height = 300; const padding = 40;\n const maxPressure = k * maxTempK;\n const getX = (t) => padding + ((t - minTempK) \/ (maxTempK - minTempK)) * (width - 2 * padding);\n const getY = (p) => height - padding - (p \/ maxPressure) * (height - 2 * padding);\n const currentX = getX(temperatureK); const currentY = getY(pressure);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10 flex flex-col items-center\">\n <h3 className=\"text-xl font-bold mb-4 text-center text-white\/90\">\u0631\u0633\u0645 \u0628\u064a\u0627\u0646\u064a \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <svg width=\"100%\" height={height} viewBox={`0 0 ${width} ${height}`}>\n <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <line x1={padding} y1={height - padding} x2={padding} y2={padding} stroke=\"#6b7280\" strokeWidth=\"2\" \/>\n <text x={width \/ 2} y={height - 5} fill=\"#9ca3af\" textAnchor=\"middle\" fontSize=\"12\">\u062f\u0631\u062c\u0629 \u0627\u0644\u062d\u0631\u0627\u0631\u0629 (K)<\/text>\n <text x={15} y={height \/ 2} fill=\"#9ca3af\" textAnchor=\"middle\" transform={`rotate(-90, 15, ${height\/2})`} fontSize=\"12\">\u0627\u0644\u0636\u063a\u0637 (P)<\/text>\n <line x1={getX(minTempK)} y1={getY(k * minTempK)} x2={getX(maxTempK)} y2={getY(k * maxTempK)} stroke=\"#a78bfa\" strokeWidth=\"3\" \/>\n <circle cx={currentX} cy={currentY} r=\"6\" fill=\"#c4b5fd\" stroke=\"#a78bfa\" strokeWidth=\"2\" \/>\n <\/svg>\n <div className=\"w-full max-w-sm mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} step=\"1\" value={temperatureK} onChange={(e) => setTemperatureK(parseFloat(e.target.value))} className=\"w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm text-slate-400\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK.toFixed(0)} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637: {pressure.toFixed(2)} atm<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GayLussacLawSimulation ---\n const GayLussacLawSimulation = () => {\n const canvasRef = useRef(null);\n const minTempK = 100; const maxTempK = 500;\n const [temperatureK, setTemperatureK] = useState(300);\n const particlesRef = useRef([]);\n const containerWidth = 300; const containerHeight = 250;\n const pressure = temperatureK * 0.1;\n\n useEffect(() => {\n const newP = [];\n for (let i = 0; i < 40; i++) newP.push({ x: Math.random() * containerWidth, y: Math.random() * containerHeight, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, radius: 3 });\n particlesRef.current = newP;\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n const speed = Math.sqrt(temperatureK \/ 100);\n context.clearRect(0, 0, containerWidth, containerHeight);\n context.fillStyle = 'rgba(15, 23, 42, 0.8)'; context.fillRect(0, 0, containerWidth, containerHeight);\n context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.strokeRect(0, 0, containerWidth, containerHeight);\n particlesRef.current.forEach(p => {\n p.x += p.vx * speed; p.y += p.vy * speed;\n if (p.x < 0 || p.x > containerWidth) p.vx *= -1;\n if (p.y < 0 || p.y > containerHeight) p.vy *= -1;\n context.beginPath(); context.arc(p.x, p.y, p.radius, 0, Math.PI * 2); context.fillStyle = '#c4b5fd'; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [temperatureK]);\n\n return (\n <div className=\"not-prose my-8 p-4 sm:p-6 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-white\/90 mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643<\/h3>\n <div className=\"flex justify-center items-center gap-6\">\n <div className=\"w-6 h-32 bg-slate-700 rounded relative\"><div className=\"absolute bottom-0 w-full bg-red-500\" style={{height:`${(pressure\/50)*100}%`}}><\/div><\/div>\n <canvas ref={canvasRef} width={containerWidth} height={containerHeight} className=\"rounded-md\" \/>\n <div className=\"w-6 h-32 bg-slate-700 rounded-full relative overflow-hidden\"><div className=\"absolute bottom-0 w-full bg-orange-500\" style={{height:`${((temperatureK-100)\/400)*100}%`}}><\/div><\/div>\n <\/div>\n <div className=\"w-full max-w-md mx-auto mt-4\">\n <input type=\"range\" min={minTempK} max={maxTempK} value={temperatureK} onChange={e=>setTemperatureK(parseInt(e.target.value))} className=\"w-full accent-purple-400\" \/>\n <div className=\"flex justify-between mt-2 text-sm font-mono\">\n <span>\u0627\u0644\u062d\u0631\u0627\u0631\u0629: {temperatureK} K<\/span>\n <span>\u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0633\u0628\u064a: {pressure.toFixed(1)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- GrahamLawSimulation ---\n const GASES = {\n h2: { name: '\u0647\u064a\u062f\u0631\u0648\u062c\u064a\u0646', formula: 'H\u2082', molarMass: 2.02, color: '#fca5a5' },\n he: { name: '\u0647\u064a\u0644\u064a\u0648\u0645', formula: 'He', molarMass: 4.00, color: '#fdba74' },\n ch4: { name: '\u0645\u064a\u062b\u0627\u0646', formula: 'CH\u2084', molarMass: 16.04, color: '#fde047' },\n n2: { name: '\u0646\u064a\u062a\u0631\u0648\u062c\u064a\u0646', formula: 'N\u2082', molarMass: 28.01, color: '#86efac' },\n o2: { name: '\u0623\u0643\u0633\u062c\u064a\u0646', formula: 'O\u2082', molarMass: 32.00, color: '#7dd3fc' },\n co2: { name: '\u062b\u0627\u0646\u064a \u0623\u0643\u0633\u064a\u062f \u0627\u0644\u0643\u0631\u0628\u0648\u0646', formula: 'CO\u2082', molarMass: 44.01, color: '#a5b4fc' },\n sf6: { name: '\u0633\u062f\u0627\u0633\u064a \u0641\u0644\u0648\u0631\u064a\u062f \u0627\u0644\u0643\u0628\u0631\u064a\u062a', formula: 'SF\u2086', molarMass: 146.06, color: '#d8b4fe' }\n };\n\n const GrahamLawSimulation = () => {\n const canvasRef = useRef(null);\n const [gasAKey, setGasAKey] = useState('h2');\n const [gasBKey, setGasBKey] = useState('sf6');\n const [state, setState] = useState('idle');\n const particlesRef = useRef([]);\n const width = 400; const height = 200;\n\n const init = () => {\n const p = [];\n const sA = Math.sqrt(146 \/ GASES[gasAKey].molarMass);\n const sB = Math.sqrt(146 \/ GASES[gasBKey].molarMass);\n for (let i=0; i<40; i++) p.push({ key: gasAKey, x: Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sA, vy: (Math.random()-0.5)*sA });\n for (let i=0; i<40; i++) p.push({ key: gasBKey, x: 220+Math.random()*180, y: Math.random()*height, vx: (Math.random()-0.5)*sB, vy: (Math.random()-0.5)*sB });\n particlesRef.current = p;\n };\n\n useEffect(() => { init(); }, [gasAKey, gasBKey]);\n\n useEffect(() => {\n const canvas = canvasRef.current; const context = canvas?.getContext('2d');\n if (!context) return;\n const render = () => {\n context.clearRect(0, 0, width, height);\n context.strokeStyle = 'white'; context.strokeRect(0, 0, width, height);\n if (state === 'idle') { context.beginPath(); context.moveTo(200, 0); context.lineTo(200, height); context.stroke(); }\n particlesRef.current.forEach(p => {\n p.x += p.vx; p.y += p.vy;\n if (p.x < 0 || p.x > width) p.vx *= -1;\n if (p.y < 0 || p.y > height) p.vy *= -1;\n if (state === 'idle') {\n if (p.key === gasAKey && p.x > 197) p.vx *= -1;\n if (p.key === gasBKey && p.x < 203) p.vx *= -1;\n }\n context.beginPath(); context.arc(p.x, p.y, 3, 0, Math.PI*2); context.fillStyle = GASES[p.key].color; context.fill();\n });\n requestAnimationFrame(render);\n };\n render();\n }, [state]);\n\n return (\n <div className=\"not-prose my-8 p-4 bg-black\/20 rounded-lg border border-white\/10\">\n <h3 className=\"text-xl font-bold text-center mb-4\">\u0645\u062d\u0627\u0643\u0627\u0629 \u0642\u0627\u0646\u0648\u0646 \u062c\u0631\u0627\u0647\u0627\u0645<\/h3>\n <div className=\"flex flex-col md:flex-row gap-4 items-center justify-center\">\n <div className=\"space-y-2\">\n <select value={gasAKey} onChange={e=>setGasAKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <select value={gasBKey} onChange={e=>setGasBKey(e.target.value)} className=\"bg-slate-800 p-1 rounded w-full\">\n {Object.keys(GASES).map(k => <option key={k} value={k}>{GASES[k].name}<\/option>)}\n <\/select>\n <button onClick={() => setState(state==='idle'?'running':'idle')} className=\"w-full bg-purple-600 p-2 rounded\">{state==='idle'?'\u0628\u062f\u0621':'\u0625\u0639\u0627\u062f\u0629'}<\/button>\n <\/div>\n <canvas ref={canvasRef} width={width} height={height} className=\"rounded bg-slate-900\" \/>\n <\/div>\n <\/div>\n );\n };\n\n \/\/ ==========================================\n \/\/ 3. MAIN APPLICATION ORCHESTRATOR\n \/\/ ==========================================\n\n const App = () => {\n const renderContent = () => {\n const parts = GASEOUS_STATE.split(\/\\[\\[COMPONENT:(\\w+)\\]\\]\/);\n return parts.map((part, index) => {\n if (index % 2 === 0) {\n return <div key={index} dangerouslySetInnerHTML={{ __html: part }} \/>;\n } else {\n switch (part) {\n case 'GasSimulation': return <GasSimulation key={index} \/>;\n case 'BoyleLawSimulation': return <BoyleLawSimulation key={index} \/>;\n case 'BoyleLawGraph': return <BoyleLawGraph key={index} \/>;\n case 'CharlesLawSimulation': return <CharlesLawSimulation key={index} \/>;\n case 'CharlesLawGraph': return <CharlesLawGraph key={index} \/>;\n case 'GayLussacLawSimulation': return <GayLussacLawSimulation key={index} \/>;\n case 'GayLussacLawGraph': return <GayLussacLawGraph key={index} \/>;\n case 'AvogadroLawSimulation': return <AvogadroLawSimulation key={index} \/>;\n case 'DaltonLawSimulation': return <DaltonLawSimulation key={index} \/>;\n case 'GrahamLawSimulation': return <GrahamLawSimulation key={index} \/>;\n default: return null;\n }\n }\n });\n };\n\n useEffect(() => {\n const docs = document.getElementById('project-docs');\n if (docs) docs.classList.remove('hidden');\n }, []);\n\n return (\n <div className=\"max-w-4xl mx-auto px-4 py-12\">\n <div className=\"bg-slate-900\/40 backdrop-blur-sm border border-slate-800 rounded-2xl p-6 sm:p-10 shadow-2xl\">\n {renderContent()}\n <\/div>\n <footer className=\"mt-12 text-center text-slate-500 text-sm pb-8\">\n <p>\u062a\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0643\u0623\u062f\u0627\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0645\u0627\u062f\u0629 \u0627\u0644\u0643\u064a\u0645\u064a\u0627\u0621<\/p>\n <\/footer>\n <\/div>\n );\n };\n\n \/\/ 4. MOUNTING LOGIC\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0628\u064a\u0626\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u062f\u0631\u0633 “\u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629”. \u064a\u062a\u0636\u0645\u0646: \u0645\u062d\u0627\u0643\u0627\u0629 \u062d\u0631\u0643\u064a\u0629 \u0644\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0627\u0644\u063a\u0627\u0632 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u062d\u0642\u064a\u0642\u064a). \u0631\u0633\u0648\u0645 \u0628\u064a\u0627\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0644\u0642\u0648\u0627\u0646\u064a\u0646 \u0628\u0648\u064a\u0644\u060c \u0634\u0627\u0631\u0644\u060c \u0648\u062c\u0627\u064a-\u0644\u0648\u0633\u0627\u0643. \u062a\u062c\u0627\u0631\u0628 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0644\u0642\u0627\u0646\u0648\u0646 \u0623\u0641\u0648\u062c\u0627\u062f\u0631\u0648\u060c \u062f\u0627\u0644\u062a\u0648\u0646\u060c \u0648\u062c\u0631\u0627\u0647\u0627\u0645. \u0645\u062d\u062a\u0648\u0649 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0623\u0645\u062b\u0644\u0629 \u062d\u0633\u0627\u0628\u064a\u0629. \u0627\u0644\u062d\u0627\u0644\u0629 \u0627\u0644\u063a\u0627\u0632\u064a\u0629 – \u0645\u062d\u0627\u0643\u0627\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-16839","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/comments?post=16839"}],"version-history":[{"count":7,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839\/revisions"}],"predecessor-version":[{"id":16846,"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/pages\/16839\/revisions\/16846"}],"wp:attachment":[{"href":"https:\/\/smartedujo.com\/ar\/wp-json\/wp\/v2\/media?parent=16839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}