/* User Provided Stylesheet */

:root {
  --stats-search-bg: rgb(245 245 247 / 84%);
  --stats-search-border: rgb(0 0 0 / 8%);
  --stats-search-text: rgb(29 29 31);
  --stats-search-muted: rgb(110 110 115);
  --stats-search-shadow: 0 18px 48px rgb(0 0 0 / 16%);
}

.dark {
  --stats-search-bg: rgb(29 29 31 / 82%);
  --stats-search-border: rgb(255 255 255 / 12%);
  --stats-search-text: rgb(245 245 247);
  --stats-search-muted: rgb(174 174 178);
  --stats-search-shadow: 0 20px 56px rgb(0 0 0 / 44%);
}

.myst-search-bar {
  border: 1px solid var(--stats-search-border) !important;
  border-radius: 999px !important;
  background: var(--stats-search-bg) !important;
  color: var(--stats-search-muted) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%);
  transition:
    width 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.myst-search-bar:hover {
  transform: translateY(-1px);
  border-color: rgb(0 0 0 / 14%) !important;
  background: rgb(255 255 255 / 92%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 8px 24px rgb(0 0 0 / 8%);
}

.dark .myst-search-bar:hover {
  border-color: rgb(255 255 255 / 20%) !important;
  background: rgb(44 44 46 / 88%) !important;
  box-shadow: 0 10px 26px rgb(0 0 0 / 28%);
}

.myst-search-bar:focus-visible {
  outline: none;
  border-color: rgb(0 122 255 / 55%) !important;
  box-shadow:
    0 0 0 4px rgb(0 122 255 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 60%);
}

.myst-search-bar svg {
  color: rgb(99 99 102);
  transition: color 180ms ease, transform 180ms ease;
}

.myst-search-bar:hover svg {
  color: rgb(29 29 31);
  transform: scale(1.03);
}

.dark .myst-search-bar svg,
.dark .myst-search-bar:hover svg {
  color: rgb(229 229 234);
}

.myst-search-text-placeholder {
  color: var(--stats-search-muted);
  font-size: 0.92rem;
}

.myst-search-shortcut kbd {
  min-width: 2.00rem;
  border: 0 !important;
  border-radius: 7px !important;
  background: rgb(255 255 255 / 68%);
  color: rgb(99 99 102);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 7%) !important;
  font-size: 0.72rem;
  line-height: 1;
}

.dark .myst-search-shortcut kbd {
  background: rgb(255 255 255 / 10%);
  color: rgb(209 209 214);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%) !important;
}

.myst-search-dialog {
  top: calc(var(--content-top) + 22px) !important;
  width: min(90vw, 1024px) !important;
  max-height: calc(86vh - var(--content-top)) !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--stats-search-text) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: stats-search-dialog-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dark .myst-search-dialog {
  background: transparent !important;
}

.myst-search-dialog[data-state='closed'] {
  animation: stats-search-dialog-out 160ms ease-in forwards;
}

.myst-search-input {
  height: 60px;
  border: 1px solid rgb(0 0 0 / 18%) !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 92%) !important;
  color: var(--stats-search-text) !important;
  box-shadow:
    0 18px 44px rgb(0 0 0 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 86%),
    inset 0 -1px 0 rgb(0 0 0 / 4%);
  font-size: clamp(1.22rem, 1.8vw, 2.25rem);
  font-weight: 520;
  letter-spacing: 0;
  padding-left: 5.25rem !important;
  padding-right: 2rem !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.dark .myst-search-input {
  border-color: rgb(255 255 255 / 18%) !important;
  background: rgb(44 44 46 / 88%) !important;
  box-shadow:
    0 18px 44px rgb(0 0 0 / 44%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
}

.myst-search-input:focus {
  outline: none !important;
  border-color: rgb(0 0 0 / 24%) !important;
  background: rgb(255 255 255 / 96%) !important;
  box-shadow:
    0 22px 54px rgb(0 0 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 90%),
    inset 0 -1px 0 rgb(0 0 0 / 5%) !important;
}

.dark .myst-search-input:focus {
  border-color: rgb(255 255 255 / 24%) !important;
  background: rgb(58 58 60 / 92%) !important;
}

.myst-search-input::placeholder {
  color: rgb(116 116 120);
  opacity: 1;
}

.dark .myst-search-input::placeholder {
  color: rgb(199 199 204);
}

.myst-search-dialog form {
  box-sizing: border-box;
  width: 100%;
}

.myst-search-dialog form > div {
  box-sizing: border-box;
  width: 100%;
  height: 60px !important;
}

.myst-search-dialog label svg {
  width: 2rem !important;
  height: 60px !important;
  padding: 0 !important;
  left: 2rem;
  color: rgb(120 120 124) !important;
}

.dark .myst-search-dialog label svg {
  color: rgb(209 209 214) !important;
}

.myst-search-results {
  box-sizing: border-box;
  width: calc(100% - 16px);
  margin-top: 18px !important;
  margin-left: 8px;
  margin-right: 8px;
  padding: 8px;
  border-radius: 28px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 14px 32px rgb(0 0 0 / 10%);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.dark .myst-search-results {
  background: rgb(28 28 30 / 76%);
  box-shadow: 0 16px 36px rgb(0 0 0 / 36%);
}

.myst-search-no-results {
  display: block;
  padding: 14px 22px;
  border-radius: 14px;
  color: rgb(86 86 90);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.35;
}

.dark .myst-search-no-results {
  color: rgb(209 209 214);
}

.myst-search-result-item a {
  border-radius: 14px !important;
  box-shadow: none !important;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.myst-search-result-item a:hover,
.myst-search-result-item[aria-selected='true'] a {
  transform: translateY(-1px);
  background: rgb(0 122 255 / 12%) !important;
  color: var(--stats-search-text) !important;
}

.dark .myst-search-result-item a:hover,
.dark .myst-search-result-item[aria-selected='true'] a {
  background: rgb(10 132 255 / 22%) !important;
}

.myst-search-result-highlight mark {
  border-radius: 4px;
  background: rgb(255 214 10 / 34%);
  color: inherit;
}

.myst-abstract-title {
  font-size: 0;
}

.myst-abstract-title::before {
  content: "摘要";
  font-size: 1rem;
}

.myst-abstract-title a,
.myst-abstract-title svg {
  font-size: 1rem;
}

.myst-keywords-label {
  font-size: 0;
}

.myst-keywords-label::before {
  content: "关键词：";
  font-size: 1rem;
}

.lecture-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 9.5rem;
  white-space: nowrap;
}

.lecture-progress__track {
  width: 7rem;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(229 231 235);
}

.lecture-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(37 99 235), rgb(20 184 166));
}

.lecture-progress--10 .lecture-progress__fill {
  width: 10%;
}

.lecture-progress--20 .lecture-progress__fill {
  width: 20%;
}

.lecture-progress--30 .lecture-progress__fill {
  width: 30%;
}

.lecture-progress--40 .lecture-progress__fill {
  width: 40%;
}

.lecture-progress--50 .lecture-progress__fill {
  width: 50%;
}

.lecture-progress--60 .lecture-progress__fill {
  width: 60%;
}

.lecture-progress--70 .lecture-progress__fill {
  width: 70%;
}

.lecture-progress--80 .lecture-progress__fill {
  width: 80%;
}

.lecture-progress--90 .lecture-progress__fill {
  width: 90%;
}

.lecture-progress--100 .lecture-progress__fill {
  width: 100%;
}

.lecture-progress__value {
  min-width: 2.4rem;
  color: rgb(75 85 99);
  font-size: 0.88rem;
  font-weight: 600;
}

.dark .lecture-progress__track {
  background: rgb(55 65 81);
}

.dark .lecture-progress__value {
  color: rgb(209 213 219);
}

@keyframes stats-search-dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes stats-search-dialog-out {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.985);
  }
}

@media (max-width: 640px) {
  .myst-search-dialog {
    top: 16px !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    animation-name: stats-search-sheet-in;
  }

  .myst-search-input,
  .myst-search-dialog form > div {
    height: 64px !important;
  }

  .myst-search-input {
    font-size: 1.4rem;
    padding-left: 4.2rem !important;
  }

  .myst-search-dialog label svg {
    left: 1.5rem;
    width: 2.1rem !important;
    height: 64px !important;
  }
}

@keyframes stats-search-sheet-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .myst-search-bar,
  .myst-search-bar svg,
  .myst-search-dialog,
  .myst-search-input,
  .myst-search-result-item a {
    animation: none !important;
    transition: none !important;
  }
}