инструкция
В <main> вставь <div class="card"> с фиксированной шириной max-width 420px, padding 48px 40px, background rgba(255,255,255,0.04), backdrop-filter blur(20px), border 1px solid rgba(245,243,255,0.08), border-radius 24px, box-shadow 0 24px 60px rgba(167,139,250,0.15), text-align center. Внутри сверху <span class="kicker"> с font-size 11px, letter-spacing 0.18em, text-transform uppercase, color rgba(245,243,255,0.5), font-weight 700, margin-bottom 12px, display block — текст «ФОКУС-ТАЙМЕР». Под ним <h1 id="phase"> font-size 22px, font-weight 700, margin-bottom 4px — текст «Работа». Под ним <p class="phase-sub" id="phase-sub"> font-size 13px, color rgba(245,243,255,0.55), margin-bottom 32px — текст «25 минут глубокой концентрации». Это база на которой дальше всё строится.
что обратить внимание
- ›backdrop-filter blur(20px) даёт стеклянный эффект — стандартная фишка современных интерфейсов
- ›box-shadow с цветом акцента (rgba(167,139,250,0.15)) делает карточку «парящей» в той же палитре
- ›Маленький UPPERCASE-кикер сверху — визуальный паттерн который читается «секция / категория»