:root { --accent: #0a84ff; --dim: rgba(255,255,255,.7); --faint: rgba(255,255,255,.45); --hair: rgba(255,255,255,.14); --ease: cubic-bezier(.32,.72,0,1); }
* { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #fff; }
body { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; font: 300 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
main { width: min(480px, 100%); text-align: center; }
img.icon { width: 96px; height: 96px; }
h1 { font-weight: 200; font-size: 34px; line-height: 1.3; margin: 24px 0 0; }
p { color: var(--dim); margin: 14px 0 0; }
.key { margin-top: 28px; padding: 18px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); text-align: left; }
.key code { display: block; font: 12.5px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; color: #fff; user-select: all; }
.row { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 64px; background: var(--accent); color: #fff; padding: 11px 20px; font: 400 14.4px/1.2 inherit; font-family: inherit; border: 0; cursor: pointer; text-decoration: none; transition: background-color .35s var(--ease), transform .5s var(--ease); }
.btn:hover { background: #3d9dff; } .btn:active { transform: scale(.97); }
.btn.ghost { background: rgba(255,255,255,.1); } .btn.ghost:hover { background: rgba(255,255,255,.16); }
ol { text-align: left; color: var(--dim); margin: 22px auto 0; padding-left: 22px; max-width: 380px; }
.small { font-size: 13px; color: var(--faint); margin-top: 26px; }
a { color: #fff; }
.spin { width: 22px; height: 22px; margin: 28px auto 0; border-radius: 50%; border: 2px solid var(--hair); border-top-color: #fff; animation: s 0.9s linear infinite; }
@keyframes s { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.devices { margin-top: 14px; text-align: left; }
.devices .small { margin-top: 0; }
.dev { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); color: var(--dim); font-size: 14px; }
.dev .btn { padding: 6px 14px; font-size: 13px; }