/* Official v0.3.2 increment merged with this server visual rules; GPL-3.0-or-later. */
.guide {
  position: fixed;
  inset: 0px;
  z-index: calc(var(--z-modal) + 4);
  display: grid;
  place-items: center;
  background: radial-gradient(at 50% 40%, rgba(8, 14, 12, 0.82), rgba(2, 4, 3, 0.94));
  backdrop-filter: blur(3px);
  animation: guide-fade 180ms var(--ease-out);
}

@keyframes guide-fade {
  0% {
    opacity: 0;
  }
}

.guide__box {
  --bk-c: var(--mint-500);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.16rem 0.22rem;
  background: linear-gradient(rgba(22, 28, 26, 0.98), rgba(10, 13, 12, 0.98));
  border: 1px solid var(--line-2);
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0.2rem 0.6rem, rgba(78, 216, 175, 0.06) 0px 0px 0px 1px inset;
  outline: none;
  animation: guide-pop 220ms var(--ease-out);
}

@keyframes guide-pop {
  0% {
    opacity: 0;
    transform: translateY(0.12rem) scale(0.985);
  }
}

.guide__head {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 0.62rem;
}

.guide__titles {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  min-width: 2.4rem;
}

.guide__title {
  margin: 0px;
  font-size: calc(.3 * var(--t));
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--text-hi);
  line-height: 1.1;
}

.guide__chapters {
  display: flex;
  gap: 0.06rem;
  margin: 0px auto;
}

.guide__chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.01rem;
  min-width: 1.5rem;
  height: 0.56rem;
  padding: 0px 0.22rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text-lo);
  clip-path: polygon(0.12rem 0px, 100% 0px, calc(100% - 0.12rem) 100%, 0px 100%);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.guide__chapter:hover {
  color: var(--text-hi);
  background: rgba(78, 216, 175, 0.06);
}

.guide__chapter.is-on {
  color: var(--text-on-mint);
  background: var(--mint-500);
  border-color: var(--mint-500);
}

.guide__chname {
  font-size: calc(.19 * var(--t));
  font-weight: 700;
  letter-spacing: 0.1em;
}

.guide__chmicro {
  font-family: var(--font-display);
  font-size: calc(.1 * var(--t));
  letter-spacing: 0.24em;
  opacity: 0.75;
}

.guide__close {
  width: 0.56rem;
  height: 0.56rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-2);
  color: var(--text-md);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.guide__close .icon {
  width: 0.3rem;
  height: 0.3rem;
}

.guide__close:hover {
  color: var(--text-hi);
  border-color: var(--red-premium);
  background: var(--red-a20);
}

.guide__stage {
  position: relative;
}

.guide__page {
  position: relative;
  overflow: hidden;
  width: min(-0.5rem + 96vw, -4.08889rem + 177.778vh);
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(135deg, rgba(78, 216, 175, 0.04) 0px, rgba(78, 216, 175, 0.04) 0.02rem, transparent 0.02rem, transparent 0.14rem) rgb(5, 8, 7);
  border: 1px solid var(--line);
}

.guide__page img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  opacity: 0;
  transition: opacity 160ms;
}

.guide__page.is-loaded img {
  opacity: 1;
}

.guide__loading {
  position: absolute;
  inset: 0px;
  display: grid;
  place-items: center;
}

.guide__nav {
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 2;
  width: 1rem;
  display: grid;
  place-items: center;
  color: rgba(242, 242, 242, 0.7);
  background: transparent;
  border: 0px;
  transition: color var(--t-fast), background var(--t-fast);
}

.guide__nav .icon {
  width: 0.52rem;
  height: 0.52rem;
  filter: drop-shadow(rgba(0, 0, 0, 0.9) 0px 0px 0.06rem);
}

.guide__prev {
  left: 0px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent);
}

.guide__next {
  right: 0px;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.38), transparent);
}

.guide__nav:hover {
  color: var(--mint-400);
}

.guide__prev:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);
}

.guide__next:hover {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.6), transparent);
}

.guide__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.3rem;
  min-height: 0.44rem;
}

.guide__label {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  min-width: 0px;
}

.guide__chtag {
  flex: 0 0 auto;
  padding: 0.02rem 0.12rem;
  font-size: calc(.14 * var(--t));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mint-400);
  border: 1px solid var(--mint-800);
  background: var(--mint-a10);
}

.guide__ptitle {
  font-size: calc(.22 * var(--t));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide__dots {
  display: flex;
  align-items: center;
  gap: 0.05rem;
}

.guide__dot {
  width: 0.2rem;
  height: 0.08rem;
  padding: 0px;
  border: 0px;
  background: var(--line-2);
  transition: background var(--t-fast), width var(--t-fast);
}

.guide__dot.is-first {
  margin-left: 0.14rem;
}

.guide__dot:hover {
  background: var(--line-3);
}

.guide__dot.is-on {
  width: 0.42rem;
  background: var(--mint-500);
  box-shadow: rgba(23, 249, 183, 0.5) 0px 0px 0.08rem;
}

.guide__count {
  justify-self: end;
  font-size: calc(.24 * var(--t));
  color: var(--text-md);
  letter-spacing: 0.06em;
}

.guide__stage--text {
  width: min(92vw, 10rem);
  max-height: calc(-2rem + 100vh);
  overflow: auto;
  padding: 0.1rem 0.06rem;
}

.guide__tips ol {
  margin: 0.14rem 0px 0px;
  padding-left: 0.34rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.guide__tips li {
  font-size: calc(.18 * var(--t));
  line-height: 1.6;
  color: var(--text-md);
}

.guide__tips li::marker {
  color: var(--mint-500);
  font-family: var(--font-num);
}

.guide-btn .btn__icon {
  color: var(--mint-500);
}

@media (max-height: 560px) {
  .guide__box {
    padding: 0.08rem 0.12rem;
    gap: 0.06rem;
  }

  .guide__head {
    min-height: 0.5rem;
  }

  .guide__titles {
    display: none;
  }

  .guide__page {
    width: min(-0.3rem + 96vw, -2.66667rem + 177.778vh);
  }
}

.guide__vernote {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  margin: 0px;
  padding: 0.04rem 0.1rem;
  color: var(--text-lo);
  font-size: calc(.14 * var(--t));
  overflow-wrap: anywhere;
}

.guide__vernote .icon {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  color: rgb(159, 211, 255);
}