:root {
        --font-size: 16px;
        --font-family: Verdana, sans-serif; /* Arial */
        --text-color: #000;
        --bg-color: #fff;
        --line-height: 1.6;
        --letter-spacing: 0.04em;
        --images-display: block;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    body.initial-load {
        --font-size: 16px !important;
        --text-color: #333 !important;
        --bg-color: #fff !important;
        transition: none;  /* Без анимации при первой загрузке */
        /* transition: none !important; */ /* Фон страницы без задержки */
    }

    /* Плавное изменение переменных */
    body * {
        transition: color 0.6s ease, background-color 0.6s ease, font-size 0.6s ease, line-height 0.6s ease;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);  /* Плавные переходы для всех элементов */
    }

    /* body, body * {
        transition-property: color, background-color, font-size, line-height, letter-spacing;
        transition-duration: 0.6s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    */

    body {
        font-family: var(--font-family);
        font-size: var(--font-size);
        color: var(--text-color);
        background: var(--bg-color);
        line-height: var(--line-height);
        letter-spacing: var(--letter-spacing);
        padding: 5px;
        max-width: 1800px;
        margin: 0 auto;
        /* transition: all 0.3s ease; */
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная кривая */
    }



    /* Панель настроек */
    .accessibility-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        z-index: 1000;
        border-bottom: 1px solid #ccc;
        transition: all 0.3s ease;
    }

    /* Десктоп: все кнопки в ряд */
    @media (min-width: 769px) {
        .accessibility-panel {
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .toggle-btn {
                display: none;
        }
    }

    /* Мобильный: только иконка ⚙️ */
    @media (max-width: 768px) {
        .accessibility-panel {
            padding: 10px;
            height: 50px;
        }

        .toggle-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            padding: 10px 15px;
            border: 1px solid #007bff;
            background: #007bff;
            color: white;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;
            z-index: 1001;
            display: block;
        }

        .panel-content {
            display: none;
            position: absolute;
            top: 50px;
            left: 10px;
            right: 10px;
            background: rgba(255,255,255,0.98);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            flex-wrap: wrap;
            gap: 8px;
            max-height: 170vh;
            overflow-y: auto;
        }

        .panel-content.active {
            display: flex;
            }
        } /* @media (max-width: 768px) */

        /* Убирает мигание кнопок */
        .accessibility-panel button { transition: all 0.3s ease; }

        .accessibility-panel button:not(.toggle-btn) {
            padding: 5px 12px;
            padding: 3px 3px;
            border: 1px solid #ccc;
            background: #f0f0f0;
            background: #eeeeee;
            cursor: pointer;
            font-size: 14px;
            font-size: 14pt;
            /*font-weight: bold;*/
            transition: all 0.3s;
            border-radius: 4px;
            min-width: 90px;
            min-width: 10px;
            text-align: center;
        }

        .accessibility-panel button.active {
            background: #007bff;
            background: #eeeeee;
            color: white;
            color: black;
            border: 2px solid #007bff;
            border: 3px solid red;
        }

        .accessibility-panel button:hover:not(.toggle-btn) {
            background: #0056b3;
            color: white;
        }

        /* Основной контент */
        main {
            margin-top: 70px;
        }

        @media (max-width: 768px) {
            body {
                padding: 5px;
            }
            main {
                margin-top: 50px;
            }
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 2px solid #ddd;
        }

        nav li a {
            text-decoration: none;
            color: var(--text-color);
            font-size: 1.1em;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        nav li a:hover {
            background: rgba(0,123,255,0.1);
        }

        section {
            margin-bottom: 40px;
        }

        h1, h2 {
            margin-bottom: 20px;
            line-height: 1.5; /* 1.3 */
        }

        img {
            max-width: 100%;
            height: auto;
            display: var(--images-display);
            margin: 20px 0;
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            nav ul {
                flex-direction: column;
                gap: 10px;
            }

            .accessibility-panel button:not(.toggle-btn) {
                font-size: 12px;
                padding: 6px 10px;
                min-width: 75px;
                flex: 1 1 45%;
            }
        }

    /* Цветовые схемы */
    body.color-white { --text-color: #000000; --bg-color: #ffffff; }
    body.color-black { --text-color: #ffffff; --bg-color: #000000; }
    body.color-green { --text-color: #00ff00; --bg-color: #000000; }
    body.color-blue  { --text-color: #0000ff; --bg-color: #42aaff; } /* #000067; #e0f7ff;  #42aaff; #00BFFF; */
    body.color-brick { --text-color: #964b00; --bg-color: #f5f5dc; } /* #884535; */

    /* Размеры шрифта */
    body.size-small  { --font-size: 14pt; --letter-spacing: 0.035em; }
    body.size-normal { --font-size: 18pt; --letter-spacing: 0.04em;  }
    body.size-large  { --font-size: 24pt; --letter-spacing: 0.05em;  }
    body.size-xlarge { --font-size: 28pt; --letter-spacing: 0.06em;   }

    body.images-off { --images-display: none; }