:root { color-scheme: light dark; --fg: #1a1a1a; --bg: #f5f6f8; --card: #fff; --accent: #4688f1; --muted: #666; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #14161a; --card: #1e2126; --muted: #aaa; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; }
main.card { max-width: 480px; margin: 40px auto; padding: 28px 24px; background: var(--card); border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.08); text-align: center; }
.eyebrow { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 4px 0 8px; font-size: 26px; word-break: break-all; }
h1 small { font-size: 15px; color: var(--muted); font-weight: normal; }
.notes { white-space: pre-wrap; text-align: left; }
.released { color: var(--muted); font-size: 13px; }
.qr { margin: 16px auto; width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 12px; }
.qr svg { display: block; width: 100%; height: 100%; }
a.button { display: inline-block; padding: 12px 24px; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; min-height: 44px; }
.alt, .hint { font-size: 13px; color: var(--muted); }
a { color: var(--accent); }
code { background: rgba(128,128,128,.15); padding: 1px 5px; border-radius: 4px; }