/* ==========================================================================
   The terminal
   --------------------------------------------------------------------------
   Click the wordmark and a prompt opens under it. Everything it does happens
   in this browser tab and nowhere else: there is no request, no server, no
   state that outlives a refresh. The js command evals in page scope, which is
   what the dev console already lets anyone do, so it grants nothing new. It is
   deliberately not seedable from the URL, because a console you can fill from
   a link is a reflected XSS vector rather than an easter egg.
   ========================================================================== */

.term {
  display: none;
  margin-block: 14px 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
}
.term.on { display: block; }

.term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.term__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.term__x { margin-inline-start: auto; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.term__x:hover { color: var(--ink); background: var(--rule-2); }

.term__out {
  max-height: 46vh;
  overflow-y: auto;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-2);
}
.term__out b { color: var(--ink); font-weight: 700; }
.term__out i { color: var(--signal); font-style: normal; }
.term__out u { color: var(--faint); text-decoration: none; }
.term__out a { color: var(--signal); }

.term__line { display: flex; gap: 8px; align-items: baseline; padding: 0 12px 12px; }
.term__ps { color: var(--signal); flex: none; }
.term__in {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  color: var(--ink);
  caret-color: var(--signal);
  padding: 0;
}


/* The wordmark advertises itself, quietly. */
.mark { cursor: pointer; }
.mark:hover i { animation: none; opacity: 1; }

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