.autofill-demo{max-width:1080px;margin:auto;padding:32px;border:1px solid #e5e2ee;border-radius:24px;background:linear-gradient(135deg,#faf8ff,#f7f9fc);box-shadow:0 20px 60px #3324540d;color:#26334b}
.autofill-demo-heading,.autofill-forms-heading,.autofill-form-top,.autofill-demo-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}
.autofill-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;color:#8050cb}
.autofill-demo-heading h2{font-size:25px;letter-spacing:-.6px;margin:8px 0 0;color:#26334b}
.autofill-demo-label{font-size:12px;border:1px solid #e5dfef;border-radius:20px;padding:6px 12px;white-space:nowrap;background:#fff;color:#756787}
.autofill-demo-grid{display:grid;grid-template-columns:minmax(0, .85fr) 64px minmax(0,1.25fr);align-items:center;margin:30px 0}
.autofill-profile{background:#fff;border:1px solid #e5e2ee;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px #33245405}
.autofill-profile-heading{display:flex;align-items:center;gap:9px;padding:18px 20px;border-bottom:1px solid #f0edf5;color:#8750df}
.autofill-profile h3,.autofill-forms h3{font-size:15px;margin:0;color:#26334b;font-weight:650}
.autofill-person{display:flex;align-items:center;gap:12px;padding:20px}
.autofill-avatar{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:#eee7fc;border-radius:50%;color:#8050cb;font-weight:700}
.autofill-person strong{display:block;font-size:15px}.autofill-person div span{display:block;font-size:11px;color:#7c8496}.autofill-person>i{margin-left:auto;color:#24946a}
.autofill-profile dl{margin:0;padding:0 20px}.autofill-profile dl>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #f2eff6;font-size:12px}.autofill-profile dt{font-weight:400;color:#7c8496}.autofill-profile dd{margin:0;text-align:right;color:#33415c;overflow-wrap:anywhere}
.autofill-profile-note{padding:17px 20px;font-size:11px;color:#7c8496}.autofill-profile-note i{color:#8750df;margin-right:6px}
.autofill-connection{display:flex;align-items:center;gap:4px;color:#b9a0e6}.autofill-connection span{height:2px;flex:1;background:#e1d5f7}.autofill-connection i{font-size:22px}
.autofill-forms-heading{margin-bottom:14px}.autofill-forms-heading>span{font-size:11px;color:#7c8496}
.autofill-form{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e5e2ee;border-radius:13px;padding:18px;margin-top:12px;transition:border-color .25s,box-shadow .25s}
.autofill-document{width:40px;height:52px;flex-shrink:0;display:grid;place-items:center;border-radius:7px;background:#f0eafd;color:#a383dc;font-size:24px}.autofill-form-body{flex:1;min-width:0}.autofill-form-top{gap:6px}.autofill-form-top span{font-size:10px;white-space:nowrap;padding:4px 8px;border-radius:20px;background:#f1f2f7;color:#748096}.autofill-form p{font-size:11px;color:#7c8496;margin:5px 0 13px;line-height:1.4}
.autofill-form progress{display:block;appearance:none;border:0;border-radius:10px;overflow:hidden;width:100%;height:5px;background:#edeaf4;color:#8b3dff}.autofill-form progress::-webkit-progress-bar{background:#edeaf4;border-radius:10px}.autofill-form progress::-webkit-progress-value{background:#8b3dff;border-radius:10px}.autofill-form progress::-moz-progress-bar{background:#8b3dff;border-radius:10px}
.autofill-form.is-filling{border-color:#b38be9;box-shadow:0 0 0 3px #8b3dff0a}.autofill-form.is-filled .autofill-form-top span{background:#e3f5ec;color:#208459}.autofill-form.is-filled .autofill-document{background:#edf8f2;color:#33956c}
.autofill-demo-footer{padding-top:22px;border-top:1px solid #e8e3f0}.autofill-feedback strong,.autofill-feedback span{display:block}.autofill-feedback strong{font-size:14px;color:#33415c}.autofill-feedback span{font-size:12px;color:#7c8496;margin-top:5px}.autofill-button{border:0;border-radius:10px;background:#8b3dff;color:#fff;padding:14px 22px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;box-shadow:0 5px 12px #8b3dff20;cursor:pointer}.autofill-button:hover{background:#7730df}.autofill-button:focus-visible{outline:3px solid #b69be1;outline-offset:4px}.autofill-button:disabled{cursor:wait;opacity:.75}.is-complete .autofill-feedback strong{color:#208459}.is-running .autofill-connection i{animation:autofill-transfer .9s ease-in-out infinite}.autofill-noscript{font-size:12px;margin:16px 0 0}
@keyframes autofill-transfer{50%{transform:translateX(5px);color:#8b3dff}}
@media(max-width:767px){.autofill-demo{padding:20px}.autofill-demo-heading{align-items:flex-start}.autofill-demo-heading h2{font-size:21px}.autofill-demo-label{font-size:10px;padding:5px 8px}.autofill-demo-grid{grid-template-columns:1fr;margin:24px 0}.autofill-connection{height:45px;justify-content:center}.autofill-connection span{display:none}.autofill-connection i{transform:rotate(90deg)}.is-running .autofill-connection i{animation:none;color:#8b3dff}.autofill-demo-footer{align-items:stretch;flex-direction:column}.autofill-demo-heading{flex-wrap:wrap}.autofill-form{padding:15px;gap:10px}.autofill-form-top span{font-size:9px}.autofill-eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.autofill-demo *{animation:none!important;transition:none!important}}
.autofill-person strong{color:#26334b}