:root { --bg: #f6f4ef; --card: #ffffff; --text: #1f2a24; --sub: #5d6a63; --line: #e3e0d6; --accent: #2f6f4f; --accent-text: #ffffff; --code-bg: #eef3ee; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121714; --card: #1b221e; --text: #eef2ee; --sub: #a3b0a8; --line: #2c3631; --accent: #6fc39a; --accent-text: #0e1a13; --code-bg: #232d27; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.card { width: 100%; max-width: 480px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 15px; margin: 24px 0 8px; color: var(--sub); font-weight: 600; }
.lead { color: var(--sub); margin: 0 0 16px; }
.code-box { background: var(--code-bg); border-radius: 12px; padding: 14px 16px; text-align: center; }
.code { font: 600 22px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; word-break: break-all; }
.btn { display: block; width: 100%; margin-top: 12px; padding: 13px 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; background: var(--accent); color: var(--accent-text); }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
ol { padding-left: 1.3em; margin: 0; }
li { margin: 6px 0; }
.note { color: var(--sub); font-size: 14px; margin-top: 18px; }
.hidden { display: none; }
.err { color: #b3261e; }
@media (prefers-color-scheme: dark) { .err { color: #f2b8b5; } }