:root {
  --bg: #15171D;
  --bg-raise: #1C1F27;
  --fg: #E8E4DC;
  --dim: #6C7080;
  --pink: #E0245E;
  --blue: #8FB8D8;
  --yellow: #E6B450;
  --green: #7FC28A;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fsn: 15;                      /* unitless font size, for the touch input trick below */
  --fs: calc(var(--fsn) * 1px);
  --lh: 1.5;
}
@media (max-width: 640px) { :root { --fsn: 13; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs)/var(--lh) var(--mono);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pink); color: #fff; }

#term {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 8px;
  scrollbar-width: thin;
  scrollbar-color: #2C3040 transparent;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (min-width: 900px) {
  #term { padding: 32px 0 12px; }
  #out, #line { width: min(100ch, 100% - 32px); margin-inline: auto; }
}

#out { white-space: pre-wrap; overflow-wrap: anywhere; }
#out .cmd { color: var(--fg); }
#out a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--blue) 50%, transparent); }
#out a:hover { color: #fff; text-decoration-color: var(--pink); }
#out a[href^="cmd:"] { text-decoration-style: dotted; cursor: pointer; }
#out .dim { opacity: .6; }
#out b { font-weight: 600; }

#line { display: flex; align-items: baseline; margin: 0 auto; white-space: pre; }
#prompt { flex: none; white-space: pre; }
#in {
  flex: 1 1 auto;
  min-width: 2ch;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  color: var(--fg);
  font: inherit;
  caret-color: var(--pink);
}
#in:disabled { color: var(--dim); }
#in.busy { caret-color: var(--dim); }
/* iOS zooms the page when a focused input is under 16px. Keep the input at
   16px and scale it down visually so it still matches the prompt. */
@media (hover: none) and (pointer: coarse) {
  /* Finger-sized targets: links get vertical padding without moving the text,
     the prompt row and status bar get taller. */
  #out a { padding: 6px 0; margin: -6px 0; }
  #line { align-items: center; min-height: 44px; }
  #status { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs); }
  #in {
    font-size: 16px;
    line-height: normal;
    height: calc(var(--fs) * var(--lh));
    transform: scale(calc(var(--fsn) / 16));
    transform-origin: left center;
  }
}

/* tmux-ish status bar: the one loud element on the page */
#status {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 12px calc(3px + env(safe-area-inset-bottom, 0px));
  background: var(--pink);
  color: #fff;
  font-size: calc(var(--fs) - 1px);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
}
#status .right { display: flex; gap: 16px; overflow: hidden; }
#status a { color: #fff; text-decoration: none; }
#status a:hover, #status a:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }
#status .muted { opacity: .75; }
#status .left b { font-weight: 600; }
@media (max-width: 640px) { #status .hint { display: none; } }
@media (max-width: 420px) { #status .left .muted { display: none; } }

.noscript { max-width: 70ch; margin: 24px auto; padding: 0 16px; }
.noscript a { color: var(--blue); }
.noscript code { color: var(--pink); }

@keyframes blink { 50% { opacity: 0; } }
.typing::after { content: "▍"; color: var(--pink); animation: blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .typing::after { animation: none; } }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }