Error Squiggle

<!-- Error Squiggle — IDE-style red wavy underline + tooltip on hover -->
<pre class="nuda-sq">
  <code>const x = <span class="nuda-sq__err" data-msg="unknown identifier">undefned</span></code>
</pre>

/* Error Squiggle
   Wavy underline (CSS text-decoration:wavy) on a token + hover tooltip.
   Customize: --sq-danger, the tooltip text via the ::after content. */

.nuda-sq {
  --sq-danger: #ff6363;
  margin: 0;
  padding: 12px 14px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font: 500 0.95rem ui-monospace, monospace;
  color: #fafafa;
}

.nuda-sq__err {
  position: relative;
  color: #fafafa;
  text-decoration: underline wavy var(--sq-danger);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
  cursor: pointer;
  animation: nuda-sq-pulse 2s ease-in-out infinite;
}

.nuda-sq__err::after {
  content: attr(data-msg);
  position: absolute;
  left: 0;
  top: -28px;
  padding: 4px 8px;
  background: var(--sq-danger);
  color: #fafafa;
  font: 600 0.7rem ui-sans-serif, system-ui, sans-serif;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.nuda-sq__err:hover::after {
  opacity: 1;
  transform: translateY(0);
}

@keyframes nuda-sq-pulse {
  0%, 100% { text-decoration-color: var(--sq-danger); }
  50%      { text-decoration-color: rgba(255, 99, 99, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sq__err { animation: none; }
}