#terminal-wrapper {
    position: relative;
    width: 800px;
    height: 400px;
}

#terminal {
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    white-space: pre;
    overflow: auto;
    /* Not contenteditable — pure output surface */
}

#input-capture {
    position: absolute;
    /* Place it over the terminal so tapping the terminal focuses it,
       but make it invisible */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Must not be display:none or visibility:hidden — 
       the browser won't show the keyboard */
    font-size: 16px; /* Prevents iOS zoom on focus */
    resize: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    color: transparent;
    background: transparent;
    caret-color: transparent;
    z-index: 1;
    /* Disable all the "helpful" mobile features */
    -webkit-text-security: none;
}

@keyframes blink {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#terminal .caret {
    display: inline;
    background-color: white;
    color: black;
    animation: blink 1s step-end infinite;
}

/* When the input isn't focused, show a dim steady caret */
#terminal .caret.unfocused {
    background-color: #666;
    animation: none;
}