/* 补充课件共用样式：浅色背景、可读代码、真实布局示例。 */
.supplement .code { font-size: 22px; line-height: 1.45; }
.flex-demo { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.grid-demo, .responsive-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.flex-demo span, .grid-demo span, .responsive-demo span {
  padding: 16px;
  background: #eaf2ff;
  border: 1px solid #bdcfea;
  border-radius: 10px;
  color: #17365b;
}
.grid-demo span:nth-child(2), .responsive-demo span:nth-child(2) { background: #edf6ee; }
.grid-demo span:nth-child(3), .responsive-demo span:nth-child(3) { background: #fff3e6; }
@media (max-width: 600px) {
  .responsive-demo { grid-template-columns: 1fr; }
  .supplement .code { font-size: 18px; }
}