:root {
  --bg: #07090d;
  --fg: #c9d1d9;
  --dim: #6e7681;
  --amber: #ffb454;
  --amber-2: #ff8f40;
  --cyan: #59c2ff;
  --green: #7fd962;
  --red: #f07178;
  --violet: #d2a6ff;
  --sel: rgba(89, 194, 255, .25);
  --font: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--sel); }

#term {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 14px 16px 30vh;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  cursor: text;
}

#out > * { margin: 0; }
.l { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.dim { color: var(--dim); }
.amber { color: var(--amber); }
.cyan { color: var(--cyan); }
.green { color: var(--green); }
.red { color: var(--red); }
.violet { color: var(--violet); }
.b { font-weight: 700; }

/* the prompt */
#line { display: flex; align-items: flex-start; gap: 1ch; }
#ps1 { flex: none; color: var(--green); white-space: pre; }
#ps1 .path { color: var(--cyan); }
#in, #pw {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: inherit;
  caret-color: var(--amber);
}
#line.busy #in { caret-color: transparent; }
.echo .ps { color: var(--green); }

/* clickable commands */
.cmd {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cmd:hover, .cmd:focus-visible { color: var(--bg); background: var(--cyan); text-decoration: none; outline: none; }
.key { color: var(--amber); }

/* logo */
.logo { white-space: pre; line-height: 1.02; font-size: 13px; overflow: hidden; margin: 4px 0 2px; }
.logo .aich { color: var(--amber); text-shadow: 0 0 14px rgba(255, 143, 64, .35); }
.logo .labs { color: var(--cyan); text-shadow: 0 0 14px rgba(89, 194, 255, .3); }
.logo .cursor-i { color: var(--amber-2); animation: blink 1.1s steps(1) infinite; }
.logo .spark { color: var(--green); }
@keyframes blink { 50% { opacity: .15; } }

.menu-row { white-space: pre-wrap; }

/* rendered articles */
.article { max-width: 92ch; margin: 6px 0 4px; }
.article h1, .article h2, .article h3 { font-size: 1em; margin: 1.2em 0 .3em; }
.article h1 { color: var(--amber); }
.article h1::before { content: "# "; color: var(--dim); }
.article h2 { color: var(--cyan); }
.article h2::before { content: "## "; color: var(--dim); }
.article h3 { color: var(--violet); }
.article h3::before { content: "### "; color: var(--dim); }
.article p { margin: .5em 0; white-space: pre-wrap; }
.article ul, .article ol { margin: .4em 0; padding-left: 3ch; }
.article li { margin: .15em 0; }
.article ul { list-style: none; }
.article ul li::before { content: "› "; color: var(--amber); margin-left: -2ch; }
.article blockquote { margin: .6em 0; padding-left: 2ch; border-left: 2px solid var(--dim); color: var(--dim); }
.article code { color: var(--green); }
.article pre { margin: .6em 0; padding: .6em 1ch; background: #0d1117; overflow-x: auto; white-space: pre; }
.article pre code { color: var(--fg); }
.article a { color: var(--cyan); }
.article strong { color: #fff; }
.article hr { border: 0; border-top: 1px dashed var(--dim); margin: 1em 0; }
.article table { border-collapse: collapse; margin: .6em 0; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid #30363d; padding: 2px 1ch; text-align: left; }
.article th { color: var(--amber); }

.entry-row { white-space: pre-wrap; }
.entry-row .meta { color: var(--dim); }

.noscript { padding: 16px; font: 15px/1.5 var(--font); color: var(--fg); max-width: 70ch; }

@media (max-width: 640px) {
  body { font-size: 13.5px; }
  #term { padding-top: 10px; }
  .logo { font-size: 11px; }
}

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