:root {
  /* AWS console dark mode: navy page, squid ink panels, the orange used sparingly */
  --water: #0f1b2a;
  --deep: #192534;
  --line: #d1d5db;
  --silt: #8d99a8;
  --bobber: #ff9900;
  --float: #f2f3f3;
  --edge: #414d5c;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--water); }

body {
  margin: 0;
  background: var(--water);
  color: var(--line);
  font: 15px/1.6 var(--mono);
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--line); color: var(--water); }

#screen {
  max-width: 92ch;
  padding: 28px 24px 30vh;
  cursor: text;
}

p, pre { margin: 0; }
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
section { margin-top: 1.6em; }
section > .cmd + * { margin-top: 0.1em; }

.dim { color: var(--silt); }
.ps { color: var(--silt); user-select: none; }

/* Underline drawn as a background so visited links look the same (browsers restrict :visited styling). */
a, a:visited {
  color: var(--line); text-decoration: none;
  background: linear-gradient(var(--silt), var(--silt)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 1px;
}
a:hover { background: var(--line); color: var(--water); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bobber); outline-offset: 2px; }

kbd { font: inherit; color: var(--line); }

/* The one loud thing: the name as a scene-NFO block logo. 81 columns, scaled to fit. */
.mark { margin: 1.6em 0 1.1em; font-weight: 400; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nfo {
  margin: 0;
  font: 400 min(15px, calc((100vw - 34px) / 49))/1 var(--mono);
  white-space: pre;
  overflow-wrap: normal;
  color: var(--bobber);
}
.nfo .rule { color: var(--silt); }
.motd { max-width: none; }
@media (min-width: 960px) { .motd { white-space: nowrap; } }

.readme { border-left: 1px solid var(--edge); padding-left: 1.2ch; }
.readme p + p, .readme p + pre { margin-top: 0.8em; }
.readme-title { color: var(--float); }

/* Output from typed commands */
#out .cmd { margin-top: 1.6em; }
#out .res { white-space: pre-wrap; overflow-wrap: anywhere; }
#out .bite { color: var(--float); }
button.run {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-decoration-color: var(--silt); text-underline-offset: 3px; cursor: pointer;
}
button.run:hover { background: var(--line); color: var(--water); text-decoration: none; }

/* Prompt with a bobber for a cursor */
.js-only { display: none; }
.js .js-only { display: inline; }
.js form.js-only { display: flex; }

#prompt { margin-top: 1.6em; gap: 1ch; position: relative; }
.js #prompt.busy { display: none; }
#out .bobber { animation: bob 3.2s ease-in-out infinite; }
#out .bobber.dip { animation: dip 0.7s ease-in 1 forwards; }
.line { position: relative; flex: 1; min-height: 1.6em; white-space: pre; }
#cmd {
  position: absolute; inset: 0; width: 100%;
  opacity: 0; border: 0; padding: 0; font: inherit; color: transparent; background: transparent;
  caret-color: transparent;
}

.bobber {
  display: inline-block;
  width: 0.62em; height: 1.05em;
  vertical-align: -0.2em;
  background: linear-gradient(var(--float) 0 42%, var(--bobber) 42% 100%);
  border-radius: 0.31em 0.31em 0.2em 0.2em;
  animation: bob 3.2s ease-in-out infinite;
}
#prompt:not(.focused) .bobber { animation: none; opacity: 0.55; }
.bobber.dip { animation: dip 0.7s ease-in 1; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@keyframes dip {
  0% { transform: translateY(0); }
  25% { transform: translateY(7px); }
  60% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  #screen { padding: 20px 16px 30vh; }
  .mark { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bobber, .bobber.dip { animation: none; }
}
#out .res p, #out .res .readme { white-space: normal; }