:root {
  color-scheme: light dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #f4f7fb;
  color: #162033;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: 24px 16px 56px; }
.languages { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
button, .action { min-height: 48px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; }
button { padding: 0 16px; background: #e4ebf7; color: #24324a; }
button[aria-pressed="true"] { background: #154cc7; color: white; }
header { text-align: center; padding: 40px 0 24px; }
.logo { display: grid; place-items: center; width: 72px; height: 72px; margin: auto; border-radius: 22px; background: #167447; color: white; font-size: 44px; }
h1 { margin: 16px 0 6px; font-size: clamp(2rem, 7vw, 3.3rem); }
header p { font-size: 1.15rem; }
.steps { display: grid; gap: 14px; }
article { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 20px; border-radius: 22px; background: white; box-shadow: 0 8px 30px #1d315112; }
.number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #e8efff; color: #154cc7; font-size: 1.4rem; font-weight: 800; }
h2 { margin: 0 0 5px; font-size: 1.25rem; }
article p { margin: 0; line-height: 1.45; color: #526078; }
.action { display: grid; place-items: center; padding: 0 20px; background: #154cc7; color: white; text-decoration: none; text-align: center; }
article img { width: 110px; height: 110px; grid-column: 3; }
.done { padding: 22px; border-radius: 18px; background: #dff6e9; color: #125733; text-align: center; font-size: 1.15rem; font-weight: 800; }
[dir="rtl"] article { grid-template-columns: auto 1fr 56px; }
[dir="rtl"] .number { grid-column: 3; grid-row: 1; }
[dir="rtl"] article div { grid-column: 2; grid-row: 1; }
[dir="rtl"] .action, [dir="rtl"] article img { grid-column: 1; }

@media (max-width: 640px) {
  article { grid-template-columns: 52px 1fr; }
  .action { grid-column: 1 / -1; }
  article img { display: none; }
  [dir="rtl"] article { grid-template-columns: 1fr 52px; }
  [dir="rtl"] .number { grid-column: 2; }
  [dir="rtl"] article div { grid-column: 1; }
  [dir="rtl"] .action { grid-column: 1 / -1; }
}

@media (prefers-color-scheme: dark) {
  :root { background: #101622; color: #f5f7fb; }
  article { background: #1b2433; }
  article p { color: #bdc7d8; }
  button { background: #2a3548; color: #f5f7fb; }
  .done { background: #123d2a; color: #b8f0d0; }
}