/* Dark only, like a terminal. */
:root {
  color-scheme: dark;
  --bg: #010409;
  --term: #0d1117;
  --bar: #161b22;
  --fg: #e6edf3;
  --dim: #7d8590;
  --green: #3fb950;
  --blue: #58a6ff;
  --accent: #d2a8ff;
  --shadow: 0 20px 60px rgba(0, 0, 0, .6);
  --pad: 22px;
  --cols: 14;                                                /* widest line of the figlet art */
  --avail: calc(min(680px, 100vw - 32px) - 2 * var(--pad)); /* room inside the terminal */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--mono);
}

.term {
  width: min(680px, 100%);
  background: var(--term);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bar);
  color: var(--dim);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bar i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.bar i:nth-child(2) { background: #febc2e; }
.bar i:nth-child(3) { background: #28c840; }
.title { flex: 1; margin-right: 52px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* The terminal itself: a fixed size like a real window. Output that doesn't fit scrolls
   the top off (hi.js keeps it scrolled to the bottom), as a real terminal does. */
.screen {
  position: relative;    /* keeps hi.js's measuring probe inside the clipped area */
  height: min(30em, calc(100dvh - 100px));
  overflow: hidden;
  padding: var(--pad);
}
.line { white-space: pre-wrap; word-break: break-all; }
.host { color: var(--green); font-weight: 700; }
.path { color: var(--blue); font-weight: 700; }
.user { color: var(--blue); }

/* figlet output, coloured diagonally the way lolcat does it. */
.hi { margin: 8px 0; font-size: inherit; font-weight: inherit; }
.hi pre {
  display: inline-block;
  font: inherit;
  font-size: min(28px, calc(var(--avail) / (var(--cols) * .62)));
  line-height: 1.05;
  background: linear-gradient(120deg, var(--green), var(--blue) 55%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--fg);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Phones: smaller text so the art and the lines fit. */
@media (max-width: 480px) {
  :root { --pad: 16px; --avail: calc(100vw - 32px - 2 * var(--pad)); }
  body { font-size: 12px; }
}

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