.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mode-grid article {
  position: relative;
  overflow: hidden;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--guide-surface-soft);
}

.mode-grid article.active {
  border-color: rgba(75, 216, 200, 0.28);
  background: linear-gradient(145deg, rgba(75, 216, 200, 0.1), rgba(41, 123, 205, 0.045));
}

.mode-grid article > span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.mode-grid h3 {
  margin: 13px 0 8px;
  font-size: 18px;
}

.mode-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.toolbar-guide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.toolbar-guide > div {
  padding: 16px;
}

.toolbar-guide i {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--blue-bright);
  background: rgba(56, 159, 220, 0.1);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.toolbar-guide strong {
  margin-top: 11px;
  font-size: 13px;
}

.toolbar-guide p {
  font-size: 12px;
}

.command-list {
  display: grid;
  gap: 8px;
}

.command-list > div {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 15px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text-soft);
  background: var(--guide-surface-soft);
  font-size: 13px;
  line-height: 1.6;
}

.command-list code {
  width: fit-content;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shortcut-grid > div {
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  gap: 16px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--guide-surface-soft);
}

.shortcut-grid > div > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.shortcut-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.document-grid article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--guide-surface-soft);
}

.document-grid article > span {
  color: var(--teal);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.document-grid h3 {
  margin: 25px 0 9px;
  font-size: 18px;
}

.document-grid p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.shortcut-table td:first-child {
  width: 100px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 750;
}

.shortcut-table td:nth-child(2) {
  width: 220px;
  color: var(--text);
  white-space: nowrap;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.preset-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--guide-surface-soft);
}

.preset-grid article > span {
  color: var(--blue-bright);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.preset-grid p {
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.8;
}

.remote-flow {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--guide-surface-soft);
}

.remote-flow > span {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 13px;
  background: rgba(44, 144, 208, 0.07);
}

.remote-flow b {
  color: var(--teal);
  font-size: 14px;
}

.remote-flow small {
  color: var(--text-soft);
  font-size: 12px;
}

.remote-flow > i {
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.troubleshoot-list,
.recipe-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.troubleshoot-list article,
.recipe-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 17px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--guide-surface-soft);
}

.troubleshoot-list article > span,
.recipe-number {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--teal);
  background: rgba(75, 216, 200, 0.09);
  font-size: 11px;
  font-weight: 850;
}

.troubleshoot-list h3,
.recipe-list h3 {
  margin: 1px 0 7px;
  font-size: 17px;
}

.troubleshoot-list p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.recipe-list ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.guide-finish {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 26px;
  border: 1px solid rgba(75, 216, 200, 0.24);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(41, 139, 207, 0.1), rgba(75, 216, 200, 0.07));
}

.guide-finish img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 8px 18px rgba(40, 151, 218, 0.28));
}

.guide-finish h3 {
  margin: 6px 0 5px;
  font-size: 18px;
}

.guide-finish p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}

.guide-finish .button {
  white-space: nowrap;
}

.guide-footer {
  border-top: 1px solid var(--line);
  background: rgba(4, 10, 18, 0.32);
}

.guide-page [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.guide-page [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}