}

[data-termynal]:after {
    content: 'bash';
    position: absolute;
    color: var(--color-text-subtle);
    top: 5px;
    left: 0;
    width: 100%;
    text-align: center;
}

a[data-terminal-control] {
    text-align: right;
    display: block;
    color: #aebbff;
}

[data-ty] {
    display: block;
    line-height: 2;
}

[data-ty]:before {

This is appropriate when we are logging in to our own application, probably with our own frontend.

Because we can trust it to receive the `username` and `password`, as we control it.

But if you are building an OAuth2 application that others would connect to (i.e., if you are building an authentication provider equivalent to Facebook, Google, GitHub, etc.) you should use one of the other flows.