3 changed files with 0 additions and 657 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -1,173 +0,0 @@
-<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
-# Vibe42 — учебная песочница для лендингов
-
-Workspace юзера `elya.k_2026`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
-
---
-
-## 🎯 ТВОЯ РОЛЬ
-
-Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
-1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/elya.k_2026/<repo>/`,
-2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
-
-Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
-
---
-
-## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
-
-1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
-2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
-   - Промо хобби (фотография / музыка / спорт)
-   - Резюме / personal page с контактами
-   - Афиша мероприятия (концерт, день рождения, мастер-класс)
-   - Меню заведения / прайс услуг
-   - Лендинг продукта или будущего проекта (waitlist)
-3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
-4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
-
---
-
-## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
-
-Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
-
-Скажи: «Давай определимся, я задам 3 коротких вопроса:
-1. Это для тебя лично, для проекта/бизнеса, или для события?
-2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
-3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
-
-После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
-
---
-
-## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
-
-| Запрос | Что делаем вместо |
-|--------|-------------------|
-| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
-| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
-| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
-| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
-| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
-| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
-
-**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
-
---
-
-## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
-
-### A — Промо продукта/услуги
-**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
-
-### B — Personal / резюме
-**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
-
-### C — Афиша мероприятия
-**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
-
-### D — Меню / прайс
-**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
-
-### E — Waitlist для будущего проекта
-**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
-
-Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
-
---
-
-## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
-
-Как только готов первый рабочий вариант (даже грубый):
-
-1. **Сразу запушь:**
-   ```bash
-   git add -A
-   git commit -m "v1"
-   git push origin HEAD:pages
-   ```
-2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
-   > 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/elya.k_2026/<repo>/**
-3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
-4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
-
---
-
-## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
-
-1. **Только статика — HTML + CSS + JS в браузере.**
-2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
-3. **Никакой аутентификации / OAuth / JWT.**
-4. **Никакого Docker, nginx, sudo, системных настроек.**
-5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
-6. **НИКОГДА `git init` в workspace root (`/workspaces/elya.k_2026`)** — это папка-контейнер юзера, не репозиторий.
-
---
-
-## ✅ ВСЕГДА работай через `./new-project`
-
-Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
-
-```bash
-cd /workspaces/elya.k_2026
-./new-project NAME    # создаёт repo в Gitea + клонит локально в ./NAME/
-cd NAME
-# теперь создавай index.html / style.css / script.js внутри ./NAME
-```
-
-`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
-
---
-
-## 🌐 Git и публикация
-
-**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
-
- Профиль юзера: https://git.vibe42.kz/elya.k_2026
- Pages (живые лендинги): https://pages.git.vibe42.kz/elya.k_2026/<repo>/
- Креды уже в `/workspaces/elya.k_2026/.git-credentials` — git push/clone работают без пароля
- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
-
-### Опубликовать лендинг
-
-```bash
-git add -A
-git commit -m "site"
-git push origin HEAD:pages
-```
-
-Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
-
---
-
-## 🔧 Когда что-то идёт не так
-
- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
-
---
-
-## ❌ Чего НЕ делать НИКОГДА
-
- ❌ `git init` в workspace root
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
- ❌ Использовать `gh` CLI или GitHub API
- ❌ Вызывать Gitea Pages-API (его нет)
- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
- ❌ Говорить «это сложно» — переформулируй в простое
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
-
---
-
-## 🎨 design.md
-
-Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
--- a/design.md
+++ b/design.md
@ -1,110 +0,0 @@
-<!-- vibe42-design-version: v1-2026-06-01 -->
-# Design system — Vibe42 песочница
-
-Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
-
-## Палитра
-
-| Token | Hex | Использование |
-|-------|-----|---------------|
-| `--ink` | `#0F1218` | Тёмный фон / основной текст |
-| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
-| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
-| `--white` | `#FFFFFF` | Основной фон |
-| `--gray-500` | `#5B6573` | Вторичный текст |
-| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
-
-## Типографика
-
-```css
-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
-```
-
-| Уровень | Размер | Вес | line-height |
-|---------|--------|-----|-------------|
-| h1 (hero) | 56px | 800 | 1.05 |
-| h2 (section) | 36px | 700 | 1.15 |
-| h3 | 22px | 700 | 1.3 |
-| body | 17px | 400 | 1.6 |
-| small | 14px | 400 | 1.5 |
-
-На мобиле — h1 уменьши до 36px, h2 до 28px.
-
-## Лейаут
-
- max-width контента: **1140px** (контейнер с padding по бокам)
- секция: `padding: 80px 24px` (мобила: `48px 20px`)
- gap между блоками внутри секции: `24-32px`
- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
-
-## Кнопки
-
-```css
-.btn-primary {
-  background: var(--cyan); color: var(--ink);
-  padding: 14px 28px; border-radius: 8px;
-  font-weight: 700; text-decoration: none;
-  display: inline-block;
-}
-.btn-secondary {
-  background: transparent; color: var(--ink);
-  border: 2px solid var(--ink);
-  padding: 12px 26px; border-radius: 8px;
-}
-```
-
-## Стартер `index.html`
-
-```html
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Мой проект</title>
-<style>
-:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
-*{box-sizing:border-box;margin:0;padding:0}
-body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
-.container{max-width:1140px;margin:0 auto;padding:80px 24px}
-.hero{background:var(--ink);color:var(--white)}
-.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
-.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
-.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
-.btn:hover{background:#1be5ff}
-.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
-.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
-@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
-</style>
-</head>
-<body>
-<section class="hero">
-  <div class="container">
-    <h1>Заголовок проекта</h1>
-    <p>Подзаголовок — пара предложений о чём это.</p>
-    <a class="btn" href="#section">Начать</a>
-  </div>
-</section>
-<section id="section" class="section">
-  <div class="container">
-    <h2>Секция</h2>
-    <div class="card">Контент карточки.</div>
-    <div class="card">Контент карточки.</div>
-  </div>
-</section>
-</body>
-</html>
-```
-
-## Чем НЕ пользоваться
-
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
- jQuery — vanilla JS более чем достаточно
-
-## Чем МОЖНО (если очень надо)
-
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
- **Lottie animations через CDN**
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
- **Шрифты Google Fonts через `<link>`** в head
--- a/index.html
+++ b/index.html
@ -1,374 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Проверенные рецепты</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
-<style>
-:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--bg:#fff;--card-bg:#F2F4F7;--hero-bg:#0F1218;--hero-text:#fff;--hero-p:#9aa3b2;--border:#E2E6EB;--input-bg:#fff;--shadow:0 2px 12px rgba(0,0,0,0.06)}
-body.dark{--ink:#EDF2F7;--cyan:#00E5FF;--cyan-50:#1a2a35;--white:#0F1218;--gray-500:#8892A0;--gray-100:#1A202C;--bg:#0F1218;--card-bg:#1A202C;--hero-bg:#0a0c10;--hero-text:#EDF2F7;--hero-p:#8892A0;--border:#2D3748;--input-bg:#1A202C;--shadow:0 2px 12px rgba(0,0,0,0.3)}
-*{box-sizing:border-box;margin:0;padding:0}
-body{font:17px/1.6 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);transition:background .3s,color .3s}
-.container{max-width:1140px;margin:0 auto;padding:0 24px}
-/* Header */
-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);background:rgba(255,255,255,0.9)}
-body.dark header{background:rgba(15,18,24,0.9)}
-.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
-.logo{font-size:22px;font-weight:800;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
-.logo span{color:var(--cyan)}
-nav{display:flex;gap:24px;font-size:15px;font-weight:600}
-nav a{text-decoration:none;color:var(--gray-500);transition:color .2s}
-nav a:hover{color:var(--cyan)}
-.header-actions{display:flex;align-items:center;gap:12px}
-.search-box{display:flex;align-items:center;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;padding:0 12px;transition:border .2s}
-.search-box:focus-within{border-color:var(--cyan)}
-.search-box input{border:none;background:transparent;padding:8px 4px;font-size:14px;outline:none;color:var(--ink);width:140px}
-.search-box input::placeholder{color:var(--gray-500)}
-.search-box button{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;color:var(--gray-500)}
-.theme-toggle{background:none;border:1px solid var(--border);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border .2s}
-.theme-toggle:hover{border-color:var(--cyan)}
-/* Hero */
-.hero{background:var(--hero-bg);color:var(--hero-text);padding:80px 0;position:relative;overflow:hidden}
-.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,0.08),transparent 70%);pointer-events:none}
-.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
-.hero h1{font-size:52px;font-weight:800;line-height:1.05;margin-bottom:20px}
-.hero h1 span{color:var(--cyan)}
-.hero p{font-size:19px;color:var(--hero-p);max-width:520px;margin-bottom:32px;line-height:1.7}
-.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
-.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s}
-.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,0.25)}
-.btn-primary{background:var(--cyan);color:var(--ink)}
-.btn-secondary{background:transparent;color:var(--hero-text);border:2px solid rgba(255,255,255,0.2)}
-.btn-secondary:hover{background:rgba(255,255,255,0.05);box-shadow:none}
-.hero-img{width:100%;border-radius:20px;background:linear-gradient(135deg,#1A202C,#2D3748);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:80px;position:relative;overflow:hidden}
-.hero-img img{width:100%;height:100%;object-fit:cover;border-radius:20px}
-.hero-img-placeholder{font-size:100px;opacity:0.3}
-/* Sections */
-.section{padding:80px 0}
-.section-header{text-align:center;margin-bottom:48px}
-.section-header h2{font-size:36px;font-weight:700;margin-bottom:12px}
-.section-header p{color:var(--gray-500);max-width:600px;margin:0 auto;font-size:17px}
-/* Categories */
-.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
-.cat-card{background:var(--card-bg);border-radius:16px;padding:24px 16px;text-align:center;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;border:1px solid var(--border)}
-.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
-.cat-card .emoji{font-size:40px;display:block;margin-bottom:10px}
-.cat-card .name{font-weight:700;font-size:15px}
-.cat-card .count{font-size:13px;color:var(--gray-500);margin-top:4px}
-/* Recipe card */
-.featured-recipe{background:var(--card-bg);border-radius:20px;overflow:hidden;border:1px solid var(--border)}
-.featured-recipe-img{width:100%;height:340px;background:linear-gradient(135deg,#2D3748,#1A202C);display:flex;align-items:center;justify-content:center;font-size:120px;position:relative;overflow:hidden}
-.featured-recipe-img img{width:100%;height:100%;object-fit:cover}
-.featured-recipe-body{padding:40px}
-.recipe-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:24px;font-size:14px}
-.recipe-meta-item{display:flex;align-items:center;gap:6px;color:var(--gray-500)}
-.recipe-meta-item strong{color:var(--ink)}
-.recipe-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
-.recipe-section-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
-.ingredients-table{width:100%;border-collapse:collapse;font-size:15px}
-.ingredients-table td{padding:10px 0;border-bottom:1px solid var(--border)}
-.ingredients-table td:last-child{text-align:right;font-weight:600}
-.steps-list{list-style:none;counter-reset:step}
-.steps-list li{counter-increment:step;padding:16px 0 16px 48px;position:relative;border-bottom:1px solid var(--border)}
-.steps-list li::before{content:counter(step);position:absolute;left:0;top:16px;width:32px;height:32px;background:var(--cyan);color:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
-.step-img{width:100%;height:120px;background:var(--gray-100);border-radius:8px;margin-top:10px;display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--gray-500);overflow:hidden}
-.step-img img{width:100%;height:100%;object-fit:cover}
-.tips-box{background:var(--cyan-50);border-radius:12px;padding:24px;margin-top:24px}
-.tips-box h4{font-weight:700;margin-bottom:12px;font-size:16px}
-.tips-box ul{list-style:none}
-.tips-box li{padding:6px 0;padding-left:24px;position:relative}
-.tips-box li::before{content:'✅';position:absolute;left:0}
-.notes-box{background:var(--card-bg);border-radius:12px;padding:24px;margin-top:16px;border:1px solid var(--border);font-style:italic;color:var(--gray-500)}
-/* Popular */
-.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
-.pop-card{background:var(--card-bg);border-radius:16px;overflow:hidden;border:1px solid var(--border);transition:transform .25s,box-shadow .25s}
-.pop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
-.pop-card-img{height:200px;background:linear-gradient(135deg,#2D3748,#1A202C);display:flex;align-items:center;justify-content:center;font-size:60px}
-.pop-card-img img{width:100%;height:100%;object-fit:cover}
-.pop-card-body{padding:20px}
-.pop-card-body h3{font-size:18px;font-weight:700;margin-bottom:6px}
-.pop-card-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--gray-500)}
-.stars{color:#F59E0B}
-/* About */
-.about-content{max-width:700px;margin:0 auto;text-align:center;font-size:18px;color:var(--gray-500);line-height:1.8}
-.about-content strong{color:var(--ink)}
-/* Search results */
-.search-results{display:none;padding:40px 0}
-.search-results.active{display:block}
-.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px}
-.search-result-item{display:none;background:var(--card-bg);border-radius:12px;padding:20px;border:1px solid var(--border)}
-.search-result-item.visible{display:block}
-/* Footer */
-footer{background:var(--hero-bg);color:var(--hero-text);padding:40px 0;text-align:center}
-footer p{color:var(--hero-p);font-size:14px}
-footer .social{display:flex;justify-content:center;gap:16px;margin-bottom:16px}
-footer .social a{color:var(--hero-text);text-decoration:none;font-size:14px;opacity:.7;transition:opacity .2s}
-footer .social a:hover{opacity:1;color:var(--cyan)}
-/* Mobile */
-@media (max-width:768px){
-.hero-grid{grid-template-columns:1fr;gap:32px}
-.hero h1{font-size:34px}
-.hero{padding:48px 0}
-.section{padding:48px 0}
-.recipe-grid{grid-template-columns:1fr}
-.featured-recipe-body{padding:24px}
-.featured-recipe-img{height:200px}
-.section-header h2{font-size:28px}
-.categories-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
-.popular-grid{grid-template-columns:1fr}
-.header-inner{flex-wrap:wrap;height:auto;padding:12px 0;gap:12px}
-nav{order:3;width:100%;overflow-x:auto;display:flex;gap:16px;padding-bottom:4px}
-nav a{white-space:nowrap;font-size:14px}
-.search-box input{width:100px}
-}
-@media (max-width:640px){
-.hero h1{font-size:28px}
-.container{padding:0 16px}
-.categories-grid{grid-template-columns:repeat(4,1fr);gap:10px}
-.cat-card{padding:16px 8px}
-.cat-card .emoji{font-size:28px}
-}
-</style>
-</head>
-<body>
-
-<header>
-<div class="container header-inner">
-  <a href="#" class="logo">🍳 <span>Проверенные</span> рецепты</a>
-  <nav>
-    <a href="#categories">Категории</a>
-    <a href="#recipe">Рецепт</a>
-    <a href="#popular">Популярные</a>
-    <a href="#about">О проекте</a>
-  </nav>
-  <div class="header-actions">
-    <div class="search-box">
-      <input type="text" id="searchInput" placeholder="Поиск рецептов..." oninput="doSearch(this.value)">
-      <button onclick="doSearch(document.getElementById('searchInput').value)">🔍</button>
-    </div>
-    <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Тёмная тема">🌙</button>
-  </div>
-</div>
-</header>
-
-<section class="hero">
-<div class="container hero-grid">
-  <div>
-    <h1>Только рецепты,<br>которые я <span>приготовила лично</span></h1>
-    <p>Добро пожаловать в мою коллекцию проверенных рецептов. Каждый рецепт приготовлен лично и содержит реальные советы и фотографии результата.</p>
-    <div class="hero-btns">
-      <a href="#categories" class="btn btn-primary">🍽️ Смотреть рецепты</a>
-      <a href="#about" class="btn btn-secondary">О проекте</a>
-    </div>
-  </div>
-  <div class="hero-img">
-    <div class="hero-img-placeholder">🍳</div>
-  </div>
-</div>
-</section>
-
-<!-- Search Results -->
-<section class="search-results active" id="searchResults">
-<div class="container">
-  <div class="section-header">
-    <h2>🔍 Результаты поиска</h2>
-    <p id="searchStatus">Введите название или ингредиент</p>
-  </div>
-  <div class="search-results-grid" id="searchResultsGrid"></div>
-</div>
-</section>
-
-<section id="categories" class="section">
-<div class="container">
-  <div class="section-header">
-    <h2>📂 Категории</h2>
-    <p>Выбери категорию и найди любимое блюдо</p>
-  </div>
-  <div class="categories-grid">
-    <a href="#" class="cat-card" data-cat="bake"><span class="emoji">🥐</span><span class="name">Выпечка</span><span class="count">12 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="soup"><span class="emoji">🍲</span><span class="name">Супы</span><span class="count">8 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="meat"><span class="emoji">🥩</span><span class="name">Мясные блюда</span><span class="count">15 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="salad"><span class="emoji">🥗</span><span class="name">Салаты</span><span class="count">10 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="pasta"><span class="emoji">🍝</span><span class="name">Паста</span><span class="count">6 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="dessert"><span class="emoji">🍰</span><span class="name">Десерты</span><span class="count">14 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="fast"><span class="emoji">⚡</span><span class="name">Быстрые рецепты</span><span class="count">9 рецептов</span></a>
-    <a href="#" class="cat-card" data-cat="holiday"><span class="emoji">🎉</span><span class="name">Праздничные</span><span class="count">7 рецептов</span></a>
-  </div>
-</div>
-</section>
-
-<section id="recipe" class="section" style="padding-top:0">
-<div class="container">
-  <div class="section-header">
-    <h2>🍕 Домашняя пицца</h2>
-    <p>Классический рецепт итальянской пиццы на тонком тесте</p>
-  </div>
-  <div class="featured-recipe">
-    <div class="featured-recipe-img">
-      <span style="font-size:80px;opacity:0.3">🍕</span>
-    </div>
-    <div class="featured-recipe-body">
-      <div class="recipe-meta">
-        <span class="recipe-meta-item">⏱️ <strong>2 часа</strong></span>
-        <span class="recipe-meta-item">📊 Сложность: <strong>Средняя</strong></span>
-        <span class="recipe-meta-item">🍽️ Порций: <strong>4</strong></span>
-        <span class="recipe-meta-item">✅ Проверено: <strong>5 приготовлений</strong></span>
-      </div>
-      <div class="recipe-grid">
-        <div>
-          <div class="recipe-section-title">🧂 Ингредиенты</div>
-          <table class="ingredients-table">
-            <tr><td>Мука пшеничная</td><td>500 г</td></tr>
-            <tr><td>Вода тёплая</td><td>300 мл</td></tr>
-            <tr><td>Дрожжи сухие</td><td>7 г</td></tr>
-            <tr><td>Соль</td><td>10 г</td></tr>
-            <tr><td>Оливковое масло</td><td>2 ст.л.</td></tr>
-            <tr><td>Томатный соус</td><td>100 г</td></tr>
-            <tr><td>Моцарелла</td><td>200 г</td></tr>
-            <tr><td>Базилик свежий</td><td>по вкусу</td></tr>
-          </table>
-        </div>
-        <div>
-          <div class="recipe-section-title">👩‍🍳 Приготовление</div>
-          <ol class="steps-list">
-            <li>Смешайте муку и дрожжи. Добавьте соль.<div class="step-img"><span>📸</span></div></li>
-            <li>Добавьте тёплую воду и оливковое масло. Замесите тесто.<div class="step-img"><span>📸</span></div></li>
-            <li>Оставьте тесто под плёнкой на 1 час — оно должно удвоиться.<div class="step-img"><span>📸</span></div></li>
-            <li>Раскатайте тесто, выложите соус и начинку.<div class="step-img"><span>📸</span></div></li>
-            <li>Выпекайте 12-15 минут при 250°C.<div class="step-img"><span>📸</span></div></li>
-          </ol>
-        </div>
-      </div>
-      <div class="tips-box">
-        <h4>💡 Советы автора</h4>
-        <ul>
-          <li>Лучше использовать муку с содержанием белка от 12%</li>
-          <li>После выпечки дать пицце отдохнуть 3–5 минут</li>
-          <li>Пеките на максимально разогретом противне</li>
-        </ul>
-      </div>
-      <div class="notes-box">
-        📝 <strong>Мои заметки:</strong> Готовила 5 раз. Лучший результат получился при температуре духовки 250°C. В следующий раз попробую с камамбером.
-      </div>
-    </div>
-  </div>
-</div>
-</section>
-
-<section id="popular" class="section">
-<div class="container">
-  <div class="section-header">
-    <h2>⭐ Популярные рецепты</h2>
-    <p>Лучшее по версии читателей</p>
-  </div>
-  <div class="popular-grid">
-    <div class="pop-card">
-      <div class="pop-card-img"><span>🍕</span></div>
-      <div class="pop-card-body">
-        <h3>Домашняя пицца</h3>
-        <div class="pop-card-meta"><span class="stars">⭐ 4.9</span><span>⏱️ 2 ч</span></div>
-      </div>
-    </div>
-    <div class="pop-card">
-      <div class="pop-card-img"><span>🍯</span></div>
-      <div class="pop-card-body">
-        <h3>Медовик</h3>
-        <div class="pop-card-meta"><span class="stars">⭐ 4.8</span><span>⏱️ 3 ч</span></div>
-      </div>
-    </div>
-    <div class="pop-card">
-      <div class="pop-card-img"><span>🍲</span></div>
-      <div class="pop-card-body">
-        <h3>Борщ</h3>
-        <div class="pop-card-meta"><span class="stars">⭐ 4.7</span><span>⏱️ 1.5 ч</span></div>
-      </div>
-    </div>
-  </div>
-</div>
-</section>
-
-<section id="about" class="section">
-<div class="container">
-  <div class="section-header">
-    <h2>👩‍🍳 О проекте</h2>
-  </div>
-  <div class="about-content">
-    <p>Меня зовут <strong>[Твоё имя]</strong>. Я люблю готовить и публикую только те рецепты, которые лично проверила на своей кухне. Никаких непроверенных советов — только то, что действительно работает.</p>
-    <br>
-    <p>Каждый рецепт здесь — это минимум 2-3 приготовления, реальные фото и честные заметки. Если что-то пошло не по плану, я тоже об этом пишу 🙃</p>
-  </div>
-</div>
-</section>
-
-<footer>
-<div class="container">
-  <div class="social">
-    <a href="#">Instagram</a>
-    <a href="#">Telegram</a>
-    <a href="#">VK</a>
-    <a href="#">YouTube</a>
-  </div>
-  <p>🍳 Проверенные рецепты — только то, что приготовлено лично</p>
-  <p style="margin-top:8px;font-size:13px">© 2026</p>
-</div>
-</footer>
-
-<script>
-// Theme
-function toggleTheme(){
-  document.body.classList.toggle('dark');
-  const btn = document.getElementById('themeBtn');
-  btn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
-  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
-}
-if(localStorage.getItem('theme')==='dark'){document.body.classList.add('dark');document.getElementById('themeBtn').textContent='☀️'}
-
-// Recipe data for search
-const recipes = [
-  {name:'Домашняя пицца',cat:'Выпечка',time:'2 ч',rating:'4.9',emoji:'🍕',ingredients:'мука дрожжи моцарелла томатный соус базилик'},
-  {name:'Медовик',cat:'Десерты',time:'3 ч',rating:'4.8',emoji:'🍯',ingredients:'мука мёд сметана сахар масло'},
-  {name:'Борщ',cat:'Супы',time:'1.5 ч',rating:'4.7',emoji:'🍲',ingredients:'свёкла капуста картофель мясо морковь'},
-  {name:'Куриный суп',cat:'Супы',time:'1 ч',rating:'4.5',emoji:'🍜',ingredients:'курица лапша морковь лук'},
-  {name:'Курица в духовке',cat:'Мясные блюда',time:'1.5 ч',rating:'4.6',emoji:'🍗',ingredients:'курица чеснок розмарин лимон'},
-  {name:'Курица терияки',cat:'Мясные блюда',time:'40 мин',rating:'4.7',emoji:'🍛',ingredients:'курица соевый соус мёд кунжут'},
-  {name:'Паста карбонара',cat:'Паста',time:'25 мин',rating:'4.8',emoji:'🍝',ingredients:'спагетти яйцо бекон пармезан'},
-  {name:'Цезарь',cat:'Салаты',time:'20 мин',rating:'4.6',emoji:'🥗',ingredients:'курица салат пармезан сухарики'},
-  {name:'Блины',cat:'Выпечка',time:'40 мин',rating:'4.7',emoji:'🥞',ingredients:'мука молоко яйца сахар'},
-  {name:'Шарлотка',cat:'Десерты',time:'1 ч',rating:'4.5',emoji:'🍎',ingredients:'яблоки мука сахар яйца'},
-];
-
-function doSearch(query){
-  const q = query.trim().toLowerCase();
-  const section = document.getElementById('searchResults');
-  const grid = document.getElementById('searchResultsGrid');
-  const status = document.getElementById('searchStatus');
-  grid.innerHTML = '';
-  if(!q){section.classList.remove('active');status.textContent='Введите название или ингредиент';return}
-  section.classList.add('active');
-  const results = recipes.filter(r => r.name.toLowerCase().includes(q) || r.ingredients.toLowerCase().includes(q) || r.cat.toLowerCase().includes(q) || r.time.includes(q));
-  if(results.length===0){
-    status.textContent='😕 Ничего не найдено. Попробуй другое слово.';
-    return
-  }
-  status.textContent=`Найдено ${results.length} рецепт${results.length>1?'ов':''}:`;
-  results.forEach(r => {
-    const div = document.createElement('div');
-    div.className='search-result-item visible';
-    div.innerHTML=`<div style="display:flex;align-items:center;gap:12px"><span style="font-size:36px">${r.emoji}</span><div><h3 style="font-size:17px;font-weight:700">${r.name}</h3><div style="font-size:13px;color:var(--gray-500)">${r.cat} · ⏱️ ${r.time} · ⭐ ${r.rating}</div></div></div>`;
-    grid.appendChild(div);
-  });
-}
-
-// Smooth scroll
-document.querySelectorAll('a[href^="#"]').forEach(a => {
-  a.addEventListener('click', function(e){
-    const target = document.querySelector(this.getAttribute('href'));
-    if(target){e.preventDefault();target.scrollIntoView({behavior:'smooth',block:'start'})}
-  })
-});
-</script>
-</body>
-</html>