.markdown a {
  color: #4183C4;
  text-decoration: underline;
}

.markdown pre.highlight {
  padding: 1em;
  overflow-y: auto;
}

.markdown blockquote {
  color: #6c8b9f;
  border-left: 3px solid #4df4ff;
  padding-left: 1em;
}

.markdown code.prettyprint {
  color: red;
  background-color: #F2F2F2;
  font-weight: bold;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

dialog::backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

progress[value] {
  height: 6px;
}

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

.hint-text h1, .hint-text h2, .hint-text h3, .hint-text h4, .hint-text h5, .hint-text h6 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.hint-text p {
  margin-bottom: 0.75em;
}

.hint-text ul, .hint-text ol {
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}

.hint-text li {
  margin-bottom: 0.25em;
}

.hint-text code {
  background-color: #fdf6e3;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-size: 0.9em;
}

.hint-text pre {
  background-color: #fdf6e3;
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin-bottom: 0.75em;
}

/* New explanation styles */
.explanation-content {
  background-color: #EBF8FF; /* bg-blue-50 */
  border: 1px solid #BEE3F8; /* border-blue-200 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem; /* p-4 */
  margin-top: 1rem; /* mt-4 */
}

.explanation-text {
  color: #2A4365; /* text-blue-900 */
}

.explanation-text h1, .explanation-text h2, .explanation-text h3, .explanation-text h4, .explanation-text h5, .explanation-text h6 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.explanation-text p {
  margin-bottom: 0.75em;
}

.explanation-text ul, .explanation-text ol {
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}

.explanation-text li {
  margin-bottom: 0.25em;
}

.explanation-text code {
  background-color: #EBF8FF; /* lighter blue background for code */
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-size: 0.9em;
}

.explanation-text pre {
  background-color: #EBF8FF; /* lighter blue background for code blocks */
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin-bottom: 0.75em;
}