:root { color-scheme: dark; --bg: #0b0d12; --card: #141821; --line: #232836; --text: #e9ecf3; --dim: #8b93a7; --accent: #4f7cff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, #1a2340, var(--bg)); color: var(--text);
       font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Segoe UI", sans-serif; }
.card { width: min(440px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 36px 32px 24px; text-align: center;
        box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.logo { border-radius: 22px; }
h1 { font-size: 21px; margin: 18px 0 6px; }
.lead { color: var(--dim); margin: 0 0 22px; }
.code { font: 600 22px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; margin: 6px 0 22px; }
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.btn:hover { border-color: #3a4256; }
.btn.primary { display: block; background: var(--accent); border-color: var(--accent); color: #fff; padding: 13px 16px; font-size: 16px; }
.btn.primary:hover { filter: brightness(1.08); }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 6px; }
.row .btn { flex: 1 1 160px; font-size: 14px; }
.hint { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
details { text-align: left; margin-top: 16px; color: var(--dim); font-size: 13px; }
summary { cursor: pointer; }
.foot { color: var(--dim); font-size: 12px; margin-top: 22px; }
.foot a { color: var(--dim); }