:root { --ground: #f4f3ef; --surface: #ffffff; --ink: #131418; --ink-2: #5c5f66; --line: #e2e0d9; --lime: #86ff00; --lime-ink: #131418; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --ground: #0d0e11; --surface: #17191e; --ink: #f4f3ef; --ink-2: #a7a9b0; --line: #2a2c33; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.5 system-ui, -apple-system, "SF Arabic", sans-serif; }
main { max-width: 480px; margin: 0 auto; padding: 48px 20px 64px; display: grid; gap: 20px; }
h1 { font-size: 30px; line-height: 1.15; margin: 0; }
p { margin: 0; color: var(--ink-2); }
.code { font: 700 28px/1 ui-monospace, Menlo, monospace; letter-spacing: 4px; direction: ltr; text-align: center; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.primary, .secondary { display: block; width: 100%; min-height: 52px; border-radius: 999px; font: 700 15px/52px system-ui, sans-serif; text-align: center; text-decoration: none; border: 0; cursor: pointer; }
.primary { background: var(--lime); color: var(--lime-ink); }
.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
ol { margin: 0; padding-inline-start: 22px; color: var(--ink-2); display: grid; gap: 6px; }
.note { font-size: 14px; }
[hidden] { display: none !important; }