:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #152033; background: #eef3fb; } * { box-sizing: border-box; } body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 1.5rem; } .card { width: min(100%, 29rem); padding: 2.25rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 18px 50px #22345720; } h1 { margin: .3rem 0 1.2rem; font-size: 2rem; } .eyebrow { color: #405cf5; font-weight: 700; margin: 0; text-transform: uppercase; font-size: .78rem; letter-spacing: .09em; } form { display: grid; gap: 1rem; } label { display: grid; gap: .4rem; font-weight: 600; } input { width: 100%; border: 1px solid #b9c4d8; border-radius: .55rem; padding: .72rem; font: inherit; } input:focus { outline: 3px solid #b9c8ff; border-color: #405cf5; } button, .button { cursor: pointer; border: 0; border-radius: .55rem; background: #405cf5; color: #fff; padding: .78rem 1rem; font: inherit; font-weight: 700; text-align: center; text-decoration: none; } button:disabled { cursor: wait; opacity: .65; } .secondary-button { background: #e8edf7; color: #152033; } .danger-button { background: #b42318; color: #fff; margin-top: .35rem; } .danger-button:hover { background: #912018; } nav { display: grid; gap: .7rem; margin-top: 1.5rem; } a { color: #2444d9; } .message { min-height: 1.4rem; color: #9d1c38; } .message.success { color: #12743b; } .profile-summary { display: grid; grid-template-columns: 1fr 1.3fr; gap: .65rem 1rem; margin: 1.25rem 0; } .profile-summary dt { color: #64718a; font-weight: 600; } .profile-summary dd { margin: 0; overflow-wrap: anywhere; } .hidden { display: none; }