@font-face {
            font-family: 'Unifont';
            src: url('unifont-16.0.04.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background-color: #000;
            color: #0f0;
            font-family: 'Unifont', 'Courier New', monospace;
            font-size: 16px;
            line-height: 1.2;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .terminal-container {
            border: 2px solid #0f0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: #001100;
            width: 100%;
            max-width: 900px;
            height: 100%;
            max-height: 700px;
        }

        .terminal-header { text-align: center; margin-bottom: 20px; }
        .header-line { margin: 5px 0; white-space: pre; }

        .user-info {
        display: grid;
        grid-template-columns: auto auto auto;
        justify-content: center;
        column-gap: 2rem;
        white-space: pre;
        font-family: "Unifont", monospace;
        }


        .terminal-output {
            flex: 1;
            overflow: hidden;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .terminal-line { margin-bottom: 2px; white-space: pre-wrap; min-height: 1.2em; }

        .terminal-input-line {
            display: flex;
            align-items: center;
            position: relative;
        }

        .prompt { margin-right: 5px; }

        #terminal-input {
            background: transparent;
            border: none;
            color: transparent;
            font-family: 'Unifont', 'Courier New', monospace;
            font-size: 16px;
            width: 100%;
            outline: none;
            caret-color: transparent;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }

        .input-display { position: relative; flex-grow: 1; min-height: 1.2em; }

        .input-text {
            position: absolute;
            top: 0;
            left: 0;
            color: #0f0;
            white-space: pre;
        }

        .block-cursor {
            display: inline-block;
            width: 1ch;
            height: 1.2em;
            background-color: #0f0;
            animation: blink 1s infinite;
            vertical-align: bottom;
        }

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

        @media (max-width: 768px) {
            body { font-size: 14px; padding: 10px; }
            .terminal-container { padding: 15px; }
        }