:root {
    --green:      #00ff41;
    --green-dim:  #00cc33;
    --green-muted:#009922;
    --bg:         #000000;
    --font:       'Courier New', Courier, monospace;
}

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

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--green);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Scanline overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 100;
}

/* Vignette */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 99;
}

#terminal {
    padding: 2rem 2.5rem 4rem;
    max-width: 820px;
    position: relative;
    z-index: 2;
}

#output {
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
}

#prompt-line {
    display: flex;
    align-items: center;
    min-height: 1.4em;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
}

#prompt-text {
    color: var(--green);
    white-space: pre;
}

.cursor {
    display: inline-block;
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
    animation: blink 1s step-end infinite;
    line-height: 1;
}

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

@media (max-width: 600px) {
    #terminal {
        padding: 1rem 1rem 3rem;
        font-size: 12px;
    }
}