:root { --ink: #1d2433; --soft: #5b6476; --sky: #cfe3f7; --sky2: #f7dcc8; --card: #ffffff; --accent: #e8553e; --ground: #f4f1ec; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef1f7; --soft: #aab3c4; --sky: #2b3b63; --sky2: #5a3b52; --card: #1c2233; --ground: #12161f; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--ground); color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.card { width: 100%; max-width: 420px; background: var(--card); border-radius: 28px; padding: 0 24px 28px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(20, 30, 60, .10); text-align: center; }
.sky { height: 120px; margin: 0 -24px 20px; background: linear-gradient(180deg, var(--sky), var(--sky2)); position: relative; }
.sky::after { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #ffd27a; right: 56px; top: 30px; }
h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.01em; }
p { margin: 0 0 14px; color: var(--soft); }
.code { font: 600 30px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .18em; padding: 16px 12px; margin: 6px 0 18px;
  border-radius: 16px; background: var(--ground); color: var(--ink); user-select: all; }
.steps { text-align: left; margin: 0 0 18px; padding-left: 22px; color: var(--ink); }
.steps li { margin: 6px 0; }
.button { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 999px; }
.button[hidden] { display: none; }
.small { font-size: 14px; }