:root {
    --bg: #0f0f10;
    --fg: #e7e7ea;
    --muted: #9a9aa0;
    --placeholder: #55555a;
    --accent: #6a6af4;
  }
  html, body { height: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
    display: grid; grid-template-rows: 1fr auto;
  }
  .message {
    display: grid; place-items: center; padding: 6vh 6vw; text-align: center;
  }
  .message [contenteditable] {
    outline: none; border: 0; background: transparent; color: var(--placeholder);
    font-weight: 650; letter-spacing: .5px; line-height: 1.15;
    font-size: clamp(28px, 8vw, 80px);
    caret-color: var(--accent);
    min-width: 1ch; white-space: pre-wrap; word-break: break-word;
    max-width: 90vw; /* keep lines wrapping consistently */
  }
  .message [contenteditable].has-text { color: var(--fg); }
  .hint { font-size: 14px; color: var(--muted); margin-top: 12px; user-select: none; }
  .controls {
    display: flex; gap: 14px; align-items: center; justify-content: center;
    padding: 12px 14px; border-top: 1px solid #232326; background: rgba(18,18,20,.7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  button {
    appearance: none; border: 1px solid #2a2a2e; background: #1a1a1d; color: var(--fg);
    padding: 10px 16px; border-radius: 12px; cursor: pointer; font-weight: 600;
  }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; width: min(42vw, 420px); height: 28px;
    background: transparent; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #2a2a2e; border-radius: 999px; }
  input[type="range"]::-moz-range-track { height: 4px; background: #2a2a2e; border-radius: 999px; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); margin-top: -6px; }
  input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--fg); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }