.guide-page { --guide-border: #d2bae42e; --guide-soft: #e3d5ed; }
.guide-page header,
.guide-page main,
.guide-page footer { width: min(940px, 100%); }
.guide-page main { padding-top: 26px; }
.guide-page article { max-width: 850px; }
.guide-page h1 { max-width: 780px; margin-bottom: 18px; }
.guide-page h2 { margin-top: 0; color: #fff5d4; }
.guide-page h3 { margin: 24px 0 8px; font-size: 19px; line-height: 1.4; }
.guide-page p,
.guide-page li { overflow-wrap: anywhere; }
.guide-page li + li { margin-top: 8px; }
.guide-page strong { color: #fff5d4; }
.guide-page .site-intro { line-height: 1.7; }
.guide-page .guide-play { font-size: 16px; font-weight: 700; }
.guide-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  color: #c6b9d3;
  font-size: 14px;
}
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0;
  padding: 16px 0;
  border-block: 1px solid var(--guide-border);
  font-size: 16px;
}
.guide-nav a[aria-current="page"] { color: #fff5d4; font-weight: 700; }
.guide-toc {
  margin: 26px 0 38px;
  padding: 18px 22px;
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  background: #ffffff04;
}
.guide-toc p { margin: 0 0 8px; font-weight: 700; color: var(--guide-soft); }
.guide-toc ol { margin: 0; padding-left: 22px; }
.guide-toc li { margin: 4px 0; }
.guide-section { margin: 36px 0; scroll-margin-top: 24px; }
.guide-section > p:first-of-type { margin-top: 12px; }
.guide-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--guide-border);
  border-radius: 10px;
  scrollbar-width: thin;
}
.guide-page table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}
.guide-page th,
.guide-page td { padding: 14px 16px; text-align: left; vertical-align: top; }
.guide-page th { background: #ffffff09; color: #fff5d4; font-weight: 700; }
.guide-page td { border-top: 1px solid var(--guide-border); }
.guide-page td:first-child { min-width: 140px; font-weight: 600; }
.guide-page kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #c9b5db66;
  border-radius: 4px;
  font: 14px/1.5 ui-monospace, monospace;
  color: #fff5d4;
}
.guide-page figure { margin: 24px 0; }
.guide-page figure img { max-width: 100%; height: auto; }
.guide-page figcaption { margin-top: 10px; font-size: 14px; color: #c6b9d3; }
.guide-page .starter-portraits { display: flex; flex-wrap: wrap; gap: 24px; }
.guide-page .starter-portraits img { width: 80px; height: 80px; image-rendering: pixelated; }
.guide-return { padding-top: 20px; border-top: 1px solid var(--guide-border); }
@media (max-width: 600px) {
  .guide-page main { padding-top: 18px; }
  .guide-breadcrumb { margin-bottom: 22px; }
  .guide-nav { gap: 12px 18px; }
  .guide-toc { padding: 16px; }
  .guide-page h1 { font-size: 30px; }
  .guide-page table { min-width: 580px; }
  .guide-page th,
  .guide-page td { padding: 12px; }
}