* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #ecfeff;
  color: #164e63;
  line-height: 1.65;
  border-left: 8px solid #155e75;
}
.cyan-head {
  background: #155e75;
  color: #ecfeff;
  padding: 0.8rem 1.5rem 0.8rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.cyan-sig { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.cyan-jump { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cyan-jump a { color: #cffafe; text-decoration: none; font-size: 0.92rem; }
.cyan-jump a:hover { color: #fff; }
.cyan-main { max-width: 980px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.cyan-hero h1 { font-size: 1.75rem; line-height: 1.35; margin-bottom: 0.75rem; }
.cyan-hero p { margin-bottom: 0.45rem; }
.cheat-sec, .fmt-sec, .twin-sec, .walk-sec, .cyan-faq { margin: 1.7rem 0; }
.cheat-sec h2, .fmt-sec h2, .twin-sec h2, .walk-sec h2, .cyan-faq h2 {
  font-size: 1.22rem;
  margin-bottom: 0.5rem;
}
.cheat-sec > p, .twin-sec > p, .walk-sec > p { margin-bottom: 0.75rem; }
.cheat-board { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.1rem; }
.cheat-board th, .cheat-board td {
  border: 1px solid #a5f3fc;
  padding: 0.65rem 0.7rem;
  vertical-align: top;
  text-align: left;
  font-size: 0.93rem;
}
.cheat-board th { background: #155e75; color: #ecfeff; }
.cheat-board tr:nth-child(even) td { background: #fff; }
.cheat-board tr:nth-child(odd) td { background: #cffafe; }
.fmt-rows { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.fmt-rows li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid #a5f3fc;
  padding: 0.8rem 0.9rem;
}
.fmt-rows i {
  font-style: normal;
  font-weight: 800;
  color: #155e75;
  font-size: 1.1rem;
}
.fmt-rows h3 { font-size: 1rem; margin: 0.15rem 0 0.3rem; }
.fmt-rows p { margin-bottom: 0.32rem; font-size: 0.95rem; }
.twin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.twin-grid article {
  background: #fff;
  padding: 0.95rem 1rem;
  border-top: 3px solid #155e75;
}
.twin-grid h3 { font-size: 1rem; margin: 0.25rem 0 0.35rem; }
.twin-grid p { margin-bottom: 0.35rem; font-size: 0.95rem; }
.twin-grid svg, .fmt-rows svg { color: #0e7490; }
.walk-nums { list-style: none; counter-reset: walk; }
.walk-nums li {
  counter-increment: walk;
  background: #fff;
  margin-bottom: 0.55rem;
  padding: 0.85rem 1rem 0.85rem 3rem;
  position: relative;
}
.walk-nums li::before {
  content: counter(walk);
  position: absolute;
  left: 0.7rem;
  top: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  background: #155e75;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}
.walk-nums strong { display: block; margin-bottom: 0.3rem; }
.walk-nums p { margin-bottom: 0.3rem; }
.gly-item { background: #fff; border: 1px solid #a5f3fc; margin-bottom: 0.5rem; }
.gly-sum { cursor: pointer; padding: 0.75rem 0.9rem; font-weight: 650; }
.gly-ans { padding: 0 0.9rem 0.85rem; }
.gly-item[open] { border-color: #155e75; }
.gly-sum:hover { background: #cffafe; }
.fmt-rows li:hover { border-color: #155e75; }
.twin-grid article:hover { border-top-color: #0e7490; }
.walk-nums li:last-child { background: #cffafe; }
.cheat-board td:first-child { font-weight: 700; color: #155e75; }
.cyan-hero { padding-bottom: 0.4rem; border-bottom: 1px dashed #67e8f9; margin-bottom: 1.2rem; }
.cyan-sig svg { color: #a5f3fc; }
.fmt-rows h3 { color: #155e75; }
.twin-grid article h3 { color: #0e7490; }
.walk-nums strong { color: #155e75; }
.cheat-sec { overflow-x: auto; }
.site-footer {
  background: #155e75;
  color: #cffafe;
  padding: 1.2rem;
  text-align: left;
  font-size: 0.86rem;
  border-left: 8px solid #0e7490;
}
.site-footer p { margin-bottom: 0.28rem; }
@media (max-width: 800px) {
  .twin-grid { grid-template-columns: 1fr; }
  .cyan-head { flex-direction: column; align-items: flex-start; }
  .fmt-rows li { grid-template-columns: 40px 1fr; }
}
