@font-face {
  font-family: "Commit Mono";
  src: url("fonts/commit-mono-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #0a0a0a;
  color: #e8e8e2;
  font-family: "Commit Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.55;
}

* { box-sizing: border-box; }

body { margin: 0; }

main {
  min-height: 100svh;
  padding: 2rem;
}

h1 {
  margin: 0 0 2rem;
  color: #fff;
  font: inherit;
}

p {
  max-width: 50rem;
  margin: 0 0 2rem;
  text-wrap: balance;
}

a {
  color: #fff;
  text-underline-offset: 0.25rem;
}

a:focus-visible {
  outline: 2px solid #63d471;
  outline-offset: 0.25rem;
}

.prompt {
  margin-bottom: 0.35rem;
  color: #63d471;
}

.terminal {
  max-width: 50rem;
}

.command-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  color: #63d471;
  cursor: text;
}

.terminal-input {
  width: var(--input-width, 1ch);
  max-width: min(40ch, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #e8e8e2;
  caret-color: #e8e8e2;
  font: inherit;
}

.command-line:focus-within .cursor {
  visibility: hidden;
}

.terminal-output {
  margin-top: 0.35rem;
  color: #e8e8e2;
}

.terminal-output div:first-child {
  color: #63d471;
}

.terminal-output div:last-child {
  margin-top: 0.35rem;
}

.cursor {
  color: #e8e8e2;
  animation: pulse 1s steps(1, end) infinite;
}

@keyframes pulse { 50% { opacity: 0; } }

@media (max-width: 600px) {
  :root { font-size: 15px; }
  main { padding: 1rem; }
  .terminal-input { max-width: calc(100vw - 2rem); }
}

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