*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6;color:#111}
/* .shell{max-width:980px;margin:auto;padding:1rem} */
header{background:#f7f7f9;border-bottom:1px solid #e6e6ef}
header h1{margin:.2rem 0}
.toc a{margin-right:1rem;text-decoration:none;color:#0366d6}
.toc a:hover{text-decoration:underline}
/* .lesson{user-select:none} */
/* .ad-slot{min-height:90px;margin:1rem 0;border:1px dashed #cbd5e1;display:flex;align-items:center;justify-content:center} */
/* .pager{margin:2rem 0;display:flex;justify-content:space-between} */
/* .pager a{text-decoration:none} */
.notice{background:#fff6d5;border:1px solid #f2e088;padding:.75rem;border-radius:.5rem}
@media print{body{display:none}}
/* --- Slide cards layout for lessons --- */
.lesson {
  max-width: 800px;
  line-height: 1.45;
  font-size: 15px;
}

.lesson .slide {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* slide heading */
.lesson .slide h2 {
  margin-top: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* code blocks inside slides */
.lesson pre {
  background: #f6f6f6;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .9rem;
  overflow-x: auto;
  line-height: 1.4;
}

/* ad slot box (keeps mock ad area visible but not ugly) */
.ad-slot {
  border: 1px dashed #cfcfcf;
  border-radius: 6px;
  font-size: .8rem;
  color: #555;
  text-align: center;
  padding: 2rem .5rem;
  margin: 1rem 0 2rem;
}

/* pager links bottom */
.pager {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0 4rem;
  font-size: .9rem;
}
.pager a {
  color: #2338ff;
  text-decoration: none;
}
.pager a:hover {
  text-decoration: underline;
}

/* small tweak for header shell layout if not already defined */
.shell {
  width: 100%;
  max-width: 1600px;   /* was something like 1200–1280px */
  margin: 0 auto;
  padding: 1.5rem 2rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
}

.shell h1 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 1rem;
  font-weight: 600;
}

.home {
  display: inline-block;
  font-size: .8rem;
  color: #2338ff;
  text-decoration: none;
  margin-bottom: 1rem;
}

.home:hover {
  text-decoration: underline;
}

.lesson-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px; /* was 220px ... 220px */
  gap: 2rem;
  align-items: start;
}

/* Side ad styling */
.side-ad {
  position: sticky;
  top: 2rem;
  height: fit-content;
  background: #f3f6ff;
  border: 1px solid #ccd4ff;
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.side-ad a {
  text-decoration: none;
  color: #1a1a1a;
  display: block;
}

.side-ad a:hover {
  text-decoration: underline;
}

/* Central content column */
.lesson-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Top and bottom ad slots */
.top-ad,
.bottom-ad {
  text-align: center;
  background: #f8f8f8;
  border: 1px dashed #ccc;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .lesson-layout {
    grid-template-columns: 1fr;
  }
  .side-ad {
    display: none;
  }
}

.btn-primary {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: #2338ff;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}

.btn-primary:hover {
  background: #1a2acc;
}