/* A small readout of this visit, in the same quiet type as the colophon. */
.visitor-readout {
  position: absolute;
  top: var(--terminal-inset);
  left: var(--terminal-inset);
  z-index: 3;
  max-width: min(420px, calc(100% - 156px));
  color: var(--muted);
  font: 10px/1.65 var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0;
  transition: opacity 600ms ease;
}
.visitor-readout[hidden] { display: none; }
.visitor-title { margin: 0 0 8px; color: var(--muted); font: inherit; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.visitor-command { margin: 0 0 10px; min-height: 1.7em; color: var(--bright); }
.visitor-prompt { color: color-mix(in srgb, var(--muted) 75%, var(--canvas)); padding-right: .6em; }
.visitor-cursor { visibility: hidden; }
.visitor-typing .visitor-cursor { visibility: inherit; animation: startup-blink 800ms steps(1) infinite; }
.visitor-readout dl { display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: 3px 2ch; margin: 0; }
.visitor-readout dt { position: relative; color: color-mix(in srgb, var(--muted) 75%, var(--canvas)); }
.visitor-readout dt::after { content: ':'; position: absolute; right: -1ch; }
.visitor-readout dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.visitor-readout dd.is-active::after { content: ' ▎'; color: var(--bright); animation: startup-blink 800ms steps(1) infinite; }
.visitor-readout :is(.visitor-title, .visitor-command, dt, dd) { visibility: hidden; opacity: 0; filter: blur(2px); transition: opacity 220ms ease, filter 220ms ease; }
.visitor-readout :is(.visitor-title, .visitor-command, dt, dd).is-visible { visibility: inherit; opacity: 1; filter: none; }
.visitor-instant :is(.visitor-title, .visitor-command, dt, dd) { transition: none; }
.visitor-readout abbr { text-decoration: none; }
.visitor-render { display: flex; align-items: baseline; gap: 1ch; margin: 10px 0 0; color: var(--muted); }
.visitor-render[hidden] { display: none; }
.visitor-spinner { flex: 0 0 4ch; color: var(--bright); }
html[data-visitor]:not(.visitor-settled) main { padding-top: max(100px, var(--visitor-clearance, 120px)); }
.startup-running .visitor-readout { visibility: hidden; }
.visitor-settled .visitor-readout {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.startup-running .visitor-readout { transition: none; }
.visitor-settled .visitor-readout.visitor-instant { transition: none; }
/* Keep the content out of view until the User readout is complete. */
.visitor-pending :is(main, .reading-settings, .keyboard-control) {
  visibility: hidden;
  pointer-events: none;
}
.startup-animate main { transition: opacity 1200ms ease, filter 1200ms ease; }
.startup-animate .reading-settings { transition: opacity 1200ms ease; }
.visitor-pending main { opacity: 0; filter: blur(6px); transition: none; }
.visitor-pending .reading-settings { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .visitor-readout :is(.visitor-title, .visitor-command, dt, dd) { transition: none; }
  .visitor-cursor, .visitor-readout dd.is-active::after { animation: none; visibility: hidden; }
  .visitor-pending :is(main, .reading-settings, .keyboard-control) { visibility: visible; pointer-events: auto; }
  .visitor-pending :is(main, .reading-settings) { opacity: 1; filter: none; }
  .startup-animate :is(main, .reading-settings) { transition: none; }
}
@media (max-width: 760px) {
  .visitor-readout {
    max-width: calc(100% - var(--terminal-inset) - max(16px, env(safe-area-inset-right)) - 100px);
    font-size: 9px;
  }
  html[data-visitor]:not(.visitor-settled) main { padding-top: max(96px, var(--visitor-clearance, 120px)); }
  .visitor-pending main { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visitor-readout, .visitor-settled .visitor-readout, .startup-animate main { transition: none; }
}