{"id":251,"date":"2025-12-30T03:30:57","date_gmt":"2025-12-30T00:30:57","guid":{"rendered":"https:\/\/gestro.ru\/?page_id=251"},"modified":"2026-01-16T02:36:28","modified_gmt":"2026-01-15T23:36:28","slug":"%d0%be%d0%b1%d1%8a%d0%b5%d0%bc","status":"publish","type":"page","link":"https:\/\/gestro.ru\/?page_id=251","title":{"rendered":"\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043c\u0430"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\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 \u043e\u0431\u044a\u0435\u043c\u0430<\/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, #36D1DC 0%, #5B86E5 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: #36D1DC;\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: #36D1DC;\n            background: white;\n            box-shadow: 0 5px 20px rgba(54, 209, 220, 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: #36D1DC;\n            font-size: 1.3rem;\n            font-weight: bold;\n        }\n        \n        \/* \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, #36D1DC 0%, #5B86E5 100%);\n        }\n        \n        .unit-hint-to {\n            bottom: -10px;\n            right: 10px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 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: #36D1DC;\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, #36D1DC 0%, #5B86E5 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(54, 209, 220, 0.4);\n        }\n        \n        .result-display {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 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(102, 126, 234, 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: #36D1DC;\n            transform: translateY(-5px);\n            box-shadow: 0 10px 20px rgba(54, 209, 220, 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: #36D1DC;\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 #36D1DC;\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: #36D1DC;\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, #36D1DC, #5B86E5);\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 #36D1DC;\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: #36D1DC;\n            border: 3px solid white;\n            box-shadow: 0 0 0 3px #36D1DC;\n        }\n        \n        .history-period {\n            font-weight: 700;\n            color: #36D1DC;\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: #36D1DC;\n            transform: translateY(-5px);\n        }\n        \n        .unit-card.active {\n            border-color: #36D1DC;\n            background: #e3f2fd;\n            box-shadow: 0 10px 20px rgba(54, 209, 220, 0.1);\n        }\n        \n        .unit-symbol {\n            font-size: 2rem;\n            font-weight: 700;\n            color: #36D1DC;\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, #36D1DC 0%, #5B86E5 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(54, 209, 220, 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 *\/\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            .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 #36D1DC;\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        <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a -->\n        <div class=\"header\">\n            <h1><i class=\"fas fa-tint\"><\/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 \u043e\u0431\u044a\u0435\u043c\u0430<\/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 \u043e\u0431\u044a\u0435\u043c\u0430 \u0441 \u043d\u0430\u0443\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n        <\/div>\n        \n        <!-- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 -->\n        <div class=\"main-grid\">\n            <!-- \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 -->\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 \u043e\u0431\u044a\u0435\u043c\u0430\n                <\/h2>\n                \n                <div class=\"converter-form\">\n                    <!-- \u0412\u0432\u043e\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f -->\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                    <!-- \u0412\u042b\u0411\u041e\u0420 \u0415\u0414\u0418\u041d\u0418\u0426 \u0421 \u041c\u0415\u0422\u041a\u0410\u041c\u0418 \"\u0418\u0417\" \u0438 \"\u0412\" -->\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=\"l\">\u041b\u0438\u0442\u0440 (L)<\/option>\n                                <option value=\"ml\">\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440 (mL)<\/option>\n                                <option value=\"m3\">\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u0440 (m\u00b3)<\/option>\n                                <option value=\"cm3\">\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440 (cm\u00b3)<\/option>\n                                <option value=\"gal_us\">\u0413\u0430\u043b\u043b\u043e\u043d US (gal)<\/option>\n                                <option value=\"gal_uk\">\u0413\u0430\u043b\u043b\u043e\u043d UK (gal)<\/option>\n                                <option value=\"cup_us\">\u0427\u0430\u0448\u043a\u0430 US (cup)<\/option>\n                                <option value=\"cup_uk\">\u0427\u0430\u0448\u043a\u0430 UK (cup)<\/option>\n                                <option value=\"pint_us\">\u041f\u0438\u043d\u0442\u0430 US (pt)<\/option>\n                                <option value=\"pint_uk\">\u041f\u0438\u043d\u0442\u0430 UK (pt)<\/option>\n                                <option value=\"quart_us\">\u041a\u0432\u0430\u0440\u0442\u0430 US (qt)<\/option>\n                                <option value=\"floz_us\">\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US (fl oz)<\/option>\n                                <option value=\"floz_uk\">\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 UK (fl oz)<\/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=\"ml\">\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440 (mL)<\/option>\n                                <option value=\"l\">\u041b\u0438\u0442\u0440 (L)<\/option>\n                                <option value=\"m3\">\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u0440 (m\u00b3)<\/option>\n                                <option value=\"gal_us\">\u0413\u0430\u043b\u043b\u043e\u043d US (gal)<\/option>\n                                <option value=\"gal_uk\">\u0413\u0430\u043b\u043b\u043e\u043d UK (gal)<\/option>\n                                <option value=\"cup_us\">\u0427\u0430\u0448\u043a\u0430 US (cup)<\/option>\n                                <option value=\"cup_uk\">\u0427\u0430\u0448\u043a\u0430 UK (cup)<\/option>\n                                <option value=\"pint_us\">\u041f\u0438\u043d\u0442\u0430 US (pt)<\/option>\n                                <option value=\"pint_uk\">\u041f\u0438\u043d\u0442\u0430 UK (pt)<\/option>\n                                <option value=\"quart_us\">\u041a\u0432\u0430\u0440\u0442\u0430 US (qt)<\/option>\n                                <option value=\"floz_us\">\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US (fl oz)<\/option>\n                                <option value=\"floz_uk\">\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 UK (fl oz)<\/option>\n                                <option value=\"cm3\">\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440 (cm\u00b3)<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 -->\n                    <div class=\"result-display\">\n                        <div id=\"resultValue\" class=\"result-value\">1000<\/div>\n                        <div id=\"resultUnit\" class=\"result-unit\">\u043c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440\u043e\u0432<\/div>\n                    <\/div>\n                    \n                    <!-- \u0411\u044b\u0441\u0442\u0440\u044b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 -->\n                    <div class=\"quick-conversions\">\n                        <div class=\"quick-conversion-item\" data-to=\"ml\">\n                            <div class=\"quick-value\" id=\"quickMl\">1000<\/div>\n                            <div class=\"quick-unit\">\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440\u044b<\/div>\n                        <\/div>\n                        <div class=\"quick-conversion-item\" data-to=\"gal_us\">\n                            <div class=\"quick-value\" id=\"quickGal\">0.264<\/div>\n                            <div class=\"quick-unit\">\u0413\u0430\u043b\u043b\u043e\u043d\u044b US<\/div>\n                        <\/div>\n                        <div class=\"quick-conversion-item\" data-to=\"cup_us\">\n                            <div class=\"quick-value\" id=\"quickCup\">4.227<\/div>\n                            <div class=\"quick-unit\">\u0427\u0430\u0448\u043a\u0438 US<\/div>\n                        <\/div>\n                        <div class=\"quick-conversion-item\" data-to=\"pint_us\">\n                            <div class=\"quick-value\" id=\"quickPint\">2.113<\/div>\n                            <div class=\"quick-unit\">\u041f\u0438\u043d\u0442\u044b US<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f -->\n                <div class=\"visualization\">\n                    <h3 style=\"color: #2c3e50; margin-bottom: 20px;\">\n                        <i class=\"fas fa-chart-bar\"><\/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 \u043b<\/span>\n                    <\/div>\n                    \n                    <div class=\"comparison-items\">\n                        <div class=\"comparison-item\">\n                            <div class=\"comparison-icon\">\n                                <i class=\"fas fa-wine-bottle\"><\/i>\n                            <\/div>\n                            <div class=\"comparison-value\" id=\"comparison1\">\u2248 1 \u0431\u0443\u0442\u044b\u043b\u043a\u0430<\/div>\n                            <div>750 \u043c\u043b<\/div>\n                        <\/div>\n                        <div class=\"comparison-item\">\n                            <div class=\"comparison-icon\">\n                                <i class=\"fas fa-beer\"><\/i>\n                            <\/div>\n                            <div class=\"comparison-value\" id=\"comparison2\">\u2248 2.8 \u0431\u0430\u043d\u043e\u043a<\/div>\n                            <div>\u041f\u0438\u0432\u043e (0.355 \u043b)<\/div>\n                        <\/div>\n                        <div class=\"comparison-item\">\n                            <div class=\"comparison-icon\">\n                                <i class=\"fas fa-bath\"><\/i>\n                            <\/div>\n                            <div class=\"comparison-value\" id=\"comparison3\">\u2248 0.004 \u0432\u0430\u043d\u043d\u044b<\/div>\n                            <div>\u041e\u0431\u044a\u0435\u043c \u0432\u0430\u043d\u043d\u044b<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u041a\u043d\u043e\u043f\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 -->\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                <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 -->\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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <!-- \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u043a\u0430 -->\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 \u043e\u0431\u044a\u0435\u043c\u0430\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> \u041f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0435\u0440\u044b \u043e\u0431\u044a\u0435\u043c\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0432 \u0414\u0440\u0435\u0432\u043d\u0435\u043c \u0415\u0433\u0438\u043f\u0442\u0435 \u0438 \u041c\u0435\u0441\u043e\u043f\u043e\u0442\u0430\u043c\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0437\u0435\u0440\u043d\u0430 \u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0435\u0439. \u041b\u0438\u0442\u0440 \u0431\u044b\u043b \u0432\u0432\u0435\u0434\u0435\u043d \u0432\u043e \u0424\u0440\u0430\u043d\u0446\u0438\u0438 \u0432 1795 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0438\u043b\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0432\u043e\u0434\u044b.<\/p>\n                <\/div>\n                \n                <!-- \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b -->\n                <div class=\"units-grid\">\n                    <div class=\"unit-card\" data-unit=\"vedro\">\n                        <div class=\"unit-symbol\">\u0412<\/div>\n                        <div class=\"unit-name\">\u0412\u0435\u0434\u0440\u043e<\/div>\n                        <div class=\"unit-value\">\u2248 12.3 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"shtof\">\n                        <div class=\"unit-symbol\">\u0428<\/div>\n                        <div class=\"unit-name\">\u0428\u0442\u043e\u0444<\/div>\n                        <div class=\"unit-value\">\u2248 1.23 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"chetvert\">\n                        <div class=\"unit-symbol\">\u0427<\/div>\n                        <div class=\"unit-name\">\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u044c<\/div>\n                        <div class=\"unit-value\">\u2248 3.075 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"charka\">\n                                                <div class=\"unit-symbol\">\u0427<\/div>\n                        <div class=\"unit-name\">\u0427\u0430\u0440\u043a\u0430<\/div>\n                        <div class=\"unit-value\">\u2248 0.123 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"bottle\">\n                        <div class=\"unit-symbol\">\u0411<\/div>\n                        <div class=\"unit-name\">\u0411\u0443\u0442\u044b\u043b\u043a\u0430<\/div>\n                        <div class=\"unit-value\">\u2248 0.615 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"kruzhka\">\n                        <div class=\"unit-symbol\">\u041a<\/div>\n                        <div class=\"unit-name\">\u041a\u0440\u0443\u0436\u043a\u0430<\/div>\n                        <div class=\"unit-value\">\u2248 1.23 \u043b<\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0448\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 -->\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 (~2500 \u0434\u043e \u043d.\u044d.)<\/div>\n                        <div class=\"history-description\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 &#171;\u0445\u0435\u043a\u0430\u0442&#187; (\u043e\u043a\u043e\u043b\u043e 4.8 \u043b\u0438\u0442\u0440\u0430) \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0437\u0435\u0440\u043d\u0430 \u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0435\u0439. &#171;\u0425\u0438\u043d&#187; (\u043e\u043a\u043e\u043b\u043e 0.48 \u043b) \u0434\u043b\u044f \u0432\u0438\u043d\u0430 \u0438 \u043c\u0430\u0441\u043b\u0430.<\/div>\n                    <\/div>\n                    <div class=\"history-item\">\n                        <div class=\"history-period\">\u0414\u0440\u0435\u0432\u043d\u0438\u0439 \u0420\u0438\u043c (I \u0432\u0435\u043a \u0434\u043e \u043d.\u044d.)<\/div>\n                        <div class=\"history-description\">&#171;\u0410\u043c\u0444\u043e\u0440\u0430&#187; (\u043e\u043a\u043e\u043b\u043e 26 \u043b) \u0434\u043b\u044f \u0432\u0438\u043d\u0430 \u0438 \u043c\u0430\u0441\u043b\u0430. &#171;\u0421\u0435\u043a\u0441\u0442\u0430\u0440\u0438\u0439&#187; (\u043e\u043a\u043e\u043b\u043e 0.55 \u043b) &#8212; \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0431\u044b\u0442\u043e\u0432\u0430\u044f \u043c\u0435\u0440\u0430.<\/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 (X-XV \u0432\u0432.)<\/div>\n                        <div class=\"history-description\">\u0412\u0435\u0434\u0440\u043e (12.3 \u043b), \u0448\u0442\u043e\u0444 (1.23 \u043b), \u0447\u0430\u0440\u043a\u0430 (0.123 \u043b). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0442\u043e\u0440\u0433\u043e\u0432\u043b\u0438 \u0432\u0438\u043d\u043e\u043c \u0438 \u043c\u0435\u0434\u043e\u043c.<\/div>\n                    <\/div>\n                    <div class=\"history-item\">\n                        <div class=\"history-period\">1707 \u0433\u043e\u0434 &#8212; \u0411\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/div>\n                        <div class=\"history-description\">\u0410\u043d\u0433\u043b\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u0435 \u0433\u0430\u043b\u043b\u043e\u043d (4.546 \u043b) \u0438 \u043f\u0438\u043d\u0442\u0443 (0.568 \u043b) \u043a\u0430\u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0435\u0440\u044b.<\/div>\n                    <\/div>\n                    <div class=\"history-item\">\n                        <div class=\"history-period\">1795 \u0433\u043e\u0434 &#8212; \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 \u043b\u0438\u0442\u0440 \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043c 1 \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440\u0430 (0.001 \u043c\u00b3) \u043f\u0440\u0438 \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0435 4\u00b0C.<\/div>\n                    <\/div>\n                    <div class=\"history-item\">\n                        <div class=\"history-period\">1964 \u0433\u043e\u0434 &#8212; \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0442\u0440\u0430<\/div>\n                        <div class=\"history-description\">\u041b\u0438\u0442\u0440 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043a\u0430\u043a \u0442\u043e\u0447\u043d\u043e 1 \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0435\u0446\u0438\u043c\u0435\u0442\u0440, \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u044b \u0432\u043e\u0434\u044b.<\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u0424\u043e\u0440\u043c\u0443\u043b\u044b -->\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 \u043b\u0438\u0442\u0440 = 1000 \u043c\u043b = 1000 \u0441\u043c\u00b3<br>\n                    1 \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u0440 = 1000 \u043b\u0438\u0442\u0440\u043e\u0432<br>\n                    1 \u0433\u0430\u043b\u043b\u043e\u043d US = 3.78541 \u043b\u0438\u0442\u0440\u0430<br>\n                    1 \u0433\u0430\u043b\u043b\u043e\u043d UK = 4.54609 \u043b\u0438\u0442\u0440\u0430<br>\n                    1 \u043f\u0438\u043d\u0442\u0430 US = 0.473176 \u043b\u0438\u0442\u0440\u0430<br>\n                    1 \u043f\u0438\u043d\u0442\u0430 UK = 0.568261 \u043b\u0438\u0442\u0440\u0430<br>\n                    1 \u0447\u0430\u0448\u043a\u0430 US = 0.236588 \u043b\u0438\u0442\u0440\u0430<br>\n                    1 \u0443\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US = 29.5735 \u043c\u043b\n                <\/div>\n                \n                <!-- \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f -->\n                <h3 style=\"color: #2c3e50; margin: 30px 0 20px;\">\n                    <i class=\"fas fa-flask\"><\/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=\"m3\">\n                        <div class=\"unit-symbol\">m\u00b3<\/div>\n                        <div class=\"unit-name\">\u041a\u0443\u0431. \u043c\u0435\u0442\u0440<\/div>\n                        <div class=\"unit-value\">1000 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"l\">\n                        <div class=\"unit-symbol\">L<\/div>\n                        <div class=\"unit-name\">\u041b\u0438\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=\"dl\">\n                        <div class=\"unit-symbol\">dL<\/div>\n                        <div class=\"unit-name\">\u0414\u0435\u0446\u0438\u043b\u0438\u0442\u0440<\/div>\n                        <div class=\"unit-value\">0.1 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"cl\">\n                        <div class=\"unit-symbol\">cL<\/div>\n                        <div class=\"unit-name\">\u0421\u0430\u043d\u0442\u0438\u043b\u0438\u0442\u0440<\/div>\n                        <div class=\"unit-value\">0.01 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"ml\">\n                        <div class=\"unit-symbol\">mL<\/div>\n                        <div class=\"unit-name\">\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440<\/div>\n                        <div class=\"unit-value\">0.001 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"\u00b5l\">\n                        <div class=\"unit-symbol\">\u00b5L<\/div>\n                        <div class=\"unit-name\">\u041c\u0438\u043a\u0440\u043e\u043b\u0438\u0442\u0440<\/div>\n                        <div class=\"unit-value\">10\u207b\u2076 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"gal_us\">\n                        <div class=\"unit-symbol\">gal US<\/div>\n                        <div class=\"unit-name\">\u0413\u0430\u043b\u043b\u043e\u043d US<\/div>\n                        <div class=\"unit-value\">3.78541 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"gal_uk\">\n                        <div class=\"unit-symbol\">gal UK<\/div>\n                        <div class=\"unit-name\">\u0413\u0430\u043b\u043b\u043e\u043d UK<\/div>\n                        <div class=\"unit-value\">4.54609 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"quart_us\">\n                        <div class=\"unit-symbol\">qt US<\/div>\n                        <div class=\"unit-name\">\u041a\u0432\u0430\u0440\u0442\u0430 US<\/div>\n                        <div class=\"unit-value\">0.946353 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"pint_us\">\n                        <div class=\"unit-symbol\">pt US<\/div>\n                        <div class=\"unit-name\">\u041f\u0438\u043d\u0442\u0430 US<\/div>\n                        <div class=\"unit-value\">0.473176 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"pint_uk\">\n                        <div class=\"unit-symbol\">pt UK<\/div>\n                        <div class=\"unit-name\">\u041f\u0438\u043d\u0442\u0430 UK<\/div>\n                        <div class=\"unit-value\">0.568261 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"cup_us\">\n                        <div class=\"unit-symbol\">cup US<\/div>\n                        <div class=\"unit-name\">\u0427\u0430\u0448\u043a\u0430 US<\/div>\n                        <div class=\"unit-value\">0.236588 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"cup_uk\">\n                        <div class=\"unit-symbol\">cup UK<\/div>\n                        <div class=\"unit-name\">\u0427\u0430\u0448\u043a\u0430 UK<\/div>\n                        <div class=\"unit-value\">0.284131 \u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"floz_us\">\n                        <div class=\"unit-symbol\">fl oz US<\/div>\n                        <div class=\"unit-name\">\u0423\u043d\u0446\u0438\u044f US<\/div>\n                        <div class=\"unit-value\">29.5735 \u043c\u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"floz_uk\">\n                        <div class=\"unit-symbol\">fl oz UK<\/div>\n                        <div class=\"unit-name\">\u0423\u043d\u0446\u0438\u044f UK<\/div>\n                        <div class=\"unit-value\">28.4131 \u043c\u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"tbsp\">\n                        <div class=\"unit-symbol\">tbsp<\/div>\n                        <div class=\"unit-name\">\u0421\u0442\u043e\u043b\u043e\u0432\u0430\u044f \u043b\u043e\u0436\u043a\u0430<\/div>\n                        <div class=\"unit-value\">14.7868 \u043c\u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"tsp\">\n                        <div class=\"unit-symbol\">tsp<\/div>\n                        <div class=\"unit-name\">\u0427\u0430\u0439\u043d\u0430\u044f \u043b\u043e\u0436\u043a\u0430<\/div>\n                        <div class=\"unit-value\">4.92892 \u043c\u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"drop\">\n                        <div class=\"unit-symbol\">drop<\/div>\n                        <div class=\"unit-name\">\u041a\u0430\u043f\u043b\u044f<\/div>\n                        <div class=\"unit-value\">0.05 \u043c\u043b<\/div>\n                    <\/div>\n                    <div class=\"unit-card\" data-unit=\"barrel\">\n                        <div class=\"unit-symbol\">bbl<\/div>\n                        <div class=\"unit-name\">\u0411\u0430\u0440\u0440\u0435\u043b\u044c \u043d\u0435\u0444\u0442\u0438<\/div>\n                        <div class=\"unit-value\">158.987 \u043b<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- \u0424\u0443\u0442\u0435\u0440 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0434\u0430\u0442\u043e\u0439 -->\n    <div class=\"footer\">\n        <p>\u00a9 <span id=\"currentYear\"><\/span> \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 \u043e\u0431\u044a\u0435\u043c\u0430 | \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\u0410\u041b\u042c\u041a\u0423\u041b\u042f\u0422\u041e\u0420 \u041e\u0411\u042a\u0415\u041c\u0410 \u041d\u0410\u0427\u0418\u041d\u0410\u0415\u0422 \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0423 ===');\n    \n    \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0432 \u0444\u0443\u0442\u0435\u0440\u0435\n    document.getElementById('currentYear').textContent = new Date().getFullYear();\n    \n    let calculatorInitialized = false;\n    let calculatorElements = null;\n    \n    function initializeCalculator() {\n        if (calculatorInitialized) {\n            console.log('\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\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 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u043e\u0431\u044a\u0435\u043c\u0430...');\n        \n        try {\n            calculatorElements = initCalculator();\n            console.log('\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043c\u0430 \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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430:', error);\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;\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        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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u043e\u0431\u044a\u0435\u043c\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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 \u043e\u0431\u044a\u0435\u043c\u0430...');\n        calculatorInitialized = false;\n        initializeCalculator();\n        \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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430\nfunction initCalculator() {\n    console.log('\u0424\u0443\u043d\u043a\u0446\u0438\u044f initCalculator \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043c\u0430 \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 \u043b\u0438\u0442\u0440\u044b)\n    const factors = {\n        \/\/ \u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n        'm3': 1000,\n        'l': 1,\n        'dl': 0.1,\n        'cl': 0.01,\n        'ml': 0.001,\n        '\u00b5l': 0.000001,\n        'cm3': 0.001,\n        \n        \/\/ \u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n        'gal_us': 3.78541,\n        'quart_us': 0.946353,\n        'pint_us': 0.473176,\n        'cup_us': 0.236588,\n        'floz_us': 0.0295735,\n        'tbsp': 0.0147868,\n        'tsp': 0.00492892,\n        'drop': 0.00005,\n        \n        \/\/ \u0411\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n        'gal_uk': 4.54609,\n        'quart_uk': 1.13652,\n        'pint_uk': 0.568261,\n        'cup_uk': 0.284131,\n        'floz_uk': 0.0284131,\n        \n        \/\/ \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435\n        'barrel': 158.987,\n        \n        \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0443\u0441\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\n        'vedro': 12.3,\n        'shtof': 1.23,\n        'chetvert': 3.075,\n        'charka': 0.123,\n        'bottle': 0.615,\n        'kruzhka': 1.23\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        'l': ['\u043b\u0438\u0442\u0440', '\u043b\u0438\u0442\u0440\u0430', '\u043b\u0438\u0442\u0440\u043e\u0432'],\n        'ml': ['\u043c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440', '\u043c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440\u0430', '\u043c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440\u043e\u0432'],\n        'm3': ['\u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u0440', '\u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u0440\u0430', '\u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u0440\u043e\u0432'],\n        'gal_us': ['\u0433\u0430\u043b\u043b\u043e\u043d US', '\u0433\u0430\u043b\u043b\u043e\u043d\u0430 US', '\u0433\u0430\u043b\u043b\u043e\u043d\u043e\u0432 US'],\n        'gal_uk': ['\u0433\u0430\u043b\u043b\u043e\u043d UK', '\u0433\u0430\u043b\u043b\u043e\u043d\u0430 UK', '\u0433\u0430\u043b\u043b\u043e\u043d\u043e\u0432 UK'],\n        'cup_us': ['\u0447\u0430\u0448\u043a\u0430 US', '\u0447\u0430\u0448\u043a\u0438 US', '\u0447\u0430\u0448\u0435\u043a US'],\n        'pint_us': ['\u043f\u0438\u043d\u0442\u0430 US', '\u043f\u0438\u043d\u0442\u044b US', '\u043f\u0438\u043d\u0442 US'],\n        'quart_us': ['\u043a\u0432\u0430\u0440\u0442\u0430 US', '\u043a\u0432\u0430\u0440\u0442\u044b US', '\u043a\u0432\u0430\u0440\u0442 US'],\n        'floz_us': ['\u0443\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US', '\u0443\u043d\u0446\u0438\u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US', '\u0443\u043d\u0446\u0438\u0439 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US']\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 valueInLiters = value * factors[from];\n        return valueInLiters \/ 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\n    function getUnitForm(result, unitKey) {\n        if (!unitNames[unitKey]) return '';\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        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 \u043e\u0431\u044a\u0435\u043c\u0430: ' + 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 - \u0418\u0421\u041f\u0420\u0410\u0412\u041b\u0415\u041d\u041d\u0410\u042f \u0424\u0423\u041d\u041a\u0426\u0418\u042f\n    function updateQuickConversions(value, from) {\n        \/\/ \u0411\u0435\u0440\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0439\n        const quickUnits = [\n            { id: 'quickMl', unit: 'ml' },\n            { id: 'quickGal', unit: 'gal_us' },\n            { id: 'quickCup', unit: 'cup_us' },\n            { id: 'quickPint', unit: 'pint_us' }\n        ];\n        \n        quickUnits.forEach(item => {\n            const element = document.getElementById(item.id);\n            if (element) {\n                \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\n                const result = convert(value, from, item.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 valueInLiters = 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 \u043b\";\n            \n            if (valueInLiters < 0.001) {\n                maxValue = 0.001;\n                maxLabel = \"1 \u043c\u043b\";\n            } else if (valueInLiters < 0.01) {\n                maxValue = 0.01;\n                maxLabel = \"10 \u043c\u043b\";\n            } else if (valueInLiters < 0.1) {\n                maxValue = 0.1;\n                maxLabel = \"100 \u043c\u043b\";\n            } else if (valueInLiters < 1) {\n                maxValue = 1;\n                maxLabel = \"1 \u043b\";\n            } else if (valueInLiters < 10) {\n                maxValue = 10;\n                maxLabel = \"10 \u043b\";\n            } else if (valueInLiters < 100) {\n                maxValue = 100;\n                maxLabel = \"100 \u043b\";\n            } else {\n                maxValue = Math.ceil(valueInLiters \/ 100) * 100;\n                maxLabel = formatNumber(maxValue) + \" \u043b\";\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 = (valueInLiters \/ 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(valueInLiters);\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(valueInLiters) {\n        const comparisons = [\n            { id: 'comparison1', unit: 0.75, name: '\u0431\u0443\u0442\u044b\u043b\u043a\u0438' },\n            { id: 'comparison2', unit: 0.355, name: '\u0431\u0430\u043d\u043a\u0438' },\n            { id: 'comparison3', unit: 250, name: '\u0432\u0430\u043d\u043d' }\n        ];\n        \n        comparisons.forEach(comp => {\n            const element = document.getElementById(comp.id);\n            if (element) {\n                const count = valueInLiters \/ 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\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 === '\u0431\u0443\u0442\u044b\u043b\u043a') {\n                    if (Math.abs(absCount - 1) < 0.01) ending = '\u0430';\n                    else {\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 === '\u0431\u0430\u043d\u043a') {\n                    if (Math.abs(absCount - 1) < 0.01) ending = '\u0430';\n                    else {\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 === '\u0432\u0430\u043d\u043d') {\n                    if (Math.abs(absCount - 1) < 0.01) ending = '\u044b';\n                    else {\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 = '\u044b';\n                        } else {\n                            ending = '';\n                        }\n                    }\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 = 'l';\n            elements.toUnit.value = 'ml';\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\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\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    \/\/ \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438 \u0432\u0441\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b\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 \u0432\u0441\u0435\u0445 \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            \/\/ \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: #36D1DC; color: white; padding: 15px; border-radius: 10px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2);';\n            toast.textContent = formatNumber(value) + ' ' + (unitNames[from] ? unitNames[from][2] : from) + ' = ' + formatNumber(result) + ' ' + unit;\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\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<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0411\u0430\u0437\u0430 \u0437\u043d\u0430\u043d\u0438\u0439 \u043e \u043c\u0435\u0440\u0430\u0445 \u043e\u0431\u044a\u0435\u043c\u0430<\/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        .volume-resources {\n            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);\n            color: #333;\n            line-height: 1.6;\n            padding: 20px;\n            border-radius: 20px;\n            margin-top: 40px;\n            box-shadow: 0 10px 40px rgba(54, 209, 220, 0.1);\n        }\n        \n        .volume-header {\n            text-align: center;\n            margin-bottom: 50px;\n            padding: 40px 30px;\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            border-radius: 25px;\n            color: white;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .volume-header::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"2\" fill=\"white\" opacity=\"0.1\"\/><\/svg>');\n        }\n        \n        .volume-header h1 {\n            font-size: 2.8rem;\n            margin-bottom: 20px;\n            position: relative;\n            z-index: 1;\n        }\n        \n        .volume-header p {\n            font-size: 1.2rem;\n            opacity: 0.95;\n            max-width: 800px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 1;\n        }\n        \n        \/* \u041d\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 *\/\n        .volume-navigation {\n            display: flex;\n            justify-content: center;\n            gap: 15px;\n            margin-bottom: 40px;\n            flex-wrap: wrap;\n            background: white;\n            padding: 25px;\n            border-radius: 20px;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.06);\n        }\n        \n        .nav-category {\n            padding: 15px 30px;\n            background: #f8f9fa;\n            border: 2px solid transparent;\n            border-radius: 15px;\n            cursor: pointer;\n            font-weight: 600;\n            color: #2c3e50;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .nav-category::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n            transition: left 0.6s;\n        }\n        \n        .nav-category:hover::before {\n            left: 100%;\n        }\n        \n        .nav-category:hover {\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            color: white;\n            transform: translateY(-5px) scale(1.05);\n            border-color: transparent;\n            box-shadow: 0 10px 25px rgba(54, 209, 220, 0.2);\n        }\n        \n        .nav-category.active {\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            color: white;\n            border-color: transparent;\n            box-shadow: 0 8px 20px rgba(54, 209, 220, 0.25);\n        }\n        \n        .nav-icon {\n            font-size: 1.2rem;\n            transition: transform 0.3s;\n        }\n        \n        .nav-category:hover .nav-icon {\n            transform: rotate(15deg) scale(1.2);\n        }\n        \n        \/* \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430 *\/\n        .resources-accordion {\n            max-width: 1200px;\n            margin: 0 auto 50px;\n        }\n        \n        .accordion-item {\n            background: white;\n            border-radius: 20px;\n            margin-bottom: 20px;\n            overflow: hidden;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n            transition: all 0.3s;\n            border: 2px solid transparent;\n        }\n        \n        .accordion-item:hover {\n            border-color: #36D1DC;\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(54, 209, 220, 0.15);\n        }\n        \n        .accordion-header {\n            padding: 30px;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            cursor: pointer;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            transition: all 0.3s;\n        }\n        \n        .accordion-header:hover {\n            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n        }\n        \n        .resource-meta {\n            display: flex;\n            align-items: center;\n            gap: 20px;\n        }\n        \n        .resource-badge {\n            padding: 8px 16px;\n            background: #36D1DC;\n            color: white;\n            border-radius: 50px;\n            font-size: 0.8rem;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n        \n        .resource-title {\n            font-size: 1.4rem;\n            font-weight: 700;\n            color: #2c3e50;\n        }\n        \n        .accordion-toggle {\n            font-size: 1.5rem;\n            color: #36D1DC;\n            transition: transform 0.3s;\n        }\n        \n        .accordion-content {\n            padding: 0;\n            max-height: 0;\n            overflow: hidden;\n            transition: all 0.4s ease;\n        }\n        \n        .accordion-content.active {\n            padding: 30px;\n            max-height: 1000px;\n        }\n        \n        .resource-details {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 30px;\n            align-items: start;\n        }\n        \n        @media (max-width: 768px) {\n            .resource-details {\n                grid-template-columns: 1fr;\n            }\n        }\n        \n        .resource-description {\n            color: #555;\n            line-height: 1.7;\n            font-size: 1.05rem;\n        }\n        \n        .resource-stats {\n            background: #f8f9fa;\n            padding: 25px;\n            border-radius: 15px;\n            border-left: 4px solid #36D1DC;\n        }\n        \n        .stat-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 12px 0;\n            border-bottom: 1px solid #e0e0e0;\n        }\n        \n        .stat-item:last-child {\n            border-bottom: none;\n        }\n        \n        .stat-label {\n            color: #666;\n            font-weight: 500;\n        }\n        \n        .stat-value {\n            color: #2c3e50;\n            font-weight: 600;\n        }\n        \n        .resource-actions {\n            display: flex;\n            gap: 15px;\n            margin-top: 25px;\n            flex-wrap: wrap;\n        }\n        \n        .btn-explore {\n            padding: 14px 28px;\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            color: white;\n            border: none;\n            border-radius: 12px;\n            cursor: pointer;\n            font-weight: 600;\n            text-decoration: none;\n            transition: all 0.3s;\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            flex: 1;\n            min-width: 200px;\n            justify-content: center;\n        }\n        \n        .btn-explore:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 10px 25px rgba(54, 209, 220, 0.3);\n        }\n        \n        \/* \u0422\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 *\/\n        .spiral-timeline {\n            background: white;\n            border-radius: 25px;\n            padding: 40px;\n            margin-bottom: 50px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.08);\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .spiral-title {\n            text-align: center;\n            margin-bottom: 40px;\n            font-size: 2rem;\n            color: #2c3e50;\n            position: relative;\n            display: inline-block;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        \n        .spiral-title::after {\n            content: '';\n            position: absolute;\n            bottom: -10px;\n            left: 0;\n            width: 100%;\n            height: 4px;\n            background: linear-gradient(90deg, transparent, #36D1DC, transparent);\n        }\n        \n        .spiral-container {\n            position: relative;\n            height: 600px;\n            margin: 40px auto;\n            max-width: 800px;\n        }\n        \n        .spiral-path {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 80%;\n            height: 80%;\n            transform: translate(-50%, -50%);\n            border: 2px dashed rgba(54, 209, 220, 0.3);\n            border-radius: 50%;\n            animation: rotate 60s linear infinite;\n        }\n        \n        @keyframes rotate {\n            from { transform: translate(-50%, -50%) rotate(0deg); }\n            to { transform: translate(-50%, -50%) rotate(360deg); }\n        }\n        \n        .spiral-item {\n            position: absolute;\n            width: 200px;\n            padding: 20px;\n            background: white;\n            border-radius: 15px;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n            cursor: pointer;\n            transition: all 0.4s;\n            border: 2px solid transparent;\n        }\n        \n        .spiral-item:hover {\n            border-color: #36D1DC;\n            transform: scale(1.1);\n            box-shadow: 0 15px 35px rgba(54, 209, 220, 0.2);\n            z-index: 10;\n        }\n        \n        .spiral-year {\n            font-weight: 700;\n            color: #36D1DC;\n            margin-bottom: 8px;\n            font-size: 1.1rem;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        \n        \/* \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c *\/\n        .systems-map {\n            background: white;\n            border-radius: 25px;\n            padding: 40px;\n            margin-bottom: 50px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.08);\n        }\n        \n        .map-title {\n            text-align: center;\n            margin-bottom: 40px;\n            font-size: 2rem;\n            color: #2c3e50;\n        }\n        \n        .map-container {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 25px;\n        }\n        \n        .system-card {\n            background: #f8f9fa;\n            border-radius: 20px;\n            padding: 30px;\n            text-align: center;\n            transition: all 0.3s;\n            border: 2px solid transparent;\n            cursor: pointer;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .system-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 5px;\n            background: linear-gradient(90deg, #36D1DC, #5B86E5);\n            transform: scaleX(0);\n            transition: transform 0.3s;\n        }\n        \n        .system-card:hover::before {\n            transform: scaleX(1);\n        }\n        \n        .system-card:hover {\n            background: white;\n            border-color: #36D1DC;\n            transform: translateY(-10px);\n            box-shadow: 0 20px 40px rgba(54, 209, 220, 0.1);\n        }\n        \n        .system-icon {\n            font-size: 3.5rem;\n            margin-bottom: 20px;\n            color: #36D1DC;\n        }\n        \n        .system-name {\n            font-weight: 700;\n            color: #2c3e50;\n            margin-bottom: 15px;\n            font-size: 1.3rem;\n        }\n        \n        .system-stats {\n            display: flex;\n            justify-content: space-around;\n            margin-top: 20px;\n            padding-top: 20px;\n            border-top: 1px solid #e0e0e0;\n        }\n        \n        .stat {\n            text-align: center;\n        }\n        \n        .stat-number {\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: #36D1DC;\n            display: block;\n        }\n        \n        .stat-label {\n            font-size: 0.9rem;\n            color: #666;\n        }\n        \n        \/* \u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 *\/\n        .comparison-table {\n            background: white;\n            border-radius: 25px;\n            padding: 40px;\n            margin-bottom: 50px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.08);\n            overflow-x: auto;\n        }\n        \n        .table-title {\n            text-align: center;\n            margin-bottom: 40px;\n            font-size: 2rem;\n            color: #2c3e50;\n        }\n        \n        table {\n            width: 100%;\n            border-collapse: collapse;\n            margin: 0 auto;\n            min-width: 800px;\n        }\n        \n        th {\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            color: white;\n            padding: 20px;\n            text-align: left;\n            font-weight: 600;\n            position: sticky;\n            top: 0;\n        }\n        \n        td {\n            padding: 18px 20px;\n            border-bottom: 1px solid #e0e0e0;\n        }\n        \n        tr:hover {\n            background: #f0f9ff;\n        }\n        \n        .highlight {\n            background: #e3f2fd;\n            font-weight: 600;\n        }\n        \n        \/* \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440-\u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u0430 *\/\n        .mini-calculator {\n            background: white;\n            border-radius: 25px;\n            padding: 40px;\n            margin-bottom: 50px;\n            box-shadow: 0 15px 35px rgba(0,0,0,0.08);\n        }\n        \n        .calculator-title {\n            text-align: center;\n            margin-bottom: 40px;\n            font-size: 2rem;\n            color: #2c3e50;\n        }\n        \n        .calc-container {\n            max-width: 500px;\n            margin: 0 auto;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            padding: 30px;\n            border-radius: 20px;\n            border: 2px solid #e0e0e0;\n        }\n        \n        .calc-inputs {\n            display: grid;\n            grid-template-columns: 2fr 1fr;\n            gap: 15px;\n            margin-bottom: 20px;\n        }\n        \n        .calc-input {\n            padding: 15px;\n            border: 2px solid #ddd;\n            border-radius: 10px;\n            font-size: 1rem;\n        }\n        \n        .calc-input:focus {\n            outline: none;\n            border-color: #36D1DC;\n        }\n        \n        .calc-result {\n            text-align: center;\n            padding: 20px;\n            background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%);\n            color: white;\n            border-radius: 15px;\n            font-size: 1.8rem;\n            font-weight: 700;\n            margin-top: 20px;\n        }\n        \n        \/* \u0424\u0443\u0442\u0435\u0440 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c *\/\n        .volume-footer {\n            text-align: center;\n            padding: 40px;\n            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);\n            border-radius: 25px;\n            color: white;\n            margin-top: 30px;\n        }\n        \n        .footer-content {\n            max-width: 800px;\n            margin: 0 auto;\n        }\n        \n        .volume-footer p {\n            margin-bottom: 20px;\n            opacity: 0.9;\n            line-height: 1.6;\n        }\n        \n        .current-year {\n            font-weight: 700;\n            color: #36D1DC;\n        }\n        \n        .footer-links {\n            display: flex;\n            justify-content: center;\n            gap: 30px;\n            margin-top: 30px;\n            flex-wrap: wrap;\n        }\n        \n        .footer-link {\n            color: white;\n            text-decoration: none;\n            padding: 12px 24px;\n            border: 2px solid rgba(255,255,255,0.2);\n            border-radius: 50px;\n            transition: all 0.3s;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n        \n        .footer-link:hover {\n            background: #36D1DC;\n            border-color: #36D1DC;\n            transform: translateY(-3px);\n        }\n        \n        \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c *\/\n        @media (max-width: 992px) {\n            .volume-header h1 {\n                font-size: 2.2rem;\n            }\n            \n            .spiral-container {\n                height: 500px;\n            }\n            \n            .spiral-item {\n                width: 180px;\n            }\n        }\n        \n        @media (max-width: 768px) {\n            .volume-header {\n                padding: 30px 20px;\n            }\n            \n            .volume-header h1 {\n                font-size: 1.8rem;\n            }\n            \n            .volume-header p {\n                font-size: 1rem;\n            }\n            \n            .volume-navigation {\n                flex-direction: column;\n            }\n            \n            .nav-category {\n                width: 100%;\n                justify-content: center;\n            }\n            \n            .spiral-container {\n                height: 400px;\n            }\n            \n            .spiral-item {\n                width: 150px;\n                padding: 15px;\n            }\n            \n            .btn-explore {\n                width: 100%;\n                min-width: auto;\n            }\n            \n            .map-container {\n                grid-template-columns: 1fr;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .volume-resources {\n                padding: 15px;\n            }\n            \n            .volume-header {\n                padding: 25px 15px;\n            }\n            \n            .volume-header h1 {\n                font-size: 1.6rem;\n            }\n            \n            .accordion-header {\n                padding: 20px;\n                flex-direction: column;\n                gap: 15px;\n                text-align: center;\n            }\n            \n            .resource-meta {\n                flex-direction: column;\n                gap: 10px;\n            }\n            \n            .spiral-container {\n                height: 300px;\n            }\n            \n            .spiral-item {\n                width: 120px;\n                padding: 10px;\n                font-size: 0.9rem;\n            }\n            \n            .footer-links {\n                flex-direction: column;\n                align-items: center;\n            }\n        }\n        \n        \/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 *\/\n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        .fade-in-up {\n            animation: fadeInUp 0.6s ease forwards;\n        }\n        \n        .delay-1 { animation-delay: 0.1s; }\n        .delay-2 { animation-delay: 0.2s; }\n        .delay-3 { animation-delay: 0.3s; }\n        .delay-4 { animation-delay: 0.4s; }\n        .delay-5 { animation-delay: 0.5s; }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"volume-resources\">\n        <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441 \u0432\u043e\u043b\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c \u0444\u043e\u043d\u043e\u043c -->\n        <div class=\"volume-header\">\n            <h1><i class=\"fas fa-water\"><\/i> \u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u0438\u0440 \u043e\u0431\u044a\u0435\u043c\u043e\u0432<\/h1>\n            <p>\u0418\u0441\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u044e, \u043d\u0430\u0443\u043a\u0443 \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043c\u0430 \u0447\u0435\u0440\u0435\u0437 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/p>\n        <\/div>\n        \n        <!-- \u0418\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f -->\n        <div class=\"volume-navigation\">\n            <div class=\"nav-category active\" data-category=\"all\">\n                <i class=\"fas fa-compass nav-icon\"><\/i>\n                <span>\u0412\u0441\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/span>\n            <\/div>\n            <div class=\"nav-category\" data-category=\"science\">\n                <i class=\"fas fa-atom nav-icon\"><\/i>\n                <span>\u041d\u0430\u0443\u0447\u043d\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u044b<\/span>\n            <\/div>\n            <div class=\"nav-category\" data-category=\"history\">\n                <i class=\"fas fa-scroll nav-icon\"><\/i>\n                <span>\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439<\/span>\n            <\/div>\n            <div class=\"nav-category\" data-category=\"applications\">\n                <i class=\"fas fa-industry nav-icon\"><\/i>\n                <span>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435<\/span>\n            <\/div>\n            <div class=\"nav-category\" data-category=\"standards\">\n                <i class=\"fas fa-balance-scale nav-icon\"><\/i>\n                <span>\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b<\/span>\n            <\/div>\n        <\/div>\n        \n        <!-- \u0410\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d \u0441 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 -->\n        <div class=\"resources-accordion\">\n            <div class=\"accordion-item fade-in-up\" data-category=\"science standards\">\n                <div class=\"accordion-header\">\n                    <div class=\"resource-meta\">\n                        <span class=\"resource-badge\">\n                            <i class=\"fas fa-flask\"><\/i> \u041d\u0430\u0443\u043a\u0430 + \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b\n                        <\/span>\n                        <h3 class=\"resource-title\">\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 (BIPM)<\/h3>\n                    <\/div>\n                    <i class=\"fas fa-chevron-down accordion-toggle\"><\/i>\n                <\/div>\n                <div class=\"accordion-content\">\n                    <div class=\"resource-details\">\n                        <div class=\"resource-description\">\n                            <p>\u0412\u0435\u0434\u0443\u0449\u0430\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0430\u044f \u0437\u0430 \u043c\u0435\u0442\u0440\u043e\u043b\u043e\u0433\u0438\u044e \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \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 (\u0421\u0418). BIPM \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0442\u0430\u043b\u043e\u043d\u043e\u0432 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u0432\u043e \u0432\u0441\u0435\u043c \u043c\u0438\u0440\u0435.<\/p>\n                            <p><strong>\u041a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u0440\u043e\u043b\u044c \u0432 \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\u0445:<\/strong> \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u044d\u0442\u0430\u043b\u043e\u043d\u043e\u0432 \u043e\u0431\u044a\u0435\u043c\u0430, \u043a\u0430\u043b\u0438\u0431\u0440\u043e\u0432\u043a\u0430 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438.<\/p>\n                            <ul style=\"margin-top: 15px; padding-left: 20px;\">\n                                <li>\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0430\u043b\u043e\u043d\u043e\u0432 \u043e\u0431\u044a\u0435\u043c\u0430<\/li>\n                                <li>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043c\u0435\u0442\u0440\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u0432<\/li>\n                                <li>\u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0446\u0438\u044f \u043d\u0430\u0443\u0447\u043d\u044b\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439<\/li>\n                                <li>\u041e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043f\u043e \u043c\u0435\u0442\u0440\u043e\u043b\u043e\u0433\u0438\u0438<\/li>\n                            <\/ul>\n                        <\/div>\n                        <div class=\"resource-stats\">\n                            <h4 style=\"color: #2c3e50; margin-bottom: 20px;\">\u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:<\/h4>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u041e\u0441\u043d\u043e\u0432\u0430\u043d\u043e<\/span>\n                                <span class=\"stat-value\">1875<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0421\u0442\u0440\u0430\u043d\u044b-\u0443\u0447\u0430\u0441\u0442\u043d\u0438\u0446\u044b<\/span>\n                                <span class=\"stat-value\">62<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439<\/span>\n                                <span class=\"stat-value\">\u0434\u043e 10\u207b\u2079<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0433\u043e\u0434<\/span>\n                                <span class=\"stat-value\">150+<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"resource-actions\">\n                        <a href=\"https:\/\/www.bipm.org\/\" target=\"_blank\" class=\"btn-explore\">\n                            <i class=\"fas fa-external-link-alt\"><\/i> \u041f\u043e\u0441\u0435\u0442\u0438\u0442\u044c BIPM\n                        <\/a>\n                        <a href=\"https:\/\/www.bipm.org\/documents\/20126\/41773843\/SI-Brochure-9-EN.pdf\" target=\"_blank\" class=\"btn-explore\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                            <i class=\"fas fa-book-open\"><\/i> \u0411\u0440\u043e\u0448\u044e\u0440\u0430 \u0421\u0418\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"accordion-item fade-in-up delay-1\" data-category=\"history\">\n                <div class=\"accordion-header\">\n                    <div class=\"resource-meta\">\n                        <span class=\"resource-badge\" style=\"background: #e74c3c;\">\n                            <i class=\"fas fa-history\"><\/i> \u0418\u0441\u0442\u043e\u0440\u0438\u044f\n                        <\/span>\n                        <h3 class=\"resource-title\">\u041c\u0443\u0437\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043d\u0430\u0443\u043a\u0438 (\u041e\u043a\u0441\u0444\u043e\u0440\u0434)<\/h3>\n                    <\/div>\n                    <i class=\"fas fa-chevron-down accordion-toggle\"><\/i>\n                <\/div>\n                <div class=\"accordion-content\">\n                    <div class=\"resource-details\">\n                        <div class=\"resource-description\">\n                            <p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0442\u0430\u0440\u0435\u0439\u0448\u0438\u0445 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0445 \u043c\u0443\u0437\u0435\u0435\u0432 \u043d\u0430\u0443\u043a\u0438 \u0432 \u043c\u0438\u0440\u0435, \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u0431\u043e\u0440\u043e\u0432 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043c\u0435\u0442\u0440\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n                            <p><strong>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043c\u0430:<\/strong> \u0411\u043e\u043b\u0435\u0435 200 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043e\u0441\u0443\u0434\u043e\u0432 \u043e\u0442 \u0430\u043d\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043e \u043d\u0430\u0448\u0438\u0445 \u0434\u043d\u0435\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0434\u0440\u0435\u0432\u043d\u0435\u0435\u0433\u0438\u043f\u0435\u0442\u0441\u043a\u0438\u0435 \u0445\u0435\u043a\u0430\u0442\u044b, \u0440\u0438\u043c\u0441\u043a\u0438\u0435 \u0430\u043c\u0444\u043e\u0440\u044b, \u0441\u0440\u0435\u0434\u043d\u0435\u0432\u0435\u043a\u043e\u0432\u044b\u0435 \u043c\u0435\u0440\u044b \u0434\u043b\u044f \u0432\u0438\u043d\u0430 \u0438 \u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043b\u0438\u0442\u0440\u043e\u0432\u044b\u0435 \u043c\u0435\u0440\u044b.<\/p>\n                            <div style=\"background: #fff8e1; padding: 15px; border-radius: 10px; margin-top: 15px;\">\n                                <p><strong>\u042d\u043a\u0441\u043a\u043b\u044e\u0437\u0438\u0432:<\/strong> \u0412 \u043c\u0443\u0437\u0435\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u044d\u0442\u0430\u043b\u043e\u043d\u043e\u0432 \u043b\u0438\u0442\u0440\u0430 1799 \u0433\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432 \u0415\u0432\u0440\u043e\u043f\u0435.<\/p>\n                            <\/div>\n                        <\/div>\n                        <div class=\"resource-stats\">\n                            <h4 style=\"color: #2c3e50; margin-bottom: 20px;\">\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f:<\/h4>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0412\u0441\u0435\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442\u043e\u0432<\/span>\n                                <span class=\"stat-value\">18,000+<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0418\u0437\u043c\u0435\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0441\u0443\u0434\u044b<\/span>\n                                <span class=\"stat-value\">200+<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0421\u0442\u0430\u0440\u0435\u0439\u0448\u0438\u0439 \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442<\/span>\n                                <span class=\"stat-value\">1500 \u0434\u043e \u043d.\u044d.<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u041e\u043d\u043b\u0430\u0439\u043d \u043a\u0430\u0442\u0430\u043b\u043e\u0433<\/span>\n                                <span class=\"stat-value\">\u041f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"resource-actions\">\n                        <a href=\"https:\/\/www.mhs.ox.ac.uk\/\" target=\"_blank\" class=\"btn-explore\">\n                            <i class=\"fas fa-external-link-alt\"><\/i> \u041f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u043c\u0443\u0437\u0435\u0439\n                        <\/a>\n                        <a href=\"https:\/\/www.mhs.ox.ac.uk\/collections\/\" target=\"_blank\" class=\"btn-explore\" style=\"background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);\">\n                            <i class=\"fas fa-search\"><\/i> \u041f\u043e\u0438\u0441\u043a \u043f\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"accordion-item fade-in-up delay-2\" data-category=\"science applications\">\n                <div class=\"accordion-header\">\n                    <div class=\"resource-meta\">\n                        <span class=\"resource-badge\" style=\"background: #27ae60;\">\n                            <i class=\"fas fa-industry\"><\/i> \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\n                        <\/span>\n                        <h3 class=\"resource-title\">ASTM International<\/h3>\n                    <\/div>\n                    <i class=\"fas fa-chevron-down accordion-toggle\"><\/i>\n                <\/div>\n                <div class=\"accordion-content\">\n                    <div class=\"resource-details\">\n                        <div class=\"resource-description\">\n                            <p>\u0412\u0435\u0434\u0443\u0449\u0430\u044f \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u043e\u0431\u0440\u043e\u0432\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0441\u0435\u043d\u0441\u0443\u0441\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0434\u043b\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432, \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u0438, \u0441\u0438\u0441\u0442\u0435\u043c \u0438 \u0443\u0441\u043b\u0443\u0433.<\/p>\n                            <p><strong>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043c\u0430:<\/strong> ASTM \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043c\u043e\u0432 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0442\u0440\u0430\u0441\u043b\u044f\u0445 &#8212; \u043e\u0442 \u0444\u0430\u0440\u043c\u0430\u0446\u0435\u0432\u0442\u0438\u043a\u0438 \u0438 \u0445\u0438\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043e \u043f\u0438\u0449\u0435\u0432\u043e\u0439 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0438 \u0438 \u043d\u0435\u0444\u0442\u0435\u0433\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u0430.<\/p>\n                            <ul style=\"margin-top: 15px; padding-left: 20px;\">\n                                <li><strong>ASTM E542:<\/strong> \u041a\u0430\u043b\u0438\u0431\u0440\u043e\u0432\u043a\u0430 \u043b\u0430\u0431\u043e\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0445 \u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043c\u0430<\/li>\n                                <li><strong>ASTM D1250:<\/strong> \u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043c\u0430 \u043d\u0435\u0444\u0442\u0435\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432<\/li>\n                                <li><strong>ASTM E694:<\/strong> \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043c\u0435\u0440\u043d\u043e\u0439 \u043f\u043e\u0441\u0443\u0434\u044b<\/li>\n                                <li><strong>ASTM E898:<\/strong> \u041c\u0435\u0442\u043e\u0434\u044b \u043a\u0430\u043b\u0438\u0431\u0440\u043e\u0432\u043a\u0438 \u043f\u0438\u043f\u0435\u0442\u043e\u043a<\/li>\n                            <\/ul>\n                        <\/div>\n                        <div class=\"resource-stats\">\n                            <h4 style=\"color: #2c3e50; margin-bottom: 20px;\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 ASTM:<\/h4>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0412\u0441\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432<\/span>\n                                <span class=\"stat-value\">12,500+<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043e\u0431\u044a\u0435\u043c\u0430<\/span>\n                                <span class=\"stat-value\">150+<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0421\u0442\u0440\u0430\u043d\u044b-\u0443\u0447\u0430\u0441\u0442\u043d\u0438\u0446\u044b<\/span>\n                                <span class=\"stat-value\">140+<\/span>\n                            <\/div>\n                            <div class=\"stat-item\">\n                                <span class=\"stat-label\">\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u0438\u0442\u0435\u0442\u044b<\/span>\n                                <span class=\"stat-value\">140+<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"resource-actions\">\n                        <a href=\"https:\/\/www.astm.org\/\" target=\"_blank\" class=\"btn-explore\">\n                            <i class=\"fas fa-external-link-alt\"><\/i> \u0421\u0430\u0439\u0442 ASTM\n                        <\/a>\n                        <a href=\"https:\/\/www.astm.org\/Standards\/volume-measurement-standards.html\" target=\"_blank\" class=\"btn-explore\" style=\"background: linear-gradient(135deg, #27ae60 0%, #229954 100%);\">\n                            <i class=\"fas fa-clipboard-list\"><\/i> \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043e\u0431\u044a\u0435\u043c\u0430\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- \u0421\u043f\u0438\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u0445\u0440\u043e\u043d\u043e\u043b\u043e\u0433\u0438\u044f -->\n        <div class=\"spiral-timeline\">\n            <h2 class=\"spiral-title\"><i class=\"fas fa-hourglass-half\"><\/i> \u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043c\u0430<\/h2>\n            <div class=\"spiral-container\">\n                <div class=\"spiral-path\"><\/div>\n                <div class=\"spiral-item\" style=\"top: 10%; left: 10%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-anchor\"><\/i> 2500 \u0434\u043e \u043d.\u044d.<\/div>\n                    <div>\u0414\u0440\u0435\u0432\u043d\u0438\u0439 \u0415\u0433\u0438\u043f\u0435\u0442: \u0445\u0435\u043a\u0430\u0442 (4.8 \u043b) \u0434\u043b\u044f \u0437\u0435\u0440\u043d\u0430<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"top: 20%; right: 15%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-archway\"><\/i> 1800 \u0434\u043e \u043d.\u044d.<\/div>\n                    <div>\u0412\u0430\u0432\u0438\u043b\u043e\u043d: \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0435\u0440\u044b \u0434\u043b\u044f \u0442\u043e\u0440\u0433\u043e\u0432\u043b\u0438<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"top: 40%; left: 5%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-landmark\"><\/i> 100 \u0434\u043e \u043d.\u044d.<\/div>\n                    <div>\u0420\u0438\u043c\u0441\u043a\u0430\u044f \u0438\u043c\u043f\u0435\u0440\u0438\u044f: \u0441\u0435\u043a\u0441\u0442\u0430\u0440\u0438\u0439 (0.55 \u043b)<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"top: 60%; right: 5%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-wine-bottle\"><\/i> 1000 \u0433.<\/div>\n                    <div>\u0421\u0440\u0435\u0434\u043d\u0435\u0432\u0435\u043a\u043e\u0432\u0430\u044f \u0415\u0432\u0440\u043e\u043f\u0430: \u0432\u0438\u043d\u043d\u044b\u0435 \u043c\u0435\u0440\u044b<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"bottom: 30%; left: 15%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-crown\"><\/i> 1707 \u0433.<\/div>\n                    <div>\u0411\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0438\u0439 \u0433\u0430\u043b\u043b\u043e\u043d (4.546 \u043b)<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"bottom: 15%; right: 20%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-flask\"><\/i> 1795 \u0433.<\/div>\n                    <div>\u0424\u0440\u0430\u043d\u0446\u0438\u044f: \u043b\u0438\u0442\u0440 \u043a\u0430\u043a 1 \u0434\u043c\u00b3 \u0432\u043e\u0434\u044b<\/div>\n                <\/div>\n                <div class=\"spiral-item\" style=\"bottom: 5%; left: 40%;\">\n                    <div class=\"spiral-year\"><i class=\"fas fa-atom\"><\/i> 1964 \u0433.<\/div>\n                    <div>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0442\u0440\u0430 \u043a\u0430\u043a 1 \u0434\u043c\u00b3<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- \u041a\u0430\u0440\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f -->\n        <div class=\"systems-map\">\n            <h2 class=\"map-title\"><i class=\"fas fa-globe-americas\"><\/i> \u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u043f\u043e \u043c\u0438\u0440\u0443<\/h2>\n            <div class=\"map-container\">\n                <div class=\"system-card\" data-system=\"metric\">\n                    <div class=\"system-icon\"><i class=\"fas fa-weight-hanging\"><\/i><\/div>\n                                        <div class=\"system-name\">\u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/div>\n                    <p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 195 \u0441\u0442\u0440\u0430\u043d\u0430\u0445 \u043c\u0438\u0440\u0430 \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u043b\u0438 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439.<\/p>\n                    <div class=\"system-stats\">\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">195<\/span>\n                            <span class=\"stat-label\">\u0421\u0442\u0440\u0430\u043d\u044b<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">1795<\/span>\n                            <span class=\"stat-label\">\u0413\u043e\u0434 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"system-card\" data-system=\"imperial\">\n                    <div class=\"system-icon\"><i class=\"fas fa-ruler-combined\"><\/i><\/div>\n                    <div class=\"system-name\">\u0418\u043c\u043f\u0435\u0440\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430<\/div>\n                    <p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0421\u0428\u0410, \u041c\u044c\u044f\u043d\u043c\u0435, \u041b\u0438\u0431\u0435\u0440\u0438\u0438 \u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0432 \u0412\u0435\u043b\u0438\u043a\u043e\u0431\u0440\u0438\u0442\u0430\u043d\u0438\u0438.<\/p>\n                    <div class=\"system-stats\">\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">3<\/span>\n                            <span class=\"stat-label\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u044b<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">1824<\/span>\n                            <span class=\"stat-label\">\u0424\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"system-card\" data-system=\"hybrid\">\n                    <div class=\"system-icon\"><i class=\"fas fa-exchange-alt\"><\/i><\/div>\n                    <div class=\"system-name\">\u0421\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/div>\n                    <p>\u041a\u0430\u043d\u0430\u0434\u0430, \u0418\u0440\u043b\u0430\u043d\u0434\u0438\u044f, \u0410\u0432\u0441\u0442\u0440\u0430\u043b\u0438\u044f &#8212; \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0440\u044b.<\/p>\n                    <div class=\"system-stats\">\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">20+<\/span>\n                            <span class=\"stat-label\">\u0421\u0442\u0440\u0430\u043d\u044b<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"stat-number\">70%<\/span>\n                            <span class=\"stat-label\">\u041d\u0430\u0441\u0435\u043b\u0435\u043d\u0438\u044f<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- \u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 -->\n        <div class=\"comparison-table\">\n            <h2 class=\"table-title\"><i class=\"fas fa-balance-scale-left\"><\/i> \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446 \u043e\u0431\u044a\u0435\u043c\u0430<\/h2>\n            <table>\n                <thead>\n                    <tr>\n                        <th>\u0421\u0438\u0441\u0442\u0435\u043c\u0430<\/th>\n                        <th>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430<\/th>\n                        <th>\u042d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442 \u0432 \u043b\u0438\u0442\u0440\u0430\u0445<\/th>\n                        <th>\u0422\u043e\u0447\u043d\u043e\u0441\u0442\u044c<\/th>\n                        <th>\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>\u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f (\u0421\u0418)<\/strong><\/td>\n                        <td>\u041b\u0438\u0442\u0440 (L)<\/td>\n                        <td>1.000000<\/td>\n                        <td>\u00b10.001%<\/td>\n                        <td>\u041d\u0430\u0443\u043a\u0430, \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0430, \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/td>\n                    <\/tr>\n                    <tr class=\"highlight\">\n                        <td><strong>\u0410\u043c\u0435\u0440\u0438\u043a\u0430\u043d\u0441\u043a\u0430\u044f<\/strong><\/td>\n                        <td>\u0413\u0430\u043b\u043b\u043e\u043d US (gal)<\/td>\n                        <td>3.785411<\/td>\n                        <td>\u00b10.01%<\/td>\n                        <td>\u0422\u043e\u043f\u043b\u0438\u0432\u043e, \u043d\u0430\u043f\u0438\u0442\u043a\u0438, \u0431\u044b\u0442<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>\u0411\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u0430\u044f \u0438\u043c\u043f\u0435\u0440\u0441\u043a\u0430\u044f<\/strong><\/td>\n                        <td>\u0413\u0430\u043b\u043b\u043e\u043d UK (gal)<\/td>\n                        <td>4.546090<\/td>\n                        <td>\u00b10.01%<\/td>\n                        <td>\u0412\u0435\u043b\u0438\u043a\u043e\u0431\u0440\u0438\u0442\u0430\u043d\u0438\u044f, \u0421\u043e\u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u043e<\/td>\n                    <\/tr>\n                    <tr class=\"highlight\">\n                        <td><strong>\u042f\u043f\u043e\u043d\u0441\u043a\u0430\u044f<\/strong><\/td>\n                        <td>\u0421\u0451 (\u5347)<\/td>\n                        <td>1.803906<\/td>\n                        <td>\u00b10.1%<\/td>\n                        <td>\u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0440\u044b, \u0441\u0430\u043a\u044d<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>\u0410\u043f\u0442\u0435\u043a\u0430\u0440\u0441\u043a\u0430\u044f<\/strong><\/td>\n                        <td>\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 (fl oz)<\/td>\n                        <td>0.029573<\/td>\n                        <td>\u00b10.005%<\/td>\n                        <td>\u0424\u0430\u0440\u043c\u0430\u0446\u0435\u0432\u0442\u0438\u043a\u0430, \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0430<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n        \n        <!-- \u041c\u0438\u043d\u0438-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 -->\n        <div class=\"mini-calculator\">\n            <h2 class=\"calculator-title\"><i class=\"fas fa-calculator\"><\/i> \u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442<\/h2>\n            <div class=\"calc-container\">\n                <div class=\"calc-inputs\">\n                    <input type=\"number\" class=\"calc-input\" id=\"quickValue\" value=\"1\" min=\"0\" step=\"any\">\n                    <select class=\"calc-input\" id=\"quickUnit\">\n                        <option value=\"l\">\u041b\u0438\u0442\u0440 (L)<\/option>\n                        <option value=\"gal_us\">\u0413\u0430\u043b\u043b\u043e\u043d US<\/option>\n                        <option value=\"gal_uk\">\u0413\u0430\u043b\u043b\u043e\u043d UK<\/option>\n                        <option value=\"ml\">\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440<\/option>\n                        <option value=\"cup_us\">\u0427\u0430\u0448\u043a\u0430 US<\/option>\n                    <\/select>\n                <\/div>\n                <div id=\"quickResults\" class=\"calc-result\">\n                    3.785 \u043b\n                <\/div>\n                <div style=\"text-align: center; margin-top: 15px; color: #666;\">\n                    <small>\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0432 \u043b\u0438\u0442\u0440\u044b<\/small>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- \u0424\u0443\u0442\u0435\u0440 \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0434\u0430\u0442\u043e\u0439 -->\n        <div class=\"volume-footer\">\n            <div class=\"footer-content\">\n                <p><strong>\u00a9 <span class=\"current-year\"><\/span> \u0410\u0440\u0445\u0438\u0432 \u0437\u043d\u0430\u043d\u0438\u0439 \u043e \u043c\u0435\u0440\u0430\u0445 \u043e\u0431\u044a\u0435\u043c\u0430<\/strong><\/p>\n                <p>\u0412\u0441\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0438\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0430\u0432\u0442\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432. \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445 \u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n                <p>\u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445: <span id=\"currentDate\"><\/span><\/p>\n                \n                <div class=\"footer-links\">\n                    <a href=\"https:\/\/www.bipm.org\/\" target=\"_blank\" class=\"footer-link\">\n                        <i class=\"fas fa-balance-scale\"><\/i> BIPM\n                    <\/a>\n                    <a href=\"https:\/\/www.iso.org\/\" target=\"_blank\" class=\"footer-link\">\n                        <i class=\"fas fa-globe\"><\/i> ISO\n                    <\/a>\n                    <a href=\"https:\/\/www.nist.gov\/\" target=\"_blank\" class=\"footer-link\">\n                        <i class=\"fas fa-flask\"><\/i> NIST\n                    <\/a>\n                    <a href=\"mailto:\" class=\"footer-link\">\n                        <i class=\"fas fa-envelope\"><\/i> \u041e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n\/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c IIFE \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430\n(function() {\n    console.log('=== \u0417\u0410\u0413\u0420\u0423\u0417\u041a\u0410 \u0411\u041b\u041e\u041a\u0410 \u041e\u0411\u042a\u0415\u041c\u0410 ===');\n    \n    \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0432 \u0444\u0443\u0442\u0435\u0440\u0435\n    const currentYearEl = document.querySelector('.current-year');\n    const currentDateEl = document.getElementById('currentDate');\n    \n    if (currentYearEl) {\n        currentYearEl.textContent = new Date().getFullYear();\n    }\n    \n    if (currentDateEl) {\n        const now = new Date();\n        const options = { \n            year: 'numeric', \n            month: 'long', \n            day: 'numeric',\n            weekday: 'long'\n        };\n        currentDateEl.textContent = now.toLocaleDateString('ru-RU', options);\n    }\n    \n    \/\/ \u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430\n    const volumeFactors = {\n        'l': 1,\n        'ml': 0.001,\n        'gal_us': 3.78541,\n        'gal_uk': 4.54609,\n        'cup_us': 0.236588\n    };\n    \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\n    document.addEventListener('DOMContentLoaded', function() {\n        console.log('\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u043e\u0431\u044a\u0435\u043c\u0430...');\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u0430\n        initAccordion();\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438\n        initNavigation();\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043f\u0438\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0445\u0440\u043e\u043d\u043e\u043b\u043e\u0433\u0438\u0438\n        initSpiralTimeline();\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0440\u0442\u044b \u0441\u0438\u0441\u0442\u0435\u043c\n        initSystemsMap();\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430\n        initQuickCalculator();\n        \n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n        initInteractiveTable();\n        \n        console.log('\u0411\u043b\u043e\u043a \u043e\u0431\u044a\u0435\u043c\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d');\n    });\n    \n    \/\/ \u0410\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\n    function initAccordion() {\n        const accordionHeaders = document.querySelectorAll('.accordion-header');\n        \n        accordionHeaders.forEach(header => {\n            header.addEventListener('click', function() {\n                const content = this.nextElementSibling;\n                const isActive = content.classList.contains('active');\n                \n                \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435\n                document.querySelectorAll('.accordion-content').forEach(item => {\n                    item.classList.remove('active');\n                    item.previousElementSibling.querySelector('.accordion-toggle').style.transform = 'rotate(0deg)';\n                });\n                \n                \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c\/\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n                if (!isActive) {\n                    content.classList.add('active');\n                    this.querySelector('.accordion-toggle').style.transform = 'rotate(180deg)';\n                }\n            });\n        });\n    }\n    \n    \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c\n    function initNavigation() {\n        const navCategories = document.querySelectorAll('.nav-category');\n        const accordionItems = document.querySelectorAll('.accordion-item');\n        \n        navCategories.forEach(category => {\n            category.addEventListener('click', function() {\n                const selectedCategory = this.getAttribute('data-category');\n                \n                \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e\n                navCategories.forEach(cat => cat.classList.remove('active'));\n                this.classList.add('active');\n                \n                \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c\/\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b\n                accordionItems.forEach(item => {\n                    const itemCategories = item.getAttribute('data-category').split(' ');\n                    \n                    if (selectedCategory === 'all' || itemCategories.includes(selectedCategory)) {\n                        item.style.display = 'block';\n                        \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\n                        setTimeout(() => {\n                            item.style.opacity = '1';\n                            item.style.transform = 'translateY(0)';\n                        }, 10);\n                    } else {\n                        item.style.opacity = '0';\n                        item.style.transform = 'translateY(20px)';\n                        setTimeout(() => {\n                            item.style.display = 'none';\n                        }, 300);\n                    }\n                });\n            });\n        });\n    }\n    \n    \/\/ \u0421\u043f\u0438\u0440\u0430\u043b\u044c\u043d\u0430\u044f \u0445\u0440\u043e\u043d\u043e\u043b\u043e\u0433\u0438\u044f\n    function initSpiralTimeline() {\n        const spiralItems = document.querySelectorAll('.spiral-item');\n        \n        spiralItems.forEach(item => {\n            item.addEventListener('click', function() {\n                const year = this.querySelector('.spiral-year').textContent;\n                const description = this.querySelector('div:last-child').textContent;\n                \n                \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438\n                const modal = document.createElement('div');\n                modal.style.cssText = `\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100%;\n                    height: 100%;\n                    background: rgba(0,0,0,0.7);\n                    z-index: 10000;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    animation: fadeIn 0.3s ease;\n                `;\n                \n                const modalContent = document.createElement('div');\n                modalContent.style.cssText = `\n                    background: white;\n                    padding: 30px;\n                    border-radius: 20px;\n                    max-width: 500px;\n                    width: 90%;\n                    box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n                    animation: slideUp 0.4s ease;\n                `;\n                \n                modalContent.innerHTML = `\n                    <h3 style=\"color: #36D1DC; margin-bottom: 15px;\">${year}<\/h3>\n                    <p style=\"color: #333; line-height: 1.6; margin-bottom: 25px;\">${description}<\/p>\n                    <button style=\"\n                        background: #36D1DC;\n                        color: white;\n                        border: none;\n                        padding: 12px 24px;\n                        border-radius: 10px;\n                        cursor: pointer;\n                        font-weight: 600;\n                        display: block;\n                        margin: 0 auto;\n                    \" onclick=\"this.parentElement.parentElement.remove()\">\n                        \u0417\u0430\u043a\u0440\u044b\u0442\u044c\n                    <\/button>\n                `;\n                \n                modal.appendChild(modalContent);\n                document.body.appendChild(modal);\n                \n                \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0432\u043d\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430\n                modal.addEventListener('click', function(e) {\n                    if (e.target === this) {\n                        this.remove();\n                    }\n                });\n            });\n        });\n    }\n    \n    \/\/ \u041a\u0430\u0440\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f\n    function initSystemsMap() {\n        const systemCards = document.querySelectorAll('.system-card');\n        \n        systemCards.forEach(card => {\n            card.addEventListener('click', function() {\n                const system = this.getAttribute('data-system');\n                \n                \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f\n                this.style.transform = 'translateY(-10px) scale(0.95)';\n                setTimeout(() => {\n                    this.style.transform = 'translateY(-10px) scale(1)';\n                }, 150);\n                \n                \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0435\n                let systemInfo = '';\n                switch(system) {\n                    case 'metric':\n                        systemInfo = '\u041c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 95% \u0441\u0442\u0440\u0430\u043d \u043c\u0438\u0440\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b: \u043c\u0435\u0442\u0440, \u043a\u0438\u043b\u043e\u0433\u0440\u0430\u043c\u043c, \u043b\u0438\u0442\u0440. \u041f\u0440\u0438\u043d\u044f\u0442\u0430 \u0432 \u043d\u0430\u0443\u043a\u0435 \u0438 \u043c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0440\u0433\u043e\u0432\u043b\u0435.';\n                        break;\n                    case 'imperial':\n                        systemInfo = '\u0418\u043c\u043f\u0435\u0440\u0441\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0421\u0428\u0410, \u041c\u044c\u044f\u043d\u043c\u0435 \u0438 \u041b\u0438\u0431\u0435\u0440\u0438\u0438. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b: \u0444\u0443\u0442, \u0444\u0443\u043d\u0442, \u0433\u0430\u043b\u043b\u043e\u043d. \u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 \u0431\u0440\u0438\u0442\u0430\u043d\u0441\u043a\u043e\u0439 \u0438\u043c\u043f\u0435\u0440\u0438\u0435\u0439.';\n                        break;\n                    case 'hybrid':\n                        systemInfo = '\u0421\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0440\u044b \u0432 \u0431\u044b\u0442\u0443 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u0440\u0430\u0441\u043b\u044f\u0445.';\n                        break;\n                }\n                \n                \/\/ \u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\n                const tooltip = document.createElement('div');\n                tooltip.style.cssText = `\n                    position: absolute;\n                    background: #2c3e50;\n                    color: white;\n                    padding: 15px;\n                    border-radius: 10px;\n                    max-width: 300px;\n                    z-index: 100;\n                    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n                    animation: fadeInUp 0.3s ease;\n                `;\n                tooltip.textContent = systemInfo;\n                \n                \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443\n                const rect = this.getBoundingClientRect();\n                tooltip.style.top = (rect.top - tooltip.offsetHeight - 10) + 'px';\n                tooltip.style.left = (rect.left + rect.width\/2 - 150) + 'px';\n                \n                this.appendChild(tooltip);\n                \n                \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b\n                setTimeout(() => {\n                    if (tooltip.parentElement) {\n                        tooltip.remove();\n                    }\n                }, 3000);\n            });\n        });\n    }\n    \n    \/\/ \u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\n    function initQuickCalculator() {\n        const quickValue = document.getElementById('quickValue');\n        const quickUnit = document.getElementById('quickUnit');\n        const quickResults = document.getElementById('quickResults');\n        \n        function updateQuickCalc() {\n            const value = parseFloat(quickValue.value) || 0;\n            const unit = quickUnit.value;\n            const liters = value * volumeFactors[unit];\n            \n            quickResults.textContent = liters.toFixed(3) + ' \u043b';\n        }\n        \n        if (quickValue && quickUnit && quickResults) {\n            quickValue.addEventListener('input', updateQuickCalc);\n            quickUnit.addEventListener('change', updateQuickCalc);\n            \n            \/\/ \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0435\u0442\n            updateQuickCalc();\n        }\n    }\n    \n    \/\/ \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430\n    function initInteractiveTable() {\n        const tableRows = document.querySelectorAll('.comparison-table tbody tr');\n        \n        tableRows.forEach(row => {\n            row.addEventListener('click', function() {\n                \/\/ \u0421\u043d\u0438\u043c\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\n                tableRows.forEach(r => r.classList.remove('selected'));\n                \n                \/\/ \u0412\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443\n                this.classList.add('selected');\n                \n                \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e\n                const cells = this.querySelectorAll('td');\n                if (cells.length >= 5) {\n                    const system = cells[0].textContent;\n                    const unit = cells[1].textContent;\n                    const equivalent = cells[2].textContent;\n                    \n                    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435\n                    const notification = document.createElement('div');\n                    notification.style.cssText = `\n                        position: fixed;\n                        bottom: 20px;\n                        right: 20px;\n                        background: #36D1DC;\n                        color: white;\n                        padding: 15px 25px;\n                        border-radius: 12px;\n                        box-shadow: 0 10px 30px rgba(54, 209, 220, 0.3);\n                        z-index: 1000;\n                        animation: slideInRight 0.3s ease;\n                        max-width: 300px;\n                    `;\n                    \n                    notification.innerHTML = `\n                        <strong>${system}<\/strong><br>\n                        ${unit} = ${equivalent} \u043b\u0438\u0442\u0440\u043e\u0432<br>\n                        <small>\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f<\/small>\n                    `;\n                    \n                    notification.addEventListener('click', function() {\n                        this.style.animation = 'slideOutRight 0.3s ease';\n                        setTimeout(() => this.remove(), 300);\n                    });\n                    \n                    document.body.appendChild(notification);\n                    \n                    \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 5 \u0441\u0435\u043a\u0443\u043d\u0434\n                    setTimeout(() => {\n                        if (notification.parentElement) {\n                            notification.style.animation = 'slideOutRight 0.3s ease';\n                            setTimeout(() => notification.remove(), 300);\n                        }\n                    }, 5000);\n                }\n            });\n        });\n    }\n    \n    \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\n    const style = document.createElement('style');\n    style.textContent = `\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n        \n        @keyframes slideUp {\n            from { \n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to { \n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(10px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        @keyframes slideInRight {\n            from {\n                opacity: 0;\n                transform: translateX(100%);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(0);\n            }\n        }\n        \n        @keyframes slideOutRight {\n            from {\n                opacity: 1;\n                transform: translateX(0);\n            }\n            to {\n                opacity: 0;\n                transform: translateX(100%);\n            }\n        }\n        \n        .accordion-item {\n            transition: all 0.3s ease;\n        }\n        \n        .selected {\n            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;\n            box-shadow: inset 0 0 0 2px #36D1DC;\n        }\n    `;\n    document.head.appendChild(style);\n    \n})();\n<\/script>\n<\/body>\n<\/html>\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 \u043e\u0431\u044a\u0435\u043c\u0430 \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 \u043e\u0431\u044a\u0435\u043c\u0430 \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 \u043e\u0431\u044a\u0435\u043c\u0430 \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 \u043e\u0431\u044a\u0435\u043c\u0430 \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435: # \u0418\u0417 \u041b\u0438\u0442\u0440 (L)\u041c\u0438\u043b\u043b\u0438\u043b\u0438\u0442\u0440 (mL)\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u0440 (m\u00b3)\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u043d\u0442\u0438\u043c\u0435\u0442\u0440 (cm\u00b3)\u0413\u0430\u043b\u043b\u043e\u043d US (gal)\u0413\u0430\u043b\u043b\u043e\u043d UK (gal)\u0427\u0430\u0448\u043a\u0430 US (cup)\u0427\u0430\u0448\u043a\u0430 UK (cup)\u041f\u0438\u043d\u0442\u0430 US (pt)\u041f\u0438\u043d\u0442\u0430 UK (pt)\u041a\u0432\u0430\u0440\u0442\u0430 US (qt)\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 US (fl oz)\u0423\u043d\u0446\u0438\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 UK (fl oz) \u0412&#8230;<\/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-251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=251"}],"version-history":[{"count":8,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/251\/revisions"}],"predecessor-version":[{"id":425,"href":"https:\/\/gestro.ru\/index.php?rest_route=\/wp\/v2\/pages\/251\/revisions\/425"}],"wp:attachment":[{"href":"https:\/\/gestro.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}