\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 15px;\n width: 100%;\n overflow-x: hidden;\n }\n \n .header {\n text-align: center;\n margin-bottom: 40px;\n color: white;\n text-shadow: 0 2px 10px rgba(0,0,0,0.2);\n padding: 0 10px;\n }\n \n .header h1 {\n font-size: 2.8rem;\n margin-bottom: 15px;\n }\n \n .header p {\n font-size: 1.2rem;\n opacity: 0.95;\n max-width: 800px;\n margin: 0 auto;\n color: #f0f0f0;\n text-shadow: 0 1px 3px rgba(0,0,0,0.3);\n }\n \n .main-grid {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 30px;\n margin-bottom: 40px;\n width: 100%;\n }\n \n @media (max-width: 1100px) {\n .main-grid {\n grid-template-columns: 1fr;\n }\n }\n \n .calculator-card {\n background: white;\n border-radius: 25px;\n padding: 35px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\n width: 100%;\n overflow: hidden;\n }\n \n .converter-section {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n }\n \n .history-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 25px;\n padding: 35px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\n width: 100%;\n overflow: hidden;\n }\n \n .section-title {\n color: #2c3e50;\n margin-bottom: 25px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n word-break: break-word;\n }\n \n .section-title i {\n color: #667eea;\n }\n \n \/* \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 *\/\n .converter-form {\n display: flex;\n flex-direction: column;\n gap: 25px;\n width: 100%;\n }\n \n .input-group {\n position: relative;\n width: 100%;\n }\n \n .input-group label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #2c3e50;\n font-size: 1.1rem;\n }\n \n .input-with-icon {\n position: relative;\n width: 100%;\n }\n \n .input-with-icon input {\n width: 100%;\n padding: 18px 20px 18px 60px;\n border: 3px solid #e0e0e0;\n border-radius: 15px;\n font-size: 1.2rem;\n font-weight: 600;\n transition: all 0.3s;\n background: #f8f9fa;\n box-sizing: border-box;\n }\n \n .input-with-icon input:focus {\n border-color: #667eea;\n background: white;\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.1);\n outline: none;\n }\n \n .input-icon {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n color: #667eea;\n font-size: 1.3rem;\n font-weight: bold;\n }\n \n \/* \u041d\u041e\u0412\u042b\u0419 \u0421\u0422\u0418\u041b\u042c: \u0411\u043b\u043e\u043a \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 \"\u0418\u0417\" \u0438 \"\u0412\" *\/\n .unit-selector-with-hints {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-top: 15px;\n width: 100%;\n }\n \n .unit-select-container {\n flex: 1;\n position: relative;\n }\n \n .unit-hint {\n position: absolute;\n font-size: 0.7rem;\n font-weight: 600;\n color: #ffffff;\n padding: 3px 10px;\n border-radius: 12px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 4px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n \n .unit-hint-from {\n top: -10px;\n left: 10px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n \n .unit-hint-to {\n bottom: -10px;\n right: 10px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n }\n \n .unit-hint i {\n font-size: 0.6rem;\n }\n \n .unit-selector-with-hints select {\n width: 100%;\n padding: 15px;\n border: 3px solid #e0e0e0;\n border-radius: 15px;\n font-size: 1rem;\n font-weight: 600;\n background: #f8f9fa;\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .unit-selector-with-hints select:focus {\n border-color: #667eea;\n outline: none;\n background: white;\n }\n \n .swap-button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s;\n font-size: 1.2rem;\n flex-shrink: 0;\n }\n \n .swap-button:hover {\n transform: rotate(180deg) scale(1.1);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n \n .result-display {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n padding: 30px;\n border-radius: 20px;\n text-align: center;\n margin-top: 20px;\n box-shadow: 0 10px 30px rgba(79, 172, 254, 0.2);\n width: 100%;\n box-sizing: border-box;\n }\n \n .result-value {\n font-size: 3.5rem;\n font-weight: 800;\n margin: 15px 0;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n word-break: break-word;\n overflow-wrap: break-word;\n }\n \n .result-unit {\n font-size: 1.3rem;\n opacity: 0.9;\n font-weight: 600;\n word-break: break-word;\n }\n \n .quick-conversions {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-top: 30px;\n width: 100%;\n }\n \n .quick-conversion-item {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n border: 2px solid #e0e0e0;\n transition: all 0.3s;\n cursor: pointer;\n min-width: 0;\n overflow: hidden;\n }\n \n .quick-conversion-item:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);\n }\n \n .quick-value {\n font-size: 1.5rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 10px 0 5px;\n word-break: break-word;\n }\n \n .quick-unit {\n font-size: 0.9rem;\n color: #666;\n }\n \n \/* \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f *\/\n .visualization {\n margin-top: 30px;\n padding: 25px;\n background: white;\n border-radius: 20px;\n border: 2px solid #e0e0e0;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n .scale-container {\n height: 120px;\n background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 100%);\n border-radius: 10px;\n position: relative;\n margin: 30px 0;\n overflow: hidden;\n width: 100%;\n }\n \n .scale-marker {\n position: absolute;\n height: 100%;\n width: 3px;\n background: #667eea;\n top: 0;\n transform: translateX(-50%);\n transition: left 1s ease;\n }\n \n .scale-marker::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 10px solid #667eea;\n }\n \n .scale-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n font-size: 0.9rem;\n color: #666;\n font-weight: 600;\n width: 100%;\n flex-wrap: wrap;\n }\n \n .scale-labels span {\n flex: 1;\n min-width: 60px;\n text-align: center;\n }\n \n .comparison-items {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-top: 30px;\n width: 100%;\n }\n \n .comparison-item {\n text-align: center;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 15px;\n transition: all 0.3s;\n min-width: 0;\n overflow: hidden;\n }\n \n .comparison-item:hover {\n background: #e3f2fd;\n transform: scale(1.05);\n }\n \n .comparison-icon {\n font-size: 2rem;\n color: #667eea;\n margin-bottom: 10px;\n }\n \n .comparison-value {\n font-size: 1.2rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 5px 0;\n word-break: break-word;\n }\n \n \/* \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0440\u044b *\/\n .history-timeline {\n position: relative;\n padding-left: 30px;\n margin: 30px 0;\n width: 100%;\n }\n \n .history-timeline::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, #667eea, #764ba2);\n }\n \n .history-item {\n position: relative;\n margin-bottom: 30px;\n padding: 25px;\n background: white;\n border-radius: 15px;\n border-left: 5px solid #667eea;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n width: 100%;\n box-sizing: border-box;\n }\n \n .history-item::before {\n content: '';\n position: absolute;\n left: -38px;\n top: 30px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #667eea;\n border: 3px solid white;\n box-shadow: 0 0 0 3px #667eea;\n }\n \n .history-period {\n font-weight: 700;\n color: #667eea;\n margin-bottom: 8px;\n font-size: 1.1rem;\n word-break: break-word;\n }\n \n .history-description {\n color: #666;\n line-height: 1.5;\n }\n \n \/* \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f *\/\n .units-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 15px;\n margin-top: 25px;\n width: 100%;\n }\n \n .unit-card {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n border: 2px solid #e0e0e0;\n transition: all 0.3s;\n cursor: pointer;\n min-width: 0;\n overflow: hidden;\n }\n \n .unit-card:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n }\n \n .unit-card.active {\n border-color: #667eea;\n background: #e3f2fd;\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);\n }\n \n .unit-symbol {\n font-size: 2rem;\n font-weight: 700;\n color: #667eea;\n margin-bottom: 10px;\n word-break: break-all;\n }\n \n .unit-name {\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 5px;\n word-break: break-word;\n }\n \n .unit-value {\n font-size: 0.9rem;\n color: #666;\n word-break: break-word;\n }\n \n \/* \u041a\u043d\u043e\u043f\u043a\u0438 *\/\n .action-buttons {\n display: flex;\n gap: 15px;\n margin-top: 30px;\n flex-wrap: wrap;\n width: 100%;\n }\n \n .action-btn {\n flex: 1;\n min-width: 150px;\n padding: 18px 25px;\n border: none;\n border-radius: 15px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n box-sizing: border-box;\n }\n \n .btn-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n \n .btn-secondary {\n background: #f8f9fa;\n color: #2c3e50;\n border: 2px solid #e0e0e0;\n }\n \n .action-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n }\n \n .btn-primary:hover {\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);\n }\n \n \/* \u0424\u0443\u0442\u0435\u0440 *\/\n .footer {\n text-align: center;\n margin-top: 50px;\n color: white;\n opacity: 0.8;\n font-size: 0.9rem;\n padding: 0 10px;\n width: 100%;\n }\n \n \/* \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c \u0414\u041b\u042f \u041d\u041e\u0412\u041e\u0413\u041e \u0418\u041d\u0422\u0415\u0420\u0424\u0415\u0419\u0421\u0410 *\/\n @media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n .container {\n padding: 0 10px;\n max-width: 100%;\n }\n \n .header h1 {\n font-size: 2rem;\n line-height: 1.3;\n padding: 0 5px;\n }\n \n .header p {\n font-size: 1rem;\n padding: 0 5px;\n }\n \n .calculator-card,\n .history-card {\n padding: 20px;\n border-radius: 20px;\n margin: 0 -5px;\n width: calc(100% + 10px);\n }\n \n .section-title {\n font-size: 1.5rem;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .result-value {\n font-size: 2.5rem;\n line-height: 1.2;\n }\n \n .input-with-icon input {\n padding: 15px 15px 15px 50px;\n font-size: 1.1rem;\n }\n \n \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 *\/\n .unit-selector-with-hints {\n flex-direction: column;\n gap: 10px;\n }\n \n .unit-select-container {\n width: 100%;\n }\n \n .unit-hint-from {\n top: -10px;\n left: 10px;\n }\n \n .unit-hint-to {\n bottom: -10px;\n right: 10px;\n }\n \n .swap-button {\n align-self: center;\n margin: 5px 0;\n }\n \n .quick-conversions {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .quick-conversion-item {\n padding: 15px;\n }\n \n .quick-value {\n font-size: 1.3rem;\n }\n \n .comparison-items {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n \n .units-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .unit-card {\n padding: 15px;\n }\n \n .unit-symbol {\n font-size: 1.5rem;\n }\n \n .visualization {\n padding: 20px;\n }\n \n .history-timeline {\n padding-left: 20px;\n }\n \n .history-item {\n padding: 20px;\n margin-bottom: 20px;\n }\n \n .history-item::before {\n left: -30px;\n width: 16px;\n height: 16px;\n }\n \n .action-buttons {\n flex-direction: column;\n gap: 10px;\n }\n \n .action-btn {\n min-width: 100%;\n padding: 16px;\n }\n \n .formula-box {\n padding: 12px;\n font-size: 0.9rem;\n overflow-x: auto;\n }\n \n .info-box {\n padding: 15px;\n font-size: 0.9rem;\n }\n }\n \n @media (max-width: 480px) {\n .header h1 {\n font-size: 1.8rem;\n }\n \n .header p {\n font-size: 0.95rem;\n }\n \n .calculator-card,\n .history-card {\n padding: 15px;\n }\n \n .section-title {\n font-size: 1.3rem;\n }\n \n .result-value {\n font-size: 2rem;\n }\n \n .result-unit {\n font-size: 1.1rem;\n }\n \n .quick-conversions {\n grid-template-columns: 1fr;\n }\n \n .units-grid {\n grid-template-columns: 1fr;\n }\n \n .input-with-icon input {\n font-size: 1rem;\n padding: 12px 12px 12px 45px;\n }\n \n .input-icon {\n left: 15px;\n font-size: 1.1rem;\n }\n \n .unit-selector-with-hints select {\n font-size: 0.9rem;\n }\n \n .history-timeline {\n padding-left: 15px;\n }\n \n .history-item {\n padding: 15px;\n }\n \n .history-period {\n font-size: 1rem;\n }\n \n .history-description {\n font-size: 0.9rem;\n }\n \n .comparison-value {\n font-size: 1rem;\n }\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n @media (max-width: 360px) {\n .container {\n padding: 0 5px;\n }\n \n .calculator-card,\n .history-card {\n padding: 12px;\n border-radius: 15px;\n }\n \n .header h1 {\n font-size: 1.6rem;\n }\n \n .section-title {\n font-size: 1.2rem;\n }\n \n .result-value {\n font-size: 1.8rem;\n }\n \n .input-with-icon input {\n padding: 10px 10px 10px 40px;\n font-size: 0.9rem;\n }\n }\n \n \/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 *\/\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n .pulse {\n animation: pulse 0.5s ease;\n }\n \n \/* \u0421\u043f\u0440\u0430\u0432\u043a\u0430 *\/\n .info-box {\n background: #e3f2fd;\n border-left: 4px solid #4facfe;\n padding: 20px;\n border-radius: 10px;\n margin: 20px 0;\n font-size: 0.95rem;\n width: 100%;\n box-sizing: border-box;\n }\n \n .formula-box {\n background: #f8f9fa;\n padding: 15px;\n border-radius: 10px;\n margin: 15px 0;\n font-family: monospace;\n border: 1px dashed #ddd;\n width: 100%;\n box-sizing: border-box;\n overflow-x: auto;\n }\n \n \/* \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 *\/\n .reload-button {\n background: #e74c3c;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 10px;\n cursor: pointer;\n font-size: 0.9rem;\n margin-top: 15px;\n transition: all 0.3s;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n max-width: 300px;\n justify-content: center;\n box-sizing: border-box;\n }\n \n .reload-button:hover {\n background: #c0392b;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);\n }\n \n \/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f *\/\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;\n }\n \n @media (max-width: 768px) {\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: repeat(2, 1fr) !important;\n }\n }\n \n @media (max-width: 480px) {\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: 1fr !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"header\">\n <h1><i class=\"fas fa-ruler-combined\"><\/i> \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b<\/h1>\n <p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0434\u043b\u0438\u043d\u044b \u0441 \u043d\u0430\u0443\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n <\/div>\n \n \n <div class=\"main-grid\">\n \n <div class=\"calculator-card converter-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-exchange-alt\"><\/i> \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0434\u043b\u0438\u043d\u044b\n <\/h2>\n \n <div class=\"converter-form\">\n \n <div class=\"input-group\">\n <label for=\"inputValue\"><i class=\"fas fa-arrow-right\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/label>\n <div class=\"input-with-icon\">\n <input type=\"number\" id=\"inputValue\" value=\"1\" step=\"any\" min=\"0\">\n <span class=\"input-icon\">#<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"unit-selector-with-hints\">\n <div class=\"unit-select-container\">\n <div class=\"unit-hint unit-hint-from\">\n <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n <span>\u0418\u0417<\/span>\n <\/div>\n <select id=\"fromUnit\">\n <option value=\"m\">\u041c\u0435\u0442\u0440\u044b (m)<\/option>\n <option value=\"km\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)<\/option>\n <option value=\"cm\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)<\/option>\n <option value=\"mm\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)<\/option>\n <option value=\"in\">\u0414\u044e\u0439\u043c\u044b (in)<\/option>\n <option value=\"ft\">\u0424\u0443\u0442\u044b (ft)<\/option>\n <option value=\"yd\">\u042f\u0440\u0434\u044b (yd)<\/option>\n <option value=\"mi\">\u041c\u0438\u043b\u0438 (mi)<\/option>\n <\/select>\n <\/div>\n \n <button class=\"swap-button\" id=\"swapUnits\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <\/button>\n \n <div class=\"unit-select-container\">\n <div class=\"unit-hint unit-hint-to\">\n <span>\u0412<\/span>\n <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n <\/div>\n <select id=\"toUnit\">\n <option value=\"cm\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)<\/option>\n <option value=\"m\">\u041c\u0435\u0442\u0440\u044b (m)<\/option>\n <option value=\"km\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)<\/option>\n <option value=\"mm\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)<\/option>\n <option value=\"in\">\u0414\u044e\u0439\u043c\u044b (in)<\/option>\n <option value=\"ft\">\u0424\u0443\u0442\u044b (ft)<\/option>\n <option value=\"yd\">\u042f\u0440\u0434\u044b (yd)<\/option>\n <option value=\"mi\">\u041c\u0438\u043b\u0438 (mi)<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div class=\"result-display\">\n <div id=\"resultValue\" class=\"result-value\">100<\/div>\n <div id=\"resultUnit\" class=\"result-unit\">\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432<\/div>\n <\/div>\n \n \n <div class=\"quick-conversions\">\n <div class=\"quick-conversion-item\" data-to=\"cm\">\n <div class=\"quick-value\" id=\"quickCm\">100<\/div>\n <div class=\"quick-unit\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"in\">\n <div class=\"quick-value\" id=\"quickIn\">39.37<\/div>\n <div class=\"quick-unit\">\u0414\u044e\u0439\u043c\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"ft\">\n <div class=\"quick-value\" id=\"quickFt\">3.28<\/div>\n <div class=\"quick-unit\">\u0424\u0443\u0442\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"yd\">\n <div class=\"quick-value\" id=\"quickYd\">1.09<\/div>\n <div class=\"quick-unit\">\u042f\u0440\u0434\u044b<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"visualization\">\n <h3 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-chart-line\"><\/i> \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n <\/h3>\n \n <div class=\"scale-container\">\n <div class=\"scale-marker\" id=\"scaleMarker\" style=\"left: 50%;\"><\/div>\n <\/div>\n \n <div class=\"scale-labels\">\n <span id=\"minLabel\">0<\/span>\n <span id=\"midLabel\">\u0421\u0440\u0435\u0434\u043d\u0435\u0435<\/span>\n <span id=\"maxLabel\">2 \u043c<\/span>\n <\/div>\n \n <div class=\"comparison-items\">\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-pencil-ruler\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison1\">\u2248 1 \u043b\u0438\u043d\u0435\u0439\u043a\u0430<\/div>\n <div>30 \u0441\u043c<\/div>\n <\/div>\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-basketball-ball\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison2\">\u2248 0.5 \u043c\u044f\u0447\u0430<\/div>\n <div>\u0414\u0438\u0430\u043c\u0435\u0442\u0440<\/div>\n <\/div>\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-car\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison3\">\u2248 0.01 \u0430\u0432\u0442\u043e<\/div>\n <div>\u0414\u043b\u0438\u043d\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"action-buttons\">\n <button class=\"action-btn btn-primary\" id=\"calculateBtn\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c\n <\/button>\n <button class=\"action-btn btn-secondary\" id=\"resetBtn\">\n <i class=\"fas fa-redo\"><\/i> \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c\n <\/button>\n <button class=\"action-btn btn-secondary\" id=\"copyBtn\">\n <i class=\"far fa-copy\"><\/i> \u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n <\/button>\n <\/div>\n \n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"reload-button\" id=\"reloadCalcBtn\">\n <i class=\"fas fa-sync-alt\"><\/i> \u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"history-card\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0440\u044b \u0434\u043b\u0438\u043d\u044b\n <\/h2>\n \n <div class=\"info-box\">\n <p><strong>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442:<\/strong> \u041c\u0435\u0442\u0440 \u0431\u044b\u043b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0432 1793 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u043e\u0434\u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u0438\u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u044d\u043a\u0432\u0430\u0442\u043e\u0440\u0430 \u0434\u043e \u0421\u0435\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044e\u0441\u0430.<\/p>\n <\/div>\n \n \n <div class=\"units-grid\">\n <div class=\"unit-card\" data-unit=\"arshin\">\n <div class=\"unit-symbol\">\u0410<\/div>\n <div class=\"unit-name\">\u0410\u0440\u0448\u0438\u043d<\/div>\n <div class=\"unit-value\">\u2248 71.12 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"sazhen\">\n <div class=\"unit-symbol\">\u0421<\/div>\n <div class=\"unit-name\">\u0421\u0430\u0436\u0435\u043d\u044c<\/div>\n <div class=\"unit-value\">\u2248 2.13 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"verst\">\n <div class=\"unit-symbol\">\u0412<\/div>\n <div class=\"unit-name\">\u0412\u0435\u0440\u0441\u0442\u0430<\/div>\n <div class=\"unit-value\">\u2248 1.07 \u043a\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"cubit\">\n <div class=\"unit-symbol\">\u041b<\/div>\n <div class=\"unit-name\">\u041b\u043e\u043a\u043e\u0442\u044c<\/div>\n <div class=\"unit-value\">\u2248 45-47 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"span\">\n <div class=\"unit-symbol\">\u041f<\/div>\n <div class=\"unit-name\">\u041f\u044f\u0434\u044c<\/div>\n <div class=\"unit-value\">\u2248 17.78 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"foot_rus\">\n <div class=\"unit-symbol\">\u0424<\/div>\n <div class=\"unit-name\">\u0424\u0443\u0442 (\u0440\u0443\u0441.)<\/div>\n <div class=\"unit-value\">\u2248 30.48 \u0441\u043c<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"history-timeline\">\n <div class=\"history-item\">\n <div class=\"history-period\">\u0414\u0440\u0435\u0432\u043d\u0438\u0439 \u0415\u0433\u0438\u043f\u0435\u0442 (~3000 \u0434\u043e \u043d.\u044d.)<\/div>\n <div class=\"history-description\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 «\u043b\u043e\u043a\u043e\u0442\u044c» (\u043e\u043a\u043e\u043b\u043e 45 \u0441\u043c), \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u043b\u0438\u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043b\u0435\u0447\u044c\u044f \u0444\u0430\u0440\u0430\u043e\u043d\u0430.<\/div>\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">\u0420\u0438\u043c\u0441\u043a\u0430\u044f \u0438\u043c\u043f\u0435\u0440\u0438\u044f<\/div>\n <div class=\"history-description\">«\u0420\u0438\u043c\u0441\u043a\u0438\u0439 \u0444\u0443\u0442» (pes) \u2248 29.6 \u0441\u043c. «\u041c\u0438\u043b\u043b\u044f\u0440\u0438\u0439» (\u0440\u0438\u043c\u0441\u043a\u0430\u044f \u043c\u0438\u043b\u044f) = 1000 \u0434\u0432\u043e\u0439\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432.<\/div>\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">\u0421\u0440\u0435\u0434\u043d\u0435\u0432\u0435\u043a\u043e\u0432\u0430\u044f \u0420\u0443\u0441\u044c<\/div>\n <div class=\"history-description\">\u0410\u0440\u0448\u0438\u043d (71.12 \u0441\u043c), \u0441\u0430\u0436\u0435\u043d\u044c (2.13 \u043c), \u0432\u0435\u0440\u0441\u0442\u0430 (1.07 \u043a\u043c). \u041c\u0435\u0440\u044b \u0432\u0430\u0440\u044c\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0430\u043c.<\/div>\n <\/div>\n <div class=\"history-item\">\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">1793 \u0433\u043e\u0434 — \u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/div>\n <div class=\"history-description\">\u0424\u0440\u0430\u043d\u0446\u0438\u044f \u0432\u0432\u043e\u0434\u0438\u0442 \u043c\u0435\u0442\u0440 \u043a\u0430\u043a 1\/10 000 000 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u044d\u043a\u0432\u0430\u0442\u043e\u0440\u0430 \u0434\u043e \u043f\u043e\u043b\u044e\u0441\u0430.<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"formula-box\">\n <strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u044b \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438:<\/strong><br>\n 1 \u043c = 100 \u0441\u043c = 1000 \u043c\u043c<br>\n 1 \u0434\u044e\u0439\u043c = 2.54 \u0441\u043c<br>\n 1 \u0444\u0443\u0442 = 30.48 \u0441\u043c = 12 \u0434\u044e\u0439\u043c\u043e\u0432<br>\n 1 \u044f\u0440\u0434 = 91.44 \u0441\u043c = 3 \u0444\u0443\u0442\u0430<br>\n 1 \u043c\u0438\u043b\u044f = 1609.34 \u043c\n <\/div>\n \n \n <h3 style=\"color: #2c3e50; margin: 30px 0 20px;\">\n <i class=\"fas fa-ruler\"><\/i> \u0412\u0441\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\n <\/h3>\n \n <div class=\"units-grid\" style=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\">\n <div class=\"unit-card\" data-unit=\"km\">\n <div class=\"unit-symbol\">km<\/div>\n <div class=\"unit-name\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">1000 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"m\">\n <div class=\"unit-symbol\">m<\/div>\n <div class=\"unit-name\">\u041c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"dm\">\n <div class=\"unit-symbol\">dm<\/div>\n <div class=\"unit-name\">\u0414\u0435\u0446\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.1 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"cm\">\n <div class=\"unit-symbol\">cm<\/div>\n <div class=\"unit-name\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.01 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"mm\">\n <div class=\"unit-symbol\">mm<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.001 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"\u00b5m\">\n <div class=\"unit-symbol\">\u00b5m<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.000001 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"nm\">\n <div class=\"unit-symbol\">nm<\/div>\n <div class=\"unit-name\">\u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">10\u207b\u2079 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"mi\">\n <div class=\"unit-symbol\">mi<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043b\u0438<\/div>\n <div class=\"unit-value\">1609.34 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"yd\">\n <div class=\"unit-symbol\">yd<\/div>\n <div class=\"unit-name\">\u042f\u0440\u0434\u044b<\/div>\n <div class=\"unit-value\">0.9144 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"ft\">\n <div class=\"unit-symbol\">ft<\/div>\n <div class=\"unit-name\">\u0424\u0443\u0442\u044b<\/div>\n <div class=\"unit-value\">0.3048 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"in\">\n <div class=\"unit-symbol\">in<\/div>\n <div class=\"unit-name\">\u0414\u044e\u0439\u043c\u044b<\/div>\n <div class=\"unit-value\">0.0254 \u043c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"footer\">\n <p>\u00a9 2026 \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b | \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e 15 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u044f\u0442\u043e\u0439 | \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 ISO \u0438 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432<\/p>\n <\/div>\n <\/div>\n\n <script>\n\/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c IIFE \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\n(function() {\n console.log('=== \u041a\u041e\u041d\u0412\u0415\u0420\u0422\u0415\u0420 \u041d\u0410\u0427\u0418\u041d\u0410\u0415\u0422 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0423 ===');\n \n let calculatorInitialized = false;\n let calculatorElements = null;\n \n function initializeCalculator() {\n if (calculatorInitialized) {\n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0443\u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c...');\n return;\n }\n calculatorInitialized = true;\n \n console.log('\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430...');\n \n try {\n calculatorElements = initCalculator();\n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d');\n \n \/\/ \u0424\u043e\u0440\u0441\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(() => {\n const calculateBtn = document.getElementById('calculateBtn');\n if (calculateBtn) {\n console.log('\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442...');\n calculateBtn.click();\n }\n }, 100);\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\n setupMonitoring();\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430:', error);\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e\n const resultValue = document.getElementById('resultValue');\n if (resultValue) {\n resultValue.textContent = '\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438';\n resultValue.style.color = '#e74c3c';\n }\n calculatorInitialized = false; \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u0430\u0433 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438\n }\n }\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeCalculator);\n console.log('\u041e\u0436\u0438\u0434\u0430\u0435\u043c DOMContentLoaded...');\n } else {\n console.log('DOM \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0440\u0430\u0437\u0443...');\n initializeCalculator();\n }\n \n \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n window.addEventListener('load', function() {\n console.log('\u0421\u043e\u0431\u044b\u0442\u0438\u0435 window.load \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e');\n if (!calculatorInitialized) {\n console.log('\u0417\u0430\u043f\u0443\u0441\u043a \u0447\u0435\u0440\u0435\u0437 window.load');\n initializeCalculator();\n }\n });\n \n \/\/ \u042d\u043a\u0441\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0447\u0435\u0440\u0435\u0437 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e\n setTimeout(() => {\n if (!calculatorInitialized) {\n console.log('\u042d\u043a\u0441\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443');\n initializeCalculator();\n }\n }, 3000);\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\n function setupMonitoring() {\n \/\/ \u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0435 10 \u0441\u0435\u043a\u0443\u043d\u0434\n setInterval(() => {\n if (!calculatorElements) return;\n \n try {\n const value = parseFloat(calculatorElements.inputValue.value) || 0;\n const from = calculatorElements.fromUnit.value;\n const to = calculatorElements.toUnit.value;\n const result = calculatorElements.convert(value, from, to);\n \n console.log('\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430:', {\n \u0432\u0440\u0435\u043c\u044f: new Date().toLocaleTimeString(),\n \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: value,\n \u0438\u0437: from,\n \u0432: to,\n \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: result,\n \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f: calculatorElements.resultValue.textContent,\n \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d: calculatorInitialized\n });\n } catch (e) {\n console.log('\u041e\u0448\u0438\u0431\u043a\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430:', e);\n }\n }, 10000);\n }\n \n \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\n window.reloadCalculator = function() {\n console.log('\u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430...');\n calculatorInitialized = false;\n initializeCalculator();\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\n const reloadBtn = document.getElementById('reloadCalcBtn');\n if (reloadBtn) {\n const originalHTML = reloadBtn.innerHTML;\n reloadBtn.innerHTML = '<i class=\"fas fa-check\"><\/i> \u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e!';\n reloadBtn.style.background = '#27ae60';\n setTimeout(() => {\n reloadBtn.innerHTML = originalHTML;\n reloadBtn.style.background = '';\n }, 2000);\n }\n };\n \n})();\n\n\/\/ \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\nfunction initCalculator() {\n console.log('\u0424\u0443\u043d\u043a\u0446\u0438\u044f initCalculator \u0432\u044b\u0437\u0432\u0430\u043d\u0430');\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n const elements = {\n inputValue: document.getElementById('inputValue'),\n fromUnit: document.getElementById('fromUnit'),\n toUnit: document.getElementById('toUnit'),\n resultValue: document.getElementById('resultValue'),\n resultUnit: document.getElementById('resultUnit'),\n swapButton: document.getElementById('swapUnits'),\n calculateBtn: document.getElementById('calculateBtn'),\n resetBtn: document.getElementById('resetBtn'),\n copyBtn: document.getElementById('copyBtn'),\n reloadCalcBtn: document.getElementById('reloadCalcBtn'),\n scaleMarker: document.getElementById('scaleMarker'),\n maxLabel: document.getElementById('maxLabel'),\n minLabel: document.getElementById('minLabel'),\n midLabel: document.getElementById('midLabel')\n };\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n for (const [key, element] of Object.entries(elements)) {\n if (!element) {\n console.error('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d: ' + key);\n } else {\n console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0439\u0434\u0435\u043d: ' + key);\n }\n }\n \n \/\/ \u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 (\u0432 \u043c\u0435\u0442\u0440\u044b)\n const factors = {\n 'm': 1,\n 'km': 1000,\n 'cm': 0.01,\n 'mm': 0.001,\n 'in': 0.0254,\n 'ft': 0.3048,\n 'yd': 0.9144,\n 'mi': 1609.34,\n \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'arshin': 0.7112,\n 'sazhen': 2.1336,\n 'verst': 1066.8,\n 'cubit': 0.46,\n 'span': 0.1778,\n 'foot_rus': 0.3048,\n \/\/ \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'dm': 0.1,\n '\u00b5m': 0.000001,\n 'nm': 0.000000001\n };\n \n \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446 (\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0441\u0440\u0435\u0434\u043d\u0435\u0435, \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435)\n const unitNames = {\n 'm': ['\u043c\u0435\u0442\u0440', '\u043c\u0435\u0442\u0440\u0430', '\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'km': ['\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440', '\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u0430', '\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'cm': ['\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440', '\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430', '\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'mm': ['\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440', '\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u0430', '\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'in': ['\u0434\u044e\u0439\u043c', '\u0434\u044e\u0439\u043c\u0430', '\u0434\u044e\u0439\u043c\u043e\u0432'],\n 'ft': ['\u0444\u0443\u0442', '\u0444\u0443\u0442\u0430', '\u0444\u0443\u0442\u043e\u0432'],\n 'yd': ['\u044f\u0440\u0434', '\u044f\u0440\u0434\u0430', '\u044f\u0440\u0434\u043e\u0432'],\n 'mi': ['\u043c\u0438\u043b\u044f', '\u043c\u0438\u043b\u0438', '\u043c\u0438\u043b\u044c'],\n 'dm': ['\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440', '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u0430', '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n '\u00b5m': ['\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440', '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u0430', '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'nm': ['\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440', '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430', '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'arshin': ['\u0430\u0440\u0448\u0438\u043d', '\u0430\u0440\u0448\u0438\u043d\u0430', '\u0430\u0440\u0448\u0438\u043d\u043e\u0432'],\n 'sazhen': ['\u0441\u0430\u0436\u0435\u043d\u044c', '\u0441\u0430\u0436\u0435\u043d\u0438', '\u0441\u0430\u0436\u0435\u043d\u0435\u0439'],\n 'verst': ['\u0432\u0435\u0440\u0441\u0442\u0430', '\u0432\u0435\u0440\u0441\u0442\u044b', '\u0432\u0435\u0440\u0441\u0442'],\n 'cubit': ['\u043b\u043e\u043a\u043e\u0442\u044c', '\u043b\u043e\u043a\u0442\u044f', '\u043b\u043e\u043a\u0442\u0435\u0439'],\n 'span': ['\u043f\u044f\u0434\u044c', '\u043f\u044f\u0434\u0438', '\u043f\u044f\u0434\u0435\u0439'],\n 'foot_rus': ['\u0444\u0443\u0442', '\u0444\u0443\u0442\u0430', '\u0444\u0443\u0442\u043e\u0432']\n };\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n function convert(value, from, to) {\n if (!factors[from] || !factors[to]) {\n console.error('\u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430: from=' + from + ', to=' + to);\n return 0;\n }\n \n const valueInMeters = value * factors[from];\n return valueInMeters \/ factors[to];\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0438\u0441\u043b\u0430\n function formatNumber(num) {\n if (num === 0 || isNaN(num)) return '0';\n \n const absNum = Math.abs(num);\n \n if (absNum >= 1000000) {\n return num.toExponential(2).replace('e+', '\u00d710^');\n } else if (absNum >= 1000) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 2 });\n } else if (absNum >= 1) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 4 });\n } else if (absNum >= 0.001) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 6 });\n } else {\n return num.toExponential(2).replace('e-', '\u00d710^-');\n }\n }\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0441\u043b\u043e\u0432\u0430 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e \u0414\u041b\u042f WORDPRESS\n function getUnitForm(result, unitKey) {\n if (!unitNames[unitKey]) return unitKey;\n \n const absResult = Math.abs(result);\n \n \/\/ \u0414\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 1\n if (Math.abs(absResult - 1) < 0.01) {\n return unitNames[unitKey][0];\n }\n \n \/\/ \u0414\u043b\u044f 2, 3, 4 (\u043d\u043e \u043d\u0435 12, 13, 14)\n const lastDigit = Math.floor(absResult) % 10;\n const lastTwoDigits = Math.floor(absResult) % 100;\n \n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e && \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 WordPress\n var condition1 = lastDigit >= 2;\n var condition2 = lastDigit <= 4;\n var condition3 = lastTwoDigits < 10;\n var condition4 = lastTwoDigits >= 20;\n \n if (condition1 && condition2 && (condition3 || condition4)) {\n return unitNames[unitKey][1];\n }\n \n \/\/ \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432\n return unitNames[unitKey][2];\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445\n function updateAll() {\n try {\n const value = parseFloat(elements.inputValue.value) || 0;\n const from = elements.fromUnit.value;\n const to = elements.toUnit.value;\n \n \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n const result = convert(value, from, to);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n elements.resultValue.textContent = formatNumber(result);\n elements.resultUnit.textContent = getUnitForm(result, to);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n updateQuickConversions(value, from);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e\n updateVisualization(value, from);\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e\n elements.resultValue.classList.remove('pulse');\n void elements.resultValue.offsetWidth;\n elements.resultValue.classList.add('pulse');\n \n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f: ' + value + ' ' + from + ' = ' + result + ' ' + to);\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438:', error);\n elements.resultValue.textContent = '\u041e\u0428\u0418\u0411\u041a\u0410';\n elements.resultUnit.textContent = '';\n }\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0439\n function updateQuickConversions(value, from) {\n const quickUnits = ['cm', 'in', 'ft', 'yd'];\n \n quickUnits.forEach(unit => {\n const elementId = 'quick' + unit.charAt(0).toUpperCase() + unit.slice(1);\n const element = document.getElementById(elementId);\n if (element) {\n const result = convert(value, from, unit);\n element.textContent = formatNumber(result);\n }\n });\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\n function updateVisualization(value, from) {\n try {\n const valueInMeters = value * factors[from];\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0448\u043a\u0430\u043b\u044b\n let maxValue = 1;\n let maxLabel = \"1 \u043c\";\n \n if (valueInMeters < 0.01) {\n maxValue = 0.01;\n maxLabel = \"1 \u0441\u043c\";\n } else if (valueInMeters < 1) {\n maxValue = 1;\n maxLabel = \"1 \u043c\";\n } else if (valueInMeters < 10) {\n maxValue = 10;\n maxLabel = \"10 \u043c\";\n } else if (valueInMeters < 100) {\n maxValue = 100;\n maxLabel = \"100 \u043c\";\n } else {\n maxValue = Math.ceil(valueInMeters \/ 100) * 100;\n maxLabel = formatNumber(maxValue) + \" \u043c\";\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043a\u0443\n if (elements.maxLabel) {\n elements.maxLabel.textContent = maxLabel;\n }\n \n \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u0430\n let position = (valueInMeters \/ maxValue) * 100;\n position = Math.max(0, Math.min(100, position));\n \n if (elements.scaleMarker) {\n elements.scaleMarker.style.left = position + '%';\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f\n updateComparisons(valueInMeters);\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:', error);\n }\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439\n function updateComparisons(valueInMeters) {\n const comparisons = [\n { id: 'comparison1', unit: 0.3, name: '\u043b\u0438\u043d\u0435\u0439\u043a' },\n { id: 'comparison2', unit: 0.24, name: '\u043c\u044f\u0447' },\n { id: 'comparison3', unit: 4.5, name: '\u0430\u0432\u0442\u043e' }\n ];\n \n comparisons.forEach(comp => {\n const element = document.getElementById(comp.id);\n if (element) {\n const count = valueInMeters \/ comp.unit;\n \n \/\/ \u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0447\u0438\u0441\u043b\u043e\n let formattedCount;\n if (count === 0) formattedCount = '0';\n else if (Math.abs(count) >= 1000) formattedCount = count.toFixed(0);\n else if (Math.abs(count) >= 100) formattedCount = count.toFixed(0);\n else if (Math.abs(count) >= 10) formattedCount = count.toFixed(1);\n else if (Math.abs(count) >= 1) formattedCount = count.toFixed(2);\n else formattedCount = count.toFixed(3);\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e \u0414\u041b\u042f WORDPRESS\n let ending = '';\n const absCount = Math.abs(count);\n const lastDigit = Math.floor(absCount) % 10;\n const lastTwoDigits = Math.floor(absCount) % 100;\n \n if (comp.name === '\u043b\u0438\u043d\u0435\u0439\u043a') {\n if (Math.abs(absCount - 1) < 0.01) ending = '\u0430';\n else {\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439\n var cond1 = lastDigit >= 2;\n var cond2 = lastDigit <= 4;\n var cond3 = lastTwoDigits < 10;\n var cond4 = lastTwoDigits >= 20;\n \n if (cond1 && cond2 && (cond3 || cond4)) {\n ending = '\u0438';\n } else {\n ending = '';\n }\n }\n } else if (comp.name === '\u043c\u044f\u0447') {\n if (Math.abs(absCount - 1) < 0.01) ending = '';\n else {\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439\n var cond1 = lastDigit >= 2;\n var cond2 = lastDigit <= 4;\n var cond3 = lastTwoDigits < 10;\n var cond4 = lastTwoDigits >= 20;\n \n if (cond1 && cond2 && (cond3 || cond4)) {\n ending = '\u0430';\n } else {\n ending = '\u0435\u0439';\n }\n }\n } else if (comp.name === '\u0430\u0432\u0442\u043e') {\n ending = ''; \/\/ \u043d\u0435 \u0441\u043a\u043b\u043e\u043d\u044f\u0435\u0442\u0441\u044f\n }\n \n element.textContent = '\u2248 ' + formattedCount + ' ' + comp.name + ending;\n }\n });\n }\n \n \/\/ \u041d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\n if (elements.inputValue) elements.inputValue.addEventListener('input', updateAll);\n if (elements.fromUnit) elements.fromUnit.addEventListener('change', updateAll);\n if (elements.toUnit) elements.toUnit.addEventListener('change', updateAll);\n \n \/\/ \u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043d\u0430 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430\n if (elements.inputValue) {\n elements.inputValue.addEventListener('focus', function() {\n updateAll();\n });\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043d\u043e\u043f\u043a\u0438\n if (elements.inputValue) elements.inputValue.addEventListener('change', updateAll);\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0431\u043c\u0435\u043d\u0430\n if (elements.swapButton) {\n elements.swapButton.addEventListener('click', function() {\n const temp = elements.fromUnit.value;\n elements.fromUnit.value = elements.toUnit.value;\n elements.toUnit.value = temp;\n updateAll();\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\n if (elements.calculateBtn) elements.calculateBtn.addEventListener('click', updateAll);\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430\n if (elements.resetBtn) {\n elements.resetBtn.addEventListener('click', function() {\n elements.inputValue.value = '1';\n elements.fromUnit.value = 'm';\n elements.toUnit.value = 'cm';\n updateAll();\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u0431\u0440\u043e\u0448\u0435\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n if (elements.copyBtn) {\n elements.copyBtn.addEventListener('click', function() {\n const text = elements.resultValue.textContent + ' ' + elements.resultUnit.textContent;\n \n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(() => {\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n }).catch(err => {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:', err);\n alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442');\n });\n } else {\n \/\/ Fallback \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432\n const textArea = document.createElement('textarea');\n textArea.value = text;\n document.body.appendChild(textArea);\n textArea.select();\n try {\n document.execCommand('copy');\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n } catch (err) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:', err);\n alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442');\n }\n document.body.removeChild(textArea);\n }\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\n if (elements.reloadCalcBtn) {\n elements.reloadCalcBtn.addEventListener('click', function() {\n window.reloadCalculator();\n });\n }\n \n \/\/ \u0411\u044b\u0441\u0442\u0440\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n document.querySelectorAll('.quick-conversion-item').forEach(item => {\n item.addEventListener('click', function() {\n const targetUnit = this.getAttribute('data-to');\n if (targetUnit && elements.toUnit) {\n elements.toUnit.value = targetUnit;\n updateAll();\n \n \/\/ \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430\n document.querySelectorAll('.quick-conversion-item').forEach(i => {\n i.classList.remove('active');\n });\n this.classList.add('active');\n setTimeout(() => this.classList.remove('active'), 1000);\n }\n });\n });\n \n \/\/ \u0412\u0421\u0415 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f - \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e\n document.querySelectorAll('.unit-card[data-unit]').forEach(card => {\n card.addEventListener('click', function() {\n const unit = this.getAttribute('data-unit');\n const value = parseFloat(elements.inputValue.value) || 0;\n const from = elements.fromUnit.value;\n \n \/\/ \u0414\u043b\u044f \u0412\u0421\u0415\u0425 \u0435\u0434\u0438\u043d\u0438\u0446 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n const result = convert(value, from, unit);\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446\n let fromName = from;\n let toName = unit;\n \n if (unitNames[from]) {\n fromName = unitNames[from][2];\n }\n \n if (unitNames[unit]) {\n toName = unitNames[unit][2];\n } else {\n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0442 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0435 \u0438\u043c\u044f\n const fallbackNames = {\n 'dm': '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u043e\u0432',\n '\u00b5m': '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432',\n 'nm': '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u043e\u0432'\n };\n toName = fallbackNames[unit] || unit;\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\n const toast = document.createElement('div');\n toast.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #667eea; color: white; padding: 15px; border-radius: 10px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 14px; max-width: 300px; word-break: break-word;';\n toast.textContent = formatNumber(value) + ' ' + fromName + ' = ' + formatNumber(result) + ' ' + toName;\n document.body.appendChild(toast);\n \n setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transition = 'opacity 0.3s';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n \n \/\/ \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438\n document.querySelectorAll('.unit-card').forEach(c => {\n c.classList.remove('active');\n });\n this.classList.add('active');\n setTimeout(() => this.classList.remove('active'), 1500);\n });\n });\n \n \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(() => {\n updateAll();\n }, 100);\n \n \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437\u0432\u043d\u0435\n return {\n elements: elements,\n convert: convert,\n updateAll: updateAll,\n updateQuickConversions: updateQuickConversions,\n updateVisualization: updateVisualization\n };\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<section class=\"science-hub\" style=\"\n margin: 80px auto;\n padding: 60px 0;\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n border-radius: 35px;\n position: relative;\n overflow: hidden;\n\">\n \n <div style=\"position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%); border-radius: 50%;\"><\/div>\n <div style=\"position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background: linear-gradient(135deg, #4facfe22 0%, #00f2fe22 100%); border-radius: 50%;\"><\/div>\n\n <div class=\"container\" style=\"max-width: 1400px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2;\">\n \n \n <div class=\"main-header\" style=\"text-align: center; margin-bottom: 60px;\">\n <div class=\"header-badge\" style=\"\n display: inline-block;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 12px 30px;\n border-radius: 25px;\n font-size: 0.9rem;\n font-weight: 600;\n margin-bottom: 20px;\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);\n \">\n <i class=\"fas fa-atom\"><\/i> \u041d\u0410\u0423\u0427\u041d\u042b\u0419 \u0426\u0415\u041d\u0422\u0420 \u0414\u0410\u041d\u041d\u042b\u0425\n <\/div>\n <h2 style=\"\n font-size: 3rem;\n color: #2c3e50;\n margin-bottom: 20px;\n background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n \">\n \u041e\u0442 \u043c\u0438\u043a\u0440\u043e\u043d\u0430 \u0434\u043e \u0441\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u0433\u043e\u0434\u0430\n <\/h2>\n <p style=\"\n font-size: 1.2rem;\n color: #5d6d7e;\n max-width: 800px;\n margin: 0 auto 30px;\n line-height: 1.6;\n \">\n \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432 \u0412\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0437\u043c\u0443 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\n <\/p>\n \n \n <div class=\"theme-toggle\" style=\"\n display: inline-flex;\n background: white;\n padding: 8px;\n border-radius: 20px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n margin-bottom: 40px;\n \">\n <button onclick=\"switchTheme('scale')\" id=\"btnScale\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: #667eea;\n color: white;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-expand-alt\"><\/i> \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u044b\n <\/button>\n <button onclick=\"switchTheme('history')\" id=\"btnHistory\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: transparent;\n color: #5d6d7e;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u044f\n <\/button>\n <button onclick=\"switchTheme('science')\" id=\"btnScience\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: transparent;\n color: #5d6d7e;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-flask\"><\/i> \u041d\u0430\u0443\u043a\u0430\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"scale-explorer\" id=\"scaleSection\" style=\"\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n margin-bottom: 50px;\n display: block;\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-expand-arrows-alt\"><\/i> \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\n <\/h3>\n \n <div class=\"scale-controls\" style=\"\n display: grid;\n grid-template-columns: 2fr 1fr;\n gap: 40px;\n margin-bottom: 40px;\n \">\n <div>\n <div style=\"margin-bottom: 20px;\">\n <label style=\"\n display: block;\n color: #5d6d7e;\n margin-bottom: 10px;\n font-weight: 600;\n \">\n <i class=\"fas fa-sliders-h\"><\/i> \u0420\u0435\u0433\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n <\/label>\n <input type=\"range\" \n min=\"0\" \n max=\"8\" \n value=\"4\" \n id=\"scaleSlider\" \n style=\"\n width: 100%;\n height: 10px;\n -webkit-appearance: none;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 5px;\n outline: none;\n \"\n oninput=\"updateScale()\">\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n color: #5d6d7e;\n font-size: 0.9rem;\n \">\n <span>10\u207b\u00b9\u00b2 \u043c<\/span>\n <span>10\u207b\u2076 \u043c<\/span>\n <span>1 \u043c<\/span>\n <span>10\u2076 \u043c<\/span>\n <span>10\u00b9\u00b2 \u043c<\/span>\n <\/div>\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n color: #888;\n font-size: 0.8rem;\n \">\n <span>\u043f\u0438\u043a\u043e\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0435\u0433\u0430\u043c\u0435\u0442\u0440<\/span>\n <span>\u0442\u0435\u0440\u0430\u043c\u0435\u0442\u0440<\/span>\n <\/div>\n <\/div>\n \n <div id=\"scaleInfo\" style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n margin-top: 20px;\n \">\n <h4 id=\"scaleTitle\" style=\"color: #2c3e50; margin-bottom: 10px;\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431: 1 \u043c\u0435\u0442\u0440<\/h4>\n <p id=\"scaleDescription\" style=\"color: #5d6d7e; margin-bottom: 15px;\">\n \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u0434\u043b\u0438\u043d\u044b \u0432 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435\n <\/p>\n <div class=\"scale-comparison\" style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n \">\n <div style=\"width: 50px; height: 50px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;\">\n <i class=\"fas fa-ruler-combined\"><\/i>\n <\/div>\n <div>\n <div style=\"font-weight: 600; color: #2c3e50;\">\u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f:<\/div>\n <div id=\"scaleComparison\" style=\"color: #5d6d7e; font-size: 0.9rem;\">\n \u2248 39.37 \u0434\u044e\u0439\u043c\u043e\u0432 \u0438\u043b\u0438 3.28 \u0444\u0443\u0442\u0430\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div style=\"\n margin-top: 20px;\n padding: 15px;\n background: #f0f7ff;\n border-radius: 10px;\n border-left: 4px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.5;\">\n <i class=\"fas fa-book\"><\/i> <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/strong> \n <a href=\"https:\/\/www.nist.gov\/si-redefinition\/meet-constants\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NIST — Fundamental Constants<\/a>, \n <a href=\"https:\/\/physics.nist.gov\/cuu\/Units\/current.html\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NIST — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0435\u0434\u0438\u043d\u0438\u0446<\/a>\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"scale-visual\" style=\"\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \">\n <div id=\"scaleCircle\" style=\"\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 800;\n font-size: 1.5rem;\n margin-bottom: 20px;\n transition: all 0.5s ease;\n text-align: center;\n padding: 10px;\n \">\n 1 \u043c\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431<\/div>\n <div id=\"scaleValue\" style=\"color: #667eea; font-size: 1.2rem; font-weight: 700;\">1 \u043c\u0435\u0442\u0440<\/div>\n <div id=\"scaleScientific\" style=\"color: #888; font-size: 0.9rem; margin-top: 5px;\">10\u2070 \u043c\u0435\u0442\u0440\u043e\u0432<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"comparison-scale\" style=\"\n background: linear-gradient(90deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n overflow: hidden;\n \">\n <h4 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-chart-bar\"><\/i> \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438\n <\/h4>\n <div class=\"comparison-items\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n height: auto;\n position: relative;\n flex-wrap: wrap;\n gap: 15px;\n \">\n \n <div style=\"\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 3px;\n background: #667eea;\n display: none;\n \"><\/div>\n \n \n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 1 1 80px;\n min-width: 60px;\n max-width: 120px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 20px;\n background: #4facfe;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 30px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0410\u0442\u043e\u043c<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 1 1 80px;\n min-width: 60px;\n max-width: 120px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 40px;\n background: #00f2fe;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 60px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0411\u0430\u043a\u0442\u0435\u0440\u0438\u044f<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 2 1 120px;\n min-width: 80px;\n max-width: 160px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 80px;\n background: #667eea;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 120px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0427\u0435\u043b\u043e\u0432\u0435\u043a<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 3 1 140px;\n min-width: 100px;\n max-width: 180px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 120px;\n background: #764ba2;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 180px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u041d\u0435\u0431\u043e\u0441\u043a\u0440\u0435\u0431<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 4 1 160px;\n min-width: 120px;\n max-width: 240px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 150px;\n background: #ff6b6b;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 240px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0413\u043e\u0440\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"science-cards\" id=\"scienceSection\" style=\"\n display: none;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n margin-bottom: 50px;\n \">\n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #667eea11 0%, #764ba211 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-atom\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u041a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (1.6\u00d710\u207b\u00b3\u2075 \u043c) \u2014 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u043c\u0430\u044f \u0434\u043b\u0438\u043d\u0430. \n \u041d\u0430 \u0442\u0430\u043a\u0438\u0445 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u0445 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0442\u0435\u0440\u044f\u044e\u0442 \u0441\u043c\u044b\u0441\u043b.\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/journals.aps.org\/prl\/abstract\/10.1103\/PhysRevLett.106.101101\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">\n Physical Review Letters — \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430\n <\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #27ae60;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041d\u0430\u0443\u0447\u043d\u043e \u0434\u043e\u043a\u0430\u0437\u0430\u043d\u043e<\/span>\n <\/div>\n <button onclick=\"showDetail('quantum')\" style=\"\n background: transparent;\n border: 2px solid #667eea;\n color: #667eea;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#667eea'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4facfe11 0%, #00f2fe11 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-satellite\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u041a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n 1 \u043f\u0430\u0440\u0441\u0435\u043a = 3.26 \u0441\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0433\u043e\u0434\u0430 \u2248 30.9 \u0442\u0440\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u043a\u043c. \n \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0437\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0438.\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/strong> \n <a href=\"https:\/\/www.iau.org\/public\/themes\/measuring\/\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">IAU — \u0410\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b<\/a>, \n <a href=\"https:\/\/science.nasa.gov\/astrophysics\/focus-areas\/how-do-stars-form-and-evolve\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NASA Astrophysics<\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #e74c3c;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442<\/span>\n <\/div>\n <button onclick=\"showDetail('space')\" style=\"\n background: transparent;\n border: 2px solid #4facfe;\n color: #4facfe;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#4facfe'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#4facfe'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #ff6b6b11 0%, #ff9f4311 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #ff6b6b 0%, #ff9f43 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-dna\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u044b<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 2 \u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u043e\u043b\u043e\u0441 \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 100 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432 (0.1 \u043c\u043c).\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #ff6b6b;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.nature.com\/articles\/171737a0\" target=\"_blank\" style=\"color: #ff6b6b; text-decoration: none;\">\n Nature — \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0414\u041d\u041a (\u0423\u043e\u0442\u0441\u043e\u043d \u0438 \u041a\u0440\u0438\u043a)\n <\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #9b59b6;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/span>\n <\/div>\n <button onclick=\"showDetail('biology')\" style=\"\n background: transparent;\n border: 2px solid #ff6b6b;\n color: #ff6b6b;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#ff6b6b'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#ff6b6b'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"history-timeline\" id=\"historySection\" style=\"\n display: none;\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-hourglass-half\"><\/i> \u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439\n <\/h3>\n \n <div class=\"timeline-container\" style=\"position: relative;\">\n \n <div style=\"\n position: absolute;\n left: 50px;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to bottom, #667eea, #764ba2);\n border-radius: 2px;\n \"><\/div>\n \n <div class=\"timeline-items\">\n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #667eea;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #667eea;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #667eea;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-monument\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #667eea;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1799 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u041f\u043b\u0430\u0442\u0438\u043d\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u043c\u0435\u0442\u0440\u0430<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u0442\u0430\u043b\u043e\u043d\u0430 \u043c\u0435\u0442\u0440\u0430 \u0438\u0437 \u043f\u043b\u0430\u0442\u0438\u043d\u044b. \u0425\u0440\u0430\u043d\u0438\u043b\u0441\u044f \u0432 \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0430\u0440\u0445\u0438\u0432\u0435 \u0424\u0440\u0430\u043d\u0446\u0438\u0438 \u043a\u0430\u043a «\u043c\u0435\u0442\u0440 \u0430\u0440\u0445\u0438\u0432\u043e\u0432».\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(102, 126, 234, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.bipm.org\/en\/history-si\/\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">\n BIPM — \u0418\u0441\u0442\u043e\u0440\u0438\u044f \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0435\u0434\u0438\u043d\u0438\u0446\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-balance-scale\"><\/i> \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c\n <\/span>\n <span style=\"\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #4facfe;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #4facfe;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #4facfe;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-lightbulb\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #4facfe;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1960 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u041a\u0440\u0438\u043f\u0442\u043e\u043d\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u041c\u0435\u0442\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043b\u0438\u043d\u0443 \u0432\u043e\u043b\u043d\u044b \u0438\u0437\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u043f\u0442\u043e\u043d\u0430-86. \u0412 10 \u0440\u0430\u0437 \u0442\u043e\u0447\u043d\u0435\u0435 \u043f\u043b\u0430\u0442\u0438\u043d\u043e\u0432\u043e\u0433\u043e \u044d\u0442\u0430\u043b\u043e\u043d\u0430.\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(79, 172, 254, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.nist.gov\/si-redefinition\/meter\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">\n NIST — \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0430\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(79, 172, 254, 0.1);\n color: #4facfe;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-atom\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0440\u044b\u0432\n <\/span>\n <span style=\"\n background: rgba(79, 172, 254, 0.1);\n color: #4facfe;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-tachometer-alt\"><\/i> \u0412\u044b\u0441\u043e\u043a\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #27ae60;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #27ae60;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #27ae60;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-bolt\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #27ae60;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1983 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0442\u0430 \u043a\u0430\u043a \u044d\u0442\u0430\u043b\u043e\u043d<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u041c\u0435\u0442\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0432\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435 \u0437\u0430 1\/299 792 458 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(39, 174, 96, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #27ae60;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/physics.nist.gov\/cuu\/Units\/meter.html\" target=\"_blank\" style=\"color: #27ae60; text-decoration: none;\">\n NIST — \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0442\u0430\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(39, 174, 96, 0.1);\n color: #27ae60;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-rocket\"><\/i> \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"data-interactive\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 40px;\n border-radius: 25px;\n color: white;\n margin-bottom: 50px;\n \">\n <h3 style=\"margin-bottom: 30px; display: flex; align-items: center; gap: 15px;\">\n <i class=\"fas fa-chart-line\"><\/i> \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435\n <\/h3>\n \n <div style=\"\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n \">\n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">195<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0421\u0442\u0440\u0430\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443\n <\/div>\n <\/div>\n \n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">3<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0421\u0442\u0440\u0430\u043d\u044b \u0441 \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439\n <\/div>\n <\/div>\n \n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">99.9%<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439\n <\/div>\n <\/div>\n <\/div>\n \n \n <div style=\"margin-top: 30px;\">\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-weight: 600;\n \">\n <span>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432 \u043c\u0438\u0440\u0435<\/span>\n <span>95%<\/span>\n <\/div>\n <div style=\"\n width: 100%;\n height: 10px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 5px;\n overflow: hidden;\n \">\n <div id=\"metricProgress\" style=\"\n width: 0%;\n height: 100%;\n background: white;\n border-radius: 5px;\n transition: width 2s ease;\n \"><\/div>\n <\/div>\n <div style=\"\n margin-top: 10px;\n font-size: 0.85rem;\n opacity: 0.8;\n \">\n <i class=\"fas fa-info-circle\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445:<\/strong> \n <a href=\"https:\/\/www.bipm.org\/en\/measurement-units\/\" target=\"_blank\" style=\"color: white; text-decoration: underline;\">\n BIPM — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0435 \u0431\u044e\u0440\u043e \u043c\u0435\u0440 \u0438 \u0432\u0435\u0441\u043e\u0432\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"interactive-quiz\" style=\"\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n \">\n <i class=\"fas fa-gamepad\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u0441\u0442\n <\/h3>\n \n <div id=\"quizContainer\">\n <div class=\"quiz-question active\" id=\"question1\">\n <h4 style=\"color: #2c3e50; margin-bottom: 20px; line-height: 1.4;\">\u0412\u043e\u043f\u0440\u043e\u0441 1: \u041a\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0434\u043b\u0438\u043d\u044b \u0432 \u0444\u0438\u0437\u0438\u043a\u0435?<\/h4>\n <div style=\"\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n margin-bottom: 30px;\n \">\n \n <button onclick=\"checkQuizAnswer(1, 'a')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">A.<\/strong> \u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440 (10\u207b\u2079 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'b')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">B.<\/strong> \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (1.6\u00d710\u207b\u00b3\u2075 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'c')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">C.<\/strong> \u0410\u043d\u0433\u0441\u0442\u0440\u0435\u043c (10\u207b\u00b9\u2070 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'd')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">D.<\/strong> \u0424\u0435\u043c\u0442\u043e\u043c\u0435\u0442\u0440 (10\u207b\u00b9\u2075 \u043c)\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"quizResult\" style=\"\n display: none;\n text-align: center;\n padding: 40px;\n \">\n <div style=\"\n width: 100px;\n height: 100px;\n background: #27ae60;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 2.5rem;\n margin: 0 auto 20px;\n \">\n <i class=\"fas fa-trophy\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin-bottom: 15px; font-size: 1.5rem;\">\u0422\u0435\u0441\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d!<\/h4>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u0412\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430 <span id=\"score\" style=\"font-weight: 800; color: #27ae60; font-size: 1.2rem;\">1<\/span> \u0438\u0437 1 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<br>\n <span id=\"quizMessage\" style=\"font-style: italic; margin-top: 10px; display: block;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0435\u0434\u0435\u043b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u0444\u0438\u0437\u0438\u043a\u0435.\n <\/span>\n <\/p>\n <div style=\"\n background: #f8f9ff;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 25px;\n text-align: left;\n \">\n <h5 style=\"color: #2c3e50; margin-bottom: 10px;\">\n <i class=\"fas fa-lightbulb\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442:\n <\/h5>\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.95rem; line-height: 1.6;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0430 \u0432 \u0447\u0435\u0441\u0442\u044c \u041c\u0430\u043a\u0441\u0430 \u041f\u043b\u0430\u043d\u043a\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438. \n \u042d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0449\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0437\u0430\u043a\u043e\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438.\n <\/p>\n <\/div>\n <button onclick=\"resetQuiz()\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 15px;\n cursor: pointer;\n font-weight: 600;\n font-size: 1rem;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <i class=\"fas fa-redo\"><\/i> \u041f\u0440\u043e\u0439\u0442\u0438 \u0435\u0449\u0435 \u0440\u0430\u0437\n <\/button>\n <\/div>\n <\/div>\n \n \n <div style=\"\n margin-top: 30px;\n padding: 15px;\n background: #f0f7ff;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.5;\">\n <i class=\"fas fa-book\"><\/i> <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430:<\/strong> \n <a href=\"https:\/\/physicsworld.com\/a\/the-planck-length\/\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">Physics World — \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430<\/a>, \n <a href=\"https:\/\/www.sciencedaily.com\/releases\/2019\/11\/191127142606.htm\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">Science Daily — \u0424\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u044b<\/a>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"hub-footer\" style=\"\n text-align: center;\n margin-top: 50px;\n padding-top: 30px;\n border-top: 2px solid #eef2ff;\n \">\n <p style=\"color: #5d6d7e; margin-bottom: 20px; font-size: 1.1rem;\">\n \u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b: <span id=\"currentDate\" style=\"font-weight: 600; color: #667eea;\"><\/span>\n <\/p>\n <div style=\"\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n margin-bottom: 30px;\n \">\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #667eea;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-book\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">12+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041d\u0430\u0443\u0447\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432<\/div>\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #764ba2;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-chart-bar\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">25+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/div>\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #4facfe;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">10 000+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/div>\n <\/div>\n <\/div>\n <div style=\"\n background: rgba(102, 126, 234, 0.1);\n padding: 25px;\n border-radius: 15px;\n display: inline-block;\n margin: 0 auto;\n max-width: 800px;\n text-align: left;\n \">\n <h5 style=\"color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0410\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h5>\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;\">\n <div>\n <a href=\"https:\/\/www.bipm.org\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> BIPM — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0435 \u0431\u044e\u0440\u043e \u043c\u0435\u0440 \u0438 \u0432\u0435\u0441\u043e\u0432\n <\/a>\n <a href=\"https:\/\/www.nist.gov\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> NIST — \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0438\u0442\u0443\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432\n <\/a>\n <\/div>\n <div>\n <a href=\"https:\/\/www.nasa.gov\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> NASA — \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u0430\u044d\u0440\u043e\u043d\u0430\u0432\u0442\u0438\u043a\u0435\n <\/a>\n <a href=\"https:\/\/www.nature.com\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> Nature — \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u0436\u0443\u0440\u043d\u0430\u043b\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0434\u0430\u0442\u0443\n const currentDate = new Date();\n document.getElementById('currentDate').textContent = \n currentDate.toLocaleDateString('ru-RU', { \n year: 'numeric', \n month: 'long', \n day: 'numeric' \n });\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\n updateScale();\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440\u0430\n setTimeout(() => {\n document.getElementById('metricProgress').style.width = '95%';\n }, 500);\n});\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\nfunction switchTheme(theme) {\n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n document.getElementById('btnScale').style.background = 'transparent';\n document.getElementById('btnScale').style.color = '#5d6d7e';\n document.getElementById('btnHistory').style.background = 'transparent';\n document.getElementById('btnHistory').style.color = '#5d6d7e';\n document.getElementById('btnScience').style.background = 'transparent';\n document.getElementById('btnScience').style.color = '#5d6d7e';\n \n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0441\u0435\u043a\u0446\u0438\u0438\n document.getElementById('scaleSection').style.display = 'none';\n document.getElementById('historySection').style.display = 'none';\n document.getElementById('scienceSection').style.display = 'none';\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443\n switch(theme) {\n case 'scale':\n document.getElementById('scaleSection').style.display = 'block';\n document.getElementById('btnScale').style.background = '#667eea';\n document.getElementById('btnScale').style.color = 'white';\n break;\n case 'history':\n document.getElementById('historySection').style.display = 'block';\n document.getElementById('btnHistory').style.background = '#667eea';\n document.getElementById('btnHistory').style.color = 'white';\n break;\n case 'science':\n document.getElementById('scienceSection').style.display = 'block';\n document.getElementById('btnScience').style.background = '#667eea';\n document.getElementById('btnScience').style.color = 'white';\n break;\n }\n}\n\n\/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432 (\u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435)\nconst scaleData = [\n { power: -12, name: \"\u041f\u0438\u043a\u043e\u043c\u0435\u0442\u0440\", value: \"10\u207b\u00b9\u00b2 \u043c\", sciValue: \"10\u207b\u00b9\u00b2 \u043c\", desc: \"\u0420\u0430\u0437\u043c\u0435\u0440 \u0430\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044f\u0434\u0440\u0430\", comp: \"\u2248 0.01 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0430\u0442\u043e\u043c\u0430\" },\n { power: -9, name: \"\u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\", value: \"10\u207b\u2079 \u043c\", sciValue: \"10\u207b\u2079 \u043c\", desc: \"\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0414\u041d\u041a\", comp: \"\u2248 2.5 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a\" },\n { power: -6, name: \"\u041c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043a\u043c\", sciValue: \"10\u207b\u2076 \u043c\", desc: \"\u0420\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043a\u0442\u0435\u0440\u0438\u0438\", comp: \"\u2248 5-10 \u0431\u0430\u043a\u0442\u0435\u0440\u0438\u0439\" },\n { power: -3, name: \"\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043c\", sciValue: \"10\u207b\u00b3 \u043c\", desc: \"\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u043a\u0440\u0435\u0434\u0438\u0442\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b\", comp: \"\u2248 0.04 \u0434\u044e\u0439\u043c\u0430\" },\n { power: 0, name: \"\u041c\u0435\u0442\u0440\", value: \"1 \u043c\", sciValue: \"10\u2070 \u043c\", desc: \"\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u0434\u043b\u0438\u043d\u044b\", comp: \"\u2248 39.37 \u0434\u044e\u0439\u043c\u043e\u0432\" },\n { power: 3, name: \"\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\", value: \"1 \u043a\u043c\", sciValue: \"10\u00b3 \u043c\", desc: \"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430 12 \u043c\u0438\u043d\u0443\u0442 \u0445\u043e\u0434\u044c\u0431\u044b\", comp: \"\u2248 0.62 \u043c\u0438\u043b\u0438\" },\n { power: 6, name: \"\u041c\u0435\u0433\u0430\u043c\u0435\u0442\u0440\", value: \"1000 \u043a\u043c\", sciValue: \"10\u2076 \u043c\", desc: \"\u0414\u043b\u0438\u043d\u0430 \u0418\u0442\u0430\u043b\u0438\u0438 \u0441 \u0441\u0435\u0432\u0435\u0440\u0430 \u043d\u0430 \u044e\u0433\", comp: \"\u2248 621 \u043c\u0438\u043b\u0438\" },\n { power: 9, name: \"\u0413\u0438\u0433\u0430\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043b\u043d \u043a\u043c\", sciValue: \"10\u2079 \u043c\", desc: \"3\u00d7 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u041b\u0443\u043d\u044b\", comp: \"\u2248 621,371 \u043c\u0438\u043b\u0438\" },\n { power: 12, name: \"\u0422\u0435\u0440\u0430\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043b\u0440\u0434 \u043a\u043c\", sciValue: \"10\u00b9\u00b2 \u043c\", desc: \"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0421\u0430\u0442\u0443\u0440\u043d\u0430\", comp: \"\u2248 1\/10 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e \u0421\u0430\u0442\u0443\u0440\u043d\u0430\" }\n];\n\nfunction updateScale() {\n const slider = document.getElementById('scaleSlider');\n const value = parseInt(slider.value);\n const scale = scaleData[value] || scaleData[4];\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\n document.getElementById('scaleTitle').textContent = `\u041c\u0430\u0441\u0448\u0442\u0430\u0431: ${scale.name}`;\n document.getElementById('scaleDescription').textContent = scale.desc;\n document.getElementById('scaleComparison').textContent = scale.comp;\n document.getElementById('scaleValue').textContent = scale.value;\n document.getElementById('scaleScientific').textContent = scale.sciValue;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0440\u0443\u0433\n const circle = document.getElementById('scaleCircle');\n const power = scale.power;\n const size = 200 + (power * 8); \/\/ \u0411\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\n const fontSize = 1.5 + (Math.abs(power) * 0.08); \/\/ \u0411\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430\n \n circle.style.width = `${Math.max(100, Math.min(300, size))}px`;\n circle.style.height = `${Math.max(100, Math.min(300, size))}px`;\n circle.style.fontSize = `${Math.max(1, Math.min(2.2, fontSize))}rem`;\n circle.textContent = scale.value;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n if (power < -6) {\n circle.style.background = 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)';\n } else if (power < 0) {\n circle.style.background = 'linear-gradient(135deg, #1abc9c 0%, #2ecc71 100%)';\n } else if (power === 0) {\n circle.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';\n } else if (power <= 6) {\n circle.style.background = 'linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%)';\n } else {\n circle.style.background = 'linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%)';\n }\n}\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a\nfunction showDetail(type) {\n const details = {\n 'quantum': {\n title: \"\u041a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\",\n content: \"\u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (~1.616\u00d710\u207b\u00b3\u2075 \u043c) \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u043c\u0438. \u042d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432 \u0444\u0438\u0437\u0438\u043a\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0413\u0435\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433\u0430. \u041d\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u0445 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u043e\u0439 \u0434\u043b\u0438\u043d\u044b \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e-\u0432\u0440\u0435\u043c\u044f \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0433\u043b\u0430\u0434\u043a\u043e\u0441\u0442\u044c \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u043e\u0439 \u043f\u0435\u043d\u043e\u0439.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: Physical Review Letters, Vol. 106, 101101 (2018)\"\n },\n 'space': {\n title: \"\u041a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f\",\n content: \"1 \u043f\u0430\u0440\u0441\u0435\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441 \u0437\u0435\u043c\u043d\u043e\u0439 \u043e\u0440\u0431\u0438\u0442\u044b \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0434 \u0443\u0433\u043b\u043e\u043c \u0432 1 \u0443\u0433\u043b\u043e\u0432\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0437\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0411\u043b\u0438\u0436\u0430\u0439\u0448\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 \u043a \u0421\u043e\u043b\u043d\u0446\u0443, \u041f\u0440\u043e\u043a\u0441\u0438\u043c\u0430 \u0426\u0435\u043d\u0442\u0430\u0432\u0440\u0430, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 1.3 \u043f\u0430\u0440\u0441\u0435\u043a\u0430. \u0421\u0430\u043c\u044b\u0435 \u0434\u0430\u043b\u0435\u043a\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u0432 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u044b \u043f\u0430\u0440\u0441\u0435\u043a\u043e\u0432.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043e\u044e\u0437 (IAU), NASA Astrophysics\"\n },\n 'biology': {\n title: \"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u044b\",\n content: \"\u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 2 \u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430, \u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u0440\u0430\u043c\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u2014 0.34 \u043d\u043c. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u043e\u043b\u043e\u0441 \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 100 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432 (0.1 \u043c\u043c). \u041a\u0440\u0430\u0441\u043d\u044b\u0435 \u043a\u0440\u043e\u0432\u044f\u043d\u044b\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u043e\u043a\u043e\u043b\u043e 7-8 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432. \u042d\u0442\u0438 \u0442\u043e\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u0447\u0435\u043d\u044b\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0436\u0438\u0432\u044b\u0445 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u043d\u0430 \u043c\u043e\u043b\u0435\u043a\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: Nature, Vol. 171, 737-738 (1953) - \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0414\u041d\u041a\"\n }\n };\n \n const detail = details[type];\n if (detail) {\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n `;\n \n modal.innerHTML = `\n <div style=\"\n background: white;\n padding: 40px;\n border-radius: 20px;\n max-width: 600px;\n width: 100%;\n position: relative;\n animation: fadeIn 0.3s ease;\n max-height: 80vh;\n overflow-y: auto;\n \">\n <button onclick=\"this.parentElement.parentElement.remove()\" style=\"\n position: absolute;\n top: 20px;\n right: 20px;\n background: transparent;\n border: none;\n font-size: 1.5rem;\n color: #5d6d7e;\n cursor: pointer;\n z-index: 10001;\n \">×<\/button>\n \n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-info-circle\"><\/i>\n <\/div>\n <h3 style=\"color: #2c3e50; margin: 0; font-size: 1.5rem;\">${detail.title}<\/h3>\n <\/div>\n \n <p style=\"color: #5d6d7e; line-height: 1.7; margin-bottom: 25px;\">\n ${detail.content}\n <\/p>\n \n <div style=\"\n background: #f8f9ff;\n padding: 15px;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n margin-bottom: 25px;\n \">\n <p style=\"color: #667eea; margin: 0; font-size: 0.9rem; line-height: 1.5;\">\n <i class=\"fas fa-graduation-cap\"><\/i> ${detail.source}\n <\/p>\n <\/div>\n \n <div style=\"text-align: right;\">\n <button onclick=\"this.parentElement.parentElement.remove()\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 12px 30px;\n border-radius: 15px;\n cursor: pointer;\n font-weight: 600;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n \u041f\u043e\u043d\u044f\u0442\u043d\u043e\n <\/button>\n <\/div>\n <\/div>\n `;\n \n document.body.appendChild(modal);\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\n const modalContent = modal.querySelector('div');\n modalContent.style.opacity = '0';\n modalContent.style.transform = 'translateY(-20px)';\n \n setTimeout(() => {\n modalContent.style.opacity = '1';\n modalContent.style.transform = 'translateY(0)';\n modalContent.style.transition = 'all 0.3s ease';\n }, 10);\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0444\u043e\u043d\n modal.addEventListener('click', function(e) {\n if (e.target === modal) {\n modal.remove();\n }\n });\n }\n}\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0432\u0438\u0437\u0430\nlet quizScore = 0;\n\nfunction checkQuizAnswer(question, answer) {\n const correctAnswer = 'b'; \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0434\u043b\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u0430 1\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430\n const buttons = document.querySelectorAll(`#question${question} button`);\n \n if (answer === correctAnswer) {\n \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442\n quizScore = 1;\n buttons.forEach(btn => {\n if (btn.textContent.includes(answer.toUpperCase())) {\n btn.style.background = '#27ae60';\n btn.style.color = 'white';\n btn.style.borderColor = '#27ae60';\n }\n });\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0447\u0435\u0440\u0435\u0437 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443\n setTimeout(() => {\n document.getElementById('question1').style.display = 'none';\n document.getElementById('quizResult').style.display = 'block';\n document.getElementById('score').textContent = quizScore;\n }, 1000);\n } else {\n \/\/ \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442\n buttons.forEach(btn => {\n if (btn.textContent.includes(answer.toUpperCase())) {\n btn.style.background = '#e74c3c';\n btn.style.color = 'white';\n btn.style.borderColor = '#e74c3c';\n }\n if (btn.textContent.includes(correctAnswer.toUpperCase())) {\n btn.style.background = '#27ae60';\n btn.style.color = 'white';\n btn.style.borderColor = '#27ae60';\n }\n });\n }\n}\n\nfunction resetQuiz() {\n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u0432\u0438\u0437\n quizScore = 0;\n document.getElementById('question1').style.display = 'block';\n document.getElementById('quizResult').style.display = 'none';\n \n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043e\u043a\n const buttons = document.querySelectorAll('#question1 button');\n buttons.forEach(btn => {\n btn.style.background = 'white';\n btn.style.color = '#2c3e50';\n btn.style.borderColor = '#e0e0e0';\n });\n}\n\n\/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n \n @keyframes slideIn {\n from { transform: translateX(-20px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n \n .science-card:hover {\n animation: pulse 0.5s ease;\n }\n \n .timeline-dot {\n animation: float 3s ease-in-out infinite;\n }\n \n .stat-card {\n animation: slideIn 0.5s ease-out;\n }\n \n .stat-card:nth-child(1) { animation-delay: 0.1s; }\n .stat-card:nth-child(2) { animation-delay: 0.2s; }\n .stat-card:nth-child(3) { animation-delay: 0.3s; }\n \n \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 *\/\n input[type=\"range\"] {\n -webkit-appearance: none;\n height: 10px;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 25px;\n height: 25px;\n background: #667eea;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);\n transition: all 0.2s;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n background: #764ba2;\n }\n \n input[type=\"range\"]::-moz-range-thumb {\n width: 25px;\n height: 25px;\n background: #667eea;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a *\/\n a {\n transition: all 0.3s;\n }\n \n a:hover {\n text-decoration: underline !important;\n }\n \n \/* \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c - \u041a\u0420\u0418\u0422\u0418\u0427\u0415\u0421\u041a\u0418 \u0412\u0410\u0416\u041d\u042b\u0415 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u042f *\/\n @media (max-width: 1024px) {\n .scale-controls {\n grid-template-columns: 1fr !important;\n gap: 30px !important;\n }\n \n .scale-visual {\n order: -1;\n margin-bottom: 20px;\n }\n \n #scaleCircle {\n width: 150px !important;\n height: 150px !important;\n font-size: 1.2rem !important;\n }\n }\n \n @media (max-width: 768px) {\n .science-hub {\n margin: 40px auto !important;\n padding: 40px 0 !important;\n border-radius: 20px !important;\n }\n \n .main-header h2 {\n font-size: 2rem !important;\n }\n \n .scale-explorer,\n .history-timeline,\n .interactive-quiz,\n .data-interactive {\n padding: 25px !important;\n }\n \n .comparison-items {\n flex-direction: column !important;\n align-items: center !important;\n gap: 30px !important;\n height: auto !important;\n }\n \n .comparison-item {\n width: 80% !important;\n max-width: 300px !important;\n min-width: 200px !important;\n flex: 1 1 auto !important;\n }\n \n .comparison-item div:first-child {\n max-width: 100% !important;\n }\n \n .theme-toggle {\n flex-direction: column !important;\n width: 100% !important;\n max-width: 300px !important;\n }\n \n .theme-toggle button {\n width: 100% !important;\n }\n \n .science-cards {\n grid-template-columns: 1fr !important;\n gap: 20px !important;\n }\n \n .quiz-question div {\n grid-template-columns: 1fr !important;\n }\n \n .timeline-container {\n padding-left: 0 !important;\n }\n \n .timeline-item {\n padding-left: 0 !important;\n margin: 30px 0 !important;\n }\n \n .timeline-item > div:first-child {\n display: none !important;\n }\n \n .timeline-container > div:first-child {\n display: none !important;\n }\n }\n \n @media (max-width: 480px) {\n .main-header h2 {\n font-size: 1.8rem !important;\n }\n \n .scale-explorer h3,\n .history-timeline h3,\n .interactive-quiz h3 {\n font-size: 1.5rem !important;\n }\n \n .scale-info {\n padding: 20px !important;\n }\n \n .data-interactive {\n padding: 20px !important;\n }\n \n .stat-card {\n padding: 15px !important;\n }\n \n .hub-footer > div {\n gap: 15px !important;\n }\n \n .scale-slider-labels span {\n font-size: 0.7rem !important;\n }\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0442\u0435\u0441\u0442\u0435 *\/\n .quiz-question button {\n color: #2c3e50 !important;\n font-weight: 500 !important;\n }\n \n .quiz-question button:hover {\n background: #f8f9ff !important;\n border-color: #667eea !important;\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0448\u043a\u0430\u043b\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .comparison-scale {\n overflow-x: auto !important;\n -webkit-overflow-scrolling: touch !important;\n }\n \n .comparison-items {\n min-width: 500px !important;\n }\n \n @media (max-width: 768px) {\n .comparison-items {\n min-width: 100% !important;\n flex-wrap: nowrap !important;\n overflow-x: auto !important;\n padding-bottom: 10px !important;\n justify-content: flex-start !important;\n }\n \n .comparison-item {\n flex: 0 0 auto !important;\n width: 120px !important;\n margin-bottom: 0 !important;\n margin-right: 15px !important;\n }\n }\n`;\ndocument.head.appendChild(style);\n\n\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0442\u0435\u043c\u0443\nswitchTheme('scale');\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0434\u043b\u0438\u043d\u044b \u0441 \u043d\u0430\u0443\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: # \u0418\u0417 \u041c\u0435\u0442\u0440\u044b (m)\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)\u0414\u044e\u0439\u043c\u044b (in)\u0424\u0443\u0442\u044b (ft)\u042f\u0440\u0434\u044b (yd)\u041c\u0438\u043b\u0438 (mi) \u0412 \u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)\u041c\u0435\u0442\u0440\u044b (m)\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)\u0414\u044e\u0439\u043c\u044b (in)\u0424\u0443\u0442\u044b (ft)\u042f\u0440\u0434\u044b (yd)\u041c\u0438\u043b\u0438 (mi) 100 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432 100 \u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b 39.37 \u0414\u044e\u0439\u043c\u044b 3.28 \u0424\u0443\u0442\u044b 1.09 \u042f\u0440\u0434\u044b \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=71"}],"version-history":[{"count":56,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71\/revisions"}],"predecessor-version":[{"id":264,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71\/revisions\/264"}],"wp:attachment":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":71,"date":"2025-12-27T07:05:57","date_gmt":"2025-12-27T04:05:57","guid":{"rendered":"http:\/\/gestro.ru\/?page_id=71"},"modified":"2025-12-30T04:21:00","modified_gmt":"2025-12-30T01:21:00","slug":"71-2","status":"publish","type":"page","link":"http:\/\/gestro.ru\/?page_id=71","title":{"rendered":"\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b"},"content":{"rendered":"\n\n\n\n \n \n \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n overflow-x: hidden;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 15px;\n width: 100%;\n overflow-x: hidden;\n }\n \n .header {\n text-align: center;\n margin-bottom: 40px;\n color: white;\n text-shadow: 0 2px 10px rgba(0,0,0,0.2);\n padding: 0 10px;\n }\n \n .header h1 {\n font-size: 2.8rem;\n margin-bottom: 15px;\n }\n \n .header p {\n font-size: 1.2rem;\n opacity: 0.95;\n max-width: 800px;\n margin: 0 auto;\n color: #f0f0f0;\n text-shadow: 0 1px 3px rgba(0,0,0,0.3);\n }\n \n .main-grid {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 30px;\n margin-bottom: 40px;\n width: 100%;\n }\n \n @media (max-width: 1100px) {\n .main-grid {\n grid-template-columns: 1fr;\n }\n }\n \n .calculator-card {\n background: white;\n border-radius: 25px;\n padding: 35px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\n width: 100%;\n overflow: hidden;\n }\n \n .converter-section {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n }\n \n .history-card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 25px;\n padding: 35px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);\n width: 100%;\n overflow: hidden;\n }\n \n .section-title {\n color: #2c3e50;\n margin-bottom: 25px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n word-break: break-word;\n }\n \n .section-title i {\n color: #667eea;\n }\n \n \/* \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 *\/\n .converter-form {\n display: flex;\n flex-direction: column;\n gap: 25px;\n width: 100%;\n }\n \n .input-group {\n position: relative;\n width: 100%;\n }\n \n .input-group label {\n display: block;\n margin-bottom: 10px;\n font-weight: 600;\n color: #2c3e50;\n font-size: 1.1rem;\n }\n \n .input-with-icon {\n position: relative;\n width: 100%;\n }\n \n .input-with-icon input {\n width: 100%;\n padding: 18px 20px 18px 60px;\n border: 3px solid #e0e0e0;\n border-radius: 15px;\n font-size: 1.2rem;\n font-weight: 600;\n transition: all 0.3s;\n background: #f8f9fa;\n box-sizing: border-box;\n }\n \n .input-with-icon input:focus {\n border-color: #667eea;\n background: white;\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.1);\n outline: none;\n }\n \n .input-icon {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n color: #667eea;\n font-size: 1.3rem;\n font-weight: bold;\n }\n \n \/* \u041d\u041e\u0412\u042b\u0419 \u0421\u0422\u0418\u041b\u042c: \u0411\u043b\u043e\u043a \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 \"\u0418\u0417\" \u0438 \"\u0412\" *\/\n .unit-selector-with-hints {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-top: 15px;\n width: 100%;\n }\n \n .unit-select-container {\n flex: 1;\n position: relative;\n }\n \n .unit-hint {\n position: absolute;\n font-size: 0.7rem;\n font-weight: 600;\n color: #ffffff;\n padding: 3px 10px;\n border-radius: 12px;\n z-index: 3;\n display: flex;\n align-items: center;\n gap: 4px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n \n .unit-hint-from {\n top: -10px;\n left: 10px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n \n .unit-hint-to {\n bottom: -10px;\n right: 10px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n }\n \n .unit-hint i {\n font-size: 0.6rem;\n }\n \n .unit-selector-with-hints select {\n width: 100%;\n padding: 15px;\n border: 3px solid #e0e0e0;\n border-radius: 15px;\n font-size: 1rem;\n font-weight: 600;\n background: #f8f9fa;\n cursor: pointer;\n transition: all 0.3s;\n }\n \n .unit-selector-with-hints select:focus {\n border-color: #667eea;\n outline: none;\n background: white;\n }\n \n .swap-button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s;\n font-size: 1.2rem;\n flex-shrink: 0;\n }\n \n .swap-button:hover {\n transform: rotate(180deg) scale(1.1);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n \n .result-display {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n color: white;\n padding: 30px;\n border-radius: 20px;\n text-align: center;\n margin-top: 20px;\n box-shadow: 0 10px 30px rgba(79, 172, 254, 0.2);\n width: 100%;\n box-sizing: border-box;\n }\n \n .result-value {\n font-size: 3.5rem;\n font-weight: 800;\n margin: 15px 0;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n word-break: break-word;\n overflow-wrap: break-word;\n }\n \n .result-unit {\n font-size: 1.3rem;\n opacity: 0.9;\n font-weight: 600;\n word-break: break-word;\n }\n \n .quick-conversions {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n margin-top: 30px;\n width: 100%;\n }\n \n .quick-conversion-item {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n border: 2px solid #e0e0e0;\n transition: all 0.3s;\n cursor: pointer;\n min-width: 0;\n overflow: hidden;\n }\n \n .quick-conversion-item:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);\n }\n \n .quick-value {\n font-size: 1.5rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 10px 0 5px;\n word-break: break-word;\n }\n \n .quick-unit {\n font-size: 0.9rem;\n color: #666;\n }\n \n \/* \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f *\/\n .visualization {\n margin-top: 30px;\n padding: 25px;\n background: white;\n border-radius: 20px;\n border: 2px solid #e0e0e0;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n .scale-container {\n height: 120px;\n background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 100%);\n border-radius: 10px;\n position: relative;\n margin: 30px 0;\n overflow: hidden;\n width: 100%;\n }\n \n .scale-marker {\n position: absolute;\n height: 100%;\n width: 3px;\n background: #667eea;\n top: 0;\n transform: translateX(-50%);\n transition: left 1s ease;\n }\n \n .scale-marker::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 10px solid #667eea;\n }\n \n .scale-labels {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n font-size: 0.9rem;\n color: #666;\n font-weight: 600;\n width: 100%;\n flex-wrap: wrap;\n }\n \n .scale-labels span {\n flex: 1;\n min-width: 60px;\n text-align: center;\n }\n \n .comparison-items {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-top: 30px;\n width: 100%;\n }\n \n .comparison-item {\n text-align: center;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 15px;\n transition: all 0.3s;\n min-width: 0;\n overflow: hidden;\n }\n \n .comparison-item:hover {\n background: #e3f2fd;\n transform: scale(1.05);\n }\n \n .comparison-icon {\n font-size: 2rem;\n color: #667eea;\n margin-bottom: 10px;\n }\n \n .comparison-value {\n font-size: 1.2rem;\n font-weight: 700;\n color: #2c3e50;\n margin: 5px 0;\n word-break: break-word;\n }\n \n \/* \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0440\u044b *\/\n .history-timeline {\n position: relative;\n padding-left: 30px;\n margin: 30px 0;\n width: 100%;\n }\n \n .history-timeline::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: linear-gradient(to bottom, #667eea, #764ba2);\n }\n \n .history-item {\n position: relative;\n margin-bottom: 30px;\n padding: 25px;\n background: white;\n border-radius: 15px;\n border-left: 5px solid #667eea;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n width: 100%;\n box-sizing: border-box;\n }\n \n .history-item::before {\n content: '';\n position: absolute;\n left: -38px;\n top: 30px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #667eea;\n border: 3px solid white;\n box-shadow: 0 0 0 3px #667eea;\n }\n \n .history-period {\n font-weight: 700;\n color: #667eea;\n margin-bottom: 8px;\n font-size: 1.1rem;\n word-break: break-word;\n }\n \n .history-description {\n color: #666;\n line-height: 1.5;\n }\n \n \/* \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f *\/\n .units-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 15px;\n margin-top: 25px;\n width: 100%;\n }\n \n .unit-card {\n background: white;\n padding: 20px;\n border-radius: 15px;\n text-align: center;\n border: 2px solid #e0e0e0;\n transition: all 0.3s;\n cursor: pointer;\n min-width: 0;\n overflow: hidden;\n }\n \n .unit-card:hover {\n border-color: #667eea;\n transform: translateY(-5px);\n }\n \n .unit-card.active {\n border-color: #667eea;\n background: #e3f2fd;\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);\n }\n \n .unit-symbol {\n font-size: 2rem;\n font-weight: 700;\n color: #667eea;\n margin-bottom: 10px;\n word-break: break-all;\n }\n \n .unit-name {\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 5px;\n word-break: break-word;\n }\n \n .unit-value {\n font-size: 0.9rem;\n color: #666;\n word-break: break-word;\n }\n \n \/* \u041a\u043d\u043e\u043f\u043a\u0438 *\/\n .action-buttons {\n display: flex;\n gap: 15px;\n margin-top: 30px;\n flex-wrap: wrap;\n width: 100%;\n }\n \n .action-btn {\n flex: 1;\n min-width: 150px;\n padding: 18px 25px;\n border: none;\n border-radius: 15px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n box-sizing: border-box;\n }\n \n .btn-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n \n .btn-secondary {\n background: #f8f9fa;\n color: #2c3e50;\n border: 2px solid #e0e0e0;\n }\n \n .action-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n }\n \n .btn-primary:hover {\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);\n }\n \n \/* \u0424\u0443\u0442\u0435\u0440 *\/\n .footer {\n text-align: center;\n margin-top: 50px;\n color: white;\n opacity: 0.8;\n font-size: 0.9rem;\n padding: 0 10px;\n width: 100%;\n }\n \n \/* \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c \u0414\u041b\u042f \u041d\u041e\u0412\u041e\u0413\u041e \u0418\u041d\u0422\u0415\u0420\u0424\u0415\u0419\u0421\u0410 *\/\n @media (max-width: 768px) {\n body {\n padding: 10px;\n }\n \n .container {\n padding: 0 10px;\n max-width: 100%;\n }\n \n .header h1 {\n font-size: 2rem;\n line-height: 1.3;\n padding: 0 5px;\n }\n \n .header p {\n font-size: 1rem;\n padding: 0 5px;\n }\n \n .calculator-card,\n .history-card {\n padding: 20px;\n border-radius: 20px;\n margin: 0 -5px;\n width: calc(100% + 10px);\n }\n \n .section-title {\n font-size: 1.5rem;\n flex-wrap: wrap;\n gap: 10px;\n }\n \n .result-value {\n font-size: 2.5rem;\n line-height: 1.2;\n }\n \n .input-with-icon input {\n padding: 15px 15px 15px 50px;\n font-size: 1.1rem;\n }\n \n \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u043c\u0438 *\/\n .unit-selector-with-hints {\n flex-direction: column;\n gap: 10px;\n }\n \n .unit-select-container {\n width: 100%;\n }\n \n .unit-hint-from {\n top: -10px;\n left: 10px;\n }\n \n .unit-hint-to {\n bottom: -10px;\n right: 10px;\n }\n \n .swap-button {\n align-self: center;\n margin: 5px 0;\n }\n \n .quick-conversions {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .quick-conversion-item {\n padding: 15px;\n }\n \n .quick-value {\n font-size: 1.3rem;\n }\n \n .comparison-items {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n \n .units-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .unit-card {\n padding: 15px;\n }\n \n .unit-symbol {\n font-size: 1.5rem;\n }\n \n .visualization {\n padding: 20px;\n }\n \n .history-timeline {\n padding-left: 20px;\n }\n \n .history-item {\n padding: 20px;\n margin-bottom: 20px;\n }\n \n .history-item::before {\n left: -30px;\n width: 16px;\n height: 16px;\n }\n \n .action-buttons {\n flex-direction: column;\n gap: 10px;\n }\n \n .action-btn {\n min-width: 100%;\n padding: 16px;\n }\n \n .formula-box {\n padding: 12px;\n font-size: 0.9rem;\n overflow-x: auto;\n }\n \n .info-box {\n padding: 15px;\n font-size: 0.9rem;\n }\n }\n \n @media (max-width: 480px) {\n .header h1 {\n font-size: 1.8rem;\n }\n \n .header p {\n font-size: 0.95rem;\n }\n \n .calculator-card,\n .history-card {\n padding: 15px;\n }\n \n .section-title {\n font-size: 1.3rem;\n }\n \n .result-value {\n font-size: 2rem;\n }\n \n .result-unit {\n font-size: 1.1rem;\n }\n \n .quick-conversions {\n grid-template-columns: 1fr;\n }\n \n .units-grid {\n grid-template-columns: 1fr;\n }\n \n .input-with-icon input {\n font-size: 1rem;\n padding: 12px 12px 12px 45px;\n }\n \n .input-icon {\n left: 15px;\n font-size: 1.1rem;\n }\n \n .unit-selector-with-hints select {\n font-size: 0.9rem;\n }\n \n .history-timeline {\n padding-left: 15px;\n }\n \n .history-item {\n padding: 15px;\n }\n \n .history-period {\n font-size: 1rem;\n }\n \n .history-description {\n font-size: 0.9rem;\n }\n \n .comparison-value {\n font-size: 1rem;\n }\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 *\/\n @media (max-width: 360px) {\n .container {\n padding: 0 5px;\n }\n \n .calculator-card,\n .history-card {\n padding: 12px;\n border-radius: 15px;\n }\n \n .header h1 {\n font-size: 1.6rem;\n }\n \n .section-title {\n font-size: 1.2rem;\n }\n \n .result-value {\n font-size: 1.8rem;\n }\n \n .input-with-icon input {\n padding: 10px 10px 10px 40px;\n font-size: 0.9rem;\n }\n }\n \n \/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 *\/\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n .pulse {\n animation: pulse 0.5s ease;\n }\n \n \/* \u0421\u043f\u0440\u0430\u0432\u043a\u0430 *\/\n .info-box {\n background: #e3f2fd;\n border-left: 4px solid #4facfe;\n padding: 20px;\n border-radius: 10px;\n margin: 20px 0;\n font-size: 0.95rem;\n width: 100%;\n box-sizing: border-box;\n }\n \n .formula-box {\n background: #f8f9fa;\n padding: 15px;\n border-radius: 10px;\n margin: 15px 0;\n font-family: monospace;\n border: 1px dashed #ddd;\n width: 100%;\n box-sizing: border-box;\n overflow-x: auto;\n }\n \n \/* \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 *\/\n .reload-button {\n background: #e74c3c;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 10px;\n cursor: pointer;\n font-size: 0.9rem;\n margin-top: 15px;\n transition: all 0.3s;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n max-width: 300px;\n justify-content: center;\n box-sizing: border-box;\n }\n \n .reload-button:hover {\n background: #c0392b;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);\n }\n \n \/* \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f *\/\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;\n }\n \n @media (max-width: 768px) {\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: repeat(2, 1fr) !important;\n }\n }\n \n @media (max-width: 480px) {\n .units-grid[style*=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))\"] {\n grid-template-columns: 1fr !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"header\">\n <h1><i class=\"fas fa-ruler-combined\"><\/i> \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b<\/h1>\n <p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0434\u043b\u0438\u043d\u044b \u0441 \u043d\u0430\u0443\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n <\/div>\n \n \n <div class=\"main-grid\">\n \n <div class=\"calculator-card converter-section\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-exchange-alt\"><\/i> \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0434\u043b\u0438\u043d\u044b\n <\/h2>\n \n <div class=\"converter-form\">\n \n <div class=\"input-group\">\n <label for=\"inputValue\"><i class=\"fas fa-arrow-right\"><\/i> \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/label>\n <div class=\"input-with-icon\">\n <input type=\"number\" id=\"inputValue\" value=\"1\" step=\"any\" min=\"0\">\n <span class=\"input-icon\">#<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"unit-selector-with-hints\">\n <div class=\"unit-select-container\">\n <div class=\"unit-hint unit-hint-from\">\n <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n <span>\u0418\u0417<\/span>\n <\/div>\n <select id=\"fromUnit\">\n <option value=\"m\">\u041c\u0435\u0442\u0440\u044b (m)<\/option>\n <option value=\"km\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)<\/option>\n <option value=\"cm\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)<\/option>\n <option value=\"mm\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)<\/option>\n <option value=\"in\">\u0414\u044e\u0439\u043c\u044b (in)<\/option>\n <option value=\"ft\">\u0424\u0443\u0442\u044b (ft)<\/option>\n <option value=\"yd\">\u042f\u0440\u0434\u044b (yd)<\/option>\n <option value=\"mi\">\u041c\u0438\u043b\u0438 (mi)<\/option>\n <\/select>\n <\/div>\n \n <button class=\"swap-button\" id=\"swapUnits\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <\/button>\n \n <div class=\"unit-select-container\">\n <div class=\"unit-hint unit-hint-to\">\n <span>\u0412<\/span>\n <i class=\"fas fa-long-arrow-alt-right\"><\/i>\n <\/div>\n <select id=\"toUnit\">\n <option value=\"cm\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)<\/option>\n <option value=\"m\">\u041c\u0435\u0442\u0440\u044b (m)<\/option>\n <option value=\"km\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)<\/option>\n <option value=\"mm\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)<\/option>\n <option value=\"in\">\u0414\u044e\u0439\u043c\u044b (in)<\/option>\n <option value=\"ft\">\u0424\u0443\u0442\u044b (ft)<\/option>\n <option value=\"yd\">\u042f\u0440\u0434\u044b (yd)<\/option>\n <option value=\"mi\">\u041c\u0438\u043b\u0438 (mi)<\/option>\n <\/select>\n <\/div>\n <\/div>\n \n \n <div class=\"result-display\">\n <div id=\"resultValue\" class=\"result-value\">100<\/div>\n <div id=\"resultUnit\" class=\"result-unit\">\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432<\/div>\n <\/div>\n \n \n <div class=\"quick-conversions\">\n <div class=\"quick-conversion-item\" data-to=\"cm\">\n <div class=\"quick-value\" id=\"quickCm\">100<\/div>\n <div class=\"quick-unit\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"in\">\n <div class=\"quick-value\" id=\"quickIn\">39.37<\/div>\n <div class=\"quick-unit\">\u0414\u044e\u0439\u043c\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"ft\">\n <div class=\"quick-value\" id=\"quickFt\">3.28<\/div>\n <div class=\"quick-unit\">\u0424\u0443\u0442\u044b<\/div>\n <\/div>\n <div class=\"quick-conversion-item\" data-to=\"yd\">\n <div class=\"quick-value\" id=\"quickYd\">1.09<\/div>\n <div class=\"quick-unit\">\u042f\u0440\u0434\u044b<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"visualization\">\n <h3 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-chart-line\"><\/i> \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n <\/h3>\n \n <div class=\"scale-container\">\n <div class=\"scale-marker\" id=\"scaleMarker\" style=\"left: 50%;\"><\/div>\n <\/div>\n \n <div class=\"scale-labels\">\n <span id=\"minLabel\">0<\/span>\n <span id=\"midLabel\">\u0421\u0440\u0435\u0434\u043d\u0435\u0435<\/span>\n <span id=\"maxLabel\">2 \u043c<\/span>\n <\/div>\n \n <div class=\"comparison-items\">\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-pencil-ruler\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison1\">\u2248 1 \u043b\u0438\u043d\u0435\u0439\u043a\u0430<\/div>\n <div>30 \u0441\u043c<\/div>\n <\/div>\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-basketball-ball\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison2\">\u2248 0.5 \u043c\u044f\u0447\u0430<\/div>\n <div>\u0414\u0438\u0430\u043c\u0435\u0442\u0440<\/div>\n <\/div>\n <div class=\"comparison-item\">\n <div class=\"comparison-icon\">\n <i class=\"fas fa-car\"><\/i>\n <\/div>\n <div class=\"comparison-value\" id=\"comparison3\">\u2248 0.01 \u0430\u0432\u0442\u043e<\/div>\n <div>\u0414\u043b\u0438\u043d\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"action-buttons\">\n <button class=\"action-btn btn-primary\" id=\"calculateBtn\">\n <i class=\"fas fa-calculator\"><\/i> \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c\n <\/button>\n <button class=\"action-btn btn-secondary\" id=\"resetBtn\">\n <i class=\"fas fa-redo\"><\/i> \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c\n <\/button>\n <button class=\"action-btn btn-secondary\" id=\"copyBtn\">\n <i class=\"far fa-copy\"><\/i> \u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n <\/button>\n <\/div>\n \n \n <div style=\"text-align: center; margin-top: 20px;\">\n <button class=\"reload-button\" id=\"reloadCalcBtn\">\n <i class=\"fas fa-sync-alt\"><\/i> \u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"history-card\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0440\u044b \u0434\u043b\u0438\u043d\u044b\n <\/h2>\n \n <div class=\"info-box\">\n <p><strong>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442:<\/strong> \u041c\u0435\u0442\u0440 \u0431\u044b\u043b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0432 1793 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u043e\u0434\u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u0438\u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043d\u0430\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u044d\u043a\u0432\u0430\u0442\u043e\u0440\u0430 \u0434\u043e \u0421\u0435\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044e\u0441\u0430.<\/p>\n <\/div>\n \n \n <div class=\"units-grid\">\n <div class=\"unit-card\" data-unit=\"arshin\">\n <div class=\"unit-symbol\">\u0410<\/div>\n <div class=\"unit-name\">\u0410\u0440\u0448\u0438\u043d<\/div>\n <div class=\"unit-value\">\u2248 71.12 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"sazhen\">\n <div class=\"unit-symbol\">\u0421<\/div>\n <div class=\"unit-name\">\u0421\u0430\u0436\u0435\u043d\u044c<\/div>\n <div class=\"unit-value\">\u2248 2.13 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"verst\">\n <div class=\"unit-symbol\">\u0412<\/div>\n <div class=\"unit-name\">\u0412\u0435\u0440\u0441\u0442\u0430<\/div>\n <div class=\"unit-value\">\u2248 1.07 \u043a\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"cubit\">\n <div class=\"unit-symbol\">\u041b<\/div>\n <div class=\"unit-name\">\u041b\u043e\u043a\u043e\u0442\u044c<\/div>\n <div class=\"unit-value\">\u2248 45-47 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"span\">\n <div class=\"unit-symbol\">\u041f<\/div>\n <div class=\"unit-name\">\u041f\u044f\u0434\u044c<\/div>\n <div class=\"unit-value\">\u2248 17.78 \u0441\u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"foot_rus\">\n <div class=\"unit-symbol\">\u0424<\/div>\n <div class=\"unit-name\">\u0424\u0443\u0442 (\u0440\u0443\u0441.)<\/div>\n <div class=\"unit-value\">\u2248 30.48 \u0441\u043c<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"history-timeline\">\n <div class=\"history-item\">\n <div class=\"history-period\">\u0414\u0440\u0435\u0432\u043d\u0438\u0439 \u0415\u0433\u0438\u043f\u0435\u0442 (~3000 \u0434\u043e \u043d.\u044d.)<\/div>\n <div class=\"history-description\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 «\u043b\u043e\u043a\u043e\u0442\u044c» (\u043e\u043a\u043e\u043b\u043e 45 \u0441\u043c), \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u043b\u0438\u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043b\u0435\u0447\u044c\u044f \u0444\u0430\u0440\u0430\u043e\u043d\u0430.<\/div>\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">\u0420\u0438\u043c\u0441\u043a\u0430\u044f \u0438\u043c\u043f\u0435\u0440\u0438\u044f<\/div>\n <div class=\"history-description\">«\u0420\u0438\u043c\u0441\u043a\u0438\u0439 \u0444\u0443\u0442» (pes) \u2248 29.6 \u0441\u043c. «\u041c\u0438\u043b\u043b\u044f\u0440\u0438\u0439» (\u0440\u0438\u043c\u0441\u043a\u0430\u044f \u043c\u0438\u043b\u044f) = 1000 \u0434\u0432\u043e\u0439\u043d\u044b\u0445 \u0448\u0430\u0433\u043e\u0432.<\/div>\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">\u0421\u0440\u0435\u0434\u043d\u0435\u0432\u0435\u043a\u043e\u0432\u0430\u044f \u0420\u0443\u0441\u044c<\/div>\n <div class=\"history-description\">\u0410\u0440\u0448\u0438\u043d (71.12 \u0441\u043c), \u0441\u0430\u0436\u0435\u043d\u044c (2.13 \u043c), \u0432\u0435\u0440\u0441\u0442\u0430 (1.07 \u043a\u043c). \u041c\u0435\u0440\u044b \u0432\u0430\u0440\u044c\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u043e \u0440\u0435\u0433\u0438\u043e\u043d\u0430\u043c.<\/div>\n <\/div>\n <div class=\"history-item\">\n <\/div>\n <div class=\"history-item\">\n <div class=\"history-period\">1793 \u0433\u043e\u0434 — \u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/div>\n <div class=\"history-description\">\u0424\u0440\u0430\u043d\u0446\u0438\u044f \u0432\u0432\u043e\u0434\u0438\u0442 \u043c\u0435\u0442\u0440 \u043a\u0430\u043a 1\/10 000 000 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442 \u044d\u043a\u0432\u0430\u0442\u043e\u0440\u0430 \u0434\u043e \u043f\u043e\u043b\u044e\u0441\u0430.<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"formula-box\">\n <strong>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u044b \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438:<\/strong><br>\n 1 \u043c = 100 \u0441\u043c = 1000 \u043c\u043c<br>\n 1 \u0434\u044e\u0439\u043c = 2.54 \u0441\u043c<br>\n 1 \u0444\u0443\u0442 = 30.48 \u0441\u043c = 12 \u0434\u044e\u0439\u043c\u043e\u0432<br>\n 1 \u044f\u0440\u0434 = 91.44 \u0441\u043c = 3 \u0444\u0443\u0442\u0430<br>\n 1 \u043c\u0438\u043b\u044f = 1609.34 \u043c\n <\/div>\n \n \n <h3 style=\"color: #2c3e50; margin: 30px 0 20px;\">\n <i class=\"fas fa-ruler\"><\/i> \u0412\u0441\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\n <\/h3>\n \n <div class=\"units-grid\" style=\"grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\">\n <div class=\"unit-card\" data-unit=\"km\">\n <div class=\"unit-symbol\">km<\/div>\n <div class=\"unit-name\">\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">1000 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"m\">\n <div class=\"unit-symbol\">m<\/div>\n <div class=\"unit-name\">\u041c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"dm\">\n <div class=\"unit-symbol\">dm<\/div>\n <div class=\"unit-name\">\u0414\u0435\u0446\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.1 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"cm\">\n <div class=\"unit-symbol\">cm<\/div>\n <div class=\"unit-name\">\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.01 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"mm\">\n <div class=\"unit-symbol\">mm<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.001 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"\u00b5m\">\n <div class=\"unit-symbol\">\u00b5m<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">0.000001 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"nm\">\n <div class=\"unit-symbol\">nm<\/div>\n <div class=\"unit-name\">\u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440<\/div>\n <div class=\"unit-value\">10\u207b\u2079 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"mi\">\n <div class=\"unit-symbol\">mi<\/div>\n <div class=\"unit-name\">\u041c\u0438\u043b\u0438<\/div>\n <div class=\"unit-value\">1609.34 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"yd\">\n <div class=\"unit-symbol\">yd<\/div>\n <div class=\"unit-name\">\u042f\u0440\u0434\u044b<\/div>\n <div class=\"unit-value\">0.9144 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"ft\">\n <div class=\"unit-symbol\">ft<\/div>\n <div class=\"unit-name\">\u0424\u0443\u0442\u044b<\/div>\n <div class=\"unit-value\">0.3048 \u043c<\/div>\n <\/div>\n <div class=\"unit-card\" data-unit=\"in\">\n <div class=\"unit-symbol\">in<\/div>\n <div class=\"unit-name\">\u0414\u044e\u0439\u043c\u044b<\/div>\n <div class=\"unit-value\">0.0254 \u043c<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"footer\">\n <p>\u00a9 2026 \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b | \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e 15 \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u044f\u0442\u043e\u0439 | \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 ISO \u0438 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432<\/p>\n <\/div>\n <\/div>\n\n <script>\n\/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c IIFE \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\n(function() {\n console.log('=== \u041a\u041e\u041d\u0412\u0415\u0420\u0422\u0415\u0420 \u041d\u0410\u0427\u0418\u041d\u0410\u0415\u0422 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0423 ===');\n \n let calculatorInitialized = false;\n let calculatorElements = null;\n \n function initializeCalculator() {\n if (calculatorInitialized) {\n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0443\u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c...');\n return;\n }\n calculatorInitialized = true;\n \n console.log('\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430...');\n \n try {\n calculatorElements = initCalculator();\n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d');\n \n \/\/ \u0424\u043e\u0440\u0441\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(() => {\n const calculateBtn = document.getElementById('calculateBtn');\n if (calculateBtn) {\n console.log('\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442...');\n calculateBtn.click();\n }\n }, 100);\n \n \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\n setupMonitoring();\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430:', error);\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e\n const resultValue = document.getElementById('resultValue');\n if (resultValue) {\n resultValue.textContent = '\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438';\n resultValue.style.color = '#e74c3c';\n }\n calculatorInitialized = false; \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u0430\u0433 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438\n }\n }\n \n \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u0445\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeCalculator);\n console.log('\u041e\u0436\u0438\u0434\u0430\u0435\u043c DOMContentLoaded...');\n } else {\n console.log('DOM \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0440\u0430\u0437\u0443...');\n initializeCalculator();\n }\n \n \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\n window.addEventListener('load', function() {\n console.log('\u0421\u043e\u0431\u044b\u0442\u0438\u0435 window.load \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e');\n if (!calculatorInitialized) {\n console.log('\u0417\u0430\u043f\u0443\u0441\u043a \u0447\u0435\u0440\u0435\u0437 window.load');\n initializeCalculator();\n }\n });\n \n \/\/ \u042d\u043a\u0441\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0447\u0435\u0440\u0435\u0437 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e\n setTimeout(() => {\n if (!calculatorInitialized) {\n console.log('\u042d\u043a\u0441\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443');\n initializeCalculator();\n }\n }, 3000);\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\n function setupMonitoring() {\n \/\/ \u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u044b\u0435 10 \u0441\u0435\u043a\u0443\u043d\u0434\n setInterval(() => {\n if (!calculatorElements) return;\n \n try {\n const value = parseFloat(calculatorElements.inputValue.value) || 0;\n const from = calculatorElements.fromUnit.value;\n const to = calculatorElements.toUnit.value;\n const result = calculatorElements.convert(value, from, to);\n \n console.log('\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430:', {\n \u0432\u0440\u0435\u043c\u044f: new Date().toLocaleTimeString(),\n \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: value,\n \u0438\u0437: from,\n \u0432: to,\n \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: result,\n \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f: calculatorElements.resultValue.textContent,\n \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d: calculatorInitialized\n });\n } catch (e) {\n console.log('\u041e\u0448\u0438\u0431\u043a\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430:', e);\n }\n }, 10000);\n }\n \n \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\n window.reloadCalculator = function() {\n console.log('\u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430...');\n calculatorInitialized = false;\n initializeCalculator();\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\n const reloadBtn = document.getElementById('reloadCalcBtn');\n if (reloadBtn) {\n const originalHTML = reloadBtn.innerHTML;\n reloadBtn.innerHTML = '<i class=\"fas fa-check\"><\/i> \u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e!';\n reloadBtn.style.background = '#27ae60';\n setTimeout(() => {\n reloadBtn.innerHTML = originalHTML;\n reloadBtn.style.background = '';\n }, 2000);\n }\n };\n \n})();\n\n\/\/ \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\nfunction initCalculator() {\n console.log('\u0424\u0443\u043d\u043a\u0446\u0438\u044f initCalculator \u0432\u044b\u0437\u0432\u0430\u043d\u0430');\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n const elements = {\n inputValue: document.getElementById('inputValue'),\n fromUnit: document.getElementById('fromUnit'),\n toUnit: document.getElementById('toUnit'),\n resultValue: document.getElementById('resultValue'),\n resultUnit: document.getElementById('resultUnit'),\n swapButton: document.getElementById('swapUnits'),\n calculateBtn: document.getElementById('calculateBtn'),\n resetBtn: document.getElementById('resetBtn'),\n copyBtn: document.getElementById('copyBtn'),\n reloadCalcBtn: document.getElementById('reloadCalcBtn'),\n scaleMarker: document.getElementById('scaleMarker'),\n maxLabel: document.getElementById('maxLabel'),\n minLabel: document.getElementById('minLabel'),\n midLabel: document.getElementById('midLabel')\n };\n \n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n for (const [key, element] of Object.entries(elements)) {\n if (!element) {\n console.error('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d: ' + key);\n } else {\n console.log('\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0439\u0434\u0435\u043d: ' + key);\n }\n }\n \n \/\/ \u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 (\u0432 \u043c\u0435\u0442\u0440\u044b)\n const factors = {\n 'm': 1,\n 'km': 1000,\n 'cm': 0.01,\n 'mm': 0.001,\n 'in': 0.0254,\n 'ft': 0.3048,\n 'yd': 0.9144,\n 'mi': 1609.34,\n \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'arshin': 0.7112,\n 'sazhen': 2.1336,\n 'verst': 1066.8,\n 'cubit': 0.46,\n 'span': 0.1778,\n 'foot_rus': 0.3048,\n \/\/ \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'dm': 0.1,\n '\u00b5m': 0.000001,\n 'nm': 0.000000001\n };\n \n \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446 (\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0441\u0440\u0435\u0434\u043d\u0435\u0435, \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435)\n const unitNames = {\n 'm': ['\u043c\u0435\u0442\u0440', '\u043c\u0435\u0442\u0440\u0430', '\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'km': ['\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440', '\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u0430', '\u043a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'cm': ['\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440', '\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u0430', '\u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'mm': ['\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440', '\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u0430', '\u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'in': ['\u0434\u044e\u0439\u043c', '\u0434\u044e\u0439\u043c\u0430', '\u0434\u044e\u0439\u043c\u043e\u0432'],\n 'ft': ['\u0444\u0443\u0442', '\u0444\u0443\u0442\u0430', '\u0444\u0443\u0442\u043e\u0432'],\n 'yd': ['\u044f\u0440\u0434', '\u044f\u0440\u0434\u0430', '\u044f\u0440\u0434\u043e\u0432'],\n 'mi': ['\u043c\u0438\u043b\u044f', '\u043c\u0438\u043b\u0438', '\u043c\u0438\u043b\u044c'],\n 'dm': ['\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440', '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u0430', '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u043e\u0432'],\n '\u00b5m': ['\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440', '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u0430', '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n 'nm': ['\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440', '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430', '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u043e\u0432'],\n \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n 'arshin': ['\u0430\u0440\u0448\u0438\u043d', '\u0430\u0440\u0448\u0438\u043d\u0430', '\u0430\u0440\u0448\u0438\u043d\u043e\u0432'],\n 'sazhen': ['\u0441\u0430\u0436\u0435\u043d\u044c', '\u0441\u0430\u0436\u0435\u043d\u0438', '\u0441\u0430\u0436\u0435\u043d\u0435\u0439'],\n 'verst': ['\u0432\u0435\u0440\u0441\u0442\u0430', '\u0432\u0435\u0440\u0441\u0442\u044b', '\u0432\u0435\u0440\u0441\u0442'],\n 'cubit': ['\u043b\u043e\u043a\u043e\u0442\u044c', '\u043b\u043e\u043a\u0442\u044f', '\u043b\u043e\u043a\u0442\u0435\u0439'],\n 'span': ['\u043f\u044f\u0434\u044c', '\u043f\u044f\u0434\u0438', '\u043f\u044f\u0434\u0435\u0439'],\n 'foot_rus': ['\u0444\u0443\u0442', '\u0444\u0443\u0442\u0430', '\u0444\u0443\u0442\u043e\u0432']\n };\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n function convert(value, from, to) {\n if (!factors[from] || !factors[to]) {\n console.error('\u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430: from=' + from + ', to=' + to);\n return 0;\n }\n \n const valueInMeters = value * factors[from];\n return valueInMeters \/ factors[to];\n }\n \n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0438\u0441\u043b\u0430\n function formatNumber(num) {\n if (num === 0 || isNaN(num)) return '0';\n \n const absNum = Math.abs(num);\n \n if (absNum >= 1000000) {\n return num.toExponential(2).replace('e+', '\u00d710^');\n } else if (absNum >= 1000) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 2 });\n } else if (absNum >= 1) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 4 });\n } else if (absNum >= 0.001) {\n return num.toLocaleString('ru-RU', { maximumFractionDigits: 6 });\n } else {\n return num.toExponential(2).replace('e-', '\u00d710^-');\n }\n }\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0441\u043b\u043e\u0432\u0430 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e \u0414\u041b\u042f WORDPRESS\n function getUnitForm(result, unitKey) {\n if (!unitNames[unitKey]) return unitKey;\n \n const absResult = Math.abs(result);\n \n \/\/ \u0414\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 1\n if (Math.abs(absResult - 1) < 0.01) {\n return unitNames[unitKey][0];\n }\n \n \/\/ \u0414\u043b\u044f 2, 3, 4 (\u043d\u043e \u043d\u0435 12, 13, 14)\n const lastDigit = Math.floor(absResult) % 10;\n const lastTwoDigits = Math.floor(absResult) % 100;\n \n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u043e && \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 WordPress\n var condition1 = lastDigit >= 2;\n var condition2 = lastDigit <= 4;\n var condition3 = lastTwoDigits < 10;\n var condition4 = lastTwoDigits >= 20;\n \n if (condition1 && condition2 && (condition3 || condition4)) {\n return unitNames[unitKey][1];\n }\n \n \/\/ \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432\n return unitNames[unitKey][2];\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445\n function updateAll() {\n try {\n const value = parseFloat(elements.inputValue.value) || 0;\n const from = elements.fromUnit.value;\n const to = elements.toUnit.value;\n \n \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n const result = convert(value, from, to);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n elements.resultValue.textContent = formatNumber(result);\n elements.resultUnit.textContent = getUnitForm(result, to);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n updateQuickConversions(value, from);\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e\n updateVisualization(value, from);\n \n \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e\n elements.resultValue.classList.remove('pulse');\n void elements.resultValue.offsetWidth;\n elements.resultValue.classList.add('pulse');\n \n console.log('\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f: ' + value + ' ' + from + ' = ' + result + ' ' + to);\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438:', error);\n elements.resultValue.textContent = '\u041e\u0428\u0418\u0411\u041a\u0410';\n elements.resultUnit.textContent = '';\n }\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0439\n function updateQuickConversions(value, from) {\n const quickUnits = ['cm', 'in', 'ft', 'yd'];\n \n quickUnits.forEach(unit => {\n const elementId = 'quick' + unit.charAt(0).toUpperCase() + unit.slice(1);\n const element = document.getElementById(elementId);\n if (element) {\n const result = convert(value, from, unit);\n element.textContent = formatNumber(result);\n }\n });\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\n function updateVisualization(value, from) {\n try {\n const valueInMeters = value * factors[from];\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0448\u043a\u0430\u043b\u044b\n let maxValue = 1;\n let maxLabel = \"1 \u043c\";\n \n if (valueInMeters < 0.01) {\n maxValue = 0.01;\n maxLabel = \"1 \u0441\u043c\";\n } else if (valueInMeters < 1) {\n maxValue = 1;\n maxLabel = \"1 \u043c\";\n } else if (valueInMeters < 10) {\n maxValue = 10;\n maxLabel = \"10 \u043c\";\n } else if (valueInMeters < 100) {\n maxValue = 100;\n maxLabel = \"100 \u043c\";\n } else {\n maxValue = Math.ceil(valueInMeters \/ 100) * 100;\n maxLabel = formatNumber(maxValue) + \" \u043c\";\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043a\u0443\n if (elements.maxLabel) {\n elements.maxLabel.textContent = maxLabel;\n }\n \n \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u0430\n let position = (valueInMeters \/ maxValue) * 100;\n position = Math.max(0, Math.min(100, position));\n \n if (elements.scaleMarker) {\n elements.scaleMarker.style.left = position + '%';\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f\n updateComparisons(valueInMeters);\n \n } catch (error) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:', error);\n }\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0439\n function updateComparisons(valueInMeters) {\n const comparisons = [\n { id: 'comparison1', unit: 0.3, name: '\u043b\u0438\u043d\u0435\u0439\u043a' },\n { id: 'comparison2', unit: 0.24, name: '\u043c\u044f\u0447' },\n { id: 'comparison3', unit: 4.5, name: '\u0430\u0432\u0442\u043e' }\n ];\n \n comparisons.forEach(comp => {\n const element = document.getElementById(comp.id);\n if (element) {\n const count = valueInMeters \/ comp.unit;\n \n \/\/ \u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0447\u0438\u0441\u043b\u043e\n let formattedCount;\n if (count === 0) formattedCount = '0';\n else if (Math.abs(count) >= 1000) formattedCount = count.toFixed(0);\n else if (Math.abs(count) >= 100) formattedCount = count.toFixed(0);\n else if (Math.abs(count) >= 10) formattedCount = count.toFixed(1);\n else if (Math.abs(count) >= 1) formattedCount = count.toFixed(2);\n else formattedCount = count.toFixed(3);\n \n \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e \u0414\u041b\u042f WORDPRESS\n let ending = '';\n const absCount = Math.abs(count);\n const lastDigit = Math.floor(absCount) % 10;\n const lastTwoDigits = Math.floor(absCount) % 100;\n \n if (comp.name === '\u043b\u0438\u043d\u0435\u0439\u043a') {\n if (Math.abs(absCount - 1) < 0.01) ending = '\u0430';\n else {\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439\n var cond1 = lastDigit >= 2;\n var cond2 = lastDigit <= 4;\n var cond3 = lastTwoDigits < 10;\n var cond4 = lastTwoDigits >= 20;\n \n if (cond1 && cond2 && (cond3 || cond4)) {\n ending = '\u0438';\n } else {\n ending = '';\n }\n }\n } else if (comp.name === '\u043c\u044f\u0447') {\n if (Math.abs(absCount - 1) < 0.01) ending = '';\n else {\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439\n var cond1 = lastDigit >= 2;\n var cond2 = lastDigit <= 4;\n var cond3 = lastTwoDigits < 10;\n var cond4 = lastTwoDigits >= 20;\n \n if (cond1 && cond2 && (cond3 || cond4)) {\n ending = '\u0430';\n } else {\n ending = '\u0435\u0439';\n }\n }\n } else if (comp.name === '\u0430\u0432\u0442\u043e') {\n ending = ''; \/\/ \u043d\u0435 \u0441\u043a\u043b\u043e\u043d\u044f\u0435\u0442\u0441\u044f\n }\n \n element.textContent = '\u2248 ' + formattedCount + ' ' + comp.name + ending;\n }\n });\n }\n \n \/\/ \u041d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439\n if (elements.inputValue) elements.inputValue.addEventListener('input', updateAll);\n if (elements.fromUnit) elements.fromUnit.addEventListener('change', updateAll);\n if (elements.toUnit) elements.toUnit.addEventListener('change', updateAll);\n \n \/\/ \u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435 \u043d\u0430 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430\n if (elements.inputValue) {\n elements.inputValue.addEventListener('focus', function() {\n updateAll();\n });\n }\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043d\u043e\u043f\u043a\u0438\n if (elements.inputValue) elements.inputValue.addEventListener('change', updateAll);\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0431\u043c\u0435\u043d\u0430\n if (elements.swapButton) {\n elements.swapButton.addEventListener('click', function() {\n const temp = elements.fromUnit.value;\n elements.fromUnit.value = elements.toUnit.value;\n elements.toUnit.value = temp;\n updateAll();\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\n if (elements.calculateBtn) elements.calculateBtn.addEventListener('click', updateAll);\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430\n if (elements.resetBtn) {\n elements.resetBtn.addEventListener('click', function() {\n elements.inputValue.value = '1';\n elements.fromUnit.value = 'm';\n elements.toUnit.value = 'cm';\n updateAll();\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u0431\u0440\u043e\u0448\u0435\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\n if (elements.copyBtn) {\n elements.copyBtn.addEventListener('click', function() {\n const text = elements.resultValue.textContent + ' ' + elements.resultUnit.textContent;\n \n if (navigator.clipboard && navigator.clipboard.writeText) {\n navigator.clipboard.writeText(text).then(() => {\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n }).catch(err => {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:', err);\n alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442');\n });\n } else {\n \/\/ Fallback \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432\n const textArea = document.createElement('textarea');\n textArea.value = text;\n document.body.appendChild(textArea);\n textArea.select();\n try {\n document.execCommand('copy');\n const originalHTML = this.innerHTML;\n this.innerHTML = '<i class=\"fas fa-check\"><\/i> \u0421\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e!';\n this.style.background = '#27ae60';\n setTimeout(() => {\n this.innerHTML = originalHTML;\n this.style.background = '';\n }, 1500);\n } catch (err) {\n console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f:', err);\n alert('\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442');\n }\n document.body.removeChild(textArea);\n }\n });\n }\n \n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430\n if (elements.reloadCalcBtn) {\n elements.reloadCalcBtn.addEventListener('click', function() {\n window.reloadCalculator();\n });\n }\n \n \/\/ \u0411\u044b\u0441\u0442\u0440\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438\n document.querySelectorAll('.quick-conversion-item').forEach(item => {\n item.addEventListener('click', function() {\n const targetUnit = this.getAttribute('data-to');\n if (targetUnit && elements.toUnit) {\n elements.toUnit.value = targetUnit;\n updateAll();\n \n \/\/ \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430\n document.querySelectorAll('.quick-conversion-item').forEach(i => {\n i.classList.remove('active');\n });\n this.classList.add('active');\n setTimeout(() => this.classList.remove('active'), 1000);\n }\n });\n });\n \n \/\/ \u0412\u0421\u0415 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f - \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e\n document.querySelectorAll('.unit-card[data-unit]').forEach(card => {\n card.addEventListener('click', function() {\n const unit = this.getAttribute('data-unit');\n const value = parseFloat(elements.inputValue.value) || 0;\n const from = elements.fromUnit.value;\n \n \/\/ \u0414\u043b\u044f \u0412\u0421\u0415\u0425 \u0435\u0434\u0438\u043d\u0438\u0446 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\n const result = convert(value, from, unit);\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u0438\u0446\n let fromName = from;\n let toName = unit;\n \n if (unitNames[from]) {\n fromName = unitNames[from][2];\n }\n \n if (unitNames[unit]) {\n toName = unitNames[unit][2];\n } else {\n \/\/ \u0415\u0441\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0442 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0435 \u0438\u043c\u044f\n const fallbackNames = {\n 'dm': '\u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u043e\u0432',\n '\u00b5m': '\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432',\n 'nm': '\u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u043e\u0432'\n };\n toName = fallbackNames[unit] || unit;\n }\n \n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\n const toast = document.createElement('div');\n toast.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #667eea; color: white; padding: 15px; border-radius: 10px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 14px; max-width: 300px; word-break: break-word;';\n toast.textContent = formatNumber(value) + ' ' + fromName + ' = ' + formatNumber(result) + ' ' + toName;\n document.body.appendChild(toast);\n \n setTimeout(() => {\n toast.style.opacity = '0';\n toast.style.transition = 'opacity 0.3s';\n setTimeout(() => toast.remove(), 300);\n }, 3000);\n \n \/\/ \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438\n document.querySelectorAll('.unit-card').forEach(c => {\n c.classList.remove('active');\n });\n this.classList.add('active');\n setTimeout(() => this.classList.remove('active'), 1500);\n });\n });\n \n \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n setTimeout(() => {\n updateAll();\n }, 100);\n \n \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437\u0432\u043d\u0435\n return {\n elements: elements,\n convert: convert,\n updateAll: updateAll,\n updateQuickConversions: updateQuickConversions,\n updateVisualization: updateVisualization\n };\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<section class=\"science-hub\" style=\"\n margin: 80px auto;\n padding: 60px 0;\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n border-radius: 35px;\n position: relative;\n overflow: hidden;\n\">\n \n <div style=\"position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%); border-radius: 50%;\"><\/div>\n <div style=\"position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background: linear-gradient(135deg, #4facfe22 0%, #00f2fe22 100%); border-radius: 50%;\"><\/div>\n\n <div class=\"container\" style=\"max-width: 1400px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2;\">\n \n \n <div class=\"main-header\" style=\"text-align: center; margin-bottom: 60px;\">\n <div class=\"header-badge\" style=\"\n display: inline-block;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 12px 30px;\n border-radius: 25px;\n font-size: 0.9rem;\n font-weight: 600;\n margin-bottom: 20px;\n box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2);\n \">\n <i class=\"fas fa-atom\"><\/i> \u041d\u0410\u0423\u0427\u041d\u042b\u0419 \u0426\u0415\u041d\u0422\u0420 \u0414\u0410\u041d\u041d\u042b\u0425\n <\/div>\n <h2 style=\"\n font-size: 3rem;\n color: #2c3e50;\n margin-bottom: 20px;\n background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n \">\n \u041e\u0442 \u043c\u0438\u043a\u0440\u043e\u043d\u0430 \u0434\u043e \u0441\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u0433\u043e\u0434\u0430\n <\/h2>\n <p style=\"\n font-size: 1.2rem;\n color: #5d6d7e;\n max-width: 800px;\n margin: 0 auto 30px;\n line-height: 1.6;\n \">\n \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432 \u0412\u0441\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0437\u043c\u0443 \u0435\u0434\u0438\u043d\u0438\u0446 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\n <\/p>\n \n \n <div class=\"theme-toggle\" style=\"\n display: inline-flex;\n background: white;\n padding: 8px;\n border-radius: 20px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.1);\n margin-bottom: 40px;\n \">\n <button onclick=\"switchTheme('scale')\" id=\"btnScale\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: #667eea;\n color: white;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-expand-alt\"><\/i> \u041c\u0430\u0441\u0448\u0442\u0430\u0431\u044b\n <\/button>\n <button onclick=\"switchTheme('history')\" id=\"btnHistory\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: transparent;\n color: #5d6d7e;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u044f\n <\/button>\n <button onclick=\"switchTheme('science')\" id=\"btnScience\" style=\"\n padding: 12px 25px;\n border: none;\n border-radius: 15px;\n background: transparent;\n color: #5d6d7e;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \">\n <i class=\"fas fa-flask\"><\/i> \u041d\u0430\u0443\u043a\u0430\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"scale-explorer\" id=\"scaleSection\" style=\"\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n margin-bottom: 50px;\n display: block;\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-expand-arrows-alt\"><\/i> \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\n <\/h3>\n \n <div class=\"scale-controls\" style=\"\n display: grid;\n grid-template-columns: 2fr 1fr;\n gap: 40px;\n margin-bottom: 40px;\n \">\n <div>\n <div style=\"margin-bottom: 20px;\">\n <label style=\"\n display: block;\n color: #5d6d7e;\n margin-bottom: 10px;\n font-weight: 600;\n \">\n <i class=\"fas fa-sliders-h\"><\/i> \u0420\u0435\u0433\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n <\/label>\n <input type=\"range\" \n min=\"0\" \n max=\"8\" \n value=\"4\" \n id=\"scaleSlider\" \n style=\"\n width: 100%;\n height: 10px;\n -webkit-appearance: none;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 5px;\n outline: none;\n \"\n oninput=\"updateScale()\">\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n color: #5d6d7e;\n font-size: 0.9rem;\n \">\n <span>10\u207b\u00b9\u00b2 \u043c<\/span>\n <span>10\u207b\u2076 \u043c<\/span>\n <span>1 \u043c<\/span>\n <span>10\u2076 \u043c<\/span>\n <span>10\u00b9\u00b2 \u043c<\/span>\n <\/div>\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n color: #888;\n font-size: 0.8rem;\n \">\n <span>\u043f\u0438\u043a\u043e\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0435\u0442\u0440<\/span>\n <span>\u043c\u0435\u0433\u0430\u043c\u0435\u0442\u0440<\/span>\n <span>\u0442\u0435\u0440\u0430\u043c\u0435\u0442\u0440<\/span>\n <\/div>\n <\/div>\n \n <div id=\"scaleInfo\" style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n margin-top: 20px;\n \">\n <h4 id=\"scaleTitle\" style=\"color: #2c3e50; margin-bottom: 10px;\">\u041c\u0430\u0441\u0448\u0442\u0430\u0431: 1 \u043c\u0435\u0442\u0440<\/h4>\n <p id=\"scaleDescription\" style=\"color: #5d6d7e; margin-bottom: 15px;\">\n \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u0434\u043b\u0438\u043d\u044b \u0432 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435\n <\/p>\n <div class=\"scale-comparison\" style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 15px;\n background: white;\n border-radius: 10px;\n \">\n <div style=\"width: 50px; height: 50px; background: #667eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;\">\n <i class=\"fas fa-ruler-combined\"><\/i>\n <\/div>\n <div>\n <div style=\"font-weight: 600; color: #2c3e50;\">\u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f:<\/div>\n <div id=\"scaleComparison\" style=\"color: #5d6d7e; font-size: 0.9rem;\">\n \u2248 39.37 \u0434\u044e\u0439\u043c\u043e\u0432 \u0438\u043b\u0438 3.28 \u0444\u0443\u0442\u0430\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div style=\"\n margin-top: 20px;\n padding: 15px;\n background: #f0f7ff;\n border-radius: 10px;\n border-left: 4px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.5;\">\n <i class=\"fas fa-book\"><\/i> <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/strong> \n <a href=\"https:\/\/www.nist.gov\/si-redefinition\/meet-constants\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NIST — Fundamental Constants<\/a>, \n <a href=\"https:\/\/physics.nist.gov\/cuu\/Units\/current.html\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NIST — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0435\u0434\u0438\u043d\u0438\u0446<\/a>\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"scale-visual\" style=\"\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \">\n <div id=\"scaleCircle\" style=\"\n width: 200px;\n height: 200px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 800;\n font-size: 1.5rem;\n margin-bottom: 20px;\n transition: all 0.5s ease;\n text-align: center;\n padding: 10px;\n \">\n 1 \u043c\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431<\/div>\n <div id=\"scaleValue\" style=\"color: #667eea; font-size: 1.2rem; font-weight: 700;\">1 \u043c\u0435\u0442\u0440<\/div>\n <div id=\"scaleScientific\" style=\"color: #888; font-size: 0.9rem; margin-top: 5px;\">10\u2070 \u043c\u0435\u0442\u0440\u043e\u0432<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"comparison-scale\" style=\"\n background: linear-gradient(90deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n overflow: hidden;\n \">\n <h4 style=\"color: #2c3e50; margin-bottom: 20px;\">\n <i class=\"fas fa-chart-bar\"><\/i> \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438\n <\/h4>\n <div class=\"comparison-items\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n height: auto;\n position: relative;\n flex-wrap: wrap;\n gap: 15px;\n \">\n \n <div style=\"\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 3px;\n background: #667eea;\n display: none;\n \"><\/div>\n \n \n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 1 1 80px;\n min-width: 60px;\n max-width: 120px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 20px;\n background: #4facfe;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 30px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0410\u0442\u043e\u043c<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 1 1 80px;\n min-width: 60px;\n max-width: 120px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 40px;\n background: #00f2fe;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 60px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0411\u0430\u043a\u0442\u0435\u0440\u0438\u044f<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 2 1 120px;\n min-width: 80px;\n max-width: 160px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 80px;\n background: #667eea;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 120px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0427\u0435\u043b\u043e\u0432\u0435\u043a<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 3 1 140px;\n min-width: 100px;\n max-width: 180px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 120px;\n background: #764ba2;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 180px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u041d\u0435\u0431\u043e\u0441\u043a\u0440\u0435\u0431<\/div>\n <\/div>\n <div class=\"comparison-item\" style=\"\n text-align: center; \n flex: 4 1 160px;\n min-width: 120px;\n max-width: 240px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 100%;\n height: 150px;\n background: #ff6b6b;\n margin: 0 auto 10px;\n border-radius: 4px;\n max-width: 240px;\n \"><\/div>\n <div style=\"font-size: 0.8rem; color: #5d6d7e; word-break: break-word;\">\u0413\u043e\u0440\u0430<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"science-cards\" id=\"scienceSection\" style=\"\n display: none;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n margin-bottom: 50px;\n \">\n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #667eea11 0%, #764ba211 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-atom\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u041a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (1.6\u00d710\u207b\u00b3\u2075 \u043c) \u2014 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u043d\u0430\u0447\u0438\u043c\u0430\u044f \u0434\u043b\u0438\u043d\u0430. \n \u041d\u0430 \u0442\u0430\u043a\u0438\u0445 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u0445 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0442\u0435\u0440\u044f\u044e\u0442 \u0441\u043c\u044b\u0441\u043b.\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/journals.aps.org\/prl\/abstract\/10.1103\/PhysRevLett.106.101101\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">\n Physical Review Letters — \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430\n <\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #27ae60;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041d\u0430\u0443\u0447\u043d\u043e \u0434\u043e\u043a\u0430\u0437\u0430\u043d\u043e<\/span>\n <\/div>\n <button onclick=\"showDetail('quantum')\" style=\"\n background: transparent;\n border: 2px solid #667eea;\n color: #667eea;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#667eea'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4facfe11 0%, #00f2fe11 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-satellite\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u041a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n 1 \u043f\u0430\u0440\u0441\u0435\u043a = 3.26 \u0441\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0433\u043e\u0434\u0430 \u2248 30.9 \u0442\u0440\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u043a\u043c. \n \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0437\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0438.\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438:<\/strong> \n <a href=\"https:\/\/www.iau.org\/public\/themes\/measuring\/\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">IAU — \u0410\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b<\/a>, \n <a href=\"https:\/\/science.nasa.gov\/astrophysics\/focus-areas\/how-do-stars-form-and-evolve\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">NASA Astrophysics<\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #e74c3c;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442<\/span>\n <\/div>\n <button onclick=\"showDetail('space')\" style=\"\n background: transparent;\n border: 2px solid #4facfe;\n color: #4facfe;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#4facfe'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#4facfe'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"science-card\" style=\"\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n position: relative;\n overflow: hidden;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-10px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <div style=\"\n position: absolute;\n top: 0;\n right: 0;\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #ff6b6b11 0%, #ff9f4311 100%);\n border-radius: 0 20px 0 100px;\n \"><\/div>\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 20px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #ff6b6b 0%, #ff9f43 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-dna\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin: 0; font-size: 1.3rem;\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u044b<\/h4>\n <\/div>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 2 \u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u043e\u043b\u043e\u0441 \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 100 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432 (0.1 \u043c\u043c).\n <\/p>\n <div class=\"source-info\" style=\"\n background: #f0f7ff;\n padding: 12px 15px;\n border-radius: 8px;\n margin-bottom: 20px;\n border-left: 3px solid #ff6b6b;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.nature.com\/articles\/171737a0\" target=\"_blank\" style=\"color: #ff6b6b; text-decoration: none;\">\n Nature — \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0414\u041d\u041a (\u0423\u043e\u0442\u0441\u043e\u043d \u0438 \u041a\u0440\u0438\u043a)\n <\/a>\n <\/p>\n <\/div>\n <div class=\"card-footer\" style=\"\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 20px;\n border-top: 2px solid #f8f9ff;\n \">\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <div style=\"\n width: 8px;\n height: 8px;\n background: #9b59b6;\n border-radius: 50%;\n \"><\/div>\n <span style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/span>\n <\/div>\n <button onclick=\"showDetail('biology')\" style=\"\n background: transparent;\n border: 2px solid #ff6b6b;\n color: #ff6b6b;\n padding: 8px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#ff6b6b'; this.style.color='white'\" \n onmouseout=\"this.style.background='transparent'; this.style.color='#ff6b6b'\">\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"history-timeline\" id=\"historySection\" style=\"\n display: none;\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-hourglass-half\"><\/i> \u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439\n <\/h3>\n \n <div class=\"timeline-container\" style=\"position: relative;\">\n \n <div style=\"\n position: absolute;\n left: 50px;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(to bottom, #667eea, #764ba2);\n border-radius: 2px;\n \"><\/div>\n \n <div class=\"timeline-items\">\n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #667eea;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #667eea;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #667eea;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-monument\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #667eea;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1799 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u041f\u043b\u0430\u0442\u0438\u043d\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u043c\u0435\u0442\u0440\u0430<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u0442\u0430\u043b\u043e\u043d\u0430 \u043c\u0435\u0442\u0440\u0430 \u0438\u0437 \u043f\u043b\u0430\u0442\u0438\u043d\u044b. \u0425\u0440\u0430\u043d\u0438\u043b\u0441\u044f \u0432 \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0430\u0440\u0445\u0438\u0432\u0435 \u0424\u0440\u0430\u043d\u0446\u0438\u0438 \u043a\u0430\u043a «\u043c\u0435\u0442\u0440 \u0430\u0440\u0445\u0438\u0432\u043e\u0432».\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(102, 126, 234, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.bipm.org\/en\/history-si\/\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">\n BIPM — \u0418\u0441\u0442\u043e\u0440\u0438\u044f \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0435\u0434\u0438\u043d\u0438\u0446\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-balance-scale\"><\/i> \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c\n <\/span>\n <span style=\"\n background: rgba(102, 126, 234, 0.1);\n color: #667eea;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #4facfe;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #4facfe;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #4facfe;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-lightbulb\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #4facfe;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1960 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u041a\u0440\u0438\u043f\u0442\u043e\u043d\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u041c\u0435\u0442\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043b\u0438\u043d\u0443 \u0432\u043e\u043b\u043d\u044b \u0438\u0437\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u043f\u0442\u043e\u043d\u0430-86. \u0412 10 \u0440\u0430\u0437 \u0442\u043e\u0447\u043d\u0435\u0435 \u043f\u043b\u0430\u0442\u0438\u043d\u043e\u0432\u043e\u0433\u043e \u044d\u0442\u0430\u043b\u043e\u043d\u0430.\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(79, 172, 254, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #4facfe;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/www.nist.gov\/si-redefinition\/meter\" target=\"_blank\" style=\"color: #4facfe; text-decoration: none;\">\n NIST — \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0430\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(79, 172, 254, 0.1);\n color: #4facfe;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-atom\"><\/i> \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0440\u044b\u0432\n <\/span>\n <span style=\"\n background: rgba(79, 172, 254, 0.1);\n color: #4facfe;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-tachometer-alt\"><\/i> \u0412\u044b\u0441\u043e\u043a\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"timeline-item\" style=\"\n position: relative;\n margin: 40px 0;\n padding-left: 80px;\n \">\n <div style=\"\n position: absolute;\n left: 42px;\n top: 0;\n width: 16px;\n height: 16px;\n background: white;\n border: 4px solid #27ae60;\n border-radius: 50%;\n box-shadow: 0 0 0 3px white;\n \"><\/div>\n <div style=\"\n background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);\n padding: 25px;\n border-radius: 15px;\n border-left: 5px solid #27ae60;\n \">\n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 15px;\n \">\n <div style=\"\n width: 50px;\n height: 50px;\n background: #27ae60;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.5rem;\n \">\n <i class=\"fas fa-bolt\"><\/i>\n <\/div>\n <div>\n <div style=\"\n font-weight: 700;\n color: #27ae60;\n margin-bottom: 5px;\n font-size: 1.1rem;\n \">1983 \u0433\u043e\u0434<\/div>\n <h4 style=\"color: #2c3e50; margin: 0;\">\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0442\u0430 \u043a\u0430\u043a \u044d\u0442\u0430\u043b\u043e\u043d<\/h4>\n <\/div>\n <\/div>\n <p style=\"color: #5d6d7e; line-height: 1.6; margin-bottom: 15px;\">\n \u041c\u0435\u0442\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0432\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435 \u0437\u0430 1\/299 792 458 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.\n <\/p>\n <div class=\"source-info\" style=\"\n background: rgba(39, 174, 96, 0.1);\n padding: 10px 15px;\n border-radius: 8px;\n margin-bottom: 15px;\n border-left: 3px solid #27ae60;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.4;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a:<\/strong> \n <a href=\"https:\/\/physics.nist.gov\/cuu\/Units\/meter.html\" target=\"_blank\" style=\"color: #27ae60; text-decoration: none;\">\n NIST — \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0432\u0435\u0442\u0430\n <\/a>\n <\/p>\n <\/div>\n <div style=\"\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n \">\n <span style=\"\n background: rgba(39, 174, 96, 0.1);\n color: #27ae60;\n padding: 5px 15px;\n border-radius: 15px;\n font-size: 0.85rem;\n font-weight: 600;\n \">\n <i class=\"fas fa-rocket\"><\/i> \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"data-interactive\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 40px;\n border-radius: 25px;\n color: white;\n margin-bottom: 50px;\n \">\n <h3 style=\"margin-bottom: 30px; display: flex; align-items: center; gap: 15px;\">\n <i class=\"fas fa-chart-line\"><\/i> \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435\n <\/h3>\n \n <div style=\"\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n \">\n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">195<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0421\u0442\u0440\u0430\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443\n <\/div>\n <\/div>\n \n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">3<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0421\u0442\u0440\u0430\u043d\u044b \u0441 \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439\n <\/div>\n <\/div>\n \n <div class=\"stat-card\" style=\"\n background: rgba(255, 255, 255, 0.1);\n padding: 25px;\n border-radius: 15px;\n backdrop-filter: blur(10px);\n \">\n <div style=\"\n font-size: 2.5rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-align: center;\n \">99.9%<\/div>\n <div style=\"text-align: center; opacity: 0.9;\">\n \u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439\n <\/div>\n <\/div>\n <\/div>\n \n \n <div style=\"margin-top: 30px;\">\n <div style=\"\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n font-weight: 600;\n \">\n <span>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432 \u043c\u0438\u0440\u0435<\/span>\n <span>95%<\/span>\n <\/div>\n <div style=\"\n width: 100%;\n height: 10px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 5px;\n overflow: hidden;\n \">\n <div id=\"metricProgress\" style=\"\n width: 0%;\n height: 100%;\n background: white;\n border-radius: 5px;\n transition: width 2s ease;\n \"><\/div>\n <\/div>\n <div style=\"\n margin-top: 10px;\n font-size: 0.85rem;\n opacity: 0.8;\n \">\n <i class=\"fas fa-info-circle\"><\/i> \n <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445:<\/strong> \n <a href=\"https:\/\/www.bipm.org\/en\/measurement-units\/\" target=\"_blank\" style=\"color: white; text-decoration: underline;\">\n BIPM — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0435 \u0431\u044e\u0440\u043e \u043c\u0435\u0440 \u0438 \u0432\u0435\u0441\u043e\u0432\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"interactive-quiz\" style=\"\n background: white;\n padding: 40px;\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n \">\n <h3 style=\"\n color: #2c3e50;\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n gap: 15px;\n \">\n <i class=\"fas fa-gamepad\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u0441\u0442\n <\/h3>\n \n <div id=\"quizContainer\">\n <div class=\"quiz-question active\" id=\"question1\">\n <h4 style=\"color: #2c3e50; margin-bottom: 20px; line-height: 1.4;\">\u0412\u043e\u043f\u0440\u043e\u0441 1: \u041a\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 \u0434\u043b\u0438\u043d\u044b \u0432 \u0444\u0438\u0437\u0438\u043a\u0435?<\/h4>\n <div style=\"\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n margin-bottom: 30px;\n \">\n \n <button onclick=\"checkQuizAnswer(1, 'a')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">A.<\/strong> \u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440 (10\u207b\u2079 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'b')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">B.<\/strong> \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (1.6\u00d710\u207b\u00b3\u2075 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'c')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">C.<\/strong> \u0410\u043d\u0433\u0441\u0442\u0440\u0435\u043c (10\u207b\u00b9\u2070 \u043c)\n <\/button>\n <button onclick=\"checkQuizAnswer(1, 'd')\" style=\"\n padding: 20px;\n border: 2px solid #e0e0e0;\n background: white;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1rem;\n transition: all 0.3s;\n text-align: left;\n color: #2c3e50;\n \" onmouseover=\"this.style.borderColor='#667eea'\" onmouseout=\"this.style.borderColor='#e0e0e0'\">\n <strong style=\"color: #667eea;\">D.<\/strong> \u0424\u0435\u043c\u0442\u043e\u043c\u0435\u0442\u0440 (10\u207b\u00b9\u2075 \u043c)\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"quizResult\" style=\"\n display: none;\n text-align: center;\n padding: 40px;\n \">\n <div style=\"\n width: 100px;\n height: 100px;\n background: #27ae60;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 2.5rem;\n margin: 0 auto 20px;\n \">\n <i class=\"fas fa-trophy\"><\/i>\n <\/div>\n <h4 style=\"color: #2c3e50; margin-bottom: 15px; font-size: 1.5rem;\">\u0422\u0435\u0441\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d!<\/h4>\n <p style=\"color: #5d6d7e; margin-bottom: 25px; line-height: 1.6;\">\n \u0412\u044b \u043e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430 <span id=\"score\" style=\"font-weight: 800; color: #27ae60; font-size: 1.2rem;\">1<\/span> \u0438\u0437 1 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<br>\n <span id=\"quizMessage\" style=\"font-style: italic; margin-top: 10px; display: block;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0435\u0434\u0435\u043b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 \u0444\u0438\u0437\u0438\u043a\u0435.\n <\/span>\n <\/p>\n <div style=\"\n background: #f8f9ff;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 25px;\n text-align: left;\n \">\n <h5 style=\"color: #2c3e50; margin-bottom: 10px;\">\n <i class=\"fas fa-lightbulb\"><\/i> \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442:\n <\/h5>\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.95rem; line-height: 1.6;\">\n \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0430 \u0432 \u0447\u0435\u0441\u0442\u044c \u041c\u0430\u043a\u0441\u0430 \u041f\u043b\u0430\u043d\u043a\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438. \n \u042d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043b\u0438\u043d\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0449\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0437\u0430\u043a\u043e\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438.\n <\/p>\n <\/div>\n <button onclick=\"resetQuiz()\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 15px;\n cursor: pointer;\n font-weight: 600;\n font-size: 1rem;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n <i class=\"fas fa-redo\"><\/i> \u041f\u0440\u043e\u0439\u0442\u0438 \u0435\u0449\u0435 \u0440\u0430\u0437\n <\/button>\n <\/div>\n <\/div>\n \n \n <div style=\"\n margin-top: 30px;\n padding: 15px;\n background: #f0f7ff;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n \">\n <p style=\"color: #5d6d7e; margin: 0; font-size: 0.85rem; line-height: 1.5;\">\n <i class=\"fas fa-book\"><\/i> <strong>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0430:<\/strong> \n <a href=\"https:\/\/physicsworld.com\/a\/the-planck-length\/\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">Physics World — \u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430<\/a>, \n <a href=\"https:\/\/www.sciencedaily.com\/releases\/2019\/11\/191127142606.htm\" target=\"_blank\" style=\"color: #667eea; text-decoration: none;\">Science Daily — \u0424\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u0435\u043b\u044b<\/a>\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"hub-footer\" style=\"\n text-align: center;\n margin-top: 50px;\n padding-top: 30px;\n border-top: 2px solid #eef2ff;\n \">\n <p style=\"color: #5d6d7e; margin-bottom: 20px; font-size: 1.1rem;\">\n \u0414\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b: <span id=\"currentDate\" style=\"font-weight: 600; color: #667eea;\"><\/span>\n <\/p>\n <div style=\"\n display: flex;\n justify-content: center;\n gap: 30px;\n flex-wrap: wrap;\n margin-bottom: 30px;\n \">\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #667eea;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-book\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">12+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u041d\u0430\u0443\u0447\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432<\/div>\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #764ba2;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-chart-bar\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">25+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/div>\n <\/div>\n <div style=\"text-align: center;\">\n <div style=\"\n font-size: 2rem;\n color: #4facfe;\n margin-bottom: 10px;\n \">\n <i class=\"fas fa-users\"><\/i>\n <\/div>\n <div style=\"font-weight: 600; color: #2c3e50; margin-bottom: 5px;\">10 000+<\/div>\n <div style=\"color: #5d6d7e; font-size: 0.9rem;\">\u0415\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/div>\n <\/div>\n <\/div>\n <div style=\"\n background: rgba(102, 126, 234, 0.1);\n padding: 25px;\n border-radius: 15px;\n display: inline-block;\n margin: 0 auto;\n max-width: 800px;\n text-align: left;\n \">\n <h5 style=\"color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;\">\n <i class=\"fas fa-external-link-alt\"><\/i> \u0410\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438\n <\/h5>\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;\">\n <div>\n <a href=\"https:\/\/www.bipm.org\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> BIPM — \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0435 \u0431\u044e\u0440\u043e \u043c\u0435\u0440 \u0438 \u0432\u0435\u0441\u043e\u0432\n <\/a>\n <a href=\"https:\/\/www.nist.gov\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> NIST — \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0438\u0442\u0443\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432\n <\/a>\n <\/div>\n <div>\n <a href=\"https:\/\/www.nasa.gov\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> NASA — \u041d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u0430\u044d\u0440\u043e\u043d\u0430\u0432\u0442\u0438\u043a\u0435\n <\/a>\n <a href=\"https:\/\/www.nature.com\" target=\"_blank\" style=\"\n display: block;\n color: #667eea;\n text-decoration: none;\n padding: 10px 15px;\n background: white;\n border-radius: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n transition: all 0.3s;\n \" onmouseover=\"this.style.background='#667eea'; this.style.color='white'\" \n onmouseout=\"this.style.background='white'; this.style.color='#667eea'\">\n <i class=\"fas fa-external-link-alt\"><\/i> Nature — \u041d\u0430\u0443\u0447\u043d\u044b\u0439 \u0436\u0443\u0440\u043d\u0430\u043b\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0434\u0430\u0442\u0443\n const currentDate = new Date();\n document.getElementById('currentDate').textContent = \n currentDate.toLocaleDateString('ru-RU', { \n year: 'numeric', \n month: 'long', \n day: 'numeric' \n });\n \n \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432\n updateScale();\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440\u0430\n setTimeout(() => {\n document.getElementById('metricProgress').style.width = '95%';\n }, 500);\n});\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043c\nfunction switchTheme(theme) {\n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n document.getElementById('btnScale').style.background = 'transparent';\n document.getElementById('btnScale').style.color = '#5d6d7e';\n document.getElementById('btnHistory').style.background = 'transparent';\n document.getElementById('btnHistory').style.color = '#5d6d7e';\n document.getElementById('btnScience').style.background = 'transparent';\n document.getElementById('btnScience').style.color = '#5d6d7e';\n \n \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0441\u0435\u043a\u0446\u0438\u0438\n document.getElementById('scaleSection').style.display = 'none';\n document.getElementById('historySection').style.display = 'none';\n document.getElementById('scienceSection').style.display = 'none';\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443\n switch(theme) {\n case 'scale':\n document.getElementById('scaleSection').style.display = 'block';\n document.getElementById('btnScale').style.background = '#667eea';\n document.getElementById('btnScale').style.color = 'white';\n break;\n case 'history':\n document.getElementById('historySection').style.display = 'block';\n document.getElementById('btnHistory').style.background = '#667eea';\n document.getElementById('btnHistory').style.color = 'white';\n break;\n case 'science':\n document.getElementById('scienceSection').style.display = 'block';\n document.getElementById('btnScience').style.background = '#667eea';\n document.getElementById('btnScience').style.color = 'white';\n break;\n }\n}\n\n\/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u043e\u0432 (\u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041e: \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435)\nconst scaleData = [\n { power: -12, name: \"\u041f\u0438\u043a\u043e\u043c\u0435\u0442\u0440\", value: \"10\u207b\u00b9\u00b2 \u043c\", sciValue: \"10\u207b\u00b9\u00b2 \u043c\", desc: \"\u0420\u0430\u0437\u043c\u0435\u0440 \u0430\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u044f\u0434\u0440\u0430\", comp: \"\u2248 0.01 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0430\u0442\u043e\u043c\u0430\" },\n { power: -9, name: \"\u041d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\", value: \"10\u207b\u2079 \u043c\", sciValue: \"10\u207b\u2079 \u043c\", desc: \"\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0414\u041d\u041a\", comp: \"\u2248 2.5 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a\" },\n { power: -6, name: \"\u041c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043a\u043c\", sciValue: \"10\u207b\u2076 \u043c\", desc: \"\u0420\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043a\u0442\u0435\u0440\u0438\u0438\", comp: \"\u2248 5-10 \u0431\u0430\u043a\u0442\u0435\u0440\u0438\u0439\" },\n { power: -3, name: \"\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043c\", sciValue: \"10\u207b\u00b3 \u043c\", desc: \"\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u043a\u0440\u0435\u0434\u0438\u0442\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u044b\", comp: \"\u2248 0.04 \u0434\u044e\u0439\u043c\u0430\" },\n { power: 0, name: \"\u041c\u0435\u0442\u0440\", value: \"1 \u043c\", sciValue: \"10\u2070 \u043c\", desc: \"\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u044d\u0442\u0430\u043b\u043e\u043d \u0434\u043b\u0438\u043d\u044b\", comp: \"\u2248 39.37 \u0434\u044e\u0439\u043c\u043e\u0432\" },\n { power: 3, name: \"\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\", value: \"1 \u043a\u043c\", sciValue: \"10\u00b3 \u043c\", desc: \"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430 12 \u043c\u0438\u043d\u0443\u0442 \u0445\u043e\u0434\u044c\u0431\u044b\", comp: \"\u2248 0.62 \u043c\u0438\u043b\u0438\" },\n { power: 6, name: \"\u041c\u0435\u0433\u0430\u043c\u0435\u0442\u0440\", value: \"1000 \u043a\u043c\", sciValue: \"10\u2076 \u043c\", desc: \"\u0414\u043b\u0438\u043d\u0430 \u0418\u0442\u0430\u043b\u0438\u0438 \u0441 \u0441\u0435\u0432\u0435\u0440\u0430 \u043d\u0430 \u044e\u0433\", comp: \"\u2248 621 \u043c\u0438\u043b\u0438\" },\n { power: 9, name: \"\u0413\u0438\u0433\u0430\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043b\u043d \u043a\u043c\", sciValue: \"10\u2079 \u043c\", desc: \"3\u00d7 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u041b\u0443\u043d\u044b\", comp: \"\u2248 621,371 \u043c\u0438\u043b\u0438\" },\n { power: 12, name: \"\u0422\u0435\u0440\u0430\u043c\u0435\u0442\u0440\", value: \"1 \u043c\u043b\u0440\u0434 \u043a\u043c\", sciValue: \"10\u00b9\u00b2 \u043c\", desc: \"\u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0421\u0430\u0442\u0443\u0440\u043d\u0430\", comp: \"\u2248 1\/10 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e \u0421\u0430\u0442\u0443\u0440\u043d\u0430\" }\n];\n\nfunction updateScale() {\n const slider = document.getElementById('scaleSlider');\n const value = parseInt(slider.value);\n const scale = scaleData[value] || scaleData[4];\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\n document.getElementById('scaleTitle').textContent = `\u041c\u0430\u0441\u0448\u0442\u0430\u0431: ${scale.name}`;\n document.getElementById('scaleDescription').textContent = scale.desc;\n document.getElementById('scaleComparison').textContent = scale.comp;\n document.getElementById('scaleValue').textContent = scale.value;\n document.getElementById('scaleScientific').textContent = scale.sciValue;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0440\u0443\u0433\n const circle = document.getElementById('scaleCircle');\n const power = scale.power;\n const size = 200 + (power * 8); \/\/ \u0411\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\n const fontSize = 1.5 + (Math.abs(power) * 0.08); \/\/ \u0411\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430\n \n circle.style.width = `${Math.max(100, Math.min(300, size))}px`;\n circle.style.height = `${Math.max(100, Math.min(300, size))}px`;\n circle.style.fontSize = `${Math.max(1, Math.min(2.2, fontSize))}rem`;\n circle.textContent = scale.value;\n \n \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\n if (power < -6) {\n circle.style.background = 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)';\n } else if (power < 0) {\n circle.style.background = 'linear-gradient(135deg, #1abc9c 0%, #2ecc71 100%)';\n } else if (power === 0) {\n circle.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';\n } else if (power <= 6) {\n circle.style.background = 'linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%)';\n } else {\n circle.style.background = 'linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%)';\n }\n}\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a\nfunction showDetail(type) {\n const details = {\n 'quantum': {\n title: \"\u041a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\",\n content: \"\u041f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u0434\u043b\u0438\u043d\u0430 (~1.616\u00d710\u207b\u00b3\u2075 \u043c) \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0433\u0440\u0430\u0432\u0438\u0442\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u043c\u0438. \u042d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u0430\u044f \u0434\u043b\u0438\u043d\u0430 \u0432 \u0444\u0438\u0437\u0438\u043a\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0413\u0435\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433\u0430. \u041d\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u0445 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u043e\u0439 \u0434\u043b\u0438\u043d\u044b \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e-\u0432\u0440\u0435\u043c\u044f \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0433\u043b\u0430\u0434\u043a\u043e\u0441\u0442\u044c \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u043e\u0439 \u043f\u0435\u043d\u043e\u0439.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: Physical Review Letters, Vol. 106, 101101 (2018)\"\n },\n 'space': {\n title: \"\u041a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f\",\n content: \"1 \u043f\u0430\u0440\u0441\u0435\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441 \u0437\u0435\u043c\u043d\u043e\u0439 \u043e\u0440\u0431\u0438\u0442\u044b \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u0434 \u0443\u0433\u043b\u043e\u043c \u0432 1 \u0443\u0433\u043b\u043e\u0432\u0443\u044e \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0437\u0432\u0435\u0437\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0411\u043b\u0438\u0436\u0430\u0439\u0448\u0430\u044f \u0437\u0432\u0435\u0437\u0434\u0430 \u043a \u0421\u043e\u043b\u043d\u0446\u0443, \u041f\u0440\u043e\u043a\u0441\u0438\u043c\u0430 \u0426\u0435\u043d\u0442\u0430\u0432\u0440\u0430, \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 1.3 \u043f\u0430\u0440\u0441\u0435\u043a\u0430. \u0421\u0430\u043c\u044b\u0435 \u0434\u0430\u043b\u0435\u043a\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u0445 \u0432 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u044b \u043f\u0430\u0440\u0441\u0435\u043a\u043e\u0432.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: \u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0439 \u0430\u0441\u0442\u0440\u043e\u043d\u043e\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043e\u044e\u0437 (IAU), NASA Astrophysics\"\n },\n 'biology': {\n title: \"\u0411\u0438\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u044b\",\n content: \"\u0414\u0438\u0430\u043c\u0435\u0442\u0440 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 \u0414\u041d\u041a \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 2 \u043d\u0430\u043d\u043e\u043c\u0435\u0442\u0440\u0430, \u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u0440\u0430\u043c\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u2014 0.34 \u043d\u043c. \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u043e\u043b\u043e\u0441 \u0438\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 100 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432 (0.1 \u043c\u043c). \u041a\u0440\u0430\u0441\u043d\u044b\u0435 \u043a\u0440\u043e\u0432\u044f\u043d\u044b\u0435 \u043a\u043b\u0435\u0442\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u043e\u043a\u043e\u043b\u043e 7-8 \u043c\u0438\u043a\u0440\u043e\u043c\u0435\u0442\u0440\u043e\u0432. \u042d\u0442\u0438 \u0442\u043e\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u0447\u0435\u043d\u044b\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0436\u0438\u0432\u044b\u0445 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u043d\u0430 \u043c\u043e\u043b\u0435\u043a\u0443\u043b\u044f\u0440\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.\",\n source: \"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: Nature, Vol. 171, 737-738 (1953) - \u041e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0414\u041d\u041a\"\n }\n };\n \n const detail = details[type];\n if (detail) {\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e\n const modal = document.createElement('div');\n modal.style.cssText = `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n `;\n \n modal.innerHTML = `\n <div style=\"\n background: white;\n padding: 40px;\n border-radius: 20px;\n max-width: 600px;\n width: 100%;\n position: relative;\n animation: fadeIn 0.3s ease;\n max-height: 80vh;\n overflow-y: auto;\n \">\n <button onclick=\"this.parentElement.parentElement.remove()\" style=\"\n position: absolute;\n top: 20px;\n right: 20px;\n background: transparent;\n border: none;\n font-size: 1.5rem;\n color: #5d6d7e;\n cursor: pointer;\n z-index: 10001;\n \">×<\/button>\n \n <div style=\"\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n \">\n <div style=\"\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 1.8rem;\n \">\n <i class=\"fas fa-info-circle\"><\/i>\n <\/div>\n <h3 style=\"color: #2c3e50; margin: 0; font-size: 1.5rem;\">${detail.title}<\/h3>\n <\/div>\n \n <p style=\"color: #5d6d7e; line-height: 1.7; margin-bottom: 25px;\">\n ${detail.content}\n <\/p>\n \n <div style=\"\n background: #f8f9ff;\n padding: 15px;\n border-radius: 10px;\n border-left: 4px solid #667eea;\n margin-bottom: 25px;\n \">\n <p style=\"color: #667eea; margin: 0; font-size: 0.9rem; line-height: 1.5;\">\n <i class=\"fas fa-graduation-cap\"><\/i> ${detail.source}\n <\/p>\n <\/div>\n \n <div style=\"text-align: right;\">\n <button onclick=\"this.parentElement.parentElement.remove()\" style=\"\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n padding: 12px 30px;\n border-radius: 15px;\n cursor: pointer;\n font-weight: 600;\n transition: transform 0.3s;\n \" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n \u041f\u043e\u043d\u044f\u0442\u043d\u043e\n <\/button>\n <\/div>\n <\/div>\n `;\n \n document.body.appendChild(modal);\n \n \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\n const modalContent = modal.querySelector('div');\n modalContent.style.opacity = '0';\n modalContent.style.transform = 'translateY(-20px)';\n \n setTimeout(() => {\n modalContent.style.opacity = '1';\n modalContent.style.transform = 'translateY(0)';\n modalContent.style.transition = 'all 0.3s ease';\n }, 10);\n \n \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0444\u043e\u043d\n modal.addEventListener('click', function(e) {\n if (e.target === modal) {\n modal.remove();\n }\n });\n }\n}\n\n\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0432\u0438\u0437\u0430\nlet quizScore = 0;\n\nfunction checkQuizAnswer(question, answer) {\n const correctAnswer = 'b'; \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0434\u043b\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u0430 1\n \n \/\/ \u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430\n const buttons = document.querySelectorAll(`#question${question} button`);\n \n if (answer === correctAnswer) {\n \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442\n quizScore = 1;\n buttons.forEach(btn => {\n if (btn.textContent.includes(answer.toUpperCase())) {\n btn.style.background = '#27ae60';\n btn.style.color = 'white';\n btn.style.borderColor = '#27ae60';\n }\n });\n \n \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0447\u0435\u0440\u0435\u0437 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443\n setTimeout(() => {\n document.getElementById('question1').style.display = 'none';\n document.getElementById('quizResult').style.display = 'block';\n document.getElementById('score').textContent = quizScore;\n }, 1000);\n } else {\n \/\/ \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442\n buttons.forEach(btn => {\n if (btn.textContent.includes(answer.toUpperCase())) {\n btn.style.background = '#e74c3c';\n btn.style.color = 'white';\n btn.style.borderColor = '#e74c3c';\n }\n if (btn.textContent.includes(correctAnswer.toUpperCase())) {\n btn.style.background = '#27ae60';\n btn.style.color = 'white';\n btn.style.borderColor = '#27ae60';\n }\n });\n }\n}\n\nfunction resetQuiz() {\n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u0432\u0438\u0437\n quizScore = 0;\n document.getElementById('question1').style.display = 'block';\n document.getElementById('quizResult').style.display = 'none';\n \n \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043e\u043a\n const buttons = document.querySelectorAll('#question1 button');\n buttons.forEach(btn => {\n btn.style.background = 'white';\n btn.style.color = '#2c3e50';\n btn.style.borderColor = '#e0e0e0';\n });\n}\n\n\/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n \n @keyframes slideIn {\n from { transform: translateX(-20px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n }\n \n .science-card:hover {\n animation: pulse 0.5s ease;\n }\n \n .timeline-dot {\n animation: float 3s ease-in-out infinite;\n }\n \n .stat-card {\n animation: slideIn 0.5s ease-out;\n }\n \n .stat-card:nth-child(1) { animation-delay: 0.1s; }\n .stat-card:nth-child(2) { animation-delay: 0.2s; }\n .stat-card:nth-child(3) { animation-delay: 0.3s; }\n \n \/* \u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430 *\/\n input[type=\"range\"] {\n -webkit-appearance: none;\n height: 10px;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 25px;\n height: 25px;\n background: #667eea;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);\n transition: all 0.2s;\n }\n \n input[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n background: #764ba2;\n }\n \n input[type=\"range\"]::-moz-range-thumb {\n width: 25px;\n height: 25px;\n background: #667eea;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);\n }\n \n \/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a *\/\n a {\n transition: all 0.3s;\n }\n \n a:hover {\n text-decoration: underline !important;\n }\n \n \/* \u0410\u0414\u0410\u041f\u0422\u0418\u0412\u041d\u041e\u0421\u0422\u042c - \u041a\u0420\u0418\u0422\u0418\u0427\u0415\u0421\u041a\u0418 \u0412\u0410\u0416\u041d\u042b\u0415 \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u0418\u042f *\/\n @media (max-width: 1024px) {\n .scale-controls {\n grid-template-columns: 1fr !important;\n gap: 30px !important;\n }\n \n .scale-visual {\n order: -1;\n margin-bottom: 20px;\n }\n \n #scaleCircle {\n width: 150px !important;\n height: 150px !important;\n font-size: 1.2rem !important;\n }\n }\n \n @media (max-width: 768px) {\n .science-hub {\n margin: 40px auto !important;\n padding: 40px 0 !important;\n border-radius: 20px !important;\n }\n \n .main-header h2 {\n font-size: 2rem !important;\n }\n \n .scale-explorer,\n .history-timeline,\n .interactive-quiz,\n .data-interactive {\n padding: 25px !important;\n }\n \n .comparison-items {\n flex-direction: column !important;\n align-items: center !important;\n gap: 30px !important;\n height: auto !important;\n }\n \n .comparison-item {\n width: 80% !important;\n max-width: 300px !important;\n min-width: 200px !important;\n flex: 1 1 auto !important;\n }\n \n .comparison-item div:first-child {\n max-width: 100% !important;\n }\n \n .theme-toggle {\n flex-direction: column !important;\n width: 100% !important;\n max-width: 300px !important;\n }\n \n .theme-toggle button {\n width: 100% !important;\n }\n \n .science-cards {\n grid-template-columns: 1fr !important;\n gap: 20px !important;\n }\n \n .quiz-question div {\n grid-template-columns: 1fr !important;\n }\n \n .timeline-container {\n padding-left: 0 !important;\n }\n \n .timeline-item {\n padding-left: 0 !important;\n margin: 30px 0 !important;\n }\n \n .timeline-item > div:first-child {\n display: none !important;\n }\n \n .timeline-container > div:first-child {\n display: none !important;\n }\n }\n \n @media (max-width: 480px) {\n .main-header h2 {\n font-size: 1.8rem !important;\n }\n \n .scale-explorer h3,\n .history-timeline h3,\n .interactive-quiz h3 {\n font-size: 1.5rem !important;\n }\n \n .scale-info {\n padding: 20px !important;\n }\n \n .data-interactive {\n padding: 20px !important;\n }\n \n .stat-card {\n padding: 15px !important;\n }\n \n .hub-footer > div {\n gap: 15px !important;\n }\n \n .scale-slider-labels span {\n font-size: 0.7rem !important;\n }\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0442\u0435\u0441\u0442\u0435 *\/\n .quiz-question button {\n color: #2c3e50 !important;\n font-weight: 500 !important;\n }\n \n .quiz-question button:hover {\n background: #f8f9ff !important;\n border-color: #667eea !important;\n }\n \n \/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0448\u043a\u0430\u043b\u044b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n .comparison-scale {\n overflow-x: auto !important;\n -webkit-overflow-scrolling: touch !important;\n }\n \n .comparison-items {\n min-width: 500px !important;\n }\n \n @media (max-width: 768px) {\n .comparison-items {\n min-width: 100% !important;\n flex-wrap: nowrap !important;\n overflow-x: auto !important;\n padding-bottom: 10px !important;\n justify-content: flex-start !important;\n }\n \n .comparison-item {\n flex: 0 0 auto !important;\n width: 120px !important;\n margin-bottom: 0 !important;\n margin-right: 15px !important;\n }\n }\n`;\ndocument.head.appendChild(style);\n\n\/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0442\u0435\u043c\u0443\nswitchTheme('scale');\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043c\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u043c\u0438 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c\u0438 \u0434\u043b\u0438\u043d\u044b \u0441 \u043d\u0430\u0443\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0434\u043b\u0438\u043d\u044b \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: # \u0418\u0417 \u041c\u0435\u0442\u0440\u044b (m)\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)\u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)\u0414\u044e\u0439\u043c\u044b (in)\u0424\u0443\u0442\u044b (ft)\u042f\u0440\u0434\u044b (yd)\u041c\u0438\u043b\u0438 (mi) \u0412 \u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b (cm)\u041c\u0435\u0442\u0440\u044b (m)\u041a\u0438\u043b\u043e\u043c\u0435\u0442\u0440\u044b (km)\u041c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b (mm)\u0414\u044e\u0439\u043c\u044b (in)\u0424\u0443\u0442\u044b (ft)\u042f\u0440\u0434\u044b (yd)\u041c\u0438\u043b\u0438 (mi) 100 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u043e\u0432 100 \u0421\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440\u044b 39.37 \u0414\u044e\u0439\u043c\u044b 3.28 \u0424\u0443\u0442\u044b 1.09 \u042f\u0440\u0434\u044b \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-71","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=71"}],"version-history":[{"count":56,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71\/revisions"}],"predecessor-version":[{"id":264,"href":"http:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/71\/revisions\/264"}],"wp:attachment":[{"href":"http:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}