@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  color-scheme: light;
}

body {
  font-family: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.option-btn {
  transition: all 0.15s ease-out;
}

.option-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: #6366f1;
}

.correct {
  background-color: #f0fdf4 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}

.wrong {
  background-color: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

.multi-selected {
  border-color: #6366f1 !important;
  background-color: #eef2ff !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.animate-fade {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.prose-content h1,
.prose-content h2,
.prose-content h3 {
  font-weight: 800;
  margin: 0.5rem 0;
  color: #1e293b;
}

.prose-content p {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.prose-content ul,
.prose-content ol {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }

.prose-content strong {
  color: #4338ca;
}

.prose-content code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.375rem;
  background: #e2e8f0;
}