` — output; each line is a `` (class `d` grey, `g` green, `a` amber, `k` green 500, `big` for the 404) followed by a text node `\n`.
  - `
` — `` prompt, `.in` wrapper containing ``, a hidden mirror ``, and the `.cur` block.

## Tokens

```css
:root {
  /* colour — near-black with a green cast, one green, grey-green text, amber for errors */
  --bg:      #0b0f0c;  /* page */
  --panel:   #0e1410;  /* reserved: raised surfaces */
  --line:    #1c2a20;  /* title-strip rule, replay border */
  --green:   #5ef08a;  /* status, 404, commands, cursor */
  --green-2: #3d9a5c;  /* prompt, replay hover border, idle cursor outline */
  --green-3: #25553a;  /* dot outlines */
  --ink:     #d7e3da;  /* body text, typed input */
  --ink-2:   #8fa596;  /* grey lines, chrome text */
  --amber:   #e3b04b;  /* command not found */

  /* type */
  --mono: "Chivo Mono", ui-monospace, monospace;
  --fs: 15px;          /* 14 ≤820 */
  --lh: 1.7;
  --fs-big: 88px;      /* 56 ≤820 */

  /* layout */
  --chrome-h: 40px;
  --pad: 48px;         /* 24 ≤820 */
  --cursor-w: .62em;
  --cursor-h: 1.15em;
  --radius: 4px;       /* replay button only */

  /* motion */
  --char-ms: 22ms;     /* per character; total intro ≈ 4.5s */
  --blink: 1000ms;     /* steps(1): 50% duty */
  --t-micro: 140ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
```

## Typography

| Role            | Family     | Size | Weight | Line-height | Tracking | Colour |
|-----------------|------------|-----:|-------:|------------:|---------:|--------|
| Body lines      | Chivo Mono | 15px | 400    | 1.7         | 0        | `--ink` |
| Grey lines      | Chivo Mono | 15px | 400    | 1.7         | 0        | `--ink-2` |
| Status / redirect | Chivo Mono | 15px | 400  | 1.7         | 0        | `--green` |
| Command names   | Chivo Mono | 15px | 500    | 1.7         | 0        | `--green` |
| Error           | Chivo Mono | 15px | 400    | 1.7         | 0        | `--amber` |
| 404             | Chivo Mono | 88px | 500    | 1           | −0.04em  | `--green`, `margin: 8px 0 18px` |
| Prompt          | Chivo Mono | 15px | 400    | 1.7         | 0        | `--green-2` |
| Chrome title    | Chivo Mono | 12px | 400    | 1           | +0.04em  | `--ink-2` |
| Replay button   | Chivo Mono | 12px | 400    | 1           | 0        | `--ink-2`, 1px `--line` border, 4px radius |

All output is `white-space: pre-wrap` inside a `
` so the two-space indents and column alignment of the command list are literal.

## Motion

| Element      | Trigger          | Property     | From → To          | Duration | Easing / timing | Notes |
|--------------|------------------|--------------|--------------------|---------:|-----------------|-------|
| output line  | intro / command  | textContent  | "" → full line     | 22ms × chars | `setInterval` | one line at a time, sequential |
| `.big` 404   | intro            | textContent  | appears whole      | 0        | —               | never typed |
| `.cur`       | idle, focused    | opacity      | 1 → 0 → 1          | 1000ms   | `steps(1)` at 50% | paused (`animation: none`) while `.typing` |
| `.cur`       | typing           | transform    | `translateX(--x)`  | 0        | —               | `--x` = mirror span width |
| `.term`      | each character   | scrollTop    | → scrollHeight     | 0        | —               | keeps the prompt visible |
| replay button| hover            | color, border-color | `--ink-2`/`--line` → `--green`/`--green-2` | 140ms | `--ease` | |

Reduced motion: `reduce` flag short-circuits the typer (`s.textContent = text` immediately) and `.cur { animation: none }`.

## States

- **Typing (`.term.typing`):** cursor solid, no blink; input still accepts keystrokes but its submit will echo after the current response.
- **Idle, focused:** cursor blinking solid green.
- **Idle, unfocused (`.term:not(:focus-within)`):** cursor transparent with a 1px `--green-2` outline, no blink.
- **Replay hover:** text and border go green. **Focus-visible (any control):** 1px `--green` outline, 3px offset.
- **Unknown command:** amber line + grey hint.
- **Cleared:** log empty, prompt at the top of the padded area.
- No loading or disabled states.

## Accessibility

- The log is `role="log"` with `aria-live="polite"`, so responses are announced once complete; because lines are inserted as spans and filled character by character, set `aria-busy="true"` on the log while typing if your screen reader reads partial text, and clear it when done.
- The prompt is a real ``, the input is a real `` inside a ``, so Enter submits natively and the on-screen keyboard appears on touch devices.
- The native caret is hidden with `caret-color: transparent`; the block cursor is `aria-hidden` and purely visual. Do not hide the input itself.
- Clicking the log area focuses the input; keyboard users Tab directly to it. Focus order: replay → command input.
- Colour is never the only signal: errors say "command not found", redirects start with "→".
- Contrast on `#0b0f0c`: `--ink` 14.2:1; `--ink-2` 7.3:1; `--green` 13.1:1; `--green-2` 5.6:1 (prompt); `--amber` 9.5:1.
- `spellcheck="false" autocapitalize="off"` on the input so mobile keyboards behave like a shell.

## Responsive rules

- ≥ 1280: as specified.
- 1024–1279: identical; lines wrap naturally with `pre-wrap`.
- 768–1023: identical; the title text may truncate — give `.title` `overflow:hidden; text-overflow:ellipsis`.
- < 820: padding 24px, body 14px, 404 at 56px; the command list keeps its two-space indent; long lines wrap.
- Height: the log scrolls internally; the prompt is always scrolled into view after each line.

## Acceptance checklist

- [ ] Background `#0b0f0c`; body text `#d7e3da`; green `#5ef08a`; no gradients, glow, scanlines or text-shadow anywhere.
- [ ] Title strip is 40px with three 10px hollow circles (`#25553a` border) and a 1px `#1c2a20` bottom rule.
- [ ] Intro types at 22ms per character, one line at a time, in the order listed; the `404` appears whole at 88px, weight 500, tracking −0.04em.
- [ ] Cursor is a `.62em × 1.15em` green block that blinks with `steps(1)` over 1000ms, stops blinking while output types, and becomes a hollow outline when the input is unfocused.
- [ ] Cursor position equals the pixel width of the typed text (mirror-span measurement), including spaces.
- [ ] Enter echoes `visitor@kestrel:~$ ` in grey and clears the input.
- [ ] `help`, `ls`, `home`, `back`, `search x`, `clear` each produce the specified output; unknown input prints amber `command not found: ` plus a grey hint.
- [ ] Clicking the empty log area focuses the input.
- [ ] Replay clears the log and cancels any in-progress typing before restarting (no interleaved characters).
- [ ] The log auto-scrolls so the prompt stays visible after long output.
- [ ] Reduced motion: lines appear instantly and the cursor is static.
- [ ] No timer runs faster than 16ms; no `console` output; no errors when submitting an empty command.

## Implementation notes

**Cancellable sequential typer.** A monotonically increasing token lets a replay or `clear` abandon an in-flight sequence without clearing intervals from the outside:

```js
let token = 0;
function type(lines, done) {
  const my = ++token; term.classList.add('typing'); let li = 0;
  (function next() {
    if (my !== token) return;
    if (li >= lines.length) { term.classList.remove('typing'); done && done(); return; }
    const [cls, text = ''] = lines[li++]; const s = span(cls, ''); out.appendChild(s);
    if (reduce || cls === 'big') { s.textContent = text; out.appendChild(document.createTextNode(cls === 'big' ? '' : '\n')); return next(); }
    let ci = 0;
    const id = setInterval(() => {
      if (my !== token) { clearInterval(id); return; }
      s.textContent = text.slice(0, ++ci); term.scrollTop = term.scrollHeight;
      if (ci >= text.length) { clearInterval(id); out.appendChild(document.createTextNode('\n')); next(); }
    }, 22);
  })();
}
```

**Block cursor that follows the input.** Hide the native caret and measure a mirror span with identical font metrics:

```css
.in { position: relative; display: flex; }
.in input { caret-color: transparent; background: transparent; border: 0; font: inherit; }
.in .m { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; }
.cur { position: absolute; top: .18em; left: 0; width: .62em; height: 1.15em; background: var(--green);
       transform: translateX(var(--x, 0)); animation: blink 1000ms steps(1) infinite; }
.typing .cur { animation: none; }
.term:not(:focus-within) .cur { animation: none; background: transparent; outline: 1px solid var(--green-2); }
@keyframes blink { 50% { opacity: 0; } }
```

```js
function sync() { m.textContent = cmd.value; cur.style.setProperty('--x', m.offsetWidth + 'px'); }
cmd.addEventListener('input', sync);
```

`white-space: pre` on the mirror is required or trailing spaces collapse and the cursor lags one character.

Common mistakes: typing with `setTimeout` per character without a cancel token (replay interleaves two intros); using `ease` on the blink (a terminal cursor is binary); adding `text-shadow` glow "for realism"; `contenteditable` instead of an input (breaks mobile keyboards and form submit).

---

*From Design Lounge (https://www.designlounge.live). Live demo and source: /p/terminal-404. Free to use in your products. Credit line: Designed using Design Lounge.*