/* lsrs.dev: a terminal, not a web page. */
:root {
  --bg: #0e1012;
  --fg: #d8dde3;
  --dim: #7d8590;
  --faint: #2b3036;
  --prompt: #7ee787;
  --link: #e6edf3;
  --amber: #e3b341;
  --sel: #264f78;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sel); }
.wrap { max-width: 80ch; margin: 0 auto; padding: 40px 20px 56px; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
a:hover, a:focus-visible { background: var(--fg); color: var(--bg); text-decoration: none; outline: none; }
code, kbd { font: inherit; color: var(--link); }
.ps { color: var(--prompt); }
.ps::after { content: " "; }
.dim { color: var(--dim); }
.line { white-space: pre-wrap; word-break: break-word; }
.out { white-space: pre-wrap; word-break: break-word; margin: 0 0 1.2em; }
.out.list, .ls, .prompt { white-space: normal; }
.ls { list-style: none; margin: 0; padding: 0; }
.ls li { display: grid; grid-template-columns: 11ch 1fr auto; gap: 0 2ch; align-items: baseline; }
.ls .name { color: var(--link); }
.ls .name.off { color: var(--dim); text-decoration: none; }
.ls .desc { color: var(--fg); }
.ls .tag { color: var(--dim); }
.ls .tag.demo { color: var(--amber); }
@media (max-width: 560px) {
  .ls li { grid-template-columns: 1fr auto; }
  .ls .desc { grid-column: 1 / -1; order: 1; color: var(--dim); margin-bottom: 0.6em; }
}
.prompt { display: none; position: relative; cursor: text; }
.js .prompt { display: block; }
.prompt .typed { white-space: pre-wrap; word-break: break-all; }
.prompt .cursor {
  display: inline-block; width: 0.62em; height: 1.15em; vertical-align: -0.2em;
  outline: 1px solid var(--fg); outline-offset: -1px;
}
.prompt.focused .cursor { background: var(--fg); outline: none; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.prompt input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0;
  border: 0; padding: 0; margin: 0; font: inherit; color: transparent; background: transparent; caret-color: transparent;
}
.prose h1 { font-size: inherit; font-weight: 700; margin: 0 0 0.3em; }
.prose h1::before { content: "# "; color: var(--dim); }
.prose h2 { font-size: inherit; font-weight: 700; margin: 1.8em 0 0.3em; }
.prose h2::before { content: "## "; color: var(--dim); }
.prose p { margin: 0 0 1em; color: var(--fg); }
.prose strong { color: var(--link); }
.prose .updated { color: var(--dim); margin-bottom: 1.6em; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--faint); color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px 3ch; }
footer a { color: var(--dim); text-decoration: none; }
footer a:hover, footer a:focus-visible { background: var(--dim); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .prompt.focused .cursor { animation: none; } }