/* ========== 第11课 · 注意力实验室 ========== */
#attlab {
  --r: #C0392B; --r2: #E74C3C; --amber: #e8801a;
  --ink: #3a2a1a; --ink2: #5a4632; --ink3: #9b8b76;
  --card: #fff; --line: #f3e8dd; --soft: #fdf3ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink2);
}
#attlab * { box-sizing: border-box; margin: 0; padding: 0; }
#attlab { margin: -2px; padding: 18px 18px 12px; border-radius: 20px;
  background:
    radial-gradient(700px 300px at 100% 0%, #fdeee3 0%, rgba(253,238,227,0) 60%),
    radial-gradient(600px 260px at 0% 100%, #fff0ec 0%, rgba(255,240,236,0) 55%),
    #fff9f6; }

#attlab .att-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
#attlab .att-ic { font-size: 34px; line-height: 1; }
#attlab .att-head b { color: var(--r); font-size: 19px; display: block; line-height: 1.35; }
#attlab .att-sub { font-size: 12.5px; color: var(--ink3); display: block; margin-top: 2px; }

#attlab .att-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 15px 18px; box-shadow: 0 10px 28px -18px rgba(192,57,43,.28); margin-bottom: 14px; }
#attlab .att-card b { color: var(--r); }

#attlab .att-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#attlab .att-lbl { font-size: 13.5px; font-weight: 800; color: var(--ink2); }
#attlab .att-pills { display: flex; flex-wrap: wrap; gap: 6px; }
#attlab .att-pill { border: 2px solid var(--line); background: #fff; color: var(--ink2); font-size: 12.5px;
  font-weight: 800; border-radius: 30px; padding: 6px 12px; cursor: pointer; font-family: inherit; transition: .14s; }
#attlab .att-pill:hover { transform: translateY(-1px); }
#attlab .att-pill.active { border-color: var(--r); background: var(--soft); color: var(--r); }
#attlab .att-play { border: none; border-radius: 30px; padding: 8px 16px; font-size: 13px; font-weight: 800; cursor: pointer;
  color: #fff; font-family: inherit; background: linear-gradient(135deg, var(--r), var(--r2));
  box-shadow: 0 6px 16px -8px rgba(192,57,43,.6); transition: .13s; }
#attlab .att-play:hover { transform: translateY(-1px); }
#attlab .att-play.running { background: linear-gradient(135deg, #7f8c8d, #95a5a6); }

#attlab .att-hint { font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin: 8px 2px 6px; }
#attlab .att-hint b { color: var(--r); }

/* 句子舞台：词 chips + 上方连线 */
#attlab .att-stage { position: relative; background: #fffdfc; border: 1px dashed #f0cfc0; border-radius: 16px;
  padding: 34px 18px 16px; }
#attlab .att-sent { position: relative; display: flex; flex-direction: column; align-items: stretch; }
#attlab .att-w { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 9px 12px; border-radius: 12px; background: #f4e9e2; color: #6b4a36;
  font-size: 17px; font-weight: 800; cursor: pointer; border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s; font-family: inherit; }
#attlab .att-w:hover { transform: translateY(-2px); }
#attlab .att-w .p { position: absolute; top: -9px; right: -6px; font-style: normal; font-size: 10.5px; font-weight: 900;
  color: #fff; background: var(--amber); border-radius: 20px; padding: 1px 5px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.3); }
#attlab .att-w.reader { border-color: var(--r); background: linear-gradient(160deg, #fff, var(--soft)); box-shadow: 0 6px 18px -8px rgba(192,57,43,.55); }
#attlab .att-w.reader::before { content: '🔦 正在读'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 900; color: #fff; background: var(--r); border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
#attlab .att-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

#attlab .att-note { font-size: 13px; color: var(--ink2); line-height: 1.85; background: var(--soft);
  border: 1px dashed #f0c8b8; border-radius: 12px; padding: 9px 13px; min-height: 46px; margin-top: 12px; }
#attlab .att-note b { color: var(--r); }

#attlab .att-bars { margin-top: 10px; }
#attlab .att-bars-t { font-size: 12.5px; font-weight: 800; color: var(--ink2); margin-bottom: 8px; }
#attlab .att-bars-l { display: flex; flex-direction: column; gap: 5px; }
#attlab .att-brow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#attlab .att-bw { width: 52px; text-align: right; font-weight: 800; color: #6b4a36; flex: none; }
#attlab .att-bw.me { color: var(--r); }
#attlab .att-btrack { flex: 1; height: 13px; background: #f6ece4; border-radius: 20px; overflow: hidden; }
#attlab .att-bfill { display: block; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, #f6b26b, var(--amber)); transition: width .3s; }
#attlab .att-bpct { width: 46px; font-weight: 900; color: var(--amber); flex: none; }

#attlab .att-recap { font-size: 13px; color: var(--ink2); line-height: 1.95; background: #fff6ec; border: 1px dashed #f0cfa0; }
#attlab .att-sm { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 5px; }

/* 问题定义区 */
#attlab .att-q { background: linear-gradient(135deg, #fff, #fff5ec); border: 1px dashed #f0c8a0; }
#attlab .att-q-t { font-size: 13.5px; font-weight: 800; color: #a8763b; margin-bottom: 10px; }
#attlab .att-q-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#attlab .att-q-sent span { font-size: 22px; font-weight: 900; color: #6b4a36; padding: 4px 10px; border-radius: 10px; background: #f8efe4; }
#attlab .att-q-sent .tric { color: var(--r); }
#attlab .att-q-sent .emo { color: #e8801a; }
#attlab .att-q-q { font-size: 14px; color: var(--ink2); margin-top: 12px; line-height: 1.7; }
#attlab .att-q-q .dim { color: var(--ink3); font-size: 12px; }

/* ========== 补充：向量表 + 向量空间 ========== */
#attlab .att-sec-t { font-size: 13px; font-weight: 800; color: var(--r); margin: 2px 0 8px; line-height: 1.5; }
#attlab .att-vec { border: 1px dashed #f0cfc0; border-radius: 12px; padding: 8px 10px; background: #fffdfc; overflow-x: auto; }
#attlab .att-vrow { display: flex; align-items: center; gap: 3px; padding: 1px 0; min-width: max-content; }
#attlab .att-vw { width: 46px; text-align: center; font-weight: 800; color: #6b4a36; font-size: 15px; flex: none; }
#attlab .att-vhead .att-vw { color: #c9b6a8; }
#attlab .att-vc { width: 38px; text-align: center; font-size: 9px; color: #c9b6a8; flex: none; }
#attlab .att-vcell { width: 38px; height: 28px; border-radius: 7px; font-size: 9.5px; color: #fff; text-align: center;
  line-height: 28px; flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
#attlab .att-spacewrap { border: 1px dashed #f0cfc0; border-radius: 12px; padding: 6px; background: #fffdfc; }
#attlab #attSpace { width: 100%; height: auto; display: block; border-radius: 8px; background: #fffdfb; }

/* 词/CLS 的嵌入向量：每个词 = “一列”8 格，最左列标注每个维度的含义 */
#attlab .att-top { display: flex; align-items: flex-start; }
#attlab .att-lab-gap { flex: none; width: 62px; }
#attlab .att-slot { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
#attlab .att-bot { display: flex; gap: 3px; margin-top: 7px; }
#attlab .att-lab { flex: none; width: 62px; display: flex; flex-direction: column; gap: 1px; }
#attlab .att-lab i { font-style: normal; font-size: 9.5px; font-weight: 700; color: #b9a693; height: 16px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; line-height: 1; }
#attlab .att-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
#attlab .att-emb { display: flex; flex-direction: column; gap: 1px; width: 100%; }
#attlab .att-emb i { display: flex; align-items: center; justify-content: center; width: 100%; height: 16px;
  border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; }

/* 没有注意力 车道 / 两个结论 / ❓判断 */
#attlab .att-noatt { border: 1px dashed #f0cfa0; border-radius: 14px; padding: 10px 14px 12px; background: #fff8f0; margin-bottom: 14px; }
#attlab .att-lane-t { font-size: 12.5px; font-weight: 800; color: #a8763b; margin: 0 2px 8px; line-height: 1.7; }
#attlab .att-lane-t b { color: var(--r); }
#attlab .att-no { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
#attlab .att-no-pill { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 6px 8px 4px;
  border-radius: 10px; background: #f2e7d8; color: #6b4a36; font-weight: 800; }
#attlab .att-no-pill i { font-style: normal; font-size: 12px; margin-top: 2px; }
#attlab .att-no-pill.neg { border: 1.5px dashed var(--r); color: var(--r); }
#attlab .att-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 720px) { #attlab .att-verdicts { grid-template-columns: 1fr; } }
#attlab .att-verdict { border-radius: 14px; padding: 10px 14px; margin-top: 12px; }
#attlab .att-verdict.no { background: #f6efe6; border: 1px dashed #e0cbb0; }
#attlab .att-verdict.yes { background: #fff0e6; border: 1px dashed #f0c8a0; }
#attlab .att-v-t { font-size: 12px; font-weight: 800; color: #a8763b; }
#attlab .att-v-main { font-size: 19px; font-weight: 900; margin: 4px 0 2px; }
#attlab .att-v-main .ok { font-size: 13px; margin-left: 2px; }
#attlab .att-verdict.yes .att-v-main { color: var(--r); }
#attlab .att-verdict.no .att-v-main { color: #7a6a5a; }
#attlab .att-v-sub { font-size: 11.5px; color: #8a7862; line-height: 1.6; }
#attlab .att-w.q { background: #fff0e6; color: #C0392B; }
#attlab .att-w.demo-read { outline: 2px solid rgba(39,174,96,.6); outline-offset: 2px; }
#attlab .att-demo-bar { margin-top: 10px; display: flex; justify-content: center; }
#attlab #attDemoBtn { border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #27ae60, #1e8449); border-radius: 24px; padding: 8px 20px;
  box-shadow: 0 6px 14px -8px rgba(39,174,96,.75); transition: transform .12s; }
#attlab #attDemoBtn:hover { transform: translateY(-1px); }
#attlab #attDemoBtn.running { background: linear-gradient(135deg, #7f8c8d, #95a5a6); }
#attlab .att-demo-msg { font-size: 12.5px; color: #1e8449; line-height: 1.7; margin: 8px 2px 0;
  min-height: 20px; text-align: center; font-weight: 700; }