:root{font-family:system-ui,sans-serif;color:#263532;background:#f2f6f3;color-scheme:light}body{margin:0;display:grid;place-items:center;min-height:100vh}main{width:min(400px,calc(100vw - 64px));padding:36px;background:white;border:1px solid #dce5de;border-radius:20px}.eyebrow{font-size:12px;letter-spacing:2px;color:#60736a}h1{font-size:32px;font-weight:550;margin:24px 0 8px}p{line-height:1.55}form{margin-top:28px}label{display:block;margin:18px 0 8px;font-size:14px}input:not([type=hidden]){box-sizing:border-box;width:100%;height:48px;border:1px solid #bdcbc1;border-radius:8px;padding:10px 14px;font-size:16px}button{width:100%;border:0;border-radius:8px;padding:14px;background:#244d3e;color:white;font:600 16px system-ui;margin-top:24px;cursor:pointer}.footnote{margin-top:30px;font-size:12px;color:#6b7b71}.badge{display:inline-block;border-radius:20px;padding:6px 12px;background:#dff2e6;color:#246440;font-size:13px}section{border-block:1px solid #e1e8e3;padding:12px 0;margin-top:28px}h2{font-size:18px}
details{margin-top:22px;font-size:13px}summary{cursor:pointer}code{display:block;overflow-wrap:anywhere;margin:12px 0;font-size:12px}.qr{display:block;width:230px;max-width:100%;margin:20px auto}.secondary{background:#e8efea;color:#244d3e}button:disabled{opacity:.55;cursor:wait}#status{font-size:14px;color:#375844}

.passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #ddd; padding: 12px 0; }
.passkey-row form { margin: 0; }

/* The independent fictional website supplies both field backgrounds for inline-key review. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; color: #e3ebe6; background: #17201b; }
  main { background: #222e27; border-color: #44564b; }
  input:not([type=hidden]) { background: #29392f; color: #e3ebe6; border-color: #718477; }
  /* The QR SVG is transparent black; retain a scannable white backing on dark pages. */
  .qr { background: white; }
  .eyebrow, .footnote { color: #b2c4b7; }
  #status { color: #c0dbc9; }
  section, .passkey-row { border-color: #44564b; }
}
a { color: inherit; } .text-button { background: transparent; color: inherit; text-decoration: underline; } .danger { background: #803c38; } .passkey-row button { margin: 0; width: auto; } #status:empty { display: none; } #status { overflow-wrap: anywhere; } .success { padding: 12px; background: #dff2e6; color: #246440; border-radius: 8px; } .qr { border-radius: 8px; } small { line-height: 1.5; } input { min-width: 0; }