.newcomer-guide-card,
.newcomer-guide-arrow {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  z-index: 2147483000;
}
.newcomer-guide-card {
  width: min(300px, calc(100vw - 24px));
  padding: 8px 10px;
  color: #303642;
  border: 1px solid #e1e5eb;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 5px 20px #51303b26;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  overscroll-behavior: contain;
}
.newcomer-guide-card::backdrop,
.newcomer-guide-arrow::backdrop {
  background: transparent;
  pointer-events: none;
}
.newcomer-guide-card[hidden],
.newcomer-guide-arrow[hidden] { display: none !important; }
.newcomer-guide-card small { color: #8a919e; font-size: 11px; }
.newcomer-guide-card h2 { margin: 2px 0 5px; font-size: 14px; line-height: 1.4; }
.newcomer-guide-card p { margin: 0 0 6px; }
.newcomer-guide-card #newcomer-guide-status,
.newcomer-guide-card #newcomer-overview-status { color: #758092; font-size: 12px; }
.newcomer-guide-card #newcomer-guide-status:empty,
.newcomer-guide-card #newcomer-overview-status:empty { display: none; }
.newcomer-guide-card footer { display: flex; gap: 6px; }
.newcomer-guide-card button {
  min-height: 36px;
  padding: 4px 9px;
  color: #ff5188;
  background: #fff;
  border: 1px solid #f6d3df;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
.newcomer-guide-card button:disabled { opacity: .52; cursor: default; }
.newcomer-guide-card button:focus-visible { outline: 2px solid #c95885; outline-offset: 2px; }
.newcomer-guide-card #newcomer-guide-next,
.newcomer-guide-card #newcomer-overview-next { margin-left: auto; background: #fce7ee; }
.newcomer-guide-card #newcomer-guide-retry,
.newcomer-guide-card #newcomer-overview-retry { margin-bottom: 8px; }
.newcomer-guide-arrow {
  width: 40px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #73445729);
}
.newcomer-guide-arrow svg { display: block; width: 40px; height: 58px; }
.newcomer-guide-arrow[data-direction="up"] svg { transform: rotate(180deg); }
.newcomer-guide-target { outline: 2px solid #ee91b1 !important; outline-offset: 3px; }
@media (max-height: 480px) {
  .newcomer-guide-card { padding: 8px 10px; font-size: 12px; }
  .newcomer-guide-card h2 { font-size: 14px; }
}

.newcomer-guide-card #newcomer-guide-sources { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
.newcomer-guide-card #newcomer-guide-sources:has(> button:not([hidden])) { padding-top: 2px; }
.newcomer-guide-card button[hidden] { display: none !important; }
.newcomer-guide-card #newcomer-guide-acquire { background: #fce7ee; }

.newcomer-guide-card #newcomer-guide-heading,
.newcomer-guide-card #newcomer-overview-heading { display: flex; align-items: center; gap: 6px; }
.newcomer-guide-card #newcomer-guide-progress,
.newcomer-guide-card #newcomer-overview-progress { flex: 1; }
.newcomer-guide-card #newcomer-guide-explain,
.newcomer-guide-card #newcomer-guide-skip,
.newcomer-guide-card #newcomer-overview-skip { min-height: 32px; padding: 0 5px; border: 0; background: transparent; font-size: 12px; color: #758092; }
.newcomer-guide-card[data-compact="true"] { padding: 8px 10px; font-size: 12px; }
.newcomer-guide-card[data-compact="true"] h2 { font-size: 14px; margin-bottom: 4px; }
.newcomer-guide-card[data-compact="true"] #newcomer-guide-explain { display: inline-flex; align-items: center; }
.newcomer-guide-card[data-compact="true"][data-expanded="false"] #newcomer-guide-description { display: none; }
.newcomer-guide-card[data-expanded="false"] #newcomer-guide-prev { display: none; }
.newcomer-guide-card[data-expanded="false"] #newcomer-guide-status {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.newcomer-guide-card[data-error="true"] #newcomer-guide-status { -webkit-line-clamp: unset; }
.newcomer-guide-card footer { flex-wrap: wrap; }
.newcomer-guide-card #newcomer-guide-sources button { max-width: 100%; }

#newcomer-overview-picker { align-self: flex-start; }
#newcomer-overview-picker summary {
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid #e1e5eb;
  color: #697383;
  cursor: pointer;
  list-style: none;
}
#newcomer-overview-picker summary::-webkit-details-marker { display: none; }
#newcomer-overview-picker summary:focus-visible { outline: 2px solid #fa7298; outline-offset: 2px; }
#newcomer-overview-picker summary::after { content: ' ▾'; }
#newcomer-overview-picker[open] { flex-basis: 100%; }
#newcomer-overview-picker[open] summary::after { content: ' ▴'; }
#newcomer-overview-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding-top: 6px; }
#newcomer-overview-choices button { min-width: 0; }
#newcomer-overview-choices button[aria-pressed="true"] { background: #fff5f8; }