.muppieBody{
  height:100vh;
  overflow:hidden;
}

.mWrap{
  height:100vh;
  display:grid;
  grid-template-rows: auto 1fr auto;
  gap:18px;
  padding:22px;
  max-width:1200px;
  margin:0 auto;
}

.mTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.mBrand{
  display:flex;
  align-items:center;
  gap:12px;
}
.mTitle{font-weight:900; letter-spacing:.2px}
.mSub{color:var(--muted); font-size:13px}

.mControls{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.mBtn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
}
.mBtn:hover{background: rgba(255,255,255,.12);}

.mStage{
  position:relative;
  border-radius: calc(var(--radius) + 8px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}

.mCard{
  position:absolute;
  inset:0;
  padding: clamp(18px, 3.2vw, 42px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  opacity:0;
  transform: scale(1.01);
  transition: opacity .65s ease, transform .65s ease;
}

.mCard.show{
  opacity:1;
  transform: scale(1);
}

.mTermRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.mLetter{
  font-weight:1000;
  font-size:16px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.mTerm{
  font-weight:1000;
  letter-spacing:-.3px;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height:1.03;
}
.mDef{
  color: rgba(255,255,255,.82);
  font-size: clamp(18px, 2.2vw, 30px);
  line-height:1.35;
  max-width: 65ch;
}

.mFooter{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  color: var(--muted);
}
.mHint{font-size:12px}
.mMeta{font-size:12px}
.dot{opacity:.6; margin:0 8px}

@media (prefers-reduced-motion: reduce){
  .mCard{transition:none!important}
}