<!--HTML-->
    <style>
        /* -------------------- CSS (все классы с префиксом instach-) -------------------- */
       

        .instach-container {
                max-width: 700px;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    /* backdrop-filter: blur(2px); */
    border-radius: 48px;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.05); */
    padding: 30px 25px 35px;
    transition: all 0.2s ease;
        }

        .instach-title {
            text-align: center;
            font-weight: 600;
            font-size: 1.9rem;
            letter-spacing: -0.5px;
            color: #1a1e2b;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .instach-title span {
            background: #1a1e2b;
            color: white;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 4px 16px;
            border-radius: 40px;
            letter-spacing: 0.3px;
        }

        .instach-subhead {
            text-align: center;
            color: #4a4f5e;
            margin-bottom: 28px;
            font-weight: 400;
            font-size: .6rem;
            opacity: 0.8;
            border-bottom: 1px dashed #cbd0db;
            padding-bottom: 14px;
        }

        /* сетка */
        .instach-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 16px;
            justify-content: center;
            margin: 20px 0 10px;
        }

        /* карточка ячейки */
        .instach-cell {
            background: #ffffff;
            border-radius: 28px;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
            padding: 6px 6px 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(2px);
            min-height: 120px;
            justify-content: center;
            cursor: default;
            position: relative;
        }

        /* состояние: закрыто */
        .instach-cell.instach-closed {
            background: #e6e9f2;
            color: #4a4f5e;
            border-color: #d0d5e0;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
            opacity: 0.7;
        }

        .instach-cell.instach-closed .instach-day-label {
            color: #5a5f70;
        }

        .instach-cell.instach-closed .instach-theme-text {
            display: none;
        }

        .instach-cell.instach-closed .instach-lock-icon {
            display: inline-block;
            font-size: 1.2rem;
            line-height: 1;
            margin-top: 6px;
            opacity: 0.5;
        }

        .instach-cell.instach-closed .instach-day-number {
            font-weight: 500;
        }

        .instach-cell.instach-closed .instach-hint {
            display: none;
        }

        /* состояние: открыто */
        .instach-cell.instach-open {
            background: #ffffff;
            border: 1px solid #d6dceb;
            box-shadow: 0 8px 18px rgba(50, 60, 90, 0.08);
            transform: scale(1);
            transition: all 0.25s;
        }

        .instach-cell.instach-open .instach-lock-icon {
            display: none;
        }

        .instach-cell.instach-open .instach-theme-text {
            display: block;
            font-weight: 500;
            font-size: 0.7rem;
            color: #141824;
            padding: 6px 8px;
            border-radius: 40px;
            width: 100%;
            margin-top: 6px;
            word-break: break-word;
            line-height: 1.3;
        }

        /* пояснение — появляется при наведении только у открытых ячеек */
        .instach-cell.instach-open .instach-hint {
                display: none;
    position: absolute;
    bottom: calc(40% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1e2b;
    color: #f0f3fd;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 400;
    white-space: nowrap;
    width: 120px;
    white-space: normal;
    word-break: break-word;
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
    z-index: 10;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.2px;
    pointer-events: none;
        }

        .instach-cell.instach-open .instach-hint::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #1a1e2b;
        }

        .instach-cell.instach-open:hover .instach-hint {
            display: block;
        }

        .instach-day-number {
            font-size: .8rem;
            font-weight: 600;
            color: #1a1e2b;
            letter-spacing: -0.3px;
        }

        .instach-day-label {
            font-size: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            font-weight: 500;
            color: #5e6477;
            background: rgba(0,0,0,0.02);
            padding: 2px 14px;
            border-radius: 40px;
            margin-bottom: 4px;
        }

        .instach-lock-icon {
            font-size: 1.6rem;
            line-height: 1;
            opacity: 0.6;
        }

        /* подпись */
        .instach-footer {
            margin-top: 28px;
            text-align: center;
            font-size: 0.9rem;
            color: #3d4353;
            background: rgba(255,255,255,0.6);
            padding: 12px 14px;
            border-radius: 60px;
            backdrop-filter: blur(2px);
            border: 1px solid rgba(255,255,255,0.4);
            font-weight: 400;
        }

        .instach-footer strong {
            font-weight: 600;
            background: #1a1e2b;
            color: white;
            padding: 0 12px;
            border-radius: 40px;
            font-size: 0.8rem;
            letter-spacing: 0.3px;
        }

        @media (max-width: 500px) {
            .instach-container { padding: 20px 16px; }
            .instach-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
            .instach-cell { min-height: 100px; padding: 14px 4px; }
            .instach-day-number { font-size: 1.2rem; }
            .instach-cell.instach-open .instach-hint {
                max-width: 160px;
                font-size: 0.7rem;
                padding: 6px 10px;
            }
        }
    </style>
</head>
<body>
    <div class="instach-container">
        <div class="instach-subhead">каждый день — новая тема • наведи для пояснения</div>

        <!-- сетка будет заполнена js -->
        <div id="instachGrid" class="instach-grid"></div>

    </div>

    <script>
        // -------------------- НАСТРОЙКИ (меняй здесь) --------------------
        // Дата СТАРТА челленджа (год, месяц (0-11), день)
        const START_DATE = new Date(2026, 5, 18);  // 2 июля 2026

        // Список тем: ['id', 'тематика дня', 'пояснение к теме дня']
        // Пояснение показывается при наведении на открытую ячейку
        const THEMES = [
            ['1', 'Перекус', 'Всё по правилам инсты: еду нужно фотографировать эстетично! И даже бокал с пивом можно продать за большие деньги, выбрав нужный ракурс.'],
['2', 'Следы', 'Шрамы, татуировки, родинки, царапины или какие-то ещё отметины на теле. '],
['3', 'Детство', 'Что-то ассоциирующееся с детством или может быть время детских фотографий?'],
['4', 'Запах', 'Вы знаете парфюм персонажа? Или может быть его самый любимый запах? А его источник? Крутим-вертим!'],
['5', 'Инструмент', 'Основной рабочий инструмент. Руки, к слову, тоже подходят.'],
['6', 'Зеркало', 'Фото без лица, но отражающее вашего персонажа - шея, плечи, любые другие изгибы или интерпретации.'],
['7', 'Цветы', 'Цветок по душе или любое растение.'],
['8', 'Страх', 'То, что пугает. Даже если чуть-чуть.'],
['9', 'Враг', 'Не человек, а что-то вокруг: будильник, пробки, неисправный кран, телефон.'],
['10', 'Маска', 'Удостоверение, форма, остатки былых увлечений - что-то из прошлого, говорящее кем персонаж был до сейчас.'],
['11', 'Карман', 'Что-то из карманов: ключи, смятые чеки, зажигалка, пачка сигарет, ваши варианты.'],
['12', 'Сон', 'Как выглядит место для сна? После него или до - смятая кровать или идеально заправленная? Импровизируем.'],
['13', 'Сумка', 'Сумка, рюкзак или что-то ещё вместо них. Как выглядят? Или может быть интереснее увидеть её содержимое?'],
['14', 'Звуки утра', 'Источник звука, приветствующего с утра: будильник? Собака? Соседская машина? Семья?'],
['15', 'Убежище', 'Фото места, где персонаж чувствует себя в безопасности.'],
['16', 'Подарок', 'То, что подарили персонажу, а он это хранит.'],
['17', 'Взгляд', 'Фото глаз крупным планом.'],
['18', 'Знак', 'Надпись, символ или реальный знак, имеющий значение.'],
['19', 'Ритуал', 'Что-то, что входит в рутину персонажа. Кофе? Зарядка? Собака? Машина? Пробежка?'],
['20', 'Горизонт', 'Фото неба, которое бы захотелось сфотографировать персонажу, чтобы запомнить.'],
['21', 'Сломанное', 'Что-то сломанное и имеющее значение. Трещина в стене? На экране телефона? Лопнувший ремешок часов?'],
['22', 'Маршрут', 'Случайный поворот на пути персонажа или может быть его ежедневный путь?'],
['23', 'Свобода', 'Так выглядит свобода. Море? Небо? Машина на большой скорости? Горы? Или может быть всё же город?'],
['24', 'Цвет', 'На фото должен преобладать любимый цвет персонажа, например, желтая машина на фоне стена или красный велосипед на фоне неба.'],
['25', 'Неудобство', 'Какая мелочь может вывести из себя? Дырка на носке? Царапина на машине? Сломавшийся ключ?'],
['26', 'Руки', 'Фото рук персонажа крупным планом.'],
['27', 'Детали', 'Что-то маленькое, но имеющее значение. Отражение в окне? Пятно на скатерти? Разбитая фара машины? Марка сигарет?'],
['28', 'Ссора', 'Как выглядит злость? Разбитая чашка? Закрытая дверь? Непринятый на телефоне? Сбитые костяшки? Напряжение в плечах?'],
            ['29', '🛌 Сон', 'Ложись спать на час раньше'],
            ['30', '🎉 Финал', 'Отпразднуй завершение челленджа!']
        ];
        // ----------------------------------------------------------------

        // Получаем контейнер
        const grid = document.getElementById('instachGrid');

        // Функция для получения "дня челленджа" (1..N) относительно START_DATE
        function getChallengeDay() {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const start = new Date(START_DATE.getFullYear(), START_DATE.getMonth(), START_DATE.getDate());
            
            const diffTime = today.getTime() - start.getTime();
            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
            return diffDays + 1; 
        }

        const currentDay = getChallengeDay();

        function renderGrid() {
            grid.innerHTML = '';

            THEMES.forEach((item, index) => {
                const dayNumber = index + 1;
                const themeId = item[0];
                const themeText = item[1];
                const hintText = item[2] || ''; // пояснение

                const isOpen = dayNumber <= currentDay;

                const cell = document.createElement('div');
                cell.className = `instach-cell ${isOpen ? 'instach-open' : 'instach-closed'}`;

                const dayLabel = document.createElement('div');
                dayLabel.className = 'instach-day-label';
                dayLabel.textContent = `День ${dayNumber}`;

                const dayNumSpan = document.createElement('div');
                dayNumSpan.className = 'instach-day-number';
                dayNumSpan.textContent = dayNumber;

                const themeSpan = document.createElement('div');
                themeSpan.className = 'instach-theme-text';
                themeSpan.textContent = themeText;

                const lockSpan = document.createElement('div');
                lockSpan.className = 'instach-lock-icon';
                lockSpan.textContent = '🔒';

                // пояснение — элемент для всплывающей подсказки
                const hintSpan = document.createElement('div');
                hintSpan.className = 'instach-hint';
                hintSpan.textContent = hintText;

                cell.appendChild(dayLabel);
                cell.appendChild(dayNumSpan);
                cell.appendChild(themeSpan);
                cell.appendChild(lockSpan);
                cell.appendChild(hintSpan);

                grid.appendChild(cell);
            });
        }

        renderGrid();

        // Автообновление каждую минуту (проверка смены дня)
        setInterval(() => {
            renderGrid();
        }, 60000);

        console.log(`Челлендж стартовал ${START_DATE.toLocaleDateString()}. Сегодня день #${getChallengeDay()}`);
    </script>