body {
  font-family: Arial, sans-serif;
  background: #f7f7f8;
  padding: 24px;
}

/* ================= APP WRAPPER ================= */

.app {
  width: 480px;
}

/* ================= EDITOR WRAPPER ================= */

.editor-wrapper {
  position: relative;
  width: 480px;
}

/* ================= EDITOR (contenteditable) ================= */

.editor {
  position: relative;
  z-index: 2;

  width: 480px;
  min-height: 140px;
  padding: 12px 12px 14px 12px; /* extra bottom space for descenders */

  font-size: 15px;
  line-height: 1.6;
  box-sizing: border-box;

  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
  background: transparent;

  white-space: pre-wrap;
  word-wrap: break-word;

  caret-color: #111827;
}

/* focus */
.editor:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* placeholder */
.editor:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

/* ================= GHOST LAYER ================= */

.ghost-layer {
  position: absolute;
  top: 1px;
  left: 1px;

  width: 480px;
  min-height: 140px;

  padding: 12px 12px 14px 12px;
  box-sizing: border-box;

  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;

  letter-spacing: normal;
  word-spacing: normal;

  color: #9ca3af;

  white-space: pre-wrap;
  word-wrap: break-word;

  pointer-events: none;
  user-select: none;

  z-index: 1;
}

/* ================= TYPO (ZIG-ZAG) ================= */

.typo {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* ================= PROFANITY ================= */

.profane {
  background: rgba(239, 68, 68, 0.15);
  color: #991b1b;
  border-radius: 3px;
  padding: 0 2px;
}

/* ================= OUTPUT / METRICS ================= */

#out {
  margin-top: 14px;
  padding: 12px;
  width: 480px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;

  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #111827;
}

/* ================= METRICS HEADER ================= */

#out::before {
  content: "Keyboard AI Status";
  display: block;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 6px;
  color: #374151;
}

.testing {
  width: 150px;
  min-height: 50px;
  border: 1px solid #000;
  border-radius: 5px;
}