:root {
  color-scheme: light dark;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111;
}
* { box-sizing: border-box; }
body { margin: 0; background: inherit; color: inherit; }
main {
  width: min(360px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(56px, 12vh, 112px) 0 40px;
}
header { margin-bottom: 48px; font-weight: 650; }
.wordmark { display: flex; align-items: center; gap: 8px; }
.wordmark img { display: block; flex-shrink: 0; }
.verified footer.wordmark { justify-content: center; }
h1 { margin: 0 0 24px; font-size: 24px; line-height: 1.25; }
.note { margin: -12px 0 24px; color: #666; }
label { display: block; margin: 0 0 6px; }
input, button { width: 100%; height: 44px; border-radius: 4px; font: inherit; }
input { margin-bottom: 16px; padding: 0 11px; border: 1px solid #aaa; background: transparent; color: inherit; }
button { padding: 0 14px; border: 1px solid #111; background: #111; color: #fff; cursor: pointer; }
button:hover { background: #333; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, input:focus-visible { outline: 2px solid #06c; outline-offset: 2px; }
#status { min-height: 24px; margin: 12px 0 0; color: #b42318; overflow-wrap: anywhere; }
.verified { background: #fafbf9; min-height: 100svh; }
.verified main { width: min(400px, calc(100% - 40px)); padding-top: clamp(64px, 24svh, 200px); }
.verification { padding: 26px 24px 16px; border: 1px solid #e2e7e0; border-radius: 10px; background: #fff; }
.verification-heading { display: flex; align-items: center; gap: 14px; }
.verification-heading > div { min-width: 0; }
.check { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #edf5ec; color: #4b7752; }
.check path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verified h1 { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.5; color: #303b32; }
.identity { margin: 0; font-size: 13px; color: #7b837c; overflow-wrap: anywhere; }
.identity span { color: #505a52; }
.verification-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 24px; padding-top: 13px; border-top: 1px solid #edf0eb; font-size: 12px; }
.membership { flex: 1; margin: 0; color: #697369; overflow-wrap: anywhere; }
.membership > span { margin-right: 7px; color: #8a918a; }
.verified #logout { width: auto; height: auto; min-height: 32px; margin: -6px -6px -6px auto; padding: 6px; border: 0; background: transparent; color: #737c74; font-size: 12px; }
.verified #logout:hover { color: #303b32; text-decoration: underline; text-underline-offset: 3px; }
.verified #status:empty { display: none; }
.verified footer { margin-top: 18px; text-align: center; color: #929990; font-size: 12px; letter-spacing: .02em; }
.verify-prompt { padding: 12px; }
.continue-link { color: #697369; font-size: 12px; text-underline-offset: 3px; }
.verify-prompt .continue-link:not([hidden]) { display: block; width: fit-content; margin: 0 12px 10px 52px; }
.continue-link:focus-visible { outline: 2px solid #66876a; outline-offset: 4px; }
.verified .verify-action { display: flex; align-items: center; gap: 16px; height: auto; min-height: 80px; padding: 14px 12px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; }
.verified .verify-action:hover:not(:disabled) { background: #f5f7f3; }
.verified .verify-action:disabled { opacity: 1; }
.verify-indicator { flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid #a2ada1; border-radius: 5px; display: grid; place-items: center; }
.verify-copy { display: flex; flex-direction: column; gap: 4px; }
#phase { font-size: 15px; font-weight: 550; }
#hint { font-size: 12px; color: #7b837c; }
.verify-target { margin: 0 12px 8px 52px; color: #7b837c; font-size: 12px; overflow-wrap: anywhere; }
.verify-prompt #status:not(:empty) { margin: 0 12px 8px; font-size: 12px; }
.verify-action[data-state=pending] .verify-indicator { border-radius: 50%; border-color: #dce5da; border-top-color: #66876a; animation: verifying 1s linear infinite; }
.verify-action[data-state=complete] .verify-indicator { border-color: #66876a; background: #edf5ec; color: #4b7752; }
.verify-action[data-state=complete] .verify-indicator::after { content: '✓'; }
@keyframes verifying { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .verify-action[data-state=pending] .verify-indicator { animation: none; } }
@media (prefers-color-scheme: dark) {
  :root { background: #111; color: #eee; }
  .note { color: #aaa; }
  input { border-color: #666; }
  button { border-color: #eee; background: #eee; color: #111; }
  button:hover { background: #ccc; }
  .verified { background: #181b19; }
  .verification { background: #202521; border-color: #343d35; }
  .check { background: #2c3d2f; color: #a0c4a4; }
  .verified h1 { color: #dce6dd; }
  .identity, .membership > span { color: #99a59b; }
  .identity span, .membership { color: #b9c6bc; }
  .verification-details { border-color: #343d35; }
  .verified #logout, .verified footer { color: #99a59b; }
  .verified #logout:hover { color: #dce6dd; }
  .verified .verify-action:hover:not(:disabled) { background: #2a322b; }
  #hint, .verify-target { color: #99a59b; }
  .continue-link { color: #b9c6bc; }
}