body {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(241, 245, 249, 1));
  transition: background-color 0.3s, color 0.3s;
}

.js-auto-resize {
  overflow-y: hidden;
  transition: height 0.2s ease, border-color 0.2s ease;
}

#preview {
  font-family: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.history-item-badge {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.history-item:hover .history-item-badge,
.history-item:focus-visible .history-item-badge {
  opacity: 1;
}

.dark ::-webkit-scrollbar {
  width: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.dark body {
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.12), transparent 25%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 25%),
    linear-gradient(180deg, rgba(15, 23, 42, 1), rgba(2, 6, 23, 1));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}