/* HeartBug presentation stylesheet 31 (extracted from inline <style>) */

/* 0730 甲方批注：控制按钮/说明零件日常隐藏，鼠标悬停显示（页码不在调整范围，保持常显） */
.ui.nav,.ui.hint,.topbar .mode{opacity:0;transition:opacity .35s var(--ease)}
.ui.nav:hover,.ui.hint:hover,.topbar .mode:hover,
.ui.nav:focus-within,.ui.hint:focus-within,.topbar .mode:focus-within{opacity:1}
/* 扩大悬烧热区：::after 外扩 24px，鼠标扫到角落即现 */
.topbar .mode{position:relative}
.ui.nav::after,.ui.hint::after,.topbar .mode::after{content:"";position:absolute;inset:-24px}
/* 热区伪元素盖在按钮上方会吃掉点击：可点击子元素抬升层级，保证可点（0730-2 修复） */
.ui.nav button,.ui.hint>*,.topbar .mode>*{position:relative;z-index:1}
/* 触屏无悬停：保持半透可发现 */
@media (hover:none){.ui.nav,.ui.hint,.topbar .mode{opacity:.45}}
/* auto 翻页速度调节器（0730-3 批注：放在右下角说明栏） */
.hint .spd{display:flex;align-items:center;gap:6px;margin-right:6px}
.hint .spd button{all:unset;cursor:pointer;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:var(--muted);font-size:13px;line-height:1;display:grid;place-items:center;transition:.3s}
.hint .spd button:hover{color:var(--red);border-color:var(--red)}
.hint .spd b{font-size:10px;color:var(--muted);min-width:30px;text-align:center;letter-spacing:.08em}

/* Keep the slide rail visible while progressively compacting it on smaller screens */
@media(max-width:1400px){
  #rail.rail{
    display:flex !important;
    right:6px;
    max-height:calc(100vh - 24px);
    overflow-y:auto;
    padding-block:4px;
    gap:4px;
    scrollbar-width:none;
  }
  #rail.rail::-webkit-scrollbar{display:none}
  #rail.rail button{gap:6px;padding:2px 0}
  #rail.rail button span{
    display:block !important;
    font-size:8.5px;
    letter-spacing:.09em;
  }
  #rail.rail button i{width:11px}
  #rail.rail button.active i{width:24px}
}

@media(max-width:1080px){
  #rail.rail{right:3px;gap:2px;padding-block:2px}
  #rail.rail button{gap:4px;padding:1px 0}
  #rail.rail button span{
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7px;
    letter-spacing:.05em;
  }
  #rail.rail button i{width:8px}
  #rail.rail button.active i{width:18px}
}

/* iPad touch: switch rail markers immediately so autoplay cannot leave a
   partially highlighted marker from the preceding slide. */
@media (hover:none) and (pointer:coarse) and (max-width:1400px){
  #rail.rail button,
  #rail.rail button span,
  #rail.rail button i{
    transition:none !important;
  }
  #rail.rail button:not(.active){
    opacity:.72 !important;
  }
  #rail.rail button:not(.active) span{
    color:var(--muted) !important;
    opacity:.9 !important;
  }
  #rail.rail button:not(.active) i{
    width:11px !important;
    background:var(--ink) !important;
  }
  #rail.rail button.active{
    opacity:1 !important;
  }
  #rail.rail button.active span{
    color:var(--ink) !important;
    opacity:1 !important;
  }
  #rail.rail button.active i{
    width:24px !important;
    background:var(--red) !important;
  }
}

@media (hover:none) and (pointer:coarse) and (max-width:1080px){
  #rail.rail button:not(.active) i{width:8px !important}
  #rail.rail button.active i{width:18px !important}
}