:root { color-scheme: dark; --ground: #12121a; --ink: #d7d7e0; --dim: #8b90a0; --accent: #9d90ff; --rule: #262634; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body { font: 14px/1.4 "IBM Plex Sans", "Inter", system-ui, sans-serif; }

/* The page's header, in the terminal grammar (gov NEIO-4): the name, the
   cursor in the accent, what this is, and where to read more. */
#bar {
  position: fixed; inset: 0 0 auto 0; height: 36px; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-bottom: 1px solid var(--rule); white-space: nowrap; overflow: hidden;
}
#bar .name { font-weight: 600; }
#bar .cursor { color: var(--accent); }
#bar .what { color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#bar nav { margin-left: auto; display: flex; gap: 14px; }
#bar a { color: var(--dim); text-decoration: none; }
#bar a:hover, #bar a:focus-visible { color: var(--ink); }
@media (max-width: 720px) { #bar .what { display: none; } #bar { gap: 10px; } #bar nav { gap: 10px; } }

/* An inset, not padding: FitAddon measures the parent's computed width, which
   with border-box includes the padding, and the terminal would overflow it. */
#term { position: fixed; inset: 46px 12px 10px; }
#status { position: fixed; inset: auto 0 45% 0; text-align: center; color: var(--dim); margin: 0; }
#status[hidden] { display: none; }