.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px; border: 2px dashed var(--border); border-radius: 14px;
  color: var(--muted); cursor: pointer; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dz-icon { font-size: 2rem; }
input[type="range"] { width: 100%; accent-color: var(--primary); }

.ascii {
  margin-top: 16px; background: #16181d; color: #e7f4f2;
  padding: 14px; border-radius: 10px; overflow-x: auto;
  font-family: ui-monospace, monospace; font-size: 6px; line-height: 6px;
  white-space: pre;
}