Terminal/console style

.terminal {
  background: oklch(0.10 0.01 240);
  border-radius: 0.5rem;
  overflow: hidden;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.875rem;
  line-height: 1.7;
}

.terminal__titlebar {
  background: oklch(0.18 0.01 240);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terminal__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.terminal__dot--close  { background: oklch(0.65 0.22 27);  }
.terminal__dot--min    { background: oklch(0.75 0.18 85);  }
.terminal__dot--expand { background: oklch(0.62 0.20 145); }

.terminal__title {
  flex: 1;
  text-align: center;
  color: oklch(0.55 0.01 240);
  font-size: 0.78rem;
}

.terminal__body {
  padding: 1.25rem 1.5rem;
  color: oklch(0.88 0.02 140);
}

.terminal__line         { display: block; }
.terminal__line--output { color: oklch(0.70 0.01 240); padding-left: 1.25rem; }
.terminal__line--success{ color: oklch(0.75 0.18 145); padding-left: 1.25rem; }
.terminal__line--error  { color: oklch(0.65 0.20 27);  padding-left: 1.25rem; }

.terminal__prompt {
  color: oklch(0.62 0.20 145);
  margin-right: 0.5rem;
  user-select: none;
}

.terminal__cursor {
  display: inline-block;
  width: 0.55rem;
  height: 1em;
  background: oklch(0.88 0.02 140);
  vertical-align: text-bottom;
  animation: terminal-blink 1.1s step-end infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .terminal__cursor { animation: none; opacity: 1; }
}

You are a senior frontend engineer building a documentation site that
displays CLI commands in realistic terminal windows.

Goal: A pure-CSS .terminal component that looks like a macOS terminal
window — complete with a title bar, three colored traffic-light dots,
a dark background, green prompt indicators, and distinct output colors
for success and error states. No JavaScript required.

Technical constraints:
- Use oklch() for all colors — no hex or rgba values.
- Use a CSS custom property var(--font-mono) for the monospace font
  family, falling back to "JetBrains Mono", monospace.
- The title bar uses display: flex with the dots on the left and a
  centered title text; achieve centering without absolute positioning
  (use flex: 1 on the title span).
- Each line of terminal output is a <span class="terminal__line">;
  output, success, and error lines each get a modifier class and a
  left padding to visually indent beneath the prompt.
- The $ prompt character uses user-select: none so it is excluded from
  copy-paste selection.
- A blinking cursor uses animation with step-end timing (not ease) so
  it snaps on/off rather than fading.
- Include @media (prefers-reduced-motion: reduce) that disables the
  cursor blink and sets opacity: 1.

Framework variant (pick one):
A) Vanilla HTML/CSS — plain class-based markup with no JS.
B) React component — accept a lines prop (array of
   { text, type: "command"|"output"|"success"|"error" } objects) and
   a title prop; render the title bar and body programmatically.

Edge cases to handle:
- Long command lines should wrap within the terminal body rather than
  overflow; set overflow-wrap: break-word on .terminal__body.
- On narrow viewports the terminal should not break the page layout —
  add overflow-x: auto to .terminal so users can scroll horizontally
  when content is wider than the viewport.
- Ensure the component works on light-mode sites too by scoping the
  dark background to the component itself rather than relying on a
  page-level dark-mode class.

Return CSS only (or a React component if variant B is chosen).