:root {
    --bg: #0b0f0c;
    --bg-elev: #10161200;
    --fg: #d7e0d9;
    --dim: #7d8a80;
    --accent: #41ff8a;
    --accent-2: #ffd166;
    --error: #ff6b6b;
    --link: #7cc4ff;
    --font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }
  [data-theme="amber"] { --accent: #ffb000; --accent-2: #ffe08a; --fg: #e8d9b5; --dim: #8a7c5a; --bg: #0e0a04; }
  [data-theme="paper"] { --bg: #f4f1ea; --fg: #1e1e1e; --dim: #6b6b6b; --accent: #0a7d3e; --accent-2: #a35b00; --link: #0b5bb5; --error: #b00020; }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
  }
  body::after {            /* faint scanlines */
    content: "";
    pointer-events: none;
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }
  [data-theme="paper"] body::after { display: none; }

  .screen {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 16px 40vh;      /* bottom space so the prompt can scroll up */
    min-height: 100%;
    cursor: text;
  }
  .line { white-space: pre-wrap; word-break: break-word; }
  .prompt { color: var(--accent); }
  .prompt .path { color: var(--link); }
  .dim { color: var(--dim); }
  .warn { color: var(--accent-2); }
  .err { color: var(--error); }
  a { color: var(--link); text-decoration: none; border-bottom: 1px dotted currentColor; }
  a:hover, a:focus-visible { border-bottom-style: solid; outline: none; }

  .input-line { display: flex; align-items: baseline; gap: 0; }
  .input-line input {
    flex: 1;
    background: transparent; border: 0; outline: none;
    color: var(--fg); font: inherit; padding: 0; margin: 0;
    caret-color: transparent;
  }
  .cursor {
    display: inline-block; width: .6em; height: 1.1em;
    background: var(--accent); vertical-align: text-bottom;
    margin-left: -.6em; position: relative; left: var(--caret, 0);
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .ascii { color: var(--accent); line-height: 1.15; font-size: clamp(8px, 2.2vw, 15px); }
  table { border-collapse: collapse; }
  td { padding: 0 1.4em 0 0; vertical-align: top; }
  td:first-child { color: var(--accent-2); white-space: nowrap; }

  .hint {
    position: fixed; right: 12px; bottom: 10px;
    color: var(--dim); font-size: 12px; opacity: .8;
  }
  @media (max-width: 600px) { .hint { display: none; } body { font-size: 14px; } }
  @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }