html, body { background: #1d2021; }
body {
    display: block;
    background-image: none;
    min-height: 100vh;
    overflow-x: hidden;
}
/* CRT: faint scanlines + vignette, above everything, never clickable */
body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 10;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%),
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.16) 2px 3px);
}

#t {
    box-sizing: border-box;
    padding: 22px 28px 40vh;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--fg1);
    text-shadow: 0 0 5px rgba(235, 219, 178, .18);
    cursor: text;
}
#t * { font-family: inherit; font-weight: inherit; font-style: normal; }
#t b { font-weight: 700; }
#t .l { white-space: pre-wrap; word-break: break-word; min-height: 1.45em; }
#t .ps .u, #t .ps .h { color: var(--green); font-weight: 700; }
#t .ps .d { color: var(--blue); font-weight: 700; }
#t a { color: var(--yellow); text-decoration: none; border-bottom: 1px dotted var(--yellow-dim); }
#t a:hover { color: var(--orange); border-bottom-color: var(--orange); }
#t .cmd { color: var(--yellow); cursor: pointer; border-bottom: 1px dotted var(--bg3); }
#t .cmd:hover { color: var(--orange); }
#t .dir { color: var(--blue); font-weight: 700; cursor: pointer; }
#t .dir:hover { text-decoration: underline; }
#t .dim { color: var(--gray); }
#t .ok { color: var(--green); }
#t .r { color: var(--red); }    #t .g { color: var(--green); }
#t .y { color: var(--yellow); } #t .b { color: var(--blue); }
#t .p { color: var(--purple); } #t .a { color: var(--aqua); }
#t .o { color: var(--orange); }

/* message of the day: the pacman art, scaled to fit any screen */
#t .motd {
    display: block;
    white-space: pre;
    line-height: 1;
    font-size: min(13px, calc((100vw - 40px) / 62));
    margin: 6px 0 4px;
    text-shadow: none;
}

/* neofetch: ascii photo + info side by side */
#t .fetch { display: flex; gap: 3ch; align-items: flex-start; margin: 4px 0 2px; }
#t .pic {
    display: block;
    width: 240px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex: none;
}
#t .info .l { white-space: pre; }
#t .blocks span { text-shadow: none; }

/* the live prompt: real input hidden under a drawn one, block cursor */
#t .in { position: relative; white-space: pre-wrap; word-break: break-all; }
#t .in input {
    position: absolute; left: 0; top: 0;
    width: 1px; height: 1px;
    opacity: 0; border: 0; padding: 0;
    font-size: 16px; /* stops iOS zooming on focus */
}
#t .cur {
    display: inline-block;
    width: .62em; height: 1.2em;
    vertical-align: text-bottom;
    background: var(--fg1);
    box-shadow: 0 0 6px rgba(235, 219, 178, .5);
    animation: blink 1.05s steps(1) infinite;
}
#t .in.blur .cur { background: transparent; outline: 1px solid var(--fg4); box-shadow: none; animation: none; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 700px) {
    #t { padding: 14px 12px 40vh; font-size: 13px; }
    #t .fetch { flex-direction: column; gap: 10px; }
    #t .pic { width: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    #t .cur { animation: none; }
}

/* icat: images shown inline, the way kitty does it */
#t .icat { display: block; max-width: min(640px, 100%); height: auto; margin: 4px 0 2px; }
#t .icat-name { color: var(--gray); }

/* mpv */
#t .mpv { display: block; width: min(960px, 100%); margin: 6px 0 4px; background: #000; }
#t .mpv-status { color: var(--fg2); }

/* man page */
#t .man { max-width: 86ch; }
#t .man .mh { display: flex; justify-content: space-between; font-weight: 700; }
#t .man .sec { font-weight: 700; margin-top: 1.45em; }
#t .man .body { padding-left: 7ch; }
#t .man .body p { margin: 0 0 1.45em; white-space: normal; font-size: inherit; color: inherit; line-height: inherit; }
#t p, #t h1 { font-size: inherit; color: inherit; margin-top: 0; }
#t .man .body em { font-style: italic; }
#t .pager { display: inline-block; background: var(--fg1); color: var(--bg_h); text-shadow: none; cursor: pointer; }
@media (max-width: 700px) {
    #t .man .body { padding-left: 3ch; }
}