html[data-modern-ui="ready"] .typo {
  color: var(--mui-color-text);
  line-height: var(--mui-line-relaxed);
}

html[data-modern-ui="ready"] .typo :where(p, ul, ol, blockquote, pre, table) {
  margin-bottom: 1em;
}

html[data-modern-ui="ready"] .typo :where(h1, h2, h3, h4) {
  margin-top: 1.6em;
  margin-bottom: 0.65em;
  scroll-margin-top: 80px;
}

html[data-modern-ui="ready"] .typo pre,
html[data-modern-ui="ready"] pre[class*="language-"],
html[data-modern-ui="ready"] :not(pre) > code[class*="language-"] {
  border: 1px solid var(--mui-color-border-subtle);
  border-radius: var(--mui-radius-md);
  color: var(--mui-color-text);
  background: var(--mui-color-surface-muted);
  box-shadow: inset 0 1px 0 var(--mui-color-border-subtle);
}

html[data-modern-ui="ready"] .typo pre {
  padding: var(--mui-space-4);
  line-height: 1.65;
}

html[data-modern-ui="ready"] .typo table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-color: var(--mui-color-divider);
}

html[data-modern-ui="ready"] .typo table th,
html[data-modern-ui="ready"] .typo table td {
  border-color: var(--mui-color-divider);
}

html[data-modern-ui="ready"] .page--problem_detail .section__body > .typo,
html[data-modern-ui="ready"] .page--problem_solution .section__body > .typo {
  max-width: var(--mui-reading-max);
  margin-inline: auto;
  font-size: 15px;
}

html[data-modern-ui="ready"] .page--problem_detail .problem__title,
html[data-modern-ui="ready"] .page--problem_detail h1.section__title {
  font-size: clamp(22px, 3vw, 30px);
  line-height: var(--mui-line-tight);
}

html[data-modern-ui="ready"] .problem__tag,
html[data-modern-ui="ready"] .problem__category-item {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 2px 10px;
}

html[data-modern-ui="ready"] .page--problem_main .data-table td,
html[data-modern-ui="ready"] .page--record_main .data-table td,
html[data-modern-ui="ready"] .page--ranking .data-table td,
html[data-modern-ui="ready"] .page--contest_scoreboard .data-table td {
  height: 44px;
}

html[data-modern-ui="ready"] :where(
  .record-status--text.accepted,
  .record-status--text[data-status="1"],
  .status-accepted,
  .pass
) {
  color: var(--mui-status-accepted);
}

html[data-modern-ui="ready"] :where(
  .record-status--text.wrong-answer,
  .status-wrong-answer,
  .fail
) {
  color: var(--mui-status-wrong);
}

html[data-modern-ui="ready"] :where(
  .record-status--text.time-limit-exceeded,
  .record-status--text.memory-limit-exceeded,
  .status-time-limit,
  .status-memory-limit
) {
  color: var(--mui-status-limit);
}

html[data-modern-ui="ready"] :where(
  .record-status--text.runtime-error,
  .status-runtime-error
) {
  color: var(--mui-status-runtime);
}

html[data-modern-ui="ready"] :where(
  .record-status--text.compile-error,
  .status-compile-error
) {
  color: var(--mui-status-compile);
}

html[data-modern-ui="ready"] :where(
  .record-status--text.pending,
  .record-status--text.judging,
  .status-pending,
  .status-judging
) {
  color: var(--mui-status-judging);
}

html[data-modern-ui="ready"] .record-status--text {
  font-weight: var(--mui-weight-semibold);
  font-variant-numeric: tabular-nums;
}

html[data-modern-ui="ready"] .monaco-editor,
html[data-modern-ui="ready"] .editor-container,
html[data-modern-ui="ready"] .scratchpad-container {
  overflow: hidden;
  border: 1px solid var(--mui-color-border);
  border-radius: var(--mui-radius-lg);
  background: var(--mui-color-surface);
  box-shadow: var(--mui-shadow-xs);
}

html[data-modern-ui="ready"] .scratchpad__toolbar,
html[data-modern-ui="ready"] .toolbar {
  border-bottom: 1px solid var(--mui-color-divider);
  color: var(--mui-color-text-secondary);
  background: var(--mui-color-surface-glass);
}

html[data-modern-ui="ready"] .contest__title,
html[data-modern-ui="ready"] .contest__date,
html[data-modern-ui="ready"] .numbox__num {
  font-variant-numeric: tabular-nums;
}

html[data-modern-ui="ready"] .numbox__num {
  color: var(--mui-color-text);
  font-weight: var(--mui-weight-semibold);
}

html[data-modern-ui="ready"] .numbox__text {
  color: var(--mui-color-text-secondary);
}

html[data-modern-ui="ready"] .page--homepage .section {
  transition:
    border-color var(--mui-duration-normal) var(--mui-ease-standard),
    box-shadow var(--mui-duration-normal) var(--mui-ease-standard),
    transform var(--mui-duration-normal) var(--mui-ease-standard);
}

html[data-modern-ui="ready"] .page--homepage .section:hover {
  border-color: var(--mui-color-border);
  box-shadow: var(--mui-shadow-md);
  transform: translateY(-2px);
}

html[data-modern-ui="ready"] .page--user_login .immersive-section,
html[data-modern-ui="ready"] .page--user_register .immersive-section,
html[data-modern-ui="ready"] .dialog--signin__main {
  border: 1px solid var(--mui-glass-border);
  border-radius: var(--mui-radius-dialog);
  background: var(--mui-glass-bg-strong);
  box-shadow: var(--mui-shadow-lg);
}