#modes { height: 989px; padding: 53px 0 110px; background: #111317; text-align: center; }
#modes h2 { margin: 0; font-size: 64px; line-height: 1.2; letter-spacing: -.04em; }
#modes .mode-shell { margin-top: 80px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
#modes .mode-tabs { display: flex; width: min(1005px, 100%); height: 62px; margin: 0 auto; padding: 0; border: 0; border-radius: 999px; overflow-x: auto; background: #323232; }
#modes .mode-tab { flex: 1 0 auto; min-height: 62px; padding: 15px 32px; background: transparent; border: 0; border-radius: 999px; color: rgba(255,255,255,.82); font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
#modes .mode-tab.active { color: #fff; background: #079caf; font-weight: 600; }
#modes .mode-tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
#modes .mode-description { width:min(762px,100%); min-height:17px; margin:20px auto 0; color:#fff; font-size:12px; line-height:17px; }
#modes .mode-stage { width: min(1065px, 100%); height:532px; min-height: 0; margin: 20px auto 0; position: relative; overflow: hidden; border-radius:11px; background: #111317; }
#modes .mode-stage::after { content:""; position:absolute; z-index:3; inset:0; display:block; border-radius:inherit; background:linear-gradient(90deg,#111317 0,rgba(17,19,23,.82) 3%,transparent 10%,transparent 90%,rgba(17,19,23,.82) 97%,#111317 100%); pointer-events:none; }
#modes .mode-rail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#modes .toolhead-layer { position: absolute; inset: 0; overflow: hidden; }
#modes .toolhead-piece { position: absolute; width: 30%; left: 26%; top: 25%; height: auto; pointer-events: none; will-change: transform, opacity; }
#modes .toolhead-piece.slot-right { margin-left: 18%; }
#modes .toolhead-piece.is-entering { animation: toolhead-in 1.5s cubic-bezier(.22,.75,.22,1) both; }
#modes .toolhead-piece.is-exiting { animation: toolhead-out 1.2s cubic-bezier(.55,.05,.8,.45) both; }
@keyframes toolhead-in { from { opacity: 0; transform: translateY(-38%); } to { opacity: 1; transform: translateY(0); } }
@keyframes toolhead-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-38%); } }
@media (prefers-reduced-motion: reduce) {
  #modes .toolhead-piece.is-entering, #modes .toolhead-piece.is-exiting { animation-duration: .01ms; }
}
@media (max-width: 700px) {
  #modes { height:auto; padding:56px 0 68px; overflow:hidden; }
  #modes h2 { padding:0 20px; font-size:34px; line-height:1.12; letter-spacing:-.035em; }
  #modes .mode-shell { margin-top:30px; }
  #modes .mode-tabs {
    width:calc(100% - 40px);
    height:46px;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:100px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  #modes .mode-tabs::-webkit-scrollbar { display:none; }
  #modes .mode-tab {
    flex:0 0 auto;
    min-width:calc((100% - 8px) / 3);
    min-height:46px;
    padding:12px 10px;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  #modes .mode-description {
    width:calc(100% - 48px);
    min-height:40px;
    margin:20px auto 0;
    font-size:13px;
    line-height:1.55;
  }
  #modes .mode-stage { width:calc(100% - 24px); height:auto; aspect-ratio:4 / 3; margin:12px auto 0; border-radius:10px; }
  /* 移动端舞台是 4:3，轨道图(800×450)按宽度铺满、上下留白，刀头需按轨道图的同一比例重新定位，才能对准卡扣 */
  #modes .toolhead-piece { width:33.78%; left:22.97%; top:31.25%; }
  #modes .toolhead-piece.slot-right { margin-left:20.61%; }
}

/* PC 端：文案 / 按钮列表 / 动画区 三者同宽，与第二、第三模块一致（min(1280px,66.666vw)）
   舞台按原比例 1065×532 等比缩放，刀头定位与轨道图的相对关系不变 */
@media (min-width: 701px) {
  #modes { height: auto; }
  #modes > .container { width: min(1280px, 66.666vw); max-width: calc(100vw - 48px); }
  #modes .mode-tabs { width: 100%; }
  #modes .mode-stage { width: 100%; height: auto; aspect-ratio: 1065 / 532; }
}