.mToc{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.mToc a{
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.mToc a:hover{ background: var(--lav-900); border-color: var(--lav-900); color: #fff; }

.mChapter{ padding: 80px 0; scroll-margin-top: 80px; }
.mChapter:nth-of-type(even){ background: linear-gradient(180deg, var(--lav-100) 0%, var(--lav-50) 100%); }
.mGrid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.mChapter.isFlip .mText{ order: 2; }
.mNum{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--lav-600);
}
.mText .h2{ margin-bottom: 16px; }
.mLead{ margin: 0 0 18px; color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.mLead b{ color: var(--ink); }
.mEn{
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--lav-400);
  border-radius: 0 14px 14px 0;
  background: var(--surface);
  color: var(--muted);
  font-style: italic;
}

.mCmds{ display: grid; gap: 8px; margin-bottom: 18px; }
.mCmd{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: 0 4px 0 var(--lav-200);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .2s ease;
}
.mCmd:hover{ border-color: var(--lav-400); }
.mCmd:active{ transform: translateY(4px); box-shadow: none; }
.mCmd code{ flex-shrink: 0; font-weight: 800; color: var(--lav-800); font-size: 15px; }
.mCmd span{ flex: 1; color: var(--ink-2); font-size: 14px; }
.mCmd i{ color: var(--lav-500); }
.mTip{ margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.mTip i{ margin-right: 6px; color: var(--lav-600); }

.mCoins{ display: flex; flex-wrap: wrap; gap: 10px; }
.mCoins span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--butter);
  color: #7A5300;
  font-size: 14px;
}
.mCoins span:last-child{ background: var(--blush); color: var(--blush-ink); }

.mRarity{ display: flex; gap: 10px; margin-bottom: 14px; }
.rar{
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.rar.r1{ background: #DCEBFF; color: #2F5FB7; }
.rar.r2{ background: var(--lav-300); color: var(--lav-800); }
.rar.r3{ background: var(--butter); color: #A06A00; }
.mTags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mTags .tag{ font-size: 12px; padding: 5px 12px; }

.mArt{ position: relative; display: grid; place-items: center; min-height: 420px; }
.mCard{
  display: block;
  width: 240px;
  filter: drop-shadow(0 18px 24px rgba(70,60,124,.28));
  transition: transform .4s var(--ease);
}
.mCard.solo{ width: 280px; rotate: -3deg; }
.mCard.solo:hover{ transform: translateY(-8px) rotate(3deg); }

.mFan{ position: relative; width: 100%; height: 420px; }
.mFan .mCard{ position: absolute; left: 50%; top: 20px; margin-left: -120px; transform-origin: 50% 120%; }
.mFan .a{ transform: rotate(-14deg) translateX(-40px); }
.mFan .b{ transform: rotate(14deg) translateX(40px); }
.mFan .c{ z-index: 2; transform: translateY(-10px); }
.mFan:hover .a{ transform: rotate(-20deg) translateX(-70px); }
.mFan:hover .b{ transform: rotate(20deg) translateX(70px); }

.mStage{ position: relative; }
.mSticker{
  position: absolute;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(44,38,82,.35);
  animation: bob 4s ease-in-out infinite;
}
.mSticker.s1{ top: 6%; left: -30px; background: var(--butter); color: #8A5A00; rotate: -8deg; }
.mSticker.s2{ bottom: 12%; right: -30px; background: var(--blush); color: var(--blush-ink); rotate: 7deg; animation-delay: 1.2s; }

.mGridCards{ display: grid; grid-template-columns: repeat(2, 170px); gap: 16px; }
.mGridCards .mCard{ width: 100%; }
.mGridCards .mCard:nth-child(odd){ rotate: -3deg; }
.mGridCards .mCard:nth-child(even){ rotate: 3deg; margin-top: 30px; }

.mTrade{ display: flex; align-items: center; gap: 18px; }
.mTrade .mCard{ width: 200px; }
.mTrade .l{ rotate: -6deg; }
.mTrade .r{ rotate: 6deg; }
.mArrow{
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lav-900);
  color: #fff;
  font-size: 20px;
  animation: bob 3s ease-in-out infinite;
}

.mCollage{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mCollage .mCard{ width: 100%; }
.mCollage .mCard:nth-child(3n+1){ rotate: -2deg; }
.mCollage .mCard:nth-child(3n+2){ rotate: 2deg; translate: 0 14px; }
.mCollage .mCard:hover{ transform: translateY(-8px) scale(1.04); }

@media (max-width: 980px){
  .mGrid{ grid-template-columns: 1fr; gap: 30px; }
  .mChapter.isFlip .mText{ order: 0; }
  .mArt{ min-height: 0; }
  .mCollage{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  .mChapter{ padding: 60px 0; }
  .mFan{ height: 330px; }
  .mFan .mCard{ width: 180px; margin-left: -90px; }
  .mCard.solo{ width: 220px; }
  .mSticker.s1{ left: -10px; }
  .mSticker.s2{ right: -10px; }
  .mGridCards{ grid-template-columns: repeat(2, 140px); }
  .mTrade .mCard{ width: 130px; }
  .mArrow{ width: 44px; height: 44px; font-size: 16px; }
  .mCollage{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mCmd{ flex-wrap: wrap; gap: 4px 10px; }
  .mCmd span{ flex-basis: 100%; order: 3; }
}