/* The ASCII art generator. Styled as a board terminal without pretending to
   be one: this page has to be readable to a search visitor who has never
   seen a BBS, so it is plain HTML with generous type rather than a canvas. */
:root { --cyan: #55ffff; --dim: #777; --line: #333; }



.foot { color: var(--dim); font-size: .9rem; }
ul { padding-left: 1.2rem; }
li { margin: .4rem 0; }

#drop {
  margin: 1.5rem 0 1rem; padding: 2.5rem 1.5rem; text-align: center;
  border: 1px dashed #555; background: #060606; cursor: pointer;
  display: flex; flex-direction: column; gap: .4rem;
}
#drop:hover, #drop:focus-visible, #drop.over { border-color: var(--cyan); background: #0a0f0f; }
#drop strong { color: var(--cyan); font-weight: 600; }
#drop span { color: var(--dim); font-size: .85rem; }

.controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem 1.5rem; padding: 1rem 0;
}
.controls label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--dim); }
.controls label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: .5rem; }
select, input[type="range"] { font: inherit; accent-color: var(--cyan); }
select { background: #000; color: #ddd; border: 1px solid #555; padding: .35em; }
output { color: var(--cyan); }

.actions { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
button {
  font: inherit; padding: .5em 1.2em; cursor: pointer;
  background: #000; color: #ddd; border: 1px solid #555;
}
button:hover { border-color: var(--cyan); color: var(--cyan); }
#status { color: var(--dim); font-size: .85rem; }

#out-text {
  /* The ramp only reads correctly in a monospace face at a tight line
     height; anything looser and the picture pulls apart vertically. */
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 9px; line-height: 1; letter-spacing: 0; white-space: pre;
  overflow-x: auto; background: #060606; border: 1px solid var(--line);
  padding: 1rem; color: #ddd; margin: 0;
}
#out-canvas {
  max-width: 100%; image-rendering: pixelated;
  border: 1px solid var(--line); background: #000;
}