:root {
  color: #10284a;
  background: #f4f7fb;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: #f4f7fb;
  line-height: 1.42;
}

.shell {
  width: min(100% - 2rem, 640px);
  margin-inline: auto;
}

.site-header { padding: 34px 0 47px; }

.site-header h1 {
  margin: 0 0 2px;
  font-size: clamp(1.7rem, 5vw, 2rem);
  line-height: 1.22;
  letter-spacing: .01em;
}

.site-header h1 a { color: inherit; text-decoration: none; }

nav { display: flex; gap: .78rem; font-size: 1rem; }
nav a { color: #1455ef; text-decoration: none; }
nav a:hover, nav a:focus-visible { text-decoration: underline; }

.card {
  background: #fff;
  border: 1px solid #cbd3de;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(16, 40, 74, .025);
  padding: 2rem 1rem 1rem;
  margin-bottom: 2rem;
}

.eyebrow {
  margin: 0 0 .35rem;
  color: #4c6590;
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 700;
}

h2 { margin: 0 0 1.15rem; font-size: 1.45rem; line-height: 1.25; }

.steps { margin: 0 0 .9rem; padding-left: 1.35rem; }
.redirect-note { color: #536887; margin: 1rem 0 1.2rem; }
code { color: #355477; font: .8rem ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }

.oauth-form { border-top: 1px solid #e2e7ee; padding-top: 1.05rem; }
.field { margin-bottom: .85rem; }
label { display: block; margin-bottom: .25rem; font-weight: 700; }
input {
  width: 100%;
  border: 1px solid #b8c5d6;
  border-radius: 5px;
  color: #10284a;
  font: inherit;
  padding: .62rem .7rem;
}
input:focus { outline: 3px solid rgba(20, 85, 239, .18); border-color: #1455ef; }
.security-note { color: #596b86; font-size: .91rem; margin: .8rem 0 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.button {
  display: inline-block;
  border: 1px solid #1455ef;
  border-radius: 5px;
  padding: .58rem .88rem;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button-primary { background: #2861ec; color: white; }
.button-primary:hover, .button-primary:focus-visible { background: #144bd4; }
.button-secondary { background: white; color: #1455ef; }
.button-secondary:hover, .button-secondary:focus-visible { background: #edf3ff; }

.result p { max-width: 56ch; }
.result.success h2 { color: #123f66; }
.result.error h2 { color: #a92a30; }
dl { margin: 1.2rem 0; }
dl div { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; border-top: 1px solid #e4e8ef; padding: .65rem 0; }
dt { font-weight: 700; }
dd { margin: 0; }

@media (min-width: 640px) {
  .card { padding: 2.15rem 1rem 1rem; }
}

@media (max-width: 480px) {
  .site-header { padding-bottom: 2.2rem; }
  .actions .button { width: 100%; text-align: center; }
}