/* Hallmark · shape: Long Document (four lesson steps on one page) · genre: editorial · theme: custom, the Kalinka brand guide tokens of the landing (tokens.css) · job: show the lesson format before sign-up · nav: logo, sign in, start · signature: lesson steps as cards with their sources and check dates · axes: light/grotesk-sans/cool · posture: settled · surface: absolute · contrast: pass · v2.0.0 */
/* Open Reflex 1 (Inter as the display face) by the owner's decision of 03.11.2026, as on the landing. */
/* Открытый фрагмент урока модуля 6 (/preview): шаги урока карточками на токенах лендинга
 * (tokens.css: только цвета руководства Kalinka и Inter). Страницу генерирует
 * player/tools/build_preview.py из содержания модуля. */
.preview { padding-block: var(--space-xl) var(--space-2xl); max-width: 840px; }
.preview h1 { margin-top: var(--space-xs); text-wrap: balance; }
.preview .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.preview__note { margin-top: var(--space-lg); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); max-width: none; }
.preview__steps { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.step { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper); }
.step h2 { margin-top: var(--space-xs); font-size: var(--text-h3); line-height: 1.3; max-width: none; text-wrap: balance; }
.step__label { font-size: var(--text-caption); font-weight: 600; color: var(--color-muted); }
.step__body { margin-top: var(--space-md); }
.step__body p + p, .step__body p + ul, .step__body ul + p { margin-top: var(--space-sm); }
.step__body ul { margin: var(--space-sm) 0 0; padding-left: 1.25em; }
.step__body li + li { margin-top: var(--space-2xs); }
.step__sources { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.step__sources ul { margin: var(--space-xs) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-caption); }
.step__checked { display: block; color: var(--color-muted); }
.preview__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (max-width: 40rem) { .step { padding: var(--space-md); } }