/* 《创新者的课堂》读书笔记 · 2026-10-16 改版 · 对应 Artifact：Temp/261016-创新者的课堂-Artifact/innovators-classroom.html
   导语右侧一张小“课表”：左边“标准化”四人按铃声齐步走，右边“模块化”四人各走各的速度；
   提要四段做成 2×2 四块模块；长图限宽 560px 居中，点图用共用脚本 reading-viewer.js 看大图。 */
.innovators-classroom-notes {
  --ic-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --ic-warm: #ffa75c;
  --ic-module: rgba(100, 255, 218, .26);
  max-width: 44em;
  font-size: 16.5px;
  line-height: 2;
}
.innovators-classroom-notes p { margin-bottom: 1.2em; }

/* 导语 + 小课表 */
.innovators-classroom-notes .ic-lead { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: center; padding-bottom: 8px; }
.innovators-classroom-notes .ic-lead .art-h2 { margin-top: 0; font-family: var(--ic-serif); font-size: 22px; font-weight: 900; color: var(--white); }
.innovators-classroom-notes .ic-lede { font-size: 18px; line-height: 1.95; color: var(--lightest-slate); }
.innovators-classroom-notes .ic-en { font-style: italic; color: var(--green); }

.innovators-classroom-notes .ic-lanes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.2em;
  border: 1px solid var(--lightest-navy); border-radius: 6px; background: var(--light-navy); overflow: hidden;
}
.innovators-classroom-notes .ic-lanes > div { display: grid; gap: 14px; padding: 16px 16px 12px; }
.innovators-classroom-notes .ic-lanes > div + div { border-left: 1px dashed var(--lightest-navy); }
.innovators-classroom-notes .ic-lane { position: relative; display: block; height: 10px; }
.innovators-classroom-notes .ic-lane::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: 1px; background: var(--lightest-navy);
}
.innovators-classroom-notes .ic-lane i { position: absolute; inset: 0; transform: translateX(calc((100% - 10px) * var(--x, 0))); }
.innovators-classroom-notes .ic-lane i::before {
  content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--slate));
}
/* 标准化：同一节拍、同一位置；轨道上等距的“下课铃”刻度 */
.innovators-classroom-notes .ic-batch .ic-lane::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 1px; height: 8px; opacity: .45;
  background: linear-gradient(90deg, var(--slate) 1px, transparent 1px) 0 0 / calc((100% - 1px) / 3) 100% repeat-x;
}
.innovators-classroom-notes .ic-batch .ic-lane i { --x: .333; animation: ic-move 8s steps(4, jump-none) infinite; }
/* 模块化：轨道是长短不一的模块，每人速度不同 */
.innovators-classroom-notes .ic-modular .ic-lane::before {
  top: 2px; height: 6px;
  background: linear-gradient(90deg, var(--ic-module) 0 var(--a), transparent var(--a) calc(var(--a) + 4px), var(--ic-module) 0 var(--b), transparent var(--b) calc(var(--b) + 4px), var(--ic-module) 0);
}
.innovators-classroom-notes .ic-modular .ic-lane i { --c: var(--green); animation: ic-move var(--t) linear infinite; animation-delay: var(--d); }
.innovators-classroom-notes .ic-modular .ic-lane:nth-child(1) { --a: 30%; --b: 58%; --x: .72; --t: 5s; --d: -3.6s; }
.innovators-classroom-notes .ic-modular .ic-lane:nth-child(2) { --a: 18%; --b: 70%; --x: .25; --t: 9s; --d: -2.2s; }
.innovators-classroom-notes .ic-modular .ic-lane:nth-child(3) { --a: 46%; --b: 80%; --x: .5; --t: 6.5s; --d: -3.2s; --c: var(--ic-warm); }
.innovators-classroom-notes .ic-modular .ic-lane:nth-child(4) { --a: 24%; --b: 50%; --x: .9; --t: 12s; --d: -10.8s; }
.innovators-classroom-notes .ic-lane-label { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; letter-spacing: .16em; color: var(--slate); }
.innovators-classroom-notes .ic-modular .ic-lane-label { color: var(--green); }
@keyframes ic-move { from { transform: translateX(0); } to { transform: translateX(calc(100% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .innovators-classroom-notes .ic-lane i { animation: none !important; } }

/* 笔记内容提要：论点 + 四块模块 */
.innovators-classroom-notes .ic-summary { margin: 28px 0 48px; }
.innovators-classroom-notes .ic-summary-title { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--green); }
.innovators-classroom-notes .ic-thesis {
  margin: 0 0 28px; padding-left: 20px; border-left: 3px solid var(--green);
  font-family: var(--ic-serif); font-size: 19px; font-weight: 600; line-height: 1.95; color: var(--white);
}
.innovators-classroom-notes .ic-modules {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--lightest-navy); border-radius: 8px; overflow: hidden;
}
.innovators-classroom-notes .ic-module { margin: -1px 0 0 -1px; padding: 20px 22px 18px; border-top: 1px solid var(--lightest-navy); border-left: 1px solid var(--lightest-navy); }
.innovators-classroom-notes .ic-module-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 16.5px; line-height: 1.5; color: var(--white); }
.innovators-classroom-notes .ic-module-title::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--green); }
.innovators-classroom-notes .ic-module-text { margin: 0; font-size: 15.5px; line-height: 1.85; }

/* 长图：限宽居中，白底细边 */
.innovators-classroom-notes .ic-poster { max-width: 560px; margin: 0 auto; }
.innovators-classroom-notes .ic-poster-img {
  width: 100%; height: auto; border: 1px solid var(--lightest-navy); border-radius: 6px; background: #fff; transition: border-color .15s;
}
.innovators-classroom-notes .ic-poster-img:hover { border-color: var(--green); }
.innovators-classroom-notes .ic-poster-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px;
  font-size: 14px; line-height: 1.6; color: var(--lightest-slate);
}
.innovators-classroom-notes .ic-hint { color: var(--slate); }

@media (max-width: 900px) {
  .innovators-classroom-notes .ic-lead { grid-template-columns: minmax(0, 1fr); }
  .innovators-classroom-notes .ic-lanes { display: none; }
}
@media (max-width: 760px) {
  .innovators-classroom-notes .ic-modules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .innovators-classroom-notes { font-size: 16px; line-height: 1.95; }
  .innovators-classroom-notes .ic-lede { font-size: 17px; }
  .innovators-classroom-notes .ic-lead .art-h2 { font-size: 20px; }
  .innovators-classroom-notes .ic-thesis { padding-left: 16px; font-size: 18px; }
  .innovators-classroom-notes .ic-module { padding: 18px 16px 16px; }
}