@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/unbounded-cyrillic-700-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/unbounded-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}

:root {
  color-scheme: dark light;
  --bg: #15130e;
  --surface: #1e1b15;
  --surface-2: #2c2822;
  --line: #37332c;
  --line-strong: #4a4438;
  --fg: #eae1d2;
  --muted: #cfc6b4;
  --faint: #989080;
  --accent: #ebc15b;
  --on-accent: #3e2e00;
  --accent-soft: #52452a;
  --accent-soft-fg: #f4e0bc;
  --warn: #f0913f;
  --ok: #8fd18f;
  --radius: 20px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f2e9;
    --surface: #fffdf8;
    --surface-2: #efe9dc;
    --line: #e0d8c8;
    --line-strong: #cabfa9;
    --fg: #1d1a13;
    --muted: #5c5445;
    --faint: #8a8271;
    --accent: #d9a92c;
    --on-accent: #2b2000;
    --accent-soft: #f7ebc9;
    --accent-soft-fg: #4a3a08;
    --warn: #a9540d;
    --ok: #2f7a3f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: max(24px, env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { max-width: 480px; margin: 0 auto; }

header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

header img { width: 44px; height: 44px; border-radius: 12px; }

header h1 {
  font: 700 20px/1.2 Unbounded, Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
}

header p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}

.card[hidden] { display: none; }

.card h2 {
  font: 700 17px/1.3 Unbounded, Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.card p:last-child { margin-bottom: 0; }

.step {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft-fg);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

ol { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 14px; }
li { margin-bottom: 8px; }
li::marker { color: var(--faint); }

button {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  font: 600 15px/1 Inter, system-ui, sans-serif;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

button:hover { filter: brightness(1.06); }
button:active { transform: scale(0.985); }

button.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  font-weight: 500;
  margin-top: 10px;
}

button.ghost:hover { border-color: var(--faint); filter: none; }

.done {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 16px/1.3 Unbounded, Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ok);
}

.warn { color: var(--warn); }

code {
  display: block;
  margin-top: 14px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  word-break: break-all;
  white-space: pre-wrap;
  overflow-x: auto;
}

footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.8;
}

footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }