/* ---- terminal theme ---------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg:      #f7f7f2;
  --fg:      #33383e;
  --bright:  #14181d;
  --dim:     #767b82;
  --accent:  #0369a1;   /* sky-700 */
  --selection: #0369a133;

  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
               "Menlo", "Consolas", "Liberation Mono", monospace;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0b0e14;
    --fg:      #b9c1cb;
    --bright:  #eef2f6;
    --dim:     #636b76;
    --accent:  #38bdf8;   /* sky-400 */
    --selection: #38bdf833;
  }
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  padding: clamp(1.25rem, 5vw, 4rem);
  padding-bottom: 6rem;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.7 var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); }

main {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ---- lines ----------------------------------------------------------------- */

.line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--bright);
}

.prompt {
  color: var(--accent);
  font-weight: 600;
  user-select: none;
}
.prompt::after { content: " "; }

.out { color: var(--fg); }
.dim { color: var(--dim); }
.accent { color: var(--accent); }

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* ---- sticky nav ---------------------------------------------------------- */

#nav {
  position: sticky;
  top: 0;
  z-index: 15;
  max-width: var(--measure);
  margin: 0 auto 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--dim);
}

#nav .brand {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.25rem;
}

#nav .navcmd {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
#nav .navcmd:hover,
#nav .navcmd:focus-visible { text-decoration: underline; outline: none; }

.ghost {
  color: var(--dim);
  white-space: pre;
  user-select: none;
  pointer-events: none;
}

/* ---- live input ------------------------------------------------------------ */

.iwrap { position: relative; }

.mirror {
  color: var(--bright);
  white-space: pre;
}

input.cmd {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  outline: none;
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.05s steps(1) infinite;
}

.iwrap:not(:focus-within) .cursor {
  animation: none;
  opacity: 0.4;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ---- sl: the train -------------------------------------------------------- */

.train { overflow: hidden; }

.loco {
  margin: 0;
  font: inherit;
  white-space: pre;
  color: var(--accent);
  display: inline-block;
  will-change: transform;
  animation: chug 2.6s linear;
}

@keyframes chug {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-30ch); }
}

@media (prefers-reduced-motion: reduce) {
  .loco { animation-duration: 0.01s; }
}

/* ---- the duck ----------------------------------------------------------------- */

#duck {
  position: fixed;
  bottom: 10px;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: 13px/1.15 var(--font-mono);
  color: var(--accent);
  pointer-events: none;
  will-change: transform;
}

#duck .sprite {
  margin: 0 0 0 4px;
  white-space: pre;
  cursor: pointer;
  pointer-events: auto;
}
#duck .sprite.flip { scale: -1 1; }
#duck .sprite.spin { animation: duck-spin 0.48s ease; }
#duck .sprite.pinch { animation: duck-squish 0.36s ease; }

@keyframes duck-spin { to { transform: rotate(360deg); } }
@keyframes duck-squish {
  30% { transform: scale(1.35, 0.65); }
  65% { transform: scale(0.85, 1.2); }
}

#duck .bubble {
  pointer-events: auto;
  margin: 0 0 6px 2px;
  padding: 3px 8px;
  border: 1px solid var(--dim);
  border-radius: 5px;
  background: var(--bg);
  color: var(--fg);
  max-width: min(60vw, 260px);
  opacity: 0;
  transition: opacity 0.25s;
}
#duck .bubble.show { opacity: 1; }

/* ---- colophon (page footer) --------------------------------------------- */

#colophon {
  max-width: var(--measure);
  margin: 3.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--dim);
  color: var(--dim);
  font-size: 0.8rem;
  line-height: 1.7;
}

/* ---- no-js fallback --------------------------------------------------------- */

.fallback {
  max-width: var(--measure);
  margin: 0 auto;
  font: inherit;
  white-space: pre-wrap;
  color: var(--bright);
}
.fallback .prompt { color: var(--accent); }