/* XWP 体验增强层 v202608310600 — 滚动动效/进度条/回顶/TOC高亮/移动端/深色统一/静态图文占位 */

/* 全局媒体防溢出：确保任何图片/3D 画布/表格都不撑出视口 */
img,svg,canvas,video{max-width:100%;height:auto;}
pre{overflow-x:auto;white-space:pre-wrap;word-break:break-word;}
table{max-width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* 悬浮按钮分区：分享在左下，目录/回顶在右下，互不遮挡 */
#xwp-share-btn{left:18px!important;right:auto!important;bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;z-index:99990!important;}
.xwp-totop{right:18px!important;left:auto!important;bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;z-index:99970!important;}
.toc-toggle{right:18px!important;left:auto!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;z-index:99999!important;}
@media (prefers-reduced-motion: no-preference){
  .xwp-reveal{opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
  .xwp-reveal.in{opacity:1;transform:none;}
}
.xwp-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99980;
  background:linear-gradient(90deg,#f3e9c8,#d4af37);
  box-shadow:0 0 8px rgba(212,175,55,.6);transition:width .12s ease-out;pointer-events:none;}

.xwp-totop{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
  color:#1a0f2e;background:linear-gradient(135deg,#f3e9c8,#d4af37);
  box-shadow:0 6px 20px rgba(212,175,55,.4);opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .3s,transform .3s;z-index:99970;}
.xwp-totop.show{opacity:1;transform:none;pointer-events:auto;}
.xwp-totop:active{transform:scale(.9);}

/* 3D 画布只在桌面响应指针，移动端允许页面滚动穿过 */
.viz-canvas,.hero-canvas,canvas.stars{touch-action:pan-y;touch-action:pan-y pinch-zoom;-ms-touch-action:pan-y;}
@media (pointer:coarse){
  .viz-canvas,.hero-canvas,canvas.stars{pointer-events:none!important;}
  .viz-canvas+.viz-tags,.viz-canvas~.viz-caption,.viz-hint{pointer-events:none;}
}

/* TOC 当前章节高亮 */
.tut-toc a{position:relative;transition:color .2s, padding-left .2s;}
.tut-toc a.active{color:#d4af37 !important;font-weight:600;padding-left:6px;}
.tut-toc a.active::before{content:"";position:absolute;left:-12px;top:50%;width:6px;height:6px;
  border-radius:50%;background:#d4af37;transform:translateY(-50%);}

/* 卡片/链接 hover 微交互 */
.card,.feature,.step,.chapter{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.card:hover,.feature:hover,.step:hover,.chapter:hover{transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.35);}
a{transition:color .2s;}

/* 移动端安全区与触控 */
@media (max-width:640px){
  .xwp-totop{bottom:calc(86px + env(safe-area-inset-bottom,0px));}
  .toc-toggle{z-index:99999!important;}
  .toc-inner{max-height:78vh;overflow:auto;-webkit-overflow-scrolling:touch;}
}
@media (max-width:900px){
  .toc-toggle{z-index:99999!important;bottom:18px!important;}
}

/* 移动端 3D 降级提示：避免 WebGL 上下文耗尽导致崩溃重载 */
.viz-mobile-fallback{
  position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(107,97,201,.18),rgba(26,19,64,.45));
  border-radius:14px;border:1px dashed rgba(212,175,55,.35);margin:18px 0;overflow:hidden;
}
.viz-mobile-fallback .viz-canvas,
.viz-mobile-fallback .viz-tags{display:none !important;}
.viz-mobile-fallback .viz-caption{
  position:static;transform:none;text-align:center;max-width:86%;
}
.viz-mobile-fallback .viz-caption p{color:#f3e9c8;font-size:15px;line-height:1.7;}
.viz-mobile-fallback::after{
  content:"3D 图解（移动端简览，完整动态版请用电脑端查看）";
  position:absolute;pointer-events:none;color:#a89ec7;font-size:13px;bottom:14px;
}

/* 静态知识点卡：替代原“三维示意”大圆圈；左侧小图腾随知识点变化，右侧标题+说明，横向紧凑排布 */
.static-viz{
  display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(135deg,rgba(110,62,255,.10),rgba(37,17,79,.22));
  border:1px solid rgba(231,200,137,.16);
  border-left:3px solid rgba(231,200,137,.55);
  border-radius:12px; padding:14px 16px; margin:16px 0;
}
.static-viz .sv-motif{ width:42px; height:42px; flex-shrink:0; margin-top:2px; }
.static-viz .sv-motif svg{ width:42px; height:42px; display:block; }
.static-viz .sv-text{ flex:1; min-width:0; }
.static-viz .sv-title{ color:#f3e9c8; font-weight:700; font-size:15px; margin:0 0 6px; line-height:1.4; }
.static-viz figcaption{ color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.7; text-align:left; max-width:none; margin:0; }
.static-viz figcaption p{ margin:.18em 0; }
.static-viz figcaption p:first-child{ color:#fff; font-weight:600; }
/* 要点注记：当某知识点转内联时使用，紧凑不抢眼 */
.kp-note{
  color:rgba(255,255,255,.78); font-size:13.5px; line-height:1.7; margin:12px 0;
  padding:8px 14px; border-left:3px solid rgba(124,140,255,.5);
  background:rgba(124,140,255,.06); border-radius:0 8px 8px 0;
}
.kp-note strong{ color:#cdbc8e; }
@media (max-width:560px){
  .static-viz{ gap:10px; padding:12px; }
  .static-viz .sv-motif, .static-viz .sv-motif svg{ width:34px; height:34px; }
  .static-viz .sv-title{ font-size:14px; }
}

/* 每章记忆锚点：一句话记住本章，放章节标题下方 */
.tut-hook{
  margin:18px 0 26px; padding:15px 20px;
  border-left:3px solid #E7C889;
  background:linear-gradient(90deg,rgba(231,200,137,.12),rgba(231,200,137,.02));
  border-radius:0 12px 12px 0;
  color:#f3e9c8 !important; font-size:16px; line-height:1.85; font-weight:600; letter-spacing:.2px;
}
.tut-hook::before{ content:"🔑 "; font-weight:400; }
@media (max-width:560px){
  .tut-hook{ font-size:15px; padding:13px 16px; margin:14px 0 20px; }
}