инструкция
В <main> добавь <div class="quiz" style="width: 100%; max-width: 560px;">. Внутри первый экран <div class="screen screen-start" id="screen-start"> со стилями: padding 48px 40px; background rgba(255,255,255,0.05); backdrop-filter blur(20px); border 1px solid rgba(255,255,255,0.1); border-radius 24px; text-align center; box-shadow 0 24px 60px rgba(56,189,248,0.1). Внутри: <div class="kicker" style="font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #38bdf8; margin-bottom: 18px;">ВИКТОРИНА</div>. <h1 style="font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px;">Что ты знаешь о вайбкодинге?</h1>. <p style="font-size: 16px; color: rgba(240,244,255,0.65); line-height: 1.5; margin-bottom: 32px;">5 вопросов, ~2 минуты. Без таймера, можно подумать. Никаких подвохов — все вопросы по теме.</p>. <button id="start-btn" style="padding: 14px 36px; background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #0c1220; border: none; border-radius: 12px; font-weight: 800; font-size: 16px; letter-spacing: 0.02em; cursor: pointer; transition: all 0.2s; box-shadow: 0 8px 20px rgba(56,189,248,0.3);">Начать →</button>. На :hover transform translateY(-2px) и больше тень.
что обратить внимание
- ›Старт с описанием времени («5 вопросов, ~2 минуты») снижает тревогу — пользователь знает что он подписывается
- ›Большая яркая кнопка-CTA с градиентом — визуальный фокус, явный call-to-action
- ›box-shadow с цветом акцента — карточка выглядит «в палитре», а не висит в воздухе