/* ═══════════════════════════════════════════════════════════
   ixd.css —— 专题篇章「交互工程」篇章令牌
   背景：本章复用审美工程的组件体系（taste.css 的 .toy / .duel /
   .quiz-* / .mock 等全部按 var(--ct-*) 取色），跨章重写一遍
   只会制造第二套漂移源。
   设计意图：taste.css 之后引入，只覆写四个颜色令牌把全章染成
   蓝色，再补交互动画的公共关键帧；组件结构样式一概不重复定义。
   约束：引入顺序必须是 lesson.css → taste.css → ixd.css；
   页面特有样式写在各页 <style> 中。
   ═══════════════════════════════════════════════════════════ */

:root{
  --ct:#2563eb;            /* 章主色：蓝 */
  --ct-deep:#1e40af;       /* 深蓝：正文里的强调字 */
  --ct-soft:rgba(37,99,235,.08);
  --ct-line:rgba(37,99,235,.25);
}

/* ── 交互动画公共关键帧 ──
   本章讲交互，反馈动画就是教材：只在状态跳变时播一次，
   时长 150~350ms；骨架屏等教具类持续动画由各页自带。 */
@keyframes ixd-pop{
  0%{transform:scale(.92);opacity:0;}
  60%{transform:scale(1.03);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes ixd-slide-up{
  from{transform:translateY(12px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
@keyframes ixd-collapse{
  from{max-height:var(--collapse-h,120px);opacity:1;}
  to{max-height:0;opacity:0;margin:0;padding-top:0;padding-bottom:0;}
}
@keyframes ixd-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}
.ixd-pop{animation:ixd-pop .3s cubic-bezier(.34,1.56,.64,1) both;}
.ixd-slide-up{animation:ixd-slide-up .25s ease-out both;}
.ixd-shake{animation:ixd-shake .25s ease-in-out;}

@media (prefers-reduced-motion:reduce){
  .ixd-pop,.ixd-slide-up,.ixd-shake{animation:none;}
}

/* ── 跨章引用卡：重叠知识点不重教，指路去心理学篇 ── */
.xref{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px 20px;border:1.5px dashed var(--ct-line);border-radius:14px;background:var(--ct-soft);text-decoration:none;transition:border-color .18s,transform .18s;}
.xref:hover{border-color:var(--ct);transform:translateY(-2px);}
.xref .xref-ic{width:28px;height:28px;border-radius:9px;background:#fff;color:var(--ct);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.xref .xref-ic svg{width:15px;height:15px;}
.xref .xref-t{font-size:13.5px;font-weight:800;color:var(--ct-deep);margin-bottom:2px;}
.xref .xref-d{font-size:13px;color:var(--sub);line-height:1.7;}