:root { color-scheme: light; --ink: #253d3d; --muted: #5b7070; --teal: #5ec2bd; --line: #dae6e3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #246a65; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #266e6a; outline-offset: 5px; }
.eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 1.5px; color: #46736c; }
.content { width: calc(100% - 40px); max-width: 640px; min-width: 0; margin: 48px auto; }
.connection-icon { background: #d6f0eb; color: #285c56; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 32px; margin-bottom: 30px; }
h1 { font-size: clamp(32px, 3.6vw, 45px); font-weight: 650; letter-spacing: -1.9px; line-height: 1.1; margin: 0 0 22px; overflow-wrap: anywhere; }
p { font-size: 14px; line-height: 1.7; }
.lead { color: var(--muted); margin-bottom: 28px; font-size: 15px; }
.button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: max-content; padding: 17px 20px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 650; text-decoration: none; border: 0; cursor: pointer; }
.primary { background: var(--teal); color: #193c3a; }
.primary:hover { background: #7cd0cb; }
.button:disabled { background: #e3eeeb; color: #6a7c77; cursor: not-allowed; }
.secondary { background: #edf5f2; color: var(--ink); border: 1px solid #d9e6df; }
.secondary:hover { background: #dceee7; }
.privacy { text-align: center; font-size: 11px; color: var(--muted); margin: 13px 0 26px; }
.steps { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 22px; font-size: 10px; line-height: 1.6; color: var(--muted); }
.steps b { display: block; color: #32766d; font-size: 11px; margin-bottom: 5px; }
.notice { padding: 16px; border: 1px solid #c7dfd5; background: #f0f7f2; border-radius: 10px; margin: 20px 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.notice p { margin: 6px 0 0; font-size: 12px; }
.error { background: #fff1ed; border-color: #eac5bb; color: #803d2c; }
code { font-size: 0.95em; }
.account-note { padding: 24px 0 0; color: var(--muted); }
.account-note strong { font-size: 12px; color: var(--ink); }
.account-note p { font-size: 12px; margin-top: 6px; }
.success-label { display: inline-flex; gap: 8px; color: #276a4b; font-size: 11px; font-weight: 650; background: #eaf6ed; border-radius: 99px; padding: 8px 12px; margin-bottom: 30px; }
.result-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.result-heading h1 { font-size: 29px; letter-spacing: -1px; margin-bottom: 6px; }
.result-heading .eyebrow { font-size: 9px; letter-spacing: 1px; margin-bottom: 8px; }
.result-heading p { margin: 0; }
.avatar { flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #d5efea; font-size: 20px; font-weight: 700; }
.fields { margin: 22px 0; }
.field { padding: 13px 0; border-bottom: 1px solid #edf1ee; }
dt { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.missing { color: #7b8582; font-style: italic; font-size: 12px; }
.subtle, .note { color: var(--muted); }
.note { font-size: 11px; margin-bottom: 24px; }
.compact { margin: 18px 0; padding: 22px 0; }
summary { font-size: 12px; cursor: pointer; font-weight: 650; }
pre { font: 11px/1.7 ui-monospace, monospace; background: #f3f7f5; padding: 16px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 620px) { .content { width: calc(100% - 32px); margin: 24px auto; } .card { padding: 28px 0; } h1 { font-size: 37px; } .steps { font-size: 9px; } }