html {
    min-height: 100%;
    background: #000;
    color: #aaa;
    font-family: FreeMono, monospace;
    font-size: 2vh;
    line-height: 2.2vh;
}

.terminal {
    padding: 10px;
}

#output > div {
    min-height: 2.2vh;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#output .error {
    color: red;
}

#login-form {
    display: flex;
    align-items: baseline;
}

#login-form[hidden] {
    display: none;
}

#prompt {
    white-space: pre;
}

#login-form {
    position: relative;
}

#credential {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    resize: none;
    overflow: hidden;
}

#command {
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#cursor {
    display: inline-block;
    white-space: pre;
    min-width: 1ch;
}

#login-form:focus-within #cursor {
    animation: terminal-blink 1s steps(1, start) infinite;
}

#credential:disabled + #command #cursor {
    visibility: hidden;
}

@keyframes terminal-blink {
    0%, 100% { background: #000; color: #aaa; }
    50% { background: #bbb; color: #000; }
}
::selection {
    background: #aaa;
    color: #000;
}

.submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.submit:focus-visible {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    background: #000;
    color: #aaa;
    font: inherit;
}